ERP-node/frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx

"use client";

import React, { useState, useEffect, useMemo, useCallback } from "react";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { Check, ChevronsUpDown, Table2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { tableTypeApi } from "@/lib/api/screen";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { ApprovalStepConfig } from "./types";

export interface ApprovalStepConfigPanelProps {
  config: ApprovalStepConfig;
  onChange: (config: Partial<ApprovalStepConfig>) => void;
  tables?: any[];
  allTables?: any[];
  screenTableName?: string;
  tableColumns?: any[];
}

export const ApprovalStepConfigPanel: React.FC<ApprovalStepConfigPanelProps> = ({
  config,
  onChange,
  screenTableName,
}) => {
  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
  const [availableColumns, setAvailableColumns] = useState<Array<{ columnName: string; label: string }>>([]);
  const [loadingColumns, setLoadingColumns] = useState(false);
  const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);

  const handleChange = (key: keyof ApprovalStepConfig, value: any) => {
    onChange({ [key]: value });
  };

  const targetTableName = config.targetTable || screenTableName;

  // 테이블 목록 가져오기 - tableTypeApi 사용 (다른 ConfigPanel과 동일)
  useEffect(() => {
    const fetchTables = async () => {
      setLoadingTables(true);
      try {
        const response = await tableTypeApi.getTables();
        setAvailableTables(
          response.map((table: any) => ({
            tableName: table.tableName,
            displayName: table.displayName || table.tableName,
          }))
        );
      } catch (error) {
        console.error("테이블 목록 가져오기 실패:", error);
      } finally {
        setLoadingTables(false);
      }
    };
    fetchTables();
  }, []);

  // 선택된 테이블의 컬럼 로드 - tableManagementApi 사용 (다른 ConfigPanel과 동일)
  useEffect(() => {
    if (!targetTableName) {
      setAvailableColumns([]);
      return;
    }

    const fetchColumns = async () => {
      setLoadingColumns(true);
      try {
        const result = await tableManagementApi.getColumnList(targetTableName);
        if (result.success && result.data) {
          const columns = Array.isArray(result.data) ? result.data : result.data.columns;
          if (columns && Array.isArray(columns)) {
            setAvailableColumns(
              columns.map((col: any) => ({
                columnName: col.columnName || col.column_name || col.name,
                label: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name || col.name,
              }))
            );
          }
        }
      } catch (error) {
        console.error("컬럼 목록 가져오기 실패:", error);
        setAvailableColumns([]);
      } finally {
        setLoadingColumns(false);
      }
    };
    fetchColumns();
  }, [targetTableName]);

  const handleTableChange = (newTableName: string) => {
    if (newTableName === targetTableName) return;
    handleChange("targetTable", newTableName);
    handleChange("targetRecordIdField", "");
    setTableComboboxOpen(false);
  };

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">결재 단계 설정</div>

      <div className="space-y-6">
        {/* 대상 테이블 선택 - TableListConfigPanel과 동일한 Combobox */}
        <div className="space-y-3">
          <div>
            <h3 className="text-sm font-semibold">데이터 소스</h3>
            <p className="text-muted-foreground text-[10px]">
              결재 상태를 조회할 대상 테이블을 선택하세요.
            </p>
          </div>
          <hr className="border-border" />
          <div className="space-y-2">
            <Label className="text-xs">대상 테이블</Label>
            <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={tableComboboxOpen}
                  className="h-8 w-full justify-between text-xs"
                  disabled={loadingTables}
                >
                  <div className="flex items-center gap-2 truncate">
                    <Table2 className="h-3 w-3 shrink-0" />
                    <span className="truncate">
                      {loadingTables
                        ? "테이블 로딩 중..."
                        : targetTableName
                          ? availableTables.find((t) => t.tableName === targetTableName)?.displayName ||
                            targetTableName
                          : "테이블 선택"}
                    </span>
                  </div>
                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent
                className="p-0"
                style={{ width: "var(--radix-popover-trigger-width)" }}
                align="start"
              >
                <Command>
                  <CommandInput placeholder="테이블 검색..." className="text-xs" />
                  <CommandList>
                    <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
                    <CommandGroup>
                      {availableTables.map((table) => (
                        <CommandItem
                          key={table.tableName}
                          value={`${table.tableName} ${table.displayName}`}
                          onSelect={() => handleTableChange(table.tableName)}
                          className="text-xs"
                        >
                          <Check
                            className={cn(
                              "mr-2 h-3 w-3",
                              targetTableName === table.tableName ? "opacity-100" : "opacity-0"
                            )}
                          />
                          <div className="flex flex-col">
                            <span>{table.displayName}</span>
                            {table.displayName !== table.tableName && (
                              <span className="text-[10px] text-gray-400">{table.tableName}</span>
                            )}
                          </div>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
            {screenTableName && targetTableName !== screenTableName && (
              <div className="flex items-center justify-between rounded bg-amber-50 px-2 py-1">
                <span className="text-[10px] text-amber-700">
                  화면 기본 테이블({screenTableName})과 다른 테이블을 사용 중
                </span>
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-5 px-1.5 text-[10px] text-amber-700 hover:text-amber-900"
                  onClick={() => handleTableChange(screenTableName)}
                >
                  기본으로
                </Button>
              </div>
            )}
          </div>
        </div>

        {/* 레코드 ID 필드 선택 - 동일한 Combobox 패턴 */}
        <div className="space-y-3">
          <div>
            <h3 className="text-sm font-semibold">레코드 식별</h3>
            <p className="text-muted-foreground text-[10px]">
              결재 대상 레코드를 식별할 PK 컬럼을 선택하세요.
            </p>
          </div>
          <hr className="border-border" />
          <div className="space-y-2">
            <Label className="text-xs">레코드 ID 필드명</Label>
            {targetTableName ? (
              <Popover open={columnComboboxOpen} onOpenChange={setColumnComboboxOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={columnComboboxOpen}
                    className="h-8 w-full justify-between text-xs"
                    disabled={loadingColumns}
                  >
                    <span className="truncate">
                      {loadingColumns
                        ? "컬럼 로딩 중..."
                        : config.targetRecordIdField
                          ? availableColumns.find((c) => c.columnName === config.targetRecordIdField)?.label ||
                            config.targetRecordIdField
                          : "컬럼 선택"}
                    </span>
                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent
                  className="p-0"
                  style={{ width: "var(--radix-popover-trigger-width)" }}
                  align="start"
                >
                  <Command>
                    <CommandInput placeholder="컬럼 검색..." className="text-xs" />
                    <CommandList>
                      <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
                      <CommandGroup>
                        {availableColumns.map((col) => (
                          <CommandItem
                            key={col.columnName}
                            value={`${col.columnName} ${col.label}`}
                            onSelect={() => {
                              handleChange("targetRecordIdField", col.columnName);
                              setColumnComboboxOpen(false);
                            }}
                            className="text-xs"
                          >
                            <Check
                              className={cn(
                                "mr-2 h-3 w-3",
                                config.targetRecordIdField === col.columnName ? "opacity-100" : "opacity-0"
                              )}
                            />
                            <div className="flex flex-col">
                              <span>{col.label}</span>
                              {col.label !== col.columnName && (
                                <span className="text-[10px] text-gray-400">{col.columnName}</span>
                              )}
                            </div>
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            ) : (
              <p className="text-muted-foreground text-[10px]">
                대상 테이블을 먼저 선택하세요.
              </p>
            )}
          </div>
        </div>

        {/* 표시 모드 */}
        <div className="space-y-3">
          <div>
            <h3 className="text-sm font-semibold">표시 설정</h3>
            <p className="text-muted-foreground text-[10px]">
              결재 단계의 표시 방식을 설정합니다.
            </p>
          </div>
          <hr className="border-border" />
          <div className="space-y-2">
            <Label className="text-xs">표시 모드</Label>
            <Select
              value={config.displayMode || "horizontal"}
              onValueChange={(v) => handleChange("displayMode", v)}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue placeholder="표시 모드 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="horizontal">가로형 스테퍼</SelectItem>
                <SelectItem value="vertical">세로형 타임라인</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* 옵션 체크박스들 */}
          <div className="space-y-2">
            <Label className="text-xs font-medium">표시 옵션</Label>

            <div className="flex items-center gap-2">
              <Checkbox
                id="showDept"
                checked={config.showDept !== false}
                onCheckedChange={(checked) => handleChange("showDept", !!checked)}
              />
              <Label htmlFor="showDept" className="text-xs font-normal">
                부서/직급 표시
              </Label>
            </div>

            <div className="flex items-center gap-2">
              <Checkbox
                id="showComment"
                checked={config.showComment !== false}
                onCheckedChange={(checked) => handleChange("showComment", !!checked)}
              />
              <Label htmlFor="showComment" className="text-xs font-normal">
                결재 코멘트 표시
              </Label>
            </div>

            <div className="flex items-center gap-2">
              <Checkbox
                id="showTimestamp"
                checked={config.showTimestamp !== false}
                onCheckedChange={(checked) => handleChange("showTimestamp", !!checked)}
              />
              <Label htmlFor="showTimestamp" className="text-xs font-normal">
                처리 시각 표시
              </Label>
            </div>

            <div className="flex items-center gap-2">
              <Checkbox
                id="compact"
                checked={config.compact || false}
                onCheckedChange={(checked) => handleChange("compact", !!checked)}
              />
              <Label htmlFor="compact" className="text-xs font-normal">
                콤팩트 모드 (작게 표시)
              </Label>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};