"use client";

import { useState, useEffect } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";

interface LangKeyModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (keyData: any) => void;
  keyData?: any;
  companies: Array<{ code: string; name: string }>;
}

export default function LangKeyModal({ isOpen, onClose, onSave, keyData, companies }: LangKeyModalProps) {
  const [formData, setFormData] = useState({
    companyCode: "",
    menuName: "",
    langKey: "",
    description: "",
  });

  useEffect(() => {
    if (keyData) {
      // 수정 모드
      setFormData({
        companyCode: keyData.companyCode || "",
        menuName: keyData.menuName || "",
        langKey: keyData.langKey || "",
        description: keyData.description || "",
      });
    } else {
      // 새 키 추가 모드 - 기본값 설정
      setFormData({
        companyCode: "",
        menuName: "",
        langKey: "",
        description: "",
      });
    }
  }, [keyData, isOpen]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(formData);
  };

  const handleClose = () => {
    setFormData({
      companyCode: "",
      menuName: "",
      langKey: "",
      description: "",
    });
    onClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>{keyData ? "언어 키 수정" : "새 언어 키 추가"}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <Label htmlFor="companyCode">회사</Label>
            <Select
              value={formData.companyCode}
              onValueChange={(value) => setFormData({ ...formData, companyCode: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="회사 선택" />
              </SelectTrigger>
              <SelectContent>
                {companies.map((company) => (
                  <SelectItem key={company.code} value={company.code}>
                    {company.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div>
            <Label htmlFor="menuName">메뉴명</Label>
            <Input
              id="menuName"
              value={formData.menuName}
              onChange={(e) => setFormData({ ...formData, menuName: e.target.value })}
              placeholder="메뉴명 입력"
              required
            />
          </div>

          <div>
            <Label htmlFor="langKey">언어 키</Label>
            <Input
              id="langKey"
              value={formData.langKey}
              onChange={(e) => setFormData({ ...formData, langKey: e.target.value })}
              placeholder="언어 키 입력"
              required
            />
          </div>

          <div>
            <Label htmlFor="description">설명</Label>
            <Textarea
              id="description"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              placeholder="키에 대한 설명 입력"
              rows={3}
            />
          </div>

          <div className="flex justify-end space-x-2">
            <Button type="button" variant="outline" onClick={handleClose}>
              취소
            </Button>
            <Button type="submit">{keyData ? "수정" : "추가"}</Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}