// 公开页面：检测页（/）、报告页（/r/<id>）、找不到、源代码目录（/source）。所有来自用户或报告的值都过 esc()。

import type { DetectionReport, DetectorResult } from "../models.js";
import { esc, langHref, layout } from "./html.js";
import { GROUP_ORDER, ITEMS, copy, fill, type Lang } from "./i18n.js";

export const MODEL_CHOICES = [
  "claude-opus-5-5",
  "claude-sonnet-5-5",
  "claude-haiku-5-5",
  "claude-fable-5-1",
  "claude-opus-4-8",
  "claude-opus-4-7",
  "claude-sonnet-4-6",
  "claude-haiku-4-5-20251001",
];

export function toolPage(lang: Lang): string {
  const t = copy(lang);
  const groups = GROUP_ORDER.map((g) => {
    const lis = ITEMS.filter((i) => i.group === g)
      .map((i) => {
        const c = t.items[i.name as keyof typeof t.items];
        return `<li><b>${esc(c.name)}</b>${lang === "zh" ? "：" : ": "}<span>${esc(c.what)}</span></li>`;
      })
      .join("");
    return `<div class="group"><h3>${esc(t.groups[g])}</h3><ul>${lis}</ul></div>`;
  }).join("");
  const modes = (["quick", "standard", "full"] as const)
    .map((m) => `<option value="${m}"${m === "full" ? " selected" : ""}>${esc(t.form.modes[m])}</option>`)
    .join("");
  const options = MODEL_CHOICES.map((m) => `<option value="${esc(m)}"></option>`).join("");
  const body = `<h1>${esc(t.siteTitle)}</h1>
<p class="lead">${esc(t.lead)}</p>
<p class="note">${esc(t.protocolNote)}</p>
<form id="detect-form" class="card" autocomplete="off" novalidate
 data-lang="${esc(lang)}" data-running="${esc(t.form.running)}" data-failed="${esc(t.form.failed)}" data-network="${esc(t.form.network)}">
<div><label for="base_url">${esc(t.form.baseUrl)}</label>
<input id="base_url" name="base_url" type="url" inputmode="url" required placeholder="https://api.example.com" spellcheck="false">
<p class="hint">${esc(t.form.baseUrlHint)}</p></div>
<div><label for="api_key">${esc(t.form.apiKey)}</label>
<input id="api_key" name="api_key" type="password" required minlength="8" placeholder="sk-..." autocomplete="off" spellcheck="false">
<p class="hint">${esc(t.form.apiKeyHint)}</p></div>
<div class="row">
<div><label for="model">${esc(t.form.model)}</label>
<input id="model" name="model" list="models" required value="claude-opus-5-5" spellcheck="false">
<datalist id="models">${options}</datalist>
<p class="hint">${esc(t.form.modelHint)}</p></div>
<div><label for="mode">${esc(t.form.mode)}</label><select id="mode" name="mode">${modes}</select></div>
</div>
<button type="submit">${esc(t.form.submit)}</button>
<p id="status" class="status" hidden role="status" aria-live="polite"></p>
</form>
<p class="note">${esc(t.limitsNote)}</p>
<h2>${esc(t.checksTitle)}</h2>
<div class="groups">${groups}</div>`;
  return layout(t, lang, { title: t.siteTitle, path: "/", body });
}

function hostOf(baseUrl: string): string {
  try {
    return new URL(baseUrl).host;
  } catch {
    return baseUrl;
  }
}

/** UTC 时间，到分钟：2026-11-08 02:03 UTC。 */
function utcMinute(iso: string): string {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return iso;
  return d.toISOString().slice(0, 16).replace("T", " ") + " UTC";
}

function orderResults(results: readonly DetectorResult[]): DetectorResult[] {
  const rank = new Map(ITEMS.map((i, n) => [i.name, n]));
  return [...results].sort((a, b) => (rank.get(a.name) ?? 99) - (rank.get(b.name) ?? 99));
}

function itemName(lang: Lang, r: DetectorResult): string {
  const c = copy(lang).items as Record<string, { name: string } | undefined>;
  return c[r.name]?.name ?? r.display_name ?? r.name;
}

