invyone/frontend/components/multilang/LangKeyModal.tsx

"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";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { apiClient } from "@/lib/api/client";

interface Language {
  lang_code: string;
  lang_name: string;
  lang_native: string;
}

interface LangKey {
  key_id?: number;
  company_code: string;
  menu_code: string;
  lang_key: string;
  key_type: string;
  description: string;
  is_active: string;
}

interface LangText {
  text_id?: number;
  key_id?: number;
  lang_code: string;
  lang_text: string;
  is_active: string;
}

interface LangKeyModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  langKey?: LangKey;
  languages: Language[];
  companies: { code: string; name: string }[];
  menus: { code: string; name: string }[];
  keyTypes: { code: string; name: string }[];
  onSave: (keyData: LangKey, textData: LangText[]) => void;
}

export function LangKeyModal({
  open,
  onOpenChange,
  langKey,
  languages,
  companies,
  menus,
  keyTypes,
  onSave,
}: LangKeyModalProps) {
  const [keyData, setKeyData] = useState<LangKey>({
    company_code: "",
    menu_code: "",
    lang_key: "",
    key_type: "TEXT",
    description: "",
    is_active: "Y",
  });
  const [textData, setTextData] = useState<LangText[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (langKey) {
      setKeyData(langKey);
      fetchLangTexts(langKey.key_id!);
    } else {
      setKeyData({
        company_code: "",
        menu_code: "",
        lang_key: "",
        key_type: "TEXT",
        description: "",
        is_active: "Y",
      });
      initializeTextData();
    }
  }, [langKey, open]);

  const initializeTextData = () => {
    const initialTexts = languages.map((lang) => ({
      lang_code: lang.lang_code,
      lang_text: "",
      is_active: "Y",
    }));
    setTextData(initialTexts);
  };

  const fetchLangTexts = async (keyId: number) => {
    try {
      const response = await apiClient.get(`/api/admin/multilang/keys/${keyId}/texts`);
      const data = response.data;
      if (data.success) {
        const texts = data.data;
        const allTexts = languages.map((lang) => {
          const existingText = texts.find((t: LangText) => t.lang_code === lang.lang_code);
          return (
            existingText || {
              lang_code: lang.lang_code,
              lang_text: "",
              is_active: "Y",
            }
          );
        });
        setTextData(allTexts);
      }
    } catch (error) {
      console.error("다국어 텍스트 조회 실패:", error);
      initializeTextData();
    }
  };

  const handleSave = async () => {
    if (!keyData.company_code || !keyData.menu_code || !keyData.lang_key) {
      alert("필수 항목을 입력해주세요.");
      return;
    }

    setLoading(true);
    try {
      await onSave(keyData, textData);
      onOpenChange(false);
    } catch (error) {
      console.error("저장 실패:", error);
      alert("저장에 실패했습니다.");
    } finally {
      setLoading(false);
    }
  };

  const updateTextData = (langCode: string, value: string) => {
    setTextData((prev) => prev.map((text) => (text.lang_code === langCode ? { ...text, lang_text: value } : text)));
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden">
        <DialogHeader>
          <DialogTitle>{langKey ? "다국어 키 수정" : "새 다국어 키 추가"}</DialogTitle>
        </DialogHeader>

        <div className="space-y-6">
          {/* 키 정보 */}
          <Card>
            <CardHeader>
              <CardTitle>키 정보</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="company_code">회사 *</Label>
                  <Select
                    value={keyData.company_code}
                    onValueChange={(value) => setKeyData((prev) => ({ ...prev, company_code: 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="menu_code">메뉴 *</Label>
                  <Select
                    value={keyData.menu_code}
                    onValueChange={(value) => setKeyData((prev) => ({ ...prev, menu_code: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="메뉴 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      {menus.map((menu) => (
                        <SelectItem key={menu.code} value={menu.code}>
                          {menu.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="lang_key">언어 키 *</Label>
                  <Input
                    id="lang_key"
                    value={keyData.lang_key}
                    onChange={(e) => setKeyData((prev) => ({ ...prev, lang_key: e.target.value }))}
                    placeholder="예: menu.dashboard, button.save"
                  />
                </div>
                <div>
                  <Label htmlFor="key_type">키 타입</Label>
                  <Select
                    value={keyData.key_type}
                    onValueChange={(value) => setKeyData((prev) => ({ ...prev, key_type: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {keyTypes.map((type) => (
                        <SelectItem key={type.code} value={type.code}>
                          {type.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div>
                <Label htmlFor="description">설명</Label>
                <Textarea
                  id="description"
                  value={keyData.description}
                  onChange={(e) => setKeyData((prev) => ({ ...prev, description: e.target.value }))}
                  placeholder="키에 대한 설명을 입력하세요"
                  rows={3}
                />
              </div>
            </CardContent>
          </Card>

          {/* 다국어 텍스트 */}
          <Card>
            <CardHeader>
              <CardTitle>다국어 텍스트</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {textData.map((text, index) => (
                  <div key={text.lang_code} className="flex items-center space-x-4">
                    <div className="w-24">
                      <Badge variant="outline" className="w-full justify-center">
                        {languages.find((l) => l.lang_code === text.lang_code)?.lang_name}
                      </Badge>
                    </div>
                    <div className="flex-1">
                      <Input
                        value={text.lang_text}
                        onChange={(e) => updateTextData(text.lang_code, e.target.value)}
                        placeholder={`${languages.find((l) => l.lang_code === text.lang_code)?.lang_name} 텍스트 입력`}
                      />
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* 버튼 */}
          <div className="flex justify-end space-x-2">
            <Button variant="outline" onClick={() => onOpenChange(false)}>
              취소
            </Button>
            <Button onClick={handleSave} disabled={loading}>
              {loading ? "저장 중..." : "저장"}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}