ERP-node/frontend/components/numbering-rule/NumberingRuleDesigner.tsx

"use client";

import React, { useState, useCallback, useEffect } from "react";
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 { Plus, Save, Search, Hash, Table2 } from "lucide-react";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/utils/toastUtils";
import { NumberingRuleConfig, NumberingRulePart, SEPARATOR_OPTIONS, SeparatorType } from "@/types/numbering-rule";
import { CODE_PART_TYPE_OPTIONS } from "@/types/numbering-rule";
import { NumberingRuleCard } from "./NumberingRuleCard";
import { NumberingRulePreview, computePartDisplayItems, getPartTypeColorClass } from "./NumberingRulePreview";
import { saveNumberingRuleToTest } from "@/lib/api/numberingRule";
import { apiClient } from "@/lib/api/client";
import { cn } from "@/lib/utils";

interface NumberingColumn {
  tableName: string;
  tableLabel: string;
  columnName: string;
  columnLabel: string;
}

interface GroupedColumns {
  tableLabel: string;
  columns: NumberingColumn[];
}

interface NumberingRuleDesignerProps {
  initialConfig?: NumberingRuleConfig;
  onSave?: (config: NumberingRuleConfig) => void;
  onChange?: (config: NumberingRuleConfig) => void;
  maxRules?: number;
  isPreview?: boolean;
  className?: string;
  currentTableName?: string;
  menuObjid?: number;
}

