"use client";

/**
 * InvTableConfigPanel — 통합 "테이블" (id: table) cp 톤 설정 패널
 *
 * 흐름:
 *   ① 테이블 연결 — 테이블 선택 + DB 컬럼 자동 로드
 *   ② 표시 모드 — CPVisualGrid 5칸 (기본/분할/그룹/피벗/카드 시각 미리보기)
 *   ③ 행 선택 + 높이 — CPSegment
 *   ④ 모드별 설정 — split 비율 / grouped 컬럼 (조건부)
 *   ⑤ 컬럼 편집 — dense list (한 줄 = 라벨 + key + 너비 + align + 정렬)
 *   ▾ 동작 옵션 — 헤더/푸터/체크박스/줄무늬/호버/툴바 (FeatureChipGrid)
 *
 * Reference: notes/gbpark/2026-04-28-cp-panel-standard.md
 */

import React, { useCallback, useEffect, useMemo, useState } from "react";
import {
  Table2,
  Columns2,
  List,
  Grid3x3,
  LayoutGrid,
  Plus,
  AlignLeft,
  AlignCenter,
  AlignRight,
} from "lucide-react";
import {
  CPSection,
  CPRow,
  CPGroup,
  CPText,
  CPSelect,
  CPSegment,
  CPNumber,
  CPSwitch,
  CPVisualGrid,
  FeatureChipGrid,
  Hint,
} from "@/components/v2/config-panels/_shared/cp";
import { useDbTables } from "../common/useDbTables";
import { TableConnectSection, AutoLoadButton } from "../common/TableConnectSection";
import {
  RowNumberBadge,
  RowExpandChevron,
  RowDeleteBtn,
} from "../common/row-helpers";
import type {
  TableConfig,
  TableColumn,
  TableActionItemConfig,
  TableActionType,
} from "./types";

export interface InvTableConfigPanelProps {
  config?: TableConfig;
  onChange?: (config: TableConfig) => void;
  selectedComponent?: { id: string; config?: TableConfig; [k: string]: any };
  tables?: any[];
  tableColumns?: any[];
  screenTableName?: string;
  onTableChange?: (tableName: string) => void;
}

