"use client";

/**
 * pop-card-list-v2 런타임 컴포넌트
 *
 * pop-card-list의 데이터 로딩/필터링/페이징/장바구니 로직을 재활용하되,
 * 카드 내부 렌더링은 CSS Grid + 셀 타입별 렌더러(cell-renderers.tsx)로 대체.
 */

import React, { useEffect, useState, useRef, useMemo, useCallback } from "react";
import { useRouter } from "next/navigation";
import {
  Loader2, ChevronDown, ChevronUp, ChevronLeft, ChevronRight, Trash2,
} from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import type {
  PopCardListV2Config,
  CardGridConfigV2,
  CardCellDefinitionV2,
  CardInputFieldConfig,
  CardCartActionConfig,
  CardPackageConfig,
  CardPresetSpec,
  CartItem,
  PackageEntry,
  CollectDataRequest,
  CollectedDataResponse,
  TimelineProcessStep,
  TimelineDataSource,
  ActionButtonUpdate,
  StatusValueMapping,
} from "../types";
import { CARD_PRESET_SPECS, DEFAULT_CARD_IMAGE } from "../types";
import { dataApi } from "@/lib/api/data";
import { screenApi } from "@/lib/api/screen";
import { apiClient } from "@/lib/api/client";
import { usePopEvent } from "@/hooks/pop/usePopEvent";
import { useCartSync } from "@/hooks/pop/useCartSync";
import { NumberInputModal } from "../pop-card-list/NumberInputModal";
import { renderCellV2 } from "./cell-renderers";

type RowData = Record<string, unknown>;

// cart_items 행 파싱 (pop-card-list에서 그대로 차용)
function parseCartRow(dbRow: Record<string, unknown>): Record<string, unknown> {
  let rowData: Record<string, unknown> = {};
  try {
    const raw = dbRow.row_data;
    if (typeof raw === "string" && raw.trim()) rowData = JSON.parse(raw);
    else if (typeof raw === "object" && raw !== null) rowData = raw as Record<string, unknown>;
  } catch { rowData = {}; }

  return {
    ...rowData,
    __cart_id: dbRow.id,
    __cart_quantity: Number(dbRow.quantity) || 0,
    __cart_package_unit: dbRow.package_unit || "",
    __cart_package_entries: dbRow.package_entries,
    __cart_status: dbRow.status || "in_cart",
    __cart_memo: dbRow.memo || "",
    __cart_row_key: dbRow.row_key || "",
    __cart_modified: false,
  };
}

// 레거시 statusValues(고정 4키 객체) → statusMappings(동적 배열) 자동 변환
function resolveStatusMappings(src: TimelineDataSource): StatusValueMapping[] {
  if (src.statusMappings && src.statusMappings.length > 0) return src.statusMappings;

  // 레거시 호환: 기존 statusValues 객체가 있으면 변환
  const sv = (src as Record<string, unknown>).statusValues as Record<string, string> | undefined;
  return [
    { dbValue: sv?.waiting || "waiting", label: "대기", semantic: "pending" as const },
    { dbValue: sv?.accepted || "accepted", label: "접수", semantic: "active" as const },
    { dbValue: sv?.inProgress || "in_progress", label: "진행중", semantic: "active" as const },
    { dbValue: sv?.completed || "completed", label: "완료", semantic: "done" as const },
  ];
}

interface PopCardListV2ComponentProps {
  config?: PopCardListV2Config;
  className?: string;
  screenId?: string;
  componentId?: string;
  currentRowSpan?: number;
  currentColSpan?: number;
  onRequestResize?: (componentId: string, newRowSpan: number, newColSpan?: number) => void;
}

