ttrpg-tools/src/components/md-deck/PltPreview.tsx

import { createSignal, For, Show, createMemo } from 'solid-js';
import type { PageData } from './hooks/usePDFExport';
import type { CardShape } from './types';
import { pts2plotter } from '../../plotcutter';

export interface PltPreviewProps {
  pages: PageData[];
  cardWidth: number;
  cardHeight: number;
  shape: CardShape;
  bleed: number;
  cornerRadius: number;
  onClose: () => void;
}

export interface CardPath {
  pageIndex: number;
  cardIndex: number;
  points: [number, number][];
  centerX: number;
  centerY: number;
  pathD: string;
  startPoint: [number, number];
  endPoint: [number, number];
}

/**
 * 生成带圆角的矩形路径点
 * @param width 矩形宽度
 * @param height 矩形高度
 * @param cornerRadius 圆角半径（mm）
 * @param segmentsPerCorner 每个圆角的分段数
 */
function getRoundedRectPoints(
  width: number,
  height: number,
  cornerRadius: number,
  segmentsPerCorner: number = 4
): [number, number][] {
  const points: [number, number][] = [];
  const r = Math.min(cornerRadius, width / 2, height / 2);
  
  if (r <= 0) {
    // 无圆角，返回普通矩形
    points.push([0, 0]);
    points.push([width, 0]);
    points.push([width, height]);
    points.push([0, height]);
    return points;
  }
  
  // 左上角圆角（从顶部开始，顺时针）
  for (let i = 0; i < segmentsPerCorner; i++) {
    const angle = (Math.PI / 2) * (i / segmentsPerCorner);
    points.push([
      r + r * Math.cos(angle - Math.PI / 2),
      r + r * Math.sin(angle - Math.PI / 2)
    ]);
  }
  
  // 右上角圆角
  for (let i = 0; i < segmentsPerCorner; i++) {
    const angle = (Math.PI / 2) * (i / segmentsPerCorner);
    points.push([
      width - r + r * Math.cos(angle),
      r + r * Math.sin(angle)
    ]);
  }
  
  // 右下角圆角
  for (let i = 0; i < segmentsPerCorner; i++) {
    const angle = (Math.PI / 2) * (i / segmentsPerCorner) + Math.PI / 2;
    points.push([
      width - r + r * Math.cos(angle),
      height - r + r * Math.sin(angle)
    ]);
  }
  
  // 左下角圆角
  for (let i = 0; i < segmentsPerCorner; i++) {
    const angle = (Math.PI / 2) * (i / segmentsPerCorner) + Math.PI;
    points.push([
      r + r * Math.cos(angle),
      height - r + r * Math.sin(angle)
    ]);
  }
  
  return points;
}

/**
 * 根据形状生成卡片轮廓点（单位：mm，相对于卡片左下角）
 */
function getCardShapePoints(
  shape: CardShape,
  width: number,
  height: number,
  cornerRadius: number = 0
): [number, number][] {
  if (shape === 'rectangle' && cornerRadius > 0) {
    return getRoundedRectPoints(width, height, cornerRadius);
  }
  
  const points: [number, number][] = [];

  switch (shape) {
    case 'circle': {
      const radius = Math.min(width, height) / 2;
      const centerX = width / 2;
      const centerY = height / 2;
      for (let i = 0; i < 36; i++) {
        const angle = (i / 36) * Math.PI * 2;
        points.push([
          centerX + radius * Math.cos(angle),
          centerY + radius * Math.sin(angle)
        ]);
      }
      break;
    }
    case 'triangle': {
      points.push([width / 2, 0]);
      points.push([0, height]);
      points.push([width, height]);
      break;
    }
    case 'hexagon': {
      const halfW = width / 2;
      const quarterH = height / 4;
      points.push([halfW, 0]);
      points.push([width, quarterH]);
      points.push([width, height - quarterH]);
      points.push([halfW, height]);
      points.push([0, height - quarterH]);
      points.push([0, quarterH]);
      break;
    }
    case 'rectangle':
    default: {
      points.push([0, 0]);
      points.push([width, 0]);
      points.push([width, height]);
      points.push([0, height]);
      break;
    }
  }

  return points;
}

/**
 * 计算多边形的中心点
 */
