xiaoxia-saas/apps/web/src/components/title/TitleMiniPreview.tsx

/**
 * 标题迷你 Canvas 预览（#2001）
 *
 * 渲染一张指定宽度的小 Canvas 预览标题效果，用于：
 * - 预设卡片缩略图
 * - 样式面板顶部的实时预览
 *
 * 与 titleCanvas.ts 渲染逻辑保持一致，但：
 * - 固定分辨率（width × 宽高比约 2:1）
 * - 不调用 ffmpeg，只做视觉预览
 * - 支持背景色块、描边宽度/颜色、阴影参数化、行距、自动换行
 */
import React, { useEffect, useRef } from "react"
import type { TitleStyleSettings } from "@/components/title/settings"
import { getFontFamily } from "@/components/title/constants"

interface Props {
  settings: TitleStyleSettings
  width?: number
  sampleText?: string
  /** 背景（预览用，默认深色渐变模拟视频底），transparent=true 时忽略 */
  background?: string
  /** 高度（可选，默认按 portrait 选比例） */
  height?: number
  /** 透明背景（卡片/编辑器预览叠加在图片上时使用） */
  transparent?: boolean
  /** 纵向竖屏预览（9:16），true 时 aspect=16/9 适配手机视频比例 */
  portrait?: boolean
}

/** 按 maxCharsPerLine 自动换行 */
function wrapLines(text: string, maxChars: number): string[] {
  const manual = text
    .split(/[/／\n]/)
    .map((l) => l.trim())
    .filter(Boolean)
  if (!maxChars || maxChars <= 0) return manual
  const out: string[] = []
  for (const line of manual) {
    if (line.length <= maxChars) {
      out.push(line)
      continue
    }
    let cur = ""
    for (const ch of line) {
      cur += ch
      if (cur.length >= maxChars) {
        out.push(cur)
        cur = ""
      }
    }
    if (cur) out.push(cur)
  }
  return out
}

