(() => {
  "use strict";

  const params = new URLSearchParams(location.search);
  const suppliedToken = params.get("token");
  if (suppliedToken) sessionStorage.setItem("casan_viewer_token", suppliedToken);
  const token = suppliedToken || sessionStorage.getItem("casan_viewer_token") || "";
  params.delete("token");
  history.replaceState({}, "", `${location.pathname}${params.size ? `?${params}` : ""}${location.hash}`);

  const state = {
    view: params.get("view") || (params.get("trace") ? "runs" : "overview"),
    trace: params.get("trace") || "",
    project: null,
    registry: null,
    h6: null,
    run: null,
    selectedGate: "H1-context",
  };
  const $ = (selector) => document.querySelector(selector);
  const esc = (value) => String(value ?? "")
    .replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;").replaceAll("'", "&#039;");
  const slug = (value) => String(value || "unknown").toLowerCase().replaceAll("_", "-").replace(/[^a-z0-9-]/g, "");
  const text = (value, fallback = "Unavailable") => value === null || value === undefined || value === "" ? fallback : String(value);
  const number = (value) => value === null || value === undefined || !Number.isFinite(Number(value))
    ? "Unavailable" : new Intl.NumberFormat("en-US").format(Number(value));
  const time = (value) => value ? String(value).replace("T", " ").replace("Z", " UTC") : "No timestamp";
  const money = (value) => value === null || value === undefined ? "Unavailable" : `$${Number(value).toFixed(6)}`;
  const pill = (value) => `<span class="pill ${slug(value)}">${esc(String(value || "unknown").replaceAll("_", " "))}</span>`;

  async function api(path) {
    const response = await fetch(path, {
      headers: { "X-CASAN-Viewer-Token": token },
      cache: "no-store",
    });
    const payload = await response.json().catch(() => ({}));
    if (!response.ok) throw new Error(payload.error || `HTTP ${response.status}`);
    return payload;
  }

  function downloadUrl(path, query = {}) {
    const next = new URLSearchParams({ ...query, token });
    return `${path}?${next}`;
  }

  function hero({ eyebrow, title, description, verdict, meta = [], actions = "" }) {
    return `<article class="hero">
      <div class="hero-grid">
        <div>
          <p class="eyebrow">${esc(eyebrow)}</p>
          <h2>${esc(title)}</h2>
          <p class="hero-description">${esc(description)}</p>
          <div class="hero-meta">${meta.map((item) => `<span>${esc(item)}</span>`).join("")}</div>
        </div>
        <div class="hero-actions">${verdict ? pill(verdict) : ""}${actions}</div>
      </div>
    </article>`;
  }

  function metric(label, value, detail) {
    return `<article class="metric-card"><div class="metric-label">${esc(label)}</div>
      <div class="metric-value">${esc(text(value))}</div><div class="metric-detail">${esc(detail)}</div></article>`;
  }

  function panel(eyebrow, title, description, body, right = "") {
    return `<article class="panel"><header class="panel-head"><div><p class="eyebrow">${esc(eyebrow)}</p>
      <h2>${esc(title)}</h2><p class="panel-description">${esc(description)}</p></div>${right}</header>
      <div class="panel-body">${body}</div></article>`;
  }

  function disclosure(summary, description, body, badge = "") {
    return `<details class="disclosure-panel"><summary><span><strong>${esc(summary)}</strong><small>${esc(description)}</small></span>
      <span class="disclosure-side">${badge}<b aria-hidden="true">+</b></span></summary><div class="disclosure-body">${body}</div></details>`;
  }

  function distribution(label, rows) {
    const maximum = Math.max(...rows.map((row) => Number(row.value) || 0), 1);
    return `<ol class="distribution" role="img" aria-label="${esc(label)}">${rows.map((row) => {
      const value = Math.max(Number(row.value) || 0, 0);
      const width = value === 0 ? 0 : Math.max((value / maximum) * 100, 3);
      return `<li><div class="distribution-head"><span><strong>${esc(row.label)}</strong><small>${esc(row.detail || "")}</small></span><b>${esc(number(value))}</b></div>
        <div class="distribution-track" aria-hidden="true"><i class="${slug(row.tone || "info")}" style="width:${width}%"></i></div></li>`;
    }).join("")}</ol>`;
  }

  function empty(title, detail) {
    return `<div class="empty"><div class="empty-mark">∅</div><strong>${esc(title)}</strong><p>${esc(detail)}</p></div>`;
  }

  function setView(view, push = true) {
    state.view = ["overview", "runs", "h6"].includes(view) ? view : "overview";
    document.querySelectorAll(".nav-item").forEach((item) => {
      const active = item.dataset.view === state.view;
      item.classList.toggle("active", active);
      if (active) item.setAttribute("aria-current", "page");
      else item.removeAttribute("aria-current");
    });
    document.querySelectorAll(".view").forEach((item) => item.classList.add("hidden"));
    $(`#${state.view}-view`).classList.remove("hidden");
    $("#page-title").textContent = {
      overview: "Assurance overview", runs: "Run assurance registry", h6: "H6 AgentOps dossier",
    }[state.view];
    if (push) {
      const next = new URL(location.href);
      next.searchParams.set("view", state.view);
      if (state.trace) next.searchParams.set("trace", state.trace);
      else next.searchParams.delete("trace");
      history.pushState({}, "", `${next.pathname}?${next.searchParams}`);
    }
    if (state.view === "runs") renderRuns();
    if (state.view === "h6") renderH6();
    closeNav();
  }

  function renderOverview() {
    const profile = state.project;
    const registry = state.registry;
    const latest = registry.latest || {};
    const recent = registry.runs || [];
    const failures = recent.filter((row) => row.status === "failed").length;
    const certified = latest.certified === true;
    const latestTrace = latest.trace_id || recent[0]?.trace_id;
    const maturity = profile.maturity || {};
    const actions = latestTrace
      ? `<button class="button primary" type="button" data-open-trace="${esc(latestTrace)}">Inspect latest run</button>
         <button class="button secondary" type="button" data-open-h6="${esc(latestTrace)}">Open H6</button>`
      : `<button class="button secondary" type="button" data-view-target="runs">View registry</button>`;
    $("#overview-view").innerHTML =
      hero({
        eyebrow: "CASAN Core · Local assurance",
        title: latestTrace ? "One prompt. One evidence trail." : "Ready for the first governed run.",
        description: "A read-only, offline-capable assurance workspace reconstructed from canonical project evidence. No Platform service or HTML generation on the prompt hot path.",
        verdict: latestTrace ? (certified ? "certified" : "review required") : "ready",
        meta: [
          `${profile.project_name} · ${profile.edition}`,
          latestTrace ? `Trace ${latestTrace}` : "No finalized trace yet",
          `Maturity ${maturity.level == null ? "not assessed" : `L${maturity.level}`} · ${maturity.status}`,
        ],
        actions,
      }) +
      `<section class="metric-grid">
        ${metric("Governed records", number(registry.count), `${recent.length} recent records loaded`)}
        ${metric("Latest H6 quality", latest.telemetry_quality || "Unavailable", "Missing values are disclosed, never coerced to zero")}
        ${metric("Observed failures", number(failures), `${recent.length ? Math.round((failures / recent.length) * 100) : 0}% of loaded records`)}
        ${metric("Evidence gates", latestTrace ? "H1 → H7" : "Waiting", latestTrace ? "Control-by-control reconstruction available" : "Evidence appears after a prompt finalizes")}
      </section>` +
      disclosure(
        "About this local report",
        "Edition boundaries and implementation notes are hidden until needed.",
        `<div class="two-col">
          <div class="notice success"><strong>Included in Core</strong><br>Latest run, history, interactive H1–H7 evidence, H6 AgentOps, and on-demand JSON/HTML export.</div>
          <div class="notice warning"><strong>Platform boundary</strong><br>Multi-project fleet views, centralized RBAC, shared approvals, ingestion and organization-wide retention.</div>
        </div>`
      ) +
      recentRunsPanel(recent.slice(0, 6), "Latest governed evidence");
    bindActions();
  }

  function recentRunsPanel(rows, title = "Recent governed runs") {
    const body = rows.length ? `<div class="table-scroll"><table>
      <thead><tr><th>Observed at</th><th>Lifecycle step</th><th>Verdict</th><th class="right">Latency</th><th class="right">Tokens</th><th class="right">Evidence</th></tr></thead>
      <tbody>${rows.map((row) => `<tr>
        <td class="mono">${esc(time(row.timestamp))}</td><td><strong>${esc(row.step || row.harness || "Agentic turn")}</strong></td>
        <td>${pill(row.status)}</td><td class="right mono">${esc(row.latency_ms == null ? "Unavailable" : `${number(row.latency_ms)} ms`)}</td>
        <td class="right mono">${esc(number(row.total_tokens))}</td>
        <td class="right">${row.trace_id ? `<button class="button light" type="button" data-open-trace="${esc(row.trace_id)}">Inspect H1–H7</button>` : "—"}</td>
      </tr>`).join("")}</tbody></table></div>` : empty("No governed run yet", "Complete a prompt in a configured client, then refresh this viewer.");
    return panel("Evidence index", title, "Operational values are shown only when present in canonical telemetry.", body);
  }

  function renderRuns() {
    const rows = state.registry.runs || [];
    const selected = state.run;
    const body = hero({
      eyebrow: "Run assurance registry",
      title: "Every governed run, one evidence trail.",
      description: "Select a lifecycle record to reconstruct H1–H7 decisions, inspect sanitized evidence and export an independent dossier.",
      verdict: rows.some((row) => row.status === "failed") ? "attention" : "operational",
      meta: [`${state.registry.count} records`, `${rows.filter((row) => row.status === "failed").length} failures`, "Local canonical evidence"],
      actions: `<button class="button primary" type="button" data-view-target="h6">Open H6 dossier</button>`,
    }) + (selected ? renderTrace(selected) : "") + recentRunsPanel(rows);
    $("#runs-view").innerHTML = body;
    bindActions();
    bindGates();
  }

  function renderTrace(report) {
    const gates = report.gates || [];
    let selected = gates.find((gate) => gate.id === state.selectedGate) || gates[0];
    if (!selected) return "";
    const rail = gates.map((gate, index) => `<button type="button" aria-pressed="${gate.id === selected.id}" class="gate-button ${gate.id === selected.id ? "selected" : ""}" data-gate="${esc(gate.id)}">
      <span class="gate-index">0${index + 1}</span><span class="gate-name">${esc(gate.title)}</span>
      <span class="gate-state"><span class="state-dot ${slug(gate.status)}"></span>${esc(gate.status)}</span></button>`).join("");
    const events = (selected.events || []).slice(-4).reverse();
    const timeline = events.length ? `<div class="timeline">${events.map((event) => `<div class="timeline-item">
      <div class="timeline-line"><span class="state-dot ${slug(event.status)}"></span></div>
      <div class="timeline-copy"><strong>${esc(event.status)}</strong><time>${esc(time(event.timestamp))}</time><p>${esc(event.reason)}</p></div>
    </div>`).join("")}</div>` : `<p class="metric-detail">No individual event was emitted for this control.</p>`;
    const entries = Object.entries(selected.evidence || {});
    const manifest = entries.length ? `<dl>${entries.map(([key, value]) => `<div class="manifest-row"><dt>${esc(key)}</dt><dd>${esc(typeof value === "string" ? value : JSON.stringify(value))}</dd></div>`).join("")}</dl>`
      : empty("No safe evidence fields", "This control has not emitted a sanitized evidence manifest.");
    const actions = `<a class="button secondary" href="${downloadUrl(`/api/v1/reports/run/${encodeURIComponent(report.trace_id)}/export`, { format: "json" })}">JSON evidence</a>
      <a class="button primary" href="${downloadUrl(`/api/v1/reports/run/${encodeURIComponent(report.trace_id)}/export`, { format: "html" })}">Export dossier</a>`;
    return panel(
      "Run assurance",
      "Governed execution dossier",
      "A control-by-control reconstruction backed by sanitized lifecycle evidence.",
      `<div class="hero trace-hero">
        <div class="hero-grid"><div><p class="eyebrow">Trace provenance</p><h2 class="trace-title">${esc(report.trace_id)}</h2>
        <div class="hero-meta trace-meta"><span>${report.summary.gates_observed}/7 controls observed</span><span>${report.project.edition} edition</span></div></div>
        <div>${pill(report.verdict)}</div></div></div>
       <div class="rail-wrap rail-spaced"><div class="evidence-rail">${rail}</div></div>
       <div class="dossier">
        <div class="decision-card"><div><p class="eyebrow">Selected control</p><h2>${esc(selected.title)}</h2><p class="panel-description">${esc(selected.description)}</p></div>
          <div class="inset"><span class="inset-label">Latest decision · ${esc(time(selected.updated_at))}</span><p>${esc(selected.reason)}</p></div>
          ${disclosure("Event history", `${events.length} recent lifecycle events · hidden by default`, timeline)}
        </div>
        ${disclosure("Safe evidence manifest", "Sanitized fields persisted by the harness · hidden by default", manifest, pill(`${entries.length} fields`))}
       </div>`,
      actions,
    );
  }

  function renderH6() {
    const data = state.h6;
    if (!data) return;
    const query = data.scope || {};
    const queryObject = Object.fromEntries(Object.entries(query).filter(([, value]) => value));
    const actions = `<a class="button secondary" href="${downloadUrl("/api/v1/reports/h6/export", { ...queryObject, format: "json" })}">JSON evidence</a>
      <a class="button primary" href="${downloadUrl("/api/v1/reports/h6/export", { ...queryObject, format: "html" })}">Export dossier</a>`;
    const findings = data.findings.length ? `<div class="findings">${data.findings.map((item, index) => `<article class="finding ${slug(item.severity)}">
      <span class="finding-index">${String(index + 1).padStart(2, "0")}</span><div><code>${esc(item.code)}</code><p>${esc(item.message)}</p></div></article>`).join("")}</div>`
      : `<div class="notice success">No threshold breach was detected in the selected evidence boundary.</div>`;
    const sources = data.evidence_sources.map((source) => {
      const status = !source.present ? "missing" : source.stale ? "stale" : "fresh";
      return `<article class="source"><div class="source-top"><div><h3>${esc(source.source)}</h3><div class="source-meta">${source.records} records · ${source.age_s == null ? "no timestamp" : `${number(source.age_s)}s old`}</div></div>${pill(status)}</div>
        <div class="source-path">${esc(source.path)}</div></article>`;
    }).join("");
    const breakdown = (rows, subject) => `<div class="table-scroll"><table><thead><tr><th>${esc(subject)}</th><th class="right">Runs</th><th class="right">Failures</th><th class="right">Avg latency</th><th class="right">Tokens</th><th class="right">Cost</th></tr></thead>
      <tbody>${rows.length ? rows.map((row) => `<tr><td><strong>${esc(row.key)}</strong></td><td class="right mono">${row.runs}</td><td class="right mono">${row.failures}</td><td class="right mono">${number(row.latency_avg_ms)} ms</td><td class="right mono">${number(row.tokens)}</td><td class="right mono">${money(row.cost_usd)}</td></tr>`).join("") : `<tr><td colspan="6">${empty("No matching records", `No ${subject.toLowerCase()} evidence is available.`)}</td></tr>`}</tbody></table></div>`;
    const outcomes = distribution("Governed run outcome distribution", data.details.by_status.map((row) => ({
      label: String(row.status).replaceAll("_", " "),
      value: row.count,
      detail: `${data.summary.runs ? Math.round((row.count / data.summary.runs) * 100) : 0}% of selected runs`,
      tone: row.status === "failed" ? "danger" : row.status === "degraded" ? "warning" : "success",
    })));
    $("#h6-view").innerHTML =
      hero({
        eyebrow: "H6 · AgentOps assurance",
        title: "Operational evidence, ready for a decision.",
        description: "Runtime health, reliability, cost provenance and telemetry integrity—designed to answer what happened, why it matters and where the evidence lives.",
        verdict: data.verdict,
        meta: [data.report_id, `Generated ${time(data.generated_at)}`, `Freshness ${data.freshness.status}`],
        actions,
      }) +
      disclosure("Filter the evidence boundary", "Project, date and trace filters stay out of the executive view until needed.", h6Filters(data)) +
      `<section class="metric-grid">
        ${metric("Governed runs", number(data.summary.runs), `${data.summary.success} successful · ${data.summary.degraded} degraded`)}
        ${metric("Failure rate", `${data.summary.failure_rate_pct}%`, `${data.summary.failed} failed · ${data.summary.alerts} alerts`)}
        ${metric("P95 latency", `${number(data.summary.latency_ms.p95)} ms`, `P50 ${number(data.summary.latency_ms.p50)} ms`)}
        ${metric("Telemetry integrity", data.data_quality.status.replaceAll("_", " "), `${data.summary.coverage.token_pct}% token · ${data.summary.coverage.cost_pct}% cost`)}
      </section>` +
      `<div class="two-col">
        ${panel("Decision brief", "What requires attention", "Threshold findings are review signals, not maturity claims.", findings, pill(data.verdict))}
        ${panel("Outcome mix", "Run distribution", "Canonical runtime status values, normalized against the largest observed group.", outcomes, `<span class="mono metric-detail">${number(data.summary.runs)} total</span>`)}
      </div>` +
      panel("Evidence quality", "Coverage and disclosure", "Unavailable telemetry remains null. Coverage gaps stay visible.", `<div class="two-col">
        <div class="coverage">${coverage("Token attribution", data.summary.coverage.token_pct, `${data.summary.coverage.token_records}/${data.summary.coverage.runtime_records} records`)}
          ${coverage("Cost attribution", data.summary.coverage.cost_pct, `${data.summary.coverage.cost_records}/${data.summary.coverage.runtime_records} records`)}</div>
        <div class="inset"><span class="inset-label">Disclosure notes</span>${data.data_quality.warnings.length ? `<ul>${data.data_quality.warnings.map((warning) => `<li class="metric-detail">${esc(warning)}</li>`).join("")}</ul>` : `<p class="success-copy">All required sources are present with no estimation warning.</p>`}</div>
      </div>`, pill(data.data_quality.status)) +
      disclosure(
        "Technical evidence and breakdowns",
        "Provider counters, canonical paths and raw tables are preserved for audit without crowding the decision view.",
        `<section class="metric-grid compact">
          ${metric("Provider tokens", data.summary.coverage.token_records > 0 ? number(data.summary.tokens.provider_total ?? data.summary.tokens.total) : "Unavailable", `${data.summary.coverage.token_pct}% record coverage`)}
          ${metric("Actual cost", money(data.summary.cost_usd.provider_actual), `${data.summary.coverage.cost_pct}% record coverage`)}
          ${metric("Provider calls", number(data.summary.provider_calls), "Provider-attributed requests")}
          ${metric("Retries", number(data.summary.retries), "Observed reroute attempts")}
        </section>
        <div class="technical-section"><p class="eyebrow">Source integrity</p><h3>Evidence provenance</h3><div class="source-grid">${sources}</div></div>
        <div class="breakdown-grid technical-section">
          ${panel("Runtime", "Execution profile by step", "Latency, failure and attribution by governed lifecycle step.", breakdown(data.details.by_step, "Step"))}
          ${panel("Provider", "Model usage and provenance", "Only provider-reported token and actual cost values are shown.", breakdown(data.details.by_provider, "Provider · model"))}
        </div>`,
        pill(data.freshness.status),
      );
    bindH6Filters();
  }

  function coverage(label, value, detail) {
    const width = Math.round(Math.max(0, Math.min(100, Number(value) || 0)) / 5) * 5;
    return `<div><div class="coverage-head"><strong>${esc(label)}</strong><span>${esc(value)}%</span></div>
      <div class="coverage-track"><div class="coverage-fill width-${width}"></div></div>
      <div class="metric-detail">${esc(detail)}</div></div>`;
  }

  function h6Filters(data) {
    const scope = data.scope || {};
    const options = data.available_filters || { projects: [], runs: [] };
    const date = (value) => value ? value.slice(0, 10) : "";
    return `<form id="h6-filters" class="filters">
      <label class="field"><span>Project</span><select name="project"><option value="">All projects</option>${options.projects.map((value) => `<option value="${esc(value)}" ${scope.project === value ? "selected" : ""}>${esc(value)}</option>`).join("")}</select></label>
      <label class="field"><span>From</span><input type="date" name="from" value="${esc(date(scope.from))}"></label>
      <label class="field"><span>To</span><input type="date" name="to" value="${esc(date(scope.to))}"></label>
      <label class="field"><span>Run / trace</span><input name="run" list="run-options" value="${esc(scope.run || "")}" placeholder="All governed runs"><datalist id="run-options">${options.runs.map((value) => `<option value="${esc(value)}"></option>`).join("")}</datalist></label>
      <div class="filter-actions"><button class="button primary" type="submit">Apply</button><button class="button light" type="button" id="clear-h6">Clear</button></div>
    </form>`;
  }

  async function loadTrace(traceId) {
    if (!traceId) return;
    state.trace = traceId;
    state.selectedGate = "H1-context";
    $("#loading").classList.remove("hidden");
    try {
      state.run = await api(`/api/v1/reports/run/${encodeURIComponent(traceId)}`);
      setView("runs");
    } catch (error) {
      showError(`Run report could not be reconstructed: ${error.message}`);
    } finally {
      $("#loading").classList.add("hidden");
    }
  }

  async function loadH6(query = {}) {
    const next = new URLSearchParams(Object.fromEntries(Object.entries(query).filter(([, value]) => value)));
    $("#loading").classList.remove("hidden");
    try {
      state.h6 = await api(`/api/v1/reports/h6${next.size ? `?${next}` : ""}`);
      renderH6();
    } catch (error) {
      showError(`H6 report could not be generated: ${error.message}`);
    } finally {
      $("#loading").classList.add("hidden");
    }
  }

  function bindActions() {
    document.querySelectorAll("[data-view-target]").forEach((button) => button.addEventListener("click", () => setView(button.dataset.viewTarget)));
    document.querySelectorAll("[data-open-trace]").forEach((button) => button.addEventListener("click", () => loadTrace(button.dataset.openTrace)));
    document.querySelectorAll("[data-open-h6]").forEach((button) => button.addEventListener("click", async () => {
      await loadH6({ run: button.dataset.openH6 });
      setView("h6");
    }));
  }

  function bindGates() {
    document.querySelectorAll("[data-gate]").forEach((button) => button.addEventListener("click", () => {
      state.selectedGate = button.dataset.gate;
      renderRuns();
    }));
  }

  function bindH6Filters() {
    $("#h6-filters")?.addEventListener("submit", async (event) => {
      event.preventDefault();
      const values = Object.fromEntries(new FormData(event.currentTarget));
      await loadH6(values);
    });
    $("#clear-h6")?.addEventListener("click", () => loadH6());
  }

  function showError(message) {
    $("#error").textContent = message;
    $("#error").classList.remove("hidden");
  }

  function closeNav() {
    $(".sidebar").classList.remove("open");
    $("#nav-scrim").classList.add("hidden");
    $("#menu-button").setAttribute("aria-expanded", "false");
  }

  async function loadAll() {
    $("#error").classList.add("hidden");
    $("#loading").classList.remove("hidden");
    try {
      [state.project, state.registry, state.h6] = await Promise.all([
        api("/api/v1/project"),
        api("/api/v1/runs?limit=100"),
        api("/api/v1/reports/h6?limit=50"),
      ]);
      $("#freshness-pill").textContent = `${state.h6.freshness.status} evidence`;
      $("#freshness-pill").className = `pill ${slug(state.h6.freshness.status)}`;
      renderOverview();
      renderH6();
      if (state.trace) {
        await loadTrace(state.trace);
      } else {
        setView(state.view, false);
      }
    } catch (error) {
      showError(`Local evidence could not be loaded: ${error.message}`);
    } finally {
      $("#loading").classList.add("hidden");
    }
  }

  document.querySelectorAll(".nav-item").forEach((button) => button.addEventListener("click", () => setView(button.dataset.view)));
  $("#refresh-button").addEventListener("click", loadAll);
  $("#menu-button").addEventListener("click", () => {
    const open = !$(".sidebar").classList.contains("open");
    $(".sidebar").classList.toggle("open", open);
    $("#nav-scrim").classList.toggle("hidden", !open);
    $("#menu-button").setAttribute("aria-expanded", String(open));
  });
  $("#nav-scrim").addEventListener("click", closeNav);
  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") closeNav();
  });
  window.addEventListener("popstate", () => setView(new URLSearchParams(location.search).get("view") || "overview", false));
  loadAll();
})();