export const InvTableConfigPanel: React.FC<InvTableConfigPanelProps> = ({
  config,
  onChange,
  selectedComponent,
  tables,
  tableColumns,
  screenTableName,
  onTableChange,
}) => {
  const current: TableConfig =
    (config as TableConfig) || (selectedComponent?.config as TableConfig) || {};

  const patch = useCallback(
    (p: Partial<TableConfig>) => onChange?.({ ...current, ...p }),
    [current, onChange],
  );

  const columns: TableColumn[] = current.columns ?? [];
  // canonical: selectedTable 우선, legacy layout 의 tableName 도 fallback 흡수 (Phase C.1).
  // useCustomTable=true 면 customTableName 이 effective table — 그러나 ConfigPanel 의 "연결" 위젯은
  // 항상 selectedTable 만 편집한다 (customTableName 은 별도 입력 필드로 노출).
  const connectedTable =
    current.selectedTable || current.tableName || screenTableName;

  const { options: tableOptions } = useDbTables({ fallback: tables });

  // ── 연결된 테이블의 컬럼 로드 (자동 로드 button 용) ──
  const [connectedTableColumns, setConnectedTableColumns] = useState<any[]>([]);
  const [loadingConnectedColumns, setLoadingConnectedColumns] = useState(false);

  useEffect(() => {
    let cancelled = false;
    if (!connectedTable) {
      setConnectedTableColumns([]);
      setLoadingConnectedColumns(false);
      return () => {
        cancelled = true;
      };
    }
    if (
      connectedTable === screenTableName &&
      Array.isArray(tableColumns) &&
      tableColumns.length > 0
    ) {
      setConnectedTableColumns(tableColumns);
      setLoadingConnectedColumns(false);
      return () => {
        cancelled = true;
      };
    }
    setLoadingConnectedColumns(true);
    (async () => {
      try {
        const { tableTypeApi } = await import("@/lib/api/screen");
        const cols = await tableTypeApi.getColumns(connectedTable, true);
        if (!cancelled) setConnectedTableColumns(Array.isArray(cols) ? cols : []);
      } catch {
        if (!cancelled) setConnectedTableColumns([]);
      } finally {
        if (!cancelled) setLoadingConnectedColumns(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [connectedTable, screenTableName, tableColumns]);

  const effectiveTableColumns = useMemo(() => {
    if (
      connectedTable === screenTableName &&
      Array.isArray(tableColumns) &&
      tableColumns.length > 0
    ) {
      return tableColumns;
    }
    return connectedTableColumns;
  }, [connectedTable, screenTableName, tableColumns, connectedTableColumns]);

  const autoLoadColumns = useCallback(() => {
    if (!effectiveTableColumns?.length) return;
    const newCols: TableColumn[] = effectiveTableColumns.map((col: any) => ({
      key: col.columnName || col.column_name,
      label:
        col.columnLabel ||
        col.column_label ||
        col.displayName ||
        col.columnName ||
        col.column_name,
      width: undefined,
      align: "left" as const,
      sortable: true,
      visible: true,
    }));
    patch({ columns: newCols });
  }, [effectiveTableColumns, patch]);

  const updateColumn = (idx: number, col: Partial<TableColumn>) => {
    const next = columns.map((c, i) => (i === idx ? { ...c, ...col } : c));
    patch({ columns: next });
  };

  const addColumn = () => {
    patch({
      columns: [
        ...columns,
        { key: `col${columns.length + 1}`, label: `컬럼 ${columns.length + 1}` },
      ],
    });
  };

  const removeColumn = (idx: number) => {
    patch({ columns: columns.filter((_, i) => i !== idx) });
  };

  const displayMode = current.displayMode || "table";

  // ─── 사용 가능한 컬럼 옵션 (Phase C.3 — 필터 row 의 column select 용) ───
  //   1) canonical columns 우선
  //   2) connected DB metadata fallback
  const availableColumnOptions = useMemo(() => {
    const seen = new Set<string>();
    const normalize = (value: unknown, label: unknown): ColOpt | null => {
      if (typeof value !== "string" || value.length === 0 || seen.has(value)) {
        return null;
      }
      seen.add(value);
      return {
        value,
        label:
          typeof label === "string" && label.length > 0
            ? label
            : value,
      };
    };

    if (columns.length > 0) {
      return columns
        .map((c) => normalize(c.key, c.label || c.key))
        .filter((option): option is ColOpt => option != null);
    }
    return (effectiveTableColumns || []).flatMap((c: any) => {
      const value =
        c.key || c.columnName || c.column_name || c.name || "";
      const label =
        c.label ||
        c.displayName ||
        c.columnLabel ||
        c.column_label ||
        c.columnName ||
        c.column_name ||
        c.name ||
        value;
      const option = normalize(value, label);
      return option ? [option] : [];
    });
  }, [columns, effectiveTableColumns]);

  // ─── 필터 helpers (Phase C.3) ───
  const patchFilter = (next: Partial<NonNullable<TableConfig["filter"]>>) =>
    patch({ filter: { enabled: false, filters: [], ...current.filter, ...next } as any });
  const patchExcludeFilter = (next: Partial<NonNullable<TableConfig["excludeFilter"]>>) =>
    patch({
      excludeFilter: {
        enabled: false,
        referenceTable: "",
        referenceColumn: "",
        sourceColumn: "",
        ...current.excludeFilter,
        ...next,
      } as any,
    });
  const patchDataFilter = (next: Partial<NonNullable<TableConfig["dataFilter"]>>) =>
    patch({
      dataFilter: {
        enabled: false,
        filters: [],
        match_type: "all",
        ...current.dataFilter,
        ...next,
      } as any,
    });
  // ─── 액션 helper (Phase C.4) ───
  // toggling `showActions` 가 기존 `actions.actions` 를 덮지 않도록 (또는 `bulkActions` 가
  // `bulkActionList` 를 덮지 않도록) 항상 기존 actions 객체 먼저 spread 한 뒤 next 가 덮어쓴다.
  const patchActions = (
    next: Partial<NonNullable<TableConfig["actions"]>>,
  ) =>
    patch({
      actions: {
        showActions: false,
        actions: [],
        bulkActions: false,
        bulkActionList: [],
        ...current.actions,
        ...next,
      } as any,
    });

  return (
    <div style={{ fontFamily: "var(--v5-font-sans)", color: "var(--cp-text)", padding: "0 12px" }}>
      {/* ── ① 테이블 연결 ─────────────────────────── */}
      <TableConnectSection
        value={connectedTable || ""}
        onChange={(v) => {
          onTableChange?.(v);
          // canonical 정규 키만 set. legacy alias (tableName) 는 유지하지 않는다 — 새 ConfigPanel
          // 에서 편집된 결과는 selectedTable 단일 키로 저장.
          patch({ selectedTable: v, columns: [] } as any);
        }}
        options={tableOptions}
        desc="DB 테이블 매핑"
      >
        {connectedTable && (
          <Hint>
            {loadingConnectedColumns
              ? "컬럼 정보를 불러오는 중..."
              : effectiveTableColumns.length > 0
                ? `컬럼 ${effectiveTableColumns.length}개 준비됨`
                : "불러온 컬럼 정보가 없습니다"}
          </Hint>
        )}

        {connectedTable && effectiveTableColumns.length > 0 && (
          <AutoLoadButton
            label={`DB 컬럼에서 자동 로드 (${effectiveTableColumns.length}개)`}
            onClick={autoLoadColumns}
          />
        )}

        {/* ── 데이터 소스 옵션 (Phase C.1, 2026-05-20) ───────────────
            customTableName / useCustomTable / isReadOnly / autoLoad 를 canonical
            TableConfig 에 흡수. */}
        <CPGroup title="데이터 소스 옵션" defaultOpen={false}>
          <CPRow
            label="커스텀 테이블 사용"
            help="화면 메인 테이블 대신 이 컴포넌트 전용 테이블을 사용"
          >
            <CPSwitch
              value={!!current.useCustomTable}
              onChange={(next) => patch({ useCustomTable: next })}
            />
          </CPRow>

          {current.useCustomTable && (
            <CPRow
              label="커스텀 테이블명"
              help="DB 테이블명 (예: tb_customer)"
            >
              <CPText
                value={current.customTableName ?? ""}
                onChange={(v) => patch({ customTableName: v })}
                placeholder="예: tb_customer"
              />
            </CPRow>
          )}

          <CPRow
            label="읽기 전용"
            help="조회용 테이블. 인라인 편집 / 행 추가·삭제 비활성"
          >
            <CPSwitch
              value={!!current.isReadOnly}
              onChange={(next) => patch({ isReadOnly: next })}
            />
          </CPRow>

          <CPRow
            label="자동 로드"
            help="마운트 시 데이터를 자동 fetch. 끄면 초기 로드를 보류하며 수동 refresh wiring 은 후속 단계에서 연결"
          >
            <CPSwitch
              value={current.autoLoad !== false}
              onChange={(next) => patch({ autoLoad: next })}
            />
          </CPRow>
        </CPGroup>
      </TableConnectSection>

      {/* ── ② 표시 모드 ─────────────────────────── */}
      <CPSection title="② 표시 모드" desc="테이블 형태 변형">
        <CPVisualGrid
          cols={5}
          cardHeight={62}
          value={displayMode}
          onChange={(v) => patch({ displayMode: v as TableConfig["displayMode"] })}
          options={[
            { value: "table", label: "기본", preview: <Table2 size={16} />, desc: "일반 테이블" },
            { value: "split", label: "분할", preview: <Columns2 size={16} />, desc: "좌우 분할" },
            { value: "grouped", label: "그룹", preview: <List size={16} />, desc: "그룹핑" },
            { value: "pivot", label: "피벗", preview: <Grid3x3 size={16} />, desc: "피벗 그리드" },
            { value: "card", label: "카드", preview: <LayoutGrid size={16} />, desc: "카드 리스트" },
          ]}
        />
      </CPSection>

      {/* ── ③ 행 선택 + 높이 ─────────────────────────── */}
      <CPSection title="③ 행 / 높이">
        <CPRow label="행 선택">
          <CPSegment
            value={current.selectionMode || "single"}
            onChange={(v) => patch({ selectionMode: v as TableConfig["selectionMode"] })}
            options={[
              { value: "none", label: "없음" },
              { value: "single", label: "단일" },
              { value: "multiple", label: "복수" },
            ]}
          />
        </CPRow>
        <CPRow label="행 높이">
          <CPSegment
            value={current.rowHeight || "normal"}
            onChange={(v) => patch({ rowHeight: v as TableConfig["rowHeight"] })}
            options={[
              { value: "compact", label: "좁게" },
              { value: "normal", label: "기본" },
              { value: "relaxed", label: "넓게" },
            ]}
          />
        </CPRow>
      </CPSection>

      {/* ── ④ 모드별 설정 (조건부) ─────────────────────────── */}
      {displayMode === "split" && (
        <CPSection title="④ 분할 설정" desc="좌측 패널 비율">
          <CPRow label="좌측 비율" help="0.1 ~ 0.9 (예: 0.5 = 절반)">
            <CPNumber
              value={current.splitRatio ?? 0.5}
              onChange={(v) => patch({ splitRatio: v ?? 0.5 })}
              min={0.1}
              max={0.9}
              step={0.05}
            />
          </CPRow>
        </CPSection>
      )}

      {displayMode === "grouped" && (
        <CPSection title="④ 그룹 설정" desc="그룹화 기준 컬럼">
          <CPRow label="그룹화 컬럼">
            <CPSelect
              value={current.groupBy || ""}
              onChange={(v) => patch({ groupBy: v || undefined })}
              searchable={false}
            >
              <option value="">선택...</option>
              {columns.map((c) => (
                <option key={c.key} value={c.key}>
                  {c.label || c.key}
                </option>
              ))}
            </CPSelect>
          </CPRow>
          {columns.length === 0 && (
            <Hint tone="warn">컬럼을 먼저 자동 로드 또는 추가하세요.</Hint>
          )}
        </CPSection>
      )}

      {displayMode === "pivot" && (
        <CPSection title="④ 피벗 설정" desc="본체 분석 UI에서 사용할 표시 옵션">
          {/* 피벗 필드 배치는 PivotView 본체의 FieldPanel/FieldChooser가 담당한다. ConfigPanel은 메타 토글만 관리한다. */}
          <FeatureChipGrid
            items={[
              { key: "chartEnabled", label: "차트 표시", desc: "본체 안에 피벗 차트(bar/line/pie 등) 패널을 함께 표시합니다." },
              { key: "fieldChooserEnabled", label: "필드 선택기", desc: "본체에서 row/column/data/filter 영역에 컬럼을 드래그-앤-드롭 배치하는 모달을 활성화." },
              { key: "rowGrandTotals", label: "행 총계", desc: "각 행의 합계 행을 자동 표시합니다. row 영역 컬럼이 있을 때 의미가 있습니다." },
              { key: "columnGrandTotals", label: "열 총계", desc: "각 열의 합계 열을 자동 표시합니다. column 영역 컬럼이 있을 때 의미가 있습니다." },
              { key: "mergeCells", label: "셀 병합", desc: "같은 값의 인접 셀을 병합해 가독성을 높입니다." },
              { key: "alternateRowColors", label: "행 교대 색", desc: "홀수/짝수 행을 다른 톤으로 교대 표시 (Zebra)." },
              { key: "exportExcel", label: "엑셀 내보내기", desc: "본체 툴바에 .xlsx 다운로드 버튼을 활성화." },
              { key: "exportPdf", label: "PDF 내보내기", desc: "본체 툴바에 PDF 다운로드 버튼을 활성화." },
            ]}
            source={{
              chartEnabled: current.pivotChart?.enabled ?? false,
              fieldChooserEnabled: current.pivotFieldChooser?.enabled ?? false,
              rowGrandTotals: current.pivotTotals?.showRowGrandTotals ?? false,
              columnGrandTotals: current.pivotTotals?.showColumnGrandTotals ?? false,
              mergeCells: current.pivotStyle?.mergeCells ?? false,
              alternateRowColors: current.pivotStyle?.alternateRowColors ?? false,
              exportExcel: current.pivotExportConfig?.excel ?? false,
              exportPdf: current.pivotExportConfig?.pdf ?? false,
            }}
            onToggle={(key, value) => {
              switch (key) {
                case "chartEnabled":
                  patch({
                    pivotChart: {
                      type: current.pivotChart?.type ?? "bar",
                      position: current.pivotChart?.position ?? "bottom",
                      ...current.pivotChart,
                      enabled: value,
                    },
                  });
                  return;
                case "fieldChooserEnabled":
                  patch({
                    pivotFieldChooser: { ...current.pivotFieldChooser, enabled: value },
                  });
                  return;
                case "rowGrandTotals":
                  patch({
                    pivotTotals: { ...current.pivotTotals, showRowGrandTotals: value },
                  });
                  return;
                case "columnGrandTotals":
                  patch({
                    pivotTotals: { ...current.pivotTotals, showColumnGrandTotals: value },
                  });
                  return;
                case "mergeCells":
                case "alternateRowColors": {
                  const baseStyle = {
                    theme: current.pivotStyle?.theme ?? "default" as const,
                    headerStyle: current.pivotStyle?.headerStyle ?? "default" as const,
                    cellPadding: current.pivotStyle?.cellPadding ?? "normal" as const,
                    borderStyle: current.pivotStyle?.borderStyle ?? "light" as const,
                    ...current.pivotStyle,
                  };
                  patch({
                    pivotStyle: { ...baseStyle, [key]: value },
                  });
                  return;
                }
                case "exportExcel":
                  patch({
                    pivotExportConfig: { ...current.pivotExportConfig, excel: value },
                  });
                  return;
                case "exportPdf":
                  patch({
                    pivotExportConfig: { ...current.pivotExportConfig, pdf: value },
                  });
                  return;
              }
            }}
          />
        </CPSection>
      )}

      {displayMode === "card" && (
        <CPSection title="④ 카드 설정" desc="grid · 표시 영역 · 컬럼 매핑">
          <CPRow label="한 줄 카드 수">
            <CPNumber
              value={current.cardsPerRow ?? 3}
              onChange={(v) => patch({ cardsPerRow: v ?? 3 })}
              min={1}
              max={10}
            />
          </CPRow>
          <CPRow label="간격(px)">
            <CPNumber
              value={current.cardSpacing ?? 12}
              onChange={(v) => patch({ cardSpacing: v ?? 12 })}
              min={0}
              max={64}
            />
          </CPRow>

          <CPGroup title="표시 영역" defaultOpen>
            <CPRow label="제목">
              <CPSwitch
                value={current.cardStyle?.showTitle ?? true}
                onChange={(v) => patch({ cardStyle: { ...current.cardStyle, showTitle: v } })}
              />
            </CPRow>
            <CPRow label="부제">
              <CPSwitch
                value={current.cardStyle?.showSubtitle ?? true}
                onChange={(v) => patch({ cardStyle: { ...current.cardStyle, showSubtitle: v } })}
              />
            </CPRow>
            <CPRow label="설명">
              <CPSwitch
                value={current.cardStyle?.showDescription ?? true}
                onChange={(v) => patch({ cardStyle: { ...current.cardStyle, showDescription: v } })}
              />
            </CPRow>
            <CPRow label="이미지">
              <CPSwitch
                value={current.cardStyle?.showImage ?? true}
                onChange={(v) => patch({ cardStyle: { ...current.cardStyle, showImage: v } })}
              />
            </CPRow>
            {(current.cardStyle?.showImage ?? true) && (
              <>
                <CPRow label="이미지 위치">
                  <CPSegment
                    value={current.cardStyle?.imagePosition || "top"}
                    onChange={(v) => patch({ cardStyle: { ...current.cardStyle, imagePosition: v as any } })}
                    options={[
                      { value: "top", label: "상단" },
                      { value: "left", label: "좌측" },
                      { value: "right", label: "우측" },
                    ]}
                  />
                </CPRow>
                <CPRow label="이미지 크기">
                  <CPSegment
                    value={current.cardStyle?.imageSize || "medium"}
                    onChange={(v) => patch({ cardStyle: { ...current.cardStyle, imageSize: v as any } })}
                    options={[
                      { value: "small", label: "작게" },
                      { value: "medium", label: "보통" },
                      { value: "large", label: "크게" },
                    ]}
                  />
                </CPRow>
              </>
            )}
          </CPGroup>

          <CPGroup title="컬럼 매핑" defaultOpen>
            {columns.length === 0 ? (
              <Hint tone="warn">컬럼을 먼저 자동 로드 또는 추가하세요.</Hint>
            ) : (
              <>
                <CPRow label="제목 컬럼">
                  <CPSelect
                    value={current.cardColumnMapping?.titleColumn || ""}
                    onChange={(v) =>
                      patch({
                        cardColumnMapping: {
                          ...current.cardColumnMapping,
                          titleColumn: v || undefined,
                        },
                      })
                    }
                  >
                    <option value="">선택...</option>
                    {columns.map((c) => (
                      <option key={c.key} value={c.key}>
                        {c.label || c.key}
                      </option>
                    ))}
                  </CPSelect>
                </CPRow>
                <CPRow label="부제 컬럼">
                  <CPSelect
                    value={current.cardColumnMapping?.subtitleColumn || ""}
                    onChange={(v) =>
                      patch({
                        cardColumnMapping: {
                          ...current.cardColumnMapping,
                          subtitleColumn: v || undefined,
                        },
                      })
                    }
                  >
                    <option value="">선택...</option>
                    {columns.map((c) => (
                      <option key={c.key} value={c.key}>
                        {c.label || c.key}
                      </option>
                    ))}
                  </CPSelect>
                </CPRow>
                <CPRow label="설명 컬럼">
                  <CPSelect
                    value={current.cardColumnMapping?.descriptionColumn || ""}
                    onChange={(v) =>
                      patch({
                        cardColumnMapping: {
                          ...current.cardColumnMapping,
                          descriptionColumn: v || undefined,
                        },
                      })
                    }
                  >
                    <option value="">선택...</option>
                    {columns.map((c) => (
                      <option key={c.key} value={c.key}>
                        {c.label || c.key}
                      </option>
                    ))}
                  </CPSelect>
                </CPRow>
                <CPRow label="이미지 컬럼">
                  <CPSelect
                    value={current.cardColumnMapping?.imageColumn || ""}
                    onChange={(v) =>
                      patch({
                        cardColumnMapping: {
                          ...current.cardColumnMapping,
                          imageColumn: v || undefined,
                        },
                      })
                    }
                  >
                    <option value="">선택...</option>
                    {columns.map((c) => (
                      <option key={c.key} value={c.key}>
                        {c.label || c.key}
                      </option>
                    ))}
                  </CPSelect>
                </CPRow>
              </>
            )}
          </CPGroup>

          <CPGroup title="액션 버튼" defaultOpen={false}>
            <CPRow label="액션 표시">
              <CPSwitch
                value={current.cardStyle?.showActions ?? false}
                onChange={(v) => patch({ cardStyle: { ...current.cardStyle, showActions: v } })}
              />
            </CPRow>
            {current.cardStyle?.showActions && (
              <>
                <CPRow label="보기">
                  <CPSwitch
                    value={current.cardStyle?.showViewButton ?? false}
                    onChange={(v) =>
                      patch({ cardStyle: { ...current.cardStyle, showViewButton: v } })
                    }
                  />
                </CPRow>
                <CPRow label="편집">
                  <CPSwitch
                    value={current.cardStyle?.showEditButton ?? false}
                    onChange={(v) =>
                      patch({ cardStyle: { ...current.cardStyle, showEditButton: v } })
                    }
                  />
                </CPRow>
                <CPRow label="삭제">
                  <CPSwitch
                    value={current.cardStyle?.showDeleteButton ?? false}
                    onChange={(v) =>
                      patch({ cardStyle: { ...current.cardStyle, showDeleteButton: v } })
                    }
                  />
                </CPRow>
              </>
            )}
          </CPGroup>
        </CPSection>
      )}

      {/* ── ⑤ 컬럼 ─────────────────────────── */}
      <CPSection title="⑤ 컬럼" desc={`${columns.length}개`}>
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end",
            marginBottom: 5,
          }}
        >
          <button
            type="button"
            onClick={addColumn}
            style={{
              padding: "4px 10px",
              fontSize: 10.5,
              background: "var(--cp-bg-subtle)",
              border: "1px solid var(--cp-border)",
              borderRadius: 4,
              cursor: "pointer",
              color: "var(--cp-text)",
              fontFamily: "var(--v5-font-sans)",
              display: "inline-flex",
              alignItems: "center",
              gap: 4,
            }}
          >
            <Plus size={10} /> 추가
          </button>
        </div>

        {columns.length === 0 ? (
          <Hint>
            {connectedTable
              ? loadingConnectedColumns
                ? "컬럼 정보를 불러오는 중입니다."
                : effectiveTableColumns.length > 0
                  ? "위 [자동 로드] 버튼으로 한 번에 가져올 수 있습니다."
                  : "연결된 테이블에서 컬럼 정보를 찾지 못했습니다."
              : "테이블을 연결하면 자동 로드할 수 있습니다."}
          </Hint>
        ) : (
          <div
            style={{
              border: "1px solid var(--cp-border-subtle)",
              borderRadius: 5,
              overflow: "hidden",
              background: "var(--cp-bg-subtle)",
            }}
          >
            {columns.map((col, idx) => (
              <ColumnEditRow
                key={`${col.key}-${idx}`}
                index={idx}
                col={col}
                isLast={idx === columns.length - 1}
                onChange={(p) => updateColumn(idx, p)}
                onRemove={() => removeColumn(idx)}
              />
            ))}
          </div>
        )}
      </CPSection>

      {/* ── ⑥ 페이지네이션 (Phase C.5) ─────────────────────────── */}
      <CPGroup title="⑥ 페이지네이션" defaultOpen={false}>
        <CPRow label="활성" help="페이지네이션 사용 여부 (끄면 전체 데이터 한 번에)">
          <CPSwitch
            value={current.pagination?.enabled !== false}
            onChange={(v) =>
              patch({ pagination: { ...current.pagination, enabled: v } })
            }
          />
        </CPRow>
        <CPRow label="페이지 크기" help="한 페이지에 표시할 행 수">
          <CPNumber
            value={current.pagination?.pageSize ?? 20}
            onChange={(v) =>
              patch({ pagination: { ...current.pagination, pageSize: v ?? 20 } })
            }
            min={1}
            max={1000}
          />
        </CPRow>
        <CPRow
          label="페이지 크기 옵션"
          help="콤마로 구분. 사용자가 드롭다운에서 선택 (예: 10, 20, 50, 100)"
        >
          <input
            type="text"
            value={
              Array.isArray(current.pagination?.pageSizeOptions)
                ? current.pagination!.pageSizeOptions!.join(", ")
                : ""
            }
            onChange={(e) => {
              const parsed = e.target.value
                .split(",")
                .map((s) => parseInt(s.trim(), 10))
                .filter((n) => Number.isFinite(n) && n > 0);
              patch({
                pagination: {
                  ...current.pagination,
                  pageSizeOptions: parsed.length > 0 ? parsed : undefined,
                },
              });
            }}
            placeholder="10, 20, 50, 100"
            style={{
              height: 22,
              padding: "0 6px",
              fontSize: 11,
              fontFamily: "var(--v5-font-mono)",
              background: "var(--cp-surface)",
              border: "1px solid var(--cp-border)",
              borderRadius: 3,
              color: "var(--cp-text)",
              outline: "none",
              minWidth: 0,
              width: "100%",
            }}
          />
        </CPRow>
        <CPRow label="크기 선택 드롭다운" help="D.6 에서 footer 에 노출">
          <CPSwitch
            value={!!current.pagination?.showSizeSelector}
            onChange={(v) =>
              patch({
                pagination: { ...current.pagination, showSizeSelector: v },
              })
            }
          />
        </CPRow>
        <CPRow label="페이지 정보" help='"1-20 / 총 100건" 표시 (D.6 footer)'>
          <CPSwitch
            value={!!current.pagination?.showPageInfo}
            onChange={(v) =>
              patch({
                pagination: { ...current.pagination, showPageInfo: v },
              })
            }
          />
        </CPRow>
      </CPGroup>

      {/* ── ⑦ 데이터 동작 (Phase C.5) ─────────────────────────── */}
      <CPGroup title="⑦ 데이터 동작" defaultOpen={false}>
        <CPRow label="기본 정렬 컬럼" help="화면 진입 시 적용될 정렬 기준">
          <CPSelect
            value={current.defaultSort?.columnName || ""}
            onChange={(v) =>
              patch({
                defaultSort: v
                  ? {
                      columnName: v,
                      direction: current.defaultSort?.direction || "asc",
                    }
                  : undefined,
              })
            }
            sortable={false}
            options={[
              { value: "", label: "(없음)" },
              ...columns.map((c) => ({ value: c.key, label: c.label })),
            ]}
          />
        </CPRow>
        {current.defaultSort?.columnName && (
          <CPRow label="정렬 방향">
            <CPSegment
              value={current.defaultSort.direction}
              onChange={(v) =>
                patch({
                  defaultSort: {
                    columnName: current.defaultSort!.columnName,
                    direction: v as "asc" | "desc",
                  },
                })
              }
              options={[
                { value: "asc", label: "오름" },
                { value: "desc", label: "내림" },
              ]}
            />
          </CPRow>
        )}
        <CPRow label="자동 새로고침 (초)" help="0 또는 빈 값 = 비활성. >0 일 때 주기적 refresh">
          <CPNumber
            value={current.refreshInterval ?? undefined}
            onChange={(v) =>
              patch({
                refreshInterval: v && v > 0 ? v : undefined,
              })
            }
            placeholder="0"
            min={0}
          />
        </CPRow>
      </CPGroup>

      {/* ── ⑧ 스타일 (Phase C.5) ─────────────────────────── */}
      <CPGroup title="⑧ 스타일" defaultOpen={false}>
        <CPRow label="테마" help="시각 변형 (D.6 에서 본체 적용)">
          <CPSelect
            value={current.tableStyle?.theme || "default"}
            onChange={(v) =>
              patch({
                tableStyle: {
                  ...current.tableStyle,
                  theme: v as "default" | "striped" | "bordered" | "minimal",
                },
              })
            }
            sortable={false}
            options={[
              { value: "default", label: "기본" },
              { value: "striped", label: "줄무늬" },
              { value: "bordered", label: "테두리" },
              { value: "minimal", label: "미니멀" },
            ]}
          />
        </CPRow>
        <CPRow label="헤더 스타일" help="D.6 에서 wiring">
          <CPSelect
            value={current.tableStyle?.headerStyle || "default"}
            onChange={(v) =>
              patch({
                tableStyle: {
                  ...current.tableStyle,
                  headerStyle: v as "default" | "dark" | "light",
                },
              })
            }
            sortable={false}
            options={[
              { value: "default", label: "기본" },
              { value: "dark", label: "다크" },
              { value: "light", label: "라이트" },
            ]}
          />
        </CPRow>
        <CPRow label="테두리 두께" help="D.6 에서 wiring">
          <CPSelect
            value={current.tableStyle?.borderStyle || "light"}
            onChange={(v) =>
              patch({
                tableStyle: {
                  ...current.tableStyle,
                  borderStyle: v as "none" | "light" | "heavy",
                },
              })
            }
            sortable={false}
            options={[
              { value: "none", label: "없음" },
              { value: "light", label: "얇음" },
              { value: "heavy", label: "두꺼움" },
            ]}
          />
        </CPRow>
        <CPRow
          label="교차 행 음영"
          help="striped 와 동일. 양쪽 키가 모두 인식됨"
        >
          <CPSwitch
            value={
              current.tableStyle?.alternateRows ??
              (current as any).striped ??
              true
            }
            onChange={(v) =>
              patch({
                tableStyle: { ...current.tableStyle, alternateRows: v },
                striped: v,
              })
            }
          />
        </CPRow>
        <CPRow
          label="호버 효과"
          help="hoverable 과 동일. 양쪽 키가 모두 인식됨"
        >
          <CPSwitch
            value={
              current.tableStyle?.hoverEffect ??
              (current as any).hoverable ??
              true
            }
            onChange={(v) =>
              patch({
                tableStyle: { ...current.tableStyle, hoverEffect: v },
                hoverable: v,
              })
            }
          />
        </CPRow>
      </CPGroup>

      {/* ── ⑨ 툴바 버튼 (Phase C.5 — 실제 버튼 동작은 D.6) ─────────────────────────── */}
      <CPGroup title="⑨ 툴바 버튼" defaultOpen={false}>
        <Hint>
          ⑨ 의 8개 옵션 중 새로고침 / 엑셀은 즉시 노출. 나머지 6개 (편집모드 / PDF / 복사 /
          검색 / 필터 / 페이지네이션 새로고침) 는 D.6 에서 실제 버튼 렌더 + 동작 wiring.
        </Hint>
        <CPRow label="새로고침" help="root showRefresh 와 동일 — 양쪽 인식">
          <CPSwitch
            value={
              current.toolbar?.showRefresh ?? !!(current as any).showRefresh
            }
            onChange={(v) =>
              patch({
                toolbar: { ...current.toolbar, showRefresh: v },
                showRefresh: v,
              })
            }
          />
        </CPRow>
        <CPRow label="엑셀 내보내기" help="root showExcel 와 동일 — 양쪽 인식">
          <CPSwitch
            value={current.toolbar?.showExcel ?? !!(current as any).showExcel}
            onChange={(v) =>
              patch({
                toolbar: { ...current.toolbar, showExcel: v },
                showExcel: v,
              })
            }
          />
        </CPRow>
        <CPRow label="편집 모드 토글" help="D.6">
          <CPSwitch
            value={!!current.toolbar?.showEditMode}
            onChange={(v) =>
              patch({ toolbar: { ...current.toolbar, showEditMode: v } })
            }
          />
        </CPRow>
        <CPRow label="PDF 내보내기" help="D.6">
          <CPSwitch
            value={!!current.toolbar?.showPdf}
            onChange={(v) =>
              patch({ toolbar: { ...current.toolbar, showPdf: v } })
            }
          />
        </CPRow>
        <CPRow label="복사 (클립보드)" help="D.6">
          <CPSwitch
            value={!!current.toolbar?.showCopy}
            onChange={(v) =>
              patch({ toolbar: { ...current.toolbar, showCopy: v } })
            }
          />
        </CPRow>
        <CPRow label="자체 검색바" help="별도 Search 컴포넌트와 중복 시 OFF — D.6">
          <CPSwitch
            value={!!current.toolbar?.showSearch}
            onChange={(v) =>
              patch({ toolbar: { ...current.toolbar, showSearch: v } })
            }
          />
        </CPRow>
        <CPRow label="자체 필터 패널" help="D.6">
          <CPSwitch
            value={!!current.toolbar?.showFilter}
            onChange={(v) =>
              patch({ toolbar: { ...current.toolbar, showFilter: v } })
            }
          />
        </CPRow>
        <CPRow label="페이지네이션 새로고침" help="D.6 footer 영역">
          <CPSwitch
            value={!!current.toolbar?.showPaginationRefresh}
            onChange={(v) =>
              patch({
                toolbar: { ...current.toolbar, showPaginationRefresh: v },
              })
            }
          />
        </CPRow>
      </CPGroup>

      {/* ── ⑩ 필터 (Phase C.3 — runtime 적용은 D.2) ─────────────────────────── */}
      <CPGroup title="⑩ 필터" defaultOpen={false}>
        <Hint>
          C.3 는 config 보존 + 편집 UI 까지. 실제 검색 위젯 렌더 / source 컴포넌트 구독 /
          제외 sub-query / DataFilter 적용은 D.2 에서.
        </Hint>

        {/* ── 검색 필터 위젯 (filter) ── */}
        <SubSectionHeading>검색 필터 위젯</SubSectionHeading>
        <CPRow label="활성">
          <CPSwitch
            value={!!current.filter?.enabled}
            onChange={(v) => patchFilter({ enabled: v })}
          />
        </CPRow>
        <CPRow label="필터-리스트 간격 (px)" help="검색 영역과 테이블 사이 간격">
          <CPNumber
            value={current.filter?.bottomSpacing ?? undefined}
            onChange={(v) => patchFilter({ bottomSpacing: v })}
            placeholder="40"
            min={0}
          />
        </CPRow>
        <FilterWidgetList
          filters={current.filter?.filters || []}
          columnOptions={availableColumnOptions}
          onChange={(filters) => patchFilter({ filters })}
        />

        {/* ── 연결 필터 (linkedFilters) ── */}
        <SubSectionHeading>연결 필터</SubSectionHeading>
        <Hint>
          다른 컴포넌트 (셀렉트박스 등) 값 변경 시 본 테이블 컬럼을 자동 필터.
        </Hint>
        <LinkedFilterList
          items={current.linkedFilters || []}
          columnOptions={availableColumnOptions}
          onChange={(linkedFilters) => patch({ linkedFilters })}
        />

        {/* ── 제외 필터 (excludeFilter) ── */}
        <SubSectionHeading>제외 필터</SubSectionHeading>
        <Hint>
          참조 테이블의 row 를 본 테이블 결과에서 제외 (예: 이미 등록된 품목을
          품목 선택 모달에서 제외).
        </Hint>
        <CPRow label="활성">
          <CPSwitch
            value={!!current.excludeFilter?.enabled}
            onChange={(v) => patchExcludeFilter({ enabled: v })}
          />
        </CPRow>
        <CPRow label="참조 테이블" help="row 를 보유한 비교 대상 테이블 (예: customer_item_mapping)">
          <input
            type="text"
            value={current.excludeFilter?.referenceTable ?? ""}
            onChange={(e) => patchExcludeFilter({ referenceTable: e.target.value })}
            placeholder="예: customer_item_mapping"
            style={inputStyle()}
          />
        </CPRow>
        <CPRow label="참조 컬럼" help="참조 테이블의 비교 컬럼 (예: item_id)">
          <input
            type="text"
            value={current.excludeFilter?.referenceColumn ?? ""}
            onChange={(e) => patchExcludeFilter({ referenceColumn: e.target.value })}
            placeholder="예: item_id"
            style={inputStyle()}
          />
        </CPRow>
        <CPRow label="본 테이블 컬럼" help="비교 대상 컬럼 (예: item_number)">
          <CPSelect
            value={current.excludeFilter?.sourceColumn ?? ""}
            onChange={(v) => patchExcludeFilter({ sourceColumn: v })}
            sortable={false}
            options={[
              { value: "", label: "(선택)" },
              ...availableColumnOptions,
            ]}
          />
        </CPRow>
        <CPRow label="필터 컬럼" help="참조 테이블의 필터 컬럼 (예: customer_id)">
          <input
            type="text"
            value={current.excludeFilter?.filterColumn ?? ""}
            onChange={(e) =>
              patchExcludeFilter({ filterColumn: e.target.value || undefined })
            }
            placeholder="예: customer_id"
            style={inputStyle()}
          />
        </CPRow>
        <CPRow label="필터 값 소스">
          <CPSegment
            value={current.excludeFilter?.filterValueSource || "url"}
            onChange={(v) =>
              patchExcludeFilter({
                filterValueSource: v as "url" | "formData" | "parentData",
              })
            }
            options={[
              { value: "url", label: "URL" },
              { value: "formData", label: "폼" },
              { value: "parentData", label: "상위" },
            ]}
          />
        </CPRow>
        <CPRow label="필터 값 필드명" help="예: customer_code">
          <input
            type="text"
            value={current.excludeFilter?.filterValueField ?? ""}
            onChange={(e) =>
              patchExcludeFilter({ filterValueField: e.target.value || undefined })
            }
            placeholder="예: customer_code"
            style={inputStyle()}
          />
        </CPRow>

        {/* ── 데이터 필터 (dataFilter) ── */}
        <SubSectionHeading>데이터 필터 (정적)</SubSectionHeading>
        <Hint>
          14 operator (equals / in / between / date_range_contains 등) 기반 row 필터.
        </Hint>
        <CPRow label="활성">
          <CPSwitch
            value={!!current.dataFilter?.enabled}
            onChange={(v) => patchDataFilter({ enabled: v })}
          />
        </CPRow>
        <CPRow label="조건 결합" help="모든 조건 AND / 하나 이상 OR">
          <CPSegment
            value={current.dataFilter?.match_type || "all"}
            onChange={(v) =>
              patchDataFilter({ match_type: v as "all" | "any" })
            }
            options={[
              { value: "all", label: "모두" },
              { value: "any", label: "하나 이상" },
            ]}
          />
        </CPRow>
        <DataFilterList
          filters={current.dataFilter?.filters || []}
          columnOptions={availableColumnOptions}
          onChange={(filters) => patchDataFilter({ filters })}
        />
      </CPGroup>

      {/* ── ⑪ 액션 (Phase C.4 — runtime 렌더/실행은 D.4) ─────────────────────────── */}
      <CPGroup title="⑪ 액션" defaultOpen={false}>
        <Hint>
          Table-level row/bulk 액션 묶음. C.4 는 config 편집까지. 실제 액션 컬럼 렌더 / click
          동작 (navigation / 모달 / 삭제 API / custom 핸들러) 은 D.4. 카드 모드의 셀 내부 버튼
          (cardStyle.showActions 등) 과는 별개 layer.
        </Hint>

        {/* ── 행 액션 (actions.actions[]) ── */}
        <SubSectionHeading>행 액션</SubSectionHeading>
        <CPRow label="활성" help="액션 컬럼 표시 (D.4)">
          <CPSwitch
            value={!!current.actions?.showActions}
            onChange={(v) => patchActions({ showActions: v })}
          />
        </CPRow>
        <ActionItemList
          items={current.actions?.actions || []}
          onChange={(actions) => patchActions({ actions })}
        />

        {/* ── 일괄 액션 (actions.bulkActions / bulkActionList) ── */}
        <SubSectionHeading>일괄 액션</SubSectionHeading>
        <CPRow label="활성" help="선택된 행들에 대한 일괄 작업 영역 표시 (D.4)">
          <CPSwitch
            value={!!current.actions?.bulkActions}
            onChange={(v) => patchActions({ bulkActions: v })}
          />
        </CPRow>
        <CPRow
          label="일괄 액션 종류"
          help="콤마 구분 (예: delete, export). 실제 실행 매핑은 D.4"
        >
          <input
            type="text"
            value={
              Array.isArray(current.actions?.bulkActionList)
                ? current.actions!.bulkActionList.join(", ")
                : ""
            }
            onChange={(e) => {
              const arr = e.target.value
                .split(",")
                .map((s) => s.trim())
                .filter(Boolean);
              patchActions({ bulkActionList: arr });
            }}
            placeholder="예: delete, export"
            style={inputStyle()}
          />
        </CPRow>
      </CPGroup>

      {/* ── ▾ 동작 옵션 ─────────────────────────── */}
      <CPGroup title="동작 옵션" defaultOpen={false}>
        <FeatureChipGrid
          items={[
            {
              key: "showHeader",
              label: "헤더",
              default: true,
              desc: "컬럼 라벨이 있는 상단 헤더 행을 표시합니다.\n끄면 데이터 행만 보여요.",
            },
            {
              key: "showFooter",
              label: "푸터",
              default: true,
              desc: "테이블 하단에 페이지네이션 / 합계 등을 표시합니다.\n페이지네이션이 비활성이면 자리만 차지해요.",
            },
            {
              key: "showCheckbox",
              label: "체크박스",
              desc: "각 행 좌측에 선택 체크박스 컬럼이 추가됩니다.\n[행 선택] = 복수 일 때 함께 켜는 게 일반적이에요.",
            },
            {
              key: "striped",
              label: "줄무늬",
              default: true,
              desc: "짝수 행에 옅은 음영을 주어 행 구분이 쉬워집니다.\n행이 많은 표 (50행+) 에 권장.",
            },
            {
              key: "hoverable",
              label: "호버 효과",
              default: true,
              desc: "행 위에 마우스를 올리면 배경이 밝아져 강조됩니다.\n인터랙티브 테이블 (행 클릭/선택) 에 유용.",
            },
            {
              key: "showToolbar",
              label: "툴바",
              default: true,
              desc: "테이블 상단에 검색 / 새로고침 / 엑셀 등 도구 모음을 표시합니다.\n별도 검색 컴포넌트가 있으면 OFF 권장.",
            },
            {
              key: "bordered",
              label: "테두리",
              desc: "셀 사이에 보더 선을 추가합니다.\n많은 컬럼을 명확히 구분할 때 유용.",
            },
          ]}
          source={current as any}
          onToggle={(k, v) => {
            if (k === "striped") {
              patch({
                striped: v,
                tableStyle: { ...current.tableStyle, alternateRows: v },
              });
              return;
            }
            if (k === "hoverable") {
              patch({
                hoverable: v,
                tableStyle: { ...current.tableStyle, hoverEffect: v },
              });
              return;
            }
            patch({ [k]: v } as Partial<TableConfig>);
          }}
        />
      </CPGroup>
    </div>
  );
};

InvTableConfigPanel.displayName = "InvTableConfigPanel";

// ───────────────────────────────────────────────────────
// ColumnEditRow — 컬럼 한 줄 편집 (dense)
// ───────────────────────────────────────────────────────
function ColumnEditRow({
  index,
  col,
  isLast,
  onChange,
  onRemove,
}: {
  index: number;
  col: TableColumn;
  isLast: boolean;
  onChange: (p: Partial<TableColumn>) => void;
  onRemove: () => void;
}) {
  const [hover, setHover] = useState(false);
  const [expanded, setExpanded] = useState(false);

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        borderBottom: isLast ? "none" : "1px solid var(--cp-border-subtle)",
        background: hover ? "var(--cp-surface-hover, var(--cp-surface))" : "transparent",
        transition: "background .12s ease",
        fontFamily: "var(--v5-font-sans)",
      }}
    >
      {/* 한 줄: # + 라벨 + key + 펼침 화살표 + 삭제 */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "16px 1fr 1fr 18px 22px",
          alignItems: "center",
          columnGap: 6,
          padding: "5px 8px",
          minHeight: 28,
        }}
      >
        <RowNumberBadge n={index + 1} />
        <input
          type="text"
          value={col.label}
          onChange={(e) => onChange({ label: e.target.value })}
          placeholder="라벨"
          style={inputStyle()}
        />
        <input
          type="text"
          value={col.key}
          onChange={(e) => onChange({ key: e.target.value })}
          placeholder="컬럼 key"
          style={inputStyle({ mono: true })}
        />
        <RowExpandChevron
          expanded={expanded}
          onToggle={() => setExpanded((x) => !x)}
        />
        <RowDeleteBtn onClick={onRemove} visible={hover} />
      </div>

      {/* 펼친 옵션 (Phase C.2 풀 옵션) */}
      {expanded && (
        <div
          style={{
            padding: "0 8px 8px 30px",
            display: "flex",
            flexDirection: "column",
            gap: 6,
          }}
        >
          {/* 너비 + 정렬 */}
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 6,
              alignItems: "center",
            }}
          >
            <CPRow label="너비 (px)">
              <CPNumber
                value={col.width ?? undefined}
                onChange={(v) => onChange({ width: v })}
                placeholder="auto"
                min={0}
              />
            </CPRow>
            <CPRow label="정렬">
              <CPSegment
                value={col.align || "left"}
                onChange={(v) => onChange({ align: v as TableColumn["align"] })}
                options={[
                  { value: "left", label: <AlignLeft size={11} /> },
                  { value: "center", label: <AlignCenter size={11} /> },
                  { value: "right", label: <AlignRight size={11} /> },
                ]}
              />
            </CPRow>
          </div>

          {/* 고정 + 입력 타입 */}
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 6,
              alignItems: "center",
            }}
          >
            <CPRow label="고정" help="좌/우 sticky 컬럼. 실제 렌더 적용은 D.1">
              <CPSegment
                value={col.fixed === "left" ? "left" : col.fixed === "right" ? "right" : "none"}
                onChange={(v) =>
                  onChange({
                    fixed:
                      v === "left" ? "left" : v === "right" ? "right" : false,
                  })
                }
                options={[
                  { value: "left", label: "좌" },
                  { value: "none", label: "—" },
                  { value: "right", label: "우" },
                ]}
              />
            </CPRow>
            <CPRow label="입력 타입" help="셀 렌더/인라인 편집 모드. D.3/D.5 에서 wiring">
              <CPSelect
                value={col.inputType || ""}
                onChange={(v) => onChange({ inputType: v || undefined })}
                sortable={false}
                options={[
                  { value: "", label: "(자동)" },
                  { value: "text", label: "텍스트" },
                  { value: "number", label: "숫자" },
                  { value: "date", label: "날짜" },
                  { value: "datetime", label: "일시" },
                  { value: "select", label: "선택" },
                  { value: "entity", label: "엔티티" },
                  { value: "checkbox", label: "체크박스" },
                  { value: "textarea", label: "텍스트영역" },
                  { value: "file", label: "파일" },
                  { value: "image", label: "이미지" },
                  { value: "code", label: "코드" },
                ]}
              />
            </CPRow>
          </div>

          {/* 동작 — sortable / searchable / editable */}
          <CPRow label="정렬 가능" help="헤더 클릭 시 sort 토글">
            <CPSwitch
              value={col.sortable ?? true}
              onChange={(v) => onChange({ sortable: v })}
            />
          </CPRow>
          <CPRow label="검색 가능" help="검색 위젯에 노출 — C.3 에서 wiring">
            <CPSwitch
              value={col.searchable ?? false}
              onChange={(v) => onChange({ searchable: v })}
            />
          </CPRow>
          <CPRow label="편집 가능" help="인라인 편집 허용 (기본 true) — D.3 에서 wiring">
            <CPSwitch
              value={col.editable !== false}
              onChange={(v) => onChange({ editable: v })}
            />
          </CPRow>

          {/* 표시 — visible / hidden */}
          <CPRow label="표시" help="false 면 운영/디자인 모두 안 보임">
            <CPSwitch
              value={col.visible !== false}
              onChange={(v) => onChange({ visible: v })}
            />
          </CPRow>
          <CPRow label="숨김 (디자인 도구용)" help="디자인 모드 흐릿 + 운영 숨김. visible 과 별개">
            <CPSwitch
              value={!!col.hidden}
              onChange={(v) => onChange({ hidden: v })}
            />
          </CPRow>

          {/* 포맷 + 천단위 */}
          <CPRow label="포맷" help="표시 포맷 문자열 (예: ###,### / YYYY-MM-DD)">
            <input
              type="text"
              value={col.format ?? ""}
              onChange={(e) => onChange({ format: e.target.value || undefined })}
              placeholder="예: ###,### / YYYY-MM-DD"
              style={inputStyle()}
            />
          </CPRow>
          {(col.inputType === "number" ||
            col.format === "number" ||
            col.format === "currency") && (
            <CPRow label="천단위 구분" help="천단위 콤마 표시 (기본 true)">
              <CPSwitch
                value={col.thousandSeparator !== false}
                onChange={(v) => onChange({ thousandSeparator: v })}
              />
            </CPRow>
          )}
        </div>
      )}
    </div>
  );
}

