vexplor_dev/frontend/components/admin/report/ReportEngine.tsx

"use client";

import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
import {
  BarChart, Bar, LineChart, Line, AreaChart, Area,
  XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
} from "recharts";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
} from "@/components/ui/dialog";
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
import { ScrollToTop } from "@/components/common/ScrollToTop";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";

// ============================================
// 공통 상수
// ============================================
const COLORS = [
  "#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6",
  "#ec4899", "#06b6d4", "#84cc16", "#f97316", "#14b8a6",
];

function ChartTooltip({ active, payload, label }: any) {
  if (!active || !payload?.length) return null;
  return (
    <div className="rounded-lg border border-border bg-popover px-3 py-2 shadow-lg">
      <p className="mb-1.5 text-xs font-semibold text-popover-foreground">{label}</p>
      {payload.map((entry: any, i: number) => (
        <div key={i} className="flex items-center gap-2 text-xs">
          <span className="h-2.5 w-2.5 shrink-0 rounded-sm" style={{ background: entry.color }} />
          <span className="text-muted-foreground">{entry.name}:</span>
          <span className="font-medium tabular-nums text-popover-foreground">
            {typeof entry.value === "number" ? entry.value.toLocaleString() : entry.value}
          </span>
        </div>
      ))}
    </div>
  );
}

const AGG_METHODS = [
  { id: "sum", name: "합계 (SUM)" },
  { id: "avg", name: "평균 (AVG)" },
  { id: "max", name: "최대 (MAX)" },
  { id: "min", name: "최소 (MIN)" },
  { id: "count", name: "건수 (COUNT)" },
];

const CHART_TYPES = [
  { id: "bar", name: "막대" },
  { id: "line", name: "선" },
  { id: "area", name: "영역" },
];

const DATE_PRESETS = [
  { id: "today", name: "오늘" },
  { id: "week", name: "이번주" },
  { id: "month", name: "이번달" },
  { id: "quarter", name: "이번분기" },
  { id: "year", name: "올해" },
  { id: "prevMonth", name: "전월" },
  { id: "last3m", name: "최근3개월" },
  { id: "last6m", name: "최근6개월" },
];

const FILTER_OPERATORS: Record<string, { id: string; name: string }[]> = {
  select: [
    { id: "eq", name: "=" },
    { id: "neq", name: "≠" },
    { id: "in", name: "포함(IN)" },
  ],
  number: [
    { id: "eq", name: "=" },
    { id: "neq", name: "≠" },
    { id: "gt", name: ">" },
    { id: "gte", name: "≥" },
    { id: "lt", name: "<" },
    { id: "lte", name: "≤" },
  ],
};

// ============================================
// 타입 정의 (외부 export)
// ============================================
export interface ReportMetric {
  id: string;
  name: string;
  unit: string;
  color: string;
  isRate?: boolean;
}

export interface ReportGroupByOption {
  id: string;
  name: string;
  /** 복합 그룹인 경우 파트 이름들 (예: ["거래처", "사이즈"]). 1차 그룹 선택 드롭다운에 사용 */
  parts?: string[];
}

/**
 * 자유 조합 그룹핑에서 사용할 단위 필드
 * 사용자가 이 필드들을 자유롭게 선택/조합해서 그룹 조건을 만들 수 있음
 */
export interface ReportGroupableField {
  id: string; // getGroupKey에 넘겨질 id (예: "customer", "size", "thickness", "monthly")
  name: string; // 화면 표시명 (예: "거래처")
}

export interface ReportThreshold {
  id: string;
  label: string;
  defaultValue: number;
  unit: string;
}

export interface ReportColumnDef {
  id: string;
  name: string;
  align?: "left" | "right";
  format?: "number" | "text" | "badge" | "date";
}

export interface FilterFieldDef {
  id: string;
  name: string;
  type: "select" | "number";
  optionKey?: string;
}

export interface ReportConfig {
  key: string;
  title: string;
  description: string;
  apiEndpoint: string;
  metrics: ReportMetric[];
  groupByOptions: ReportGroupByOption[];
  /** 자유 조합 그룹핑에 쓸 단위 필드 목록 (선택 사항) */
  groupableFields?: ReportGroupableField[];
  defaultGroupBy: string;
  defaultMetrics: string[];
  thresholds: ReportThreshold[];
  filterFieldDefs: FilterFieldDef[];
  drilldownColumns: ReportColumnDef[];
  rawDataColumns: ReportColumnDef[];
  enrichRow?: (row: Record<string, any>) => Record<string, any>;
  emptyMessage: string;
}

interface ConditionFilter {
  id: number;
  logic: "AND" | "OR" | "";
  field: string;
  operator: string;
  value: string;
  values: string[];
}

interface ConditionGroup {
  id: number;
  name: string;
  metrics: string[];
  aggMethod: string;
  chartType: string;
  collapsed: boolean;
  filters: ConditionFilter[];
}

interface FilterField {
  id: string;
  name: string;
  type: "select" | "number";
  options: { value: string; label: string }[];
}

interface Preset {
  id: number;
  name: string;
  description: string | null;
  config: {
    groupBy: string;
    startDate: string;
    endDate: string;
    conditions: ConditionGroup[];
  };
  created_by?: string | null;
  created_at?: string;
  updated_at?: string;
}

// ============================================
// 유틸 함수
// ============================================
function getDatePresetRange(preset: string): { start: string; end: string } {
  const today = new Date();
  let s = new Date(today);
  let e = new Date(today);

  switch (preset) {
    case "today":
      break;
    case "week":
      s.setDate(today.getDate() - today.getDay());
      e.setDate(s.getDate() + 6);
      break;
    case "month":
      s.setDate(1);
      e = new Date(today.getFullYear(), today.getMonth() + 1, 0);
      break;
    case "quarter": {
      const q = Math.floor(today.getMonth() / 3);
      s = new Date(today.getFullYear(), q * 3, 1);
      e = new Date(today.getFullYear(), q * 3 + 3, 0);
      break;
    }
    case "year":
      s = new Date(today.getFullYear(), 0, 1);
      e = new Date(today.getFullYear(), 11, 31);
      break;
    case "prevMonth":
      s = new Date(today.getFullYear(), today.getMonth() - 1, 1);
      e = new Date(today.getFullYear(), today.getMonth(), 0);
      break;
    case "last3m":
      s = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());
      break;
    case "last6m":
      s = new Date(today.getFullYear(), today.getMonth() - 6, today.getDate());
      break;
  }

  return {
    start: s.toISOString().split("T")[0],
    end: e.toISOString().split("T")[0],
  };
}

function getGroupKey(row: Record<string, any>, groupBy: string): string {
  const dateStr = row.date || "";
  switch (groupBy) {
    case "daily":
      return dateStr.substring(0, 10) || "미지정";
    case "weekly": {
      if (!dateStr) return "미지정";
      const dt = new Date(dateStr);
      const weekNum = Math.ceil(
        ((dt.getTime() - new Date(dt.getFullYear(), 0, 1).getTime()) / 86400000 +
          new Date(dt.getFullYear(), 0, 1).getDay() + 1) / 7
      );
      return `${dt.getFullYear()}-W${String(weekNum).padStart(2, "0")}`;
    }
    case "monthly":
      return dateStr.substring(0, 7) || "미지정";
    case "quarterly": {
      if (!dateStr) return "미지정";
      const m = parseInt(dateStr.substring(5, 7));
      return `${dateStr.substring(0, 4)}-Q${Math.ceil(m / 3)}`;
    }
    case "thickness": {
      const t = row.thickness;
      if (!t || t === "" || t === "0") return "미지정";
      return `${t}T`;
    }
    case "sizeRange": {
      const area = parseFloat(row.areaSingle) || 0;
      if (area <= 0) return "미지정";
      if (area < 1) return "소형 (1㎡ 미만)";
      if (area < 3) return "중형 (1-3㎡)";
      if (area < 6) return "대형 (3-6㎡)";
      return "특대형 (6㎡ 이상)";
    }
    case "size": {
      const w = row.width, h = row.height;
      if (!w || !h) return "미지정";
      return `${w}×${h}`;
    }
    case "itemSize": {
      const item = row.item || "미지정";
      const w = row.width, h = row.height;
      const sizeStr = w && h ? `${w}×${h}` : "미지정";
      return `${item} / ${sizeStr}`;
    }
    case "customerSize": {
      const customer = row.customer || "미지정";
      const w = row.width, h = row.height;
      const sizeStr = w && h ? `${w}×${h}` : "미지정";
      return `${customer} / ${sizeStr}`;
    }
    case "customerItem": {
      const customer = row.customer || "미지정";
      const item = row.item || "미지정";
      return `${customer} / ${item}`;
    }
    case "customerItemSize": {
      const customer = row.customer || "미지정";
      const item = row.item || "미지정";
      const w = row.width, h = row.height;
      const sizeStr = w && h ? `${w}×${h}` : "미지정";
      return `${customer} / ${item} / ${sizeStr}`;
    }
    default:
      return row[groupBy] || "미지정";
  }
}

function aggregateValues(
  rows: Record<string, any>[],
  metricId: string,
  method: string,
  metric?: ReportMetric,
): number {
  if (!rows.length) return 0;
  const vals = rows.map((r) => Number(r[metricId]) || 0);
  // 비율 메트릭(% 등 isRate)은 행 단위 합계가 의미 없음 → 산술평균으로 강제
  // (예: 100% 행이 N건이면 sum=N×100% 으로 비정상 누적되는 문제 방지)
  const effectiveMethod = metric?.isRate && method === "sum" ? "avg" : method;
  switch (effectiveMethod) {
    case "sum": return vals.reduce((a, b) => a + b, 0);
    case "avg": return Math.round((vals.reduce((a, b) => a + b, 0) / vals.length) * 10) / 10;
    case "max": return Math.max(...vals);
    case "min": return Math.min(...vals);
    case "count": return rows.length;
    default: return vals.reduce((a, b) => a + b, 0);
  }
}