function round1(n: number): string {
  return String(Math.round(n * 10) / 10);
}

export function reportPage(lang: Lang, rep: DetectionReport & { id: string }): string {
  const t = copy(lang);
  const r = t.report;
  const summary = lang === "en" ? r.summaries[rep.summary] ?? rep.summary : rep.summary;
  const rows = orderResults(rep.results)
    .map((x) => {
      const hasDetails = Object.keys(x.details ?? {}).length > 0;
      const expandable = x.status !== "pass" && (hasDetails || x.error);
      const detail = expandable
        ? `<details><summary>${esc(r.details)}</summary>${x.error ? `<pre>${esc(r.errorLabel)}: ${esc(x.error)}</pre>` : ""}` +
          (hasDetails ? `<pre>${esc(JSON.stringify(x.details, null, 2))}</pre>` : "") +
          `</details>`
        : "";
      return `<tr><td>${esc(itemName(lang, x))}${detail}</td>
<td class="st st-${esc(x.status)}">${esc(r.statuses[x.status] ?? x.status)}</td>
<td class="num">${x.status === "skip" ? "–" : esc(round1(x.score))}</td><td class="num">${esc(x.weight)}</td></tr>`;
    })
    .join("");
  const p = rep.performance;
  const meta: [string, string][] = [
    [r.model, rep.target_model],
    [r.host, hostOf(rep.base_url)],
    [r.key, rep.api_key_masked],
    [r.mode, r.modes[rep.mode] ?? rep.mode],
    [r.time, utcMinute(rep.timestamp)],
    [r.requests, String(p?.request_count ?? "–")],
    [r.ttft, p?.ttft_ms == null ? "–" : fill(r.ms, { ms: p.ttft_ms })],
    [r.duration, p?.total_latency_ms == null ? "–" : fill(r.seconds, { s: round1(p.total_latency_ms / 1000) })],
    [r.backoff, String(p?.backoff_events ?? 0)],
  ];
  const body = `<h1>${esc(r.title)}</h1>
<div class="card">
<div class="score"><span class="n">${esc(Math.round(rep.total_score))}</span><span class="of">/ 100</span>
<span class="pill ${esc(rep.verdict)}">${esc(summary)}</span></div>
${rep.run_error ? `<p class="alert">${esc(fill(r.runError, { msg: rep.run_error }))}</p>` : ""}
<dl class="meta">${meta.map(([k, v]) => `<div><dt>${esc(k)}</dt><dd class="${k === r.key || k === r.model ? "mono" : ""}">${esc(v)}</dd></div>`).join("")}</dl>
</div>
<h2>${esc(r.item)}</h2>
<div class="card">
<table class="tbl"><thead><tr><th>${esc(r.item)}</th><th>${esc(r.status)}</th><th class="num">${esc(r.points)}</th><th class="num">${esc(r.weight)}</th></tr></thead>
<tbody>${rows}</tbody></table>
</div>
<p class="note">${esc(r.note)}</p>
<p class="actions"><a href="${esc(langHref("/", lang))}">${esc(r.again)}</a><a href="/r/${esc(rep.id)}.json">${esc(r.json)}</a></p>`;
  return layout(t, lang, { title: `${r.title} · ${rep.target_model}`, path: `/r/${rep.id}`, body });
}

export function notFoundPage(lang: Lang, path: string): string {
  const t = copy(lang);
  const body = `<h1>${esc(t.notFound.title)}</h1><p class="lead">${esc(t.notFound.body)}</p>
<p class="actions"><a href="${esc(langHref("/", lang))}">${esc(t.notFound.back)}</a></p>`;
  return layout(t, lang, { title: t.notFound.title, path, body });
}

export function sourceIndexPage(lang: Lang, files: readonly string[]): string {
  const t = copy(lang);
  const items = files.map((f) => `<li><a href="/source/${esc(f)}">${esc(f)}</a></li>`).join("");
  const body = `<h1>${esc(t.sourceTitle)}</h1><p class="lead">${esc(t.sourceLead)}</p>
<div class="card"><ul class="files">${items}</ul></div>`;
  return layout(t, lang, { title: t.sourceTitle, path: "/source", body });
}