"use client";

import React, { useState } 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 { Checkbox } from "@/components/ui/checkbox";
import { TableCategoryValue } from "@/types/tableCategoryValue";

interface CategoryValueAddDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onAdd: (value: TableCategoryValue) => void;
  columnLabel: string;
}

export const CategoryValueAddDialog: React.FC<
  CategoryValueAddDialogProps
> = ({ open, onOpenChange, onAdd, columnLabel }) => {
  const [valueCode, setValueCode] = useState("");
  const [valueLabel, setValueLabel] = useState("");
  const [description, setDescription] = useState("");
  const [color, setColor] = useState("#3b82f6");
  const [isDefault, setIsDefault] = useState(false);

  const handleSubmit = () => {
    if (!valueCode || !valueLabel) {
      return;
    }

    onAdd({
      tableName: "",
      columnName: "",
      valueCode: valueCode.toUpperCase(),
      valueLabel,
      description,
      color,
      isDefault,
    });

    // 초기화
    setValueCode("");
    setValueLabel("");
    setDescription("");
    setColor("#3b82f6");
    setIsDefault(false);
  };

  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}에 새로운 값을 추가합니다
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-3 sm:space-y-4">
          <div>
            <Label htmlFor="valueCode" className="text-xs sm:text-sm">
              코드 *
            </Label>
            <Input
              id="valueCode"
              placeholder="예: DEV, URGENT"
              value={valueCode}
              onChange={(e) => setValueCode(e.target.value.toUpperCase())}
              className="h-8 text-xs sm:h-10 sm:text-sm"
            />
            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
              영문 대문자와 언더스코어만 사용 (DB 저장값)
            </p>
          </div>

          <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"
            />
            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
              사용자에게 표시될 이름
            </p>
          </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"
              rows={3}
            />
          </div>

          <div>
            <Label htmlFor="color" className="text-xs sm:text-sm">
              색상
            </Label>
            <div className="flex gap-2">
              <Input
                id="color"
                type="color"
                value={color}
                onChange={(e) => setColor(e.target.value)}
                className="h-8 w-16 sm:h-10"
              />
              <Input
                type="text"
                value={color}
                onChange={(e) => setColor(e.target.value)}
                className="h-8 flex-1 text-xs sm:h-10 sm:text-sm"
              />
            </div>
          </div>

          <div className="flex items-center gap-2">
            <Checkbox
              id="isDefault"
              checked={isDefault}
              onCheckedChange={(checked) => setIsDefault(checked as boolean)}
            />
            <Label htmlFor="isDefault" className="text-xs sm:text-sm">
              기본값으로 설정
            </Label>
          </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={!valueCode || !valueLabel}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            추가
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};