/**
 * Self-contained, print-optimized HTML document for a conversation export ("PDF (print)").
 * No external assets: inline CSS, inline SVG brand mark, system fonts. Works offline and in `window.print()`.
 */
import { escapeHtml, markdownToHtml } from "./markdown-html";

export interface ExportDocMessage {
  role: string;
  content: string;
  modelKey: string | null;
  createdAt: string | null;
  reasoning?: string | null;
  tools?: { name: string; argumentsText?: string; isError?: boolean }[];
  attachments?: { name: string; mimeType: string; sizeBytes: number }[];
  citations?: { url?: string; title?: string }[];
  usage?: { inputTokens?: number; outputTokens?: number; totalTokens?: number } | null;
  costUsd?: number | null;
  latencyMs?: number | null;
}

export interface ExportDocInput {
  title: string;
  createdAt: string;
  exportedAt: string;
  systemPrompt?: string | null;
  messages: ExportDocMessage[];
  totals?: { costUsd?: number; inputTokens?: number; outputTokens?: number };
  appUrl: string;
  /** Auto-open the print dialog on load (used by "PDF (print)"). */
  autoPrint?: boolean;
}

const BRAND_MARK = `<svg width="28" height="28" viewBox="0 0 32 32" fill="none" aria-hidden="true"><defs><linearGradient id="g" x1="3" y1="3" x2="29" y2="29" gradientUnits="userSpaceOnUse"><stop stop-color="#6366f1"/><stop offset="0.52" stop-color="#8b5cf6"/><stop offset="1" stop-color="#f472b6"/></linearGradient></defs><rect x="1" y="1" width="30" height="30" rx="9" fill="url(#g)"/><g fill="#fff"><rect x="7.5" y="7" width="5" height="18" rx="2.5"/><path fill-rule="evenodd" d="M12 7h5.4a5.6 5.6 0 0 1 0 11.2H12V7Zm0 3.4v4.4h5.3a2.2 2.2 0 0 0 0-4.4H12Z"/><rect x="24.6" y="9.1" width="3.2" height="2.3" rx="1.15" opacity="0.95"/><rect x="24.6" y="12.55" width="3.2" height="2.3" rx="1.15" opacity="0.62"/><rect x="24.6" y="16" width="3.2" height="2.3" rx="1.15" opacity="0.34"/></g></svg>`;

