"use client";

/**
 * V2AggregationWidget 설정 패널
 * 토스식 단계별 UX: 데이터 소스(카드) -> 테이블/컴포넌트 선택 -> 집계 항목 -> 필터(접힘) -> 레이아웃(접힘) -> 스타일(접힘)
 * 기존 AggregationWidgetConfigPanel의 모든 기능을 자체 UI로 완전 구현
 */

import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import {
  Database,
  Link2,
  MousePointer,
  Table2,
  Check,
  ChevronsUpDown,
  Plus,
  Trash2,
  Calculator,
  Filter,
  LayoutGrid,
  Paintbrush,
  ChevronDown,
  ChevronRight,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { tableTypeApi } from "@/lib/api/screen";
import { getCategoryValues } from "@/lib/api/tableCategoryValue";
import type {
  AggregationWidgetConfig,
  AggregationItem,
  AggregationType,
  DataSourceType,
  FilterCondition,
  FilterOperator,
  FilterValueSourceType,
} from "@/lib/registry/components/v2-aggregation-widget/types";

// ─── 상수 ───

const OPERATOR_LABELS: Record<FilterOperator, string> = {
  eq: "같음 (=)",
  neq: "같지 않음 (!=)",
  gt: "보다 큼 (>)",
  gte: "크거나 같음 (>=)",
  lt: "보다 작음 (<)",
  lte: "작거나 같음 (<=)",
  like: "포함",
  in: "목록에 포함",
  isNull: "NULL",
  isNotNull: "NOT NULL",
};

const VALUE_SOURCE_LABELS: Record<FilterValueSourceType, string> = {
  static: "고정 값",
  formField: "폼 필드",
  selection: "선택된 행",
  urlParam: "URL 파라미터",
};

const SOURCE_CARDS = [
  { value: "table" as DataSourceType, icon: Database, title: "테이블", description: "DB에서 직접 조회" },
  { value: "component" as DataSourceType, icon: Link2, title: "컴포넌트", description: "다른 컴포넌트 연결" },
  { value: "selection" as DataSourceType, icon: MousePointer, title: "선택 데이터", description: "사용자 선택 행" },
] as const;

const AGGREGATION_TYPE_OPTIONS = [
  { value: "sum", label: "합계 (SUM)" },
  { value: "avg", label: "평균 (AVG)" },
  { value: "count", label: "개수 (COUNT)" },
  { value: "max", label: "최대 (MAX)" },
  { value: "min", label: "최소 (MIN)" },
] as const;

const FORMAT_OPTIONS = [
  { value: "number", label: "숫자" },
  { value: "currency", label: "통화" },
  { value: "percent", label: "퍼센트" },
] as const;

// ─── 공통 서브 컴포넌트 ───

function SectionHeader({ icon: Icon, title, description }: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  description?: string;
}) {
  return (
    <div className="space-y-1">
      <div className="flex items-center gap-2">
        <Icon className="h-4 w-4 text-muted-foreground" />
        <h3 className="text-sm font-semibold">{title}</h3>
      </div>
      {description && <p className="text-muted-foreground text-[10px]">{description}</p>}
    </div>
  );
}

function SwitchRow({ label, description, checked, onCheckedChange }: {
  label: string;
  description?: string;
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
}) {
  return (
    <div className="flex items-center justify-between py-1">
      <div className="space-y-0.5">
        <p className="text-sm">{label}</p>
        {description && <p className="text-[11px] text-muted-foreground">{description}</p>}
      </div>
      <Switch checked={checked} onCheckedChange={onCheckedChange} />
    </div>
  );
}

function LabeledRow({ label, children }: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <div className="flex items-center justify-between py-1">
      <p className="text-xs text-muted-foreground">{label}</p>
      {children}
    </div>
  );
}

// ─── 카테고리 값 콤보박스 ───