export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
  initialConfig,
  onSave,
  onChange,
  maxRules = 6,
  isPreview = false,
  className = "",
  currentTableName,
  menuObjid,
}) => {
  const [numberingColumns, setNumberingColumns] = useState<NumberingColumn[]>([]);
  const [selectedColumn, setSelectedColumn] = useState<{ tableName: string; columnName: string } | null>(null);
  const [currentRule, setCurrentRule] = useState<NumberingRuleConfig | null>(null);
  const [selectedPartOrder, setSelectedPartOrder] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [columnSearch, setColumnSearch] = useState("");
  const [separatorTypes, setSeparatorTypes] = useState<Record<number, SeparatorType>>({});
  const [customSeparators, setCustomSeparators] = useState<Record<number, string>>({});

  useEffect(() => {
    loadNumberingColumns();
  }, []);

  const loadNumberingColumns = async () => {
    setLoading(true);
    try {
      const response = await apiClient.get("/table-management/numbering-columns");
      if (response.data.success && response.data.data) {
        setNumberingColumns(response.data.data);
      }
    } catch (error: any) {
      console.error("채번 컬럼 목록 로드 실패:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleSelectColumn = async (tableName: string, columnName: string) => {
    setSelectedColumn({ tableName, columnName });
    setSelectedPartOrder(null);
    setLoading(true);
    try {
      const response = await apiClient.get(`/numbering-rules/by-column/${tableName}/${columnName}`);
      if (response.data.success && response.data.data) {
        const rule = response.data.data as NumberingRuleConfig;
        setCurrentRule(JSON.parse(JSON.stringify(rule)));
      } else {
        const newRule: NumberingRuleConfig = {
          ruleId: `rule-${Date.now()}`,
          ruleName: `${columnName} 채번`,
          parts: [],
          separator: "-",
          resetPeriod: "none",
          currentSequence: 1,
          scopeType: "table",
          tableName,
          columnName,
        };
        setCurrentRule(newRule);
      }
    } catch {
      const newRule: NumberingRuleConfig = {
        ruleId: `rule-${Date.now()}`,
        ruleName: `${columnName} 채번`,
        parts: [],
        separator: "-",
        resetPeriod: "none",
        currentSequence: 1,
        scopeType: "table",
        tableName,
        columnName,
      };
      setCurrentRule(newRule);
    } finally {
      setLoading(false);
    }
  };

  // 테이블별 그룹화
  const groupedColumns = numberingColumns.reduce<Record<string, GroupedColumns>>((acc, col) => {
    if (!acc[col.tableName]) {
      acc[col.tableName] = { tableLabel: col.tableLabel, columns: [] };
    }
    acc[col.tableName].columns.push(col);
    return acc;
  }, {});

  // 검색 필터
  const filteredGroups = Object.entries(groupedColumns).filter(([tableName, group]) => {
    if (!columnSearch) return true;
    const search = columnSearch.toLowerCase();
    return (
      tableName.toLowerCase().includes(search) ||
      group.tableLabel.toLowerCase().includes(search) ||
      group.columns.some(
        (c) => c.columnName.toLowerCase().includes(search) || c.columnLabel.toLowerCase().includes(search)
      )
    );
  });

  useEffect(() => {
    if (currentRule) onChange?.(currentRule);
  }, [currentRule, onChange]);

  useEffect(() => {
    if (currentRule && currentRule.parts.length > 0) {
      const newSepTypes: Record<number, SeparatorType> = {};
      const newCustomSeps: Record<number, string> = {};
      currentRule.parts.forEach((part) => {
        const sep = part.separatorAfter ?? currentRule.separator ?? "-";
        if (sep === "") {
          newSepTypes[part.order] = "none";
          newCustomSeps[part.order] = "";
        } else {
          const opt = SEPARATOR_OPTIONS.find(
            (o) => o.value !== "custom" && o.value !== "none" && o.displayValue === sep
          );
          if (opt) {
            newSepTypes[part.order] = opt.value;
            newCustomSeps[part.order] = "";
          } else {
            newSepTypes[part.order] = "custom";
            newCustomSeps[part.order] = sep;
          }
        }
      });
      setSeparatorTypes(newSepTypes);
      setCustomSeparators(newCustomSeps);
    }
  }, [currentRule?.ruleId]);

  const handlePartSeparatorChange = useCallback((partOrder: number, type: SeparatorType) => {
    setSeparatorTypes((prev) => ({ ...prev, [partOrder]: type }));
    if (type !== "custom") {
      const option = SEPARATOR_OPTIONS.find((opt) => opt.value === type);
      const newSeparator = option?.displayValue ?? "";
      setCustomSeparators((prev) => ({ ...prev, [partOrder]: "" }));
      setCurrentRule((prev) => {
        if (!prev) return null;
        return {
          ...prev,
          parts: prev.parts.map((p) => (p.order === partOrder ? { ...p, separatorAfter: newSeparator } : p)),
        };
      });
    }
  }, []);

  const handlePartCustomSeparatorChange = useCallback((partOrder: number, value: string) => {
    const trimmedValue = value.slice(0, 2);
    setCustomSeparators((prev) => ({ ...prev, [partOrder]: trimmedValue }));
    setCurrentRule((prev) => {
      if (!prev) return null;
      return {
        ...prev,
        parts: prev.parts.map((p) => (p.order === partOrder ? { ...p, separatorAfter: trimmedValue } : p)),
      };
    });
  }, []);

  const handleAddPart = useCallback(() => {
    if (!currentRule) return;
    if (currentRule.parts.length >= maxRules) {
      toast.error(`최대 ${maxRules}개까지 추가할 수 있습니다`);
      return;
    }
    const newPart: NumberingRulePart = {
      id: `part-${Date.now()}`,
      order: currentRule.parts.length + 1,
      partType: "text",
      generationMethod: "auto",
      autoConfig: { textValue: "CODE" },
      separatorAfter: "-",
    };
    setCurrentRule((prev) => (prev ? { ...prev, parts: [...prev.parts, newPart] } : null));
    setSeparatorTypes((prev) => ({ ...prev, [newPart.order]: "-" }));
    setCustomSeparators((prev) => ({ ...prev, [newPart.order]: "" }));
    toast.success(`규칙 ${newPart.order}가 추가되었습니다`);
  }, [currentRule, maxRules]);

  const handleUpdatePart = useCallback((partOrder: number, updates: Partial<NumberingRulePart>) => {
    setCurrentRule((prev) => {
      if (!prev) return null;
      return {
        ...prev,
        parts: prev.parts.map((p) => (p.order === partOrder ? { ...p, ...updates } : p)),
      };
    });
  }, []);

  const handleDeletePart = useCallback((partOrder: number) => {
    setCurrentRule((prev) => {
      if (!prev) return null;
      return {
        ...prev,
        parts: prev.parts
          .filter((p) => p.order !== partOrder)
          .map((p, i) => ({ ...p, order: i + 1 })),
      };
    });
    setSelectedPartOrder(null);
    toast.success("규칙이 삭제되었습니다");
  }, []);

  const handleSave = useCallback(async () => {
    if (!currentRule) {
      toast.error("저장할 규칙이 없습니다");
      return;
    }
    if (currentRule.parts.length === 0) {
      toast.error("최소 1개 이상의 규칙을 추가해주세요");
      return;
    }
    setLoading(true);
    try {
      const defaultAutoConfigs: Record<string, any> = {
        sequence: { sequenceLength: 3, startFrom: 1 },
        number: { numberLength: 4, numberValue: 1 },
        date: { dateFormat: "YYYYMMDD" },
        text: { textValue: "" },
      };
      const partsWithDefaults = currentRule.parts.map((part) => {
        if (part.generationMethod === "auto") {
          const defaults = defaultAutoConfigs[part.partType] || {};
          return { ...part, autoConfig: { ...defaults, ...part.autoConfig } };
        }
        return part;
      });
      const ruleToSave = {
        ...currentRule,
        parts: partsWithDefaults,
        scopeType: "table" as const,
        tableName: selectedColumn?.tableName || currentRule.tableName || "",
        columnName: selectedColumn?.columnName || currentRule.columnName || "",
      };
      const response = await saveNumberingRuleToTest(ruleToSave);
      if (response.success && response.data) {
        const currentData = JSON.parse(JSON.stringify(response.data)) as NumberingRuleConfig;
        setCurrentRule(currentData);
        await onSave?.(response.data);
        toast.success("채번 규칙이 저장되었습니다");
      } else {
        showErrorToast("채번 규칙 저장에 실패했습니다", response.error, {
          guidance: "설정을 확인하고 다시 시도해 주세요.",
        });
      }
    } catch (error: unknown) {
      showErrorToast("채번 규칙 저장에 실패했습니다", error, {
        guidance: "설정을 확인하고 다시 시도해 주세요.",
      });
    } finally {
      setLoading(false);
    }
  }, [currentRule, onSave, selectedColumn]);

  const selectedPart = currentRule?.parts.find((p) => p.order === selectedPartOrder) ?? null;
  const globalSep = currentRule?.separator ?? "-";
  const partItems = currentRule ? computePartDisplayItems(currentRule) : [];

  return (
    <div className={cn("flex h-full", className)}>
      {/* 좌측: 채번 컬럼 목록 (테이블별 그룹화) */}
      <div className="code-nav flex w-[240px] flex-shrink-0 flex-col border-r border-border">
        <div className="code-nav-head flex flex-col gap-2 border-b border-border px-3 py-2.5">
          <div className="flex items-center gap-2">
            <Hash className="h-4 w-4 shrink-0 text-muted-foreground" />
            <span className="text-xs font-bold">채번 컬럼 ({numberingColumns.length})</span>
          </div>
          <div className="relative">
            <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
            <Input
              value={columnSearch}
              onChange={(e) => setColumnSearch(e.target.value)}
              placeholder="검색..."
              className="h-7 pl-7 text-xs"
            />
          </div>
        </div>
        <div className="code-nav-list flex-1 overflow-y-auto">
          {loading && numberingColumns.length === 0 ? (
            <div className="flex h-24 items-center justify-center text-xs text-muted-foreground">
              로딩 중...
            </div>
          ) : filteredGroups.length === 0 ? (
            <div className="flex h-24 flex-col items-center justify-center gap-1 px-3 text-center text-xs text-muted-foreground">
              <Hash className="h-6 w-6" />
              {numberingColumns.length === 0
                ? "채번 타입 컬럼이 없습니다"
                : "검색 결과 없음"}
            </div>
          ) : (
            filteredGroups.map(([tableName, group]) => (
              <div key={tableName}>
                <div className="flex items-center gap-1.5 bg-muted/50 px-3 py-1.5">
                  <Table2 className="h-3 w-3 text-muted-foreground" />
                  <span className="truncate text-[10px] font-bold text-muted-foreground">
                    {group.tableLabel || tableName}
                  </span>
                </div>
                {group.columns.map((col) => {
                  const isSelected =
                    selectedColumn?.tableName === col.tableName &&
                    selectedColumn?.columnName === col.columnName;
                  return (
                    <button
                      key={`${col.tableName}.${col.columnName}`}
                      type="button"
                      className={cn(
                        "flex w-full items-center gap-2 border-b border-border/30 px-3 py-2 text-left transition-colors",
                        isSelected
                          ? "border-l-[3px] border-l-primary bg-primary/5 pl-2.5 font-bold"
                          : "pl-5 hover:bg-accent"
                      )}
                      onClick={() => handleSelectColumn(col.tableName, col.columnName)}
                    >
                      <Hash className="h-3 w-3 shrink-0 text-muted-foreground" />
                      <div className="min-w-0 flex-1">
                        <div className="truncate text-xs font-semibold">
                          {col.columnLabel || col.columnName}
                        </div>
                        <div className="truncate text-[9px] text-muted-foreground">
                          {col.columnName}
                        </div>
                      </div>
                    </button>
                  );
                })}
              </div>
            ))
          )}
        </div>
      </div>

      {/* 우측: 미리보기 + 파이프라인 + 설정 + 저장 바 */}
      <div className="code-main flex min-w-0 flex-1 flex-col overflow-hidden">
        {!currentRule ? (
          <div className="flex flex-1 flex-col items-center justify-center text-center">
            <Hash className="mb-3 h-10 w-10 text-muted-foreground" />
            <p className="mb-2 text-lg font-medium text-muted-foreground">컬럼을 선택하세요</p>
            <p className="text-sm text-muted-foreground">
              좌측에서 채번 컬럼을 선택하면 규칙을 편집할 수 있습니다
            </p>
          </div>
        ) : (
          <>
            {/* 헤더: 규칙명 + 적용 대상 표시 */}
            <div className="flex flex-col gap-2 px-6 pt-4">
              <div className="flex items-center gap-3">
                <div className="flex-1">
                  <Label className="text-xs font-medium">규칙명</Label>
                  <Input
                    value={currentRule.ruleName}
                    onChange={(e) => setCurrentRule((prev) => (prev ? { ...prev, ruleName: e.target.value } : null))}
                    placeholder="예: 프로젝트 코드"
                    className="h-9 text-sm"
                  />
                </div>
                {selectedColumn && (
                  <div className="flex-shrink-0 pt-4">
                    <span className="rounded bg-muted px-2 py-1 text-[10px] font-medium text-muted-foreground">
                      {selectedColumn.tableName}.{selectedColumn.columnName}
                    </span>
                  </div>
                )}
              </div>
            </div>

            {/* 미리보기 스트립 */}
            <div className="code-preview-strip flex-shrink-0 border-b border-border px-6 py-5">
              <NumberingRulePreview config={currentRule} variant="strip" />
            </div>

            {/* 파이프라인 영역 */}
            <div className="code-pipeline-area flex flex-col gap-3 border-b border-border px-6 py-5">
              <div className="area-label flex items-center gap-1.5">
                <span className="text-xs font-bold">코드 구성</span>
                <span className="cnt text-xs font-medium text-muted-foreground">
                  {currentRule.parts.length}/{maxRules}
                </span>
              </div>
              <div className="code-pipeline flex flex-1 flex-wrap items-center gap-0 overflow-x-auto overflow-y-hidden pb-2">
                {currentRule.parts.length === 0 ? (
                  <button
                    type="button"
                    className="flex h-24 min-w-[200px] flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-border bg-muted/30 text-xs text-muted-foreground transition-colors hover:border-primary hover:bg-primary/5 hover:text-primary"
                    onClick={handleAddPart}
                    disabled={isPreview || loading}
                  >
                    <Plus className="h-6 w-6" />
                    클릭하여 첫 번째 규칙을 추가하세요
                  </button>
                ) : (
                  <>
                    {currentRule.parts.map((part, index) => {
                      const item = partItems.find((i) => i.order === part.order);
                      const sep = part.separatorAfter ?? globalSep;
                      const isPartSelected = selectedPartOrder === part.order;
                      const typeLabel = CODE_PART_TYPE_OPTIONS.find((o) => o.value === part.partType)?.label ?? part.partType;
                      return (
                        <React.Fragment key={`part-${part.order}-${index}`}>
                          <button
                            type="button"
                            className={cn(
                              "pipe-segment min-w-[120px] flex-shrink-0 rounded-[10px] border-2 px-4 py-3 text-center transition-all",
                              part.partType === "date" && "border-warning",
                              part.partType === "text" && "border-primary",
                              part.partType === "sequence" && "border-primary",
                              (part.partType === "number" || part.partType === "category" || part.partType === "reference") && "border-border",
                              isPartSelected && "border-primary bg-primary/5 shadow-md ring-2 ring-primary/30"
                            )}
                            onClick={() => setSelectedPartOrder(part.order)}
                          >
                            <div className="seg-type text-[8px] font-bold uppercase tracking-wide text-muted-foreground">
                              {typeLabel}
                            </div>
                            <div className={cn("seg-value mt-1 truncate font-mono text-base font-extrabold leading-none", getPartTypeColorClass(part.partType))}>
                              {item?.displayValue ?? "-"}
                            </div>
                          </button>
                          {index < currentRule.parts.length - 1 && (
                            <div className="pipe-connector flex w-8 flex-shrink-0 flex-col items-center justify-center gap-0.5">
                              <span className="conn-line text-xs font-bold text-muted-foreground">→</span>
                              <span className="conn-sep rounded border border-border bg-muted px-1 py-0.5 text-[8px] font-semibold text-muted-foreground">
                                {sep || "-"}
                              </span>
                            </div>
                          )}
                        </React.Fragment>
                      );
                    })}
                    <button
                      type="button"
                      className="pipe-add flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-dashed border-border text-muted-foreground transition-colors hover:border-primary hover:bg-primary/5 hover:text-primary"
                      onClick={handleAddPart}
                      disabled={currentRule.parts.length >= maxRules || isPreview || loading}
                      aria-label="규칙 추가"
                    >
                      <Plus className="h-5 w-5" />
                    </button>
                  </>
                )}
              </div>
            </div>

            {/* 설정 패널 */}
            {selectedPart && (
              <div className="code-config-panel min-h-0 flex-1 overflow-y-auto px-6 py-5">
                <div className="code-config-grid grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3">
                  <NumberingRuleCard
                    part={selectedPart}
                    onUpdate={(updates) => handleUpdatePart(selectedPart.order, updates)}
                    onDelete={() => handleDeletePart(selectedPart.order)}
                    isPreview={isPreview}
                    tableName={currentRule.tableName ?? currentTableName}
                  />
                </div>
                {currentRule.parts.some((p) => p.order === selectedPart.order) && (
                  <div className="mt-3 flex items-center gap-2">
                    <span className="text-[10px] text-muted-foreground">뒤 구분자</span>
                    <Select
                      value={separatorTypes[selectedPart.order] ?? "-"}
                      onValueChange={(v) => handlePartSeparatorChange(selectedPart.order, v as SeparatorType)}
                    >
                      <SelectTrigger className="h-7 w-24 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {SEPARATOR_OPTIONS.map((opt) => (
                          <SelectItem key={opt.value} value={opt.value} className="text-xs">
                            {opt.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {separatorTypes[selectedPart.order] === "custom" && (
                      <Input
                        value={customSeparators[selectedPart.order] ?? ""}
                        onChange={(e) => handlePartCustomSeparatorChange(selectedPart.order, e.target.value)}
                        className="h-7 w-14 text-center text-[10px]"
                        placeholder="2자"
                        maxLength={2}
                      />
                    )}
                  </div>
                )}
              </div>
            )}

            {/* 저장 바 */}
            <div className="code-save-bar flex flex-shrink-0 items-center justify-between gap-4 border-t border-border bg-muted/30 px-6 py-4">
              <div className="min-w-0 flex-1 text-xs text-muted-foreground">
                {currentRule.tableName && (
                  <span>테이블: {currentRule.tableName}</span>
                )}
                {currentRule.columnName && (
                  <span className="ml-2">컬럼: {currentRule.columnName}</span>
                )}
                <span className="ml-2">구분자: {globalSep || "-"}</span>
                {currentRule.resetPeriod && currentRule.resetPeriod !== "none" && (
                  <span className="ml-2">리셋: {currentRule.resetPeriod}</span>
                )}
              </div>
              <Button
                onClick={handleSave}
                disabled={isPreview || loading}
                className="h-9 gap-2 text-sm font-medium"
              >
                <Save className="h-4 w-4" />
                {loading ? "저장 중..." : "저장"}
              </Button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};