"use client";

import React, { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings, Database, Layout, Table } from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import { getNumberingRules } from "@/lib/api/numberingRule";
import {
  UniversalFormModalConfig,
  UniversalFormModalConfigPanelProps,
  FormSectionConfig,
  FormFieldConfig,
  MODAL_SIZE_OPTIONS,
  SECTION_TYPE_OPTIONS,
} from "./types";
import { defaultSectionConfig, defaultTableSectionConfig, generateSectionId } from "./config";

// 모달 import
import { FieldDetailSettingsModal } from "./modals/FieldDetailSettingsModal";
import { SaveSettingsModal } from "./modals/SaveSettingsModal";
import { SectionLayoutModal } from "./modals/SectionLayoutModal";
import { TableSectionSettingsModal } from "./modals/TableSectionSettingsModal";

// 도움말 텍스트 컴포넌트
const HelpText = ({ children }: { children: React.ReactNode }) => (
  <p className="text-muted-foreground mt-0.5 text-[10px]">{children}</p>
);

// 부모 화면에서 전달 가능한 필드 타입
interface AvailableParentField {
  name: string; // 필드명 (columnName)
  label: string; // 표시 라벨
  sourceComponent?: string; // 출처 컴포넌트 (예: "TableList", "SplitPanelLayout2")
  sourceTable?: string; // 출처 테이블명
}

