invyone/frontend/components/numbering-rule/AutoConfigPanel.tsx

"use client";

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

interface AutoConfigPanelProps {
  partType: CodePartType;
  config?: any;
  onChange: (config: any) => void;
  isPreview?: boolean;
  tableName?: string;
}

interface TableInfo {
  table_name: string;
  display_name: string;
}

interface ColumnInfo {
  column_name: string;
  display_name: string;
  data_type: string;
  input_type?: string;
}

export const AutoConfigPanel: React.FC<AutoConfigPanelProps> = ({
  partType,
  config = {},
  onChange,
  isPreview = false,
  tableName,
}) => {
  // 1. 순번 (자동 증가)
  if (partType === "sequence") {
    return (
      <div className="space-y-3 sm:space-y-4">
        <div>
          <Label className="text-xs font-medium sm:text-sm">순번 자릿수</Label>
          <Input
            type="number"
            min={1}
            max={10}
            value={config.sequence_length || 3}
            onChange={(e) =>
              onChange({ ...config, sequence_length: parseInt(e.target.value) || 3 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            예: 3 → 001, 4 → 0001
          </p>
        </div>
        <div>
          <Label className="text-xs font-medium sm:text-sm">시작 번호</Label>
          <Input
            type="number"
            min={1}
            value={config.start_from || 1}
            onChange={(e) =>
              onChange({ ...config, start_from: parseInt(e.target.value) || 1 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            순번이 시작될 번호
          </p>
        </div>
      </div>
    );
  }

  // 2. 숫자 (고정 자릿수)
  if (partType === "number") {
    return (
      <div className="space-y-3 sm:space-y-4">
        <div>
          <Label className="text-xs font-medium sm:text-sm">숫자 자릿수</Label>
          <Input
            type="number"
            min={1}
            max={10}
            value={config.number_length || 4}
            onChange={(e) =>
              onChange({ ...config, number_length: parseInt(e.target.value) || 4 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            예: 4 → 0001, 5 → 00001
          </p>
        </div>
        <div>
          <Label className="text-xs font-medium sm:text-sm">숫자 값</Label>
          <Input
            type="number"
            min={0}
            value={config.number_value || 0}
            onChange={(e) =>
              onChange({ ...config, number_value: parseInt(e.target.value) || 0 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            고정으로 사용할 숫자
          </p>
        </div>
      </div>
    );
  }

  // 3. 날짜
  if (partType === "date") {
    return (
      <DateConfigPanel
        config={config}
        onChange={onChange}
        isPreview={isPreview}
      />
    );
  }

  // 4. 문자
  if (partType === "text") {
    return (
      <div>
        <Label className="text-xs font-medium sm:text-sm">텍스트 값</Label>
        <Input
          value={config.text_value || ""}
          onChange={(e) => onChange({ ...config, text_value: e.target.value })}
          placeholder="예: PRJ, CODE, PROD"
          disabled={isPreview}
          className="h-8 text-xs sm:h-10 sm:text-sm"
        />
        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
          고정으로 사용할 텍스트 또는 코드
        </p>
      </div>
    );
  }

  // 6. 참조 (마스터-디테일 분번)
  if (partType === "reference") {
    return (
      <ReferenceConfigSection
        config={config}
        onChange={onChange}
        isPreview={isPreview}
        tableName={tableName}
      />
    );
  }

  return null;
};

/**
 * 날짜 타입 전용 설정 패널
 * - 날짜 형식 선택
 * - 컬럼 값 기준 생성 옵션
 */
interface DateConfigPanelProps {
  config?: any;
  onChange: (config: any) => void;
  isPreview?: boolean;
}

const DateConfigPanel: React.FC<DateConfigPanelProps> = ({
  config = {},
  onChange,
  isPreview = false,
}) => {
  // 테이블 목록
  const [tables, setTables] = useState<TableInfo[]>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);

  // 컬럼 목록
  const [columns, setColumns] = useState<ColumnInfo[]>([]);
  const [loadingColumns, setLoadingColumns] = useState(false);
  const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);

  // 체크박스 상태
  const useColumnValue = config.use_column_value || false;
  const sourceTableName = config.source_table_name || "";
  const sourceColumnName = config.source_column_name || "";

  // 테이블 목록 로드
  useEffect(() => {
    if (useColumnValue && tables.length === 0) {
      loadTables();
    }
  }, [useColumnValue]);

  // 테이블 변경 시 컬럼 로드
  useEffect(() => {
    if (sourceTableName) {
      loadColumns(sourceTableName);
    } else {
      setColumns([]);
    }
  }, [sourceTableName]);

  const loadTables = async () => {
    setLoadingTables(true);
    try {
      const response = await tableManagementApi.getTableList();
      if (response.success && response.data) {
        const tableList = response.data.map((t: any) => ({
          table_name: t.table_name,
          display_name: t.display_name || t.table_label || t.table_name,
        }));
        setTables(tableList);
      }
    } catch (error) {
      console.error("테이블 목록 로드 실패:", error);
    } finally {
      setLoadingTables(false);
    }
  };

  const loadColumns = async (tableName: string) => {
    setLoadingColumns(true);
    try {
      const response = await tableManagementApi.getColumnList(tableName);
      if (response.success && response.data) {
        const rawColumns = response.data?.columns || response.data;
        // 날짜 타입 컬럼만 필터링
        const dateColumns = (rawColumns as any[]).filter((col: any) => {
          const inputType = col.input_type || "";
          const dataType = (col.data_type || "").toLowerCase();
          return (
            inputType === "date" ||
            inputType === "datetime" ||
            dataType.includes("date") ||
            dataType.includes("timestamp")
          );
        });

        setColumns(
          dateColumns.map((col: any) => ({
            column_name: col.column_name,
            display_name: col.display_name || col.column_label || col.column_name,
            data_type: col.data_type || "",
            input_type: col.input_type || "",
          }))
        );
      }
    } catch (error) {
      console.error("컬럼 목록 로드 실패:", error);
    } finally {
      setLoadingColumns(false);
    }
  };

  // 선택된 테이블/컬럼 라벨
  const selectedTableLabel = useMemo(() => {
    const found = tables.find((t) => t.table_name === sourceTableName);
    return found ? `${found.display_name} (${found.table_name})` : "";
  }, [tables, sourceTableName]);

  const selectedColumnLabel = useMemo(() => {
    const found = columns.find((c) => c.column_name === sourceColumnName);
    return found ? `${found.display_name} (${found.column_name})` : "";
  }, [columns, sourceColumnName]);

  return (
    <div className="space-y-3 sm:space-y-4">
      {/* 날짜 형식 선택 */}
      <div>
        <Label className="text-xs font-medium sm:text-sm">날짜 형식</Label>
        <Select
          value={config.date_format || "YYYYMMDD"}
          onValueChange={(value) => onChange({ ...config, date_format: value })}
          disabled={isPreview}
        >
          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {DATE_FORMAT_OPTIONS.map((option) => (
              <SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
                {option.label} ({option.example})
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
          {useColumnValue
            ? "선택한 컬럼의 날짜 값이 이 형식으로 변환됩니다"
            : "현재 날짜가 자동으로 입력됩니다"}
        </p>
      </div>

      {/* 컬럼 값 기준 생성 체크박스 */}
      <div className="flex items-start gap-2">
        <Checkbox
          id="useColumnValue"
          checked={useColumnValue}
          onCheckedChange={(checked) => {
            onChange({
              ...config,
              use_column_value: checked,
              // 체크 해제 시 테이블/컬럼 초기화
              ...(checked ? {} : { source_table_name: "", source_column_name: "" }),
            });
          }}
          disabled={isPreview}
          className="mt-0.5"
        />
        <div className="flex-1">
          <Label
            htmlFor="useColumnValue"
            className="cursor-pointer text-xs font-medium sm:text-sm"
          >
            날짜 컬럼 기준으로 생성
          </Label>
          <p className="text-[10px] text-muted-foreground sm:text-xs">
            폼에 입력된 날짜 값으로 코드를 생성합니다
          </p>
        </div>
      </div>

      {/* 테이블 선택 (체크 시 표시) */}
      {useColumnValue && (
        <>
          <div>
            <Label className="text-xs font-medium sm:text-sm">테이블</Label>
            <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={tableComboboxOpen}
                  disabled={isPreview || loadingTables}
                  className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
                >
                  {loadingTables
                    ? "로딩 중..."
                    : sourceTableName
                      ? selectedTableLabel
                      : "테이블 선택"}
                  <ChevronsUpDown className="ml-2 h-4 w-4 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 sm:text-sm" />
                  <CommandList>
                    <CommandEmpty className="text-xs sm:text-sm">
                      테이블을 찾을 수 없습니다
                    </CommandEmpty>
                    <CommandGroup>
                      {tables.map((table) => (
                        <CommandItem
                          key={table.table_name}
                          value={`${table.display_name} ${table.table_name}`}
                          onSelect={() => {
                            onChange({
                              ...config,
                              source_table_name: table.table_name,
                              source_column_name: "", // 테이블 변경 시 컬럼 초기화
                            });
                            setTableComboboxOpen(false);
                          }}
                          className="text-xs sm:text-sm"
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              sourceTableName === table.table_name ? "opacity-100" : "opacity-0"
                            )}
                          />
                          <div className="flex flex-col">
                            <span className="font-medium">{table.display_name}</span>
                            <span className="text-[10px] text-muted-foreground">{table.table_name}</span>
                          </div>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
          </div>

          {/* 컬럼 선택 */}
          <div>
            <Label className="text-xs font-medium sm:text-sm">날짜 컬럼</Label>
            <Popover open={columnComboboxOpen} onOpenChange={setColumnComboboxOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={columnComboboxOpen}
                  disabled={isPreview || loadingColumns || !sourceTableName}
                  className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
                >
                  {loadingColumns
                    ? "로딩 중..."
                    : !sourceTableName
                      ? "테이블을 먼저 선택하세요"
                      : sourceColumnName
                        ? selectedColumnLabel
                        : columns.length === 0
                          ? "날짜 컬럼이 없습니다"
                          : "컬럼 선택"}
                  <ChevronsUpDown className="ml-2 h-4 w-4 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 sm:text-sm" />
                  <CommandList>
                    <CommandEmpty className="text-xs sm:text-sm">
                      날짜 컬럼을 찾을 수 없습니다
                    </CommandEmpty>
                    <CommandGroup>
                      {columns.map((column) => (
                        <CommandItem
                          key={column.column_name}
                          value={`${column.display_name} ${column.column_name}`}
                          onSelect={() => {
                            onChange({ ...config, source_column_name: column.column_name });
                            setColumnComboboxOpen(false);
                          }}
                          className="text-xs sm:text-sm"
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              sourceColumnName === column.column_name ? "opacity-100" : "opacity-0"
                            )}
                          />
                          <div className="flex flex-col">
                            <span className="font-medium">{column.display_name}</span>
                            <span className="text-[10px] text-muted-foreground">
                              {column.column_name} ({column.input_type || column.data_type})
                            </span>
                          </div>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
            {sourceTableName && columns.length === 0 && !loadingColumns && (
              <p className="mt-1 text-[10px] text-warning sm:text-xs">
                이 테이블에 날짜 타입 컬럼이 없습니다
              </p>
            )}
          </div>
        </>
      )}
    </div>
  );
};

function ReferenceConfigSection({
  config,
  onChange,
  isPreview,
  tableName,
}: {
  config: any;
  onChange: (c: any) => void;
  isPreview: boolean;
  tableName?: string;
}) {
  const [columns, setColumns] = useState<ColumnInfo[]>([]);
  const [loadingCols, setLoadingCols] = useState(false);

  useEffect(() => {
    if (!tableName) return;
    setLoadingCols(true);

    const loadEntityColumns = async () => {
      try {
        const { apiClient } = await import("@/lib/api/client");
        const response = await apiClient.get(
          `/screen-management/tables/${tableName}/columns`
        );
        const allCols = response.data?.data || response.data || [];
        const entityCols = allCols.filter(
          (c: any) =>
            c.input_type === "entity" ||
            c.input_type === "numbering"
        );
        setColumns(
          entityCols.map((c: any) => ({
            column_name: c.column_name,
            display_name:
              c.column_label || c.column_name,
            data_type: c.data_type || "",
            input_type: c.input_type || "",
          }))
        );
      } catch {
        setColumns([]);
      } finally {
        setLoadingCols(false);
      }
    };

    loadEntityColumns();
  }, [tableName]);

  return (
    <div className="space-y-3">
      <div>
        <Label className="text-xs font-medium sm:text-sm">참조 컬럼</Label>
        <Select
          value={config.reference_column_name || ""}
          onValueChange={(value) =>
            onChange({ ...config, reference_column_name: value })
          }
          disabled={isPreview || loadingCols}
        >
          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
            <SelectValue
              placeholder={
                loadingCols
                  ? "로딩 중..."
                  : columns.length === 0
                    ? "엔티티 컬럼 없음"
                    : "컬럼 선택"
              }
            />
          </SelectTrigger>
          <SelectContent>
            {columns.map((col) => (
              <SelectItem
                key={col.column_name}
                value={col.column_name}
                className="text-xs"
              >
                {col.display_name} ({col.column_name})
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
          마스터 테이블과 연결된 엔티티/채번 컬럼의 값을 코드에 포함합니다
        </p>
      </div>
    </div>
  );
}