function inputStyle({ mono = false }: { mono?: boolean } = {}): React.CSSProperties {
  return {
    height: 22,
    padding: "0 6px",
    fontSize: 11,
    fontFamily: mono ? "var(--v5-font-mono)" : "var(--v5-font-sans)",
    background: "var(--cp-surface)",
    border: "1px solid var(--cp-border)",
    borderRadius: 3,
    color: "var(--cp-text)",
    outline: "none",
    minWidth: 0,
  };
}

// ───────────────────────────────────────────────────────
// Phase C.3 (2026-05-20) — 필터 sub-editor helpers
// ───────────────────────────────────────────────────────

type ColOpt = { value: string; label: string };

function SubSectionHeading({ children }: { children: React.ReactNode }) {
  return (
    <div
      style={{
        marginTop: 10,
        marginBottom: 4,
        fontFamily: "var(--v5-font-sans)",
        fontSize: 11,
        fontWeight: 700,
        color: "var(--cp-text-muted)",
        textTransform: "uppercase",
        letterSpacing: 0,
      }}
    >
      {children}
    </div>
  );
}

function AddRowButton({
  label,
  onClick,
}: {
  label: string;
  onClick: () => void;
}) {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "flex-end",
        marginTop: 4,
        marginBottom: 4,
      }}
    >
      <button
        type="button"
        onClick={onClick}
        style={{
          padding: "4px 10px",
          fontSize: 10.5,
          background: "var(--cp-bg-subtle)",
          border: "1px solid var(--cp-border)",
          borderRadius: 4,
          cursor: "pointer",
          color: "var(--cp-text)",
          fontFamily: "var(--v5-font-sans)",
          display: "inline-flex",
          alignItems: "center",
          gap: 4,
        }}
      >
        <Plus size={10} /> {label}
      </button>
    </div>
  );
}

