ERP-node/frontend/components/table-category/AddCategoryColumnDialog.tsx

"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
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 { Checkbox } from "@/components/ui/checkbox";
import { Plus } from "lucide-react";
import { toast } from "sonner";
import { createColumnMapping } from "@/lib/api/tableCategoryValue";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { apiClient } from "@/lib/api/client";

interface SecondLevelMenu {
  menuObjid: number;
  menuName: string;
  parentMenuName: string;
  screenCode?: string;
}

interface AddCategoryColumnDialogProps {
  tableName: string;
  onSuccess: () => void;
}

/**
 * 카테고리 컬럼 추가 다이얼로그
 * 
 * 논리적 컬럼명과 물리적 컬럼명을 매핑하여 메뉴별로 독립적인 카테고리 관리 가능
 * 
 * 2레벨 메뉴를 선택하면 해당 메뉴의 모든 하위 메뉴에서 사용 가능
 */
export function AddCategoryColumnDialog({
  tableName,
  onSuccess,
}: AddCategoryColumnDialogProps) {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [physicalColumns, setPhysicalColumns] = useState<string[]>([]);
  const [secondLevelMenus, setSecondLevelMenus] = useState<SecondLevelMenu[]>([]);
  const [selectedMenus, setSelectedMenus] = useState<number[]>([]);
  const [logicalColumnName, setLogicalColumnName] = useState("");
  const [physicalColumnName, setPhysicalColumnName] = useState("");
  const [description, setDescription] = useState("");

  // 다이얼로그 열릴 때 데이터 로드
  useEffect(() => {
    if (open) {
      loadPhysicalColumns();
      loadSecondLevelMenus();
    }
  }, [open, tableName]);

  // 테이블의 실제 컬럼 목록 조회
  const loadPhysicalColumns = async () => {
    try {
      const response = await tableManagementApi.getTableColumns(tableName);
      if (response.success && response.data) {
        setPhysicalColumns(response.data.map((col: any) => col.columnName));
      }
    } catch (error) {
      console.error("컬럼 목록 조회 실패:", error);
      toast.error("컬럼 목록을 불러올 수 없습니다");
    }
  };

  // 2레벨 메뉴 목록 조회
  const loadSecondLevelMenus = async () => {
    try {
      const response = await apiClient.get<{
        success: boolean;
        data: SecondLevelMenu[];
      }>("table-categories/second-level-menus");
      
      if (response.data.success && response.data.data) {
        setSecondLevelMenus(response.data.data);
      }
    } catch (error) {
      console.error("2레벨 메뉴 목록 조회 실패:", error);
      toast.error("메뉴 목록을 불러올 수 없습니다");
    }
  };

  // 메뉴 선택/해제
  const toggleMenu = (menuObjid: number) => {
    setSelectedMenus((prev) =>
      prev.includes(menuObjid)
        ? prev.filter((id) => id !== menuObjid)
        : [...prev, menuObjid]
    );
  };

  const handleSave = async () => {
    // 입력 검증
    if (!logicalColumnName.trim()) {
      toast.error("논리적 컬럼명을 입력해주세요");
      return;
    }

    if (!physicalColumnName) {
      toast.error("실제 컬럼을 선택해주세요");
      return;
    }

    if (selectedMenus.length === 0) {
      toast.error("최소 하나 이상의 메뉴를 선택해주세요");
      return;
    }

    setLoading(true);

    try {
      // 선택된 각 메뉴에 대해 매핑 생성
      const promises = selectedMenus.map((menuObjid) =>
        createColumnMapping({
          tableName,
          logicalColumnName: logicalColumnName.trim(),
          physicalColumnName,
          menuObjid,
          description: description.trim() || undefined,
        })
      );

      const results = await Promise.all(promises);

      // 모든 요청이 성공했는지 확인
      const failedCount = results.filter((r) => !r.success).length;

      if (failedCount === 0) {
        toast.success(`논리적 컬럼이 ${selectedMenus.length}개 메뉴에 추가되었습니다`);
        setOpen(false);
        resetForm();
        onSuccess();
      } else if (failedCount < results.length) {
        toast.warning(
          `${results.length - failedCount}개 메뉴에 추가 성공, ${failedCount}개 실패`
        );
        onSuccess();
      } else {
        toast.error("모든 메뉴에 대한 매핑 생성에 실패했습니다");
      }
    } catch (error: any) {
      console.error("컬럼 매핑 생성 실패:", error);
      toast.error(error.message || "컬럼 매핑 생성 중 오류가 발생했습니다");
    } finally {
      setLoading(false);
    }
  };

  const resetForm = () => {
    setLogicalColumnName("");
    setPhysicalColumnName("");
    setDescription("");
    setSelectedMenus([]);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm">
          <Plus className="mr-2 h-4 w-4" />
          카테고리 컬럼 추가
        </Button>
      </DialogTrigger>

      <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">
            2레벨 메뉴를 선택하면 해당 메뉴의 모든 하위 메뉴에서 사용할 수 있습니다
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-3 sm:space-y-4">
          {/* 실제 컬럼 선택 */}
          <div>
            <Label className="text-xs sm:text-sm">
              실제 컬럼 (물리적) *
            </Label>
            <Select value={physicalColumnName} onValueChange={setPhysicalColumnName}>
              <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                <SelectValue placeholder="컬럼 선택" />
              </SelectTrigger>
              <SelectContent>
                {physicalColumns.map((col) => (
                  <SelectItem key={col} value={col} className="text-xs sm:text-sm">
                    {col}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
              테이블의 실제 컬럼명
            </p>
          </div>

          {/* 논리적 컬럼명 입력 */}
          <div>
            <Label className="text-xs sm:text-sm">
              논리적 컬럼명 (메뉴별 식별용) *
            </Label>
            <Input
              value={logicalColumnName}
              onChange={(e) => setLogicalColumnName(e.target.value)}
              placeholder="예: status_stock, status_sales"
              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>

          {/* 적용할 2레벨 메뉴 선택 (체크박스) */}
          <div>
            <Label className="text-xs sm:text-sm">
              적용할 메뉴 선택 (2레벨) *
            </Label>
            <div className="border rounded-lg p-3 sm:p-4 space-y-2 max-h-48 overflow-y-auto mt-2">
              {secondLevelMenus.length === 0 ? (
                <p className="text-xs text-muted-foreground">로딩 중...</p>
              ) : (
                secondLevelMenus.map((menu) => (
                  <div key={menu.menuObjid} className="flex items-center gap-2">
                    <Checkbox
                      id={`menu-${menu.menuObjid}`}
                      checked={selectedMenus.includes(menu.menuObjid)}
                      onCheckedChange={() => toggleMenu(menu.menuObjid)}
                      className="h-4 w-4"
                    />
                    <label
                      htmlFor={`menu-${menu.menuObjid}`}
                      className="text-xs sm:text-sm cursor-pointer flex-1"
                    >
                      {menu.parentMenuName} → {menu.menuName}
                    </label>
                  </div>
                ))
              )}
            </div>
            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
              선택한 메뉴의 모든 하위 메뉴에서 이 카테고리를 사용할 수 있습니다
            </p>
            {selectedMenus.length > 0 && (
              <p className="text-primary mt-1 text-[10px] sm:text-xs">
                {selectedMenus.length}개 메뉴 선택됨
              </p>
            )}
          </div>

          {/* 설명 (선택사항) */}
          <div>
            <Label className="text-xs sm:text-sm">설명</Label>
            <Textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="이 컬럼의 용도를 설명하세요 (선택사항)"
              className="text-xs sm:text-sm"
              rows={2}
            />
          </div>
        </div>

        <DialogFooter className="gap-2 sm:gap-0">
          <Button
            variant="outline"
            onClick={() => setOpen(false)}
            disabled={loading}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            취소
          </Button>
          <Button
            onClick={handleSave}
            disabled={!logicalColumnName || !physicalColumnName || selectedMenus.length === 0 || loading}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            {loading ? "추가 중..." : "추가"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}