function CategoryValueCombobox({
  value,
  options,
  onChange,
  placeholder = "값 선택",
}: {
  value: string;
  options: Array<{ value: string; label: string }>;
  onChange: (value: string) => void;
  placeholder?: string;
}) {
  const [open, setOpen] = useState(false);
  const selectedOption = options.find((opt) => opt.value === value);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button variant="outline" role="combobox" aria-expanded={open} className="h-7 w-full justify-between text-xs font-normal">
          <span className="truncate">{selectedOption ? selectedOption.label : placeholder}</span>
          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0" align="start">
        <Command>
          <CommandInput placeholder="검색..." className="h-8 text-xs" />
          <CommandList>
            <CommandEmpty className="py-2 text-center text-xs">결과 없음</CommandEmpty>
            <CommandGroup>
              {options.map((opt, index) => (
                <CommandItem
                  key={`${opt.value}-${index}`}
                  value={`${opt.label} ${opt.value}`}
                  onSelect={() => { onChange(opt.value); setOpen(false); }}
                  className="cursor-pointer text-xs"
                >
                  <Check className={cn("mr-2 h-3 w-3", value === opt.value ? "opacity-100" : "opacity-0")} />
                  {opt.label}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

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

interface ColumnInfo {
  columnName: string;
  label?: string;
  dataType?: string;
  inputType?: string;
  webType?: string;
  categoryCode?: string;
}

interface V2AggregationWidgetConfigPanelProps {
  config: AggregationWidgetConfig;
  onChange: (config: Partial<AggregationWidgetConfig>) => void;
  screenTableName?: string;
  screenComponents?: Array<{
    id: string;
    componentType: string;
    label?: string;
    tableName?: string;
    columnName?: string;
  }>;
}

export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigPanelProps> = ({
  config,
  onChange,
  screenTableName,
  screenComponents = [],
}) => {
  // componentConfigChanged 이벤트 발행 래퍼
  const handleChange = useCallback((newConfig: Partial<AggregationWidgetConfig>) => {
    onChange(newConfig);
    if (typeof window !== "undefined") {
      window.dispatchEvent(
        new CustomEvent("componentConfigChanged", {
          detail: { config: { ...config, ...newConfig } },
        })
      );
    }
  }, [onChange, config]);

  // ─── 상태 ───
  const [columns, setColumns] = useState<ColumnInfo[]>([]);
  const [loadingColumns, setLoadingColumns] = useState(false);
  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
  const [categoryOptionsCache, setCategoryOptionsCache] = useState<Record<string, Array<{ value: string; label: string }>>>({});
  const [sourceComponentColumnsCache, setSourceComponentColumnsCache] = useState<Record<string, Array<{ columnName: string; label?: string }>>>({});

  // Collapsible 상태
  const [filterOpen, setFilterOpen] = useState(false);
  const [layoutOpen, setLayoutOpen] = useState(false);
  const [styleOpen, setStyleOpen] = useState(false);
  const [itemsOpen, setItemsOpen] = useState(true);
  const [expandedItemId, setExpandedItemId] = useState<string | null>(null);

  const dataSourceType = config.dataSourceType || "table";

  // 실제 사용할 테이블 이름
  const targetTableName = useMemo(() => {
    if (config.useCustomTable && config.customTableName) return config.customTableName;
    return config.tableName || screenTableName;
  }, [config.useCustomTable, config.customTableName, config.tableName, screenTableName]);

  // 연결 가능한 컴포넌트 (리피터, 테이블리스트)
  const selectableComponents = useMemo(() => {
    return screenComponents.filter((comp) =>
      comp.componentType === "table-list" ||
      comp.componentType === "v2-table-list" ||
      comp.componentType === "v2-repeater" ||
      comp.componentType === "repeat-container" ||
      comp.componentType === "v2-repeat-container"
    );
  }, [screenComponents]);

  // 폼 필드 컴포넌트
  const formFieldComponents = useMemo(() => {
    const excludeTypes = [
      "aggregation", "widget", "button", "label", "display", "table-list",
      "repeat", "container", "layout", "section", "card", "tabs", "modal",
      "flow", "rack", "map", "chart", "image", "file", "media",
    ];
    return screenComponents
      .filter((comp) => {
        const type = comp.componentType?.toLowerCase() || "";
        if (excludeTypes.some((ex) => type.includes(ex))) return false;
        const isInput = type.includes("input") || type.includes("select") || type.includes("date") ||
          type.includes("checkbox") || type.includes("radio") || type.includes("textarea") ||
          type.includes("number") || type === "v2-input" || type === "v2-select" ||
          type === "v2-date" || type === "v2-hierarchy";
        return isInput || !!comp.columnName;
      })
      .map((comp) => ({
        id: comp.id,
        label: comp.label || comp.columnName || comp.id,
        columnName: comp.columnName || comp.id,
        componentType: comp.componentType,
      }));
  }, [screenComponents]);

  // 숫자형 컬럼만
  const numericColumns = useMemo(() => {
    return columns.filter((col) => {
      const inputType = (col.inputType || col.webType || "").toLowerCase();
      return inputType === "number" || inputType === "decimal" || inputType === "integer" ||
        inputType === "float" || inputType === "currency" || inputType === "percent";
    });
  }, [columns]);

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

  // 화면 테이블명 자동 설정
  useEffect(() => {
    if (screenTableName && !config.tableName && !config.customTableName) {
      handleChange({ tableName: screenTableName });
    }
  }, [screenTableName, config.tableName, config.customTableName, handleChange]);

  // ─── 컬럼 로드 ───
  useEffect(() => {
    const loadColumns = async () => {
      if (!targetTableName) { setColumns([]); return; }
      setLoadingColumns(true);
      try {
        const result = await tableManagementApi.getColumnList(targetTableName);
        if (result.success && result.data?.columns) {
          const mapped = result.data.columns.map((col: any) => ({
            columnName: col.columnName || col.column_name,
            label: col.displayName || col.columnLabel || col.column_label || col.label || col.columnName || col.column_name,
            dataType: col.dataType || col.data_type,
            inputType: col.inputType || col.input_type,
            webType: col.webType || col.web_type,
            categoryCode: col.categoryCode || col.category_code,
          }));
          setColumns(mapped);
          const categoryCols = mapped.filter(
            (c: ColumnInfo) => c.inputType === "category" || c.webType === "category"
          );
          if (categoryCols.length > 0) loadCategoryOptions(categoryCols);
        } else {
          setColumns([]);
        }
      } catch (err) {
        console.error("컬럼 로드 실패:", err);
        setColumns([]);
      } finally {
        setLoadingColumns(false);
      }
    };
    loadColumns();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [targetTableName]);

  // 소스 컴포넌트 컬럼 로드
  const loadSourceComponentColumns = useCallback(async (componentId: string) => {
    if (sourceComponentColumnsCache[componentId]) return;
    const sourceComp = screenComponents.find((c) => c.id === componentId);
    if (!sourceComp?.tableName) return;
    try {
      const response = await tableManagementApi.getColumnList(sourceComp.tableName);
      const rawCols = response.data?.columns || (Array.isArray(response.data) ? response.data : []);
      const cols = rawCols.map((col: any) => ({
        columnName: col.column_name || col.columnName,
        label: col.column_label || col.columnLabel || col.display_name || col.column_name || col.columnName,
      }));
      setSourceComponentColumnsCache((prev) => ({ ...prev, [componentId]: cols }));
    } catch (err) {
      console.error("소스 컴포넌트 컬럼 로드 실패:", err);
    }
  }, [sourceComponentColumnsCache, screenComponents]);

  // 기존 필터의 소스 컴포넌트 컬럼 미리 로드
  useEffect(() => {
    (config.filters || []).forEach((filter) => {
      if (filter.valueSourceType === "selection" && filter.sourceComponentId) {
        loadSourceComponentColumns(filter.sourceComponentId);
      }
    });
  }, [config.filters, loadSourceComponentColumns]);

  // 카테고리 옵션 로드
  const loadCategoryOptions = useCallback(async (categoryCols: Array<{ columnName: string; categoryCode?: string }>) => {
    if (!targetTableName) return;
    const newCache: Record<string, Array<{ value: string; label: string }>> = { ...categoryOptionsCache };
    for (const col of categoryCols) {
      const cacheKey = `${targetTableName}_${col.columnName}`;
      if (newCache[cacheKey]) continue;
      try {
        const result = await getCategoryValues(targetTableName, col.columnName, false);
        if (result.success && "data" in result && Array.isArray(result.data)) {
          const seenCodes = new Set<string>();
          const uniqueOptions: Array<{ value: string; label: string }> = [];
          for (const item of result.data) {
            const itemAny = item as any;
            const code = item.valueCode || itemAny.code || itemAny.value || itemAny.id;
            if (!seenCodes.has(code)) {
              seenCodes.add(code);
              uniqueOptions.push({
                value: code,
                label: item.valueLabel || itemAny.valueName || itemAny.name || itemAny.label || itemAny.displayName || code,
              });
            }
          }
          newCache[cacheKey] = uniqueOptions;
        } else {
          newCache[cacheKey] = [];
        }
      } catch {
        newCache[cacheKey] = [];
      }
    }
    setCategoryOptionsCache(newCache);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [targetTableName]);

  const getCategoryOptionsForColumn = useCallback((columnName: string) => {
    if (!targetTableName) return [];
    return categoryOptionsCache[`${targetTableName}_${columnName}`] || [];
  }, [targetTableName, categoryOptionsCache]);

  const isCategoryColumn = useCallback((columnName: string) => {
    const col = columns.find((c) => c.columnName === columnName);
    return col?.inputType === "category" || col?.webType === "category";
  }, [columns]);

  // ─── 집계 항목 CRUD ───
  const addItem = useCallback(() => {
    const newItem: AggregationItem = {
      id: `agg-${Date.now()}`,
      columnName: "",
      columnLabel: "",
      type: "sum",
      format: "number",
      decimalPlaces: 0,
    };
    handleChange({ items: [...(config.items || []), newItem] });
  }, [config.items, handleChange]);

  const removeItem = useCallback((id: string) => {
    handleChange({ items: (config.items || []).filter((item) => item.id !== id) });
  }, [config.items, handleChange]);

  const updateItem = useCallback((id: string, updates: Partial<AggregationItem>) => {
    handleChange({
      items: (config.items || []).map((item) => (item.id === id ? { ...item, ...updates } : item)),
    });
  }, [config.items, handleChange]);

  // ─── 필터 CRUD ───
  const addFilter = useCallback(() => {
    const newFilter: FilterCondition = {
      id: `filter-${Date.now()}`,
      columnName: "",
      operator: "eq",
      valueSourceType: "static",
      staticValue: "",
      enabled: true,
    };
    handleChange({ filters: [...(config.filters || []), newFilter] });
  }, [config.filters, handleChange]);

  const removeFilter = useCallback((id: string) => {
    handleChange({ filters: (config.filters || []).filter((f) => f.id !== id) });
  }, [config.filters, handleChange]);

  const updateFilter = useCallback((id: string, updates: Partial<FilterCondition>) => {
    handleChange({
      filters: (config.filters || []).map((f) => (f.id === id ? { ...f, ...updates } : f)),
    });
  }, [config.filters, handleChange]);

  // ─── 테이블 변경 핸들러 ───
  const handleTableSelect = useCallback((tableName: string, isCustom: boolean) => {
    handleChange({
      useCustomTable: isCustom,
      customTableName: isCustom ? tableName : undefined,
      tableName,
      items: [],
      filters: [],
    });
    setTableComboboxOpen(false);
  }, [handleChange]);

  const needsValue = (op: string) => op !== "isNull" && op !== "isNotNull";

  // ─── 렌더링 ───
  return (
    <div className="space-y-4">
      {/* ═══════════════════════════════════════ */}
      {/* 1단계: 데이터 소스 (카드 선택)           */}
      {/* ═══════════════════════════════════════ */}
      <div className="space-y-3">
        <SectionHeader icon={Database} title="데이터 소스" description="집계할 데이터를 가져올 방식을 선택하세요" />
        <Separator />

        <div className="grid grid-cols-3 gap-2">
          {SOURCE_CARDS.map((card) => {
            const Icon = card.icon;
            const isSelected = dataSourceType === card.value;
            return (
              <button
                key={card.value}
                type="button"
                onClick={() => {
                  const updates: Partial<AggregationWidgetConfig> = { dataSourceType: card.value };
                  if (card.value === "component" || card.value === "selection") {
                    updates.tableName = screenTableName || config.tableName;
                    updates.useCustomTable = false;
                  }
                  handleChange(updates);
                }}
                className={cn(
                  "flex min-h-[70px] flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all",
                  isSelected
                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
                    : "border-border hover:border-primary/50 hover:bg-muted/50"
                )}
              >
                <Icon className="mb-1 h-4 w-4 text-primary" />
                <span className="text-xs font-medium leading-tight">{card.title}</span>
                <span className="mt-0.5 text-[10px] leading-tight text-muted-foreground">{card.description}</span>
              </button>
            );
          })}
        </div>

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

            <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={tableComboboxOpen}
                  className="h-8 w-full justify-between text-xs"
                  disabled={loadingTables}
                >
                  {loadingTables ? "로딩 중..." : "테이블 변경..."}
                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                <Command>
                  <CommandInput placeholder="테이블 검색..." className="text-xs" />
                  <CommandList>
                    <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
                    {screenTableName && (
                      <CommandGroup heading="기본 (화면 테이블)">
                        <CommandItem
                          value={screenTableName}
                          onSelect={() => handleTableSelect(screenTableName, false)}
                          className="cursor-pointer text-xs"
                        >
                          <Check className={cn("mr-2 h-3 w-3", !config.useCustomTable ? "opacity-100" : "opacity-0")} />
                          <Database className="mr-2 h-3 w-3 text-primary" />
                          {screenTableName}
                        </CommandItem>
                      </CommandGroup>
                    )}
                    <CommandGroup heading="전체 테이블">
                      {availableTables
                        .filter((t) => t.tableName !== screenTableName)
                        .map((table) => (
                          <CommandItem
                            key={table.tableName}
                            value={`${table.tableName} ${table.displayName || ""}`}
                            onSelect={() => handleTableSelect(table.tableName, true)}
                            className="cursor-pointer text-xs"
                          >
                            <Check className={cn("mr-2 h-3 w-3", config.customTableName === table.tableName ? "opacity-100" : "opacity-0")} />
                            <Table2 className="mr-2 h-3 w-3 text-muted-foreground" />
                            {table.displayName || table.tableName}
                          </CommandItem>
                        ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
          </div>
        )}

        {/* ─── component 모드: 컴포넌트 연결 ─── */}
        {dataSourceType === "component" && (
          <div className="space-y-2">
            <span className="text-xs font-medium">연결할 컴포넌트</span>
            <Select
              value={config.dataSourceComponentId || ""}
              onValueChange={(value) => handleChange({ dataSourceComponentId: value })}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue placeholder="컴포넌트 선택..." />
              </SelectTrigger>
              <SelectContent>
                {selectableComponents.length === 0 ? (
                  <div className="p-2 text-center text-xs text-muted-foreground">
                    연결 가능한 컴포넌트가 없습니다
                    <br /><span className="text-[10px]">(리피터 또는 테이블리스트 필요)</span>
                  </div>
                ) : (
                  selectableComponents.map((comp) => (
                    <SelectItem key={comp.id} value={comp.id}>
                      {comp.label || comp.id} ({comp.componentType})
                    </SelectItem>
                  ))
                )}
              </SelectContent>
            </Select>
            <p className="text-[10px] text-muted-foreground">리피터 또는 테이블리스트의 데이터를 집계합니다</p>
          </div>
        )}

        {/* ─── selection 모드: 안내 ─── */}
        {dataSourceType === "selection" && (
          <div className="space-y-2">
            <div className="rounded-md border bg-primary/5 p-3 text-xs">
              <p className="mb-1 font-medium text-primary">선택된 행 집계</p>
              <p className="text-[10px] text-muted-foreground">
                화면에서 사용자가 선택(체크)한 행들만 집계합니다.
              </p>
            </div>
            <div className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
              <Database className="h-4 w-4 text-primary" />
              <span className="text-xs font-medium">
                {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
              </span>
            </div>
          </div>
        )}
      </div>

      {/* ═══════════════════════════════════════ */}
      {/* 2단계: 집계 항목                         */}
      {/* ═══════════════════════════════════════ */}
      <Collapsible open={itemsOpen} onOpenChange={setItemsOpen}>
        <CollapsibleTrigger asChild>
          <button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
            <div className="flex items-center gap-2">
              <Calculator className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-medium">집계 항목</span>
              <Badge variant="secondary" className="text-[10px] h-5">{(config.items || []).length}개</Badge>
            </div>
            <div className="flex items-center gap-1">
              <Button type="button" variant="outline" size="sm" onClick={(e) => { e.stopPropagation(); addItem(); }} className="h-6 shrink-0 px-2 text-xs">
                <Plus className="mr-1 h-3 w-3" />추가
              </Button>
              <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", itemsOpen && "rotate-180")} />
            </div>
          </button>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
            {(config.items || []).length === 0 ? (
              <div className="rounded-lg border-2 border-dashed py-6 text-center">
                <Calculator className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
                <p className="text-sm text-muted-foreground">아직 집계 항목이 없어요</p>
                <p className="text-xs text-muted-foreground">위의 추가 버튼으로 항목을 만들어보세요</p>
              </div>
            ) : (
              <div className="max-h-[300px] space-y-1.5 overflow-y-auto">
                {(config.items || []).map((item, index) => (
                  <div key={item.id} className="rounded-md border">
                    <button
                      type="button"
                      onClick={() => setExpandedItemId(expandedItemId === item.id ? null : item.id)}
                      className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
                    >
                      <ChevronRight className={cn("h-3 w-3 text-muted-foreground transition-transform shrink-0", expandedItemId === item.id && "rotate-90")} />
                      <span className="text-[10px] text-muted-foreground font-medium shrink-0">#{index + 1}</span>
                      <span className="text-xs font-medium truncate flex-1 min-w-0">{item.columnLabel || item.columnName || "미설정"}</span>
                      <Badge variant="outline" className="text-[9px] h-4 shrink-0">{AGGREGATION_TYPE_OPTIONS.find((o) => o.value === item.type)?.label || item.type}</Badge>
                      <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); removeItem(item.id); }} className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0">
                        <Trash2 className="h-3 w-3" />
                      </Button>
                    </button>
                    {expandedItemId === item.id && (
                      <div className="grid grid-cols-2 gap-2 border-t px-2.5 py-2">
                        {/* 컬럼 */}
                        <div className="space-y-1">
                          <span className="text-[10px] text-muted-foreground">컬럼</span>
                          <Select
                            value={item.columnName}
                            onValueChange={(value) => {
                              const col = columns.find((c) => c.columnName === value);
                              updateItem(item.id, { columnName: value, columnLabel: col?.label || value });
                            }}
                            disabled={loadingColumns || columns.length === 0}
                          >
                            <SelectTrigger className="h-7 text-xs">
                              <SelectValue placeholder={loadingColumns ? "로딩 중..." : columns.length === 0 ? "테이블을 선택하세요" : "컬럼 선택"} />
                            </SelectTrigger>
                            <SelectContent>
                              {(item.type === "count" ? columns : numericColumns).length === 0 ? (
                                <div className="p-2 text-center text-xs text-muted-foreground">
                                  {item.type === "count" ? "컬럼이 없습니다" : "숫자형 컬럼이 없습니다"}
                                </div>
                              ) : (
                                (item.type === "count" ? columns : numericColumns).map((col) => (
                                  <SelectItem key={col.columnName} value={col.columnName}>
                                    {col.label || col.columnName}
                                  </SelectItem>
                                ))
                              )}
                            </SelectContent>
                          </Select>
                        </div>

                        {/* 집계 타입 */}
                        <div className="space-y-1">
                          <span className="text-[10px] text-muted-foreground">집계 타입</span>
                          <Select
                            value={item.type}
                            onValueChange={(value) => updateItem(item.id, { type: value as AggregationType })}
                          >
                            <SelectTrigger className="h-7 text-xs">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              {AGGREGATION_TYPE_OPTIONS.map((opt) => (
                                <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>

                        {/* 표시 라벨 */}
                        <div className="space-y-1">
                          <span className="text-[10px] text-muted-foreground">표시 라벨</span>
                          <Input
                            value={item.columnLabel || ""}
                            onChange={(e) => updateItem(item.id, { columnLabel: e.target.value })}
                            placeholder="표시될 라벨"
                            className="h-7 text-xs"
                          />
                        </div>

                        {/* 표시 형식 */}
                        <div className="space-y-1">
                          <span className="text-[10px] text-muted-foreground">표시 형식</span>
                          <Select
                            value={item.format || "number"}
                            onValueChange={(value) => updateItem(item.id, { format: value as "number" | "currency" | "percent" })}
                          >
                            <SelectTrigger className="h-7 text-xs">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              {FORMAT_OPTIONS.map((opt) => (
                                <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>

                        {/* 접두사 */}
                        <div className="space-y-1">
                          <span className="text-[10px] text-muted-foreground">접두사</span>
                          <Input
                            value={item.prefix || ""}
                            onChange={(e) => updateItem(item.id, { prefix: e.target.value })}
                            placeholder="예: ₩"
                            className="h-7 text-xs"
                          />
                        </div>

                        {/* 접미사 */}
                        <div className="space-y-1">
                          <span className="text-[10px] text-muted-foreground">접미사</span>
                          <Input
                            value={item.suffix || ""}
                            onChange={(e) => updateItem(item.id, { suffix: e.target.value })}
                            placeholder="예: 원, 개"
                            className="h-7 text-xs"
                          />
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        </CollapsibleContent>
      </Collapsible>

      {/* ═══════════════════════════════════════ */}
      {/* 3단계: 필터 조건 (접힘)                  */}
      {/* ═══════════════════════════════════════ */}
      {(dataSourceType === "table" || dataSourceType === "selection") && (
        <Collapsible open={filterOpen} onOpenChange={setFilterOpen}>
          <CollapsibleTrigger asChild>
            <button
              type="button"
              className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
            >
              <div className="flex items-center gap-2">
                <Filter className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm font-medium">필터 조건</span>
                {(config.filters || []).length > 0 && (
                  <Badge variant="secondary" className="text-[10px] h-5">
                    {(config.filters || []).length}
                  </Badge>
                )}
              </div>
              <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", filterOpen && "rotate-180")} />
            </button>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
              <div className="flex items-center justify-between">
                <p className="text-[10px] text-muted-foreground">집계 대상을 필터링합니다</p>
                <Button type="button" variant="outline" size="sm" onClick={addFilter} className="h-6 px-2 text-xs">
                  <Plus className="mr-1 h-3 w-3" />
                  추가
                </Button>
              </div>

              {/* 필터 결합 방식 */}
              {(config.filters || []).length > 1 && (
                <LabeledRow label="조건 결합">
                  <Select
                    value={config.filterLogic || "AND"}
                    onValueChange={(value) => handleChange({ filterLogic: value as "AND" | "OR" })}
                  >
                    <SelectTrigger className="h-7 w-[140px] text-xs">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="AND">AND (모두 만족)</SelectItem>
                      <SelectItem value="OR">OR (하나만 만족)</SelectItem>
                    </SelectContent>
                  </Select>
                </LabeledRow>
              )}

              {(config.filters || []).length === 0 ? (
                <div className="rounded-lg border-2 border-dashed py-4 text-center">
                  <Filter className="mx-auto mb-1 h-6 w-6 text-muted-foreground opacity-30" />
                  <p className="text-xs text-muted-foreground">필터 없음 - 전체 데이터를 집계합니다</p>
                </div>
              ) : (
                <div className="max-h-[250px] space-y-2 overflow-y-auto">
                  {(config.filters || []).map((filter, index) => (
                    <div
                      key={filter.id}
                      className={cn("space-y-2 rounded-md border p-3", !filter.enabled && "opacity-50")}
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Checkbox
                            checked={filter.enabled}
                            onCheckedChange={(checked) => updateFilter(filter.id, { enabled: checked as boolean })}
                            className="h-3.5 w-3.5"
                          />
                          <span className="text-xs font-medium">필터 {index + 1}</span>
                        </div>
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => removeFilter(filter.id)}
                          className="h-5 w-5 p-0 text-destructive hover:text-destructive"
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>

                      <div className="grid grid-cols-2 gap-2">
                        {/* 컬럼 */}
                        <div className="space-y-1">
                          <span className="text-[10px] text-muted-foreground">컬럼</span>
                          <Select
                            value={filter.columnName}
                            onValueChange={(value) => {
                              updateFilter(filter.id, { columnName: value, staticValue: "" });
                              const col = columns.find((c) => c.columnName === value);
                              if (col && (col.inputType === "category" || col.webType === "category")) {
                                loadCategoryOptions([col]);
                              }
                            }}
                            disabled={loadingColumns}
                          >
                            <SelectTrigger className="h-7 text-xs">
                              <SelectValue placeholder="컬럼 선택" />
                            </SelectTrigger>
                            <SelectContent>
                              {columns.map((col) => (
                                <SelectItem key={col.columnName} value={col.columnName}>
                                  {col.label || col.columnName}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>

                        {/* 연산자 */}
                        <div className="space-y-1">
                          <span className="text-[10px] text-muted-foreground">연산자</span>
                          <Select
                            value={filter.operator}
                            onValueChange={(value) => updateFilter(filter.id, { operator: value as FilterOperator })}
                          >
                            <SelectTrigger className="h-7 text-xs">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              {Object.entries(OPERATOR_LABELS).map(([key, label]) => (
                                <SelectItem key={key} value={key}>{label}</SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>

                        {/* 값 소스 타입 + 값 입력 */}
                        {needsValue(filter.operator) && (
                          <>
                            <div className="space-y-1">
                              <span className="text-[10px] text-muted-foreground">값 소스</span>
                              <Select
                                value={filter.valueSourceType}
                                onValueChange={(value) => updateFilter(filter.id, { valueSourceType: value as FilterValueSourceType })}
                              >
                                <SelectTrigger className="h-7 text-xs">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  {Object.entries(VALUE_SOURCE_LABELS).map(([key, label]) => (
                                    <SelectItem key={key} value={key}>{label}</SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            </div>

                            <div className="space-y-1">
                              <span className="text-[10px] text-muted-foreground">
                                {filter.valueSourceType === "static" && "값"}
                                {filter.valueSourceType === "formField" && "폼 필드명"}
                                {filter.valueSourceType === "selection" && "소스 컬럼"}
                                {filter.valueSourceType === "urlParam" && "파라미터명"}
                              </span>

                              {filter.valueSourceType === "static" && (
                                isCategoryColumn(filter.columnName) ? (
                                  <CategoryValueCombobox
                                    value={String(filter.staticValue || "")}
                                    options={getCategoryOptionsForColumn(filter.columnName)}
                                    onChange={(value) => updateFilter(filter.id, { staticValue: value })}
                                    placeholder="값 선택"
                                  />
                                ) : (
                                  <Input
                                    value={String(filter.staticValue || "")}
                                    onChange={(e) => updateFilter(filter.id, { staticValue: e.target.value })}
                                    placeholder="값 입력"
                                    className="h-7 text-xs"
                                  />
                                )
                              )}

                              {filter.valueSourceType === "formField" && (
                                formFieldComponents.length > 0 ? (
                                  <Select
                                    value={filter.formFieldName || ""}
                                    onValueChange={(value) => updateFilter(filter.id, { formFieldName: value })}
                                  >
                                    <SelectTrigger className="h-7 text-xs">
                                      <SelectValue placeholder="폼 필드 선택" />
                                    </SelectTrigger>
                                    <SelectContent>
                                      {formFieldComponents.map((field) => (
                                        <SelectItem key={field.id} value={field.columnName}>
                                          {field.label}
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                ) : (
                                  <div className="flex h-7 items-center rounded-md border bg-muted/50 px-2 text-xs text-muted-foreground">
                                    배치된 입력 필드가 없습니다
                                  </div>
                                )
                              )}

                              {filter.valueSourceType === "urlParam" && (
                                <Input
                                  value={filter.urlParamName || ""}
                                  onChange={(e) => updateFilter(filter.id, { urlParamName: e.target.value })}
                                  placeholder="파라미터명"
                                  className="h-7 text-xs"
                                />
                              )}
                            </div>

                            {/* selection 모드: 소스 컴포넌트 + 소스 컬럼 (2행 사용) */}
                            {filter.valueSourceType === "selection" && (
                              <>
                                <div className="space-y-1">
                                  <span className="text-[10px] text-muted-foreground">소스 컴포넌트</span>
                                  <Select
                                    value={filter.sourceComponentId || ""}
                                    onValueChange={(value) => {
                                      updateFilter(filter.id, { sourceComponentId: value, sourceColumnName: "" });
                                      if (value) loadSourceComponentColumns(value);
                                    }}
                                  >
                                    <SelectTrigger className="h-7 text-xs">
                                      <SelectValue placeholder="컴포넌트 선택" />
                                    </SelectTrigger>
                                    <SelectContent>
                                      {selectableComponents.map((comp) => (
                                        <SelectItem key={comp.id} value={comp.id}>
                                          {comp.label || comp.id} ({comp.tableName || "테이블 미설정"})
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                </div>
                                {filter.sourceComponentId && (
                                  <div className="space-y-1">
                                    <span className="text-[10px] text-muted-foreground">소스 컬럼</span>
                                    <Select
                                      value={filter.sourceColumnName || ""}
                                      onValueChange={(value) => updateFilter(filter.id, { sourceColumnName: value })}
                                    >
                                      <SelectTrigger className="h-7 text-xs">
                                        <SelectValue placeholder="컬럼 선택" />
                                      </SelectTrigger>
                                      <SelectContent>
                                        {(sourceComponentColumnsCache[filter.sourceComponentId] || []).map((col) => (
                                          <SelectItem key={col.columnName} value={col.columnName}>
                                            {col.label || col.columnName}
                                          </SelectItem>
                                        ))}
                                      </SelectContent>
                                    </Select>
                                  </div>
                                )}
                              </>
                            )}
                          </>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </CollapsibleContent>
        </Collapsible>
      )}

      {/* ═══════════════════════════════════════ */}
      {/* 4단계: 레이아웃 설정 (접힘)               */}
      {/* ═══════════════════════════════════════ */}
      <Collapsible open={layoutOpen} onOpenChange={setLayoutOpen}>
        <CollapsibleTrigger asChild>
          <button
            type="button"
            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
          >
            <div className="flex items-center gap-2">
              <LayoutGrid className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-medium">레이아웃</span>
              <Badge variant="secondary" className="text-[10px] h-5">{config.layout === "vertical" ? "세로" : "가로"}</Badge>
            </div>
            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", layoutOpen && "rotate-180")} />
          </button>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
            <LabeledRow label="배치 방향">
              <Select
                value={config.layout || "horizontal"}
                onValueChange={(value) => handleChange({ layout: value as "horizontal" | "vertical" })}
              >
                <SelectTrigger className="h-7 w-[120px] text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="horizontal">가로 배치</SelectItem>
                  <SelectItem value="vertical">세로 배치</SelectItem>
                </SelectContent>
              </Select>
            </LabeledRow>

            <LabeledRow label="항목 간격">
              <Input
                value={config.gap || "16px"}
                onChange={(e) => handleChange({ gap: e.target.value })}
                placeholder="16px"
                className="h-7 w-[100px] text-xs"
              />
            </LabeledRow>

            <SwitchRow
              label="라벨 표시"
              description="각 항목의 라벨을 표시합니다"
              checked={config.showLabels ?? true}
              onCheckedChange={(checked) => handleChange({ showLabels: checked })}
            />

            <SwitchRow
              label="아이콘 표시"
              description="집계 타입 아이콘을 표시합니다"
              checked={config.showIcons ?? true}
              onCheckedChange={(checked) => handleChange({ showIcons: checked })}
            />
          </div>
        </CollapsibleContent>
      </Collapsible>

      {/* ═══════════════════════════════════════ */}
      {/* 5단계: 스타일 설정 (접힘)                 */}
      {/* ═══════════════════════════════════════ */}
      <Collapsible open={styleOpen} onOpenChange={setStyleOpen}>
        <CollapsibleTrigger asChild>
          <button
            type="button"
            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
          >
            <div className="flex items-center gap-2">
              <Paintbrush className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-medium">스타일</span>
            </div>
            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", styleOpen && "rotate-180")} />
          </button>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
            <div className="grid grid-cols-2 gap-2">
              <div className="space-y-1">
                <span className="text-[10px] text-muted-foreground">배경색</span>
                <Input
                  type="color"
                  value={config.backgroundColor || "#f8fafc"}
                  onChange={(e) => handleChange({ backgroundColor: e.target.value })}
                  className="h-8"
                />
              </div>
              <div className="space-y-1">
                <span className="text-[10px] text-muted-foreground">모서리 둥글기</span>
                <Input
                  value={config.borderRadius || "6px"}
                  onChange={(e) => handleChange({ borderRadius: e.target.value })}
                  placeholder="6px"
                  className="h-7 text-xs"
                />
              </div>
              <div className="space-y-1">
                <span className="text-[10px] text-muted-foreground">라벨 색상</span>
                <Input
                  type="color"
                  value={config.labelColor || "#64748b"}
                  onChange={(e) => handleChange({ labelColor: e.target.value })}
                  className="h-8"
                />
              </div>
              <div className="space-y-1">
                <span className="text-[10px] text-muted-foreground">값 색상</span>
                <Input
                  type="color"
                  value={config.valueColor || "#0f172a"}
                  onChange={(e) => handleChange({ valueColor: e.target.value })}
                  className="h-8"
                />
              </div>
            </div>
          </div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
};

V2AggregationWidgetConfigPanel.displayName = "V2AggregationWidgetConfigPanel";

export default V2AggregationWidgetConfigPanel;