"use client";

import React, { useState, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { TableCategoryValue } from "@/types/tableCategoryValue";

interface CategoryValueEditDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  value: TableCategoryValue;
  onUpdate: (valueId: number, updates: Partial<TableCategoryValue>) => void;
  columnLabel: string;
}

// 기본 색상 팔레트
const DEFAULT_COLORS = [
  "#ef4444", // red
  "#f97316", // orange
  "#f59e0b", // amber
  "#eab308", // yellow
  "#84cc16", // lime
  "#22c55e", // green
  "#10b981", // emerald
  "#14b8a6", // teal
  "#06b6d4", // cyan
  "#0ea5e9", // sky
  "#3b82f6", // blue
  "#6366f1", // indigo
  "#8b5cf6", // violet
  "#a855f7", // purple
  "#d946ef", // fuchsia
  "#ec4899", // pink
  "#64748b", // slate
  "#6b7280", // gray
];

export const CategoryValueEditDialog: React.FC<
  CategoryValueEditDialogProps
> = ({ open, onOpenChange, value, onUpdate, columnLabel }) => {
  const [valueLabel, setValueLabel] = useState(value.valueLabel);
  const [description, setDescription] = useState(value.description || "");
  const [color, setColor] = useState(value.color || "none");

  useEffect(() => {
    setValueLabel(value.valueLabel);
    setDescription(value.description || "");
    setColor(value.color || "none");
  }, [value]);

  const handleSubmit = () => {
    if (!valueLabel.trim()) {
      return;
    }

    onUpdate(value.valueId!, {
      valueLabel: valueLabel.trim(),
      description: description.trim() || undefined, // 빈 문자열 대신 undefined
      color: color === "none" ? null : color, // "none"은 null로 (배지 없음)
    });
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle className="text-base sm:text-lg">
            카테고리 값 편집
          </DialogTitle>
          <DialogDescription className="text-xs sm:text-sm">
            {columnLabel} - {value.valueCode}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-3 sm:space-y-4">
          <div>
            <Label htmlFor="valueLabel" className="text-xs sm:text-sm">
              이름
            </Label>
            <Input
              id="valueLabel"
              placeholder="예: 개발, 긴급, 진행중"
              value={valueLabel}
              onChange={(e) => setValueLabel(e.target.value)}
              className="h-8 text-xs sm:h-10 sm:text-sm mt-1.5"
              autoFocus
            />
          </div>

          <div>
            <Label className="text-xs sm:text-sm">배지 색상</Label>
            <div className="mt-1.5 space-y-2">
              <div className="flex items-center gap-3">
                <div className="grid grid-cols-9 gap-2">
                  {DEFAULT_COLORS.map((c) => (
                    <button
                      key={c}
                      type="button"
                      onClick={() => setColor(c)}
                      className={`h-7 w-7 rounded-md border-2 transition-all ${
                        color === c ? "border-foreground scale-110" : "border-transparent hover:scale-105"
                      }`}
                      style={{ backgroundColor: c }}
                      title={c}
                    />
                  ))}
                </div>
                {color && color !== "none" ? (
                  <Badge style={{ backgroundColor: color, borderColor: color }} className="text-white">
                    미리보기
                  </Badge>
                ) : (
                  <span className="text-xs text-muted-foreground">배지 없음</span>
                )}
              </div>
              <button
                type="button"
                onClick={() => setColor("none")}
                className={`text-xs px-3 py-1.5 rounded-md border transition-colors ${
                  color === "none"
                    ? "border-primary bg-primary/10 text-primary font-medium"
                    : "border-border hover:bg-accent"
                }`}
              >
                배지 없음
              </button>
            </div>
          </div>

          <div>
            <Label htmlFor="description" className="text-xs sm:text-sm">
              설명 (선택사항)
            </Label>
            <Textarea
              id="description"
              placeholder="설명을 입력하세요"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              className="text-xs sm:text-sm mt-1.5"
              rows={3}
            />
          </div>
        </div>

        <DialogFooter className="gap-2 sm:gap-0">
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            취소
          </Button>
          <Button
            onClick={handleSubmit}
            disabled={!valueLabel.trim()}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            저장
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};