pipeline/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Preview.tsx

"use client";

/**
 * pop-card-list-v2 디자인 모드 미리보기
 *
 * 디자이너 캔버스에서 표시되는 미리보기.
 * CSS Grid 기반 셀 배치를 시각적으로 보여준다.
 */

import React from "react";
import { LayoutGrid, Package } from "lucide-react";
import type { PopCardListV2Config } from "../types";
import { CARD_SCROLL_DIRECTION_LABELS, CARD_SIZE_LABELS } from "../types";

interface PopCardListV2PreviewProps {
  config?: PopCardListV2Config;
}

export function PopCardListV2PreviewComponent({ config }: PopCardListV2PreviewProps) {
  const scrollDirection = config?.scrollDirection || "vertical";
  const cardSize = config?.cardSize || "medium";
  const dataSource = config?.dataSource;
  const cardGrid = config?.cardGrid;
  const hasTable = !!dataSource?.tableName;
  const cellCount = cardGrid?.cells?.length || 0;

  return (
    <div className="flex h-full w-full flex-col bg-muted/30 p-3">
      <div className="mb-2 flex items-center justify-between">
        <div className="flex items-center gap-2 text-muted-foreground">
          <LayoutGrid className="h-4 w-4" />
          <span className="text-xs font-medium">MES 공정흐름</span>
        </div>
        <div className="flex gap-1">
          <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[9px] text-primary">
            {CARD_SCROLL_DIRECTION_LABELS[scrollDirection]}
          </span>
          <span className="rounded bg-secondary px-1.5 py-0.5 text-[9px] text-secondary-foreground">
            {CARD_SIZE_LABELS[cardSize]}
          </span>
        </div>
      </div>

      {!hasTable ? (
        <div className="flex flex-1 items-center justify-center">
          <div className="text-center">
            <Package className="mx-auto mb-2 h-8 w-8 text-muted-foreground/50" />
            <p className="text-xs text-muted-foreground">데이터 소스를 설정하세요</p>
          </div>
        </div>
      ) : (
        <>
          <div className="mb-2 text-center">
            <span className="rounded bg-muted px-2 py-0.5 text-[10px] text-muted-foreground">
              {dataSource!.tableName}
            </span>
            <span className="ml-1 text-[10px] text-muted-foreground/60">
              ({cellCount}셀)
            </span>
          </div>

          <div className="flex flex-1 flex-col gap-2">
            {[0, 1].map((cardIdx) => (
              <div key={cardIdx} className="rounded-md border bg-card p-2">
                {cellCount === 0 ? (
                  <div className="flex h-12 items-center justify-center">
                    <span className="text-[10px] text-muted-foreground">셀을 추가하세요</span>
                  </div>
                ) : (
                  <div
                    style={{
                      display: "grid",
                      gridTemplateColumns: cardGrid!.colWidths?.length
                        ? cardGrid!.colWidths.map((w) => w || "1fr").join(" ")
                        : `repeat(${cardGrid!.cols || 1}, 1fr)`,
                      gridTemplateRows: `repeat(${cardGrid!.rows || 1}, minmax(16px, auto))`,
                      gap: "2px",
                    }}
                  >
                    {cardGrid!.cells.map((cell) => (
                      <div
                        key={cell.id}
                        className="rounded border border-dashed border-border/50 bg-muted/20 px-1 py-0.5"
                        style={{
                          gridColumn: `${cell.col} / span ${cell.colSpan || 1}`,
                          gridRow: `${cell.row} / span ${cell.rowSpan || 1}`,
                        }}
                      >
                        <span className="text-[8px] text-muted-foreground">
                          {cell.type}
                          {cell.columnName ? `: ${cell.columnName}` : ""}
                        </span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}