"use client";

/**
 * TableLayoutTabs.tsx — 테이블 컴포넌트 설정 (카드 컴포넌트와 통일된 3탭 구조)
 *
 * - 탭1 "레이아웃 구성": 테이블 선택 + 열 추가/삭제 + 열 너비 드래그 조절
 * - 탭2 "데이터 연결": 컬럼 팔레트(D&D) → 드롭 존 배치 + 인라인 설정 + 푸터 집계
 * - 탭3 "표시 조건": ConditionalProperties
 */

import React, { useState, useCallback, useEffect, useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
  LayoutGrid,
  Database,
  Eye,
  Table2,
  Loader2,
  Grid3X3,
  TableProperties,
  HelpCircle,
  Calculator,
} from "lucide-react";
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
import { ConditionalProperties } from "../properties/ConditionalProperties";
import { reportApi } from "@/lib/api/reportApi";
import { TableCanvasEditor } from "./TableCanvasEditor";
import { GridEditor } from "./GridEditor";
import { TableColumnPalette, type SchemaColumn } from "./TableColumnPalette";
import { TableColumnDropZone } from "./TableColumnDropZone";
import { GridCellDropZone } from "./GridCellDropZone";
import { FooterAggregateModal } from "./FooterAggregateModal";
import type { ComponentConfig, GridCell } from "@/types/report";

// ─── 타입 ──────────────────────────────────────────────────────────────────────

type TableColumn = NonNullable<ComponentConfig["tableColumns"]>[number];
type TabType = "layout" | "data" | "condition";
type GridSummaryType = "SUM" | "AVG" | "COUNT" | "NONE";

interface TableInfo {
  table_name: string;
  table_type: string;
}

interface Props {
  component: ComponentConfig;
}

const GRID_SUMMARY_OPTIONS: { value: GridSummaryType; label: string; description: string }[] = [
  { value: "NONE", label: "없음", description: "계산하지 않습니다" },
  { value: "SUM", label: "합계", description: "해당 열의 모든 값을 더합니다" },
  { value: "AVG", label: "평균", description: "해당 열의 평균값을 계산합니다" },
  { value: "COUNT", label: "개수", description: "해당 열의 데이터 수를 셉니다" },
];

// ─── 격자 푸터 셀 집계 설정 (인라인) ────────────────────────────────────────────