function evalFilter(
  rec: Record<string, any>,
  f: ConditionFilter,
  filterFields: FilterField[]
): boolean {
  const field = filterFields.find((x) => x.id === f.field);
  if (!field) return true;

  const rv = rec[f.field];

  if (field.type === "select") {
    switch (f.operator) {
      case "eq": return !f.value || rv === f.value;
      case "neq": return !f.value || rv !== f.value;
      case "in": return f.values.length === 0 || f.values.includes(rv);
    }
  } else {
    const nv = parseFloat(rv) || 0;
    const cv = parseFloat(f.value) || 0;
    switch (f.operator) {
      case "eq": return !f.value || nv === cv;
      case "neq": return !f.value || nv !== cv;
      case "gt": return !f.value || nv > cv;
      case "gte": return !f.value || nv >= cv;
      case "lt": return !f.value || nv < cv;
      case "lte": return !f.value || nv <= cv;
    }
  }
  return true;
}

function applyConditionFilters(
  data: Record<string, any>[],
  filters: ConditionFilter[],
  filterFields: FilterField[]
): Record<string, any>[] {
  if (!filters.length) return data;
  return data.filter((d) => {
    let res = evalFilter(d, filters[0], filterFields);
    for (let i = 1; i < filters.length; i++) {
      const v = evalFilter(d, filters[i], filterFields);
      res = filters[i].logic === "OR" ? res || v : res && v;
    }
    return res;
  });
}

function formatNumber(n: number): string {
  return n.toLocaleString("ko-KR");
}

function renderCellValue(row: Record<string, any>, col: ReportColumnDef): React.ReactNode {
  const val = row[col.id];
  switch (col.format) {
    case "number":
      return formatNumber(Number(val) || 0);
    case "date":
      return String(val || "").substring(0, 10);
    case "badge":
      return <Badge variant="outline">{val || "-"}</Badge>;
    default:
      return String(val ?? "");
  }
}

// ============================================
// 헤더 필터 - 라벨 컬럼 (고유값 체크박스)
// ============================================
function LabelFilterContent({
  values,
  selected,
  onChange,
  onClear,
}: {
  values: string[];
  selected: Set<string> | null;
  onChange: (next: Set<string> | null) => void;
  onClear: () => void;
}) {
  const [search, setSearch] = useState("");
  const filtered = useMemo(
    () => values.filter((v) => v.toLowerCase().includes(search.toLowerCase())),
    [values, search]
  );
  const effective = selected ?? new Set(values);
  const toggle = (v: string) => {
    const next = new Set(effective);
    if (next.has(v)) next.delete(v); else next.add(v);
    onChange(next);
  };
  const selectAll = () => onChange(new Set(values));
  const deselectAll = () => onChange(new Set());
  return (
    <div className="space-y-2">
      <Input
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="값 검색..."
        className="h-7 text-xs"
      />
      <div className="flex gap-1 text-[11px]">
        <button type="button" onClick={selectAll} className="flex-1 rounded border px-1 py-1 hover:bg-muted">전체</button>
        <button type="button" onClick={deselectAll} className="flex-1 rounded border px-1 py-1 hover:bg-muted">해제</button>
        <button type="button" onClick={onClear} className="flex-1 rounded border px-1 py-1 hover:bg-muted">초기화</button>
      </div>
      <div className="max-h-64 space-y-0.5 overflow-y-auto rounded border">
        {filtered.map((v) => {
          const checked = effective.has(v);
          return (
            <label
              key={v}
              className="flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 hover:bg-muted"
            >
              <input
                type="checkbox"
                checked={checked}
                onChange={() => toggle(v)}
                className="h-3.5 w-3.5"
              />
              <span className="truncate text-xs">{v}</span>
            </label>
          );
        })}
        {filtered.length === 0 && (
          <p className="py-2 text-center text-xs text-muted-foreground">결과 없음</p>
        )}
      </div>
      <p className="text-[11px] text-muted-foreground">
        {selected === null ? "전체 표시" : `${effective.size} / ${values.length} 선택`}
      </p>
    </div>
  );
}

// ============================================
// 헤더 필터 - 메트릭(숫자) 컬럼 (min/max 범위)
// ============================================
function MetricFilterContent({
  range,
  onApply,
  onClear,
}: {
  range?: { min?: number; max?: number };
  onApply: (r: { min?: number; max?: number }) => void;
  onClear: () => void;
}) {
  const [minInput, setMinInput] = useState(range?.min !== undefined ? String(range.min) : "");
  const [maxInput, setMaxInput] = useState(range?.max !== undefined ? String(range.max) : "");
  const apply = () => {
    const minRaw = minInput.trim();
    const maxRaw = maxInput.trim();
    const minNum = minRaw === "" ? undefined : Number(minRaw);
    const maxNum = maxRaw === "" ? undefined : Number(maxRaw);
    onApply({
      min: minNum !== undefined && !isNaN(minNum) ? minNum : undefined,
      max: maxNum !== undefined && !isNaN(maxNum) ? maxNum : undefined,
    });
  };
  return (
    <div className="space-y-2">
      <div className="space-y-1">
        <Label className="text-[11px]">최소값 (이상)</Label>
        <Input
          type="number"
          value={minInput}
          onChange={(e) => setMinInput(e.target.value)}
          className="h-7 text-xs"
          placeholder="예: 100"
        />
      </div>
      <div className="space-y-1">
        <Label className="text-[11px]">최대값 (이하)</Label>
        <Input
          type="number"
          value={maxInput}
          onChange={(e) => setMaxInput(e.target.value)}
          className="h-7 text-xs"
          placeholder="예: 10000"
        />
      </div>
      <div className="flex gap-1 text-xs">
        <button
          type="button"
          onClick={apply}
          className="flex-1 rounded bg-primary py-1 text-primary-foreground hover:opacity-90"
        >
          적용
        </button>
        <button
          type="button"
          onClick={() => { setMinInput(""); setMaxInput(""); onClear(); }}
          className="flex-1 rounded border py-1 hover:bg-muted"
        >
          초기화
        </button>
      </div>
    </div>
  );
}

// ============================================
// ReportEngine 컴포넌트
// ============================================
interface ReportEngineProps {
  config: ReportConfig;
}