function RemoveRowButton({ onClick }: { onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      style={{
        padding: "0 6px",
        height: 22,
        fontSize: 11,
        background: "transparent",
        border: "1px solid var(--cp-border)",
        borderRadius: 3,
        color: "var(--cp-text-muted)",
        cursor: "pointer",
      }}
      title="삭제"
    >
      ×
    </button>
  );
}

const WIDGET_TYPE_OPTIONS: ColOpt[] = [
  { value: "text", label: "텍스트" },
  { value: "number", label: "숫자" },
  { value: "date", label: "날짜" },
  { value: "select", label: "선택" },
  { value: "entity", label: "엔티티" },
  { value: "code", label: "공통코드" },
  { value: "checkbox", label: "체크박스" },
];

// ──── FilterWidgetList (filter.filters[]) ────
function FilterWidgetList({
  filters,
  columnOptions,
  onChange,
}: {
  filters: NonNullable<TableConfig["filter"]>["filters"];
  columnOptions: ColOpt[];
  onChange: (next: NonNullable<TableConfig["filter"]>["filters"]) => void;
}) {
  const update = (idx: number, p: Partial<(typeof filters)[number]>) =>
    onChange(filters.map((f, i) => (i === idx ? { ...f, ...p } : f)));
  const remove = (idx: number) => onChange(filters.filter((_, i) => i !== idx));
  const add = () =>
    onChange([
      ...filters,
      {
        columnName: columnOptions[0]?.value || "",
        widgetType: "text",
        label: "",
        gridColumns: 3,
      },
    ]);

  return (
    <>
      {filters.length === 0 ? (
        <Hint>필터 위젯이 없습니다. 아래 [+ 검색 필터 추가] 로 새 row 를 만드세요.</Hint>
      ) : (
        <div
          style={{
            border: "1px solid var(--cp-border-subtle)",
            borderRadius: 5,
            overflow: "hidden",
            background: "var(--cp-bg-subtle)",
          }}
        >
          {filters.map((f, idx) => (
            <div
              key={`${f.columnName}-${idx}`}
              style={{
                padding: "6px 8px",
                borderBottom:
                  idx === filters.length - 1
                    ? "none"
                    : "1px solid var(--cp-border-subtle)",
                display: "flex",
                flexDirection: "column",
                gap: 4,
              }}
            >
              <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr 1fr 60px 22px",
                  gap: 4,
                  alignItems: "center",
                }}
              >
                <CPSelect
                  value={f.columnName}
                  onChange={(v) => update(idx, { columnName: v })}
                  sortable={false}
                  options={[{ value: "", label: "(컬럼)" }, ...columnOptions]}
                />
                <CPSelect
                  value={f.widgetType}
                  onChange={(v) => update(idx, { widgetType: v })}
                  sortable={false}
                  options={WIDGET_TYPE_OPTIONS}
                />
                <input
                  type="text"
                  value={f.label}
                  onChange={(e) => update(idx, { label: e.target.value })}
                  placeholder="라벨"
                  style={inputStyle()}
                />
                <CPNumber
                  value={f.gridColumns}
                  onChange={(v) => update(idx, { gridColumns: v ?? 3 })}
                  min={1}
                  max={12}
                />
                <RemoveRowButton onClick={() => remove(idx)} />
              </div>
              {f.widgetType === "number" && (
                <CPRow label="숫자 모드">
                  <CPSegment
                    value={f.numberFilterMode || "exact"}
                    onChange={(v) =>
                      update(idx, {
                        numberFilterMode: v as "exact" | "range",
                      })
                    }
                    options={[
                      { value: "exact", label: "단일" },
                      { value: "range", label: "범위" },
                    ]}
                  />
                </CPRow>
              )}
              {f.widgetType === "code" && (
                <CPRow label="공통코드 그룹">
                  <input
                    type="text"
                    value={f.codeInfo ?? ""}
                    onChange={(e) =>
                      update(idx, { codeInfo: e.target.value || undefined })
                    }
                    placeholder="예: ORD_STATUS"
                    style={inputStyle({ mono: true })}
                  />
                </CPRow>
              )}
              {(f.widgetType === "entity" || f.widgetType === "select") && (
                <>
                  <CPRow label="참조 테이블">
                    <input
                      type="text"
                      value={f.referenceTable ?? ""}
                      onChange={(e) =>
                        update(idx, {
                          referenceTable: e.target.value || undefined,
                        })
                      }
                      placeholder="예: tb_customer"
                      style={inputStyle({ mono: true })}
                    />
                  </CPRow>
                  <CPRow label="참조 컬럼 (값)">
                    <input
                      type="text"
                      value={f.referenceColumn ?? ""}
                      onChange={(e) =>
                        update(idx, {
                          referenceColumn: e.target.value || undefined,
                        })
                      }
                      placeholder="예: customer_code"
                      style={inputStyle({ mono: true })}
                    />
                  </CPRow>
                  <CPRow label="표시 컬럼 (라벨)">
                    <input
                      type="text"
                      value={f.displayColumn ?? ""}
                      onChange={(e) =>
                        update(idx, {
                          displayColumn: e.target.value || undefined,
                        })
                      }
                      placeholder="예: customer_name"
                      style={inputStyle({ mono: true })}
                    />
                  </CPRow>
                </>
              )}
            </div>
          ))}
        </div>
      )}
      <AddRowButton label="검색 필터 추가" onClick={add} />
    </>
  );
}

