"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 { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import {
  Plus,
  Trash2,
  GripVertical,
  ChevronUp,
  ChevronDown,
  Settings,
  Database,
  Layout,
  Hash,
  Check,
  ChevronsUpDown,
} from "lucide-react";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
import { apiClient } from "@/lib/api/client";
import { getNumberingRules } from "@/lib/api/numberingRule";

import {
  UniversalFormModalConfig,
  UniversalFormModalConfigPanelProps,
  FormSectionConfig,
  FormFieldConfig,
  FIELD_TYPE_OPTIONS,
  MODAL_SIZE_OPTIONS,
  SELECT_OPTION_TYPE_OPTIONS,
} from "./types";
import {
  defaultFieldConfig,
  defaultSectionConfig,
  defaultNumberingRuleConfig,
  defaultSelectOptionsConfig,
  generateSectionId,
  generateFieldId,
} from "./config";

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

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

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

  // 선택된 섹션/필드
  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(null);
  const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);

  // 테이블 선택 Combobox 상태
  const [tableSelectOpen, setTableSelectOpen] = useState(false);

  // 테이블 목록 로드
  useEffect(() => {
    console.log("[UniversalFormModal ConfigPanel] 초기화 - 테이블 및 채번규칙 로드");
    loadTables();
    loadNumberingRules();
  }, []);

  // 저장 테이블 변경 시 컬럼 로드
  useEffect(() => {
    if (config.saveConfig.tableName) {
      loadTableColumns(config.saveConfig.tableName);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [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; tableLabel?: string; table_label?: string }) => ({
            name: t.tableName || t.table_name || "",
            label: t.tableLabel || t.table_label || t.tableName || t.table_name || "",
          })),
        );
      }
    } catch (error) {
      console.error("테이블 목록 로드 실패:", error);
    }
  };

  const loadTableColumns = async (tableName: string) => {
    console.log(`[UniversalFormModal] 테이블 컬럼 로드 시도: ${tableName}`);
    if (!tableName || (tableColumns[tableName] && tableColumns[tableName].length > 0)) return;

    try {
      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
      console.log("[UniversalFormModal] 테이블 컬럼 응답:", response.data);

      // API 응답 구조: { success: true, data: { columns: [...] } }
      const data = response.data?.data?.columns || response.data?.data;

      if (response.data?.success && Array.isArray(data)) {
        console.log(`[UniversalFormModal] 파싱된 컬럼 ${data.length}개:`, data);
        setTableColumns((prev) => ({
          ...prev,
          [tableName]: data.map(
            (c: {
              columnName?: string;
              column_name?: string;
              dataType?: string;
              data_type?: string;
              columnLabel?: string;
              column_label?: string;
              name?: string;
            }) => ({
              name: c.columnName || c.column_name || c.name || "",
              type: c.dataType || c.data_type || "",
              label: c.columnLabel || c.column_label || c.columnName || c.column_name || c.name || "",
            }),
          ),
        }));
      } else {
        console.warn("[UniversalFormModal] 컬럼 데이터 없음 또는 형식 오류:", response.data);
        setTableColumns((prev) => ({ ...prev, [tableName]: [] }));
      }
    } catch (error) {
      console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
      setTableColumns((prev) => ({ ...prev, [tableName]: [] }));
    }
  };

  const loadNumberingRules = async () => {
    try {
      console.log("[UniversalFormModal] 채번규칙 로드 시도");
      const response = await getNumberingRules();
      console.log("[UniversalFormModal] 채번규칙 응답:", response);

      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const data: any = response.data;

      if (response.success && Array.isArray(data) && data.length > 0) {
        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 || "",
          }),
        );
        console.log("[UniversalFormModal] 파싱된 채번규칙:", rules);
        setNumberingRules(rules);
      } else {
        console.warn("[UniversalFormModal] 채번규칙 데이터 없음:", data);
      }
    } catch (error) {
      console.error("[UniversalFormModal] 채번규칙 목록 로드 실패:", error);
    }
  };

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

  const updateSaveConfig = useCallback(
    (updates: Partial<UniversalFormModalConfig["saveConfig"]>) => {
      onChange({
        ...config,
        saveConfig: { ...config.saveConfig, ...updates },
      });
    },
    [config, onChange],
  );

  // 섹션 관리
  const addSection = useCallback(() => {
    const newSection: FormSectionConfig = {
      ...defaultSectionConfig,
      id: generateSectionId(),
      title: `섹션 ${config.sections.length + 1}`,
    };
    onChange({
      ...config,
      sections: [...config.sections, newSection],
    });
    setSelectedSectionId(newSection.id);
  }, [config, onChange]);

  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),
      });
      if (selectedSectionId === sectionId) {
        setSelectedSectionId(null);
        setSelectedFieldId(null);
      }
    },
    [config, onChange, selectedSectionId],
  );

  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 addField = useCallback(
    (sectionId: string) => {
      const newField: FormFieldConfig = {
        ...defaultFieldConfig,
        id: generateFieldId(),
        label: "새 필드",
        numberingRule: { ...defaultNumberingRuleConfig },
        selectOptions: { ...defaultSelectOptionsConfig },
      };
      onChange({
        ...config,
        sections: config.sections.map((s) =>
          s.id === sectionId ? { ...s, fields: [...s.fields, newField] } : s,
        ),
      });
      setSelectedSectionId(sectionId);
      setSelectedFieldId(newField.id);
    },
    [config, onChange],
  );

  const updateField = useCallback(
    (sectionId: string, fieldId: string, updates: Partial<FormFieldConfig>) => {
      onChange({
        ...config,
        sections: config.sections.map((s) =>
          s.id === sectionId
            ? {
                ...s,
                fields: s.fields.map((f) => (f.id === fieldId ? { ...f, ...updates } : f)),
              }
            : s,
        ),
      });
    },
    [config, onChange],
  );

  const removeField = useCallback(
    (sectionId: string, fieldId: string) => {
      onChange({
        ...config,
        sections: config.sections.map((s) =>
          s.id === sectionId ? { ...s, fields: s.fields.filter((f) => f.id !== fieldId) } : s,
        ),
      });
      if (selectedFieldId === fieldId) {
        setSelectedFieldId(null);
      }
    },
    [config, onChange, selectedFieldId],
  );

  // 선택된 섹션/필드 가져오기
  const selectedSection = config.sections.find((s) => s.id === selectedSectionId);
  const selectedField = selectedSection?.fields.find((f) => f.id === selectedFieldId);

  // 현재 테이블의 컬럼 목록
  const currentColumns = tableColumns[config.saveConfig.tableName] || [];

  return (
    <ScrollArea className="h-full">
      <div className="p-3 space-y-4">
        {/* 모달 기본 설정 */}
        <Accordion type="single" collapsible defaultValue="modal-settings">
          <AccordionItem value="modal-settings" className="border rounded-lg">
            <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline">
              <div className="flex items-center gap-2">
                <Layout className="h-3.5 w-3.5" />
                모달 기본 설정
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-3 pb-3 space-y-3">
              <div>
                <Label className="text-[10px]">모달 제목</Label>
                <Input
                  value={config.modal.title || ""}
                  onChange={(e) => updateModalConfig({ title: e.target.value })}
                  placeholder="모달 제목 입력"
                  className="h-7 text-xs mt-1"
                />
              </div>

              <div>
                <Label className="text-[10px]">모달 크기</Label>
                <Select
                  value={config.modal.size || "lg"}
                  onValueChange={(value) =>
                    updateModalConfig({ size: value as UniversalFormModalConfig["modal"]["size"] })
                  }
                >
                  <SelectTrigger className="h-7 text-xs mt-1">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {MODAL_SIZE_OPTIONS.map((opt) => (
                      <SelectItem key={opt.value} value={opt.value}>
                        {opt.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label className="text-[10px]">저장 버튼 텍스트</Label>
                <Input
                  value={config.modal.saveButtonText || "저장"}
                  onChange={(e) => updateModalConfig({ saveButtonText: e.target.value })}
                  className="h-7 text-xs mt-1"
                />
              </div>
              <div>
                <Label className="text-[10px]">취소 버튼 텍스트</Label>
                <Input
                  value={config.modal.cancelButtonText || "취소"}
                  onChange={(e) => updateModalConfig({ cancelButtonText: e.target.value })}
                  className="h-7 text-xs mt-1"
                />
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>

        {/* 저장 설정 */}
        <Accordion type="single" collapsible defaultValue="save-settings">
          <AccordionItem value="save-settings" className="border rounded-lg">
            <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline">
              <div className="flex items-center gap-2">
                <Database className="h-3.5 w-3.5" />
                저장 설정
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-3 pb-3 space-y-3">
              {/* 저장 테이블 - Combobox */}
              <div>
                <Label className="text-[10px]">저장 테이블</Label>
                <Popover open={tableSelectOpen} onOpenChange={setTableSelectOpen}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      role="combobox"
                      aria-expanded={tableSelectOpen}
                      className="w-full h-7 justify-between text-xs mt-1"
                    >
                      {config.saveConfig.tableName
                        ? tables.find((t) => t.name === config.saveConfig.tableName)?.label ||
                          config.saveConfig.tableName
                        : "테이블 선택 또는 직접 입력"}
                      <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 h-8" />
                      <CommandList>
                        <CommandEmpty className="text-xs py-2 text-center">테이블을 찾을 수 없습니다</CommandEmpty>
                        <CommandGroup>
                          {tables.map((t) => (
                            <CommandItem
                              key={t.name}
                              value={`${t.name} ${t.label}`}
                              onSelect={() => {
                                updateSaveConfig({ tableName: t.name });
                                setTableSelectOpen(false);
                              }}
                              className="text-xs"
                            >
                              <Check
                                className={cn(
                                  "mr-2 h-3 w-3",
                                  config.saveConfig.tableName === t.name ? "opacity-100" : "opacity-0",
                                )}
                              />
                              <span className="font-medium">{t.name}</span>
                              {t.label !== t.name && (
                                <span className="ml-1 text-muted-foreground">({t.label})</span>
                              )}
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
                {config.saveConfig.tableName && (
                  <p className="text-[10px] text-muted-foreground mt-1">
                    컬럼 {currentColumns.length}개 로드됨
                  </p>
                )}
              </div>

              {/* 다중 행 저장 설정 */}
              <div className="border rounded-md p-2 space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-[10px] font-medium">다중 행 저장</span>
                  <Switch
                    checked={config.saveConfig.multiRowSave?.enabled || false}
                    onCheckedChange={(checked) =>
                      updateSaveConfig({
                        multiRowSave: { ...config.saveConfig.multiRowSave, enabled: checked },
                      })
                    }
                  />
                </div>
                <HelpText>겸직처럼 하나의 폼에서 여러 행을 저장할 때 사용합니다.</HelpText>

                {config.saveConfig.multiRowSave?.enabled && (
                  <div className="space-y-2 pt-2 border-t">
                    {/* 공통 필드 선택 */}
                    <div>
                      <Label className="text-[10px]">공통 필드 (모든 행에 저장)</Label>
                      <div className="mt-1 max-h-32 overflow-y-auto border rounded p-1 space-y-1">
                        {config.sections
                          .filter((s) => !s.repeatable)
                          .flatMap((s) => s.fields)
                          .map((field) => (
                            <label key={field.id} className="flex items-center gap-1 text-[10px] cursor-pointer">
                              <input
                                type="checkbox"
                                checked={config.saveConfig.multiRowSave?.commonFields?.includes(field.columnName) || false}
                                onChange={(e) => {
                                  const currentFields = config.saveConfig.multiRowSave?.commonFields || [];
                                  const newFields = e.target.checked
                                    ? [...currentFields, field.columnName]
                                    : currentFields.filter((f) => f !== field.columnName);
                                  updateSaveConfig({
                                    multiRowSave: { ...config.saveConfig.multiRowSave, commonFields: newFields },
                                  });
                                }}
                                className="h-3 w-3"
                              />
                              {field.label} ({field.columnName})
                            </label>
                          ))}
                      </div>
                      <HelpText>메인 행과 겸직 행 모두에 저장될 필드</HelpText>
                    </div>

                    {/* 메인 섹션 필드 선택 */}
                    <div>
                      <Label className="text-[10px]">메인 섹션 필드 (메인 행에만 저장)</Label>
                      <div className="mt-1 max-h-32 overflow-y-auto border rounded p-1 space-y-1">
                        {config.sections
                          .filter((s) => !s.repeatable)
                          .flatMap((s) => s.fields)
                          .filter((field) => !config.saveConfig.multiRowSave?.commonFields?.includes(field.columnName))
                          .map((field) => (
                            <label key={field.id} className="flex items-center gap-1 text-[10px] cursor-pointer">
                              <input
                                type="checkbox"
                                checked={config.saveConfig.multiRowSave?.mainSectionFields?.includes(field.columnName) || false}
                                onChange={(e) => {
                                  const currentFields = config.saveConfig.multiRowSave?.mainSectionFields || [];
                                  const newFields = e.target.checked
                                    ? [...currentFields, field.columnName]
                                    : currentFields.filter((f) => f !== field.columnName);
                                  updateSaveConfig({
                                    multiRowSave: { ...config.saveConfig.multiRowSave, mainSectionFields: newFields },
                                  });
                                }}
                                className="h-3 w-3"
                              />
                              {field.label} ({field.columnName})
                            </label>
                          ))}
                      </div>
                      <HelpText>메인 행에만 저장될 필드 (공통 필드 제외)</HelpText>
                    </div>

                    {/* 반복 섹션 선택 */}
                    <div>
                      <Label className="text-[10px]">반복 섹션</Label>
                      <Select
                        value={config.saveConfig.multiRowSave?.repeatSectionId || ""}
                        onValueChange={(value) =>
                          updateSaveConfig({
                            multiRowSave: { ...config.saveConfig.multiRowSave, repeatSectionId: value },
                          })
                        }
                      >
                        <SelectTrigger className="h-6 text-[10px] mt-1">
                          <SelectValue placeholder="반복 섹션 선택" />
                        </SelectTrigger>
                        <SelectContent>
                          {config.sections
                            .filter((s) => s.repeatable)
                            .map((section) => (
                              <SelectItem key={section.id} value={section.id}>
                                {section.title}
                              </SelectItem>
                            ))}
                        </SelectContent>
                      </Select>
                      <HelpText>겸직 등 반복 데이터가 있는 섹션</HelpText>
                    </div>

                    <Separator />

                    <div>
                      <Label className="text-[10px]">구분 컬럼</Label>
                      <Input
                        value={config.saveConfig.multiRowSave?.typeColumn || "employment_type"}
                        onChange={(e) =>
                          updateSaveConfig({
                            multiRowSave: { ...config.saveConfig.multiRowSave, typeColumn: e.target.value },
                          })
                        }
                        placeholder="employment_type"
                        className="h-6 text-[10px] mt-1"
                      />
                      <HelpText>메인/서브를 구분하는 컬럼명</HelpText>
                    </div>
                    <div>
                      <Label className="text-[10px]">메인 값</Label>
                      <Input
                        value={config.saveConfig.multiRowSave?.mainTypeValue || "main"}
                        onChange={(e) =>
                          updateSaveConfig({
                            multiRowSave: { ...config.saveConfig.multiRowSave, mainTypeValue: e.target.value },
                          })
                        }
                        className="h-6 text-[10px] mt-1"
                      />
                    </div>
                    <div>
                      <Label className="text-[10px]">서브 값</Label>
                      <Input
                        value={config.saveConfig.multiRowSave?.subTypeValue || "concurrent"}
                        onChange={(e) =>
                          updateSaveConfig({
                            multiRowSave: { ...config.saveConfig.multiRowSave, subTypeValue: e.target.value },
                          })
                        }
                        className="h-6 text-[10px] mt-1"
                      />
                    </div>
                  </div>
                )}
              </div>

              {/* 저장 후 동작 */}
              <div className="space-y-2">
                <Label className="text-[10px] font-medium">저장 후 동작</Label>
                <div className="flex items-center justify-between">
                  <span className="text-[10px]">모달 닫기</span>
                  <Switch
                    checked={config.saveConfig.afterSave?.closeModal !== false}
                    onCheckedChange={(checked) =>
                      updateSaveConfig({
                        afterSave: { ...config.saveConfig.afterSave, closeModal: checked },
                      })
                    }
                  />
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-[10px]">부모 화면 새로고침</span>
                  <Switch
                    checked={config.saveConfig.afterSave?.refreshParent || false}
                    onCheckedChange={(checked) =>
                      updateSaveConfig({
                        afterSave: { ...config.saveConfig.afterSave, refreshParent: checked },
                      })
                    }
                  />
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-[10px]">토스트 메시지 표시</span>
                  <Switch
                    checked={config.saveConfig.afterSave?.showToast !== false}
                    onCheckedChange={(checked) =>
                      updateSaveConfig({
                        afterSave: { ...config.saveConfig.afterSave, showToast: checked },
                      })
                    }
                  />
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>

        {/* 섹션 관리 */}
        <Accordion type="single" collapsible defaultValue="sections">
          <AccordionItem value="sections" className="border rounded-lg">
            <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline">
              <div className="flex items-center gap-2">
                <Settings className="h-3.5 w-3.5" />
                섹션 관리 ({config.sections.length})
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-3 pb-3 space-y-2">
              <Button onClick={addSection} variant="outline" size="sm" className="w-full h-7 text-xs">
                <Plus className="h-3 w-3 mr-1" />
                섹션 추가
              </Button>

              {config.sections.map((section, sectionIndex) => (
                <Card
                  key={section.id}
                  className={cn(
                    "cursor-pointer transition-colors",
                    selectedSectionId === section.id && "ring-2 ring-primary",
                  )}
                  onClick={() => {
                    setSelectedSectionId(section.id);
                    setSelectedFieldId(null);
                  }}
                >
                  <CardHeader className="p-2">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-1">
                        <GripVertical className="h-3 w-3 text-muted-foreground" />
                        <CardTitle className="text-xs">{section.title}</CardTitle>
                        {section.repeatable && (
                          <span className="text-[9px] bg-blue-100 text-blue-700 px-1 rounded">반복</span>
                        )}
                      </div>
                      <div className="flex items-center gap-0.5">
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-5 w-5"
                          onClick={(e) => {
                            e.stopPropagation();
                            moveSectionUp(sectionIndex);
                          }}
                          disabled={sectionIndex === 0}
                        >
                          <ChevronUp className="h-3 w-3" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-5 w-5"
                          onClick={(e) => {
                            e.stopPropagation();
                            moveSectionDown(sectionIndex);
                          }}
                          disabled={sectionIndex === config.sections.length - 1}
                        >
                          <ChevronDown className="h-3 w-3" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-5 w-5 text-destructive"
                          onClick={(e) => {
                            e.stopPropagation();
                            removeSection(section.id);
                          }}
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>
                    </div>
                    <CardDescription className="text-[10px]">필드 {section.fields.length}개</CardDescription>
                  </CardHeader>
                </Card>
              ))}
            </AccordionContent>
          </AccordionItem>
        </Accordion>

        {/* 선택된 섹션 설정 */}
        {selectedSection && (
          <Accordion type="single" collapsible defaultValue="section-detail">
            <AccordionItem value="section-detail" className="border rounded-lg border-primary/50">
              <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline">
                <div className="flex items-center gap-2">
                  <Layout className="h-3.5 w-3.5 text-primary" />
                  섹션: {selectedSection.title}
                </div>
              </AccordionTrigger>
              <AccordionContent className="px-3 pb-3 space-y-3">
                <div>
                  <Label className="text-[10px]">섹션 제목</Label>
                  <Input
                    value={selectedSection.title}
                    onChange={(e) => updateSection(selectedSection.id, { title: e.target.value })}
                    className="h-7 text-xs mt-1"
                  />
                </div>

                <div>
                  <Label className="text-[10px]">섹션 설명</Label>
                  <Textarea
                    value={selectedSection.description || ""}
                    onChange={(e) => updateSection(selectedSection.id, { description: e.target.value })}
                    className="text-xs mt-1 min-h-[50px]"
                    placeholder="섹션에 대한 설명 (선택)"
                  />
                </div>

                <div className="flex items-center justify-between">
                  <span className="text-[10px]">접을 수 있음</span>
                  <Switch
                    checked={selectedSection.collapsible || false}
                    onCheckedChange={(checked) => updateSection(selectedSection.id, { collapsible: checked })}
                  />
                </div>

                <div>
                  <Label className="text-[10px]">열 수 (레이아웃)</Label>
                  <Select
                    value={String(selectedSection.columns || 2)}
                    onValueChange={(value) => updateSection(selectedSection.id, { columns: parseInt(value) })}
                  >
                    <SelectTrigger className="h-7 text-xs mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="1">1열 (세로 배치)</SelectItem>
                      <SelectItem value="2">2열 (기본)</SelectItem>
                      <SelectItem value="3">3열</SelectItem>
                      <SelectItem value="4">4열</SelectItem>
                    </SelectContent>
                  </Select>
                  <HelpText>필드들을 몇 열로 배치할지 설정합니다.</HelpText>
                </div>

                <div className="border rounded-md p-2 space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-[10px] font-medium">반복 섹션</span>
                    <Switch
                      checked={selectedSection.repeatable || false}
                      onCheckedChange={(checked) => updateSection(selectedSection.id, { repeatable: checked })}
                    />
                  </div>
                  <HelpText>겸직처럼 동일한 필드 그룹을 여러 개 추가할 수 있습니다.</HelpText>

                  {selectedSection.repeatable && (
                    <div className="space-y-2 pt-2 border-t">
                      <div>
                        <Label className="text-[10px]">최소 개수</Label>
                        <Input
                          type="number"
                          value={selectedSection.repeatConfig?.minItems || 0}
                          onChange={(e) =>
                            updateSection(selectedSection.id, {
                              repeatConfig: {
                                ...selectedSection.repeatConfig,
                                minItems: parseInt(e.target.value) || 0,
                              },
                            })
                          }
                          className="h-6 text-[10px] mt-1"
                        />
                      </div>
                      <div>
                        <Label className="text-[10px]">최대 개수</Label>
                        <Input
                          type="number"
                          value={selectedSection.repeatConfig?.maxItems || 10}
                          onChange={(e) =>
                            updateSection(selectedSection.id, {
                              repeatConfig: {
                                ...selectedSection.repeatConfig,
                                maxItems: parseInt(e.target.value) || 10,
                              },
                            })
                          }
                          className="h-6 text-[10px] mt-1"
                        />
                      </div>
                      <div>
                        <Label className="text-[10px]">추가 버튼 텍스트</Label>
                        <Input
                          value={selectedSection.repeatConfig?.addButtonText || "+ 추가"}
                          onChange={(e) =>
                            updateSection(selectedSection.id, {
                              repeatConfig: {
                                ...selectedSection.repeatConfig,
                                addButtonText: e.target.value,
                              },
                            })
                          }
                          className="h-6 text-[10px] mt-1"
                        />
                      </div>
                    </div>
                  )}
                </div>

                <Separator />

                {/* 필드 목록 */}
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label className="text-[10px] font-medium">필드 목록</Label>
                    <Button
                      onClick={() => addField(selectedSection.id)}
                      variant="outline"
                      size="sm"
                      className="h-6 text-[10px]"
                    >
                      <Plus className="h-3 w-3 mr-1" />
                      필드 추가
                    </Button>
                  </div>

                  {selectedSection.fields.length === 0 ? (
                    <p className="text-[10px] text-muted-foreground text-center py-2">필드가 없습니다</p>
                  ) : (
                    <div className="space-y-1">
                      {selectedSection.fields.map((field) => (
                        <div
                          key={field.id}
                          className={cn(
                            "flex items-center justify-between p-1.5 rounded border cursor-pointer hover:bg-accent/50",
                            selectedFieldId === field.id && "bg-accent ring-1 ring-primary",
                          )}
                          onClick={() => setSelectedFieldId(field.id)}
                        >
                          <div className="flex items-center gap-1.5">
                            <GripVertical className="h-3 w-3 text-muted-foreground" />
                            <span className="text-[10px] font-medium">{field.label}</span>
                            {field.columnName && (
                              <span className="text-[9px] text-muted-foreground">({field.columnName})</span>
                            )}
                            {field.required && <span className="text-[9px] text-destructive">*</span>}
                          </div>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-5 w-5 text-destructive"
                            onClick={(e) => {
                              e.stopPropagation();
                              removeField(selectedSection.id, field.id);
                            }}
                          >
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        )}

        {/* 선택된 필드 설정 */}
        {selectedSection && selectedField && (
          <Accordion type="single" collapsible defaultValue="field-detail">
            <AccordionItem value="field-detail" className="border rounded-lg border-blue-500/50">
              <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline">
                <div className="flex items-center gap-2">
                  <Hash className="h-3.5 w-3.5 text-blue-500" />
                  필드: {selectedField.label}
                </div>
              </AccordionTrigger>
              <AccordionContent className="px-3 pb-3 space-y-3">
                {/* 기본 정보 */}
                <div>
                  <Label className="text-[10px]">라벨</Label>
                  <Input
                    value={selectedField.label}
                    onChange={(e) => updateField(selectedSection.id, selectedField.id, { label: e.target.value })}
                    className="h-7 text-xs mt-1"
                  />
                </div>
                <div>
                  <Label className="text-[10px]">컬럼명</Label>
                  {currentColumns.length > 0 ? (
                    <Select
                      value={selectedField.columnName}
                      onValueChange={(value) =>
                        updateField(selectedSection.id, selectedField.id, { columnName: value })
                      }
                    >
                      <SelectTrigger className="h-7 text-xs mt-1">
                        <SelectValue placeholder="컬럼 선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {currentColumns.map((col) => (
                          <SelectItem key={col.name} value={col.name}>
                            {col.name}
                            {col.label !== col.name && ` (${col.label})`}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  ) : (
                    <Input
                      value={selectedField.columnName}
                      onChange={(e) =>
                        updateField(selectedSection.id, selectedField.id, { columnName: e.target.value })
                      }
                      placeholder="테이블을 먼저 선택하세요"
                      className="h-7 text-xs mt-1"
                    />
                  )}
                </div>

                <div>
                  <Label className="text-[10px]">필드 타입</Label>
                  <Select
                    value={selectedField.fieldType}
                    onValueChange={(value) =>
                      updateField(selectedSection.id, selectedField.id, {
                        fieldType: value as FormFieldConfig["fieldType"],
                      })
                    }
                  >
                    <SelectTrigger className="h-7 text-xs mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {FIELD_TYPE_OPTIONS.map((opt) => (
                        <SelectItem key={opt.value} value={opt.value}>
                          {opt.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label className="text-[10px]">그리드 너비</Label>
                  <Select
                    value={String(selectedField.gridSpan || 6)}
                    onValueChange={(value) =>
                      updateField(selectedSection.id, selectedField.id, { gridSpan: parseInt(value) })
                    }
                  >
                    <SelectTrigger className="h-7 text-xs mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="3">1/4 너비</SelectItem>
                      <SelectItem value="4">1/3 너비</SelectItem>
                      <SelectItem value="6">1/2 너비</SelectItem>
                      <SelectItem value="8">2/3 너비</SelectItem>
                      <SelectItem value="12">전체 너비</SelectItem>
                    </SelectContent>
                  </Select>
                  <HelpText>12칸 그리드 기준입니다.</HelpText>
                </div>

                <div>
                  <Label className="text-[10px]">플레이스홀더</Label>
                  <Input
                    value={selectedField.placeholder || ""}
                    onChange={(e) =>
                      updateField(selectedSection.id, selectedField.id, { placeholder: e.target.value })
                    }
                    placeholder="입력 힌트"
                    className="h-7 text-xs mt-1"
                  />
                </div>

                <Separator />

                {/* 옵션 토글 */}
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-[10px]">필수 입력</span>
                    <Switch
                      checked={selectedField.required || false}
                      onCheckedChange={(checked) =>
                        updateField(selectedSection.id, selectedField.id, { required: checked })
                      }
                    />
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-[10px]">비활성화 (읽기전용)</span>
                    <Switch
                      checked={selectedField.disabled || false}
                      onCheckedChange={(checked) =>
                        updateField(selectedSection.id, selectedField.id, { disabled: checked })
                      }
                    />
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-[10px]">숨김 (자동 저장만)</span>
                    <Switch
                      checked={selectedField.hidden || false}
                      onCheckedChange={(checked) =>
                        updateField(selectedSection.id, selectedField.id, { hidden: checked })
                      }
                    />
                  </div>
                  <HelpText>숨김 필드는 화면에 표시되지 않지만 값이 저장됩니다.</HelpText>

                  <div className="flex items-center justify-between">
                    <span className="text-[10px]">부모에서 값 받기</span>
                    <Switch
                      checked={selectedField.receiveFromParent || false}
                      onCheckedChange={(checked) =>
                        updateField(selectedSection.id, selectedField.id, { receiveFromParent: checked })
                      }
                    />
                  </div>
                  <HelpText>부모 화면에서 전달받은 값으로 자동 채워집니다.</HelpText>
                </div>

                <Separator />

                {/* 채번규칙 설정 */}
                <div className="border rounded-md p-2 space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-[10px] font-medium">채번규칙 사용</span>
                    <Switch
                      checked={selectedField.numberingRule?.enabled || false}
                      onCheckedChange={(checked) =>
                        updateField(selectedSection.id, selectedField.id, {
                          numberingRule: {
                            ...selectedField.numberingRule,
                            enabled: checked,
                          },
                        })
                      }
                    />
                  </div>
                  <HelpText>자동으로 코드/번호를 생성합니다. (예: EMP-001)</HelpText>

                  {selectedField.numberingRule?.enabled && (
                    <div className="space-y-2 pt-2 border-t">
                      <Select
                        value={selectedField.numberingRule?.ruleId || ""}
                        onValueChange={(value) =>
                          updateField(selectedSection.id, selectedField.id, {
                            numberingRule: {
                              ...selectedField.numberingRule,
                              ruleId: value,
                            },
                          })
                        }
                      >
                        <SelectTrigger className="h-7 text-xs">
                          <SelectValue placeholder="규칙 선택" />
                        </SelectTrigger>
                        <SelectContent>
                          {numberingRules.length === 0 ? (
                            <div className="px-2 py-1.5 text-xs text-muted-foreground">
                              등록된 채번규칙이 없습니다
                            </div>
                          ) : (
                            numberingRules.map((rule) => (
                              <SelectItem key={rule.id} value={rule.id}>
                                {rule.name}
                              </SelectItem>
                            ))
                          )}
                        </SelectContent>
                      </Select>

                      <div className="flex items-center justify-between">
                        <span className="text-[10px]">사용자 수정 가능</span>
                        <Switch
                          checked={selectedField.numberingRule?.editable || false}
                          onCheckedChange={(checked) =>
                            updateField(selectedSection.id, selectedField.id, {
                              numberingRule: {
                                ...selectedField.numberingRule,
                                editable: checked,
                              },
                            })
                          }
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <span className="text-[10px]">저장 시점에 생성</span>
                        <Switch
                          checked={selectedField.numberingRule?.generateOnSave || false}
                          onCheckedChange={(checked) =>
                            updateField(selectedSection.id, selectedField.id, {
                              numberingRule: {
                                ...selectedField.numberingRule,
                                generateOnSave: checked,
                                generateOnOpen: !checked,
                              },
                            })
                          }
                        />
                      </div>
                      <HelpText>OFF: 모달 열릴 때 생성 / ON: 저장 버튼 클릭 시 생성</HelpText>
                    </div>
                  )}
                </div>

                {/* Select 옵션 설정 */}
                {selectedField.fieldType === "select" && (
                  <div className="border rounded-md p-2 space-y-2">
                    <Label className="text-[10px] font-medium">선택 옵션 설정</Label>
                    <Select
                      value={selectedField.selectOptions?.type || "static"}
                      onValueChange={(value) =>
                        updateField(selectedSection.id, selectedField.id, {
                          selectOptions: {
                            ...selectedField.selectOptions,
                            type: value as "static" | "table" | "code",
                          },
                        })
                      }
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {SELECT_OPTION_TYPE_OPTIONS.map((opt) => (
                          <SelectItem key={opt.value} value={opt.value}>
                            {opt.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>

                    {selectedField.selectOptions?.type === "table" && (
                      <div className="space-y-2 pt-2 border-t">
                        <div>
                          <Label className="text-[10px]">참조 테이블</Label>
                          <Select
                            value={selectedField.selectOptions?.tableName || ""}
                            onValueChange={(value) =>
                              updateField(selectedSection.id, selectedField.id, {
                                selectOptions: {
                                  ...selectedField.selectOptions,
                                  tableName: value,
                                },
                              })
                            }
                          >
                            <SelectTrigger className="h-6 text-[10px] mt-1">
                              <SelectValue placeholder="테이블 선택" />
                            </SelectTrigger>
                            <SelectContent>
                              {tables.map((t) => (
                                <SelectItem key={t.name} value={t.name}>
                                  {t.label || t.name}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                        <div>
                          <Label className="text-[10px]">값 컬럼</Label>
                          <Input
                            value={selectedField.selectOptions?.valueColumn || ""}
                            onChange={(e) =>
                              updateField(selectedSection.id, selectedField.id, {
                                selectOptions: {
                                  ...selectedField.selectOptions,
                                  valueColumn: e.target.value,
                                },
                              })
                            }
                            placeholder="code"
                            className="h-6 text-[10px] mt-1"
                          />
                        </div>
                        <div>
                          <Label className="text-[10px]">라벨 컬럼</Label>
                          <Input
                            value={selectedField.selectOptions?.labelColumn || ""}
                            onChange={(e) =>
                              updateField(selectedSection.id, selectedField.id, {
                                selectOptions: {
                                  ...selectedField.selectOptions,
                                  labelColumn: e.target.value,
                                },
                              })
                            }
                            placeholder="name"
                            className="h-6 text-[10px] mt-1"
                          />
                        </div>
                      </div>
                    )}

                    {selectedField.selectOptions?.type === "code" && (
                      <div className="pt-2 border-t">
                        <Label className="text-[10px]">공통코드 카테고리</Label>
                        <Input
                          value={selectedField.selectOptions?.codeCategory || ""}
                          onChange={(e) =>
                            updateField(selectedSection.id, selectedField.id, {
                              selectOptions: {
                                ...selectedField.selectOptions,
                                codeCategory: e.target.value,
                              },
                            })
                          }
                          placeholder="POSITION_CODE"
                          className="h-6 text-[10px] mt-1"
                        />
                      </div>
                    )}
                  </div>
                )}
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        )}
      </div>
    </ScrollArea>
  );
}