function calculateCenter(points: [number, number][]): { x: number; y: number } {
  let sumX = 0;
  let sumY = 0;
  for (const [x, y] of points) {
    sumX += x;
    sumY += y;
  }
  return {
    x: sumX / points.length,
    y: sumY / points.length
  };
}

/**
 * 根据进度计算小球在路径上的位置
 */
function getPointOnPath(points: [number, number][], progress: number): [number, number] {
  if (points.length === 0) return [0, 0];
  if (points.length === 1) return points[0];

  const totalSegments = points.length;
  const scaledProgress = progress * totalSegments;
  const segmentIndex = Math.floor(scaledProgress);
  const segmentProgress = scaledProgress - segmentIndex;

  const currentIndex = Math.min(segmentIndex, points.length - 1);
  const nextIndex = (currentIndex + 1) % points.length;

  const [x1, y1] = points[currentIndex];
  const [x2, y2] = points[nextIndex];

  return [
    x1 + (x2 - x1) * segmentProgress,
    y1 + (y2 - y1) * segmentProgress
  ];
}

/**
 * 将路径点转换为 SVG path 命令
 */
function pointsToSvgPath(points: [number, number][], closed = true): string {
  if (points.length === 0) return '';

  const [startX, startY] = points[0];
  let d = `M ${startX} ${startY}`;

  for (let i = 1; i < points.length; i++) {
    const [x, y] = points[i];
    d += ` L ${x} ${y}`;
  }

  if (closed) {
    d += ' Z';
  }

  return d;
}

/**
 * 生成空走路径（抬刀移动路径）
 */
function generateTravelPaths(
  cardPaths: CardPath[],
  a4Height: number
): [number, number][][] {
  const travelPaths: [number, number][][] = [];
  
  // 起点：左上角 (0, a4Height) - 注意 SVG 坐标 Y 向下，plotter 坐标 Y 向上
  const startPoint: [number, number] = [0, a4Height];
  
  if (cardPaths.length === 0) {
    return travelPaths;
  }
  
  // 从起点到第一张卡的起点
  travelPaths.push([startPoint, cardPaths[0].startPoint]);
  
  // 卡片之间的移动
  for (let i = 0; i < cardPaths.length - 1; i++) {
    const currentEnd = cardPaths[i].endPoint;
    const nextStart = cardPaths[i + 1].startPoint;
    travelPaths.push([currentEnd, nextStart]);
  }
  
  // 从最后一张卡返回起点
  travelPaths.push([cardPaths[cardPaths.length - 1].endPoint, startPoint]);
  
  return travelPaths;
}

/**
 * PLT 预览组件 - 显示切割路径预览
 */