// ──── LinkedFilterList (linkedFilters[]) ────
function LinkedFilterList({
  items,
  columnOptions,
  onChange,
}: {
  items: NonNullable<TableConfig["linkedFilters"]>;
  columnOptions: ColOpt[];
  onChange: (next: NonNullable<TableConfig["linkedFilters"]>) => void;
}) {
  const update = (
    idx: number,
    p: Partial<(typeof items)[number]>,
  ) => onChange(items.map((f, i) => (i === idx ? { ...f, ...p } : f)));
  const remove = (idx: number) => onChange(items.filter((_, i) => i !== idx));
  const add = () =>
    onChange([
      ...items,
      {
        sourceComponentId: "",
        targetColumn: columnOptions[0]?.value || "",
        operator: "equals",
        enabled: true,
      },
    ]);

  return (
    <>
      {items.length === 0 ? (
        <Hint>연결된 필터가 없습니다. 아래 [+ 연결 필터 추가] 로 새 row 를 만드세요.</Hint>
      ) : (
        <div
          style={{
            border: "1px solid var(--cp-border-subtle)",
            borderRadius: 5,
            overflow: "hidden",
            background: "var(--cp-bg-subtle)",
          }}
        >
          {items.map((f, idx) => (
            <div
              key={`${f.sourceComponentId}-${idx}`}
              style={{
                padding: "6px 8px",
                borderBottom:
                  idx === items.length - 1
                    ? "none"
                    : "1px solid var(--cp-border-subtle)",
                display: "flex",
                flexDirection: "column",
                gap: 4,
              }}
            >
              <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "auto 1fr 22px",
                  gap: 4,
                  alignItems: "center",
                }}
              >
                <CPSwitch
                  value={f.enabled !== false}
                  onChange={(v) => update(idx, { enabled: v })}
                />
                <input
                  type="text"
                  value={f.sourceComponentId}
                  onChange={(e) =>
                    update(idx, { sourceComponentId: e.target.value })
                  }
                  placeholder="source 컴포넌트 id"
                  style={inputStyle({ mono: true })}
                />
                <RemoveRowButton onClick={() => remove(idx)} />
              </div>
              <CPRow label="source 필드" help="비워두면 source 의 value 기본 사용">
                <input
                  type="text"
                  value={f.sourceField ?? ""}
                  onChange={(e) =>
                    update(idx, { sourceField: e.target.value || undefined })
                  }
                  placeholder="value"
                  style={inputStyle({ mono: true })}
                />
              </CPRow>
              <CPRow label="대상 컬럼">
                <CPSelect
                  value={f.targetColumn}
                  onChange={(v) => update(idx, { targetColumn: v })}
                  sortable={false}
                  options={[{ value: "", label: "(컬럼)" }, ...columnOptions]}
                />
              </CPRow>
              <CPRow label="연산자">
                <CPSegment
                  value={f.operator || "equals"}
                  onChange={(v) =>
                    update(idx, {
                      operator: v as "equals" | "contains" | "in",
                    })
                  }
                  options={[
                    { value: "equals", label: "=" },
                    { value: "contains", label: "포함" },
                    { value: "in", label: "IN" },
                  ]}
                />
              </CPRow>
            </div>
          ))}
        </div>
      )}
      <AddRowButton label="연결 필터 추가" onClick={add} />
    </>
  );
}

