ERP-node/frontend/components/v2/config-panels/V2RepeatContainerConfigPanel.tsx

"use client";

/**
 * V2 리피터 컨테이너 설정 패널
 * 토스식 단계별 UX: 데이터 소스 -> 레이아웃 -> 슬롯 필드 -> 고급 설정(접힘)
 */

import React, { useState, useEffect, useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import {
  Database,
  Table2,
  ChevronsUpDown,
  Check,
  LayoutGrid,
  LayoutList,
  Rows3,
  Plus,
  X,
  Type,
  Settings2,
  ChevronDown,
  ChevronUp,
  Settings,
} from "lucide-react";
import { cn } from "@/lib/utils";
import type { RepeatContainerConfig, SlotComponentConfig } from "@/lib/registry/components/v2-repeat-container/types";
import { tableTypeApi } from "@/lib/api/screen";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { DynamicComponentConfigPanel, hasComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";

interface V2RepeatContainerConfigPanelProps {
  config: RepeatContainerConfig;
  onChange: (config: Partial<RepeatContainerConfig>) => void;
  screenTableName?: string;
}

export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanelProps> = ({
  config,
  onChange,
  screenTableName,
}) => {
  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);

  const [availableColumns, setAvailableColumns] = useState<Array<{ columnName: string; displayName?: string }>>([]);
  const [loadingColumns, setLoadingColumns] = useState(false);

  const [titleColumnOpen, setTitleColumnOpen] = useState(false);
  const [descriptionColumnOpen, setDescriptionColumnOpen] = useState(false);

  const [titleDescOpen, setTitleDescOpen] = useState(true);
  const [styleOpen, setStyleOpen] = useState(false);
  const [interactionOpen, setInteractionOpen] = useState(false);

  const targetTableName = useMemo(() => {
    if (config.useCustomTable && config.customTableName) {
      return config.customTableName;
    }
    return config.tableName || screenTableName;
  }, [config.useCustomTable, config.customTableName, config.tableName, screenTableName]);

  useEffect(() => {
    if (screenTableName && !config.tableName && !config.customTableName) {
      onChange({ tableName: screenTableName });
    }
  }, [screenTableName, config.tableName, config.customTableName, onChange]);

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

  useEffect(() => {
    if (!targetTableName) {
      setAvailableColumns([]);
      return;
    }

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

  return (
    <div className="space-y-4">
      {/* ─── 1단계: 데이터 소스 테이블 ─── */}
      <div className="space-y-2">
        <p className="text-sm font-medium">데이터 소스</p>
        <p className="text-[11px] text-muted-foreground">
          반복 렌더링할 데이터의 테이블을 선택해요
        </p>
      </div>

      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
        {/* 현재 선택된 테이블 카드 */}
        <div className="flex items-center gap-2 rounded-md border bg-background p-2">
          <Database className="h-4 w-4 text-primary" />
          <div className="flex-1">
            <div className="text-xs font-medium">
              {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
            </div>
            <div className="text-[10px] text-muted-foreground">
              {config.useCustomTable ? "커스텀 테이블" : "화면 기본 테이블"}
            </div>
          </div>
        </div>

        {/* 테이블 변경 Combobox */}
        <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              role="combobox"
              aria-expanded={tableComboboxOpen}
              className="h-7 w-full justify-between text-xs"
              disabled={loadingTables}
            >
              테이블 변경...
              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-full p-0" align="start">
            <Command>
              <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
              <CommandList>
                <CommandEmpty className="py-2 text-xs">테이블을 찾을 수 없습니다</CommandEmpty>

                {screenTableName && (
                  <CommandGroup heading="기본 (화면 테이블)">
                    <CommandItem
                      key={`default-${screenTableName}`}
                      value={screenTableName}
                      onSelect={() => {
                        onChange({
                          useCustomTable: false,
                          customTableName: undefined,
                          tableName: screenTableName,
                        });
                        setTableComboboxOpen(false);
                      }}
                      className="text-xs cursor-pointer"
                    >
                      <Check
                        className={cn(
                          "mr-2 h-3 w-3",
                          !config.useCustomTable ? "opacity-100" : "opacity-0"
                        )}
                      />
                      <Database className="mr-2 h-3 w-3 text-primary" />
                      {screenTableName}
                    </CommandItem>
                  </CommandGroup>
                )}

                <CommandGroup heading="전체 테이블">
                  {availableTables
                    .filter((table) => table.tableName !== screenTableName)
                    .map((table) => (
                      <CommandItem
                        key={table.tableName}
                        value={`${table.tableName} ${table.displayName || ""}`}
                        onSelect={() => {
                          onChange({
                            useCustomTable: true,
                            customTableName: table.tableName,
                            tableName: table.tableName,
                          });
                          setTableComboboxOpen(false);
                        }}
                        className="text-xs cursor-pointer"
                      >
                        <Check
                          className={cn(
                            "mr-2 h-3 w-3",
                            config.customTableName === table.tableName ? "opacity-100" : "opacity-0"
                          )}
                        />
                        <Table2 className="mr-2 h-3 w-3 text-muted-foreground" />
                        {table.displayName || table.tableName}
                      </CommandItem>
                    ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>

        {/* 데이터 수신 방식 */}
        <div className="flex items-center justify-between py-1">
          <span className="text-xs text-muted-foreground">데이터 수신 방식</span>
          <Select
            value={config.dataSourceType || "manual"}
            onValueChange={(value) => onChange({ dataSourceType: value as any })}
          >
            <SelectTrigger className="h-7 w-[160px] text-xs">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="manual">수동 (API 직접 조회)</SelectItem>
              <SelectItem value="table-list">테이블 리스트 연동</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {config.dataSourceType === "table-list" && (
          <div className="flex items-center justify-between py-1">
            <div>
              <span className="text-xs text-muted-foreground">연동 컴포넌트 ID</span>
              <p className="text-[10px] text-muted-foreground mt-0.5">비우면 테이블명으로 자동 매칭</p>
            </div>
            <Input
              value={config.dataSourceComponentId || ""}
              onChange={(e) => onChange({ dataSourceComponentId: e.target.value })}
              placeholder="자동 매칭"
              className="h-7 w-[140px] text-xs"
            />
          </div>
        )}
      </div>

      {/* ─── 2단계: 레이아웃 ─── */}
      <div className="space-y-2">
        <p className="text-sm font-medium">레이아웃</p>
        <p className="text-[11px] text-muted-foreground">
          아이템의 배치 방식과 간격을 설정해요
        </p>
      </div>

      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
        {/* 배치 방식 카드 선택 */}
        <div className="grid grid-cols-3 gap-2">
          {[
            { value: "vertical", label: "세로", icon: Rows3 },
            { value: "horizontal", label: "가로", icon: LayoutList },
            { value: "grid", label: "그리드", icon: LayoutGrid },
          ].map(({ value, label, icon: Icon }) => (
            <button
              key={value}
              type="button"
              onClick={() => onChange({ layout: value as any })}
              className={cn(
                "flex flex-col items-center gap-1 rounded-md border p-2 text-xs transition-colors",
                config.layout === value
                  ? "border-primary bg-primary/5 text-primary"
                  : "border-border bg-background text-muted-foreground hover:bg-muted/50"
              )}
            >
              <Icon className={cn("h-4 w-4", value === "horizontal" && "rotate-90")} />
              <span>{label}</span>
            </button>
          ))}
        </div>

        {config.layout === "grid" && (
          <div className="flex items-center justify-between py-1">
            <span className="text-xs text-muted-foreground">그리드 컬럼 수</span>
            <Select
              value={String(config.gridColumns || 2)}
              onValueChange={(value) => onChange({ gridColumns: Number(value) })}
            >
              <SelectTrigger className="h-7 w-[100px] text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="2">2열</SelectItem>
                <SelectItem value="3">3열</SelectItem>
                <SelectItem value="4">4열</SelectItem>
                <SelectItem value="5">5열</SelectItem>
                <SelectItem value="6">6열</SelectItem>
              </SelectContent>
            </Select>
          </div>
        )}

        <div className="flex items-center justify-between py-1">
          <span className="text-xs text-muted-foreground">아이템 간격</span>
          <Input
            value={config.gap || "16px"}
            onChange={(e) => onChange({ gap: e.target.value })}
            placeholder="16px"
            className="h-7 w-[100px] text-xs"
          />
        </div>

        <div className="flex items-center justify-between py-1">
          <span className="text-xs text-muted-foreground">최소 너비</span>
          <Input
            value={config.itemMinWidth || ""}
            onChange={(e) => onChange({ itemMinWidth: e.target.value || undefined })}
            placeholder="auto"
            className="h-7 w-[100px] text-xs"
          />
        </div>

        <div className="flex items-center justify-between py-1">
          <span className="text-xs text-muted-foreground">최대 너비</span>
          <Input
            value={config.itemMaxWidth || ""}
            onChange={(e) => onChange({ itemMaxWidth: e.target.value || undefined })}
            placeholder="auto"
            className="h-7 w-[100px] text-xs"
          />
        </div>
      </div>

      {/* ─── 3단계: 반복 표시 필드 (슬롯) ─── */}
      <SlotChildrenSection
        config={config}
        onChange={onChange}
        availableColumns={availableColumns}
        loadingColumns={loadingColumns}
        screenTableName={screenTableName}
      />

      {/* ─── 4단계: 아이템 제목/설명 ─── */}
      <Collapsible open={titleDescOpen} onOpenChange={setTitleDescOpen}>
        <CollapsibleTrigger asChild>
          <button
            type="button"
            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
          >
            <div className="flex items-center gap-2">
              <Type className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-medium">아이템 제목/설명</span>
              <Badge variant="secondary" className="text-[10px] h-5">
                {config.showItemTitle ? "ON" : "OFF"}
              </Badge>
            </div>
            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", titleDescOpen && "rotate-180")} />
          </button>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-3 space-y-3">
            <div className="flex items-center justify-between py-1">
              <div>
                <p className="text-sm">제목/설명 표시</p>
                <p className="text-[11px] text-muted-foreground">각 아이템에 제목과 설명을 표시할 수 있어요</p>
              </div>
              <Switch
                checked={config.showItemTitle ?? false}
                onCheckedChange={(checked) => onChange({ showItemTitle: checked })}
              />
            </div>

            {config.showItemTitle && (
              <>
                {/* 제목 컬럼 Combobox */}
                <div className="space-y-1">
                  <span className="text-xs text-muted-foreground">제목 컬럼</span>
                  <Popover open={titleColumnOpen} onOpenChange={setTitleColumnOpen}>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        role="combobox"
                        aria-expanded={titleColumnOpen}
                        className="h-7 w-full justify-between text-xs font-normal"
                        disabled={loadingColumns || availableColumns.length === 0}
                      >
                        {loadingColumns
                          ? "로딩 중..."
                          : config.titleColumn
                            ? availableColumns.find(c => c.columnName === config.titleColumn)?.displayName || config.titleColumn
                            : "제목 컬럼 선택..."}
                        <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-[280px] p-0" align="start">
                      <Command>
                        <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
                        <CommandList>
                          <CommandEmpty className="py-2 text-xs text-center">컬럼을 찾을 수 없습니다</CommandEmpty>
                          <CommandGroup>
                            <CommandItem
                              value="__none__"
                              onSelect={() => {
                                onChange({ titleColumn: "" });
                                setTitleColumnOpen(false);
                              }}
                              className="text-xs"
                            >
                              <Check className={cn("mr-2 h-3 w-3", !config.titleColumn ? "opacity-100" : "opacity-0")} />
                              선택 안함
                            </CommandItem>
                            {availableColumns.map((col) => (
                              <CommandItem
                                key={col.columnName}
                                value={col.columnName}
                                onSelect={() => {
                                  onChange({ titleColumn: col.columnName });
                                  setTitleColumnOpen(false);
                                }}
                                className="text-xs"
                              >
                                <Check className={cn("mr-2 h-3 w-3", config.titleColumn === col.columnName ? "opacity-100" : "opacity-0")} />
                                <div className="flex flex-col">
                                  <span className="truncate">{col.displayName || col.columnName}</span>
                                  {col.displayName && col.displayName !== col.columnName && (
                                    <span className="truncate text-[10px] text-muted-foreground">{col.columnName}</span>
                                  )}
                                </div>
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </CommandList>
                      </Command>
                    </PopoverContent>
                  </Popover>
                </div>

                {/* 설명 컬럼 Combobox */}
                <div className="space-y-1">
                  <span className="text-xs text-muted-foreground">설명 컬럼 (선택)</span>
                  <Popover open={descriptionColumnOpen} onOpenChange={setDescriptionColumnOpen}>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        role="combobox"
                        aria-expanded={descriptionColumnOpen}
                        className="h-7 w-full justify-between text-xs font-normal"
                        disabled={loadingColumns || availableColumns.length === 0}
                      >
                        {loadingColumns
                          ? "로딩 중..."
                          : config.descriptionColumn
                            ? availableColumns.find(c => c.columnName === config.descriptionColumn)?.displayName || config.descriptionColumn
                            : "설명 컬럼 선택..."}
                        <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-[280px] p-0" align="start">
                      <Command>
                        <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
                        <CommandList>
                          <CommandEmpty className="py-2 text-xs text-center">컬럼을 찾을 수 없습니다</CommandEmpty>
                          <CommandGroup>
                            <CommandItem
                              value="__none__"
                              onSelect={() => {
                                onChange({ descriptionColumn: "" });
                                setDescriptionColumnOpen(false);
                              }}
                              className="text-xs"
                            >
                              <Check className={cn("mr-2 h-3 w-3", !config.descriptionColumn ? "opacity-100" : "opacity-0")} />
                              선택 안함
                            </CommandItem>
                            {availableColumns.map((col) => (
                              <CommandItem
                                key={col.columnName}
                                value={col.columnName}
                                onSelect={() => {
                                  onChange({ descriptionColumn: col.columnName });
                                  setDescriptionColumnOpen(false);
                                }}
                                className="text-xs"
                              >
                                <Check className={cn("mr-2 h-3 w-3", config.descriptionColumn === col.columnName ? "opacity-100" : "opacity-0")} />
                                <div className="flex flex-col">
                                  <span className="truncate">{col.displayName || col.columnName}</span>
                                  {col.displayName && col.displayName !== col.columnName && (
                                    <span className="truncate text-[10px] text-muted-foreground">{col.columnName}</span>
                                  )}
                                </div>
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </CommandList>
                      </Command>
                    </PopoverContent>
                  </Popover>
                </div>

                {/* 제목 템플릿 (titleColumn 미사용 시 대체) */}
                <div className="space-y-1">
                  <span className="text-xs text-muted-foreground">제목 템플릿 (레거시)</span>
                  <Input
                    value={config.itemTitleTemplate || ""}
                    onChange={(e) => onChange({ itemTitleTemplate: e.target.value })}
                    placeholder="{field_name} - {field_code}"
                    className="h-7 text-xs"
                  />
                  <p className="text-[10px] text-muted-foreground">
                    제목 컬럼 미선택 시 사용. 중괄호로 필드 참조
                  </p>
                </div>

                {/* 제목 스타일 */}
                <div className="space-y-2 pt-1">
                  <span className="text-[10px] text-muted-foreground">제목 스타일</span>
                  <div className="grid grid-cols-3 gap-2">
                    <div className="space-y-1">
                      <Label className="text-[10px]">크기</Label>
                      <Select
                        value={config.titleFontSize || "14px"}
                        onValueChange={(value) => onChange({ titleFontSize: value })}
                      >
                        <SelectTrigger className="h-7 text-xs">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="12px">12px</SelectItem>
                          <SelectItem value="14px">14px</SelectItem>
                          <SelectItem value="16px">16px</SelectItem>
                          <SelectItem value="18px">18px</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-1">
                      <Label className="text-[10px]">색상</Label>
                      <Input
                        type="color"
                        value={config.titleColor || "#374151"}
                        onChange={(e) => onChange({ titleColor: e.target.value })}
                        className="h-7"
                      />
                    </div>
                    <div className="space-y-1">
                      <Label className="text-[10px]">굵기</Label>
                      <Select
                        value={config.titleFontWeight || "600"}
                        onValueChange={(value) => onChange({ titleFontWeight: value })}
                      >
                        <SelectTrigger className="h-7 text-xs">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="400">보통</SelectItem>
                          <SelectItem value="500">중간</SelectItem>
                          <SelectItem value="600">굵게</SelectItem>
                          <SelectItem value="700">아주 굵게</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                </div>

                {config.descriptionColumn && (
                  <div className="space-y-2">
                    <span className="text-[10px] text-muted-foreground">설명 스타일</span>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="space-y-1">
                        <Label className="text-[10px]">크기</Label>
                        <Select
                          value={config.descriptionFontSize || "12px"}
                          onValueChange={(value) => onChange({ descriptionFontSize: value })}
                        >
                          <SelectTrigger className="h-7 text-xs">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="10px">10px</SelectItem>
                            <SelectItem value="12px">12px</SelectItem>
                            <SelectItem value="14px">14px</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-1">
                        <Label className="text-[10px]">색상</Label>
                        <Input
                          type="color"
                          value={config.descriptionColor || "#6b7280"}
                          onChange={(e) => onChange({ descriptionColor: e.target.value })}
                          className="h-7"
                        />
                      </div>
                    </div>
                  </div>
                )}
              </>
            )}
          </div>
        </CollapsibleContent>
      </Collapsible>

      {/* ─── 5단계: 카드 스타일 (Collapsible) ─── */}
      <Collapsible open={styleOpen} onOpenChange={setStyleOpen}>
        <CollapsibleTrigger asChild>
          <button
            type="button"
            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
          >
            <div className="flex items-center gap-2">
              <Settings className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-medium">카드 스타일</span>
              <Badge variant="secondary" className="text-[10px] h-5">6개</Badge>
            </div>
            <ChevronDown
              className={cn(
                "h-4 w-4 text-muted-foreground transition-transform duration-200",
                styleOpen && "rotate-180"
              )}
            />
          </button>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-4 space-y-3">
            <div className="grid grid-cols-2 gap-3">
              <div className="flex items-center justify-between py-1">
                <span className="truncate text-xs text-muted-foreground">배경색</span>
                <Input
                  type="color"
                  value={config.backgroundColor || "#ffffff"}
                  onChange={(e) => onChange({ backgroundColor: e.target.value })}
                  className="h-7 w-[60px]"
                />
              </div>
              <div className="flex items-center justify-between py-1">
                <span className="truncate text-xs text-muted-foreground">둥글기</span>
                <Input
                  value={config.borderRadius || "8px"}
                  onChange={(e) => onChange({ borderRadius: e.target.value })}
                  className="h-7 w-[60px] text-xs"
                />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="flex items-center justify-between py-1">
                <span className="truncate text-xs text-muted-foreground">내부 패딩</span>
                <Input
                  value={config.padding || "16px"}
                  onChange={(e) => onChange({ padding: e.target.value })}
                  className="h-7 w-[60px] text-xs"
                />
              </div>
              <div className="flex items-center justify-between py-1">
                <span className="truncate text-xs text-muted-foreground">아이템 높이</span>
                <Input
                  value={config.itemHeight || "auto"}
                  onChange={(e) => onChange({ itemHeight: e.target.value })}
                  className="h-7 w-[60px] text-xs"
                />
              </div>
            </div>

            <div className="flex items-center justify-between py-1">
              <div>
                <p className="text-sm">테두리 표시</p>
                <p className="text-[11px] text-muted-foreground">각 아이템에 테두리를 표시해요</p>
              </div>
              <Switch
                checked={config.showBorder ?? true}
                onCheckedChange={(checked) => onChange({ showBorder: checked })}
              />
            </div>

            <div className="flex items-center justify-between py-1">
              <div>
                <p className="text-sm">그림자 표시</p>
                <p className="text-[11px] text-muted-foreground">각 아이템에 그림자를 적용해요</p>
              </div>
              <Switch
                checked={config.showShadow ?? false}
                onCheckedChange={(checked) => onChange({ showShadow: checked })}
              />
            </div>
          </div>
        </CollapsibleContent>
      </Collapsible>

      {/* ─── 6단계: 상호작용 & 페이징 (Collapsible) ─── */}
      <Collapsible open={interactionOpen} onOpenChange={setInteractionOpen}>
        <CollapsibleTrigger asChild>
          <button
            type="button"
            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
          >
            <div className="flex items-center gap-2">
              <Settings className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-medium">상호작용 & 페이징</span>
              <Badge variant="secondary" className="text-[10px] h-5">7개</Badge>
            </div>
            <ChevronDown
              className={cn(
                "h-4 w-4 text-muted-foreground transition-transform duration-200",
                interactionOpen && "rotate-180"
              )}
            />
          </button>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-4 space-y-3">
            <div className="flex items-center justify-between py-1">
              <div>
                <p className="text-sm">클릭 가능</p>
                <p className="text-[11px] text-muted-foreground">아이템을 클릭해서 선택할 수 있어요</p>
              </div>
              <Switch
                checked={config.clickable ?? false}
                onCheckedChange={(checked) => onChange({ clickable: checked })}
              />
            </div>

            {config.clickable && (
              <div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-3">
                <div className="flex items-center justify-between py-1">
                  <div>
                    <p className="text-sm">선택 상태 표시</p>
                    <p className="text-[11px] text-muted-foreground">선택된 아이템을 시각적으로 구분해요</p>
                  </div>
                  <Switch
                    checked={config.showSelectedState ?? true}
                    onCheckedChange={(checked) => onChange({ showSelectedState: checked })}
                  />
                </div>

                <div className="flex items-center justify-between py-1">
                  <span className="text-xs text-muted-foreground">선택 모드</span>
                  <Select
                    value={config.selectionMode || "single"}
                    onValueChange={(value) => onChange({ selectionMode: value as "single" | "multiple" })}
                  >
                    <SelectTrigger className="h-7 w-[100px] text-xs">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="single">단일</SelectItem>
                      <SelectItem value="multiple">다중</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            )}

            <div className="flex items-center justify-between py-1">
              <div>
                <p className="text-sm">페이징 사용</p>
                <p className="text-[11px] text-muted-foreground">많은 데이터를 페이지로 나눠 표시해요</p>
              </div>
              <Switch
                checked={config.usePaging ?? false}
                onCheckedChange={(checked) => onChange({ usePaging: checked })}
              />
            </div>

            {config.usePaging && (
              <div className="ml-1 border-l-2 border-primary/20 pl-3">
                <div className="flex items-center justify-between py-1">
                  <span className="text-xs text-muted-foreground">페이지당 아이템 수</span>
                  <Select
                    value={String(config.pageSize || 10)}
                    onValueChange={(value) => onChange({ pageSize: Number(value) })}
                  >
                    <SelectTrigger className="h-7 w-[100px] text-xs">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="5">5개</SelectItem>
                      <SelectItem value="10">10개</SelectItem>
                      <SelectItem value="20">20개</SelectItem>
                      <SelectItem value="50">50개</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            )}

            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">빈 상태 메시지</span>
              <Input
                value={config.emptyMessage || "데이터가 없습니다"}
                onChange={(e) => onChange({ emptyMessage: e.target.value })}
                placeholder="데이터가 없습니다"
                className="h-7 w-[160px] text-xs"
              />
            </div>

            {/* 데이터 필터링 */}
            <div className="flex items-center justify-between py-1">
              <div>
                <p className="text-sm">필터 필드</p>
                <p className="text-[11px] text-muted-foreground">formData에서 필터 값을 가져올 키</p>
              </div>
              <Input
                value={config.filterField || ""}
                onChange={(e) => onChange({ filterField: e.target.value || undefined })}
                placeholder="미사용"
                className="h-7 w-[120px] text-xs"
              />
            </div>

            {config.filterField && (
              <div className="flex items-center justify-between py-1">
                <div>
                  <p className="text-sm">필터 컬럼</p>
                  <p className="text-[11px] text-muted-foreground">테이블에서 필터링할 컬럼</p>
                </div>
                <Input
                  value={config.filterColumn || ""}
                  onChange={(e) => onChange({ filterColumn: e.target.value || undefined })}
                  placeholder="컬럼명"
                  className="h-7 w-[120px] text-xs"
                />
              </div>
            )}

            {/* 그룹핑 */}
            <div className="flex items-center justify-between py-1">
              <div>
                <p className="text-sm">그룹핑 사용</p>
                <p className="text-[11px] text-muted-foreground">특정 필드로 아이템을 그룹화해요</p>
              </div>
              <Switch
                checked={config.useGrouping ?? false}
                onCheckedChange={(checked) => onChange({ useGrouping: checked })}
              />
            </div>

            {config.useGrouping && (
              <div className="ml-1 border-l-2 border-primary/20 pl-3">
                <div className="flex items-center justify-between py-1">
                  <span className="text-xs text-muted-foreground">그룹핑 기준 필드</span>
                  <Input
                    value={config.groupByField || ""}
                    onChange={(e) => onChange({ groupByField: e.target.value || undefined })}
                    placeholder="필드명"
                    className="h-7 w-[120px] text-xs"
                  />
                </div>
              </div>
            )}
          </div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
};

V2RepeatContainerConfigPanel.displayName = "V2RepeatContainerConfigPanel";

// ============================================================
// 슬롯 자식 컴포넌트 관리 섹션 (기존 기능 100% 유지)
// ============================================================

interface SlotChildrenSectionProps {
  config: RepeatContainerConfig;
  onChange: (config: Partial<RepeatContainerConfig>) => void;
  availableColumns: Array<{ columnName: string; displayName?: string }>;
  loadingColumns: boolean;
  screenTableName?: string;
}

function SlotChildrenSection({
  config,
  onChange,
  availableColumns,
  loadingColumns,
  screenTableName,
}: SlotChildrenSectionProps) {
  const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);
  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
  const [slotFieldsOpen, setSlotFieldsOpen] = useState(true);

  const children = config.children || [];

  const toggleExpanded = (id: string) => {
    setExpandedIds((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(id)) {
        newSet.delete(id);
      } else {
        newSet.add(id);
      }
      return newSet;
    });
  };

  const addComponent = (columnName: string, displayName: string) => {
    const newChild: SlotComponentConfig = {
      id: `slot_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      componentType: "text-display",
      label: displayName,
      fieldName: columnName,
      position: { x: 0, y: children.length * 40 },
      size: { width: 200, height: 32 },
      componentConfig: {},
      style: {},
    };
    onChange({ children: [...children, newChild] });
    setColumnComboboxOpen(false);
  };

  const removeComponent = (id: string) => {
    onChange({ children: children.filter((c) => c.id !== id) });
    setExpandedIds((prev) => {
      const newSet = new Set(prev);
      newSet.delete(id);
      return newSet;
    });
  };

  const updateComponentLabel = (id: string, label: string) => {
    onChange({ children: children.map((c) => (c.id === id ? { ...c, label } : c)) });
  };

  const updateComponentStyle = (id: string, key: string, value: any) => {
    onChange({
      children: children.map((c) =>
        c.id === id ? { ...c, style: { ...c.style, [key]: value } } : c
      ),
    });
  };

  const updateComponentSize = (id: string, width: number | undefined, height: number | undefined) => {
    onChange({
      children: children.map((c) =>
        c.id === id
          ? { ...c, size: { width: width ?? c.size?.width ?? 200, height: height ?? c.size?.height ?? 32 } }
          : c
      ),
    });
  };

  return (
    <Collapsible open={slotFieldsOpen} onOpenChange={setSlotFieldsOpen}>
      <CollapsibleTrigger asChild>
        <button
          type="button"
          className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
        >
          <div className="flex items-center gap-2">
            <Type className="h-4 w-4 text-muted-foreground" />
            <span className="text-sm font-medium">반복 표시 필드</span>
            <Badge variant="secondary" className="text-[10px] h-5">
              {children.length}개 필드
            </Badge>
          </div>
          <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", slotFieldsOpen && "rotate-180")} />
        </button>
      </CollapsibleTrigger>
      <CollapsibleContent>
        <div className="rounded-b-lg border border-t-0 p-3 space-y-3">
          <p className="text-[11px] text-muted-foreground">
            데이터의 어떤 컬럼을 각 아이템에 표시할지 선택해요
          </p>

          {children.length > 0 ? (
            <div className="max-h-[250px] space-y-2 overflow-y-auto">
              {children.map((child, index) => {
            const isExpanded = expandedIds.has(child.id);
            return (
              <div
                key={child.id}
                className="rounded-lg border overflow-hidden"
              >
                <div className="flex items-center gap-2 bg-muted/30 p-2">
                  <div className="flex h-5 w-5 items-center justify-center rounded bg-primary/10 text-xs font-medium text-primary">
                    {index + 1}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="truncate text-xs font-medium">
                      {child.label || child.fieldName}
                    </div>
                    <div className="truncate text-[10px] text-muted-foreground">
                      필드: {child.fieldName}
                    </div>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-5 w-5 p-0 text-primary hover:text-primary"
                    onClick={() => toggleExpanded(child.id)}
                    title="상세 설정"
                  >
                    {isExpanded ? (
                      <ChevronUp className="h-3 w-3" />
                    ) : (
                      <Settings2 className="h-3 w-3" />
                    )}
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-5 w-5 p-0 text-destructive/80 hover:text-destructive"
                    onClick={() => removeComponent(child.id)}
                  >
                    <X className="h-3 w-3" />
                  </Button>
                </div>

                {isExpanded && (
                  <div className="border-t bg-background p-3 space-y-3">
                    {hasComponentConfigPanel(child.componentType) ? (
                      <SlotComponentDetailPanel
                        child={child}
                        screenTableName={screenTableName}
                        onConfigChange={(newConfig) => {
                          onChange({
                            children: children.map((c) =>
                              c.id === child.id
                                ? { ...c, componentConfig: { ...c.componentConfig, ...newConfig } }
                                : c
                            ),
                          });
                        }}
                        onLabelChange={(label) => updateComponentLabel(child.id, label)}
                      />
                    ) : (
                      <>
                        {child.fieldName && (
                          <div className="rounded-md border border-primary/20 bg-primary/5 p-2">
                            <div className="flex items-center gap-1.5">
                              <Database className="h-3 w-3 text-primary" />
                              <span className="text-[10px] text-primary font-medium">
                                바인딩: {child.fieldName}
                              </span>
                            </div>
                            <p className="text-[9px] text-primary/80 mt-0.5">
                              각 아이템의 "{child.fieldName}" 값이 자동으로 표시돼요
                            </p>
                          </div>
                        )}

                        <div className="flex items-center justify-between py-1">
                          <span className="text-xs text-muted-foreground">표시 라벨</span>
                          <Input
                            value={child.label || ""}
                            onChange={(e) => updateComponentLabel(child.id, e.target.value)}
                            placeholder="표시할 라벨"
                            className="h-7 w-[140px] text-xs"
                          />
                        </div>

                        <div className="grid grid-cols-2 gap-2">
                          <div className="space-y-1">
                            <Label className="text-[10px] text-muted-foreground">너비 (px)</Label>
                            <Input
                              type="number"
                              value={child.size?.width || 200}
                              onChange={(e) =>
                                updateComponentSize(child.id, parseInt(e.target.value) || 200, undefined)
                              }
                              className="h-7 text-xs"
                            />
                          </div>
                          <div className="space-y-1">
                            <Label className="text-[10px] text-muted-foreground">높이 (px)</Label>
                            <Input
                              type="number"
                              value={child.size?.height || 32}
                              onChange={(e) =>
                                updateComponentSize(child.id, undefined, parseInt(e.target.value) || 32)
                              }
                              className="h-7 text-xs"
                            />
                          </div>
                        </div>

                        <div className="space-y-2">
                          <span className="text-[10px] text-muted-foreground">스타일</span>
                          <div className="grid grid-cols-2 gap-2">
                            <div className="space-y-1">
                              <Label className="text-[10px]">글자 크기</Label>
                              <Select
                                value={child.style?.fontSize || "14px"}
                                onValueChange={(value) => updateComponentStyle(child.id, "fontSize", value)}
                              >
                                <SelectTrigger className="h-7 text-xs">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="10px">10px</SelectItem>
                                  <SelectItem value="12px">12px</SelectItem>
                                  <SelectItem value="14px">14px</SelectItem>
                                  <SelectItem value="16px">16px</SelectItem>
                                  <SelectItem value="18px">18px</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                            <div className="space-y-1">
                              <Label className="text-[10px]">글자 색상</Label>
                              <Input
                                type="color"
                                value={child.style?.color || "#000000"}
                                onChange={(e) => updateComponentStyle(child.id, "color", e.target.value)}
                                className="h-7"
                              />
                            </div>
                          </div>
                        </div>
                      </>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
          ) : (
            <div className="rounded-lg border border-dashed border-border bg-muted/20 p-4 text-center">
              <Type className="mx-auto h-6 w-6 text-muted-foreground/50" />
              <div className="mt-2 text-xs text-muted-foreground">표시할 필드가 없어요</div>
              <div className="text-[10px] text-muted-foreground">
                아래에서 컬럼을 선택하세요
              </div>
            </div>
          )}

          {/* 컬럼 추가 Combobox */}
          <Popover open={columnComboboxOpen} onOpenChange={setColumnComboboxOpen}>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                role="combobox"
                aria-expanded={columnComboboxOpen}
                className="h-8 w-full justify-between text-xs"
                disabled={loadingColumns || availableColumns.length === 0}
              >
                {loadingColumns
                  ? "로딩 중..."
                  : availableColumns.length === 0
                    ? "테이블을 먼저 선택하세요"
                    : "컬럼 추가..."}
                <Plus className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-full p-0" align="start">
              <Command>
                <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
                <CommandList>
                  <CommandEmpty className="py-2 text-xs">컬럼을 찾을 수 없습니다</CommandEmpty>
                  <CommandGroup heading="사용 가능한 컬럼">
                    {availableColumns.map((col) => {
                      const isAdded = children.some((c) => c.fieldName === col.columnName);
                      return (
                        <CommandItem
                          key={col.columnName}
                          value={`${col.columnName} ${col.displayName || ""}`}
                          onSelect={() => {
                            if (!isAdded) {
                              addComponent(col.columnName, col.displayName || col.columnName);
                            }
                          }}
                          disabled={isAdded}
                          className={cn(
                            "text-xs cursor-pointer",
                            isAdded && "opacity-50 cursor-not-allowed"
                          )}
                        >
                          <Plus
                            className={cn(
                              "mr-2 h-3 w-3",
                              isAdded ? "text-primary" : "text-muted-foreground"
                            )}
                          />
                          <div className="flex-1">
                            <div className="truncate font-medium">{col.displayName || col.columnName}</div>
                            <div className="truncate text-[10px] text-muted-foreground">
                              {col.columnName}
                            </div>
                          </div>
                          {isAdded && (
                            <Check className="h-3 w-3 text-primary" />
                          )}
                        </CommandItem>
                      );
                    })}
                  </CommandGroup>
                </CommandList>
              </Command>
            </PopoverContent>
          </Popover>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

// 슬롯 컴포넌트 상세 설정 패널
interface SlotComponentDetailPanelProps {
  child: SlotComponentConfig;
  screenTableName?: string;
  onConfigChange: (newConfig: Record<string, any>) => void;
  onLabelChange: (label: string) => void;
}

function SlotComponentDetailPanel({
  child,
  screenTableName,
  onConfigChange,
  onLabelChange,
}: SlotComponentDetailPanelProps) {
  return (
    <div className="space-y-3">
      {child.fieldName && (
        <div className="rounded-md border border-primary/20 bg-primary/5 p-2">
          <div className="flex items-center gap-1.5">
            <Database className="h-3 w-3 text-primary" />
            <span className="text-[10px] text-primary font-medium">
              바인딩: {child.fieldName}
            </span>
          </div>
          <p className="text-[9px] text-primary/80 mt-0.5">
            각 아이템의 "{child.fieldName}" 값이 자동으로 표시돼요
          </p>
        </div>
      )}

      <div className="flex items-center justify-between py-1">
        <span className="text-xs text-muted-foreground">표시 라벨</span>
        <Input
          value={child.label || ""}
          onChange={(e) => onLabelChange(e.target.value)}
          placeholder="표시할 라벨"
          className="h-7 w-[140px] text-xs"
        />
      </div>

      <div className="border-t pt-2">
        <div className="text-[10px] font-medium text-muted-foreground mb-2">
          {child.componentType} 상세 설정
        </div>
        <DynamicComponentConfigPanel
          componentId={child.componentType}
          config={child.componentConfig || {}}
          onChange={onConfigChange}
          screenTableName={screenTableName}
        />
      </div>
    </div>
  );
}

export default V2RepeatContainerConfigPanel;