"use client";

import React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
} from "@/components/ui/dialog";

export const PACKAGE_UNITS = [
  { value: "box", label: "박스", emoji: "📦" },
  { value: "bag", label: "포대", emoji: "🛍️" },
  { value: "pack", label: "팩", emoji: "📋" },
  { value: "bundle", label: "묶음", emoji: "🔗" },
  { value: "roll", label: "롤", emoji: "🧻" },
  { value: "barrel", label: "통", emoji: "🪣" },
] as const;

export type PackageUnit = (typeof PACKAGE_UNITS)[number]["value"];

interface PackageUnitModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSelect: (unit: PackageUnit) => void;
}

export function PackageUnitModal({
  open,
  onOpenChange,
  onSelect,
}: PackageUnitModalProps) {
  const handleSelect = (unit: PackageUnit) => {
    onSelect(unit);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogPortal>
        <DialogOverlay className="z-1050" />

        <DialogPrimitive.Content
          className="bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-1100 w-full max-w-[90vw] translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-lg border shadow-lg duration-200 sm:max-w-[380px]"
        >
          {/* 헤더 */}
          <div className="border-b px-4 py-3 pr-12">
            <h2 className="text-base font-semibold">📦 포장 단위 선택</h2>
          </div>

          {/* 3x2 그리드 */}
          <div className="grid grid-cols-3 gap-3 p-4">
            {PACKAGE_UNITS.map((unit) => (
              <button
                key={unit.value}
                type="button"
                onClick={() => handleSelect(unit.value as PackageUnit)}
                className="hover:bg-muted active:bg-muted/70 flex flex-col items-center justify-center gap-2 rounded-xl border bg-background px-3 py-5 text-sm font-medium transition-colors"
              >
                <span className="text-2xl">{unit.emoji}</span>
                <span>{unit.label}</span>
              </button>
            ))}
          </div>

          {/* X 닫기 버튼 */}
          <DialogClose className="ring-offset-background focus:ring-ring absolute top-3 right-3 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none">
            <X className="h-4 w-4" />
            <span className="sr-only">Close</span>
          </DialogClose>
        </DialogPrimitive.Content>
      </DialogPortal>
    </Dialog>
  );
}