const TitleMiniPreview: React.FC<Props> = ({
  settings,
  width = 200,
  sampleText,
  background = "linear-gradient(135deg,#1f2937,#111827)",
  height,
  transparent = false,
  portrait = false,
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const h = height ?? Math.round(width * (portrait ? 16 / 9 : 1 / 1.8))
  const text = (sampleText || "预览标题").trim() || "预览标题"

  useEffect(() => {
    let cancelled = false
    const draw = () => {
      if (cancelled) return
      const cvs = canvasRef.current
      if (!cvs) return
      const dpr = window.devicePixelRatio || 1
      cvs.width = width * dpr
      cvs.height = h * dpr
      cvs.style.width = `${width}px`
      cvs.style.height = `${h}px`
      const ctx = cvs.getContext("2d")
      if (!ctx) return
      ctx.scale(dpr, dpr)
      ctx.clearRect(0, 0, width, h)

      // 背景（transparent 时跳过，用于叠加在图片上）
      if (!transparent) {
        ctx.fillStyle = "#111827"
        ctx.fillRect(0, 0, width, h)
      }

      // 分辨率缩放：以 360 宽为基准（对应 720p 的一半），与外层 previewScale/previewR 保持一致
      const r = previewR

      // 字体
      const size = r(settings.size)
      const ff = getFontFamily(settings.font)
      const parts: string[] = []
      if (settings.italic) parts.push("italic")
      if (settings.bold) parts.push("bold")
      parts.push(`${size}px`, ff)
      ctx.font = parts.join(" ")
      ctx.textAlign = "center"
      ctx.textBaseline = "middle"
      ctx.fillStyle = settings.color
      ctx.lineJoin = "round"

      // 阴影
      const shadowEnabled = !!settings.shadow
      const prevShadow = {
        c: ctx.shadowColor,
        b: ctx.shadowBlur,
        ox: ctx.shadowOffsetX,
        oy: ctx.shadowOffsetY,
      }
      if (shadowEnabled) {
        ctx.shadowColor = settings.shadowColor ?? "rgba(0,0,0,0.8)"
        ctx.shadowBlur = r(settings.shadowBlur ?? 4)
        ctx.shadowOffsetX = r(settings.shadowOffsetX ?? 2)
        ctx.shadowOffsetY = r(settings.shadowOffsetY ?? 2)
      }

      // 换行
      const lines = wrapLines(text, settings.maxCharsPerLine ?? 0)
      const lineH = size * (settings.lineHeight ?? 1.2)
      const totalH = lines.length * lineH
      let startY: number
      if (settings.position === "top") {
        startY = size / 2 + r(settings.marginTop ?? 24)
      } else if (settings.position === "center") {
        startY = h / 2 - totalH / 2 + size / 2
      } else {
        // bottom
        const botMargin = portrait ? r(24) : r(16)
        startY = h - totalH - botMargin + size / 2
      }
      let centerX = width / 2
      if (settings.position === "custom" && settings.posX != null) {
        centerX = (settings.posX / 100) * width
      }

      // 背景块
      if (settings.bgEnabled) {
        const pad = r(settings.bgPadding ?? 12)
        const rad = r(settings.bgRadius ?? 8)
        let maxLineW = 0
        for (const l of lines) {
          const m = ctx.measureText(l)
          if (m.width > maxLineW) maxLineW = m.width
        }
        const bw = maxLineW + pad * 2
        const bh = totalH + pad * 2
        const bx = centerX - bw / 2
        const by = startY - size / 2 - pad + (size - lineH) / 2
        ctx.shadowColor = "rgba(0,0,0,0)"
        ctx.shadowBlur = 0
        ctx.fillStyle = settings.bgColor ?? "rgba(0,0,0,0.5)"
        roundRect(ctx, bx, by, bw, bh, rad)
        ctx.fill()
        // 关键修复：画完背景块后必须把 fillStyle 重置为文字颜色，
        // 否则后续 fillText 会用 bgColor 填充文字，导致「文字看不见只剩色块」
        ctx.fillStyle = settings.color
        // 恢复阴影
        if (shadowEnabled) {
          ctx.shadowColor = settings.shadowColor ?? "rgba(0,0,0,0.8)"
          ctx.shadowBlur = r(settings.shadowBlur ?? 4)
          ctx.shadowOffsetX = r(settings.shadowOffsetX ?? 2)
          ctx.shadowOffsetY = r(settings.shadowOffsetY ?? 2)
        }
      }

      // 描边（先画，再画填充）
      const strokeEnabled = !!settings.stroke && (settings.strokeWidth ?? 0) > 0
      lines.forEach((line, i) => {
        const y = startY + i * lineH
        if (strokeEnabled) {
          ctx.shadowColor = "rgba(0,0,0,0)"
          ctx.shadowBlur = 0
          ctx.lineWidth = r(settings.strokeWidth ?? 4)
          ctx.strokeStyle = settings.strokeColor ?? "#000000"
          ctx.strokeText(line, centerX, y)
          // 恢复阴影
          if (shadowEnabled) {
            ctx.shadowColor = settings.shadowColor ?? "rgba(0,0,0,0.8)"
            ctx.shadowBlur = r(settings.shadowBlur ?? 4)
            ctx.shadowOffsetX = r(settings.shadowOffsetX ?? 2)
            ctx.shadowOffsetY = r(settings.shadowOffsetY ?? 2)
          }
        }
        ctx.fillText(line, centerX, y)
      })

      // 恢复
      ctx.shadowColor = prevShadow.c
      ctx.shadowBlur = prevShadow.b
      ctx.shadowOffsetX = prevShadow.ox
      ctx.shadowOffsetY = prevShadow.oy
    }
    // 计算当前字号（draw() 内部同样逻辑，抽出来供 fontString 复用）
    const previewScale = width / 360
    const previewR = (v: number) => Math.round(v * previewScale)
    const buildFontString = () => {
      const size = previewR(settings.size)
      const ff = getFontFamily(settings.font)
      const parts: string[] = []
      if (settings.italic) parts.push("italic")
      if (settings.bold) parts.push("bold")
      parts.push(`${size}px`, ff)
      return parts.join(" ")
    }

    // Web Font 加载保障：
    // 1) 等 document.fonts.ready（CSS @font-face 首次可用）
    // 2) 显式 FontFaceSet.load(fontString, text) 触发浏览器真正下载并加载
    //    当前字体到 Canvas 可用，避免首次绘制用 fallback 字体画出错字/色块
    const doDrawWhenReady = async () => {
      try {
        if (typeof document !== "undefined" && document.fonts) {
          await document.fonts.ready
          try {
            await document.fonts.load(buildFontString(), text)
          } catch {
            /* ignore */
          }
        }
      } finally {
        if (!cancelled) draw()
      }
    }
    doDrawWhenReady()
    return () => {
      cancelled = true
    }
  }, [settings, width, h, text, transparent, portrait, background])

  return (
    <canvas
      ref={canvasRef}
      style={{
        borderRadius: 6,
        display: "block",
        maxWidth: "100%",
        background: transparent ? "transparent" : background,
      }}
    />
  )
}

function roundRect(
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number,
  w: number,
  h: number,
  r: number,
) {
  const rr = Math.min(r, w / 2, h / 2)
  ctx.beginPath()
  ctx.moveTo(x + rr, y)
  ctx.lineTo(x + w - rr, y)
  ctx.quadraticCurveTo(x + w, y, x + w, y + rr)
  ctx.lineTo(x + w, y + h - rr)
  ctx.quadraticCurveTo(x + w, y + h, x + w - rr, y + h)
  ctx.lineTo(x + rr, y + h)
  ctx.quadraticCurveTo(x, y + h, x, y + h - rr)
  ctx.lineTo(x, y + rr)
  ctx.quadraticCurveTo(x, y, x + rr, y)
  ctx.closePath()
}

export default TitleMiniPreview