ERP-node/frontend/components/admin/MenuFormModal.tsx

"use client";

import React, { useState, useEffect } from "react";
import { MenuItem, MenuFormData, menuApi, LangKey } from "@/lib/api/menu";
import { companyAPI } from "@/lib/api/company";
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 { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { toast } from "sonner";
import { getMenuTextSync, MENU_MANAGEMENT_KEYS, setTranslationCache } from "@/lib/utils/multilang";

interface Company {
  company_code: string;
  company_name: string;
  status: string;
}

interface MenuFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
  menuId?: string;
  parentId?: string;
  menuType?: string;
  level?: number;
  parentCompanyCode?: string;
}

export const MenuFormModal: React.FC<MenuFormModalProps> = ({
  isOpen,
  onClose,
  onSuccess,
  menuId,
  parentId,
  menuType,
  level,
  parentCompanyCode,
}) => {
  console.log("🎯 MenuFormModal 렌더링 - Props:", {
    isOpen,
    menuId,
    parentId,
    menuType,
    level,
    parentCompanyCode,
  });

  console.log("🔍 MenuFormModal 컴포넌트 마운트됨");

  const [formData, setFormData] = useState<MenuFormData>({
    parentObjId: parentId || "0",
    menuNameKor: "",
    menuUrl: "",
    menuDesc: "",
    seq: 1,
    menuType: "1",
    status: "ACTIVE",
    companyCode: parentCompanyCode || "none",
    langKey: "",
  });

  const [loading, setLoading] = useState(false);
  const [isEdit, setIsEdit] = useState(false);
  const [companies, setCompanies] = useState<Company[]>([]);
  const [langKeys, setLangKeys] = useState<LangKey[]>([]);
  const [isLangKeyDropdownOpen, setIsLangKeyDropdownOpen] = useState(false);
  const [langKeySearchText, setLangKeySearchText] = useState("");

  // loadMenuData 함수를 먼저 정의
  const loadMenuData = async () => {
    console.log("loadMenuData 호출됨 - menuId:", menuId);
    if (!menuId) {
      console.log("menuId가 없어서 loadMenuData 종료");
      return;
    }

    try {
      setLoading(true);
      console.log("API 호출 시작 - menuId:", menuId);
      console.log("API URL:", `/admin/menus/${menuId}`);

      const response = await menuApi.getMenuInfo(menuId);
      console.log("메뉴 정보 조회 응답:", response);
      console.log("응답 success:", response.success);
      console.log("응답 data:", response.data);
      console.log("응답 message:", response.message);
      console.log("응답 errorCode:", response.errorCode);

      if (response.success && response.data) {
        const menu = response.data;
        console.log("메뉴 데이터:", menu);
        console.log("메뉴 데이터 키들:", Object.keys(menu));

        // 대문자 키와 소문자 키 모두 처리
        const menuType = menu.menu_type || menu.MENU_TYPE || "1";
        const status = menu.status || menu.STATUS || "active";
        const companyCode = menu.company_code || menu.COMPANY_CODE || "";
        const langKey = menu.lang_key || menu.LANG_KEY || "";

        // 메뉴 타입 변환 (admin/user -> 0/1)
        let convertedMenuType = menuType;
        if (menuType === "admin" || menuType === "0") {
          convertedMenuType = "0";
        } else if (menuType === "user" || menuType === "1") {
          convertedMenuType = "1";
        }

        // 상태 변환 (active/inactive/inActive -> ACTIVE/INACTIVE)
        let convertedStatus = status;
        if (status === "active") {
          convertedStatus = "ACTIVE";
        } else if (status === "inactive" || status === "inActive") {
          convertedStatus = "INACTIVE";
        }

        setFormData({
          objid: menu.objid || menu.OBJID,
          parentObjId: menu.parent_obj_id || menu.PARENT_OBJ_ID || "0",
          menuNameKor: menu.menu_name_kor || menu.MENU_NAME_KOR || "",
          menuUrl: menu.menu_url || menu.MENU_URL || "",
          menuDesc: menu.menu_desc || menu.MENU_DESC || "",
          seq: menu.seq || menu.SEQ || 1,
          menuType: convertedMenuType,
          status: convertedStatus,
          companyCode: companyCode,
          langKey: langKey, // 다국어 키 설정
        });

        console.log("설정된 폼 데이터:", {
          objid: menu.objid || menu.OBJID,
          parentObjId: menu.parent_obj_id || menu.PARENT_OBJ_ID || "0",
          menuNameKor: menu.menu_name_kor || menu.MENU_NAME_KOR || "",
          menuUrl: menu.menu_url || menu.MENU_URL || "",
          menuDesc: menu.menu_desc || menu.MENU_DESC || "",
          seq: menu.seq || menu.SEQ || 1,
          menuType: convertedMenuType,
          status: convertedStatus,
          companyCode: companyCode,
          langKey: langKey,
        });
      }
    } catch (error: any) {
      console.error("메뉴 정보 로딩 오류:", error);
      console.error("오류 상세 정보:", {
        message: error?.message,
        stack: error?.stack,
        response: error?.response,
      });
      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_MENU_INFO));
    } finally {
      setLoading(false);
    }
  };

  // useEffect를 loadMenuData 함수 정의 후로 이동
  useEffect(() => {
    console.log("🚀 MenuFormModal useEffect 실행됨!");
    console.log("📋 useEffect 파라미터:", { menuId, parentId, menuType });
    console.log("MenuFormModal useEffect - menuId:", menuId, "parentId:", parentId, "menuType:", menuType);

    if (menuId) {
      console.log("메뉴 수정 모드 - menuId:", menuId);
      setIsEdit(true);
      loadMenuData();
    } else {
      console.log("메뉴 등록 모드 - parentId:", parentId, "menuType:", menuType);
      setIsEdit(false);

      // 메뉴 타입 변환 (0 -> 0, 1 -> 1, admin -> 0, user -> 1)
      let defaultMenuType = "1"; // 기본값은 사용자
      if (menuType === "0" || menuType === "admin") {
        defaultMenuType = "0"; // 관리자
      } else if (menuType === "1" || menuType === "user") {
        defaultMenuType = "1"; // 사용자
      }

      setFormData({
        parentObjId: parentId || "0",
        menuNameKor: "",
        menuUrl: "",
        menuDesc: "",
        seq: 1,
        menuType: defaultMenuType,
        status: "ACTIVE", // 기본값은 활성화
        companyCode: parentCompanyCode || "none", // 상위 메뉴의 회사 코드를 기본값으로 설정
        langKey: "", // 다국어 키 초기화
      });

      console.log("메뉴 등록 기본값 설정:", {
        parentObjId: parentId || "0",
        menuType: defaultMenuType,
        status: "ACTIVE",
        companyCode: "",
        langKey: "",
      });
    }
  }, [menuId, parentId, menuType]);

  // 강제로 useEffect 실행시키기 위한 별도 useEffect
  useEffect(() => {
    console.log("🔧 강제 useEffect 실행 - 컴포넌트 마운트됨");
    console.log("🔧 현재 props:", { isOpen, menuId, parentId, menuType });

    // isOpen이 true일 때만 실행
    if (isOpen && menuId) {
      console.log("🔧 모달이 열렸고 menuId가 있음 - 강제 실행");
      // 약간의 지연 후 실행
      setTimeout(() => {
        console.log("🔧 setTimeout으로 loadMenuData 실행");
        loadMenuData();
      }, 100);
    }
  }, [isOpen]); // isOpen만 의존성으로 설정

  // 회사 목록 로드
  useEffect(() => {
    if (isOpen) {
      loadCompanies();
    }
  }, [isOpen]);

  // 다국어 키 목록 로드
  useEffect(() => {
    if (isOpen && formData.companyCode) {
      loadLangKeys();
    }
  }, [isOpen, formData.companyCode]);

  // 드롭다운 외부 클릭 시 닫기
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Element;
      if (!target.closest(".langkey-dropdown")) {
        setIsLangKeyDropdownOpen(false);
        setLangKeySearchText("");
      }
    };

    if (isLangKeyDropdownOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isLangKeyDropdownOpen]);

  const loadCompanies = async () => {
    try {
      const companyList = await companyAPI.getList({ status: "active" });
      setCompanies(companyList);
    } catch (error) {
      console.error("회사 목록 로딩 오류:", error);
      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_COMPANY_LIST));
    }
  };

  const loadLangKeys = async () => {
    console.log("🔤 다국어 키 목록 조회 시작 - companyCode:", formData.companyCode);
    try {
      const response = await menuApi.getLangKeys({
        companyCode: formData.companyCode === "none" ? "*" : formData.companyCode,
      });

      if (response.success && response.data) {
        // 활성화된 다국어 키만 필터링
        const activeKeys = response.data.filter((key) => key.isActive === "Y");
        console.log("🔤 다국어 키 목록 조회 성공:", activeKeys.length, "개 (활성화된 키)");
        setLangKeys(activeKeys);
      }
    } catch (error) {
      console.error("❌ 다국어 키 목록 로딩 오류:", error);
      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_LANG_KEY_LIST));
      setLangKeys([]);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!formData.menuNameKor.trim()) {
      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_VALIDATION_MENU_NAME_REQUIRED));
      return;
    }

    if (!formData.companyCode) {
      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_VALIDATION_COMPANY_REQUIRED));
      return;
    }

    try {
      setLoading(true);

      // 백엔드에 전송할 데이터 변환
      const submitData = {
        ...formData,
        // 상태를 소문자로 변환 (백엔드에서 소문자 기대)
        status: formData.status.toLowerCase(),
      };

      console.log("저장할 데이터:", submitData);

      let response;

      if (isEdit && menuId) {
        // 수정 모드: updateMenu API 호출
        console.log("🔧 메뉴 수정 API 호출:", menuId);
        response = await menuApi.updateMenu(menuId, submitData);
      } else {
        // 추가 모드: saveMenu API 호출
        console.log("➕ 메뉴 추가 API 호출");
        response = await menuApi.saveMenu(submitData);
      }

      if (response.success) {
        toast.success(response.message);
        onSuccess();
        onClose();
      } else {
        toast.error(response.message);
      }
    } catch (error) {
      console.error("메뉴 저장/수정 실패:", error);
      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_MENU_SAVE_FAILED));
    } finally {
      setLoading(false);
    }
  };

  const handleInputChange = (field: keyof MenuFormData, value: string | number) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  // 선택된 다국어 키 정보 가져오기
  const getSelectedLangKeyInfo = () => {
    if (!formData.langKey) return null;
    return langKeys.find((key) => key.langKey === formData.langKey);
  };

  const selectedLangKeyInfo = getSelectedLangKeyInfo();

  // 전역 사용자 로케일 가져오기
  const getCurrentUserLang = () => {
    return (window as any).__GLOBAL_USER_LANG || localStorage.getItem("userLocale") || "KR";
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>
            {isEdit
              ? getMenuTextSync(MENU_MANAGEMENT_KEYS.MODAL_MENU_MODIFY_TITLE, getCurrentUserLang())
              : getMenuTextSync(MENU_MANAGEMENT_KEYS.MODAL_MENU_REGISTER_TITLE, getCurrentUserLang())}
          </DialogTitle>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="menuType">
                {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_TYPE, getCurrentUserLang())}
              </Label>
              <Select value={formData.menuType} onValueChange={(value) => handleInputChange("menuType", value)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="0">
                    {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_TYPE_ADMIN, getCurrentUserLang())}
                  </SelectItem>
                  <SelectItem value="1">
                    {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_TYPE_USER, getCurrentUserLang())}
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="status">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_STATUS, getCurrentUserLang())}</Label>
              <Select value={formData.status} onValueChange={(value) => handleInputChange("status", value)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="ACTIVE">
                    {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_STATUS_ACTIVE, getCurrentUserLang())}
                  </SelectItem>
                  <SelectItem value="INACTIVE">
                    {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_STATUS_INACTIVE, getCurrentUserLang())}
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="companyCode">
              {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY, getCurrentUserLang())} *
            </Label>
            <Select
              value={formData.companyCode}
              onValueChange={(value) => handleInputChange("companyCode", value)}
              disabled={!isEdit && level !== 1} // 수정 모드가 아니고 최상위 메뉴가 아니면 비활성화
            >
              <SelectTrigger>
                <SelectValue
                  placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SELECT, getCurrentUserLang())}
                />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="none">
                  {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_COMMON, getCurrentUserLang())}
                </SelectItem>
                {companies.map((company) => (
                  <SelectItem key={company.company_code} value={company.company_code}>
                    {company.company_name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            {!isEdit && level !== 1 && (
              <p className="text-xs text-gray-500">
                {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SUBMENU_NOTE, getCurrentUserLang())}
              </p>
            )}
          </div>

          <div className="space-y-2">
            <Label htmlFor="langKey">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY, getCurrentUserLang())}</Label>
            <div className="langkey-dropdown relative">
              <button
                type="button"
                onClick={() => setIsLangKeyDropdownOpen(!isLangKeyDropdownOpen)}
                className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                disabled={!formData.companyCode}
              >
                <span className={!formData.langKey ? "text-muted-foreground" : ""}>
                  {formData.langKey || getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SELECT, getCurrentUserLang())}
                </span>
                <svg
                  className={`h-4 w-4 transition-transform ${isLangKeyDropdownOpen ? "rotate-180" : ""}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>

              {isLangKeyDropdownOpen && (
                <div className="bg-popover text-popover-foreground absolute top-full left-0 z-50 mt-1 w-full rounded-md border shadow-md">
                  {/* 검색 입력 */}
                  <div className="border-b p-2">
                    <Input
                      placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SEARCH, getCurrentUserLang())}
                      value={langKeySearchText}
                      onChange={(e) => setLangKeySearchText(e.target.value)}
                      className="h-8 text-sm"
                      onClick={(e) => e.stopPropagation()}
                    />
                  </div>

                  {/* 다국어 키 목록 */}
                  <div className="max-h-48 overflow-y-auto">
                    <div
                      className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center px-2 py-1.5 text-sm"
                      onClick={() => {
                        handleInputChange("langKey", "");
                        setIsLangKeyDropdownOpen(false);
                        setLangKeySearchText("");
                      }}
                    >
                      {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_NONE, getCurrentUserLang())}
                    </div>

                    {langKeys
                      .filter(
                        (key) =>
                          key.langKey.toLowerCase().includes(langKeySearchText.toLowerCase()) ||
                          key.description.toLowerCase().includes(langKeySearchText.toLowerCase()),
                      )
                      .map((key) => (
                        <div
                          key={key.keyId}
                          className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer flex-col px-2 py-1.5 text-sm"
                          onClick={() => {
                            handleInputChange("langKey", key.langKey);
                            setIsLangKeyDropdownOpen(false);
                            setLangKeySearchText("");
                          }}
                        >
                          <div className="font-medium">{key.langKey}</div>
                          {key.description && <div className="text-xs text-gray-500">{key.description}</div>}
                        </div>
                      ))}
                  </div>
                </div>
              )}
            </div>
            {selectedLangKeyInfo && (
              <p className="text-xs text-gray-500">
                {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SELECTED, {
                  key: selectedLangKeyInfo.langKey,
                  description: selectedLangKeyInfo.description,
                })}
              </p>
            )}
          </div>

          <div className="space-y-2">
            <Label htmlFor="menuNameKor">
              {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_NAME, getCurrentUserLang())} *
            </Label>
            <Input
              id="menuNameKor"
              value={formData.menuNameKor}
              onChange={(e) => handleInputChange("menuNameKor", e.target.value)}
              placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_NAME_PLACEHOLDER, getCurrentUserLang())}
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="menuUrl">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_URL, getCurrentUserLang())}</Label>
            <Input
              id="menuUrl"
              value={formData.menuUrl}
              onChange={(e) => handleInputChange("menuUrl", e.target.value)}
              placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_URL_PLACEHOLDER, getCurrentUserLang())}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="menuDesc">
              {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_DESCRIPTION, getCurrentUserLang())}
            </Label>
            <Textarea
              id="menuDesc"
              value={formData.menuDesc}
              onChange={(e) => handleInputChange("menuDesc", e.target.value)}
              placeholder={getMenuTextSync(
                MENU_MANAGEMENT_KEYS.FORM_MENU_DESCRIPTION_PLACEHOLDER,
                getCurrentUserLang(),
              )}
              rows={3}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="seq">
              {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_SEQUENCE, getCurrentUserLang())}
            </Label>
            <Input
              id="seq"
              type="number"
              value={formData.seq}
              onChange={(e) => handleInputChange("seq", parseInt(e.target.value) || 1)}
              min="1"
            />
          </div>

          <div className="flex justify-end space-x-2 pt-4">
            <Button type="button" variant="outline" onClick={onClose}>
              {getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_CANCEL, getCurrentUserLang())}
            </Button>
            <Button type="submit" disabled={loading}>
              {loading
                ? getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_SAVE_PROCESSING, getCurrentUserLang())
                : isEdit
                  ? getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_MODIFY, getCurrentUserLang())
                  : getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_REGISTER, getCurrentUserLang())}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
};