"use client";

import React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { X } from "lucide-react";
import {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTitle,
} from "@/components/ui/dialog";
import type { CustomPackageUnit } from "../types";

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: string) => void;
  enabledUnits?: string[];
  customUnits?: CustomPackageUnit[];
}

export function PackageUnitModal({
  open,
  onOpenChange,
  onSelect,
  enabledUnits,
  customUnits,
}: PackageUnitModalProps) {
  const handleSelect = (unitValue: string) => {
    onSelect(unitValue);
    onOpenChange(false);
  };

  // enabledUnits가 undefined면 전체 표시, 배열이면 필터링
  const filteredDefaults = enabledUnits
    ? PACKAGE_UNITS.filter((u) => enabledUnits.includes(u.value))
    : [...PACKAGE_UNITS];

  const allUnits = [
    ...filteredDefaults.map((u) => ({ value: u.value, label: u.label, emoji: u.emoji })),
    ...(customUnits || []).map((cu) => ({ value: cu.id, label: cu.label, emoji: "📦" })),
  ];

  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]"
        >
          <VisuallyHidden><DialogTitle>포장 단위 선택</DialogTitle></VisuallyHidden>
          <div className="border-b px-4 py-3 pr-12">
            <h2 className="text-base font-semibold">포장 단위 선택</h2>
          </div>

          <div className="grid grid-cols-3 gap-3 p-4">
            {allUnits.map((unit) => (
              <button
                key={unit.value}
                type="button"
                onClick={() => handleSelect(unit.value)}
                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>

          {allUnits.length === 0 && (
            <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
              사용 가능한 포장 단위가 없습니다
            </div>
          )}

          <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>
  );
}