// ──── DataFilterList (dataFilter.filters[]) ────
const DATA_FILTER_OPERATOR_OPTIONS: ColOpt[] = [
  { value: "equals", label: "= equals" },
  { value: "not_equals", label: "≠ not_equals" },
  { value: "in", label: "IN" },
  { value: "not_in", label: "NOT IN" },
  { value: "contains", label: "contains" },
  { value: "starts_with", label: "starts_with" },
  { value: "ends_with", label: "ends_with" },
  { value: "is_null", label: "is_null" },
  { value: "is_not_null", label: "is_not_null" },
  { value: "greater_than", label: ">" },
  { value: "less_than", label: "<" },
  { value: "greater_than_or_equal", label: "≥" },
  { value: "less_than_or_equal", label: "≤" },
  { value: "between", label: "between" },
  { value: "date_range_contains", label: "date_range_contains" },
];

function DataFilterList({
  filters,
  columnOptions,
  onChange,
}: {
  filters: NonNullable<TableConfig["dataFilter"]>["filters"];
  columnOptions: ColOpt[];
  onChange: (next: NonNullable<TableConfig["dataFilter"]>["filters"]) => void;
}) {
  const update = (idx: number, p: Partial<(typeof filters)[number]>) =>
    onChange(filters.map((f, i) => (i === idx ? { ...f, ...p } : f)));
  const remove = (idx: number) => onChange(filters.filter((_, i) => i !== idx));
  const add = () =>
    onChange([
      ...filters,
      {
        id: `filter-${Date.now()}`,
        column_name: columnOptions[0]?.value || "",
        operator: "equals",
        value: "",
        value_type: "static",
      },
    ]);

  const onValueChange = (
    idx: number,
    raw: string,
    operator: string,
  ) => {
    if (operator === "in" || operator === "not_in") {
      const arr = raw
        .split(",")
        .map((s) => s.trim())
        .filter(Boolean);
      update(idx, { value: arr });
    } else {
      update(idx, { value: raw });
    }
  };
  const onOperatorChange = (
    idx: number,
    operator: (typeof filters)[number]["operator"],
    currentValue: (typeof filters)[number]["value"],
  ) => {
    const currentText = Array.isArray(currentValue)
      ? currentValue.join(", ")
      : currentValue ?? "";
    const nextValue =
      operator === "in" || operator === "not_in"
        ? currentText
            .split(",")
            .map((s) => s.trim())
            .filter(Boolean)
        : currentText;
    update(idx, { operator, value: nextValue });
  };

  return (
    <>
      {filters.length === 0 ? (
        <Hint>데이터 필터 row 가 없습니다. 아래 [+ 컬럼 필터 추가] 로 새 row 를 만드세요.</Hint>
      ) : (
        <div
          style={{
            border: "1px solid var(--cp-border-subtle)",
            borderRadius: 5,
            overflow: "hidden",
            background: "var(--cp-bg-subtle)",
          }}
        >
          {filters.map((f, idx) => {
            const valueAsText = Array.isArray(f.value)
              ? f.value.join(", ")
              : f.value ?? "";
            const isNullOp = f.operator === "is_null" || f.operator === "is_not_null";
            const isRangeOp = f.operator === "date_range_contains";
            return (
              <div
                key={f.id || idx}
                style={{
                  padding: "6px 8px",
                  borderBottom:
                    idx === filters.length - 1
                      ? "none"
                      : "1px solid var(--cp-border-subtle)",
                  display: "flex",
                  flexDirection: "column",
                  gap: 4,
                }}
              >
                <div
                  style={{
                    display: "grid",
                    gridTemplateColumns: "1fr 1fr 22px",
                    gap: 4,
                    alignItems: "center",
                  }}
                >
                  <CPSelect
                    value={f.column_name}
                    onChange={(v) => update(idx, { column_name: v })}
                    sortable={false}
                    options={[{ value: "", label: "(컬럼)" }, ...columnOptions]}
                  />
                  <CPSelect
                    value={f.operator}
                    onChange={(v) =>
                      onOperatorChange(
                        idx,
                        v as (typeof f)["operator"],
                        f.value,
                      )
                    }
                    sortable={false}
                    options={DATA_FILTER_OPERATOR_OPTIONS}
                  />
                  <RemoveRowButton onClick={() => remove(idx)} />
                </div>
                <CPRow label="값 타입">
                  <CPSegment
                    value={f.value_type}
                    onChange={(v) =>
                      update(idx, {
                        value_type: v as
                          | "static"
                          | "category"
                          | "code"
                          | "dynamic",
                      })
                    }
                    options={[
                      { value: "static", label: "정적" },
                      { value: "category", label: "카테고리" },
                      { value: "code", label: "공통코드" },
                      { value: "dynamic", label: "동적" },
                    ]}
                  />
                </CPRow>
                {!isNullOp && (
                  <CPRow
                    label="값"
                    help={
                      f.operator === "in" || f.operator === "not_in"
                        ? "콤마 구분 (배열로 저장)"
                        : undefined
                    }
                  >
                    <input
                      type="text"
                      value={valueAsText}
                      onChange={(e) =>
                        onValueChange(idx, e.target.value, f.operator)
                      }
                      placeholder={
                        f.operator === "in" || f.operator === "not_in"
                          ? "a, b, c"
                          : ""
                      }
                      style={inputStyle()}
                    />
                  </CPRow>
                )}
                {isRangeOp && (
                  <>
                    <CPRow label="시작일 컬럼">
                      <CPSelect
                        value={f.range_config?.start_column ?? ""}
                        onChange={(v) =>
                          update(idx, {
                            range_config: {
                              start_column: v,
                              end_column: f.range_config?.end_column || "",
                            },
                          })
                        }
                        sortable={false}
                        options={[
                          { value: "", label: "(컬럼)" },
                          ...columnOptions,
                        ]}
                      />
                    </CPRow>
                    <CPRow label="종료일 컬럼">
                      <CPSelect
                        value={f.range_config?.end_column ?? ""}
                        onChange={(v) =>
                          update(idx, {
                            range_config: {
                              start_column: f.range_config?.start_column || "",
                              end_column: v,
                            },
                          })
                        }
                        sortable={false}
                        options={[
                          { value: "", label: "(컬럼)" },
                          ...columnOptions,
                        ]}
                      />
                    </CPRow>
                  </>
                )}
              </div>
            );
          })}
        </div>
      )}
      <AddRowButton label="컬럼 필터 추가" onClick={add} />
    </>
  );
}

