/**
 * 标题 PNG 生成器
 * ==============
 *
 * 将大标题/小标题绘制成透明 PNG，供 FFmpeg overlay 使用。
 * 效果与 Canvas 预览 100% 一致。
 */

import type { AssStyle } from './assGenerator';
import { setCanvasFont, drawTextBlock, loadCustomFont } from './canvasSubtitleDrawer';

const VIDEO_WIDTH = 1080;
const VIDEO_HEIGHT = 1920;

/**
 * 生成标题 PNG DataURL
 *
 * Canvas 尺寸与视频一致（1080x1920），只在标题区域绘制内容，
 * 其余部分透明。FFmpeg overlay 时直接 x=0:y=0 叠加即可。
 */
export async function generateTitlePngDataUrl(
  mainTitle: string | undefined,
  subTitle: string | undefined,
  mainTitleStyle: Partial<AssStyle> | undefined,
  subTitleStyle: Partial<AssStyle> | undefined,
): Promise<string> {
  // 确保字体已加载
  await loadCustomFont();

  const canvas = document.createElement('canvas');
  canvas.width = VIDEO_WIDTH;
  canvas.height = VIDEO_HEIGHT;

  const ctx = canvas.getContext('2d');
  if (!ctx) {
    throw new Error('无法获取 Canvas 2D 上下文');
  }

  // 清空为透明
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const scale = 1; // 1:1，Canvas 尺寸就是视频分辨率

  // ---- 绘制大标题（单行，不换行） ----
  // ASS alignment=8: marginV 是文字块顶部到画面顶部的距离
  // Canvas fillText y 是基线，基线 = 顶部 + ascent
  if (mainTitle && mainTitleStyle) {
    setCanvasFont(ctx, mainTitleStyle, scale);
    const marginV = mainTitleStyle.marginV ?? 360;
    const fontSize = mainTitleStyle.fontSize ?? 104;
    const metrics = ctx.measureText(mainTitle);
    const ascent = metrics.actualBoundingBoxAscent || fontSize * 0.72;
    const startY = marginV + ascent;
    drawTextBlock(ctx, mainTitle, VIDEO_WIDTH / 2, startY, mainTitleStyle, scale, VIDEO_WIDTH, 1);
  }

  // ---- 绘制小标题（单行，不换行） ----
  if (subTitle && subTitleStyle) {
    setCanvasFont(ctx, subTitleStyle, scale);
    const marginV = subTitleStyle.marginV ?? 480;
    const fontSize = subTitleStyle.fontSize ?? 88;
    const metrics = ctx.measureText(subTitle);
    const ascent = metrics.actualBoundingBoxAscent || fontSize * 0.72;
    const startY = marginV + ascent;
    drawTextBlock(ctx, subTitle, VIDEO_WIDTH / 2, startY, subTitleStyle, scale, VIDEO_WIDTH, 1);
  }

  return canvas.toDataURL('image/png');
}
