ERP-node/frontend/lib/registry/components/repeat-container/RepeatContainerConfigPanel.tsx

"use client";

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 { Checkbox } from "@/components/ui/checkbox";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
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, GripVertical, Trash2, Type, Settings2, ChevronDown, ChevronUp } from "lucide-react";
import { cn } from "@/lib/utils";
import { RepeatContainerConfig, SlotComponentConfig } from "./types";
import { tableTypeApi } from "@/lib/api/screen";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { DynamicComponentConfigPanel, hasComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";

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

/**
 * 리피터 컨테이너 설정 패널
 */
export function RepeatContainerConfigPanel({
  config,
  onChange,
  screenTableName,
}: RepeatContainerConfigPanelProps) {
  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 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);
        if (response.success && response.data && Array.isArray(response.data)) {
          setAvailableColumns(
            response.data.map((col: any) => ({
              columnName: col.columnName,
              displayName: col.displayName || col.columnLabel || col.columnName,
            }))
          );
        }
      } catch (error) {
        console.error("컬럼 목록 가져오기 실패:", error);
        setAvailableColumns([]);
      } finally {
        setLoadingColumns(false);
      }
    };
    fetchColumns();
  }, [targetTableName]);

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">리피터 컨테이너 설정</div>

      {/* 데이터 소스 테이블 설정 */}
      <div className="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">데이터 소스 테이블</h3>
          <p className="text-muted-foreground text-[10px]">반복 렌더링할 데이터의 테이블을 선택합니다</p>
        </div>
        <hr className="border-border" />

        {/* 현재 선택된 테이블 표시 (카드 형태) */}
        <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
          <Database className="h-4 w-4 text-blue-500" />
          <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-8 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>

                {/* 그룹 1: 화면 기본 테이블 */}
                {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-blue-500" />
                      {screenTableName}
                    </CommandItem>
                  </CommandGroup>
                )}

                {/* 그룹 2: 전체 테이블 */}
                <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-slate-400" />
                        {table.displayName || table.tableName}
                      </CommandItem>
                    ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
      </div>

      {/* 데이터 소스 컴포넌트 연결 */}
      <div className="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">데이터 소스 연결</h3>
          <p className="text-muted-foreground text-[10px]">
            테이블 리스트에서 선택한 데이터를 받아올 수 있습니다
          </p>
        </div>
        <hr className="border-border" />
        
        <div className="space-y-2">
          <Label className="text-xs">데이터 수신 방식</Label>
          <Select
            value={config.dataSourceType || "manual"}
            onValueChange={(value) => onChange({ dataSourceType: value as any })}
          >
            <SelectTrigger className="h-8 text-xs">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="manual">수동 (API에서 직접 조회)</SelectItem>
              <SelectItem value="table-list">테이블 리스트 선택 연동</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {config.dataSourceType === "table-list" && (
          <div className="space-y-2">
            <Label className="text-xs">연동할 테이블 리스트 컴포넌트 ID (선택)</Label>
            <Input
              value={config.dataSourceComponentId || ""}
              onChange={(e) => onChange({ dataSourceComponentId: e.target.value })}
              placeholder="비우면 테이블명으로 자동 매칭"
              className="h-8 text-xs"
            />
            <p className="text-[10px] text-muted-foreground">
              비워두면 위에서 설정한 테이블명과 같은 테이블 리스트에서 데이터를 받습니다
            </p>
          </div>
        )}
      </div>

      {/* 슬롯 컴포넌트 설정 */}
      <SlotChildrenSection
        config={config}
        onChange={onChange}
        availableColumns={availableColumns}
        loadingColumns={loadingColumns}
        screenTableName={screenTableName}
      />

      {/* 레이아웃 설정 */}
      <div className="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">레이아웃</h3>
        </div>
        <hr className="border-border" />

        {/* 레이아웃 타입 선택 */}
        <div className="space-y-1">
          <Label className="text-xs">배치 방식</Label>
          <div className="grid grid-cols-3 gap-2">
            <Button
              variant={config.layout === "vertical" ? "default" : "outline"}
              size="sm"
              onClick={() => onChange({ layout: "vertical" })}
              className="h-9 text-xs flex flex-col gap-1"
            >
              <Rows3 className="h-4 w-4" />
              <span>세로</span>
            </Button>
            <Button
              variant={config.layout === "horizontal" ? "default" : "outline"}
              size="sm"
              onClick={() => onChange({ layout: "horizontal" })}
              className="h-9 text-xs flex flex-col gap-1"
            >
              <LayoutList className="h-4 w-4 rotate-90" />
              <span>가로</span>
            </Button>
            <Button
              variant={config.layout === "grid" ? "default" : "outline"}
              size="sm"
              onClick={() => onChange({ layout: "grid" })}
              className="h-9 text-xs flex flex-col gap-1"
            >
              <LayoutGrid className="h-4 w-4" />
              <span>그리드</span>
            </Button>
          </div>
        </div>

        {/* 그리드 컬럼 수 (grid 레이아웃일 때만) */}
        {config.layout === "grid" && (
          <div className="space-y-1">
            <Label className="text-xs">그리드 컬럼 수</Label>
            <Select
              value={String(config.gridColumns || 2)}
              onValueChange={(value) => onChange({ gridColumns: Number(value) })}
            >
              <SelectTrigger className="h-8 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="space-y-1">
          <Label className="text-xs">아이템 간격</Label>
          <Input
            value={config.gap || "16px"}
            onChange={(e) => onChange({ gap: e.target.value })}
            placeholder="16px"
            className="h-8 text-xs"
          />
        </div>
      </div>

      {/* 아이템 카드 설정 */}
      <div className="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">아이템 카드 스타일</h3>
        </div>
        <hr className="border-border" />

        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-1">
            <Label className="text-xs">배경색</Label>
            <Input
              type="color"
              value={config.backgroundColor || "#ffffff"}
              onChange={(e) => onChange({ backgroundColor: e.target.value })}
              className="h-8"
            />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">모서리 둥글기</Label>
            <Input
              value={config.borderRadius || "8px"}
              onChange={(e) => onChange({ borderRadius: e.target.value })}
              placeholder="8px"
              className="h-8 text-xs"
            />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">내부 패딩</Label>
            <Input
              value={config.padding || "16px"}
              onChange={(e) => onChange({ padding: e.target.value })}
              placeholder="16px"
              className="h-8 text-xs"
            />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">아이템 높이</Label>
            <Input
              value={config.itemHeight || "auto"}
              onChange={(e) => onChange({ itemHeight: e.target.value })}
              placeholder="auto"
              className="h-8 text-xs"
            />
          </div>
        </div>

        <div className="flex flex-wrap items-center gap-4">
          <div className="flex items-center gap-2">
            <Checkbox
              id="showBorder"
              checked={config.showBorder ?? true}
              onCheckedChange={(checked) => onChange({ showBorder: checked as boolean })}
            />
            <Label htmlFor="showBorder" className="text-xs">
              테두리 표시
            </Label>
          </div>

          <div className="flex items-center gap-2">
            <Checkbox
              id="showShadow"
              checked={config.showShadow ?? false}
              onCheckedChange={(checked) => onChange({ showShadow: checked as boolean })}
            />
            <Label htmlFor="showShadow" className="text-xs">
              그림자 표시
            </Label>
          </div>
        </div>
      </div>

      {/* 아이템 제목 설정 */}
      <div className="space-y-3">
        <div className="flex items-center gap-2">
          <Checkbox
            id="showItemTitle"
            checked={config.showItemTitle ?? false}
            onCheckedChange={(checked) => onChange({ showItemTitle: checked as boolean })}
          />
          <Label htmlFor="showItemTitle" className="text-sm font-semibold">
            아이템 제목 표시
          </Label>
        </div>
        <hr className="border-border" />

        {config.showItemTitle && (
          <div className="space-y-2">
            <div className="space-y-1">
              <Label className="text-xs">제목 템플릿</Label>
              <Input
                value={config.itemTitleTemplate || ""}
                onChange={(e) => onChange({ itemTitleTemplate: e.target.value })}
                placeholder="{order_no} - {item_code}"
                className="h-8 text-xs"
              />
              <p className="text-[10px] text-muted-foreground">
                {"{필드명}"} 형식으로 데이터 바인딩 가능
              </p>
            </div>

            <div className="grid grid-cols-3 gap-2">
              <div className="space-y-1">
                <Label className="text-[10px]">제목 크기</Label>
                <Input
                  value={config.titleFontSize || "14px"}
                  onChange={(e) => onChange({ titleFontSize: e.target.value })}
                  placeholder="14px"
                  className="h-7 text-xs"
                />
              </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>
        )}
      </div>

      {/* 페이징 설정 */}
      <div className="space-y-3">
        <div className="flex items-center gap-2">
          <Checkbox
            id="usePaging"
            checked={config.usePaging ?? false}
            onCheckedChange={(checked) => onChange({ usePaging: checked as boolean })}
          />
          <Label htmlFor="usePaging" className="text-sm font-semibold">
            페이징 사용
          </Label>
        </div>
        <hr className="border-border" />

        {config.usePaging && (
          <div className="space-y-1">
            <Label className="text-xs">페이지당 아이템 수</Label>
            <Select
              value={String(config.pageSize || 10)}
              onValueChange={(value) => onChange({ pageSize: Number(value) })}
            >
              <SelectTrigger className="h-8 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="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">상호작용</h3>
        </div>
        <hr className="border-border" />

        <div className="flex flex-wrap items-center gap-4">
          <div className="flex items-center gap-2">
            <Checkbox
              id="clickable"
              checked={config.clickable ?? false}
              onCheckedChange={(checked) => onChange({ clickable: checked as boolean })}
            />
            <Label htmlFor="clickable" className="text-xs">
              클릭 가능
            </Label>
          </div>

          {config.clickable && (
            <>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="showSelectedState"
                  checked={config.showSelectedState ?? true}
                  onCheckedChange={(checked) => onChange({ showSelectedState: checked as boolean })}
                />
                <Label htmlFor="showSelectedState" className="text-xs">
                  선택 상태 표시
                </Label>
              </div>

              <div className="space-y-1">
                <Label className="text-[10px]">선택 모드</Label>
                <Select
                  value={config.selectionMode || "single"}
                  onValueChange={(value) =>
                    onChange({ selectionMode: value as "single" | "multiple" })
                  }
                >
                  <SelectTrigger className="h-7 text-xs w-24">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="single">단일</SelectItem>
                    <SelectItem value="multiple">다중</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </>
          )}
        </div>
      </div>

      {/* 빈 상태 설정 */}
      <div className="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">빈 상태 메시지</h3>
        </div>
        <hr className="border-border" />

        <div className="space-y-1">
          <Label className="text-xs">메시지</Label>
          <Input
            value={config.emptyMessage || "데이터가 없습니다"}
            onChange={(e) => onChange({ emptyMessage: e.target.value })}
            placeholder="데이터가 없습니다"
            className="h-8 text-xs"
          />
        </div>
      </div>
    </div>
  );
}

// ============================================================
// 슬롯 자식 컴포넌트 관리 섹션
// ============================================================

// 슬롯 컴포넌트의 전체 설정 패널을 표시하는 컴포넌트
interface SlotComponentDetailPanelProps {
  child: SlotComponentConfig;
  screenTableName?: string;
  availableColumns: Array<{ columnName: string; displayName?: string }>;
  onConfigChange: (newConfig: Record<string, any>) => void;
  onFieldNameChange: (fieldName: string) => void;
  onLabelChange: (label: string) => void;
}

function SlotComponentDetailPanel({
  child,
  screenTableName,
  availableColumns,
  onConfigChange,
  onFieldNameChange,
  onLabelChange,
}: SlotComponentDetailPanelProps) {
  return (
    <div className="space-y-3">
      {/* 데이터 필드 바인딩 - 모든 컴포넌트에서 사용 가능 */}
      <div className="space-y-1 p-2 bg-blue-50 rounded-md border border-blue-200">
        <Label className="text-[10px] text-blue-700 font-medium flex items-center gap-1">
          <Database className="h-3 w-3" />
          데이터 필드 바인딩
        </Label>
        <Select
          value={child.fieldName || ""}
          onValueChange={onFieldNameChange}
        >
          <SelectTrigger className="h-7 text-xs bg-white">
            <SelectValue placeholder="표시할 필드 선택..." />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="">선택 안함</SelectItem>
            {availableColumns.map((col) => (
              <SelectItem key={col.columnName} value={col.columnName}>
                {col.displayName || col.columnName}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        {child.fieldName && (
          <p className="text-[9px] text-blue-600">
            각 아이템의 "{child.fieldName}" 값이 이 컴포넌트에 표시됩니다
          </p>
        )}
      </div>

      {/* 라벨 설정 */}
      <div className="space-y-1">
        <Label className="text-[10px] text-slate-500">표시 라벨</Label>
        <Input
          value={child.label || ""}
          onChange={(e) => onLabelChange(e.target.value)}
          placeholder="표시할 라벨"
          className="h-7 text-xs"
        />
      </div>

      {/* 컴포넌트 전용 설정 */}
      <div className="border-t pt-2">
        <div className="text-[10px] font-medium text-slate-600 mb-2">
          {child.componentType} 상세 설정
        </div>
        <DynamicComponentConfigPanel
          componentId={child.componentType}
          config={child.componentConfig || {}}
          onChange={onConfigChange}
          screenTableName={screenTableName}
        />
      </div>
    </div>
  );
}

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 [selectedColumn, setSelectedColumn] = useState<string>("");
  const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);
  // 각 컴포넌트별 상세 설정 열림 상태
  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());

  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],
    });
    setSelectedColumn("");
    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 updateComponentType = (id: string, componentType: string) => {
    onChange({
      children: children.map((c) => (c.id === id ? { ...c, componentType } : c)),
    });
  };

  // 컴포넌트 필드 바인딩 변경
  const updateComponentFieldName = (id: string, fieldName: string) => {
    onChange({
      children: children.map((c) => (c.id === id ? { ...c, fieldName } : c)),
    });
  };

  // 컴포넌트 설정 변경 (componentConfig)
  const updateComponentConfig = (id: string, key: string, value: any) => {
    onChange({
      children: children.map((c) =>
        c.id === id
          ? { ...c, componentConfig: { ...c.componentConfig, [key]: value } }
          : 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 (
    <div className="space-y-3">
      <div>
        <h3 className="text-sm font-semibold">반복 표시 필드</h3>
        <p className="text-muted-foreground text-[10px]">
          데이터 테이블의 컬럼을 선택하여 각 행에 표시할 필드를 추가합니다
        </p>
      </div>
      <hr className="border-border" />

      {/* 추가된 필드 목록 */}
      {children.length > 0 ? (
        <div className="space-y-2">
          {children.map((child, index) => {
            const isExpanded = expandedIds.has(child.id);
            return (
              <div
                key={child.id}
                className="rounded-md border border-green-200 bg-green-50 overflow-hidden"
              >
                {/* 기본 정보 헤더 */}
                <div className="flex items-center gap-2 p-2">
                  <div className="flex h-5 w-5 items-center justify-center rounded bg-green-200 text-xs font-medium text-green-700">
                    {index + 1}
                  </div>
                  <div className="flex-1">
                    <div className="text-xs font-medium text-green-700">
                      {child.label || child.fieldName}
                    </div>
                    <div className="text-[10px] text-green-500">
                      필드: {child.fieldName}
                    </div>
                  </div>
                  <Select
                    value={child.componentType}
                    onValueChange={(value) => updateComponentType(child.id, value)}
                  >
                    <SelectTrigger className="h-6 w-20 text-[10px]">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="text-display">텍스트</SelectItem>
                      <SelectItem value="text-input">입력</SelectItem>
                      <SelectItem value="number-display">숫자</SelectItem>
                      <SelectItem value="date-display">날짜</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-5 w-5 p-0 text-blue-500 hover:text-blue-700"
                    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-red-400 hover:text-red-600"
                    onClick={() => removeComponent(child.id)}
                  >
                    <X className="h-3 w-3" />
                  </Button>
                </div>

                {/* 상세 설정 패널 (펼침) */}
                {isExpanded && (
                  <div className="border-t border-green-200 bg-white p-3 space-y-3">
                    {/* 전용 ConfigPanel이 있는 복잡한 컴포넌트인 경우 */}
                    {hasComponentConfigPanel(child.componentType) ? (
                      <SlotComponentDetailPanel
                        child={child}
                        screenTableName={screenTableName}
                        availableColumns={availableColumns}
                        onConfigChange={(newConfig) => {
                          onChange({
                            children: children.map((c) =>
                              c.id === child.id
                                ? { ...c, componentConfig: { ...c.componentConfig, ...newConfig } }
                                : c
                            ),
                          });
                        }}
                        onFieldNameChange={(fieldName) => updateComponentFieldName(child.id, fieldName)}
                        onLabelChange={(label) => updateComponentLabel(child.id, label)}
                      />
                    ) : (
                      <>
                        {/* 데이터 필드 바인딩 - 가장 중요! */}
                        <div className="space-y-1">
                          <Label className="text-[10px] text-slate-500 font-medium flex items-center gap-1">
                            <Database className="h-3 w-3 text-blue-500" />
                            데이터 필드
                          </Label>
                          <Select
                            value={child.fieldName || ""}
                            onValueChange={(value) => updateComponentFieldName(child.id, value)}
                          >
                            <SelectTrigger className="h-7 text-xs">
                              <SelectValue placeholder="표시할 필드 선택..." />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="">선택 안함</SelectItem>
                              {availableColumns.map((col) => (
                                <SelectItem key={col.columnName} value={col.columnName}>
                                  {col.displayName || col.columnName}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                          {child.fieldName && (
                            <p className="text-[9px] text-green-600">
                              각 아이템의 "{child.fieldName}" 값이 표시됩니다
                            </p>
                          )}
                        </div>

                        {/* 라벨 설정 */}
                        <div className="space-y-1">
                          <Label className="text-[10px] text-slate-500">표시 라벨</Label>
                          <Input
                            value={child.label || ""}
                            onChange={(e) => updateComponentLabel(child.id, e.target.value)}
                            placeholder="표시할 라벨"
                            className="h-7 text-xs"
                          />
                        </div>

                        {/* 크기 설정 */}
                        <div className="grid grid-cols-2 gap-2">
                          <div className="space-y-1">
                            <Label className="text-[10px] text-slate-500">너비 (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-slate-500">높이 (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">
                          <Label className="text-[10px] text-slate-500 font-medium">스타일</Label>
                          <div className="grid grid-cols-2 gap-2">
                            <div className="space-y-1">
                              <Label className="text-[10px] text-slate-400">글자 크기</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] text-slate-400">글자 굵기</Label>
                              <Select
                                value={child.style?.fontWeight || "normal"}
                                onValueChange={(value) => updateComponentStyle(child.id, "fontWeight", value)}
                              >
                                <SelectTrigger className="h-7 text-xs">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="normal">보통</SelectItem>
                                  <SelectItem value="500">중간</SelectItem>
                                  <SelectItem value="600">약간 굵게</SelectItem>
                                  <SelectItem value="bold">굵게</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                          </div>
                          <div className="grid grid-cols-2 gap-2">
                            <div className="space-y-1">
                              <Label className="text-[10px] text-slate-400">글자 정렬</Label>
                              <Select
                                value={child.style?.textAlign || "left"}
                                onValueChange={(value) => updateComponentStyle(child.id, "textAlign", value)}
                              >
                                <SelectTrigger className="h-7 text-xs">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="left">왼쪽</SelectItem>
                                  <SelectItem value="center">가운데</SelectItem>
                                  <SelectItem value="right">오른쪽</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                            <div className="space-y-1">
                              <Label className="text-[10px] text-slate-400">글자 색상</Label>
                              <div className="flex gap-1">
                                <Input
                                  type="color"
                                  value={child.style?.color || "#000000"}
                                  onChange={(e) => updateComponentStyle(child.id, "color", e.target.value)}
                                  className="h-7 w-10 p-0.5 cursor-pointer"
                                />
                                <Input
                                  value={child.style?.color || "#000000"}
                                  onChange={(e) => updateComponentStyle(child.id, "color", e.target.value)}
                                  className="h-7 flex-1 text-xs"
                                  placeholder="#000000"
                                />
                              </div>
                            </div>
                          </div>
                        </div>

                        {/* 컴포넌트 타입별 추가 설정 */}
                        {(child.componentType === "number-display" || child.componentType === "number-input") && (
                          <div className="space-y-2">
                            <Label className="text-[10px] text-slate-500 font-medium">숫자 형식</Label>
                            <div className="grid grid-cols-2 gap-2">
                              <div className="space-y-1">
                                <Label className="text-[10px] text-slate-400">소수점 자릿수</Label>
                                <Input
                                  type="number"
                                  min={0}
                                  max={10}
                                  value={child.componentConfig?.decimalPlaces ?? 0}
                                  onChange={(e) =>
                                    updateComponentConfig(child.id, "decimalPlaces", parseInt(e.target.value) || 0)
                                  }
                                  className="h-7 text-xs"
                                />
                              </div>
                              <div className="flex items-center gap-2 pt-4">
                                <Checkbox
                                  id={`thousandSep_${child.id}`}
                                  checked={child.componentConfig?.thousandSeparator ?? true}
                                  onCheckedChange={(checked) =>
                                    updateComponentConfig(child.id, "thousandSeparator", checked)
                                  }
                                />
                                <Label htmlFor={`thousandSep_${child.id}`} className="text-[10px]">
                                  천 단위 구분
                                </Label>
                              </div>
                            </div>
                          </div>
                        )}

                        {(child.componentType === "date-display" || child.componentType === "date-input") && (
                          <div className="space-y-2">
                            <Label className="text-[10px] text-slate-500 font-medium">날짜 형식</Label>
                            <Select
                              value={child.componentConfig?.dateFormat || "YYYY-MM-DD"}
                              onValueChange={(value) => updateComponentConfig(child.id, "dateFormat", value)}
                            >
                              <SelectTrigger className="h-7 text-xs">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="YYYY-MM-DD">2024-01-15</SelectItem>
                                <SelectItem value="YYYY.MM.DD">2024.01.15</SelectItem>
                                <SelectItem value="YYYY/MM/DD">2024/01/15</SelectItem>
                                <SelectItem value="MM/DD/YYYY">01/15/2024</SelectItem>
                                <SelectItem value="DD-MM-YYYY">15-01-2024</SelectItem>
                                <SelectItem value="YYYY-MM-DD HH:mm">2024-01-15 14:30</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        )}
                      </>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      ) : (
        <div className="rounded-md border border-dashed border-slate-300 bg-slate-50 p-4 text-center">
          <Type className="mx-auto h-6 w-6 text-slate-300" />
          <div className="mt-2 text-xs text-slate-500">표시할 필드가 없습니다</div>
          <div className="text-[10px] text-muted-foreground">
            아래 컬럼 목록에서 선택하세요
          </div>
        </div>
      )}

      {/* 컬럼 선택 Combobox */}
      <div className="space-y-2">
        <Label className="text-xs">컬럼 추가</Label>
        <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
                  ? "테이블을 먼저 선택하세요"
                  : "컬럼 선택..."}
              <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>
                <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-green-500" : "text-blue-500"
                          )}
                        />
                        <div className="flex-1">
                          <div className="font-medium">{col.displayName || col.columnName}</div>
                          <div className="text-[10px] text-muted-foreground">
                            {col.columnName}
                          </div>
                        </div>
                        {isAdded && (
                          <Check className="h-3 w-3 text-green-500" />
                        )}
                      </CommandItem>
                    );
                  })}
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
      </div>

      <div className="rounded-md border border-amber-200 bg-amber-50 p-2">
        <p className="text-[10px] text-amber-700">
          <strong>안내:</strong> 여기는 필드 단위 컴포넌트만 추가하세요.<br />
          집계 위젯, 분할 패널 등은 리피터 외부에 별도로 배치해야 합니다.
        </p>
      </div>
    </div>
  );
}