export default function ReportEngine({ config }: ReportEngineProps) {
  const [rawData, setRawData] = useState<Record<string, any>[]>([]);
  const [filterOptions, setFilterOptions] = useState<Record<string, { value: string; label: string }[]>>({});
  const [isLoading, setIsLoading] = useState(false);

  const [groupBy, setGroupBy] = useState(config.defaultGroupBy);
  // 자유 조합 그룹핑: 기본 groupBy 뒤에 이어 붙일 추가 그룹 필드들 (순서대로)
  const [extraGroupBys, setExtraGroupBys] = useState<string[]>([]);
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  const [activePreset, setActivePreset] = useState("last1m");
  const [filterOpen, setFilterOpen] = useState(true);

  const [conditions, setConditions] = useState<ConditionGroup[]>([]);
  const condIdRef = useRef(0);
  const filterIdRef = useRef(0);

  const [viewMode, setViewMode] = useState<"table" | "card">("table");
  const [drilldownLabel, setDrilldownLabel] = useState<string | null>(null);
  const [rawDataOpen, setRawDataOpen] = useState(false);
  // 집계 테이블 검색/정렬
  const [tableSearchQuery, setTableSearchQuery] = useState("");
  const [tableSortColumn, setTableSortColumn] = useState<string | null>(null);
  const [tableSortDirection, setTableSortDirection] = useState<"asc" | "desc">("desc");
  // 집계 테이블 헤더 필터: 라벨(그룹) 컬럼은 값 체크박스, 메트릭 컬럼은 숫자 범위
  const [labelColumnFilter, setLabelColumnFilter] = useState<Set<string> | null>(null);
  const [metricColumnFilters, setMetricColumnFilters] = useState<Record<number, { min?: number; max?: number }>>({});
  // 집계 테이블 그룹핑 (1차 그룹으로 묶기)
  const [tableGrouped, setTableGrouped] = useState(false);
  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
  const [primaryGroupIndex, setPrimaryGroupIndex] = useState(0); // 현재 그룹화의 어떤 파트를 1차 기준으로 쓸지

  const [presets, setPresets] = useState<Preset[]>([]);
  const [presetModalOpen, setPresetModalOpen] = useState(false);
  const [presetMode, setPresetMode] = useState<"new" | "update">("new");
  const [presetName, setPresetName] = useState("");
  const [presetDesc, setPresetDesc] = useState("");
  const [selectedPresetId, setSelectedPresetId] = useState<string>("");

  const [thresholdValues, setThresholdValues] = useState<Record<string, number>>(() => {
    const defaults: Record<string, number> = {};
    config.thresholds.forEach((t) => { defaults[t.id] = t.defaultValue; });
    return defaults;
  });

  const [refreshInterval, setRefreshInterval] = useState(0);
  const refreshTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const filterFields: FilterField[] = useMemo(
    () =>
      config.filterFieldDefs.map((def) => ({
        id: def.id,
        name: def.name,
        type: def.type,
        options: def.type === "select" && def.optionKey
          ? filterOptions[def.optionKey] || []
          : [],
      })),
    [config.filterFieldDefs, filterOptions]
  );

  const aggLabel = (method: string) =>
    ({ sum: "합계", avg: "평균", max: "최대", min: "최소", count: "건수" }[method] || "합계");

  // ============================================
  // 초기화
  // ============================================
  useEffect(() => {
    const range = getDatePresetRange("last1m");
    setStartDate(range.start);
    setEndDate(range.end);

    condIdRef.current = 1;
    setConditions([
      {
        id: 1,
        name: "조건 1",
        metrics: [...config.defaultMetrics],
        aggMethod: "sum",
        chartType: "bar",
        collapsed: false,
        filters: [],
      },
    ]);

    loadPresets();
  }, []);

  useEffect(() => {
    if (startDate && endDate) {
      fetchData();
    }
  }, [startDate, endDate]);

  useEffect(() => {
    if (refreshTimerRef.current) clearInterval(refreshTimerRef.current);
    if (refreshInterval > 0) {
      refreshTimerRef.current = setInterval(fetchData, refreshInterval * 1000);
    }
    return () => {
      if (refreshTimerRef.current) clearInterval(refreshTimerRef.current);
    };
  }, [refreshInterval]);

  // ============================================
  // API 호출
  // ============================================
  const fetchData = useCallback(async () => {
    setIsLoading(true);
    try {
      const params = new URLSearchParams();
      if (startDate) params.set("startDate", startDate);
      if (endDate) params.set("endDate", endDate);

      const response = await apiClient.get(
        `${config.apiEndpoint}?${params.toString()}`
      );

      if (response.data?.success) {
        const { rows, filterOptions: opts } = response.data.data;
        let processedRows = rows.map((r: any) => {
          const numericRow: Record<string, any> = { ...r };
          config.metrics.forEach((m) => {
            if (numericRow[m.id] !== undefined) {
              numericRow[m.id] = Number(numericRow[m.id]) || 0;
            }
          });
          return numericRow;
        });

        if (config.enrichRow) {
          processedRows = processedRows.map(config.enrichRow);
        }

        setRawData(processedRows);
        setFilterOptions(opts || {});
      }
    } catch (err) {
      console.error("데이터 조회 실패:", err);
    } finally {
      setIsLoading(false);
    }
  }, [startDate, endDate, config.apiEndpoint, config.enrichRow, config.metrics]);

  // ============================================
  // 조건 관리
  // ============================================
  const addCondition = () => {
    condIdRef.current++;
    setConditions((prev) => [
      ...prev,
      {
        id: condIdRef.current,
        name: `조건 ${condIdRef.current}`,
        metrics: [...config.defaultMetrics],
        aggMethod: "sum",
        chartType: "bar",
        collapsed: false,
        filters: [],
      },
    ]);
  };

  const removeCondition = (id: number) => {
    if (conditions.length <= 1) return;
    setConditions((prev) => prev.filter((c) => c.id !== id));
  };

  const duplicateCondition = (id: number) => {
    const src = conditions.find((c) => c.id === id);
    if (!src) return;
    condIdRef.current++;
    setConditions((prev) => [
      ...prev,
      { ...JSON.parse(JSON.stringify(src)), id: condIdRef.current, name: src.name + " (복사)" },
    ]);
  };

  const updateCondition = (id: number, updates: Partial<ConditionGroup>) => {
    setConditions((prev) =>
      prev.map((c) => (c.id === id ? { ...c, ...updates } : c))
    );
  };

  const toggleMetric = (condId: number, metricId: string) => {
    setConditions((prev) =>
      prev.map((c) => {
        if (c.id !== condId) return c;
        const idx = c.metrics.indexOf(metricId);
        if (idx > -1) {
          if (c.metrics.length <= 1) return c;
          return { ...c, metrics: c.metrics.filter((m) => m !== metricId) };
        }
        return { ...c, metrics: [...c.metrics, metricId] };
      })
    );
  };

  // 메트릭 순서 변경 (왼쪽/오른쪽)
  const moveMetric = (condId: number, metricId: string, dir: -1 | 1) => {
    setConditions((prev) =>
      prev.map((c) => {
        if (c.id !== condId) return c;
        const idx = c.metrics.indexOf(metricId);
        if (idx === -1) return c;
        const newIdx = idx + dir;
        if (newIdx < 0 || newIdx >= c.metrics.length) return c;
        const next = [...c.metrics];
        [next[idx], next[newIdx]] = [next[newIdx], next[idx]];
        return { ...c, metrics: next };
      })
    );
  };

  const addFilter = (condId: number) => {
    filterIdRef.current++;
    const firstField = config.filterFieldDefs[0]?.id || "";
    setConditions((prev) =>
      prev.map((c) => {
        if (c.id !== condId) return c;
        return {
          ...c,
          filters: [
            ...c.filters,
            {
              id: filterIdRef.current,
              logic: c.filters.length === 0 ? "" : "AND",
              field: firstField,
              operator: "eq",
              value: "",
              values: [],
            },
          ],
        };
      })
    );
  };

  const removeFilter = (condId: number, filterId: number) => {
    setConditions((prev) =>
      prev.map((c) => {
        if (c.id !== condId) return c;
        const newFilters = c.filters.filter((f) => f.id !== filterId);
        if (newFilters.length > 0) newFilters[0].logic = "";
        return { ...c, filters: newFilters };
      })
    );
  };

  const updateFilter = (
    condId: number,
    filterId: number,
    updates: Partial<ConditionFilter>
  ) => {
    setConditions((prev) =>
      prev.map((c) => {
        if (c.id !== condId) return c;
        return {
          ...c,
          filters: c.filters.map((f) =>
            f.id === filterId ? { ...f, ...updates } : f
          ),
        };
      })
    );
  };

  // ============================================
  // 날짜 프리셋
  // ============================================
  const handleDatePreset = (preset: string) => {
    setActivePreset(preset);
    const range = getDatePresetRange(preset);
    setStartDate(range.start);
    setEndDate(range.end);
  };

  // ============================================
  // 프리셋 저장/불러오기 (DB 기반 - company_code + report_key)
  // ============================================
  const loadPresets = async () => {
    try {
      const res = await apiClient.get(
        `/report-presets?reportKey=${encodeURIComponent(config.key)}`
      );
      if (res.data?.success) {
        setPresets(res.data.data || []);
      }
    } catch (err) {
      console.error("프리셋 목록 조회 실패", err);
    }
  };

  // 저장 모달 열기 - 신규
  const openNewPresetModal = () => {
    setPresetMode("new");
    setPresetName("");
    setPresetDesc("");
    setPresetModalOpen(true);
  };

  // 저장 모달 열기 - 선택된 프리셋 수정
  const openUpdatePresetModal = () => {
    if (!selectedPresetId) return;
    const p = presets.find((x) => String(x.id) === selectedPresetId);
    if (!p) return;
    setPresetMode("update");
    setPresetName(p.name);
    setPresetDesc(p.description || "");
    setPresetModalOpen(true);
  };

  // 모달 저장 - mode 에 따라 POST(신규) / PUT(수정) 분기
  const savePreset = async () => {
    if (!presetName.trim()) return;
    const body = {
      name: presetName.trim(),
      description: presetDesc.trim() || null,
      config: { groupBy, startDate, endDate, conditions },
    };
    try {
      if (presetMode === "update" && selectedPresetId) {
        const res = await apiClient.put(`/report-presets/${selectedPresetId}`, body);
        if (res.data?.success) {
          setPresets((prev) =>
            prev.map((x) => (String(x.id) === selectedPresetId ? res.data.data : x))
          );
          setPresetModalOpen(false);
          setPresetName("");
          setPresetDesc("");
        }
      } else {
        const res = await apiClient.post(`/report-presets`, {
          reportKey: config.key,
          ...body,
        });
        if (res.data?.success) {
          setPresets((prev) => [res.data.data, ...prev]);
          setSelectedPresetId(String(res.data.data.id));
          setPresetModalOpen(false);
          setPresetName("");
          setPresetDesc("");
        }
      }
    } catch (err) {
      console.error("프리셋 저장 실패", err);
    }
  };

  const loadSelectedPreset = (id: string) => {
    setSelectedPresetId(id);
    if (id === "") return;
    const p = presets.find((x) => String(x.id) === id);
    if (!p?.config) return;
    setGroupBy(p.config.groupBy);
    setStartDate(p.config.startDate);
    setEndDate(p.config.endDate);
    setConditions(p.config.conditions);
  };

  const deletePreset = async () => {
    if (selectedPresetId === "") return;
    try {
      const res = await apiClient.delete(`/report-presets/${selectedPresetId}`);
      if (res.data?.success) {
        setPresets((prev) => prev.filter((p) => String(p.id) !== selectedPresetId));
        setSelectedPresetId("");
      }
    } catch (err) {
      console.error("프리셋 삭제 실패", err);
    }
  };

  // ============================================
  // 데이터 분석 (클라이언트 사이드)
  // ============================================
  const analysisResult = useMemo(() => {
    if (!rawData.length) return { series: [], labels: [], chartData: [] };

    const seriesList: {
      condId: number;
      condName: string;
      condIdx: number;
      metricId: string;
      metricName: string;
      metricUnit: string;
      aggMethod: string;
      chartType: string;
      groups: Record<string, Record<string, any>[]>;
      values: Record<string, number>; // 미리 계산된 집계값 (O(1) 조회)
      totalValue: number; // 전체 합계(또는 선택된 집계)
    }[] = [];

    const allLabelsSet = new Set<string>();

    // 각 condition의 filter는 cache (같은 filter면 재사용)
    const condFilterCache = new Map<string, any[]>();

    conditions.forEach((cond, ci) => {
      // filter 결과 캐싱 (같은 필터면 재사용)
      const filterKey = JSON.stringify(cond.filters);
      let condData = condFilterCache.get(filterKey);
      if (!condData) {
        condData = applyConditionFilters(rawData, cond.filters, filterFields);
        condFilterCache.set(filterKey, condData);
      }

      // 그룹핑 (1회) — 기본 groupBy + extraGroupBys 조합
      const allGroupBys = [groupBy, ...extraGroupBys];
      const groups: Record<string, Record<string, any>[]> = {};
      for (let i = 0; i < condData.length; i++) {
        const d = condData[i];
        const keyParts = allGroupBys.map((g) => getGroupKey(d, g));
        const key = keyParts.join(" / ");
        if (!groups[key]) groups[key] = [];
        groups[key].push(d);
      }
      // Set 에 라벨 추가
      for (const k in groups) allLabelsSet.add(k);

      cond.metrics.forEach((metricId) => {
        const m = config.metrics.find((x) => x.id === metricId);
        if (!m) return;
        // 각 라벨별 집계값을 한 번에 계산해서 저장 (렌더링 시 lookup 만)
        const values: Record<string, number> = {};
        for (const lb in groups) {
          values[lb] = aggregateValues(groups[lb], metricId, cond.aggMethod, m);
        }
        // 전체 합계
        const totalValue = aggregateValues(condData, metricId, cond.aggMethod, m);
        seriesList.push({
          condId: cond.id,
          condName: cond.name,
          condIdx: ci,
          metricId,
          metricName: m.name,
          metricUnit: m.unit,
          aggMethod: cond.aggMethod,
          chartType: cond.chartType,
          groups,
          values,
          totalValue,
        });
      });
    });

    const isTimeBased = ["monthly", "quarterly", "weekly", "daily"].includes(groupBy);
    let labels = [...allLabelsSet];

    if (isTimeBased) {
      labels.sort((a, b) => a.localeCompare(b));
    } else if (seriesList.length > 0) {
      // 다단계 정렬: 미리 계산된 values 사용 (O(1) 조회)
      labels.sort((a, b) => {
        for (const s of seriesList) {
          const va = s.values[a] || 0;
          const vb = s.values[b] || 0;
          // 0은 하단으로: 한쪽만 0이면 0 아닌 쪽 우선
          if (va === 0 && vb !== 0) return 1;
          if (va !== 0 && vb === 0) return -1;
          if (vb !== va) return vb - va; // 큰 값 먼저
        }
        // 모든 메트릭 동일 시 라벨 자연 정렬
        return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" });
      });
    }

    // 차트 렌더링 성능 보호: 그룹이 너무 많으면 상위 N개만 차트에 표시
    // (테이블/드릴다운은 전체 labels 유지 — 집계 계산은 그대로)
    const CHART_MAX_LABELS = 30;
    const chartLabels = !isTimeBased && labels.length > CHART_MAX_LABELS
      ? labels.slice(0, CHART_MAX_LABELS)
      : labels;

    const chartData = chartLabels.map((label) => {
      const point: Record<string, any> = { name: label };
      seriesList.forEach((s) => {
        const key = `${s.condName}_${s.metricName}`;
        point[key] = s.values[label] || 0;
      });
      return point;
    });

    return { series: seriesList, labels, chartData };
  }, [rawData, conditions, groupBy, extraGroupBys, filterFields, config.metrics]);

  // 집계 테이블 표시용 라벨 (검색 + 헤더 정렬 + 헤더 필터 적용) — 미리 계산된 values 사용
  const displayLabels = useMemo(() => {
    let list = analysisResult.labels;
    if (tableSearchQuery) {
      const q = tableSearchQuery.toLowerCase();
      list = list.filter((l) => l.toLowerCase().includes(q));
    }
    // 라벨 컬럼 필터 (체크박스 선택값만 통과)
    if (labelColumnFilter) {
      const sel = labelColumnFilter;
      list = list.filter((l) => {
        if (tableGrouped) {
          const parts = l.split(" / ");
          if (parts.length >= 2) {
            const primary = parts[primaryGroupIndex] ?? parts[0] ?? l;
            return sel.has(primary);
          }
        }
        return sel.has(l);
      });
    }
    // 메트릭 컬럼 필터 (AND 조건, min/max 범위)
    const activeMetricKeys = Object.keys(metricColumnFilters);
    if (activeMetricKeys.length > 0) {
      list = list.filter((l) => {
        for (const key of activeMetricKeys) {
          const range = metricColumnFilters[Number(key)];
          if (!range) continue;
          if (range.min === undefined && range.max === undefined) continue;
          const s = analysisResult.series[Number(key)];
          if (!s) continue;
          const v = s.values[l] || 0;
          if (range.min !== undefined && v < range.min) return false;
          if (range.max !== undefined && v > range.max) return false;
        }
        return true;
      });
    }
    if (tableSortColumn !== null) {
      list = [...list].sort((a, b) => {
        if (tableSortColumn === "__label__") {
          const cmp = a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" });
          return tableSortDirection === "asc" ? cmp : -cmp;
        }
        const si = Number(tableSortColumn);
        const s = analysisResult.series[si];
        if (!s) return 0;
        const va = s.values[a] || 0;
        const vb = s.values[b] || 0;
        return tableSortDirection === "asc" ? va - vb : vb - va;
      });
    }
    return list;
  }, [
    analysisResult,
    tableSearchQuery,
    tableSortColumn,
    tableSortDirection,
    labelColumnFilter,
    metricColumnFilters,
    tableGrouped,
    primaryGroupIndex,
  ]);

  // 라벨 필터 고유값 (그룹핑 상태에 따라 primary part 또는 전체 라벨 기준)
  const labelFilterUniqueValues = useMemo(() => {
    const set = new Set<string>();
    for (const l of analysisResult.labels) {
      if (tableGrouped) {
        const parts = l.split(" / ");
        if (parts.length >= 2) {
          set.add(parts[primaryGroupIndex] ?? parts[0] ?? l);
          continue;
        }
      }
      set.add(l);
    }
    return Array.from(set).sort((a, b) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" })
    );
  }, [analysisResult.labels, tableGrouped, primaryGroupIndex]);

  // 그룹 기준 변경 시 기존 라벨 필터는 리셋 (값 기준이 달라지므로)
  useEffect(() => {
    setLabelColumnFilter(null);
  }, [tableGrouped, primaryGroupIndex, groupBy, extraGroupBys]);

  const toggleTableSort = (col: string) => {
    if (tableSortColumn === col) {
      setTableSortDirection((d) => (d === "asc" ? "desc" : "asc"));
    } else {
      setTableSortColumn(col);
      setTableSortDirection("desc");
    }
  };

  // 현재 그룹화 옵션의 parts 메타 (기본 groupBy + extraGroupBys 조합)
  const currentGroupParts = useMemo(() => {
    const getPartName = (id: string): string => {
      const gf = config.groupableFields?.find((f) => f.id === id);
      if (gf) return gf.name;
      const go = config.groupByOptions.find((o) => o.id === id);
      if (go) return go.name.replace(/별$/, "");
      return id;
    };
    if (extraGroupBys.length === 0) {
      // 기본 그룹의 parts 메타 (예전 복합 옵션) 호환
      const opt = config.groupByOptions.find((o) => o.id === groupBy);
      if (opt?.parts) return opt.parts;
      return [];
    }
    return [groupBy, ...extraGroupBys].map(getPartName);
  }, [config.groupByOptions, config.groupableFields, groupBy, extraGroupBys]);

  // 그룹핑 가능 여부 (복합 그룹일 때만): parts가 2개 이상
  const canGroupTable = currentGroupParts.length >= 2;

  // groupBy 변경 시 primaryGroupIndex 초기화
  useEffect(() => {
    if (primaryGroupIndex >= currentGroupParts.length) {
      setPrimaryGroupIndex(0);
    }
  }, [currentGroupParts.length, primaryGroupIndex]);

  // 1차 그룹으로 묶은 결과 (tableGrouped가 true이고 canGroupTable일 때만)
  const groupedLabels = useMemo(() => {
    if (!tableGrouped || !canGroupTable) return null;
    const groups: Record<string, string[]> = {};
    const order: string[] = [];
    for (const label of displayLabels) {
      const parts = label.split(" / ");
      const primary = parts[primaryGroupIndex] ?? parts[0] ?? label;
      if (!groups[primary]) {
        groups[primary] = [];
        order.push(primary);
      }
      groups[primary].push(label);
    }
    return { groups, order };
  }, [displayLabels, tableGrouped, canGroupTable, primaryGroupIndex]);

  const toggleGroupCollapse = (primary: string) => {
    setCollapsedGroups((prev) => {
      const next = new Set(prev);
      if (next.has(primary)) next.delete(primary);
      else next.add(primary);
      return next;
    });
  };

  // ============================================
  // 렌더링
  // ============================================
  return (
    <div className="flex h-full flex-col overflow-auto bg-background">
      <div className="space-y-4 p-4 sm:p-6">
        {/* 헤더 */}
        <div className="flex flex-col gap-3 border-b pb-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
              {config.title}
            </h1>
            <p className="text-sm text-muted-foreground">
              {config.description} | 원본 {rawData.length}건
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <select
              value={refreshInterval}
              onChange={(e) => setRefreshInterval(Number(e.target.value))}
              className={cn(
                "h-8 rounded-md border px-2 text-xs",
                refreshInterval > 0 && "border-primary bg-primary/5"
              )}
            >
              <option value={0}>자동갱신 OFF</option>
              <option value={30}>30초</option>
              <option value={60}>1분</option>
              <option value={300}>5분</option>
            </select>
            <Button variant="outline" size="sm" onClick={() => window.print()}>
              인쇄
            </Button>
          </div>
        </div>

        {/* 프리셋 바 */}
        <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/30 p-3">
          <span className="text-xs font-medium text-muted-foreground">저장된 조건</span>
          <select
            value={selectedPresetId}
            onChange={(e) => loadSelectedPreset(e.target.value)}
            className="h-8 min-w-[180px] rounded-md border px-2 text-xs"
          >
            <option value="">조건을 선택하세요</option>
            {presets.map((p) => (
              <option key={p.id} value={String(p.id)}>{p.name}</option>
            ))}
          </select>
          <Button size="sm" variant="default" className="h-8 text-xs" onClick={openNewPresetModal}>
            신규 저장
          </Button>
          <Button
            size="sm"
            variant="secondary"
            className="h-8 text-xs"
            onClick={openUpdatePresetModal}
            disabled={!selectedPresetId}
            title={selectedPresetId ? "현재 조건을 선택된 프리셋에 덮어쓰기" : "먼저 프리셋을 선택하세요"}
          >
            현재 조건 수정
          </Button>
          <Button
            size="sm"
            variant="outline"
            className="h-8 text-xs"
            onClick={deletePreset}
            disabled={!selectedPresetId}
          >
            삭제
          </Button>
        </div>

        {/* 분석 조건 설정 */}
        <div className="rounded-md border">
          <button
            className="flex w-full items-center justify-between p-3 text-left hover:bg-muted/50"
            onClick={() => setFilterOpen(!filterOpen)}
          >
            <span className="text-sm font-semibold">분석 조건 설정</span>
            <span className={cn("text-xs transition-transform", !filterOpen && "-rotate-90")}>
              ▼
            </span>
          </button>

          {filterOpen && (
            <div className="space-y-4 border-t p-4">
              {/* 기준축 + 기간 */}
              <div className="flex flex-wrap gap-4">
                <div className="space-y-1">
                  <Label className="text-xs">분석 기준 (X축)</Label>
                  <div className="flex flex-wrap items-center gap-1">
                    <select
                      value={groupBy}
                      onChange={(e) => setGroupBy(e.target.value)}
                      className="h-9 w-[160px] rounded-md border px-2 text-sm"
                    >
                      {config.groupByOptions.map((o) => (
                        <option key={o.id} value={o.id}>{o.name}</option>
                      ))}
                    </select>
                    {/* 자유 조합 그룹핑: 추가 그룹 필드 칩 */}
                    {config.groupableFields && config.groupableFields.length > 0 && (
                      <>
                        {extraGroupBys.map((id, idx) => {
                          const f = config.groupableFields!.find((gf) => gf.id === id);
                          return (
                            <span
                              key={`${id}-${idx}`}
                              className="inline-flex items-center gap-1 rounded-md border border-primary/30 bg-primary/10 px-2 py-1 text-xs text-primary"
                            >
                              <span className="text-muted-foreground">+</span>
                              {f?.name || id}
                              <button
                                onClick={() =>
                                  setExtraGroupBys((prev) => prev.filter((_, i) => i !== idx))
                                }
                                className="ml-0.5 text-primary/60 hover:text-destructive"
                                title="제거"
                              >
                                ×
                              </button>
                            </span>
                          );
                        })}
                        <select
                          value=""
                          onChange={(e) => {
                            if (e.target.value) {
                              setExtraGroupBys((prev) => [...prev, e.target.value]);
                            }
                          }}
                          className="h-9 rounded-md border px-2 text-xs text-muted-foreground"
                          title="그룹 조합 추가"
                        >
                          <option value="">+ 그룹 추가</option>
                          {config.groupableFields
                            .filter((f) => f.id !== groupBy && !extraGroupBys.includes(f.id))
                            .map((f) => (
                              <option key={f.id} value={f.id}>
                                {f.name}
                              </option>
                            ))}
                        </select>
                        {extraGroupBys.length > 0 && (
                          <button
                            onClick={() => setExtraGroupBys([])}
                            className="h-9 px-2 rounded-md border text-xs text-muted-foreground hover:text-destructive"
                            title="조합 모두 제거"
                          >
                            초기화
                          </button>
                        )}
                      </>
                    )}
                  </div>
                </div>
                <div className="space-y-1">
                  <Label className="text-xs">기간</Label>
                  <div className="flex items-center gap-2">
                    <Input
                      type="date"
                      value={startDate}
                      onChange={(e) => setStartDate(e.target.value)}
                      className="h-9 w-[150px] text-sm"
                    />
                    <span className="text-muted-foreground">~</span>
                    <Input
                      type="date"
                      value={endDate}
                      onChange={(e) => setEndDate(e.target.value)}
                      className="h-9 w-[150px] text-sm"
                    />
                  </div>
                </div>
              </div>

              {/* 날짜 프리셋 */}
              <div className="flex flex-wrap gap-1.5">
                {DATE_PRESETS.map((p) => (
                  <button
                    key={p.id}
                    onClick={() => handleDatePreset(p.id)}
                    className={cn(
                      "rounded-full border px-3 py-1 text-xs transition-colors",
                      activePreset === p.id
                        ? "border-primary bg-primary text-primary-foreground"
                        : "hover:bg-muted"
                    )}
                  >
                    {p.name}
                  </button>
                ))}
              </div>

              {/* 다중 분석 조건 */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">분석 조건</span>
                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={addCondition}>
                    + 조건 추가
                  </Button>
                </div>

                {conditions.map((cond, ci) => {
                  const color = COLORS[ci % COLORS.length];
                  return (
                    <div
                      key={cond.id}
                      className="rounded-md border"
                      style={{ borderLeftColor: color, borderLeftWidth: 3 }}
                    >
                      <div
                        className="flex cursor-pointer items-center justify-between p-3 hover:bg-muted/30"
                        onClick={() => updateCondition(cond.id, { collapsed: !cond.collapsed })}
                      >
                        <div className="flex items-center gap-2">
                          <div className="h-3 w-3 rounded" style={{ background: color }} />
                          <input
                            value={cond.name}
                            onClick={(e) => e.stopPropagation()}
                            onChange={(e) => updateCondition(cond.id, { name: e.target.value })}
                            className="w-[100px] border-b border-transparent bg-transparent text-sm font-medium focus:border-primary focus:outline-none"
                          />
                          <span className="text-xs text-muted-foreground">
                            {cond.metrics.map((id) => config.metrics.find((m) => m.id === id)?.name).join("+")}
                            {" "}{aggLabel(cond.aggMethod)}
                            {" "}{CHART_TYPES.find((t) => t.id === cond.chartType)?.name}
                            {cond.filters.length > 0 && ` | 필터 ${cond.filters.length}개`}
                          </span>
                        </div>
                        <div className="flex items-center gap-1">
                          <button
                            className="rounded p-1 text-xs hover:bg-muted"
                            onClick={(e) => { e.stopPropagation(); duplicateCondition(cond.id); }}
                          >
                            복제
                          </button>
                          <button
                            className="rounded p-1 text-xs text-destructive hover:bg-destructive/10"
                            onClick={(e) => { e.stopPropagation(); removeCondition(cond.id); }}
                          >
                            X
                          </button>
                          <span className={cn("ml-1 text-xs transition-transform", cond.collapsed && "-rotate-90")}>
                            ▼
                          </span>
                        </div>
                      </div>

                      {!cond.collapsed && (
                        <div className="space-y-3 border-t p-3">
                          <div className="space-y-2">
                            <span className="text-xs text-muted-foreground">데이터 (선택 순서 = 표시/정렬 기준)</span>
                            {/* 선택된 메트릭: 순서대로 + 이동 버튼 */}
                            {cond.metrics.length > 0 && (
                              <div className="flex flex-wrap gap-1.5 rounded-md border border-primary/20 bg-primary/5 p-2">
                                {cond.metrics.map((mid, idx) => {
                                  const m = config.metrics.find((x) => x.id === mid);
                                  if (!m) return null;
                                  const isFirst = idx === 0;
                                  const isLast = idx === cond.metrics.length - 1;
                                  return (
                                    <div
                                      key={mid}
                                      className="inline-flex items-center gap-1 rounded-full border border-primary bg-background px-2 py-1 text-xs font-medium"
                                    >
                                      <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] text-primary-foreground">
                                        {idx + 1}
                                      </span>
                                      <span
                                        className="inline-block h-2 w-2 rounded-full"
                                        style={{ background: m.color }}
                                      />
                                      <span>{m.name}</span>
                                      <button
                                        type="button"
                                        onClick={() => moveMetric(cond.id, mid, -1)}
                                        disabled={isFirst}
                                        className={cn(
                                          "text-muted-foreground hover:text-primary ml-0.5",
                                          isFirst && "opacity-30 cursor-not-allowed"
                                        )}
                                        title="왼쪽으로"
                                      >
                                        ◀
                                      </button>
                                      <button
                                        type="button"
                                        onClick={() => moveMetric(cond.id, mid, 1)}
                                        disabled={isLast}
                                        className={cn(
                                          "text-muted-foreground hover:text-primary",
                                          isLast && "opacity-30 cursor-not-allowed"
                                        )}
                                        title="오른쪽으로"
                                      >
                                        ▶
                                      </button>
                                      <button
                                        type="button"
                                        onClick={() => toggleMetric(cond.id, mid)}
                                        disabled={cond.metrics.length <= 1}
                                        className={cn(
                                          "text-muted-foreground hover:text-destructive ml-0.5",
                                          cond.metrics.length <= 1 && "opacity-30 cursor-not-allowed"
                                        )}
                                        title="제거"
                                      >
                                        ×
                                      </button>
                                    </div>
                                  );
                                })}
                              </div>
                            )}
                            {/* 전체 메트릭 목록 */}
                            <div className="flex flex-wrap gap-1.5">
                              {config.metrics.map((m) => {
                                const active = cond.metrics.includes(m.id);
                                return (
                                  <button
                                    key={m.id}
                                    onClick={() => toggleMetric(cond.id, m.id)}
                                    className={cn(
                                      "flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors",
                                      active
                                        ? "border-primary bg-primary/10 font-medium"
                                        : "hover:bg-muted"
                                    )}
                                  >
                                    {active && <span className="text-primary">✓</span>}
                                    <span
                                      className="inline-block h-2 w-2 rounded-full"
                                      style={{ background: m.color }}
                                    />
                                    {m.name}
                                  </button>
                                );
                              })}
                            </div>
                          </div>

                          <div className="flex flex-wrap items-center gap-3">
                            <div className="space-y-1">
                              <span className="text-xs text-muted-foreground">집계</span>
                              <select
                                value={cond.aggMethod}
                                onChange={(e) =>
                                  updateCondition(cond.id, { aggMethod: e.target.value })
                                }
                                className="h-8 rounded-md border px-2 text-xs"
                              >
                                {AGG_METHODS.map((a) => (
                                  <option key={a.id} value={a.id}>{a.name}</option>
                                ))}
                              </select>
                            </div>
                            <div className="space-y-1">
                              <span className="text-xs text-muted-foreground">차트</span>
                              <div className="flex gap-1">
                                {CHART_TYPES.map((ct) => (
                                  <button
                                    key={ct.id}
                                    onClick={() => updateCondition(cond.id, { chartType: ct.id })}
                                    className={cn(
                                      "rounded border px-2.5 py-1 text-xs",
                                      cond.chartType === ct.id
                                        ? "border-primary bg-primary text-primary-foreground"
                                        : "hover:bg-muted"
                                    )}
                                  >
                                    {ct.name}
                                  </button>
                                ))}
                              </div>
                            </div>
                          </div>

                          {/* 필터 */}
                          <div className="space-y-2">
                            <span className="text-xs text-muted-foreground">필터</span>
                            {cond.filters.length === 0 && (
                              <p className="text-xs text-muted-foreground/70">전체 데이터 (필터 없음)</p>
                            )}
                            {cond.filters.map((f, fi) => {
                              const field = filterFields.find((x) => x.id === f.field);
                              const ops = FILTER_OPERATORS[field?.type || "select"];
                              return (
                                <div key={f.id} className="flex flex-wrap items-center gap-1.5">
                                  {fi === 0 ? (
                                    <span className="w-[50px] text-center text-[11px] text-muted-foreground">WHERE</span>
                                  ) : (
                                    <select
                                      value={f.logic}
                                      onChange={(e) =>
                                        updateFilter(cond.id, f.id, {
                                          logic: e.target.value as "AND" | "OR",
                                        })
                                      }
                                      className="h-7 w-[50px] rounded border text-[11px]"
                                    >
                                      <option value="AND">AND</option>
                                      <option value="OR">OR</option>
                                    </select>
                                  )}
                                  <select
                                    value={f.field}
                                    onChange={(e) =>
                                      updateFilter(cond.id, f.id, {
                                        field: e.target.value,
                                        operator: "eq",
                                        value: "",
                                        values: [],
                                      })
                                    }
                                    className="h-7 rounded border px-1.5 text-[11px]"
                                  >
                                    {filterFields.map((ff) => (
                                      <option key={ff.id} value={ff.id}>{ff.name}</option>
                                    ))}
                                  </select>
                                  <select
                                    value={f.operator}
                                    onChange={(e) =>
                                      updateFilter(cond.id, f.id, { operator: e.target.value })
                                    }
                                    className="h-7 rounded border px-1.5 text-[11px]"
                                  >
                                    {ops.map((o) => (
                                      <option key={o.id} value={o.id}>{o.name}</option>
                                    ))}
                                  </select>
                                  {field?.type === "select" ? (
                                    <select
                                      value={f.value}
                                      onChange={(e) =>
                                        updateFilter(cond.id, f.id, { value: e.target.value })
                                      }
                                      className="h-7 min-w-[120px] rounded border px-1.5 text-[11px]"
                                    >
                                      <option value="">선택...</option>
                                      {field.options.map((o) => (
                                        <option key={o.value} value={o.label}>{o.label}</option>
                                      ))}
                                    </select>
                                  ) : (
                                    <input
                                      type="number"
                                      value={f.value}
                                      onChange={(e) =>
                                        updateFilter(cond.id, f.id, { value: e.target.value })
                                      }
                                      className="h-7 w-[100px] rounded border px-2 text-[11px]"
                                    />
                                  )}
                                  <button
                                    onClick={() => removeFilter(cond.id, f.id)}
                                    className="rounded p-1 text-xs text-destructive hover:bg-destructive/10"
                                  >
                                    X
                                  </button>
                                </div>
                              );
                            })}
                            <button
                              onClick={() => addFilter(cond.id)}
                              className="text-xs text-primary hover:underline"
                            >
                              + 필터 추가
                            </button>
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>

              {/* 임계값 */}
              {config.thresholds.length > 0 && (
                <div className="flex flex-wrap items-center gap-4 rounded-md border bg-muted/20 p-3">
                  <span className="text-xs font-medium">임계값 설정</span>
                  {config.thresholds.map((t, ti) => (
                    <div key={t.id} className="flex items-center gap-2">
                      <span
                        className="inline-block h-2.5 w-2.5 rounded-full"
                        style={{ background: ti === 0 ? "#ef4444" : "#10b981" }}
                      />
                      <span className="text-xs">{t.label}</span>
                      <Input
                        type="number"
                        value={thresholdValues[t.id] ?? t.defaultValue}
                        onChange={(e) =>
                          setThresholdValues((prev) => ({
                            ...prev,
                            [t.id]: Number(e.target.value),
                          }))
                        }
                        className="h-7 w-[60px] text-xs"
                      />
                      <span className="text-xs">{t.unit}</span>
                    </div>
                  ))}
                </div>
              )}

              {/* 액션 */}
              <div className="flex justify-end gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => {
                    condIdRef.current = 1;
                    setConditions([
                      {
                        id: 1,
                        name: "조건 1",
                        metrics: [...config.defaultMetrics],
                        aggMethod: "sum",
                        chartType: "bar",
                        collapsed: false,
                        filters: [],
                      },
                    ]);
                    setGroupBy(config.defaultGroupBy);
                    handleDatePreset("last6m");
                  }}
                >
                  전체 초기화
                </Button>
                <Button size="sm" onClick={fetchData} disabled={isLoading}>
                  {isLoading ? "분석 중..." : "분석 실행"}
                </Button>
              </div>
            </div>
          )}
        </div>

        {/* 적용된 조건 태그 */}
        {analysisResult.series.length > 0 && (
          <div className="flex flex-wrap gap-1.5">
            <Badge variant="secondary">
              {extraGroupBys.length > 0 && currentGroupParts.length > 0
                ? currentGroupParts.map((p) => `${p}별`).join(" × ")
                : config.groupByOptions.find((o) => o.id === groupBy)?.name}
            </Badge>
            {(startDate || endDate) && (
              <Badge variant="secondary">
                {startDate || "~"} ~ {endDate || "~"}
              </Badge>
            )}
            {conditions.map((cond, ci) => (
              <Badge
                key={cond.id}
                variant="outline"
                style={{ borderColor: COLORS[ci % COLORS.length] + "80" }}
              >
                <span
                  className="mr-1 inline-block h-2 w-2 rounded"
                  style={{ background: COLORS[ci % COLORS.length] }}
                />
                {cond.name}: {cond.metrics.map((id) => config.metrics.find((m) => m.id === id)?.name).join("+")}
                {" "}({aggLabel(cond.aggMethod)})
              </Badge>
            ))}
          </div>
        )}

        {/* KPI 카드 */}
        {analysisResult.series.length > 0 && (
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
            {conditions.flatMap((cond, ci) =>
              cond.metrics.map((metricId) => {
                const m = config.metrics.find((x) => x.id === metricId);
                if (!m) return null;
                const condData = applyConditionFilters(rawData, cond.filters, filterFields);
                const val = aggregateValues(condData, metricId, cond.aggMethod, m);
                const color = COLORS[ci % COLORS.length];
                return (
                  <div
                    key={`${cond.id}-${metricId}`}
                    className="rounded-lg border p-4"
                    style={{ borderTopColor: color, borderTopWidth: 3 }}
                  >
                    <p className="truncate text-xs text-muted-foreground">
                      {cond.name} · {m.name} ({aggLabel(cond.aggMethod)})
                    </p>
                    <p className="mt-1 text-xl font-bold tabular-nums">
                      {formatNumber(val)}
                      <span className="ml-1 text-xs font-normal text-muted-foreground">
                        {cond.aggMethod === "count" ? "건" : m.unit}
                      </span>
                    </p>
                  </div>
                );
              })
            )}
          </div>
        )}

        {/* 차트 */}
        {analysisResult.chartData.length > 0 && (
          <div className="rounded-md border p-4">
            <h3 className="mb-4 text-sm font-semibold">분석 차트</h3>
            <div style={{ width: "100%", height: 400 }}>
              <ResponsiveContainer>
                {(() => {
                  const firstChartType = conditions[0]?.chartType || "bar";
                  const dataKeys = analysisResult.series.map(
                    (s) => `${s.condName}_${s.metricName}`
                  );

                  if (firstChartType === "line") {
                    return (
                      <LineChart data={analysisResult.chartData}>
                        <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
                        <XAxis dataKey="name" tick={{ fontSize: 12 }} className="fill-muted-foreground" />
                        <YAxis tick={{ fontSize: 12 }} className="fill-muted-foreground" tickFormatter={(v) => v.toLocaleString()} />
                        <Tooltip content={<ChartTooltip />} />
                        <Legend wrapperStyle={{ fontSize: 12 }} />
                        {dataKeys.map((key, i) => (
                          <Line
                            key={key}
                            type="monotone"
                            dataKey={key}
                            stroke={COLORS[i % COLORS.length]}
                            strokeWidth={2}
                            dot={{ r: 4 }}
                          />
                        ))}
                      </LineChart>
                    );
                  }

                  if (firstChartType === "area") {
                    return (
                      <AreaChart data={analysisResult.chartData}>
                        <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
                        <XAxis dataKey="name" tick={{ fontSize: 12 }} className="fill-muted-foreground" />
                        <YAxis tick={{ fontSize: 12 }} className="fill-muted-foreground" tickFormatter={(v) => v.toLocaleString()} />
                        <Tooltip content={<ChartTooltip />} />
                        <Legend wrapperStyle={{ fontSize: 12 }} />
                        {dataKeys.map((key, i) => (
                          <Area
                            key={key}
                            type="monotone"
                            dataKey={key}
                            stroke={COLORS[i % COLORS.length]}
                            fill={COLORS[i % COLORS.length]}
                            fillOpacity={0.3}
                          />
                        ))}
                      </AreaChart>
                    );
                  }

                  return (
                    <BarChart data={analysisResult.chartData}>
                      <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
                      <XAxis dataKey="name" tick={{ fontSize: 12 }} className="fill-muted-foreground" />
                      <YAxis tick={{ fontSize: 12 }} className="fill-muted-foreground" tickFormatter={(v) => v.toLocaleString()} />
                      <Tooltip content={<ChartTooltip />} cursor={{ fill: "hsl(var(--muted))", opacity: 0.3 }} />
                      <Legend wrapperStyle={{ fontSize: 12 }} />
                      {dataKeys.map((key, i) => (
                        <Bar
                          key={key}
                          dataKey={key}
                          fill={COLORS[i % COLORS.length]}
                          radius={[4, 4, 0, 0]}
                        />
                      ))}
                    </BarChart>
                  );
                })()}
              </ResponsiveContainer>
            </div>
          </div>
        )}

        {/* 집계 데이터 */}
        {analysisResult.series.length > 0 && (
          <div className="rounded-md border">
            <div className="flex items-center justify-between gap-2 border-b p-3">
              <h3 className="text-sm font-semibold shrink-0">집계 데이터</h3>
              <div className="flex items-center gap-2 flex-1 justify-end">
                <input
                  type="text"
                  value={tableSearchQuery}
                  onChange={(e) => setTableSearchQuery(e.target.value)}
                  placeholder="검색 (거래처 / 품목 / 사이즈 등)"
                  className="h-8 w-full max-w-[280px] rounded-md border px-2 text-xs"
                />
                {tableSearchQuery && (
                  <button
                    onClick={() => setTableSearchQuery("")}
                    className="text-muted-foreground hover:text-foreground text-xs"
                  >
                    초기화
                  </button>
                )}
                {canGroupTable && (
                  <button
                    onClick={() => setTableGrouped((v) => !v)}
                    className={cn(
                      "h-8 px-3 rounded-md border text-xs shrink-0",
                      tableGrouped && "border-primary bg-primary/10 text-primary"
                    )}
                    title="1차 그룹 기준으로 묶어서 접기/펼치기"
                  >
                    그룹핑 {tableGrouped ? "ON" : "OFF"}
                  </button>
                )}
                {tableGrouped && canGroupTable && (
                  <>
                    <select
                      value={primaryGroupIndex}
                      onChange={(e) => {
                        setPrimaryGroupIndex(Number(e.target.value));
                        setCollapsedGroups(new Set());
                      }}
                      className="h-8 rounded-md border px-2 text-xs shrink-0 bg-background"
                      title="1차 그룹 기준"
                    >
                      {currentGroupParts.map((part, idx) => (
                        <option key={idx} value={idx}>{part}별</option>
                      ))}
                    </select>
                    <button
                      onClick={() => setCollapsedGroups(new Set(groupedLabels?.order || []))}
                      className="h-8 px-2 rounded-md border text-xs shrink-0"
                      title="모두 접기"
                    >
                      모두 접기
                    </button>
                    <button
                      onClick={() => setCollapsedGroups(new Set())}
                      className="h-8 px-2 rounded-md border text-xs shrink-0"
                      title="모두 펼치기"
                    >
                      모두 펼치기
                    </button>
                  </>
                )}
                <div className="flex rounded-md border shrink-0">
                  <button
                    onClick={() => setViewMode("table")}
                    className={cn(
                      "px-3 py-1 text-xs",
                      viewMode === "table" && "bg-primary text-primary-foreground"
                    )}
                  >
                    테이블
                  </button>
                  <button
                    onClick={() => setViewMode("card")}
                    className={cn(
                      "px-3 py-1 text-xs",
                      viewMode === "card" && "bg-primary text-primary-foreground"
                    )}
                  >
                    카드
                  </button>
                </div>
              </div>
            </div>

            <div className="p-3">
              {viewMode === "table" ? (
                <div className="overflow-x-auto">
                  <table className="w-full text-sm">
                    <thead>
                      <tr className="border-b">
                        <th className="p-2 text-left text-xs font-medium text-muted-foreground select-none">
                          <div className="flex items-center justify-between gap-2">
                            <button
                              type="button"
                              className="inline-flex items-center gap-1 hover:text-foreground"
                              onClick={() => toggleTableSort("__label__")}
                            >
                              {tableGrouped && canGroupTable && currentGroupParts[primaryGroupIndex]
                                ? `${currentGroupParts[primaryGroupIndex]}별`
                                : (currentGroupParts.length > 0
                                    ? currentGroupParts.map((p) => `${p}별`).join(" × ")
                                    : config.groupByOptions.find((o) => o.id === groupBy)?.name)}
                              {tableSortColumn === "__label__" && (
                                <span className="text-primary">{tableSortDirection === "asc" ? "▲" : "▼"}</span>
                              )}
                            </button>
                            <Popover>
                              <PopoverTrigger asChild>
                                <button
                                  type="button"
                                  className={cn(
                                    "inline-flex h-5 w-5 items-center justify-center rounded hover:bg-muted",
                                    labelColumnFilter && "bg-primary/10 text-primary"
                                  )}
                                  title="값 필터"
                                >
                                  ▾
                                </button>
                              </PopoverTrigger>
                              <PopoverContent className="w-64 p-2" align="start">
                                <LabelFilterContent
                                  values={labelFilterUniqueValues}
                                  selected={labelColumnFilter}
                                  onChange={setLabelColumnFilter}
                                  onClear={() => setLabelColumnFilter(null)}
                                />
                              </PopoverContent>
                            </Popover>
                          </div>
                        </th>
                        {analysisResult.series.map((s, si) => {
                          const colKey = String(si);
                          const hasFilter = !!metricColumnFilters[si];
                          return (
                            <th
                              key={si}
                              className="p-2 text-right text-xs font-medium select-none"
                              style={{ borderBottomColor: COLORS[si % COLORS.length], borderBottomWidth: 2 }}
                            >
                              <div className="flex items-center justify-end gap-2">
                                <button
                                  type="button"
                                  className="inline-flex items-center gap-1 justify-end text-right hover:text-foreground"
                                  onClick={() => toggleTableSort(colKey)}
                                >
                                  <span>
                                    {s.condName}
                                    <br />
                                    <span className="font-normal text-muted-foreground">
                                      {s.metricName}({aggLabel(s.aggMethod)})
                                    </span>
                                  </span>
                                  {tableSortColumn === colKey && (
                                    <span className="text-primary">{tableSortDirection === "asc" ? "▲" : "▼"}</span>
                                  )}
                                </button>
                                <Popover>
                                  <PopoverTrigger asChild>
                                    <button
                                      type="button"
                                      className={cn(
                                        "inline-flex h-5 w-5 items-center justify-center rounded hover:bg-muted",
                                        hasFilter && "bg-primary/10 text-primary"
                                      )}
                                      title="범위 필터"
                                    >
                                      ▾
                                    </button>
                                  </PopoverTrigger>
                                  <PopoverContent className="w-60 p-2" align="end">
                                    <MetricFilterContent
                                      range={metricColumnFilters[si]}
                                      onApply={(r) =>
                                        setMetricColumnFilters((prev) => {
                                          if (r.min === undefined && r.max === undefined) {
                                            const next = { ...prev };
                                            delete next[si];
                                            return next;
                                          }
                                          return { ...prev, [si]: r };
                                        })
                                      }
                                      onClear={() =>
                                        setMetricColumnFilters((prev) => {
                                          const next = { ...prev };
                                          delete next[si];
                                          return next;
                                        })
                                      }
                                    />
                                  </PopoverContent>
                                </Popover>
                              </div>
                            </th>
                          );
                        })}
                      </tr>
                    </thead>
                    <tbody>
                      {displayLabels.length === 0 ? (
                        <tr>
                          <td colSpan={analysisResult.series.length + 1} className="p-6 text-center text-xs text-muted-foreground">
                            {tableSearchQuery ? "검색 결과가 없습니다" : "데이터가 없습니다"}
                          </td>
                        </tr>
                      ) : tableGrouped && groupedLabels ? (
                        groupedLabels.order.map((primary) => {
                          const subLabels = groupedLabels.groups[primary];
                          const isCollapsed = collapsedGroups.has(primary);
                          return (
                            <React.Fragment key={`grp-${primary}`}>
                              <tr
                                className="bg-muted/40 border-b border-primary/20 cursor-pointer font-semibold hover:bg-muted"
                                onClick={() => toggleGroupCollapse(primary)}
                              >
                                <td className="p-2">
                                  <span className="inline-flex items-center gap-1">
                                    <span className="text-primary">{isCollapsed ? "▶" : "▼"}</span>
                                    {primary}
                                    <span className="text-muted-foreground text-xs font-normal">({subLabels.length}건)</span>
                                  </span>
                                </td>
                                {analysisResult.series.map((s, si) => {
                                  const allRows = subLabels.flatMap((lb) => s.groups[lb] || []);
                                  const m = config.metrics.find((x) => x.id === s.metricId);
                                  return (
                                    <td key={si} className="p-2 text-right tabular-nums">
                                      {formatNumber(aggregateValues(allRows, s.metricId, s.aggMethod, m))}
                                    </td>
                                  );
                                })}
                              </tr>
                              {!isCollapsed && subLabels.map((label) => {
                                const parts = label.split(" / ");
                                const subPart = parts.filter((_, i) => i !== primaryGroupIndex).join(" / ") || label;
                                return (
                                  <tr
                                    key={label}
                                    className="cursor-pointer border-b transition-colors hover:bg-muted/50"
                                    onClick={() => setDrilldownLabel(label)}
                                  >
                                    <td className="p-2 pl-6 text-muted-foreground">{subPart}</td>
                                    {analysisResult.series.map((s, si) => (
                                      <td key={si} className="p-2 text-right tabular-nums">
                                        {formatNumber(s.values[label] || 0)}
                                      </td>
                                    ))}
                                  </tr>
                                );
                              })}
                            </React.Fragment>
                          );
                        })
                      ) : displayLabels.map((label) => (
                        <tr
                          key={label}
                          className="cursor-pointer border-b transition-colors hover:bg-muted/50"
                          onClick={() => setDrilldownLabel(label)}
                        >
                          <td className="p-2 font-medium">{label}</td>
                          {analysisResult.series.map((s, si) => (
                            <td key={si} className="p-2 text-right tabular-nums">
                              {formatNumber(s.values[label] || 0)}
                            </td>
                          ))}
                        </tr>
                      ))}
                      <tr className="border-t-2 bg-muted/30 font-bold">
                        <td className="p-2">
                          {tableSearchQuery ? `필터 (${displayLabels.length}건)` : "전체"}
                        </td>
                        {analysisResult.series.map((s, si) => {
                          // 검색 시에만 동적 계산, 아니면 미리 계산된 totalValue 사용
                          let total: number;
                          if (tableSearchQuery) {
                            const allRows = displayLabels.flatMap((lb) => s.groups[lb] || []);
                            const m = config.metrics.find((x) => x.id === s.metricId);
                            total = aggregateValues(allRows, s.metricId, s.aggMethod, m);
                          } else {
                            total = s.totalValue;
                          }
                          return (
                            <td key={si} className="p-2 text-right tabular-nums">
                              {formatNumber(total)}
                            </td>
                          );
                        })}
                      </tr>
                    </tbody>
                  </table>
                </div>
              ) : (
                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                  {displayLabels.length === 0 && (
                    <div className="col-span-full p-6 text-center text-xs text-muted-foreground">
                      {tableSearchQuery ? "검색 결과가 없습니다" : "데이터가 없습니다"}
                    </div>
                  )}
                  {displayLabels.map((label) => {
                    const firstS = analysisResult.series[0];
                    const val = firstS ? (firstS.values[label] || 0) : 0;
                    return (
                      <div
                        key={label}
                        className="cursor-pointer rounded-lg border p-4 transition-shadow hover:shadow-md"
                        onClick={() => setDrilldownLabel(label)}
                      >
                        <p className="text-sm font-medium">{label}</p>
                        <p className="mt-1 text-xl font-bold tabular-nums">
                          {formatNumber(val)}
                          <span className="ml-1 text-xs font-normal text-muted-foreground">
                            {firstS?.metricUnit}
                          </span>
                        </p>
                        {analysisResult.series.length > 1 && (
                          <p className="mt-1 truncate text-xs text-muted-foreground">
                            {analysisResult.series.slice(1).map((s) => {
                              const v = s.values[label] || 0;
                              return `${s.condName}-${s.metricName}: ${formatNumber(v)}`;
                            }).join(" | ")}
                          </p>
                        )}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        )}

        {/* 드릴다운 */}
        {drilldownLabel && (
          <div className="rounded-md border border-primary/30 bg-primary/5">
            <div className="flex items-center justify-between border-b p-3">
              <h3 className="text-sm font-semibold">{drilldownLabel} 상세</h3>
              <button
                onClick={() => setDrilldownLabel(null)}
                className="rounded p-1 text-sm hover:bg-muted"
              >
                X
              </button>
            </div>
            <div className="overflow-x-auto p-3">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b">
                    {config.drilldownColumns.map((col) => (
                      <th
                        key={col.id}
                        className={cn("p-2 text-xs", col.align === "right" ? "text-right" : "text-left")}
                      >
                        {col.name}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {rawData
                    .filter((d) => getGroupKey(d, groupBy) === drilldownLabel)
                    .map((r, i) => (
                      <tr key={i} className="border-b">
                        {config.drilldownColumns.map((col) => (
                          <td
                            key={col.id}
                            className={cn(
                              "p-2 text-xs",
                              col.align === "right" ? "text-right tabular-nums" : ""
                            )}
                          >
                            {renderCellValue(r, col)}
                          </td>
                        ))}
                      </tr>
                    ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* 원본 데이터 */}
        <div className="rounded-md border">
          <button
            className="flex w-full items-center justify-between p-3 text-left hover:bg-muted/50"
            onClick={() => setRawDataOpen(!rawDataOpen)}
          >
            <span className="text-sm font-semibold">백 데이터 (원본)</span>
            <span className={cn("text-xs transition-transform", !rawDataOpen && "-rotate-90")}>
              ▼
            </span>
          </button>
          {rawDataOpen && (
            <div className="overflow-x-auto border-t p-3">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b">
                    {config.rawDataColumns.map((col) => (
                      <th
                        key={col.id}
                        className={cn("p-2 text-xs", col.align === "right" ? "text-right" : "text-left")}
                      >
                        {col.name}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {rawData.slice(0, 100).map((r, i) => (
                    <tr key={i} className="border-b">
                      {config.rawDataColumns.map((col) => (
                        <td
                          key={col.id}
                          className={cn(
                            "p-2 text-xs",
                            col.align === "right" ? "text-right tabular-nums" : ""
                          )}
                        >
                          {renderCellValue(r, col)}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
              {rawData.length > 100 && (
                <p className="mt-2 text-center text-xs text-muted-foreground">
                  상위 100건만 표시 (전체 {rawData.length}건)
                </p>
              )}
            </div>
          )}
        </div>

        {/* 데이터 없음 */}
        {!isLoading && rawData.length === 0 && (
          <div className="flex flex-col items-center justify-center py-16 text-center">
            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
              <svg className="h-8 w-8 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
                  d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                />
              </svg>
            </div>
            <h3 className="text-lg font-semibold">{config.emptyMessage}</h3>
            <p className="mt-1 text-sm text-muted-foreground">
              기간을 변경하거나 데이터를 확인해주세요
            </p>
          </div>
        )}
      </div>

      {/* 프리셋 저장 모달 */}
      <Dialog open={presetModalOpen} onOpenChange={setPresetModalOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">
              {presetMode === "update" ? "조건 수정" : "신규 조건 저장"}
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-3">
            <div>
              <Label className="text-xs sm:text-sm">
                조건명 <span className="text-destructive">*</span>
              </Label>
              <Input
                value={presetName}
                onChange={(e) => setPresetName(e.target.value)}
                placeholder="예: 월별 추이 분석"
                className="h-8 text-xs sm:h-10 sm:text-sm"
              />
            </div>
            <div>
              <Label className="text-xs sm:text-sm">설명</Label>
              <Input
                value={presetDesc}
                onChange={(e) => setPresetDesc(e.target.value)}
                placeholder="조건 설명 (선택사항)"
                className="h-8 text-xs sm:h-10 sm:text-sm"
              />
            </div>
          </div>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              variant="outline"
              onClick={() => setPresetModalOpen(false)}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
              onClick={savePreset}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              {presetMode === "update" ? "수정 저장" : "저장"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <ScrollToTop />
    </div>
  );
}