export function PltPreview(props: PltPreviewProps) {
  const a4Width = 297; // 横向 A4
  const a4Height = 210;

  // 使用传入的圆角值，但也允许用户修改
  const [cornerRadius, setCornerRadius] = createSignal(props.cornerRadius);

  // 收集所有卡片路径
  const cardPaths: CardPath[] = [];
  let pathIndex = 0;

  // 计算切割尺寸（排版尺寸减去出血）
  const cutWidth = props.cardWidth - props.bleed * 2;
  const cutHeight = props.cardHeight - props.bleed * 2;

  for (const page of props.pages) {
    for (const card of page.cards) {
      if (card.side !== 'front') continue;

      const shapePoints = getCardShapePoints(props.shape, cutWidth, cutHeight, cornerRadius());
      const pagePoints = shapePoints.map(([x, y]) => [
        card.x + props.bleed + x,
        a4Height - (card.y + props.bleed + y)
      ] as [number, number]);

      const center = calculateCenter(pagePoints);
      const pathD = pointsToSvgPath(pagePoints);

      // 起点和终点（对于闭合路径是同一点）
      const startPoint = pagePoints[0];
      const endPoint = pagePoints[pagePoints.length - 1];

      cardPaths.push({
        pageIndex: page.pageIndex,
        cardIndex: pathIndex++,
        points: pagePoints,
        centerX: center.x,
        centerY: center.y,
        pathD,
        startPoint,
        endPoint
      });
    }
  }

  // 生成空走路径
  const travelPaths = generateTravelPaths(cardPaths, a4Height);
  const travelPathD = travelPaths.map(path => pointsToSvgPath(path, false)).join(' ');

  // 生成 HPGL 代码用于下载
  const allPaths = cardPaths.map(p => p.points);
  const plotterCode = allPaths.length > 0 ? pts2plotter(allPaths, a4Width, a4Height, 1) : '';

  const handleDownload = () => {
    if (!plotterCode) {
      alert('没有可导出的卡片');
      return;
    }

    const blob = new Blob([plotterCode], { type: 'application/vnd.hp-HPGL' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `deck-export-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  };

  const handleCornerRadiusChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    setCornerRadius(Number(target.value));
  };

  return (
    <div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
      <div class="min-h-screen py-20 px-4">
        {/* 头部控制栏 */}
        <div class="fixed top-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-3 flex items-center gap-4 z-50">
          <h2 class="text-base font-bold m-0">PLT 切割预览</h2>
          <div class="flex items-center gap-2">
            <label class="text-sm text-gray-600">圆角 (mm):</label>
            <input
              type="number"
              min="0"
              max="10"
              step="0.5"
              value={cornerRadius()}
              onInput={handleCornerRadiusChange}
              class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
            />
          </div>
          <div class="flex items-center gap-2 flex-1">
            <button
              onClick={handleDownload}
              class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-1"
              disabled={cardPaths.length === 0}
            >
              📥 下载 PLT
            </button>

            <button
              onClick={props.onClose}
              class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1.5 rounded text-sm font-medium cursor-pointer"
            >
              关闭
            </button>
          </div>
        </div>

        {/* 预览区域 */}
        <div class="flex flex-col items-center gap-8 mt-20">
          <For each={props.pages}>
            {(page) => {
              const pageCardPaths = cardPaths.filter(p => p.pageIndex === page.pageIndex);

              return (
                <svg
                  class="bg-white shadow-xl"
                  viewBox={`0 0 ${a4Width} ${a4Height}`}
                  style={{
                    width: `${a4Width}mm`,
                    height: `${a4Height}mm`
                  }}
                  xmlns="http://www.w3.org/2000/svg"
                >
                  {/* A4 边框 */}
                  <rect
                    x="0"
                    y="0"
                    width={a4Width}
                    height={a4Height}
                    fill="none"
                    stroke="#ccc"
                    stroke-width="0.5"
                  />

                  {/* 页面边框 */}
                  <rect
                    x={page.frameBounds.minX}
                    y={page.frameBounds.minY}
                    width={page.frameBounds.maxX - page.frameBounds.minX}
                    height={page.frameBounds.maxY - page.frameBounds.minY}
                    fill="none"
                    stroke="#888"
                    stroke-width="0.2"
                  />

                  {/* 空走路径（虚线） */}
                  <Show when={travelPathD}>
                    <path
                      d={travelPathD}
                      fill="none"
                      stroke="#999"
                      stroke-width="0.2"
                      stroke-dasharray="2 2"
                    />
                  </Show>

                  {/* 切割路径 */}
                  <For each={pageCardPaths}>
                    {(path) => {
                      return (
                        <g>
                          {/* 切割路径 */}
                          <path
                            d={path.pathD}
                            fill="none"
                            stroke="#3b82f6"
                            stroke-width="0.3"
                          />

                          {/* 动画小球 */}
                          <circle
                            r="0.8"
                            fill="#ef4444"
                          >
                            <animateMotion dur="4s" repeatCount="indefinite" path={path.pathD}>
                            </animateMotion>
                          </circle>

                          {/* 序号标签 */}
                          <g transform={`translate(${path.centerX}, ${path.centerY})`}>
                            <circle
                              r="2"
                              fill="white"
                              stroke="#3b82f6"
                              stroke-width="0.1"
                            />
                            <text
                              text-anchor="middle"
                              dominant-baseline="middle"
                              font-size="1.5"
                              fill="#3b82f6"
                              font-weight="bold"
                            >
                              {path.cardIndex + 1}
                            </text>
                          </g>
                        </g>
                      );
                    }}
                  </For>
                </svg>
              );
            }}
          </For>
        </div>

        {/* 图例说明 */}
        <div class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-2 flex items-center gap-4 z-50">
          <div class="flex items-center gap-2">
            <div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #999" }}></div>
            <span class="text-sm text-gray-600">空走路径</span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-6 h-0.5" style={{ "border-bottom": "2px solid #3b82f6" }}></div>
            <span class="text-sm text-gray-600">切割路径</span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-4 h-4 rounded-full bg-red-500"></div>
            <span class="text-sm text-gray-600">刀头</span>
          </div>
        </div>
      </div>
    </div>
  );
}