"use client";

import React, { useState, useEffect, useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Badge } from "@/components/ui/badge";
import { Plus, Trash2, GripVertical, Database, Table2, ChevronsUpDown, Check, Filter, Link2, MousePointer } from "lucide-react";
import { cn } from "@/lib/utils";
import { AggregationWidgetConfig, AggregationItem, AggregationType, DataSourceType, FilterCondition, FilterOperator, FilterValueSourceType } from "./types";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { tableTypeApi } from "@/lib/api/screen";
import { getCategoryValues } from "@/lib/api/tableCategoryValue";

interface AggregationWidgetConfigPanelProps {
  config: AggregationWidgetConfig;
  onChange: (config: Partial<AggregationWidgetConfig>) => void;
  screenTableName?: string;
  // 화면 내 컴포넌트 목록 (컴포넌트 연결용)
  screenComponents?: Array<{ id: string; componentType: string; label?: string; tableName?: string }>;
}

/**
 * 카테고리 값 콤보박스 컴포넌트
 */
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-xs text-center">
              결과 없음
            </CommandEmpty>
            <CommandGroup>
              {options.map((opt, index) => (
                <CommandItem
                  key={`${opt.value}-${index}`}
                  value={`${opt.label} ${opt.value}`}
                  onSelect={() => {
                    onChange(opt.value);
                    setOpen(false);
                  }}
                  className="text-xs cursor-pointer"
                >
                  <Check
                    className={cn(
                      "mr-2 h-3 w-3",
                      value === opt.value ? "opacity-100" : "opacity-0"
                    )}
                  />
                  {opt.label}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

/**
 * 집계 위젯 설정 패널
 */
// 연산자 라벨
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 파라미터",
};

export function AggregationWidgetConfigPanel({
  config,
  onChange,
  screenTableName,
  screenComponents = [],
}: AggregationWidgetConfigPanelProps) {
  const [columns, setColumns] = useState<Array<{ columnName: string; label?: string; dataType?: string; inputType?: string; webType?: string; categoryCode?: string }>>([]);
  const [loadingColumns, setLoadingColumns] = useState(false);
  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
  
  // 카테고리 옵션 캐시 (categoryCode -> options)
  const [categoryOptionsCache, setCategoryOptionsCache] = useState<Record<string, Array<{ value: string; label: string }>>>({});

  // 소스 컴포넌트별 컬럼 캐시 (componentId -> columns)
  const [sourceComponentColumnsCache, setSourceComponentColumnsCache] = useState<Record<string, Array<{ columnName: string; label?: string }>>>({});

  // 데이터 소스 타입 (기본값: table)
  const dataSourceType = config.dataSourceType || "table";

  // 선택 가능한 데이터 소스 컴포넌트 (테이블 리스트 등)
  const selectableComponents = useMemo(() => {
    console.log("[AggregationWidget] screenComponents:", screenComponents);
    const filtered = screenComponents.filter(comp => 
      comp.componentType === "table-list" || 
      comp.componentType === "v2-table-list" ||
      comp.componentType === "unified-repeater" ||
      comp.componentType === "v2-unified-repeater" ||
      comp.componentType === "repeat-container" ||
      comp.componentType === "v2-repeat-container"
    );
    console.log("[AggregationWidget] selectableComponents:", filtered);
    return filtered;
  }, [screenComponents]);

  // 소스 컴포넌트 컬럼 로드
  const loadSourceComponentColumns = async (componentId: string) => {
    // 이미 캐시에 있으면 스킵
    if (sourceComponentColumnsCache[componentId]) {
      return;
    }

    const sourceComp = screenComponents.find(c => c.id === componentId);
    if (!sourceComp?.tableName) {
      return;
    }

    try {
      const response = await tableManagementApi.getColumns(sourceComp.tableName);
      const cols = (response.data?.columns || response.data || []).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 (error) {
      console.error("소스 컴포넌트 컬럼 로드 실패:", error);
    }
  };

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

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

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

  // 기존 필터의 소스 컴포넌트 컬럼 미리 로드
  useEffect(() => {
    const filters = config.filters || [];
    filters.forEach((filter) => {
      if (filter.valueSourceType === "selection" && filter.sourceComponentId) {
        loadSourceComponentColumns(filter.sourceComponentId);
      }
    });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [config.filters, screenComponents]);

  // 테이블 컬럼 로드
  useEffect(() => {
    const loadColumns = async () => {
      if (!targetTableName) {
        setColumns([]);
        return;
      }

      setLoadingColumns(true);
      try {
        const result = await tableManagementApi.getColumnList(targetTableName);
        if (result.success && result.data?.columns) {
          const mappedColumns = 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(mappedColumns);
          
          // 카테고리 타입 컬럼의 옵션 로드
          const categoryColumns = mappedColumns.filter(
            (col: any) => col.inputType === "category" || col.webType === "category"
          );
          if (categoryColumns.length > 0) {
            loadCategoryOptions(categoryColumns);
          }
        } else {
          setColumns([]);
        }
      } catch (error) {
        console.error("컬럼 로드 실패:", error);
        setColumns([]);
      } finally {
        setLoadingColumns(false);
      }
    };

    loadColumns();
  }, [targetTableName]);

  // 카테고리 옵션 로드 함수
  const loadCategoryOptions = async (categoryColumns: Array<{ columnName: string; categoryCode?: string }>) => {
    if (!targetTableName) return;
    
    const newCache: Record<string, Array<{ value: string; label: string }>> = { ...categoryOptionsCache };
    
    for (const col of categoryColumns) {
      const cacheKey = `${targetTableName}_${col.columnName}`;
      if (newCache[cacheKey]) continue;
      
      try {
        // 카테고리 API 호출
        const result = await getCategoryValues(targetTableName, col.columnName, false);
        if (result.success && Array.isArray(result.data)) {
          // 중복 제거 (valueCode 기준)
          const seenCodes = new Set<string>();
          const uniqueOptions: Array<{ value: string; label: string }> = [];
          
          for (const item of result.data) {
            const code = item.valueCode || item.code || item.value || item.id;
            if (!seenCodes.has(code)) {
              seenCodes.add(code);
              uniqueOptions.push({
                value: code,
                // valueLabel이 실제 표시명
                label: item.valueLabel || item.valueName || item.name || item.label || item.displayName || code,
              });
            }
          }
          
          newCache[cacheKey] = uniqueOptions;
        } else {
          newCache[cacheKey] = [];
        }
      } catch (error) {
        console.error(`카테고리 옵션 로드 실패 (${col.columnName}):`, error);
        // 실패해도 빈 배열로 캐시
        newCache[cacheKey] = [];
      }
    }
    
    setCategoryOptionsCache(newCache);
  };

  // 컬럼의 카테고리 옵션 가져오기
  const getCategoryOptionsForColumn = (columnName: string): Array<{ value: string; label: string }> => {
    if (!targetTableName) return [];
    const cacheKey = `${targetTableName}_${columnName}`;
    return categoryOptionsCache[cacheKey] || [];
  };

  // 컬럼이 카테고리 타입인지 확인
  const isCategoryColumn = (columnName: string): boolean => {
    const column = columns.find((c) => c.columnName === columnName);
    return column?.inputType === "category" || column?.webType === "category";
  };

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

  // 집계 항목 삭제
  const removeItem = (id: string) => {
    onChange({
      items: (config.items || []).filter((item) => item.id !== id),
    });
  };

  // 집계 항목 업데이트
  const updateItem = (id: string, updates: Partial<AggregationItem>) => {
    onChange({
      items: (config.items || []).map((item) =>
        item.id === id ? { ...item, ...updates } : item
      ),
    });
  };

  // 숫자형 컬럼만 필터링 (count 제외) - 입력 타입(inputType/webType)으로만 확인
  const numericColumns = columns.filter((col) => {
    const inputType = (col.inputType || col.webType || "")?.toLowerCase();
    
    return (
      inputType === "number" ||
      inputType === "decimal" ||
      inputType === "integer" ||
      inputType === "float" ||
      inputType === "currency" ||
      inputType === "percent"
    );
  });

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

  // 필터 삭제
  const removeFilter = (id: string) => {
    onChange({
      filters: (config.filters || []).filter((f) => f.id !== id),
    });
  };

  // 필터 업데이트
  const updateFilter = (id: string, updates: Partial<FilterCondition>) => {
    onChange({
      filters: (config.filters || []).map((f) =>
        f.id === id ? { ...f, ...updates } : f
      ),
    });
  };

  // 연결 가능한 컴포넌트 (리피터, 테이블리스트)
  const linkableComponents = screenComponents.filter(
    (c) => c.componentType === "v2-unified-repeater" || 
           c.componentType === "v2-table-list" ||
           c.componentType === "unified-repeater" ||
           c.componentType === "table-list"
  );

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">집계 위젯 설정</div>

      {/* 데이터 소스 타입 선택 */}
      <div className="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">데이터 소스</h3>
          <p className="text-muted-foreground text-[10px]">집계할 데이터를 가져올 방식을 선택합니다</p>
        </div>
        <hr className="border-border" />

        <div className="grid grid-cols-3 gap-2">
          <Button
            variant={dataSourceType === "table" ? "default" : "outline"}
            size="sm"
            className="h-auto flex-col gap-1 py-2 text-xs"
            onClick={() => onChange({ dataSourceType: "table" })}
          >
            <Database className="h-4 w-4" />
            <span>테이블</span>
          </Button>
          <Button
            variant={dataSourceType === "component" ? "default" : "outline"}
            size="sm"
            className="h-auto flex-col gap-1 py-2 text-xs"
            onClick={() => onChange({ dataSourceType: "component" })}
          >
            <Link2 className="h-4 w-4" />
            <span>컴포넌트</span>
          </Button>
          <Button
            variant={dataSourceType === "selection" ? "default" : "outline"}
            size="sm"
            className="h-auto flex-col gap-1 py-2 text-xs"
            onClick={() => onChange({ dataSourceType: "selection" })}
          >
            <MousePointer className="h-4 w-4" />
            <span>선택 데이터</span>
          </Button>
        </div>

        {/* 테이블 선택 (table 타입일 때) */}
        {dataSourceType === "table" && (
          <div className="space-y-2 mt-3">
            <Label className="text-xs">데이터 테이블</Label>
            
            {/* 현재 선택된 테이블 표시 */}
            <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
              <Database className="h-4 w-4 text-blue-500" />
              <div className="flex-1">
                <div className="text-xs font-medium">
                  {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
                </div>
                <div className="text-[10px] text-muted-foreground">
                  {config.useCustomTable ? "커스텀 테이블" : "화면 기본 테이블"}
                </div>
              </div>
            </div>

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

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

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

        {/* 컴포넌트 연결 (component 타입일 때) */}
        {dataSourceType === "component" && (
          <div className="space-y-2 mt-3">
            <Label className="text-xs">연결할 컴포넌트</Label>
            <Select
              value={config.dataSourceComponentId || ""}
              onValueChange={(value) => onChange({ dataSourceComponentId: value })}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue placeholder="컴포넌트 선택..." />
              </SelectTrigger>
              <SelectContent>
                {linkableComponents.length === 0 ? (
                  <div className="p-2 text-xs text-muted-foreground text-center">
                    연결 가능한 컴포넌트가 없습니다<br/>
                    <span className="text-[10px]">(리피터 또는 테이블리스트 필요)</span>
                  </div>
                ) : (
                  linkableComponents.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 mt-3">
            <div className="rounded-md border bg-blue-50 p-3 text-xs text-blue-700">
              <p className="font-medium mb-1">선택된 행 집계</p>
              <p className="text-[10px]">
                화면에서 사용자가 선택(체크)한 행들만 집계합니다.
                테이블리스트나 리피터에서 선택된 데이터가 자동으로 집계됩니다.
              </p>
            </div>
            
            {/* 테이블 선택 (어느 테이블의 선택 데이터인지) */}
            <Label className="text-xs">대상 테이블</Label>
            <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
              <Database className="h-4 w-4 text-blue-500" />
              <div className="flex-1">
                <div className="text-xs font-medium">
                  {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* 필터 조건 (table 또는 selection 타입일 때) */}
      {(dataSourceType === "table" || dataSourceType === "selection") && (
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-sm font-semibold flex items-center gap-1">
                <Filter className="h-3 w-3" />
                필터 조건
              </h3>
              <p className="text-muted-foreground text-[10px]">집계 대상을 필터링합니다</p>
            </div>
            <Button variant="outline" size="sm" onClick={addFilter} className="h-7 text-xs">
              <Plus className="mr-1 h-3 w-3" />
              필터 추가
            </Button>
          </div>
          <hr className="border-border" />

          {/* 필터 결합 방식 */}
          {(config.filters || []).length > 1 && (
            <div className="flex items-center gap-2">
              <Label className="text-xs">조건 결합:</Label>
              <Select
                value={config.filterLogic || "AND"}
                onValueChange={(value) => onChange({ filterLogic: value as "AND" | "OR" })}
              >
                <SelectTrigger className="h-7 w-24 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="AND">AND (모두 만족)</SelectItem>
                  <SelectItem value="OR">OR (하나만 만족)</SelectItem>
                </SelectContent>
              </Select>
            </div>
          )}

          {/* 필터 목록 */}
          {(config.filters || []).length === 0 ? (
            <div className="rounded-md border border-dashed p-4 text-center text-xs text-muted-foreground">
              필터 조건이 없습니다. 전체 데이터를 집계합니다.
            </div>
          ) : (
            <div className="space-y-2">
              {(config.filters || []).map((filter, index) => (
                <div
                  key={filter.id}
                  className={cn(
                    "rounded-md border p-3 space-y-2",
                    filter.enabled ? "bg-slate-50" : "bg-slate-100 opacity-60"
                  )}
                >
                  <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 })}
                      />
                      <span className="text-xs font-medium">필터 {index + 1}</span>
                      {filter.columnName && (
                        <Badge variant="secondary" className="text-[10px]">
                          {filter.columnName}
                        </Badge>
                      )}
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => removeFilter(filter.id)}
                      className="h-6 w-6 p-0 text-destructive"
                    >
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>

                  <div className="grid grid-cols-2 gap-2">
                    {/* 컬럼 선택 */}
                    <div className="space-y-1">
                      <Label className="text-[10px]">컬럼</Label>
                      <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">
                      <Label className="text-[10px]">연산자</Label>
                      <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>

                    {/* 값 소스 타입 */}
                    {filter.operator !== "isNull" && filter.operator !== "isNotNull" && (
                      <>
                        <div className="space-y-1">
                          <Label className="text-[10px]">값 소스</Label>
                          <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">
                          <Label className="text-[10px]">
                            {filter.valueSourceType === "static" && "값"}
                            {filter.valueSourceType === "formField" && "폼 필드명"}
                            {filter.valueSourceType === "selection" && "소스 컬럼"}
                            {filter.valueSourceType === "urlParam" && "파라미터명"}
                          </Label>
                          {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" && (
                            <Input
                              value={filter.formFieldName || ""}
                              onChange={(e) => updateFilter(filter.id, { formFieldName: e.target.value })}
                              placeholder="필드명 입력"
                              className="h-7 text-xs"
                            />
                          )}
                          {filter.valueSourceType === "selection" && (
                            <div className="space-y-2 col-span-2">
                              {/* 소스 컴포넌트 선택 */}
                              <div className="space-y-1">
                                <Label className="text-[10px]">소스 컴포넌트</Label>
                                <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">
                                  <Label className="text-[10px]">소스 컬럼 (선택된 행의 컬럼)</Label>
                                  <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>
                          )}
                          {filter.valueSourceType === "urlParam" && (
                            <Input
                              value={filter.urlParamName || ""}
                              onChange={(e) => updateFilter(filter.id, { urlParamName: e.target.value })}
                              placeholder="파라미터명"
                              className="h-7 text-xs"
                            />
                          )}
                        </div>
                      </>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

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

        <div className="grid grid-cols-2 gap-3">
          <div className="space-y-1">
            <Label className="text-xs">배치 방향</Label>
            <Select
              value={config.layout || "horizontal"}
              onValueChange={(value) => onChange({ layout: value as "horizontal" | "vertical" })}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="horizontal">가로 배치</SelectItem>
                <SelectItem value="vertical">세로 배치</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1">
            <Label className="text-xs">항목 간격</Label>
            <Input
              value={config.gap || "16px"}
              onChange={(e) => onChange({ gap: e.target.value })}
              placeholder="16px"
              className="h-8 text-xs"
            />
          </div>
        </div>

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

          <div className="flex items-center gap-2">
            <Checkbox
              id="showIcons"
              checked={config.showIcons ?? true}
              onCheckedChange={(checked) => onChange({ showIcons: checked as boolean })}
            />
            <Label htmlFor="showIcons" className="text-xs">
              아이콘 표시
            </Label>
          </div>
        </div>
      </div>

      {/* 집계 항목 설정 */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-semibold">집계 항목</h3>
          <Button variant="outline" size="sm" onClick={addItem} className="h-7 text-xs">
            <Plus className="mr-1 h-3 w-3" />
            항목 추가
          </Button>
        </div>
        <hr className="border-border" />

        {(config.items || []).length === 0 ? (
          <div className="rounded-md border border-dashed p-4 text-center text-xs text-muted-foreground">
            집계 항목을 추가해주세요
          </div>
        ) : (
          <div className="space-y-3">
            {(config.items || []).map((item, index) => (
              <div
                key={item.id}
                className="rounded-md border bg-slate-50 p-3 space-y-2"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
                    <span className="text-xs font-medium">항목 {index + 1}</span>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => removeItem(item.id)}
                    className="h-6 w-6 p-0 text-destructive"
                  >
                    <Trash2 className="h-3 w-3" />
                  </Button>
                </div>

                <div className="grid grid-cols-2 gap-2">
                  {/* 컬럼 선택 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">컬럼</Label>
                    <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-xs text-muted-foreground text-center">
                            {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">
                    <Label className="text-[10px]">집계 타입</Label>
                    <Select
                      value={item.type}
                      onValueChange={(value) => updateItem(item.id, { type: value as AggregationType })}
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="sum">합계 (SUM)</SelectItem>
                        <SelectItem value="avg">평균 (AVG)</SelectItem>
                        <SelectItem value="count">개수 (COUNT)</SelectItem>
                        <SelectItem value="max">최대 (MAX)</SelectItem>
                        <SelectItem value="min">최소 (MIN)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  {/* 표시 라벨 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">표시 라벨</Label>
                    <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">
                    <Label className="text-[10px]">표시 형식</Label>
                    <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>
                        <SelectItem value="number">숫자</SelectItem>
                        <SelectItem value="currency">통화</SelectItem>
                        <SelectItem value="percent">퍼센트</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

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

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

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

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

          <div className="space-y-1">
            <Label className="text-xs">라벨 색상</Label>
            <Input
              type="color"
              value={config.labelColor || "#64748b"}
              onChange={(e) => onChange({ labelColor: e.target.value })}
              className="h-8"
            />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">값 색상</Label>
            <Input
              type="color"
              value={config.valueColor || "#0f172a"}
              onChange={(e) => onChange({ valueColor: e.target.value })}
              className="h-8"
            />
          </div>
        </div>
      </div>
    </div>
  );
}