export type ProofHtmlInput = {
  redeemImageBase64: string
  timeImageBase64: string
  redeemMessage?: string
  timePageUrl: string
}

export function buildProofHtml({
  redeemImageBase64,
  timeImageBase64,
  redeemMessage,
  timePageUrl,
}: ProofHtmlInput): string {
  const capturedAt = new Date().toLocaleString('zh-CN', {
    hour12: false,
    timeZone: 'Asia/Shanghai',
  })

  return `<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>兑换与北京时间凭证</title>
    <style>
      :root {
        color-scheme: light;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background:
          radial-gradient(circle at top left, rgba(33, 150, 243, 0.16), transparent 28%),
          linear-gradient(180deg, #edf4ff 0%, #f6f8fc 52%, #eef1f7 100%);
        color: #142033;
      }
      .sheet {
        width: 1480px;
        margin: 0 auto;
        padding: 30px 24px 28px;
      }
      .hero {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: flex-end;
        padding: 0 6px 18px;
      }
      .eyebrow {
        margin: 0 0 12px;
        color: #1c78d0;
        font-size: 13px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }
      h1 {
        margin: 0;
        font-size: 44px;
        line-height: 1.08;
      }
      .summary {
        margin: 14px 0 0;
        font-size: 18px;
        line-height: 1.7;
        color: #52627a;
      }
      .meta {
        min-width: 320px;
        padding: 18px 20px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.76);
        border: 1px solid rgba(20, 32, 51, 0.08);
        box-shadow: 0 18px 48px rgba(29, 55, 90, 0.08);
      }
      .meta strong,
      .meta span {
        display: block;
      }
      .meta strong {
        font-size: 13px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #60748d;
      }
      .meta span {
        margin-top: 8px;
        font-size: 20px;
        color: #142033;
        line-height: 1.5;
        overflow-wrap: anywhere;
      }
      .card {
        margin-top: 16px;
        padding: 20px;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(20, 32, 51, 0.08);
        box-shadow: 0 24px 80px rgba(24, 41, 72, 0.1);
      }
      .card h2 {
        margin: 0;
        font-size: 30px;
      }
      .card p {
        margin: 8px 0 0;
        color: #5a6b83;
        line-height: 1.65;
        font-size: 16px;
      }
      .preview {
        margin-top: 14px;
        overflow: hidden;
        border-radius: 20px;
        border: 1px solid rgba(20, 32, 51, 0.08);
        background: #dfe7f3;
      }
      .preview img {
        display: block;
        width: 100%;
        height: auto;
      }
      .preview--time {
        max-height: 500px;
      }
      .preview--time img {
        object-fit: cover;
        object-position: top center;
      }
      .url {
        margin-top: 10px;
        font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
        font-size: 14px;
        color: #58708f;
        overflow-wrap: anywhere;
      }
    </style>
  </head>
  <body>
    <main class="sheet">
      <section class="hero">
        <div>
          <p class="eyebrow">Tencent Redeem Proof</p>
          <h1>兑换截图与北京时间截图</h1>
          <p class="summary">用于留存兑换结果与北京时间检索页的组合凭证。</p>
        </div>
        <div class="meta">
          <strong>Captured At</strong>
          <span>${escapeHtml(capturedAt)}</span>
        </div>
      </section>
      <section class="card">
        <h2>兑换结果截图</h2>
        <p>${escapeHtml(redeemMessage || '兑换完成')}</p>
        <div class="preview">
          <img src="data:image/png;base64,${redeemImageBase64}" alt="兑换结果截图" />
        </div>
      </section>
      <section class="card">
        <h2>百度检索“北京时间”截图</h2>
        <p>单独标签页打开百度搜索结果并截图。</p>
        <div class="url">${escapeHtml(timePageUrl)}</div>
        <div class="preview preview--time">
          <img src="data:image/png;base64,${timeImageBase64}" alt="北京时间截图" />
        </div>
      </section>
    </main>
  </body>
</html>`
}

export function escapeHtml(value: unknown): string {
  return String(value || '')
    .replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
}