function GridFooterAggregateInline({
  cell,
  onSave,
  onClose,
}: {
  cell: GridCell;
  onSave: (summaryType: GridSummaryType) => void;
  onClose: () => void;
}) {
  return (
    <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
      <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-2.5">
        <div className="flex items-center gap-2">
          <Calculator className="h-3.5 w-3.5 text-blue-600" />
          <span className="text-xs font-bold text-gray-800">
            계산 방식 선택
            {cell.field && <span className="ml-1 font-mono text-blue-600">({cell.field})</span>}
          </span>
        </div>
        <button onClick={onClose} className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600">
          <span className="text-xs">닫기</span>
        </button>
      </div>
      <div className="p-3">
        <div className="grid grid-cols-2 gap-2">
          {GRID_SUMMARY_OPTIONS.map((opt) => (
            <TooltipProvider key={opt.value}>
              <Tooltip>
                <TooltipTrigger asChild>
                  <button
                    onClick={() => onSave(opt.value)}
                    className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium transition-all ${
                      cell.summaryType === opt.value || (!cell.summaryType && opt.value === "NONE")
                        ? "border-blue-400 bg-blue-50 text-blue-700"
                        : "border-gray-200 bg-white text-gray-600 hover:border-blue-300 hover:bg-blue-50/50"
                    }`}
                  >
                    {opt.value !== "NONE" && <Calculator className="h-3 w-3" />}
                    {opt.label}
                  </button>
                </TooltipTrigger>
                <TooltipContent>
                  <p className="text-xs">{opt.description}</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── 메인 컴포넌트 ──────────────────────────────────────────────────────────────

export function TableLayoutTabs({ component }: Props) {
  const { updateComponent } = useReportDesigner();
  const [activeTab, setActiveTab] = useState<TabType>("layout");

  // 스키마 상태
  const [tables, setTables] = useState<TableInfo[]>([]);
  const [schemaColumns, setSchemaColumns] = useState<SchemaColumn[]>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [loadingColumns, setLoadingColumns] = useState(false);

  // 행 개수 (component에 저장된 값을 초기값으로 사용)
  const [rowCount, setRowCount] = useState(component.tableRowCount ?? 3);

  // 푸터 집계 모달 (일반 테이블)
  const [aggregateModalOpen, setAggregateModalOpen] = useState(false);
  const [aggregateTargetIdx, setAggregateTargetIdx] = useState<number>(0);

  // 격자 모드 푸터 셀 집계 모달
  const [gridFooterModalOpen, setGridFooterModalOpen] = useState(false);
  const [gridFooterTargetCell, setGridFooterTargetCell] = useState<{ row: number; col: number } | null>(null);

  const cols: TableColumn[] = component.tableColumns ?? [];
  const selectedTable = component.dataTableName ?? "";

  // ─ 테이블 목록 로드
  useEffect(() => {
    let cancelled = false;
    setLoadingTables(true);
    reportApi
      .getSchemaTableList()
      .then((res) => {
        if (!cancelled && res.success) setTables(res.data);
      })
      .catch(() => {})
      .finally(() => {
        if (!cancelled) setLoadingTables(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  // ─ 테이블 변경 시 컬럼 목록 로드
  useEffect(() => {
    if (!selectedTable) {
      setSchemaColumns([]);
      return;
    }
    let cancelled = false;
    setLoadingColumns(true);
    reportApi
      .getSchemaTableColumns(selectedTable)
      .then((res) => {
        if (!cancelled && res.success) setSchemaColumns(res.data);
      })
      .catch(() => {})
      .finally(() => {
        if (!cancelled) setLoadingColumns(false);
      });
    return () => {
      cancelled = true;
    };
  }, [selectedTable]);

  // ─ 테이블 선택
  const handleTableChange = useCallback(
    (tableName: string) => {
      updateComponent(component.id, {
        dataTableName: tableName === "none" ? "" : tableName,
        tableColumns: [],
      });
    },
    [component.id, updateComponent],
  );

  // ─ 탭1: 열 구조 변경 (캔버스 에디터)
  const handleColumnsChange = useCallback(
    (newCols: TableColumn[]) => {
      updateComponent(component.id, { tableColumns: newCols });
    },
    [component.id, updateComponent],
  );

  // ─ 탭2: 컬럼 편집
  const updateColumn = useCallback(
    (idx: number, updates: Partial<TableColumn>) => {
      const newColumns = cols.map((col, i) => (i === idx ? { ...col, ...updates } : col));
      updateComponent(component.id, { tableColumns: newColumns });
    },
    [cols, component.id, updateComponent],
  );

  // ─ 탭2: D&D 드롭 핸들러 (팔레트 → 슬롯)
  const handleColumnDrop = useCallback(
    (slotIndex: number, columnName: string, _dataType: string) => {
      const targetCol = cols[slotIndex];
      const isTargetOccupied = !!targetCol?.field;

      if (isTargetOccupied) {
        // 타겟 슬롯에 이미 컬럼이 있으면, 가장 가까운 빈 슬롯으로 밀어냄
        const emptyIdx = cols.findIndex((c, i) => i !== slotIndex && !c.field);
        const newCols = cols.map((col, i) => {
          if (i === slotIndex) {
            return {
              ...col,
              field: columnName,
              header: col.header === `열 ${i + 1}` || !col.header ? columnName : col.header,
            };
          }
          if (emptyIdx >= 0 && i === emptyIdx) {
            return { ...col, field: targetCol.field, header: targetCol.header };
          }
          return col;
        });
        updateComponent(component.id, { tableColumns: newCols });
      } else {
        const newCols = cols.map((col, i) =>
          i === slotIndex
            ? {
                ...col,
                field: columnName,
                header: col.header === `열 ${i + 1}` || !col.header ? columnName : col.header,
              }
            : col,
        );
        updateComponent(component.id, { tableColumns: newCols });
      }
    },
    [cols, component.id, updateComponent],
  );

  // ─ 탭2: 슬롯 간 이동 (이미 배치된 컬럼을 다른 슬롯으로 이동)
  const handleColumnMove = useCallback(
    (fromIndex: number, toIndex: number) => {
      const fromCol = cols[fromIndex];
      const toCol = cols[toIndex];
      if (!fromCol?.field) return;

      // 두 슬롯의 field/header를 교환
      const newCols = cols.map((col, i) => {
        if (i === fromIndex) {
          return {
            ...col,
            field: toCol.field || "",
            header: toCol.field ? toCol.header : `열 ${i + 1}`,
            numberFormat: toCol.field ? toCol.numberFormat : ("none" as const),
            summaryType: toCol.field ? toCol.summaryType : undefined,
          };
        }
        if (i === toIndex) {
          return {
            ...col,
            field: fromCol.field,
            header: fromCol.header,
            numberFormat: fromCol.numberFormat,
            summaryType: fromCol.summaryType,
          };
        }
        return col;
      });
      updateComponent(component.id, { tableColumns: newCols });
    },
    [cols, component.id, updateComponent],
  );

  // ─ 탭2: 슬롯 비우기
  const handleColumnClear = useCallback(
    (slotIndex: number) => {
      const newCols = cols.map((col, i) => (i === slotIndex ? { ...col, field: "", header: `열 ${i + 1}` } : col));
      updateComponent(component.id, { tableColumns: newCols });
    },
    [cols, component.id, updateComponent],
  );

  // ─ 푸터 집계 모달
  const handleFooterColumnClick = useCallback((idx: number) => {
    setAggregateTargetIdx(idx);
    setAggregateModalOpen(true);
  }, []);

  const handleAggregateSave = useCallback(
    (idx: number, updates: Partial<TableColumn>) => {
      updateColumn(idx, updates);
    },
    [updateColumn],
  );

  // ─ 격자 모드: 푸터 셀 클릭 → 집계 설정
  const handleGridFooterCellClick = useCallback((row: number, col: number) => {
    setGridFooterTargetCell({ row, col });
    setGridFooterModalOpen(true);
  }, []);

  const handleGridFooterAggregateSave = useCallback(
    (summaryType: "SUM" | "AVG" | "COUNT" | "NONE") => {
      if (!gridFooterTargetCell) return;
      const { row, col } = gridFooterTargetCell;
      const gridCells = component.gridCells ?? [];
      const newCells = gridCells.map((c: GridCell) => (c.row === row && c.col === col ? { ...c, summaryType } : c));
      updateComponent(component.id, { gridCells: newCells });
      setGridFooterModalOpen(false);
      setGridFooterTargetCell(null);
    },
    [gridFooterTargetCell, component.id, component.gridCells, updateComponent],
  );

  // ─── 그리드 모드 전환 ────────────────────────────────────────────────────────

  const isGridMode = component.gridMode === true;

  const handleToggleGridMode = useCallback(
    (enabled: boolean) => {
      if (enabled) {
        // 단순 테이블 → 그리드: 현재 행/열 크기를 그리드 초기값으로 반영
        const currentCols = cols.length || 6;
        const currentRows = rowCount || 4;
        const hasExistingGrid = (component.gridCells ?? []).length > 0;

        if (!hasExistingGrid) {
          // 그리드 셀이 아직 없으면 현재 크기로 초기화
          const newCells: import("@/types/report").GridCell[] = [];
          for (let r = 0; r < currentRows; r++) {
            for (let c = 0; c < currentCols; c++) {
              newCells.push({
                id: `r${r}c${c}`,
                row: r,
                col: c,
                rowSpan: 1,
                colSpan: 1,
                cellType: "static",
                value: "",
                align: "center",
                verticalAlign: "middle",
                fontWeight: "normal",
                fontSize: 12,
                borderStyle: "thin",
              });
            }
          }
          updateComponent(component.id, {
            gridMode: true,
            gridCells: newCells,
            gridRowCount: currentRows,
            gridColCount: currentCols,
            gridColWidths: Array(currentCols).fill(100),
            gridRowHeights: Array(currentRows).fill(32),
          });
        } else {
          updateComponent(component.id, { gridMode: true });
        }
      } else {
        // 그리드 → 단순 테이블: 그리드 행/열 크기를 단순 테이블에 반영
        const gridRows = component.gridRowCount ?? rowCount;
        const gridCols = component.gridColCount ?? cols.length;
        setRowCount(gridRows);

        // 열 개수가 다르면 단순 테이블 열을 맞춤
        if (gridCols !== cols.length) {
          const newCols = Array.from({ length: gridCols }, (_, i) => {
            if (i < cols.length) return cols[i];
            return {
              field: "",
              header: `열 ${i + 1}`,
              width: 120,
              align: "left" as const,
              mappingType: "field" as const,
              summaryType: "NONE" as const,
              visible: true,
              numberFormat: "none" as const,
            };
          });
          updateComponent(component.id, { gridMode: false, tableColumns: newCols });
        } else {
          updateComponent(component.id, { gridMode: false });
        }
      }
    },
    [
      component.id,
      updateComponent,
      cols,
      rowCount,
      component.gridCells,
      component.gridRowCount,
      component.gridColCount,
    ],
  );

  const handleGridUpdate = useCallback(
    (updates: Partial<ComponentConfig>) => {
      updateComponent(component.id, updates);
    },
    [component.id, updateComponent],
  );

  // ─── 탭1: 레이아웃 구성 ─────────────────────────────────────────────────────

  const renderLayoutTab = () => (
    <div className="min-w-0 space-y-3">
      {/* 테이블 모드 선택 */}
      <div className="flex items-center justify-between rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
        <Label className="text-foreground text-xs font-medium">테이블 모드</Label>
        <div className="flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-0.5">
          <button
            className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all ${
              !isGridMode ? "bg-blue-600 text-white shadow-sm" : "text-gray-500 hover:bg-gray-100 hover:text-gray-700"
            }`}
            onClick={() => handleToggleGridMode(false)}
          >
            <TableProperties className="h-3.5 w-3.5" />
            테이블
          </button>
          <button
            className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all ${
              isGridMode ? "bg-blue-600 text-white shadow-sm" : "text-gray-500 hover:bg-gray-100 hover:text-gray-700"
            }`}
            onClick={() => handleToggleGridMode(true)}
          >
            <Grid3X3 className="h-3.5 w-3.5" />
            격자 양식
          </button>
        </div>
      </div>

      {/* 데이터 소스 선택 */}
      <div className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
        <div className="space-y-2">
          <Label className="text-foreground text-xs font-medium">데이터 소스</Label>
          <Select value={selectedTable || "none"} onValueChange={handleTableChange} disabled={loadingTables}>
            <SelectTrigger className="h-9 text-sm">
              <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블을 선택하세요"} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="none">선택 안함</SelectItem>
              {tables.map((t) => (
                <SelectItem key={t.table_name} value={t.table_name}>
                  {t.table_name}
                  {t.table_type === "VIEW" && <span className="ml-1 text-[10px] text-gray-400">(뷰)</span>}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        {selectedTable && (
          <p className="mt-2 text-[10px] text-gray-500">
            선택된 테이블: <span className="font-mono font-medium text-blue-600">{selectedTable}</span>
            {schemaColumns.length > 0 && ` (${schemaColumns.length}개 컬럼)`}
          </p>
        )}
      </div>

      {/* 모드별 에디터 */}
      {isGridMode ? (
        <GridEditor component={component} onUpdate={handleGridUpdate} schemaColumns={schemaColumns} />
      ) : (
        <>
          <TableCanvasEditor
            columns={cols}
            onColumnsChange={handleColumnsChange}
            rowCount={rowCount}
            onRowCountChange={(count) => {
              setRowCount(count);
              updateComponent(component.id, { tableRowCount: count });
            }}
          />
          {!selectedTable && (
            <div className="text-muted-foreground py-4 text-center text-sm">테이블을 먼저 선택해주세요.</div>
          )}
        </>
      )}
    </div>
  );

  // ─── 탭2: 데이터 연결 ─────────────────────────────────────────────────────

  // ─── 그리드 셀 데이터 바인딩 핸들러 ─────────────────────────────────────────

  const handleGridCellDrop = useCallback(
    (row: number, col: number, columnName: string) => {
      const gridCells = component.gridCells ?? [];
      const newCells = gridCells.map((c: GridCell) =>
        c.row === row && c.col === col ? { ...c, cellType: "field" as const, field: columnName } : c,
      );
      updateComponent(component.id, { gridCells: newCells });
    },
    [component.id, component.gridCells, updateComponent],
  );

  const handleGridCellClear = useCallback(
    (row: number, col: number) => {
      const gridCells = component.gridCells ?? [];
      const newCells = gridCells.map((c: GridCell) =>
        c.row === row && c.col === col ? { ...c, cellType: "static" as const, field: "", value: "" } : c,
      );
      updateComponent(component.id, { gridCells: newCells });
    },
    [component.id, component.gridCells, updateComponent],
  );

  const handleGridHeaderDrop = useCallback(
    (row: number, col: number, columnName: string) => {
      const gridCells = component.gridCells ?? [];
      const newCells = gridCells.map((c: GridCell) =>
        c.row === row && c.col === col ? { ...c, cellType: "static" as const, value: columnName, field: "" } : c,
      );
      updateComponent(component.id, { gridCells: newCells });
    },
    [component.id, component.gridCells, updateComponent],
  );

  const handleColumnRemove = useCallback(
    (columnName: string) => {
      if (isGridMode) {
        const gridCells = component.gridCells ?? [];
        const newCells = gridCells.map((c: GridCell) => {
          if (c.merged) return c;
          if (c.cellType === "field" && c.field === columnName) {
            return { ...c, cellType: "static" as const, field: "", value: "" };
          }
          if (c.cellType === "static" && c.value === columnName) {
            return { ...c, value: "" };
          }
          return c;
        });
        updateComponent(component.id, { gridCells: newCells });
      } else {
        const newCols = cols.map((col) =>
          col.field === columnName ? { ...col, field: "", header: `열 ${cols.indexOf(col) + 1}` } : col,
        );
        updateComponent(component.id, { tableColumns: newCols });
      }
    },
    [isGridMode, component.id, component.gridCells, cols, updateComponent],
  );

  const renderDataTab = () => {
    // 그리드 모드: 팔레트 + 셀 드롭 존 + 푸터 설정
    if (isGridMode) {
      const gridCells = component.gridCells ?? [];
      const gridRowCount = component.gridRowCount ?? 0;
      const gridColCount = component.gridColCount ?? 0;
      const gridColWidths = component.gridColWidths ?? [];
      const gridRowHeights = component.gridRowHeights ?? [];
      const headerRows = component.gridHeaderRows ?? 1;
      const headerCols = component.gridHeaderCols ?? 1;
      const gridFooterRows = component.gridFooterRows ?? 0;
      const gridShowFooter = component.gridShowFooter ?? false;

      const gridFooterTargetCellData = gridFooterTargetCell
        ? gridCells.find((c: GridCell) => c.row === gridFooterTargetCell.row && c.col === gridFooterTargetCell.col)
        : null;

      return (
        <TooltipProvider>
          <div className="space-y-4">
            <TableColumnPalette
              columns={schemaColumns}
              loading={loadingColumns}
              placedColumns={
                new Set(
                  gridCells
                    .filter((c: GridCell) => !c.merged && ((c.cellType === "field" && c.field) || (c.cellType === "static" && c.value)))
                    .map((c: GridCell) => c.field || c.value || "")
                    .filter(Boolean),
                )
              }
              onColumnRemove={handleColumnRemove}
            />

            {/* 헤더 영역 설정 */}
            {gridCells.length > 0 && (
              <div className="flex items-center gap-4 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
                <Label className="text-foreground shrink-0 text-xs font-medium">제목 영역</Label>
                <div className="flex items-center gap-2">
                  <span className="text-[10px] text-gray-500">상단</span>
                  <Input
                    type="number"
                    className="h-7 w-14 text-center text-xs"
                    value={headerRows}
                    min={0}
                    max={gridRowCount - 1}
                    onChange={(e) =>
                      updateComponent(component.id, {
                        gridHeaderRows: Math.max(0, Math.min(gridRowCount - 1, parseInt(e.target.value) || 0)),
                      })
                    }
                  />
                  <span className="text-[10px] text-gray-500">행</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-[10px] text-gray-500">좌측</span>
                  <Input
                    type="number"
                    className="h-7 w-14 text-center text-xs"
                    value={headerCols}
                    min={0}
                    max={gridColCount - 1}
                    onChange={(e) =>
                      updateComponent(component.id, {
                        gridHeaderCols: Math.max(0, Math.min(gridColCount - 1, parseInt(e.target.value) || 0)),
                      })
                    }
                  />
                  <span className="text-[10px] text-gray-500">열</span>
                </div>
              </div>
            )}

            {gridCells.length === 0 && (
              <div className="flex items-center gap-2 rounded-lg border border-orange-200 bg-orange-50 px-4 py-2.5">
                <span className="text-xs font-medium text-orange-700">레이아웃 탭에서 격자를 먼저 구성하세요.</span>
              </div>
            )}

            <GridCellDropZone
              cells={gridCells}
              rowCount={gridRowCount}
              colCount={gridColCount}
              colWidths={gridColWidths}
              rowHeights={gridRowHeights}
              headerRows={headerRows}
              headerCols={headerCols}
              footerRows={gridShowFooter ? gridFooterRows : 0}
              onCellDrop={handleGridCellDrop}
              onHeaderDrop={handleGridHeaderDrop}
              onCellClear={handleGridCellClear}
              onFooterCellClick={handleGridFooterCellClick}
            />

            {/* 푸터(요약) 설정 — 테이블 모드와 동일 구조 */}
            {gridCells.length > 0 && (
              <div className="overflow-hidden rounded-xl border border-gray-200 bg-white">
                <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-2.5">
                  <div className="flex items-center gap-2">
                    <Calculator className="h-3.5 w-3.5 text-blue-600" />
                    <span className="text-sm font-bold text-gray-800">하단 통계 설정</span>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <HelpCircle className="h-3.5 w-3.5 cursor-help text-gray-400" />
                      </TooltipTrigger>
                      <TooltipContent side="right" className="max-w-[280px]">
                        <p className="text-xs leading-relaxed">
                          표 아래쪽에 합계/평균/개수 등을 자동으로 계산하는 행을 추가합니다. 각 열마다 원하는 계산
                          방식을 지정할 수 있습니다.
                        </p>
                      </TooltipContent>
                    </Tooltip>
                  </div>
                  <Switch
                    checked={gridShowFooter}
                    onCheckedChange={(checked) => {
                      const updates: Partial<ComponentConfig> = { gridShowFooter: checked };
                      if (checked && gridFooterRows === 0) {
                        updates.gridFooterRows = 1;
                      }
                      if (!checked) {
                        updates.gridFooterRows = 0;
                      }
                      updateComponent(component.id, updates);
                    }}
                  />
                </div>

                {gridShowFooter && (
                  <div className="space-y-4 p-4">

                    {/* 컬럼별 집계 유형 미리보기 테이블 */}
                    {gridColCount > 0 &&
                      (() => {
                        const footerStartRow = gridRowCount - gridFooterRows;
                        const footerCells = gridCells.filter((c: GridCell) => c.row >= footerStartRow && !c.merged);
                        const dataCols = gridCells.filter(
                          (c: GridCell) => c.cellType === "field" && c.field && !c.merged && c.row < footerStartRow,
                        );
                        const uniqueFields = Array.from(new Set(dataCols.map((c: GridCell) => c.field!)));

                        if (uniqueFields.length === 0 && footerCells.length === 0) return null;

                        return (
                          <div>
                            <div className="mb-2 flex items-center gap-1.5">
                              <span className="text-xs font-medium text-gray-700">열별 계산 방식</span>
                              <Tooltip>
                                <TooltipTrigger asChild>
                                  <HelpCircle className="h-3 w-3 cursor-help text-gray-400" />
                                </TooltipTrigger>
                                <TooltipContent side="right" className="max-w-[220px]">
                                  <p className="text-xs">
                                    각 열을 클릭하면 합계/평균/개수 중 계산 방식을 선택할 수 있습니다.
                                  </p>
                                </TooltipContent>
                              </Tooltip>
                            </div>
                            <div className="overflow-x-auto rounded-lg border border-gray-200">
                              <table className="w-full border-collapse text-xs">
                                <thead>
                                  <tr className="border-b border-gray-200 bg-gray-50">
                                    {Array.from({ length: gridColCount }).map((_, colIdx) => {
                                      const fieldCell = gridCells.find(
                                        (c: GridCell) =>
                                          c.col === colIdx && c.cellType === "field" && c.field && !c.merged,
                                      );
                                      const headerCell = gridCells.find(
                                        (c: GridCell) =>
                                          c.col === colIdx &&
                                          c.row < headerRows &&
                                          c.cellType === "static" &&
                                          c.value &&
                                          !c.merged,
                                      );
                                      const label = headerCell?.value || fieldCell?.field || `열 ${colIdx + 1}`;
                                      return (
                                        <th
                                          key={colIdx}
                                          className="border-r border-gray-200 px-3 py-2 text-left font-medium text-gray-600 last:border-r-0"
                                        >
                                          <Tooltip>
                                            <TooltipTrigger asChild>
                                              <span className="cursor-default">{label}</span>
                                            </TooltipTrigger>
                                            <TooltipContent>
                                              <p className="text-xs">
                                                {fieldCell?.field ? `필드: ${fieldCell.field}` : "필드 미배치"}
                                              </p>
                                            </TooltipContent>
                                          </Tooltip>
                                        </th>
                                      );
                                    })}
                                  </tr>
                                </thead>
                                <tbody>
                                  {Array.from({ length: gridFooterRows }).map((_, fRowIdx) => {
                                    const rowIdx = footerStartRow + fRowIdx;
                                    return (
                                      <tr key={fRowIdx}>
                                        {Array.from({ length: gridColCount }).map((_, colIdx) => {
                                          const cell = gridCells.find(
                                            (c: GridCell) => c.row === rowIdx && c.col === colIdx,
                                          );
                                          if (!cell || cell.merged) {
                                            return (
                                              <td
                                                key={colIdx}
                                                className="border-r border-gray-100 px-3 py-2.5 text-center last:border-r-0"
                                              >
                                                <span className="text-[10px] text-gray-200">—</span>
                                              </td>
                                            );
                                          }
                                          return (
                                            <Tooltip key={colIdx}>
                                              <TooltipTrigger asChild>
                                                <td
                                                  onClick={() => handleGridFooterCellClick(rowIdx, colIdx)}
                                                  className="cursor-pointer border-r border-gray-100 px-3 py-2.5 text-center transition-colors last:border-r-0 hover:bg-blue-50"
                                                >
                                                  {cell.summaryType && cell.summaryType !== "NONE" ? (
                                                    <span className="inline-flex items-center gap-1 rounded bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700">
                                                      <Calculator className="h-2.5 w-2.5" />
                                                      {cell.summaryType}
                                                    </span>
                                                  ) : (
                                                    <span className="text-[10px] text-gray-300">클릭하여 설정</span>
                                                  )}
                                                </td>
                                              </TooltipTrigger>
                                              <TooltipContent>
                                                <p className="text-xs">
                                                  {cell.summaryType && cell.summaryType !== "NONE"
                                                    ? `${cell.summaryType} 계산 중 — 클릭하여 변경`
                                                    : "클릭하여 계산 방식을 선택하세요"}
                                                </p>
                                              </TooltipContent>
                                            </Tooltip>
                                          );
                                        })}
                                      </tr>
                                    );
                                  })}
                                </tbody>
                              </table>
                            </div>
                          </div>
                        );
                      })()}

                    {/* exportSummaryId */}
                    <div className="space-y-2 pl-1">
                      <div className="flex items-center gap-1.5">
                        <Label className="block text-xs font-medium text-gray-700">연결 이름</Label>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <HelpCircle className="h-3 w-3 cursor-help text-gray-400" />
                          </TooltipTrigger>
                          <TooltipContent side="right" className="max-w-[260px]">
                            <p className="text-xs leading-relaxed">
                              다른 계산 영역에서 이 통계값을 가져다 쓸 수 있도록 이름을 지정합니다.
                            </p>
                          </TooltipContent>
                        </Tooltip>
                      </div>
                      <Input
                        value={component.exportSummaryId || ""}
                        onChange={(e) => updateComponent(component.id, { exportSummaryId: e.target.value })}
                        placeholder="예: table_total"
                        className="h-8 max-w-[240px] text-xs"
                      />
                      <p className="text-[10px] text-gray-500">
                        다른 계산 영역에서 이 값을 사용할 때 필요한 이름입니다.
                      </p>
                    </div>
                  </div>
                )}
              </div>
            )}

            {/* 격자 푸터 셀 집계 설정 모달 */}
            {gridFooterModalOpen && gridFooterTargetCellData && (
              <GridFooterAggregateInline
                cell={gridFooterTargetCellData}
                onSave={handleGridFooterAggregateSave}
                onClose={() => {
                  setGridFooterModalOpen(false);
                  setGridFooterTargetCell(null);
                }}
              />
            )}
          </div>
        </TooltipProvider>
      );
    }

    const filledCount = cols.filter((c) => c.field).length;
    const allFilled = cols.length > 0 && filledCount === cols.length;

    return (
      <div className="space-y-4">
        {/* 컬럼 팔레트 (레이아웃 열 수만큼만 선택 가능) */}
        <TableColumnPalette
          columns={schemaColumns}
          loading={loadingColumns}
          maxSelectable={cols.length}
          placedColumns={new Set(cols.filter((c) => c.field).map((c) => c.field))}
          onColumnRemove={handleColumnRemove}
        />

        {/* 배치 안내 */}
        {cols.length > 0 && !allFilled && (
          <div className="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5">
            <span className="text-xs font-medium text-amber-700">
              {cols.length}개의 열에 컬럼을 배치하세요 ({filledCount}/{cols.length} 배치됨)
            </span>
          </div>
        )}

        {cols.length === 0 && (
          <div className="flex items-center gap-2 rounded-lg border border-orange-200 bg-orange-50 px-4 py-2.5">
            <span className="text-xs font-medium text-orange-700">레이아웃 탭에서 열을 먼저 추가하세요.</span>
          </div>
        )}

        {/* 드롭 존 */}
        <TableColumnDropZone
          columns={cols}
          onUpdate={updateColumn}
          onDrop={handleColumnDrop}
          onClear={handleColumnClear}
          onMove={handleColumnMove}
        />

        {/* 푸터(요약) 설정 */}
        <TooltipProvider>
          <div className="overflow-hidden rounded-xl border border-gray-200 bg-white">
            <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-2.5">
              <div className="flex items-center gap-2">
                <Calculator className="h-3.5 w-3.5 text-blue-600" />
                <span className="text-sm font-bold text-gray-800">하단 통계 설정</span>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <HelpCircle className="h-3.5 w-3.5 cursor-help text-gray-400" />
                  </TooltipTrigger>
                  <TooltipContent side="right" className="max-w-[280px]">
                    <p className="text-xs leading-relaxed">
                      표 아래쪽에 합계/평균/개수 등을 자동으로 계산하는 행을 추가합니다. 각 열마다 원하는 계산 방식을
                      지정할 수 있습니다.
                    </p>
                  </TooltipContent>
                </Tooltip>
              </div>
              <Switch
                checked={component.showFooter || false}
                onCheckedChange={(checked) => updateComponent(component.id, { showFooter: checked })}
              />
            </div>

            {component.showFooter && (
              <div className="space-y-4 p-4">
                {/* 푸터 미리보기 테이블 */}
                {cols.length > 0 && (
                  <div>
                    <div className="mb-2 flex items-center gap-1.5">
                      <span className="text-xs font-medium text-gray-700">열별 계산 방식</span>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <HelpCircle className="h-3 w-3 cursor-help text-gray-400" />
                        </TooltipTrigger>
                        <TooltipContent side="right" className="max-w-[220px]">
                          <p className="text-xs">각 열을 클릭하면 합계/평균/개수 중 계산 방식을 선택할 수 있습니다.</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                    <div className="overflow-x-auto rounded-lg border border-gray-200">
                      <table className="w-full border-collapse text-xs">
                        <thead>
                          <tr className="border-b border-gray-200 bg-gray-50">
                            {cols.map((col, idx) => (
                              <th
                                key={idx}
                                className="border-r border-gray-200 px-3 py-2 text-left font-medium text-gray-600 last:border-r-0"
                              >
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <span className="cursor-default">{col.header || col.field || `열 ${idx + 1}`}</span>
                                  </TooltipTrigger>
                                  <TooltipContent>
                                    <p className="text-xs">{col.field ? `필드: ${col.field}` : "필드 미배치"}</p>
                                  </TooltipContent>
                                </Tooltip>
                              </th>
                            ))}
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            {cols.map((col, idx) => (
                              <Tooltip key={idx}>
                                <TooltipTrigger asChild>
                                  <td
                                    onClick={() => handleFooterColumnClick(idx)}
                                    className="cursor-pointer border-r border-gray-100 px-3 py-2.5 text-center transition-colors last:border-r-0 hover:bg-blue-50"
                                  >
                                    {col.summaryType && col.summaryType !== "NONE" ? (
                                      <span className="inline-flex items-center gap-1 rounded bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700">
                                        <Calculator className="h-2.5 w-2.5" />
                                        {col.summaryType}
                                      </span>
                                    ) : (
                                      <span className="text-[10px] text-gray-300">클릭하여 설정</span>
                                    )}
                                  </td>
                                </TooltipTrigger>
                                <TooltipContent>
                                  <p className="text-xs">
                                    {col.summaryType && col.summaryType !== "NONE"
                                      ? `${col.summaryType} 계산 중 — 클릭하여 변경`
                                      : "클릭하여 계산 방식을 선택하세요"}
                                  </p>
                                </TooltipContent>
                              </Tooltip>
                            ))}
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                )}

                {/* exportSummaryId */}
                <div className="space-y-2 pl-1">
                  <div className="flex items-center gap-1.5">
                    <Label className="block text-xs font-medium text-gray-700">연결 이름</Label>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <HelpCircle className="h-3 w-3 cursor-help text-gray-400" />
                      </TooltipTrigger>
                      <TooltipContent side="right" className="max-w-[260px]">
                        <p className="text-xs leading-relaxed">
                          다른 계산 영역에서 이 통계값을 가져다 쓸 수 있도록 이름을 지정합니다.
                        </p>
                      </TooltipContent>
                    </Tooltip>
                  </div>
                  <Input
                    value={component.exportSummaryId || ""}
                    onChange={(e) => updateComponent(component.id, { exportSummaryId: e.target.value })}
                    placeholder="예: table_total"
                    className="h-8 max-w-[240px] text-xs"
                  />
                  <p className="text-[10px] text-gray-500">다른 계산 영역에서 이 값을 사용할 때 필요한 이름입니다.</p>
                </div>
              </div>
            )}
          </div>
        </TooltipProvider>

        {/* 집계 설정 모달 */}
        <FooterAggregateModal
          open={aggregateModalOpen}
          onOpenChange={setAggregateModalOpen}
          column={cols[aggregateTargetIdx] ?? null}
          columnIndex={aggregateTargetIdx}
          onSave={handleAggregateSave}
        />
      </div>
    );
  };

  // ─── 탭3: 표시 조건 ─────────────────────────────────────────────────────

  const tableColumnLabels = useMemo(() => {
    if (isGridMode) {
      // 격자 양식: gridCells에서 field가 설정된 셀의 컬럼명 수집
      const gridCells = component.gridCells ?? [];
      const labels: Array<{ columnName: string; label: string }> = [];
      const seen = new Set<string>();
      gridCells.forEach((c) => {
        if (c.cellType === "field" && c.field && !c.merged && !seen.has(c.field)) {
          seen.add(c.field);
          labels.push({ columnName: c.field, label: c.field });
        }
      });
      return labels;
    }
    // 테이블 모드: tableColumns에서 field가 설정된 열 수집
    return cols.filter((c) => c.field).map((c) => ({ columnName: c.field, label: c.header || c.field }));
  }, [isGridMode, component.gridCells, cols]);

  const tableConditionColumns = useMemo(() => {
    return schemaColumns.map((sc) => ({
      column_name: sc.column_name,
      data_type: sc.data_type,
    }));
  }, [schemaColumns]);

  const renderConditionTab = () => (
    <ConditionalProperties
      component={component}
      cardColumns={tableConditionColumns}
      cardTableName={selectedTable}
      cardColumnLabels={tableColumnLabels}
    />
  );

  // ─── 탭 정의 ────────────────────────────────────────────────────────────────

  const tabs: { key: TabType; icon: React.ReactNode; label: string }[] = [
    { key: "layout", icon: <LayoutGrid className="h-4 w-4" />, label: "레이아웃 구성" },
    { key: "data", icon: <Database className="h-4 w-4" />, label: "데이터 연결" },
    { key: "condition", icon: <Eye className="h-4 w-4" />, label: "표시 조건" },
  ];

  return (
    <div className="max-w-full min-w-0 space-y-4 px-6 py-5">
      {/* 헤더 + 탭 */}
      <div>
        <div className="mb-3 flex items-center gap-2">
          <Table2 className="h-3.5 w-3.5 text-blue-600" />
          <span className="text-foreground text-xs font-medium">테이블 기능 설정</span>
        </div>
        <div className="inline-flex items-center gap-1 rounded-lg bg-gray-100 p-1">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all ${
                activeTab === tab.key
                  ? "bg-white text-blue-700 shadow-sm"
                  : "text-gray-500 hover:text-gray-700"
              }`}
            >
              {tab.icon}
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* 탭 콘텐츠 */}
      <div className="min-w-0 overflow-x-auto">
        {activeTab === "layout" && renderLayoutTab()}
        {activeTab === "data" && renderDataTab()}
        {activeTab === "condition" && renderConditionTab()}
      </div>
    </div>
  );
}