export function PopCardListV2Component({
  config,
  className,
  screenId,
  componentId,
  currentRowSpan,
  currentColSpan,
  onRequestResize,
}: PopCardListV2ComponentProps) {
  const { subscribe, publish } = usePopEvent(screenId || "default");
  const router = useRouter();

  const isCartListMode = config?.cartListMode?.enabled === true;
  const [inheritedConfig, setInheritedConfig] = useState<Partial<PopCardListV2Config> | null>(null);
  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());

  const effectiveConfig = useMemo<PopCardListV2Config | undefined>(() => {
    if (!isCartListMode || !inheritedConfig) return config;
    return {
      ...config,
      ...inheritedConfig,
      cartListMode: config?.cartListMode,
      dataSource: config?.dataSource,
    } as PopCardListV2Config;
  }, [config, inheritedConfig, isCartListMode]);

  const isHorizontalMode = (effectiveConfig?.scrollDirection || "vertical") === "horizontal";
  const maxGridColumns = effectiveConfig?.gridColumns || 2;
  const configGridRows = effectiveConfig?.gridRows || 3;
  const dataSource = effectiveConfig?.dataSource;
  const cardGrid = effectiveConfig?.cardGrid;

  const sourceTableName = (!isCartListMode && dataSource?.tableName) || "";
  const cart = useCartSync(screenId || "", sourceTableName);

  const [rows, setRows] = useState<RowData[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // 외부 필터
  const [externalFilters, setExternalFilters] = useState<
    Map<string, {
      fieldName: string;
      value: unknown;
      filterConfig?: { targetColumn: string; targetColumns?: string[]; filterMode: string };
    }>
  >(new Map());

  useEffect(() => {
    if (!componentId) return;
    const unsub = subscribe(
      `__comp_input__${componentId}__filter_condition`,
      (payload: unknown) => {
        const data = payload as {
          value?: { fieldName?: string; value?: unknown };
          filterConfig?: { targetColumn: string; targetColumns?: string[]; filterMode: string };
          _connectionId?: string;
        };
        const connId = data?._connectionId || "default";
        setExternalFilters((prev) => {
          const next = new Map(prev);
          if (data?.value?.value) {
            next.set(connId, {
              fieldName: data.value.fieldName || "",
              value: data.value.value,
              filterConfig: data.filterConfig,
            });
          } else {
            next.delete(connId);
          }
          return next;
        });
      },
    );
    return unsub;
  }, [componentId, subscribe]);

  const cartRef = useRef(cart);
  cartRef.current = cart;

  // 저장 요청 수신
  useEffect(() => {
    if (!componentId || isCartListMode) return;
    const unsub = subscribe(
      `__comp_input__${componentId}__cart_save_trigger`,
      async (payload: unknown) => {
        const data = payload as { value?: { selectedColumns?: string[] } } | undefined;
        const ok = await cartRef.current.saveToDb(data?.value?.selectedColumns);
        publish(`__comp_output__${componentId}__cart_save_completed`, { success: ok });
      },
    );
    return unsub;
  }, [componentId, subscribe, publish, isCartListMode]);

  // 초기 장바구니 상태 전달
  useEffect(() => {
    if (!componentId || cart.loading || isCartListMode) return;
    publish(`__comp_output__${componentId}__cart_updated`, {
      count: cart.cartCount,
      isDirty: cart.isDirty,
    });
  }, [componentId, cart.loading, cart.cartCount, cart.isDirty, publish, isCartListMode]);

  const handleCardSelect = useCallback((row: RowData) => {
    if (!componentId) return;
    publish(`__comp_output__${componentId}__selected_row`, row);
  }, [componentId, publish]);

  // 확장/페이지네이션
  const [isExpanded, setIsExpanded] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [originalRowSpan, setOriginalRowSpan] = useState<number | null>(null);

  const containerRef = useRef<HTMLDivElement>(null);
  const [containerWidth, setContainerWidth] = useState(0);
  const [containerHeight, setContainerHeight] = useState(0);
  const baseContainerHeight = useRef(0);

  useEffect(() => {
    if (!containerRef.current) return;
    const observer = new ResizeObserver((entries) => {
      const entry = entries[0];
      if (!entry) return;
      const { width, height } = entry.contentRect;
      if (width > 0) setContainerWidth(width);
      if (height > 0) setContainerHeight(height);
    });
    observer.observe(containerRef.current);
    return () => observer.disconnect();
  }, []);

  const cardSizeKey = effectiveConfig?.cardSize || "large";
  const spec: CardPresetSpec = CARD_PRESET_SPECS[cardSizeKey] || CARD_PRESET_SPECS.large;

  const maxAllowedColumns = useMemo(() => {
    if (!currentColSpan) return maxGridColumns;
    if (currentColSpan >= 8) return maxGridColumns;
    return 1;
  }, [currentColSpan, maxGridColumns]);

  const minCardWidth = Math.round(spec.height * 1.6);
  const autoColumns = containerWidth > 0
    ? Math.max(1, Math.floor((containerWidth + spec.gap) / (minCardWidth + spec.gap)))
    : maxGridColumns;
  const gridColumns = Math.max(1, Math.min(autoColumns, maxGridColumns, maxAllowedColumns));
  const gridRows = configGridRows;

  // 외부 필터
  const filteredRows = useMemo(() => {
    if (externalFilters.size === 0) return rows;
    const allFilters = [...externalFilters.values()];
    return rows.filter((row) =>
      allFilters.every((filter) => {
        const searchValue = String(filter.value).toLowerCase();
        if (!searchValue) return true;
        const fc = filter.filterConfig;
        const columns: string[] =
          fc?.targetColumns?.length ? fc.targetColumns
            : fc?.targetColumn ? [fc.targetColumn]
              : filter.fieldName ? [filter.fieldName] : [];
        if (columns.length === 0) return true;
        const mode = fc?.filterMode || "contains";
        return columns.some((col) => {
          const cellValue = String(row[col] ?? "").toLowerCase();
          switch (mode) {
            case "equals": return cellValue === searchValue;
            case "starts_with": return cellValue.startsWith(searchValue);
            default: return cellValue.includes(searchValue);
          }
        });
      }),
    );
  }, [rows, externalFilters]);

  const overflowCfg = effectiveConfig?.overflow;
  const baseVisibleCount = overflowCfg?.visibleCount ?? gridColumns * gridRows;
  const visibleCardCount = useMemo(() => Math.max(1, baseVisibleCount), [baseVisibleCount]);
  const hasMoreCards = filteredRows.length > visibleCardCount;
  const expandedCardsPerPage = useMemo(() => {
    if (overflowCfg?.mode === "pagination" && overflowCfg.pageSize) return overflowCfg.pageSize;
    if (overflowCfg?.mode === "loadMore" && overflowCfg.loadMoreCount) return overflowCfg.loadMoreCount + visibleCardCount;
    return Math.max(1, visibleCardCount * 2 + gridColumns);
  }, [visibleCardCount, gridColumns, overflowCfg]);

  const scrollAreaRef = useRef<HTMLDivElement>(null);

  const displayCards = useMemo(() => {
    if (!isExpanded) return filteredRows.slice(0, visibleCardCount);
    const start = (currentPage - 1) * expandedCardsPerPage;
    return filteredRows.slice(start, start + expandedCardsPerPage);
  }, [filteredRows, isExpanded, visibleCardCount, currentPage, expandedCardsPerPage]);

  const totalPages = isExpanded ? Math.ceil(filteredRows.length / expandedCardsPerPage) : 1;
  const needsPagination = isExpanded && totalPages > 1;

  const toggleExpand = () => {
    if (isExpanded) {
      if (!isHorizontalMode && originalRowSpan !== null && componentId && onRequestResize) {
        onRequestResize(componentId, originalRowSpan);
      }
      setCurrentPage(1);
      setOriginalRowSpan(null);
      baseContainerHeight.current = 0;
      setIsExpanded(false);
    } else {
      baseContainerHeight.current = containerHeight;
      if (!isHorizontalMode && componentId && onRequestResize && currentRowSpan !== undefined) {
        setOriginalRowSpan(currentRowSpan);
        onRequestResize(componentId, currentRowSpan * 2);
      }
      setIsExpanded(true);
    }
  };

  useEffect(() => {
    if (scrollAreaRef.current && isExpanded) {
      scrollAreaRef.current.scrollTop = 0;
      scrollAreaRef.current.scrollLeft = 0;
    }
  }, [currentPage, isExpanded]);

  // 데이터 조회
  const dataSourceKey = useMemo(() => JSON.stringify(dataSource || null), [dataSource]);
  const cartListModeKey = useMemo(() => JSON.stringify(config?.cartListMode || null), [config?.cartListMode]);

  // 셀 설정에서 timelineSource 탐색 (timeline/status-badge/action-buttons 중 하나에 설정됨)
  const timelineSource = useMemo<TimelineDataSource | undefined>(() => {
    const cells = cardGrid?.cells || [];
    for (const c of cells) {
      if ((c.type === "timeline" || c.type === "status-badge" || c.type === "action-buttons") && c.timelineSource?.processTable) {
        return c.timelineSource;
      }
    }
    return undefined;
  }, [cardGrid?.cells]);

  // 하위 데이터 조회 + __processFlow__ 가상 컬럼 주입
  const injectProcessFlow = useCallback(async (
    fetchedRows: RowData[],
    src: TimelineDataSource,
  ): Promise<RowData[]> => {
    if (fetchedRows.length === 0) return fetchedRows;
    const rowIds = fetchedRows.map((r) => String(r.id)).filter(Boolean);
    if (rowIds.length === 0) return fetchedRows;

    // statusMappings 동적 배열 → dbValue-to-내부키 맵 구축
    // 레거시 statusValues 객체도 자동 변환
    const mappings = resolveStatusMappings(src);
    const dbToInternal = new Map<string, string>();
    const dbToSemantic = new Map<string, string>();
    for (const m of mappings) {
      dbToInternal.set(m.dbValue, m.dbValue);
      dbToSemantic.set(m.dbValue, m.semantic);
    }

    const processResult = await dataApi.getTableData(src.processTable, {
      page: 1,
      size: 1000,
      sortBy: src.seqColumn || "seq_no",
      sortOrder: "asc",
    });
    const allProcesses = processResult.data || [];

    const processMap = new Map<string, TimelineProcessStep[]>();
    for (const p of allProcesses) {
      const fkValue = String(p[src.foreignKey] || "");
      if (!fkValue || !rowIds.includes(fkValue)) continue;
      if (!processMap.has(fkValue)) processMap.set(fkValue, []);

      const rawStatus = String(p[src.statusColumn] || "");
      const normalizedStatus = dbToInternal.get(rawStatus) || rawStatus;
      const semantic = dbToSemantic.get(rawStatus) || "pending";

      processMap.get(fkValue)!.push({
        seqNo: parseInt(String(p[src.seqColumn] || "0"), 10),
        processName: String(p[src.nameColumn] || ""),
        status: normalizedStatus,
        semantic: semantic as "pending" | "active" | "done",
        isCurrent: semantic === "active",
      });
    }

    // isCurrent 보정: active가 없으면 첫 pending을 current로
    for (const [, steps] of processMap) {
      steps.sort((a, b) => a.seqNo - b.seqNo);
      const hasActive = steps.some((s) => s.isCurrent);
      if (!hasActive) {
        const firstPending = steps.find((s) => {
          const sem = dbToSemantic.get(s.status) || "pending";
          return sem === "pending";
        });
        if (firstPending) {
          steps.forEach((s) => { s.isCurrent = false; });
          firstPending.isCurrent = true;
        }
      }
    }

    return fetchedRows.map((row) => ({
      ...row,
      __processFlow__: processMap.get(String(row.id)) || [],
    }));
  }, []);

  const fetchData = useCallback(async () => {
    if (!dataSource?.tableName) { setLoading(false); setRows([]); return; }

    setLoading(true);
    setError(null);
    try {
      const filters: Record<string, unknown> = {};
      if (dataSource.filters?.length) {
        dataSource.filters.forEach((f) => {
          if (f.column && f.value && (!f.operator || f.operator === "=")) filters[f.column] = f.value;
        });
      }
      const sortArray = Array.isArray(dataSource.sort)
        ? dataSource.sort
        : dataSource.sort && typeof dataSource.sort === "object"
          ? [dataSource.sort as { column: string; direction: "asc" | "desc" }]
          : [];
      const primarySort = sortArray[0];
      const size = dataSource.limit?.mode === "limited" && dataSource.limit?.count ? dataSource.limit.count : 100;

      const result = await dataApi.getTableData(dataSource.tableName, {
        page: 1,
        size,
        sortBy: primarySort?.column || undefined,
        sortOrder: primarySort?.direction,
        filters: Object.keys(filters).length > 0 ? filters : undefined,
      });

      let fetchedRows = result.data || [];
      const clientFilters = (dataSource.filters || []).filter(
        (f) => f.column && f.value && f.operator && f.operator !== "=",
      );
      if (clientFilters.length > 0) {
        fetchedRows = fetchedRows.filter((row) =>
          clientFilters.every((f) => {
            const cellVal = row[f.column];
            const filterVal = f.value;
            switch (f.operator) {
              case "!=": return String(cellVal ?? "") !== filterVal;
              case ">":  return Number(cellVal) > Number(filterVal);
              case ">=": return Number(cellVal) >= Number(filterVal);
              case "<":  return Number(cellVal) < Number(filterVal);
              case "<=": return Number(cellVal) <= Number(filterVal);
              case "like": return String(cellVal ?? "").toLowerCase().includes(filterVal.toLowerCase());
              default: return true;
            }
          }),
        );
      }

      // timelineSource 설정이 있으면 공정 데이터 조회하여 __processFlow__ 주입
      if (timelineSource) {
        try {
          fetchedRows = await injectProcessFlow(fetchedRows, timelineSource);
        } catch {
          // 공정 데이터 조회 실패 시 무시 (메인 데이터는 정상 표시)
        }
      }

      setRows(fetchedRows);
    } catch (err) {
      setError(err instanceof Error ? err.message : "데이터 조회 실패");
      setRows([]);
    } finally { setLoading(false); }
  }, [dataSource, timelineSource, injectProcessFlow]);

  useEffect(() => {
    if (isCartListMode) {
      const cartListMode = config!.cartListMode!;
      if (!cartListMode.sourceScreenId) { setLoading(false); setRows([]); return; }

      const fetchCartData = async () => {
        setLoading(true);
        setError(null);
        try {
          try {
            const layoutJson = await screenApi.getLayoutPop(cartListMode.sourceScreenId!);
            const componentsMap = layoutJson?.components || {};
            const componentList = Object.values(componentsMap) as any[];
            const matched = cartListMode.sourceComponentId
              ? componentList.find((c: any) => c.id === cartListMode.sourceComponentId)
              : componentList.find((c: any) => c.type === "pop-card-list-v2" || c.type === "pop-card-list");
            if (matched?.config) setInheritedConfig(matched.config);
          } catch { /* 레이아웃 로드 실패 시 자체 config 폴백 */ }

          const cartFilters: Record<string, unknown> = { status: cartListMode.statusFilter || "in_cart" };
          if (cartListMode.sourceScreenId) cartFilters.screen_id = String(cartListMode.sourceScreenId);
          const result = await dataApi.getTableData("cart_items", { size: 500, filters: cartFilters });
          setRows((result.data || []).map(parseCartRow));
        } catch (err) {
          setError(err instanceof Error ? err.message : "장바구니 데이터 조회 실패");
          setRows([]);
        } finally { setLoading(false); }
      };
      fetchCartData();
      return;
    }

    fetchData();
  }, [dataSourceKey, isCartListMode, cartListModeKey, fetchData]); // eslint-disable-line react-hooks/exhaustive-deps

  // 장바구니 목록 모드 콜백
  const handleDeleteItem = useCallback((cartId: string) => {
    setRows((prev) => prev.filter((r) => String(r.__cart_id) !== cartId));
    setSelectedKeys((prev) => { const next = new Set(prev); next.delete(cartId); return next; });
  }, []);

  const handleUpdateQuantity = useCallback((cartId: string, quantity: number, unit?: string, entries?: PackageEntry[]) => {
    setRows((prev) => prev.map((r) => {
      if (String(r.__cart_id) !== cartId) return r;
      return { ...r, __cart_quantity: quantity, __cart_package_unit: unit || r.__cart_package_unit, __cart_package_entries: entries || r.__cart_package_entries, __cart_modified: true };
    }));
  }, []);

  // 데이터 수집
  useEffect(() => {
    if (!componentId) return;
    const unsub = subscribe(
      `__comp_input__${componentId}__collect_data`,
      (payload: unknown) => {
        const request = (payload as Record<string, unknown>)?.value as CollectDataRequest | undefined;
        const selectedItems = isCartListMode
          ? filteredRows.filter((r) => selectedKeys.has(String(r.__cart_id ?? "")))
          : rows;
        const sm = config?.saveMapping;
        const mapping = sm?.targetTable && sm.mappings.length > 0
          ? { targetTable: sm.targetTable, columnMapping: Object.fromEntries(sm.mappings.filter((m) => m.sourceField && m.targetColumn).map((m) => [m.sourceField, m.targetColumn])) }
          : null;
        const cartChanges = cart.isDirty ? cart.getChanges() : undefined;
        const response: CollectedDataResponse = {
          requestId: request?.requestId ?? "",
          componentId: componentId,
          componentType: "pop-card-list-v2",
          data: { items: selectedItems, cartChanges } as any,
          mapping,
        };
        publish(`__comp_output__${componentId}__collected_data`, response);
      },
    );
    return unsub;
  }, [componentId, subscribe, publish, isCartListMode, filteredRows, rows, selectedKeys, cart]);

  // 선택 항목 이벤트
  useEffect(() => {
    if (!componentId || !isCartListMode) return;
    const selectedItems = filteredRows.filter((r) => selectedKeys.has(String(r.__cart_id ?? "")));
    publish(`__comp_output__${componentId}__selected_items`, selectedItems);
  }, [selectedKeys, filteredRows, componentId, isCartListMode, publish]);

  // 카드 영역 스타일
  const cardGap = effectiveConfig?.cardGap ?? spec.gap;
  const cardMinHeight = spec.height;
  const cardAreaStyle: React.CSSProperties = {
    gap: `${cardGap}px`,
    ...(isHorizontalMode
      ? {
          gridTemplateRows: `repeat(${gridRows}, minmax(${cardMinHeight}px, auto))`,
          gridAutoFlow: "column",
          gridAutoColumns: `${Math.round(cardMinHeight * 1.6)}px`,
        }
      : {
          gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
          gridAutoRows: `minmax(${cardMinHeight}px, auto)`,
        }),
  };

  const scrollClassName = isHorizontalMode
    ? "overflow-x-auto overflow-y-hidden"
    : isExpanded
      ? "overflow-y-auto overflow-x-hidden"
      : "overflow-hidden";

  return (
    <div ref={containerRef} className={`flex h-full w-full flex-col ${className || ""}`}>
      {isCartListMode && !config?.cartListMode?.sourceScreenId ? (
        <div className="flex flex-1 items-center justify-center rounded-md border border-dashed bg-muted/30 p-4">
          <p className="text-sm text-muted-foreground">원본 화면을 선택해주세요.</p>
        </div>
      ) : !isCartListMode && !dataSource?.tableName ? (
        <div className="flex flex-1 items-center justify-center rounded-md border border-dashed bg-muted/30 p-4">
          <p className="text-sm text-muted-foreground">데이터 소스를 설정해주세요.</p>
        </div>
      ) : loading ? (
        <div className="flex flex-1 items-center justify-center rounded-md border bg-muted/30 p-4">
          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
        </div>
      ) : error ? (
        <div className="flex flex-1 items-center justify-center rounded-md border border-destructive/50 bg-destructive/10 p-4">
          <p className="text-sm text-destructive">{error}</p>
        </div>
      ) : rows.length === 0 ? (
        <div className="flex flex-1 items-center justify-center rounded-md border border-dashed bg-muted/30 p-4">
          <p className="text-sm text-muted-foreground">데이터가 없습니다.</p>
        </div>
      ) : (
        <>
          {isCartListMode && (
            <div className="flex shrink-0 items-center gap-3 border-b px-3 py-2">
              <input
                type="checkbox"
                checked={selectedKeys.size === filteredRows.length && filteredRows.length > 0}
                onChange={(e) => {
                  if (e.target.checked) {
                    setSelectedKeys(new Set(filteredRows.map((r) => String(r.__cart_id ?? ""))));
                  } else {
                    setSelectedKeys(new Set());
                  }
                }}
                className="h-4 w-4 rounded border-input"
              />
              <span className="text-sm text-muted-foreground">
                {selectedKeys.size > 0 ? `${selectedKeys.size}개 선택됨` : "전체 선택"}
              </span>
            </div>
          )}

          <div
            ref={scrollAreaRef}
            className={`min-h-0 flex-1 grid ${scrollClassName}`}
            style={{ ...cardAreaStyle, alignContent: "start", justifyContent: isHorizontalMode ? "start" : "center" }}
          >
            {displayCards.map((row, index) => (
              <CardV2
                key={`card-${index}`}
                row={row}
                cardGrid={cardGrid}
                spec={spec}
                config={effectiveConfig}
                onSelect={handleCardSelect}
                cart={cart}
                publish={publish}
                parentComponentId={componentId}
                isCartListMode={isCartListMode}
                isSelected={selectedKeys.has(String(row.__cart_id ?? ""))}
                onToggleSelect={() => {
                  const cartId = row.__cart_id != null ? String(row.__cart_id) : "";
                  if (!cartId) return;
                  setSelectedKeys((prev) => { const next = new Set(prev); if (next.has(cartId)) next.delete(cartId); else next.add(cartId); return next; });
                }}
                onDeleteItem={handleDeleteItem}
                onUpdateQuantity={handleUpdateQuantity}
                onRefresh={fetchData}
              />
            ))}
          </div>

          {hasMoreCards && (
            <div className="shrink-0 border-t bg-background px-3 py-2">
              <div className="flex items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <Button variant="outline" size="sm" onClick={toggleExpand} className="h-9 px-4 text-sm font-medium">
                    {isExpanded ? (<>접기 <ChevronUp className="ml-1 h-4 w-4" /></>) : (<>더보기 <ChevronDown className="ml-1 h-4 w-4" /></>)}
                  </Button>
                  <span className="text-xs text-muted-foreground">
                    {filteredRows.length}건{externalFilters.size > 0 && filteredRows.length !== rows.length ? ` / ${rows.length}건` : ""}
                  </span>
                </div>
                {isExpanded && needsPagination && (
                  <div className="flex items-center gap-1.5">
                    <Button variant="default" size="sm" onClick={() => setCurrentPage((p) => Math.max(1, p - 1))} disabled={currentPage <= 1} className="h-9 w-9 p-0">
                      <ChevronLeft className="h-5 w-5" />
                    </Button>
                    <span className="min-w-[48px] text-center text-sm font-medium">{currentPage} / {totalPages}</span>
                    <Button variant="default" size="sm" onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))} disabled={currentPage >= totalPages} className="h-9 w-9 p-0">
                      <ChevronRight className="h-5 w-5" />
                    </Button>
                  </div>
                )}
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}

// ===== 카드 V2 =====

interface CardV2Props {
  row: RowData;
  cardGrid?: CardGridConfigV2;
  spec: CardPresetSpec;
  config?: PopCardListV2Config;
  onSelect?: (row: RowData) => void;
  cart: ReturnType<typeof useCartSync>;
  publish: (eventName: string, payload?: unknown) => void;
  parentComponentId?: string;
  isCartListMode?: boolean;
  isSelected?: boolean;
  onToggleSelect?: () => void;
  onDeleteItem?: (cartId: string) => void;
  onUpdateQuantity?: (cartId: string, quantity: number, unit?: string, entries?: PackageEntry[]) => void;
  onRefresh?: () => void;
}

function CardV2({
  row, cardGrid, spec, config, onSelect, cart, publish,
  parentComponentId, isCartListMode, isSelected, onToggleSelect,
  onDeleteItem, onUpdateQuantity, onRefresh,
}: CardV2Props) {
  const inputField = config?.inputField;
  const cartAction = config?.cartAction;
  const packageConfig = config?.packageConfig;
  const keyColumnName = cartAction?.keyColumn || "id";

  const [inputValue, setInputValue] = useState<number>(0);
  const [packageUnit, setPackageUnit] = useState<string | undefined>(undefined);
  const [packageEntries, setPackageEntries] = useState<PackageEntry[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const rowKey = keyColumnName && row[keyColumnName] ? String(row[keyColumnName]) : "";
  const isCarted = cart.isItemInCart(rowKey);
  const existingCartItem = cart.getCartItem(rowKey);

  // DB 장바구니 복원
  useEffect(() => {
    if (isCartListMode) return;
    if (existingCartItem && existingCartItem._origin === "db") {
      setInputValue(existingCartItem.quantity);
      setPackageUnit(existingCartItem.packageUnit);
      setPackageEntries(existingCartItem.packageEntries || []);
    }
  }, [isCartListMode, existingCartItem?._origin, existingCartItem?.quantity, existingCartItem?.packageUnit]);

  // 장바구니 목록 모드 초기값
  useEffect(() => {
    if (!isCartListMode) return;
    setInputValue(Number(row.__cart_quantity) || 0);
    setPackageUnit(row.__cart_package_unit ? String(row.__cart_package_unit) : undefined);
  }, [isCartListMode, row.__cart_quantity, row.__cart_package_unit]);

  // 제한 컬럼 자동 초기화
  const limitCol = inputField?.limitColumn || inputField?.maxColumn;
  const effectiveMax = useMemo(() => {
    if (limitCol) { const v = Number(row[limitCol]); if (!isNaN(v) && v > 0) return v; }
    return 999999;
  }, [limitCol, row]);

  useEffect(() => {
    if (isCartListMode) return;
    if (inputField?.enabled && limitCol && effectiveMax > 0 && effectiveMax < 999999) {
      setInputValue(effectiveMax);
    }
  }, [effectiveMax, inputField?.enabled, limitCol, isCartListMode]);

  const handleInputClick = (e: React.MouseEvent) => { e.stopPropagation(); setIsModalOpen(true); };
  const handleInputConfirm = (value: number, unit?: string, entries?: PackageEntry[]) => {
    setInputValue(value);
    setPackageUnit(unit);
    setPackageEntries(entries || []);
    if (isCartListMode) onUpdateQuantity?.(String(row.__cart_id), value, unit, entries);
  };

  const handleCartAdd = () => {
    if (!rowKey) return;
    cart.addItem({ row, quantity: inputValue, packageUnit, packageEntries: packageEntries.length > 0 ? packageEntries : undefined }, rowKey);
    if (parentComponentId) publish(`__comp_output__${parentComponentId}__cart_updated`, { count: cart.cartCount + 1, isDirty: true });
  };

  const handleCartCancel = () => {
    if (!rowKey) return;
    cart.removeItem(rowKey);
    if (parentComponentId) publish(`__comp_output__${parentComponentId}__cart_updated`, { count: Math.max(0, cart.cartCount - 1), isDirty: true });
  };

  const handleCartDelete = async (e: React.MouseEvent) => {
    e.stopPropagation();
    const cartId = row.__cart_id != null ? String(row.__cart_id) : "";
    if (!cartId) return;
    if (!window.confirm("이 항목을 장바구니에서 삭제하시겠습니까?")) return;
    try {
      await dataApi.updateRecord("cart_items", cartId, { status: "cancelled" });
      onDeleteItem?.(cartId);
    } catch { toast.error("삭제에 실패했습니다."); }
  };

  const borderClass = isCartListMode
    ? isSelected ? "border-primary border-2 hover:border-primary/80" : "hover:border-2 hover:border-blue-500"
    : isCarted ? "border-emerald-500 border-2 hover:border-emerald-600" : "hover:border-2 hover:border-blue-500";

  if (!cardGrid || cardGrid.cells.length === 0) {
    return (
      <div className={`flex items-center justify-center rounded-lg border p-4 ${borderClass}`} style={{ minHeight: `${spec.height}px` }}>
        <span className="text-xs text-muted-foreground">카드 레이아웃을 설정하세요</span>
      </div>
    );
  }

  const gridStyle: React.CSSProperties = {
    display: "grid",
    gridTemplateColumns: cardGrid.colWidths.length > 0
      ? cardGrid.colWidths.map((w) => `minmax(30px, ${w || "1fr"})`).join(" ")
      : "1fr",
    gridTemplateRows: cardGrid.rowHeights?.length
      ? cardGrid.rowHeights.map((h) => {
          if (!h) return "minmax(24px, auto)";
          if (h.endsWith("px")) return `minmax(${h}, auto)`;
          const px = Math.round(parseFloat(h) * 24) || 24;
          return `minmax(${px}px, auto)`;
        }).join(" ")
      : `repeat(${cardGrid.rows || 1}, minmax(24px, auto))`,
    gap: `${cardGrid.gap || 0}px`,
  };

  const justifyMap = { left: "flex-start", center: "center", right: "flex-end" } as const;
  const alignItemsMap = { top: "flex-start", middle: "center", bottom: "flex-end" } as const;

  return (
    <div
      className={`relative flex cursor-pointer flex-col rounded-lg border bg-card shadow-sm transition-all duration-150 hover:shadow-md ${borderClass}`}
      style={{ minHeight: `${spec.height}px` }}
      onClick={() => onSelect?.(row)}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onSelect?.(row); }}
    >
      {/* 장바구니 목록 모드: 체크박스 + 삭제 */}
      {isCartListMode && (
        <div className="absolute right-1 top-1 z-10 flex items-center gap-1">
          <input
            type="checkbox"
            checked={isSelected}
            onChange={(e) => { e.stopPropagation(); onToggleSelect?.(); }}
            onClick={(e) => e.stopPropagation()}
            className="h-4 w-4 rounded border-input"
          />
          <button type="button" onClick={handleCartDelete} className="rounded p-0.5 hover:bg-destructive/10">
            <Trash2 className="h-3.5 w-3.5 text-destructive" />
          </button>
        </div>
      )}

      {/* CSS Grid 기반 셀 렌더링 */}
      <div className="flex-1 overflow-hidden p-1" style={gridStyle}>
        {cardGrid.cells.map((cell) => (
          <div
            key={cell.id}
            className="overflow-hidden p-1"
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: alignItemsMap[cell.verticalAlign || "top"],
              alignItems: justifyMap[cell.align || "left"],
              gridColumn: `${cell.col} / span ${cell.colSpan || 1}`,
              gridRow: `${cell.row} / span ${cell.rowSpan || 1}`,
              border: cardGrid.showCellBorder ? "1px solid hsl(var(--border))" : "none",
            }}
          >
            {renderCellV2({
              cell,
              row,
              inputValue,
              isCarted,
              onInputClick: handleInputClick,
              onCartAdd: handleCartAdd,
              onCartCancel: handleCartCancel,
              onActionButtonClick: async (taskPreset, actionRow, buttonConfig) => {
                const cfg = buttonConfig as {
                  updates?: ActionButtonUpdate[];
                  targetTable?: string;
                  confirmMessage?: string;
                } | undefined;

                if (cfg?.updates && cfg.updates.length > 0 && cfg.targetTable) {
                  if (cfg.confirmMessage) {
                    if (!window.confirm(cfg.confirmMessage)) return;
                  }
                  try {
                    const rowId = actionRow.id ?? actionRow.pk;
                    if (!rowId) {
                      toast.error("대상 레코드의 ID를 찾을 수 없습니다.");
                      return;
                    }
                    const tasks = cfg.updates.map((u, idx) => ({
                      id: `btn-update-${idx}`,
                      type: "data-update" as const,
                      targetTable: cfg.targetTable!,
                      targetColumn: u.column,
                      operationType: "assign" as const,
                      valueSource: "fixed" as const,
                      fixedValue: u.valueType === "static" ? (u.value ?? "") :
                                  u.valueType === "currentUser" ? "__CURRENT_USER__" :
                                  u.valueType === "currentTime" ? "__CURRENT_TIME__" :
                                  u.valueType === "columnRef" ? String(actionRow[u.value ?? ""] ?? "") :
                                  (u.value ?? ""),
                    }));
                    const result = await apiClient.post("/pop/execute-action", {
                      tasks,
                      data: { items: [actionRow], fieldValues: {} },
                      mappings: {},
                    });
                    if (result.data?.success) {
                      toast.success(result.data.message || "처리 완료");
                      onRefresh?.();
                    } else {
                      toast.error(result.data?.message || "처리 실패");
                    }
                  } catch (err: unknown) {
                    toast.error(err instanceof Error ? err.message : "처리 중 오류 발생");
                  }
                  return;
                }
                if (parentComponentId) {
                  publish(`__comp_output__${parentComponentId}__action`, {
                    taskPreset,
                    row: actionRow,
                  });
                }
              },
              packageEntries,
              inputUnit: inputField?.unit,
            })}
          </div>
        ))}
      </div>

      {inputField?.enabled && (
        <NumberInputModal
          open={isModalOpen}
          onOpenChange={setIsModalOpen}
          unit={inputField.unit || "EA"}
          initialValue={inputValue}
          initialPackageUnit={packageUnit}
          maxValue={effectiveMax}
          packageConfig={packageConfig}
          showPackageUnit={inputField.showPackageUnit}
          onConfirm={handleInputConfirm}
        />
      )}
    </div>
  );
}