const CSS = `
:root{--fg:#14151a;--muted:#5c6070;--subtle:#8b8f9d;--border:#e3e3df;--bg:#fff;--soft:#f4f4f2;--accent:#5457d6}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.page{max-width:760px;margin:0 auto;padding:32px 24px 64px}
.brand{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.brand .name{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:17px}
.brand .name span b{font-weight:500;color:var(--muted)}
.brand .sub{font-size:12px;color:var(--subtle)}
.toolbar{display:flex;gap:8px}
.toolbar button{font:inherit;font-size:13px;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);cursor:pointer}
.toolbar button.primary{background:var(--fg);color:#fff;border-color:var(--fg)}
h1.title{font-size:26px;line-height:1.2;letter-spacing:-.02em;margin:28px 0 8px;text-wrap:balance}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:13px;margin-bottom:8px}
.meta .chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:1px 9px;font-size:12px;color:var(--muted);background:var(--soft)}
.system{margin:18px 0 0;padding:12px 14px;border-left:3px solid var(--border);background:var(--soft);border-radius:0 10px 10px 0;font-size:13.5px;color:var(--muted);white-space:pre-wrap}
.system b{color:var(--fg)}
.messages{margin-top:28px;display:flex;flex-direction:column;gap:22px}
.msg{break-inside:avoid;page-break-inside:avoid}
.msg header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:12.5px;color:var(--muted)}
.msg header .who{font-weight:600;color:var(--fg)}
.msg header .who small{font-weight:400;color:var(--subtle);margin-left:6px}
.msg header time{font-variant-numeric:tabular-nums;color:var(--subtle)}
.msg.user .body{background:var(--soft);border-radius:14px;padding:12px 16px}
.msg.assistant .body{padding:0 0 0 14px;border-left:2px solid var(--border)}
.body>*+*{margin-top:.75em}
.body p{margin:0}
.body h1,.body h2,.body h3,.body h4{line-height:1.3;margin:1.1em 0 .3em;letter-spacing:-.01em}
.body h1{font-size:1.3em}.body h2{font-size:1.18em}.body h3{font-size:1.06em}.body h4{font-size:1em}
.body ul,.body ol{padding-left:1.4em;margin:0}
.body li+li{margin-top:.2em}
.body blockquote{margin:0;padding-left:.9em;border-left:3px solid var(--border);color:var(--muted)}
.body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;background:var(--soft);border:1px solid var(--border);border-radius:5px;padding:.1em .38em}
.body pre{margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--soft);overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.body pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.55}
.body pre[data-lang]::before{content:attr(data-lang);display:block;font-size:10.5px;color:var(--subtle);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.body table{border-collapse:collapse;width:100%;font-size:.92em}
.body th,.body td{border:1px solid var(--border);padding:.4em .7em;text-align:left;vertical-align:top}
.body th{background:var(--soft)}
.body a{color:var(--accent)}
.body img{max-width:100%;border-radius:8px}
.body hr{border:0;border-top:1px solid var(--border);margin:1.2em 0}
details.reasoning{margin:0 0 8px;font-size:13px;color:var(--muted)}
details.reasoning summary{cursor:pointer;font-weight:500}
details.reasoning .body{margin-top:6px;border-left:2px dashed var(--border);padding-left:12px}
.tools{margin:0 0 8px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.tools li{font-size:12.5px;border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:var(--soft)}
.tools li code{font-size:12px}
.tools li.error{border-color:#f3b3b8}
.attachments{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.attachments li{font-size:12px;border:1px dashed var(--border);border-radius:999px;padding:2px 10px;color:var(--muted)}
.citations{margin:10px 0 0;padding-left:1.2em;font-size:12.5px;color:var(--muted)}
.citations a{color:var(--accent);word-break:break-all}
.stats{margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--subtle);font-variant-numeric:tabular-nums}
footer.doc{margin-top:40px;padding-top:14px;border-top:1px solid var(--border);font-size:12px;color:var(--subtle);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@page{margin:16mm 14mm}
@media print{.no-print{display:none!important}.page{padding:0;max-width:none}body{font-size:12.5px}.brand{padding-bottom:10px}h1.title{font-size:22px;margin-top:18px}.messages{gap:16px}.body pre{white-space:pre-wrap}details.reasoning{display:none}a{text-decoration:none;color:inherit}.body a{color:var(--accent)}}
@media (max-width:480px){.page{padding:20px 16px 48px}h1.title{font-size:22px}.msg header{flex-direction:column;gap:2px}}
`;

function fmtDate(iso: string | null | undefined): string {
  if (!iso) return "";
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return "";
  return d.toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" });
}