// ──── ActionItemList (Phase C.4 — actions.actions[]) ────
const ACTION_TYPE_OPTIONS: { value: TableActionType; label: string }[] = [
  { value: "view", label: "보기" },
  { value: "edit", label: "수정" },
  { value: "delete", label: "삭제" },
  { value: "custom", label: "커스텀" },
];

function ActionItemList({
  items,
  onChange,
}: {
  items: TableActionItemConfig[];
  onChange: (next: TableActionItemConfig[]) => void;
}) {
  const update = (idx: number, p: Partial<TableActionItemConfig>) =>
    onChange(items.map((it, i) => (i === idx ? { ...it, ...p } : it)));
  const remove = (idx: number) => onChange(items.filter((_, i) => i !== idx));
  const add = () =>
    onChange([
      ...items,
      { type: "view", label: "보기" },
    ]);

  return (
    <>
      {items.length === 0 ? (
        <Hint>행 액션이 없습니다. 아래 [+ 행 액션 추가] 로 새 row 를 만드세요.</Hint>
      ) : (
        <div
          style={{
            border: "1px solid var(--cp-border-subtle)",
            borderRadius: 5,
            overflow: "hidden",
            background: "var(--cp-bg-subtle)",
          }}
        >
          {items.map((it, idx) => (
            <div
              key={`${it.type}-${idx}`}
              style={{
                padding: "6px 8px",
                borderBottom:
                  idx === items.length - 1
                    ? "none"
                    : "1px solid var(--cp-border-subtle)",
                display: "flex",
                flexDirection: "column",
                gap: 4,
              }}
            >
              <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "auto 1fr 22px",
                  gap: 4,
                  alignItems: "center",
                }}
              >
                <CPSegment
                  value={it.type}
                  onChange={(v) =>
                    update(idx, { type: v as TableActionType })
                  }
                  options={ACTION_TYPE_OPTIONS}
                />
                <input
                  type="text"
                  value={it.label}
                  onChange={(e) => update(idx, { label: e.target.value })}
                  placeholder="라벨"
                  style={inputStyle()}
                />
                <RemoveRowButton onClick={() => remove(idx)} />
              </div>
              <CPRow label="아이콘" help="lucide-react 아이콘명 (예: Eye / Pencil / Trash2)">
                <input
                  type="text"
                  value={it.icon ?? ""}
                  onChange={(e) =>
                    update(idx, { icon: e.target.value || undefined })
                  }
                  placeholder="Eye"
                  style={inputStyle({ mono: true })}
                />
              </CPRow>
              <CPRow label="색상" help="primary / destructive / muted 등 의미 토큰 또는 hsl 값">
                <input
                  type="text"
                  value={it.color ?? ""}
                  onChange={(e) =>
                    update(idx, { color: e.target.value || undefined })
                  }
                  placeholder="primary"
                  style={inputStyle()}
                />
              </CPRow>
              <CPRow label="확인 메시지" help="delete 등 위험 액션 시 confirm 다이얼로그 텍스트 (D.4)">
                <input
                  type="text"
                  value={it.confirmMessage ?? ""}
                  onChange={(e) =>
                    update(idx, {
                      confirmMessage: e.target.value || undefined,
                    })
                  }
                  placeholder="예: 정말 삭제하시겠습니까?"
                  style={inputStyle()}
                />
              </CPRow>
              <CPRow label="대상 화면" help="view/edit 의 navigation 대상 (D.4)">
                <input
                  type="text"
                  value={it.targetScreen ?? ""}
                  onChange={(e) =>
                    update(idx, {
                      targetScreen: e.target.value || undefined,
                    })
                  }
                  placeholder="예: /screen/orderDetail"
                  style={inputStyle({ mono: true })}
                />
              </CPRow>
            </div>
          ))}
        </div>
      )}
      <AddRowButton label="행 액션 추가" onClick={add} />
    </>
  );
}

export default InvTableConfigPanel;