export function UniversalFormModalConfigPanel({
  config,
  onChange,
  allComponents = [],
}: UniversalFormModalConfigPanelProps) {
  // 테이블 목록
  const [tables, setTables] = useState<{ name: string; label: string }[]>([]);
  const [tableColumns, setTableColumns] = useState<{
    [tableName: string]: { name: string; type: string; label: string; inputType?: string }[];
  }>({});

  // 부모 화면에서 전달 가능한 필드 목록
  const [availableParentFields, setAvailableParentFields] = useState<AvailableParentField[]>([]);

  // 채번규칙 목록
  const [numberingRules, setNumberingRules] = useState<{ id: string; name: string }[]>([]);

  // 모달 상태
  const [saveSettingsModalOpen, setSaveSettingsModalOpen] = useState(false);
  const [sectionLayoutModalOpen, setSectionLayoutModalOpen] = useState(false);
  const [fieldDetailModalOpen, setFieldDetailModalOpen] = useState(false);
  const [tableSectionSettingsModalOpen, setTableSectionSettingsModalOpen] = useState(false);
  const [selectedSection, setSelectedSection] = useState<FormSectionConfig | null>(null);
  const [selectedField, setSelectedField] = useState<FormFieldConfig | null>(null);

  // 테이블 목록 로드
  useEffect(() => {
    loadTables();
    loadNumberingRules();
  }, []);

  // allComponents에서 부모 화면에서 전달 가능한 필드 추출
  useEffect(() => {
    const extractParentFields = async () => {
      if (!allComponents || allComponents.length === 0) {
        setAvailableParentFields([]);
        return;
      }

      const fields: AvailableParentField[] = [];

      for (const comp of allComponents) {
        // 컴포넌트 타입 추출 (여러 위치에서 확인)
        const compType = comp.componentId || comp.componentConfig?.type || comp.componentConfig?.id || comp.type;
        const compConfig = comp.componentConfig || {};

        // 1. TableList / InteractiveDataTable - 테이블 컬럼 추출
        if (compType === "table-list" || compType === "interactive-data-table") {
          const tableName = compConfig.selectedTable || compConfig.tableName;
          if (tableName) {
            // 테이블 컬럼 로드
            try {
              const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
              const columns = response.data?.data?.columns;
              if (response.data?.success && Array.isArray(columns)) {
                columns.forEach((col: any) => {
                  const colName = col.columnName || col.column_name;
                  const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
                  fields.push({
                    name: colName,
                    label: colLabel,
                    sourceComponent: "TableList",
                    sourceTable: tableName,
                  });
                });
              }
            } catch (error) {
              console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
            }
          }
        }

        // 2. SplitPanelLayout2 - 데이터 전달 필드 및 소스 테이블 컬럼 추출
        if (compType === "split-panel-layout2") {
          // dataTransferFields 추출
          const transferFields = compConfig.dataTransferFields;
          if (transferFields && Array.isArray(transferFields)) {
            transferFields.forEach((field: any) => {
              if (field.targetColumn) {
                fields.push({
                  name: field.targetColumn,
                  label: field.targetColumn,
                  sourceComponent: "SplitPanelLayout2",
                  sourceTable: compConfig.leftPanel?.tableName,
                });
              }
            });
          }

          // 좌측 패널 테이블 컬럼도 추출
          const leftTableName = compConfig.leftPanel?.tableName;
          if (leftTableName) {
            try {
              const response = await apiClient.get(`/table-management/tables/${leftTableName}/columns`);
              const columns = response.data?.data?.columns;
              if (response.data?.success && Array.isArray(columns)) {
                columns.forEach((col: any) => {
                  const colName = col.columnName || col.column_name;
                  const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
                  // 중복 방지
                  if (!fields.some((f) => f.name === colName && f.sourceTable === leftTableName)) {
                    fields.push({
                      name: colName,
                      label: colLabel,
                      sourceComponent: "SplitPanelLayout2 (좌측)",
                      sourceTable: leftTableName,
                    });
                  }
                });
              }
            } catch (error) {
              console.error(`테이블 컬럼 로드 실패 (${leftTableName}):`, error);
            }
          }
        }

        // 3. 기타 테이블 관련 컴포넌트
        if (compType === "card-display" || compType === "simple-repeater-table") {
          const tableName = compConfig.tableName || compConfig.initialDataConfig?.sourceTable;
          if (tableName) {
            try {
              const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
              const columns = response.data?.data?.columns;
              if (response.data?.success && Array.isArray(columns)) {
                columns.forEach((col: any) => {
                  const colName = col.columnName || col.column_name;
                  const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
                  if (!fields.some((f) => f.name === colName && f.sourceTable === tableName)) {
                    fields.push({
                      name: colName,
                      label: colLabel,
                      sourceComponent: compType,
                      sourceTable: tableName,
                    });
                  }
                });
              }
            } catch (error) {
              console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
            }
          }
        }

        // 4. 버튼 컴포넌트 - openModalWithData의 fieldMappings/dataMapping에서 소스 컬럼 추출
        if (compType === "button-primary" || compType === "button" || compType === "button-secondary") {
          const action = compConfig.action || {};

          // fieldMappings에서 소스 컬럼 추출
          const fieldMappings = action.fieldMappings || [];
          fieldMappings.forEach((mapping: any) => {
            if (mapping.sourceColumn && !fields.some((f) => f.name === mapping.sourceColumn)) {
              fields.push({
                name: mapping.sourceColumn,
                label: mapping.sourceColumn,
                sourceComponent: "Button (fieldMappings)",
                sourceTable: action.sourceTableName,
              });
            }
          });

          // dataMapping에서 소스 컬럼 추출
          const dataMapping = action.dataMapping || [];
          dataMapping.forEach((mapping: any) => {
            if (mapping.sourceColumn && !fields.some((f) => f.name === mapping.sourceColumn)) {
              fields.push({
                name: mapping.sourceColumn,
                label: mapping.sourceColumn,
                sourceComponent: "Button (dataMapping)",
                sourceTable: action.sourceTableName,
              });
            }
          });
        }
      }

      // 5. 현재 모달의 저장 테이블 컬럼도 추가 (부모에서 전달받을 수 있는 값들)
      const currentTableName = config.saveConfig?.tableName;
      if (currentTableName) {
        try {
          const response = await apiClient.get(`/table-management/tables/${currentTableName}/columns`);
          const columns = response.data?.data?.columns;
          if (response.data?.success && Array.isArray(columns)) {
            columns.forEach((col: any) => {
              const colName = col.columnName || col.column_name;
              const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
              if (!fields.some((f) => f.name === colName)) {
                fields.push({
                  name: colName,
                  label: colLabel,
                  sourceComponent: "현재 폼 테이블",
                  sourceTable: currentTableName,
                });
              }
            });
          }
        } catch (error) {
          console.error(`현재 테이블 컬럼 로드 실패 (${currentTableName}):`, error);
        }
      }

      // 중복 제거 (같은 name이면 첫 번째만 유지)
      const uniqueFields = fields.filter(
        (field, index, self) => index === self.findIndex((f) => f.name === field.name),
      );

      setAvailableParentFields(uniqueFields);
    };

    extractParentFields();
  }, [allComponents, config.saveConfig?.tableName]);

  // 저장 테이블 변경 시 컬럼 로드
  useEffect(() => {
    if (config.saveConfig.tableName) {
      loadTableColumns(config.saveConfig.tableName);
    }
  }, [config.saveConfig.tableName]);

  const loadTables = async () => {
    try {
      const response = await apiClient.get("/table-management/tables");
      const data = response.data?.data;
      if (response.data?.success && Array.isArray(data)) {
        setTables(
          data.map(
            (t: {
              tableName?: string;
              table_name?: string;
              displayName?: string;
              tableLabel?: string;
              table_label?: string;
            }) => ({
              name: t.tableName || t.table_name || "",
              // displayName 우선, 없으면 tableLabel, 그것도 없으면 테이블명
              label: t.displayName || t.tableLabel || t.table_label || "",
            }),
          ),
        );
      }
    } catch (error) {
      console.error("테이블 목록 로드 실패:", error);
    }
  };

  const loadTableColumns = async (tableName: string) => {
    if (!tableName || (tableColumns[tableName] && tableColumns[tableName].length > 0)) return;

    try {
      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
      // API 응답 구조: { success, data: { columns: [...], total, page, ... } }
      const columns = response.data?.data?.columns;

      if (response.data?.success && Array.isArray(columns)) {
        setTableColumns((prev) => ({
          ...prev,
          [tableName]: columns.map(
            (c: {
              columnName?: string;
              column_name?: string;
              dataType?: string;
              data_type?: string;
              displayName?: string;
              columnComment?: string;
              column_comment?: string;
              inputType?: string;
              input_type?: string;
            }) => ({
              name: c.columnName || c.column_name || "",
              type: c.dataType || c.data_type || "text",
              label: c.displayName || c.columnComment || c.column_comment || c.columnName || c.column_name || "",
              inputType: c.inputType || c.input_type || "text",
            }),
          ),
        }));
      }
    } catch (error) {
      console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
    }
  };

  const loadNumberingRules = async () => {
    try {
      const response = await getNumberingRules();
      const data = response?.data;

      if (response?.success && Array.isArray(data)) {
        const rules = data.map(
          (r: {
            id?: string | number;
            ruleId?: string;
            rule_id?: string;
            name?: string;
            ruleName?: string;
            rule_name?: string;
          }) => ({
            id: String(r.id || r.ruleId || r.rule_id || ""),
            name: r.name || r.ruleName || r.rule_name || "",
          }),
        );
        setNumberingRules(rules);
      }
    } catch (error) {
      console.error("채번규칙 목록 로드 실패:", error);
    }
  };

  // 설정 업데이트 헬퍼
  const updateModalConfig = useCallback(
    (updates: Partial<UniversalFormModalConfig["modal"]>) => {
      onChange({
        ...config,
        modal: { ...config.modal, ...updates },
      });
    },
    [config, onChange],
  );

  // 섹션 관리
  const addSection = useCallback(
    (type: "fields" | "table" = "fields") => {
      const newSection: FormSectionConfig = {
        ...defaultSectionConfig,
        id: generateSectionId(),
        title: type === "table" ? `테이블 섹션 ${config.sections.length + 1}` : `섹션 ${config.sections.length + 1}`,
        type,
        fields: type === "fields" ? [] : undefined,
        tableConfig: type === "table" ? { ...defaultTableSectionConfig } : undefined,
      };
      onChange({
        ...config,
        sections: [...config.sections, newSection],
      });
    },
    [config, onChange],
  );

  // 섹션 타입 변경
  const changeSectionType = useCallback(
    (sectionId: string, newType: "fields" | "table") => {
      onChange({
        ...config,
        sections: config.sections.map((s) => {
          if (s.id !== sectionId) return s;

          if (newType === "table") {
            return {
              ...s,
              type: "table",
              fields: undefined,
              tableConfig: { ...defaultTableSectionConfig },
            };
          } else {
            return {
              ...s,
              type: "fields",
              fields: [],
              tableConfig: undefined,
            };
          }
        }),
      });
    },
    [config, onChange],
  );

  // 테이블 섹션 설정 모달 열기
  const handleOpenTableSectionSettings = (section: FormSectionConfig) => {
    setSelectedSection(section);
    setTableSectionSettingsModalOpen(true);
  };

  const updateSection = useCallback(
    (sectionId: string, updates: Partial<FormSectionConfig>) => {
      onChange({
        ...config,
        sections: config.sections.map((s) => (s.id === sectionId ? { ...s, ...updates } : s)),
      });
    },
    [config, onChange],
  );

  const removeSection = useCallback(
    (sectionId: string) => {
      onChange({
        ...config,
        sections: config.sections.filter((s) => s.id !== sectionId),
      });
    },
    [config, onChange],
  );

  const moveSectionUp = useCallback(
    (index: number) => {
      if (index <= 0) return;
      const newSections = [...config.sections];
      [newSections[index - 1], newSections[index]] = [newSections[index], newSections[index - 1]];
      onChange({ ...config, sections: newSections });
    },
    [config, onChange],
  );

  const moveSectionDown = useCallback(
    (index: number) => {
      if (index >= config.sections.length - 1) return;
      const newSections = [...config.sections];
      [newSections[index], newSections[index + 1]] = [newSections[index + 1], newSections[index]];
      onChange({ ...config, sections: newSections });
    },
    [config, onChange],
  );

  // 필드 타입별 색상
  const getFieldTypeColor = (fieldType: FormFieldConfig["fieldType"]): string => {
    switch (fieldType) {
      case "text":
      case "email":
      case "password":
      case "tel":
        return "text-blue-600 bg-blue-50 border-blue-200";
      case "number":
        return "text-cyan-600 bg-cyan-50 border-cyan-200";
      case "date":
      case "datetime":
        return "text-purple-600 bg-purple-50 border-purple-200";
      case "select":
        return "text-green-600 bg-green-50 border-green-200";
      case "checkbox":
        return "text-pink-600 bg-pink-50 border-pink-200";
      case "textarea":
        return "text-orange-600 bg-orange-50 border-orange-200";
      default:
        return "text-gray-600 bg-gray-50 border-gray-200";
    }
  };

  // 섹션 레이아웃 모달 열기
  const handleOpenSectionLayout = (section: FormSectionConfig) => {
    setSelectedSection(section);
    setSectionLayoutModalOpen(true);
  };

  // 필드 상세 설정 모달 열기
  const handleOpenFieldDetail = (section: FormSectionConfig, field: FormFieldConfig) => {
    setSelectedSection(section);
    setSelectedField(field);
    setFieldDetailModalOpen(true);
  };

  return (
    <div className="flex h-full w-full min-w-0 flex-col overflow-hidden">
      <div className="w-full min-w-0 flex-1 overflow-x-hidden overflow-y-auto">
        <div className="w-full max-w-full min-w-0 space-y-4 p-4">
          {/* 모달 기본 설정 */}
          <Accordion type="single" collapsible defaultValue="modal-settings" className="w-full min-w-0">
            <AccordionItem value="modal-settings" className="w-full min-w-0 rounded-lg border">
              <AccordionTrigger className="w-full min-w-0 px-4 py-3 text-sm font-medium hover:no-underline">
                <div className="flex w-full min-w-0 items-center gap-2">
                  <Settings className="h-4 w-4 shrink-0" />
                  <span className="truncate">모달 기본 설정</span>
                </div>
              </AccordionTrigger>
              <AccordionContent className="w-full min-w-0 space-y-4 px-4 pb-4">
                <div className="w-full min-w-0">
                  <Label className="mb-1.5 block text-xs font-medium">모달 제목</Label>
                  <Input
                    value={config.modal.title}
                    onChange={(e) => updateModalConfig({ title: e.target.value })}
                    className="h-9 w-full max-w-full text-sm"
                  />
                  <HelpText>모달 상단에 표시될 제목입니다</HelpText>
                </div>

                <div className="w-full min-w-0">
                  <Label className="mb-1.5 block text-xs font-medium">모달 크기</Label>
                  <Select value={config.modal.size} onValueChange={(value: any) => updateModalConfig({ size: value })}>
                    <SelectTrigger className="h-9 w-full max-w-full text-sm">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {MODAL_SIZE_OPTIONS.map((opt) => (
                        <SelectItem key={opt.value} value={opt.value}>
                          {opt.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <HelpText>모달 창의 크기를 선택하세요</HelpText>
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>

          {/* 저장 설정 */}
          <Accordion type="single" collapsible defaultValue="save-settings" className="w-full min-w-0">
            <AccordionItem value="save-settings" className="w-full min-w-0 rounded-lg border">
              <AccordionTrigger className="w-full min-w-0 px-4 py-3 text-sm font-medium hover:no-underline">
                <div className="flex w-full min-w-0 items-center gap-2">
                  <Database className="h-4 w-4 shrink-0" />
                  <span className="truncate">저장 설정</span>
                </div>
              </AccordionTrigger>
              <AccordionContent className="w-full min-w-0 space-y-4 px-4 pb-4">
                <div className="w-full min-w-0 space-y-3">
                  <div className="min-w-0 flex-1">
                    <Label className="mb-1.5 block text-xs font-medium">저장 테이블</Label>
                    <p className="text-muted-foreground text-sm">{config.saveConfig.tableName || "(미설정)"}</p>
                    {config.saveConfig.customApiSave?.enabled &&
                      config.saveConfig.customApiSave?.multiTable?.enabled && (
                        <Badge variant="secondary" className="mt-2 px-2 py-0.5 text-xs">
                          다중 테이블 모드
                        </Badge>
                      )}
                  </div>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => setSaveSettingsModalOpen(true)}
                    className="h-9 w-full text-xs"
                  >
                    <Settings className="mr-2 h-4 w-4" />
                    저장 설정 열기
                  </Button>
                </div>
                <HelpText>
                  데이터를 저장할 테이블과 방식을 설정합니다.
                  <br />
                  "저장 설정 열기"를 클릭하여 상세 설정을 변경하세요.
                </HelpText>
              </AccordionContent>
            </AccordionItem>
          </Accordion>

          {/* 섹션 구성 */}
          <Accordion type="single" collapsible defaultValue="sections" className="w-full min-w-0">
            <AccordionItem value="sections" className="w-full min-w-0 rounded-lg border">
              <AccordionTrigger className="w-full min-w-0 px-4 py-3 text-sm font-medium hover:no-underline">
                <div className="flex w-full min-w-0 items-center gap-2">
                  <Layout className="h-4 w-4 shrink-0" />
                  <span className="truncate">섹션 구성</span>
                  <Badge variant="secondary" className="shrink-0 px-2 py-0.5 text-xs">
                    {config.sections.length}개
                  </Badge>
                </div>
              </AccordionTrigger>
              <AccordionContent className="w-full min-w-0 space-y-4 px-4 pb-4">
                {/* 섹션 추가 버튼들 */}
                <div className="flex w-full min-w-0 gap-2">
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => addSection("fields")}
                    className="h-9 min-w-0 flex-1 text-xs"
                  >
                    <Plus className="mr-1 h-4 w-4 shrink-0" />
                    <span className="truncate">필드 섹션</span>
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => addSection("table")}
                    className="h-9 min-w-0 flex-1 text-xs"
                  >
                    <Table className="mr-1 h-4 w-4 shrink-0" />
                    <span className="truncate">테이블 섹션</span>
                  </Button>
                </div>
                <HelpText>
                  필드 섹션: 일반 입력 필드들을 배치합니다.
                  <br />
                  테이블 섹션: 품목 목록 등 반복 테이블 형식 데이터를 관리합니다.
                </HelpText>

                {config.sections.length === 0 ? (
                  <div className="bg-muted/20 w-full rounded-lg border border-dashed py-12 text-center">
                    <p className="text-muted-foreground mb-2 text-sm font-medium">섹션이 없습니다</p>
                    <p className="text-muted-foreground text-xs">위 버튼으로 섹션을 추가하세요</p>
                  </div>
                ) : (
                  <div className="w-full min-w-0 space-y-3">
                    {config.sections.map((section, index) => (
                      <div
                        key={section.id}
                        className="bg-card w-full min-w-0 space-y-3 overflow-hidden rounded-lg border p-3"
                      >
                        {/* 헤더: 제목 + 타입 배지 + 삭제 */}
                        <div className="flex w-full min-w-0 items-start justify-between gap-3">
                          <div className="min-w-0 flex-1">
                            <div className="mb-1.5 flex items-center gap-2">
                              <span className="truncate text-sm font-medium">{section.title}</span>
                              {section.type === "table" ? (
                                <Badge
                                  variant="outline"
                                  className="border-purple-200 bg-purple-50 px-1.5 py-0.5 text-xs text-purple-600"
                                >
                                  테이블
                                </Badge>
                              ) : section.repeatable ? (
                                <Badge variant="outline" className="px-1.5 py-0.5 text-xs">
                                  반복
                                </Badge>
                              ) : null}
                            </div>
                            {section.type === "table" ? (
                              <Badge variant="secondary" className="px-2 py-0.5 text-xs">
                                {section.tableConfig?.source?.tableName || "(소스 미설정)"}
                              </Badge>
                            ) : (
                              <Badge variant="secondary" className="px-2 py-0.5 text-xs">
                                {(section.fields || []).length}개 필드
                              </Badge>
                            )}
                          </div>

                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => removeSection(section.id)}
                            className="text-destructive hover:text-destructive h-7 w-7 shrink-0 p-0"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>

                        {/* 순서 조정 버튼 */}
                        <div className="flex items-center gap-2">
                          <GripVertical className="text-muted-foreground h-4 w-4 shrink-0" />
                          <div className="flex gap-1">
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => moveSectionUp(index)}
                              disabled={index === 0}
                              className="h-7 px-2 text-xs"
                            >
                              <ChevronUp className="h-3.5 w-3.5" />
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => moveSectionDown(index)}
                              disabled={index === config.sections.length - 1}
                              className="h-7 px-2 text-xs"
                            >
                              <ChevronDown className="h-3.5 w-3.5" />
                            </Button>
                          </div>
                        </div>

                        {/* 필드 목록 (필드 타입만) */}
                        {section.type !== "table" && (section.fields || []).length > 0 && (
                          <div className="flex max-w-full flex-wrap gap-1.5 overflow-hidden pt-1">
                            {(section.fields || []).slice(0, 4).map((field) => (
                              <Badge
                                key={field.id}
                                variant="outline"
                                className={cn("shrink-0 px-2 py-0.5 text-xs", getFieldTypeColor(field.fieldType))}
                              >
                                {field.label}
                              </Badge>
                            ))}
                            {(section.fields || []).length > 4 && (
                              <Badge variant="outline" className="shrink-0 px-2 py-0.5 text-xs">
                                +{(section.fields || []).length - 4}
                              </Badge>
                            )}
                          </div>
                        )}

                        {/* 테이블 컬럼 목록 (테이블 타입만) */}
                        {section.type === "table" &&
                          section.tableConfig?.columns &&
                          section.tableConfig.columns.length > 0 && (
                            <div className="flex max-w-full flex-wrap gap-1.5 overflow-hidden pt-1">
                              {section.tableConfig.columns.slice(0, 4).map((col, idx) => (
                                <Badge
                                  key={col.field || `col_${idx}`}
                                  variant="outline"
                                  className="shrink-0 border-purple-200 bg-purple-50 px-2 py-0.5 text-xs text-purple-600"
                                >
                                  {col.label || col.field || `컬럼 ${idx + 1}`}
                                </Badge>
                              ))}
                              {section.tableConfig.columns.length > 4 && (
                                <Badge variant="outline" className="shrink-0 px-2 py-0.5 text-xs">
                                  +{section.tableConfig.columns.length - 4}
                                </Badge>
                              )}
                            </div>
                          )}

                        {/* 설정 버튼 (타입에 따라 다름) */}
                        {section.type === "table" ? (
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => handleOpenTableSectionSettings(section)}
                            className="h-9 w-full text-xs"
                          >
                            <Table className="mr-2 h-4 w-4" />
                            테이블 설정
                          </Button>
                        ) : (
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => handleOpenSectionLayout(section)}
                            className="h-9 w-full text-xs"
                          >
                            <Layout className="mr-2 h-4 w-4" />
                            레이아웃 설정
                          </Button>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      </div>

      {/* 저장 설정 모달 */}
      <SaveSettingsModal
        open={saveSettingsModalOpen}
        onOpenChange={setSaveSettingsModalOpen}
        saveConfig={config.saveConfig}
        sections={config.sections}
        onSave={(updates) => {
          onChange({
            ...config,
            saveConfig: updates,
          });
        }}
        tables={tables}
        tableColumns={tableColumns}
        onLoadTableColumns={loadTableColumns}
      />

      {/* 섹션 레이아웃 모달 */}
      {selectedSection && (
        <SectionLayoutModal
          open={sectionLayoutModalOpen}
          onOpenChange={setSectionLayoutModalOpen}
          section={selectedSection}
          onSave={(updates) => {
            // config 업데이트
            updateSection(selectedSection.id, updates);
            // selectedSection 상태도 업데이트 (최신 상태 유지)
            setSelectedSection({ ...selectedSection, ...updates });
            setSectionLayoutModalOpen(false);
          }}
          onOpenFieldDetail={(field) => {
            setSectionLayoutModalOpen(false);
            setSelectedField(field);
            setFieldDetailModalOpen(true);
          }}
          tableName={config.saveConfig.tableName}
          tableColumns={
            tableColumns[config.saveConfig.tableName || ""]?.map((col) => ({
              name: col.name,
              type: col.type,
              label: col.label || col.name,
            })) || []
          }
        />
      )}

      {/* 필드 상세 설정 모달 */}
      {selectedSection && selectedField && (
        <FieldDetailSettingsModal
          open={fieldDetailModalOpen}
          onOpenChange={(open) => {
            setFieldDetailModalOpen(open);
            if (!open) {
              // 필드 상세 모달을 닫으면 섹션 레이아웃 모달을 다시 엽니다
              setSectionLayoutModalOpen(true);
            }
          }}
          field={selectedField}
          onSave={(updatedField) => {
            // updatedField는 FieldDetailSettingsModal에서 전달된 전체 필드 객체
            const updatedSection = {
              ...selectedSection,
              // 기본 필드 목록에서 업데이트
              fields: (selectedSection.fields || []).map((f) => (f.id === updatedField.id ? updatedField : f)),
              // 옵셔널 필드 그룹 내 필드도 업데이트
              optionalFieldGroups: selectedSection.optionalFieldGroups?.map((group) => ({
                ...group,
                fields: group.fields.map((f) => (f.id === updatedField.id ? updatedField : f)),
              })),
            };

            // config 업데이트
            onChange({
              ...config,
              sections: config.sections.map((s) => (s.id === selectedSection.id ? updatedSection : s)),
            });

            // selectedSection과 selectedField 상태도 업데이트 (다음에 다시 열었을 때 최신 값 반영)
            setSelectedSection(updatedSection);
            setSelectedField(updatedField as FormFieldConfig);
            setFieldDetailModalOpen(false);
            setSectionLayoutModalOpen(true);
          }}
          tables={tables}
          tableColumns={tableColumns}
          numberingRules={numberingRules}
          onLoadTableColumns={loadTableColumns}
          targetTableName={config.saveConfig?.tableName}
          targetTableColumns={config.saveConfig?.tableName ? tableColumns[config.saveConfig.tableName] || [] : []}
        />
      )}

      {/* 테이블 섹션 설정 모달 */}
      {selectedSection && selectedSection.type === "table" && (
        <TableSectionSettingsModal
          open={tableSectionSettingsModalOpen}
          onOpenChange={setTableSectionSettingsModalOpen}
          section={selectedSection}
          onSave={(updates) => {
            const updatedSection = {
              ...selectedSection,
              ...updates,
            };

            // config 업데이트
            onChange({
              ...config,
              sections: config.sections.map((s) => (s.id === selectedSection.id ? updatedSection : s)),
            });

            setSelectedSection(updatedSection);
            setTableSectionSettingsModalOpen(false);
          }}
          tables={tables.map((t) => ({ table_name: t.name, comment: t.label }))}
          tableColumns={Object.fromEntries(
            Object.entries(tableColumns).map(([tableName, cols]) => [
              tableName,
              cols.map((c) => ({
                column_name: c.name,
                data_type: c.type,
                is_nullable: "YES",
                comment: c.label,
                input_type: c.inputType || "text",
              })),
            ]),
          )}
          onLoadTableColumns={loadTableColumns}
          allSections={config.sections as FormSectionConfig[]}
          availableParentFields={availableParentFields}
        />
      )}
    </div>
  );
}