"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";

interface LanguageModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (languageData: any) => void;
  languageData?: any;
}

export default function LanguageModal({ isOpen, onClose, onSave, languageData }: LanguageModalProps) {
  const [formData, setFormData] = useState({
    langCode: "",
    langName: "",
    langNative: "",
    isActive: "Y",
    sortOrder: 0,
  });

  useEffect(() => {
    if (languageData) {
      // 수정 모드
      setFormData({
        langCode: languageData.langCode || "",
        langName: languageData.langName || "",
        langNative: languageData.langNative || "",
        isActive: languageData.isActive || "Y",
        sortOrder: languageData.sortOrder || 0,
      });
    } else {
      // 새 언어 추가 모드
      setFormData({
        langCode: "",
        langName: "",
        langNative: "",
        isActive: "Y",
        sortOrder: 0,
      });
    }
  }, [languageData, isOpen]);

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

  const handleClose = () => {
    setFormData({
      langCode: "",
      langName: "",
      langNative: "",
      isActive: "Y",
      sortOrder: 0,
    });
    onClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>{languageData ? "언어 수정" : "새 언어 추가"}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label htmlFor="langCode">언어 코드</Label>
              <Input
                id="langCode"
                value={formData.langCode}
                onChange={(e) => setFormData({ ...formData, langCode: e.target.value })}
                placeholder="예: ko, en, ja"
                required
                disabled={!!languageData} // 수정 시에는 언어 코드 변경 불가
              />
            </div>
            <div>
              <Label htmlFor="sortOrder">정렬 순서</Label>
              <Input
                id="sortOrder"
                type="number"
                value={formData.sortOrder}
                onChange={(e) => setFormData({ ...formData, sortOrder: parseInt(e.target.value) || 0 })}
                placeholder="0"
                required
              />
            </div>
          </div>

          <div>
            <Label htmlFor="langName">언어명 (영문)</Label>
            <Input
              id="langName"
              value={formData.langName}
              onChange={(e) => setFormData({ ...formData, langName: e.target.value })}
              placeholder="예: Korean, English, Japanese"
              required
            />
          </div>

          <div>
            <Label htmlFor="langNative">언어명 (원어)</Label>
            <Input
              id="langNative"
              value={formData.langNative}
              onChange={(e) => setFormData({ ...formData, langNative: e.target.value })}
              placeholder="예: 한국어, English, 日本語"
              required
            />
          </div>

          <div>
            <Label htmlFor="isActive">활성 상태</Label>
            <Select value={formData.isActive} onValueChange={(value) => setFormData({ ...formData, isActive: value })}>
              <SelectTrigger>
                <SelectValue placeholder="활성 상태 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Y">활성</SelectItem>
                <SelectItem value="N">비활성</SelectItem>
              </SelectContent>
            </Select>
          </div>

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