function fmtTokens(n: number | undefined): string | null {
  if (n === undefined || n === null) return null;
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2).replace(/\.?0+$/, "")}M tokens`;
  if (n >= 10_000) return `${(n / 1_000).toFixed(1).replace(/\.?0+$/, "")}K tokens`;
  return `${n.toLocaleString("en-US")} tokens`;
}

function fmtUsd(n: number | null | undefined): string | null {
  if (n === null || n === undefined || Number.isNaN(n)) return null;
  if (n === 0) return "$0.00";
  return n < 0.01 ? `$${n.toFixed(n < 0.001 ? 5 : 4)}` : `$${n.toFixed(2)}`;
}

function modelLabel(key: string | null): { provider: string | null; model: string } {
  if (!key) return { provider: null, model: "Assistant" };
  const [p, ...rest] = key.split("/");
  return { provider: rest.length ? p : null, model: rest.length ? rest.join("/") : key };
}

function renderMessage(m: ExportDocMessage): string {
  const isUser = m.role === "user";
  const { provider, model } = modelLabel(m.modelKey);
  const who = isUser ? "You" : m.role === "system" ? "System" : `${escapeHtml(model)}${provider ? `<small>${escapeHtml(provider)}</small>` : ""}`;
  const parts: string[] = [];
  if (!isUser && m.reasoning && m.reasoning.trim()) parts.push(`<details class="reasoning"><summary>Reasoning</summary><div class="body">${markdownToHtml(m.reasoning)}</div></details>`);
  if (m.tools?.length) {
    parts.push(`<ul class="tools">${m.tools.map((t) => `<li${t.isError ? ' class="error"' : ""}><code>${escapeHtml(t.name)}</code>${t.argumentsText ? ` <span>${escapeHtml(t.argumentsText.slice(0, 400))}${t.argumentsText.length > 400 ? "…" : ""}</span>` : ""}</li>`).join("")}</ul>`);
  }
  parts.push(`<div class="body">${m.content.trim() ? markdownToHtml(m.content) : '<p><em style="color:var(--subtle)">No text in this message.</em></p>'}</div>`);
  if (m.attachments?.length) parts.push(`<ul class="attachments">${m.attachments.map((a) => `<li>${escapeHtml(a.name)} · ${escapeHtml(a.mimeType)} · ${Math.max(1, Math.round(a.sizeBytes / 1024))} KB</li>`).join("")}</ul>`);
  const cits = (m.citations ?? []).filter((c) => c.url);
  if (cits.length) parts.push(`<ol class="citations">${cits.map((c) => `<li><a href="${escapeHtml(c.url!)}" rel="noopener noreferrer nofollow">${escapeHtml(c.title || c.url!)}</a></li>`).join("")}</ol>`);
  const stats = [fmtTokens(m.usage?.totalTokens ?? ((m.usage?.inputTokens ?? 0) + (m.usage?.outputTokens ?? 0) || undefined)), fmtUsd(m.costUsd), m.latencyMs ? `${m.latencyMs < 1000 ? `${Math.round(m.latencyMs)} ms` : `${(m.latencyMs / 1000).toFixed(1)} s`}` : null].filter(Boolean);
  if (!isUser && stats.length) parts.push(`<div class="stats">${stats.join(" · ")}</div>`);
  return `<article class="msg ${escapeHtml(m.role)}"><header><span class="who">${who}</span>${m.createdAt ? `<time datetime="${escapeHtml(m.createdAt)}">${fmtDate(m.createdAt)}</time>` : ""}</header>${parts.join("")}</article>`;
}

export function buildExportHtml(input: ExportDocInput): string {
  const models = Array.from(new Set(input.messages.map((m) => m.modelKey).filter((k): k is string => Boolean(k))));
  const totals = [fmtUsd(input.totals?.costUsd), input.totals?.inputTokens !== undefined || input.totals?.outputTokens !== undefined ? `${fmtTokens((input.totals?.inputTokens ?? 0) + (input.totals?.outputTokens ?? 0))}` : null].filter(Boolean);
  const title = escapeHtml(input.title || "Conversation");
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" />
<title>${title} · PolyLLM</title>
<style>${CSS}</style>
</head>
<body>
<div class="page">
  <div class="brand">
    <a class="name" href="${escapeHtml(input.appUrl)}" style="color:inherit;text-decoration:none">${BRAND_MARK}<span>Poly<b>LLM</b></span></a>
    <div class="toolbar no-print">
      <button type="button" class="primary" onclick="window.print()">Print / Save as PDF</button>
      <button type="button" onclick="window.close()">Close</button>
    </div>
  </div>
  <h1 class="title">${title}</h1>
  <div class="meta">
    <span>${fmtDate(input.createdAt)}</span>
    <span>${input.messages.length} message${input.messages.length === 1 ? "" : "s"}</span>
    ${totals.length ? `<span>${totals.join(" · ")}</span>` : ""}
    ${models.length ? `<span class="chips">${models.map((k) => `<span class="chip">${escapeHtml(modelLabel(k).model)}</span>`).join("")}</span>` : ""}
  </div>
  ${input.systemPrompt ? `<div class="system"><b>System prompt</b>\n${escapeHtml(input.systemPrompt)}</div>` : ""}
  <div class="messages">
    ${input.messages.map(renderMessage).join("\n")}
  </div>
  <footer class="doc">
    <span>Exported from PolyLLM on ${fmtDate(input.exportedAt)}</span>
    <span>Model output can be wrong. ${escapeHtml(input.appUrl.replace(/^https?:\/\//, ""))}</span>
  </footer>
</div>
${input.autoPrint ? `<script>window.addEventListener("load",function(){setTimeout(function(){window.print()},250)});</script>` : ""}
</body>
</html>`;
}