// HTML-first activity-report template — the print-ready layout that the hub's
// "Download PDF" button renders to a PDF (OPL-2598). It is the editorial,
// paper-styled counterpart to the on-screen report on `/reports`, driven by the
// SAME `ActivityReport` view model (`buildActivityReport` / the `generateReport`
// capability), so the document a user downloads reflects exactly what they saw.
//
// Authored to feed the shared HTML -> PDF pipeline (`@scribe.cool/core/pdf`)
// without modification: it carries its own scoped, print-ready CSS (`@page`,
// break-inside protection, orphan/widow control) under `.scribe-report`.
//
// Design language: this is Scribe's OWN visual identity in print, not a
// generic editorial document — Geist Mono (the app's universal face) with
// Geist Pixel Square for the masthead only, the light-mode ink/paper/border
// palette, the cyan hue-195 accent, and the app's "bracket corner tick" panel
// aesthetic (four small corner ticks, never a full border box). Fonts are
// embedded as base64 woff2 (`./report-fonts`, generated from the `geist` npm
// package) since the serverless Chromium PDF render has no installed fonts
// and no network access — everything must be self-contained.
//
// Design rules (mirroring the vetted invoice templates):
//   - NEVER hardcode brand colors inline. Every color is a `--rep-*` CSS
//     variable. User/org-chosen colors come from `ReportTemplateConfig`; the
//     neutral paper/ink/border palette has its single source of truth in
//     `reportConfigToCssVars`. The template references `var(--rep-*)` only,
//     except for the untrusted per-project color (sanitized at the render
//     boundary — see `sanitizeHexColor`) and font data URIs (build-time
//     constants, not user input).
//   - All report content (project names, highlights, labels, company name) is
//     rendered as React-escaped children — never interpolated into raw HTML or
//     the `<style>` string — so untrusted text cannot break out of the markup.
//
// This module is import-safe for client bundles: it has no DB / drizzle / sqlite
// references (it only consumes the framework-free `ActivityReport` type).

import type { CSSProperties, ReactNode } from "react";
import type {
  ActivityReport,
  ActivityReportProject,
  ActivityReportTicketsByProject,
} from "../utils/activity-report";
import { sanitizeHexColor } from "../utils/color";
import { DailyActivityChart } from "./daily-activity-chart";
import {
  GEIST_MONO_MEDIUM_WOFF2_BASE64,
  GEIST_MONO_REGULAR_WOFF2_BASE64,
  GEIST_PIXEL_SQUARE_WOFF2_BASE64,
} from "./report-fonts";

// ── Config ─────────────────────────────────────────────────

/** Print page geometry. Drives `@page size` and the on-screen paper width. */
export type ReportPageSize = "a4" | "letter";

/**
 * Branding/theme config for the report PDF. Mirrors the invoice config's
 * color-driven approach: only theme values and bounded text, no hardcoded
 * colors in the template. All fields are optional from a caller's perspective;
 * `sanitizeReportConfig` (in `render-report-pdf`) fills/validates them.
 */
export interface ReportTemplateConfig {
  /** Heading + key-number color. */
  primaryColor: string;
  /** Secondary accent (kickers, bars, highlights). */
  accentColor: string;
  /** Body text color. */
  textColor: string;
  /** Company/workspace name shown in the masthead. Optional. */
  companyName?: string;
  /**
   * Org/workspace logo shown in the masthead. Must be a base64 `data:image/*`
   * URI — remote URLs are rejected by `sanitizeReportConfig` (fail-closed) to
   * preserve the render pipeline's no-SSRF invariant. Optional.
   */
  logo?: string;
  /** Small footer note printed at the end of the document. Optional. */
  footerText?: string;
}

/**
 * A neutral, on-brand default config used when a caller does not supply one
 * (the report surfaces have no per-org branding table yet). Colors are
 * Scribe's own light-mode tokens (see `apps/web/src/app/globals.css`),
 * converted from OKLCH to hex (the sanitizer requires strict hex):
 *   - primaryColor / textColor: `--foreground` oklch(0.15 0 0) -> #0b0b0b (ink)
 *   - accentColor: `--accent-text` oklch(0.5 0.16 195) -> #007c7f, the
 *     darker, AA-checked (~4.9:1 on the light paper) cyan used for text/icons
 *     on a light background — the brighter `--accent-base` is reserved for
 *     fills elsewhere in the app, but the report only exposes one accent
 *     field, so the text-safe variant is used everywhere (rules, underlines,
 *     bars, labels) for consistent legibility in both text and fill contexts.
 */
export const DEFAULT_REPORT_CONFIG: ReportTemplateConfig = {
  primaryColor: "#0b0b0b",
  accentColor: "#007c7f",
  textColor: "#0b0b0b",
  companyName: "Scribe",
  footerText: "Generated by Scribe - getscribe.ai",
};

/**
 * Map a `ReportTemplateConfig` to the `--rep-*` CSS custom properties the
 * template renders against. Brand colors come from the config; the neutral
 * paper palette is centralized here so there is exactly one place holding a
 * literal color value. Neutrals mirror Scribe's light-mode tokens converted
 * from OKLCH to hex: paper/card `--background`/`--card` (~white),
 * `--muted-foreground` oklch(0.45 0 0) -> #555555, `--border`
 * oklch(0.91 0 0) -> #e1e1e1.
 */
export function reportConfigToCssVars(
  config: ReportTemplateConfig,
): CSSProperties {
  return {
    "--rep-primary": config.primaryColor,
    "--rep-accent": config.accentColor,
    "--rep-text": config.textColor,
    "--rep-paper": "#ffffff",
    "--rep-muted": "#555555",
    "--rep-muted-strong": "#0b0b0b",
    "--rep-border": "#e1e1e1",
    "--rep-subtle": "#f2f2f2",
    "--rep-subtle-strong": "#f2f2f2",
  } as CSSProperties;
}

// ── Props ──────────────────────────────────────────────────

export type ReportScope = "me" | "team";
export type ReportFilter = "client" | "internal" | "both";

export interface ReportTemplateProps {
  /** The report view model (same one the on-screen `/reports` view consumes). */
  report: ActivityReport;
  config: ReportTemplateConfig;
  /** Who the report covers — drives the masthead subtitle + contributors block. */
  scope?: ReportScope;
  /** Client/internal filter applied — shown as a masthead chip. */
  filter?: ReportFilter;
  /** Look-back window (days) used when the report has no explicit range. */
  days?: number;
  pageSize?: ReportPageSize;
  className?: string;
  /**
   * Optional AI-written narrative (OPL-2812). Purely additive: when absent the
   * Summary section renders the deterministic outcomes alone.
   */
  narrative?: {
    summary: string;
    perProject: Array<{ projectName: string; sentence: string }>;
  };
}

// ── Formatting (display-only; mirrors the on-screen report) ─

const SOURCE_LABELS: Record<string, string> = {
  git: "Git",
  file: "Files",
  claude: "Claude",
  claude_desktop: "Claude Desktop",
  gemini: "Gemini",
  codex: "Codex",
  opencode: "OpenCode",
  cursor: "Cursor",
  cline: "Cline",
  amp: "Amp",
  copilot: "Copilot",
  linear: "Linear",
  manual: "Manual",
};

const SCOPE_LABELS: Record<ReportScope, string> = {
  me: "My work",
  team: "Team",
};

const FILTER_LABELS: Record<ReportFilter, string> = {
  both: "All work",
  client: "Client only",
  internal: "Internal only",
};

function sourceLabel(source: string): string {
  return SOURCE_LABELS[source] ?? source;
}

/** minutes → "2h 15m" / "45m" / "0m". */
export function formatDuration(minutes: number): string {
  const total = Math.max(0, Math.round(minutes));
  const h = Math.floor(total / 60);
  const m = total % 60;
  if (h === 0) return `${m}m`;
  if (m === 0) return `${h}h`;
  return `${h}h ${m}m`;
}

function formatDate(value: string): string {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return new Intl.DateTimeFormat("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  }).format(date);
}

function formatDateShort(value: string): string {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return new Intl.DateTimeFormat("en-US", {
    month: "short",
    day: "numeric",
  }).format(date);
}

/**
 * Date ranges use a plain hyphen ("Jun 8 - Jul 7, 2026") — no en/em dashes
 * anywhere in the template (a typography discipline rule, not just style).
 */
function rangeLabel(report: ActivityReport, days: number): string {
  const { start, end } = report.range;
  if (start) {
    const startLabel = formatDateShort(start);
    // Days-based reports leave end null (open-ended through "now"). Always
    // render a concrete date so the PDF never shows the literal word "now".
    const endLabel = end
      ? formatDate(end)
      : formatDate(new Date().toISOString());
    return `${startLabel} - ${endLabel}`;
  }
  return `Last ${days} days`;
}

function pct(part: number, total: number): number {
  return total > 0 ? Math.round((part / total) * 100) : 0;
}

// ── Fonts (embedded, zero network) ─────────────────────────

/**
 * `@font-face` rules for the two brand faces, inlined as base64 `data:` woff2
 * URIs (see `./report-fonts`). No `url(https://…)` anywhere — the serverless
 * Chromium render has no fonts installed and no network access, so remote
 * `@font-face` sources would silently fail. The Medium file covers every
 * heavier weight the template declares (600-900) via a font-weight range;
 * only Regular + Medium are embedded to keep the document small.
 */
const FONT_FACE_CSS = `
@font-face {
  font-family: "Geist Mono";
  src: url(data:font/woff2;base64,${GEIST_MONO_REGULAR_WOFF2_BASE64}) format("woff2");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url(data:font/woff2;base64,${GEIST_MONO_MEDIUM_WOFF2_BASE64}) format("woff2");
  font-weight: 501 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Pixel Square";
  src: url(data:font/woff2;base64,${GEIST_PIXEL_SQUARE_WOFF2_BASE64}) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
`;

const FONT_MONO_STACK = '"Geist Mono", ui-monospace, monospace';
const FONT_PIXEL_STACK = '"Geist Pixel Square", ui-monospace, monospace';

// ── Page geometry + scoped print CSS ───────────────────────

const PAGE_DIMENSIONS: Record<ReportPageSize, { css: string; width: string }> =
  {
    a4: { css: "A4", width: "210mm" },
    letter: { css: "letter", width: "8.5in" },
  };

/**
 * Four small corner tick marks (10px arms, 1px thick, muted-foreground
 * color) drawn with layered `background-image` gradients — Scribe's
 * "bracket corner tick" panel signature. NEVER a full border box or drop
 * shadow. Applied via the `.sr-ticked` class to stat cards, split-metric
 * cards, and the chart panel; tables/rows use sparse hairlines instead (see
 * `.sr-projects`), never a ticked box.
 */
const TICK_PANEL_CSS = `
.scribe-report .sr-ticked {
  position: relative;
  padding: 16px 18px;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--rep-muted), var(--rep-muted)),
    linear-gradient(var(--rep-muted), var(--rep-muted)),
    linear-gradient(var(--rep-muted), var(--rep-muted)),
    linear-gradient(var(--rep-muted), var(--rep-muted)),
    linear-gradient(var(--rep-muted), var(--rep-muted)),
    linear-gradient(var(--rep-muted), var(--rep-muted)),
    linear-gradient(var(--rep-muted), var(--rep-muted)),
    linear-gradient(var(--rep-muted), var(--rep-muted));
  background-size:
    10px 1px, 1px 10px,
    10px 1px, 1px 10px,
    10px 1px, 1px 10px,
    10px 1px, 1px 10px;
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
}
`;

/**
 * Base, print-ready CSS for the report. Scoped under `.scribe-report` so it
 * never leaks into the host app's styles. Includes `@page` sizing, page-break
 * protection, and orphan/widow control so the same markup renders cleanly on
 * screen and through the headless-browser PDF. No user input is interpolated
 * here — this is a static, build-time string (the embedded font base64
 * constants are also build-time, sourced from the `geist` npm package, not
 * user input).
 */
function baseReportCss(pageSize: ReportPageSize): string {
  const page = PAGE_DIMENSIONS[pageSize];
  return `
${FONT_FACE_CSS}
${TICK_PANEL_CSS}
.scribe-report {
  --rep-gap: 28px;
  box-sizing: border-box;
  width: 100%;
  max-width: ${page.width};
  margin: 0 auto;
  padding: 56px 56px 48px;
  background: var(--rep-paper);
  color: var(--rep-text);
  font-family: ${FONT_MONO_STACK};
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08),
    0 8px 24px rgba(15, 23, 42, 0.06);
}
.scribe-report * { box-sizing: border-box; }
.scribe-report p { margin: 0; }
.scribe-report table { width: 100%; border-collapse: collapse; }
.scribe-report .sr-break-avoid { break-inside: avoid; }
.scribe-report .sr-flow { orphans: 3; widows: 3; }

/* Masthead */
.scribe-report .sr-masthead {
  border-top: 3px solid var(--rep-accent);
  padding-top: 22px;
  margin-bottom: var(--rep-gap);
  break-inside: avoid;
}
.scribe-report .sr-logo {
  width: 180px;
  height: 48px;
  margin-bottom: 16px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.scribe-report .sr-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rep-accent);
  margin-bottom: 10px;
}
.scribe-report .sr-prepared {
  margin-top: 12px;
  font-size: 12px;
  color: var(--rep-muted);
}
.scribe-report .sr-title {
  margin: 0 0 8px;
  font-family: ${FONT_PIXEL_STACK};
  font-size: 34px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--rep-primary);
}
.scribe-report .sr-sub {
  font-size: 13px;
  color: var(--rep-muted);
  font-variant-numeric: tabular-nums;
}
.scribe-report .sr-company {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.scribe-report .sr-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rep-muted);
  background: transparent;
  border: 1px solid var(--rep-border);
  border-radius: 9999px;
  padding: 4px 12px;
}

/* Section headings */
.scribe-report .sr-section { margin-top: var(--rep-gap); }
.scribe-report .sr-h2 {
  position: relative;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rep-muted-strong);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rep-border);
}
.scribe-report .sr-h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 28px;
  height: 2px;
  background: var(--rep-accent);
}

/* Key stats */
.scribe-report .sr-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.scribe-report .sr-stat {
  break-inside: avoid;
}
.scribe-report .sr-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rep-muted);
  margin-bottom: 6px;
}
.scribe-report .sr-stat-value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--rep-primary);
  font-variant-numeric: tabular-nums;
}
.scribe-report .sr-stat-value.sr-accent { color: var(--rep-accent); }
.scribe-report .sr-stat-hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--rep-muted);
}
.scribe-report .sr-stat-value.sr-small { font-size: 15px; }

/* Split bars (client vs internal) */
.scribe-report .sr-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.scribe-report .sr-split-row { break-inside: avoid; }
.scribe-report .sr-split-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.scribe-report .sr-split-name { font-weight: 600; color: var(--rep-text); }
.scribe-report .sr-split-val {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.scribe-report .sr-split-val em {
  font-style: normal;
  color: var(--rep-muted);
}
.scribe-report .sr-bar {
  height: 3px;
}
.scribe-report .sr-bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
}
.scribe-report .sr-split-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--rep-muted);
}

/* Projects table */
.scribe-report .sr-projects th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rep-muted);
  text-align: right;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--rep-border);
}
.scribe-report .sr-projects th:first-child { text-align: left; }
.scribe-report .sr-projects td {
  padding: 10px 0;
  font-size: 13px;
  text-align: right;
  border-bottom: 1px solid var(--rep-border);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.scribe-report .sr-projects tr { break-inside: avoid; }
.scribe-report .sr-projects td:first-child { text-align: left; }
.scribe-report .sr-proj-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--rep-text);
}
.scribe-report .sr-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  flex: 0 0 auto;
}
.scribe-report .sr-proj-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--rep-muted);
}
.scribe-report .sr-proj-meter {
  margin-top: 6px;
  height: 2px;
  width: 100%;
  max-width: 220px;
}
.scribe-report .sr-proj-meter > span {
  display: block;
  height: 100%;
  border-radius: 1px;
}
.scribe-report .sr-proj-time { font-weight: 700; color: var(--rep-primary); }

/* Summary — narrative lead + per-project outcome bullets */
.scribe-report .sr-lead {
  margin: 0 0 14px;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.75;
  color: var(--rep-primary);
}
.scribe-report .sr-outcomes {
  display: grid;
  gap: 12px;
}
.scribe-report .sr-outcome-name {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 3px;
  color: var(--rep-primary);
}
.scribe-report .sr-outcome ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scribe-report .sr-outcome li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--rep-primary);
}
.scribe-report .sr-outcome li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 1px;
  background: var(--rep-accent);
}

/* Per-project ticket lines */
.scribe-report .sr-tickets {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.scribe-report .sr-tickets li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  line-height: 1.6;
}
.scribe-report .sr-tick { color: var(--rep-muted); flex: 0 0 auto; }
.scribe-report .sr-tick-done { color: var(--rep-accent); }
.scribe-report .sr-ticket-id { color: var(--rep-primary); flex: 0 0 auto; }
.scribe-report .sr-ticket-title {
  color: var(--rep-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scribe-report .sr-ticket-more { color: var(--rep-muted); font-size: 10.5px; }

/* Unassigned breakdown */
.scribe-report .sr-note {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--rep-muted);
}
.scribe-report .sr-unassigned {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scribe-report .sr-unassigned li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rep-border);
  font-size: 12px;
}
.scribe-report .sr-unassigned li:last-child { border-bottom: none; }
.scribe-report .sr-unassigned-label { color: var(--rep-primary); }
.scribe-report .sr-unassigned-meta {
  color: var(--rep-muted);
  font-size: 11px;
  margin-left: auto;
}
.scribe-report .sr-unassigned-time {
  color: var(--rep-primary);
  font-weight: 700;
  min-width: 64px;
  text-align: right;
}

/* Source pills */
.scribe-report .sr-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.scribe-report .sr-pill {
  font-size: 12px;
  border: 1px solid var(--rep-border);
  border-radius: 9999px;
  padding: 4px 12px;
  display: inline-flex;
  gap: 8px;
}
.scribe-report .sr-pill em { font-style: normal; color: var(--rep-muted); }

/* Highlights + contributors */
.scribe-report .sr-list { display: grid; gap: 8px; }
.scribe-report .sr-hl {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  break-inside: avoid;
}
.scribe-report .sr-hl-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rep-accent);
  flex: 0 0 auto;
  width: 84px;
}
.scribe-report .sr-hl-label { flex: 1 1 auto; min-width: 0; }
.scribe-report .sr-hl-date {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--rep-muted);
  font-variant-numeric: tabular-nums;
}
.scribe-report .sr-contrib {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rep-border);
  font-size: 13px;
  break-inside: avoid;
}
.scribe-report .sr-contrib-name { flex: 1 1 auto; min-width: 0; }
.scribe-report .sr-contrib-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Footer */
.scribe-report .sr-footer {
  margin-top: var(--rep-gap);
  padding-top: 16px;
  border-top: 1px solid var(--rep-border);
  text-align: center;
  font-size: 11px;
  color: var(--rep-muted);
}

/* Empty state */
.scribe-report .sr-empty {
  margin-top: var(--rep-gap);
  padding: 48px;
  text-align: center;
  border: 1px dashed var(--rep-border);
  border-radius: 10px;
  color: var(--rep-muted);
}

@page { size: ${page.css}; margin: 0.5in; }
@media print {
  .scribe-report {
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
`;
}

// ── Subcomponents ──────────────────────────────────────────

function Stat({
  label,
  value,
  hint,
  small,
  accent,
}: {
  label: string;
  value: string;
  hint?: string;
  small?: boolean;
  accent?: boolean;
}) {
  const valueClass = [
    "sr-stat-value",
    small ? "sr-small" : null,
    accent ? "sr-accent" : null,
  ]
    .filter(Boolean)
    .join(" ");
  return (
    <div className="sr-stat sr-ticked">
      <div className="sr-stat-label">{label}</div>
      <div className={valueClass}>{value}</div>
      {hint ? <div className="sr-stat-hint">{hint}</div> : null}
    </div>
  );
}

function SplitRow({
  label,
  minutes,
  projectCount,
  eventCount,
  totalMinutes,
  barColor,
}: {
  label: string;
  minutes: number;
  projectCount: number;
  eventCount: number;
  totalMinutes: number;
  barColor: string;
}) {
  const percent = pct(minutes, totalMinutes);
  return (
    <div className="sr-split-row sr-ticked">
      <div className="sr-split-head">
        <span className="sr-split-name">{label}</span>
        <span className="sr-split-val">
          {formatDuration(minutes)} <em>({percent}%)</em>
        </span>
      </div>
      <div className="sr-bar">
        <span style={{ width: `${percent}%`, backgroundColor: barColor }} />
      </div>
      <p className="sr-split-meta">
        {projectCount} {projectCount === 1 ? "project" : "projects"} ·{" "}
        {eventCount.toLocaleString()} events
      </p>
    </div>
  );
}

function ProjectRow({
  project,
  totalMinutes,
  tickets,
}: {
  project: ActivityReportProject;
  totalMinutes: number;
  tickets?: ActivityReportTicketsByProject["tickets"];
}) {
  const sub: string[] = [
    `${project.activeDays} ${project.activeDays === 1 ? "day" : "days"}`,
  ];
  if (project.gitCommits > 0) {
    sub.push(
      `${project.gitCommits} ${project.gitCommits === 1 ? "commit" : "commits"}`,
    );
  }
  if (project.conversations > 0) {
    sub.push(
      `${project.conversations} ${
        project.conversations === 1 ? "conversation" : "conversations"
      }`,
    );
  }
  if (project.filesModified > 0) {
    sub.push(
      `${project.filesModified} ${
        project.filesModified === 1 ? "file" : "files"
      }`,
    );
  }
  // Untrusted (projects.color) — strict-hex sanitize before it reaches any
  // style prop, falling back to a trusted CSS var so a poisoned value can't
  // inject CSS into the PDF render.
  const projectColor =
    sanitizeHexColor(project.projectColor) ?? "var(--rep-muted)";
  const share = pct(project.estimatedMinutes, totalMinutes);
  const visibleTickets = tickets?.slice(0, 3) ?? [];
  const moreTickets = (tickets?.length ?? 0) - visibleTickets.length;
  return (
    <tr>
      <td>
        <div className="sr-proj-name">
          <span className="sr-dot" style={{ backgroundColor: projectColor }} />
          <span>{project.projectName}</span>
        </div>
        <div className="sr-proj-sub">{sub.join(" · ")}</div>
        <div className="sr-proj-meter">
          <span style={{ width: `${share}%`, backgroundColor: projectColor }} />
        </div>
        {visibleTickets.length > 0 ? (
          <ul className="sr-tickets">
            {visibleTickets.map((ticket) => (
              <li key={ticket.id}>
                <span
                  className={
                    ticket.completed ? "sr-tick sr-tick-done" : "sr-tick"
                  }
                >
                  {ticket.completed ? "✓" : "○"}
                </span>
                <span className="sr-ticket-id">{ticket.id}</span>
                {ticket.title ? (
                  <span className="sr-ticket-title">{ticket.title}</span>
                ) : null}
              </li>
            ))}
            {moreTickets > 0 ? (
              <li className="sr-ticket-more">
                +{moreTickets} more {moreTickets === 1 ? "ticket" : "tickets"}
              </li>
            ) : null}
          </ul>
        ) : null}
      </td>
      <td className="sr-proj-time">
        {formatDuration(project.estimatedMinutes)}
      </td>
      <td>{share}%</td>
      <td>{project.eventCount.toLocaleString()}</td>
    </tr>
  );
}

// ── Page frame ─────────────────────────────────────────────

function ReportFrame({
  config,
  pageSize,
  className,
  children,
}: {
  config: ReportTemplateConfig;
  pageSize: ReportPageSize;
  className?: string;
  children: ReactNode;
}) {
  return (
    <div
      className={`scribe-report${className ? ` ${className}` : ""}`}
      style={reportConfigToCssVars(config)}
      data-page-size={pageSize}
    >
      {/* Static, build-time template CSS — no user input is interpolated, so a
          plain string child is safe (and avoids dangerouslySetInnerHTML). The
          embedded font base64 constants are also build-time (from the `geist`
          npm package), not user input. */}
      <style>{baseReportCss(pageSize)}</style>
      {children}
    </div>
  );
}

// ── Template ───────────────────────────────────────────────

/**
 * The print-ready activity report. Consumes the framework-free `ActivityReport`
 * view model. Every user/report value (project names, highlights, labels,
 * device names, company name) is a React-escaped child, and every color is a
 * `--rep-*` CSS variable, so untrusted content can never break out of the
 * markup or the `<style>` block.
 */
export function ReportTemplate({
  report,
  config,
  scope = "me",
  filter = "both",
  days = 7,
  pageSize = "letter",
  className,
  narrative,
}: ReportTemplateProps) {
  const sourceEntries = Object.entries(report.bySource).sort(
    (a, b) => b[1] - a[1],
  );
  const hasActivity = report.totalEvents > 0;

  return (
    <ReportFrame config={config} pageSize={pageSize} className={className}>
      {/* Masthead */}
      <header className="sr-masthead">
        {config.logo ? (
          // Rendered as a CSS background (the same data:-URI-in-CSS idiom the
          // report fonts use) rather than an <img>. sanitizeReportConfig has
          // validated it to a strict base64 data:image URI whose charset cannot
          // break out of url("…"); the pipeline only permits data:/blob:
          // subresources, so this never triggers a network fetch.
          <div
            className="sr-logo"
            role="img"
            aria-label={
              config.companyName ? `${config.companyName} logo` : "Logo"
            }
            style={{ backgroundImage: `url("${config.logo}")` }}
          />
        ) : null}
        <div className="sr-kicker">Work Report</div>
        <h1 className="sr-title">{SCOPE_LABELS[scope]}</h1>
        <p className="sr-sub">{rangeLabel(report, days)}</p>
        {config.companyName ? (
          <p className="sr-prepared">Prepared by {config.companyName}</p>
        ) : null}
        <div className="sr-company">
          <span className="sr-chip">{SCOPE_LABELS[scope]}</span>
          <span className="sr-chip">{FILTER_LABELS[filter]}</span>
        </div>
      </header>

      {!hasActivity ? (
        <div className="sr-empty">
          No activity in this range. Try a longer range, a different scope, or a
          broader filter.
        </div>
      ) : (
        <>
          {/* Key stats */}
          <section className="sr-section sr-break-avoid">
            <div className="sr-stats">
              <Stat
                label="Total time"
                value={formatDuration(report.totalEstimatedMinutes)}
                accent
              />
              <Stat
                label="Events"
                value={report.totalEvents.toLocaleString()}
              />
              <Stat label="Active days" value={String(report.activeDays)} />
              <Stat
                label="Projects"
                value={String(
                  report.projects.filter((p) => p.projectId !== null).length ||
                    report.projects.length,
                )}
              />
            </div>
          </section>

          {/* Summary — narrative (optional) + deterministic outcomes. The
              headline content of the report: what was actually accomplished.
              Renders nothing when there is nothing to say. */}
          {narrative || (report.outcomes && report.outcomes.length > 0) ? (
            <section className="sr-section">
              <h2 className="sr-h2">Summary</h2>
              {narrative ? (
                <p className="sr-lead">{narrative.summary}</p>
              ) : null}
              {report.outcomes && report.outcomes.length > 0 ? (
                <div className="sr-outcomes">
                  {report.outcomes.map((outcome) => (
                    <div
                      className="sr-outcome"
                      key={outcome.projectId ?? outcome.projectName}
                    >
                      <div className="sr-outcome-name">
                        {outcome.projectName}
                      </div>
                      <ul>
                        {outcome.bullets.map((bullet) => (
                          <li key={bullet}>{bullet}</li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              ) : null}
            </section>
          ) : null}

          {/* Daily activity */}
          {report.daily.some((d) => d.minutes > 0) ? (
            <section className="sr-section sr-break-avoid">
              <h2 className="sr-h2">Daily activity</h2>
              <div className="sr-ticked">
                <DailyActivityChart
                  daily={report.daily}
                  barColor="var(--rep-accent)"
                  gridColor="var(--rep-border)"
                  textColor="var(--rep-muted)"
                  peakLabelColor="var(--rep-accent)"
                />
              </div>
            </section>
          ) : null}

          {/* Client vs internal */}
          {report.byClientType ? (
            <section className="sr-section">
              <h2 className="sr-h2">Client vs internal</h2>
              <div className="sr-split">
                <SplitRow
                  label="Client"
                  minutes={report.byClientType.client.estimatedMinutes}
                  projectCount={report.byClientType.client.projectCount}
                  eventCount={report.byClientType.client.eventCount}
                  totalMinutes={report.totalEstimatedMinutes}
                  barColor="var(--rep-accent)"
                />
                <SplitRow
                  label="Internal"
                  minutes={report.byClientType.internal.estimatedMinutes}
                  projectCount={report.byClientType.internal.projectCount}
                  eventCount={report.byClientType.internal.eventCount}
                  totalMinutes={report.totalEstimatedMinutes}
                  barColor="var(--rep-muted)"
                />
              </div>
            </section>
          ) : null}

          {/* Projects */}
          {report.projects.length > 0 ? (
            <section className="sr-section">
              <h2 className="sr-h2">Projects</h2>
              <table className="sr-projects sr-flow">
                <thead>
                  <tr>
                    <th>Project</th>
                    <th>Time</th>
                    <th>Share</th>
                    <th>Events</th>
                  </tr>
                </thead>
                <tbody>
                  {report.projects.map((project) => (
                    <ProjectRow
                      key={project.projectId ?? "__unassigned__"}
                      project={project}
                      totalMinutes={report.totalEstimatedMinutes}
                      tickets={
                        // The Summary's outcome bullets already narrate the
                        // tickets; per-row ticket lines are fallback detail
                        // for payloads without outcomes.
                        report.outcomes && report.outcomes.length > 0
                          ? undefined
                          : report.ticketsByProject?.find(
                              (t) => t.projectId === project.projectId,
                            )?.tickets
                      }
                    />
                  ))}
                </tbody>
              </table>
            </section>
          ) : null}

          {/* Unassigned breakdown — only present when unassigned time is a
              meaningful share of the range (threshold lives in the data
              layer), so the report explains the opaque bucket instead of
              leaving a bare 41% row. */}
          {report.unassignedBreakdown &&
          report.unassignedBreakdown.length > 0 ? (
            <section className="sr-section sr-break-avoid">
              <h2 className="sr-h2">Unassigned work</h2>
              <p className="sr-note">
                Time not yet attributed to a project, grouped by where it
                happened.
              </p>
              <ul className="sr-unassigned">
                {report.unassignedBreakdown.map((row) => (
                  <li key={row.label}>
                    <span className="sr-unassigned-label">{row.label}</span>
                    <span className="sr-unassigned-meta">
                      {row.eventCount.toLocaleString()}{" "}
                      {row.eventCount === 1 ? "event" : "events"}
                    </span>
                    <span className="sr-unassigned-time">
                      {formatDuration(row.estimatedMinutes)}
                    </span>
                  </li>
                ))}
              </ul>
            </section>
          ) : null}

          {/* By source */}
          {sourceEntries.length > 0 ? (
            <section className="sr-section sr-break-avoid">
              <h2 className="sr-h2">By source</h2>
              <div className="sr-pills">
                {sourceEntries.map(([source, count]) => (
                  <span className="sr-pill" key={source}>
                    <span>{sourceLabel(source)}</span>
                    <em>{count.toLocaleString()}</em>
                  </span>
                ))}
              </div>
            </section>
          ) : null}

          {/* Highlights */}
          {report.highlights.length > 0 ? (
            <section className="sr-section">
              <h2 className="sr-h2">Highlights</h2>
              <div className="sr-list">
                {report.highlights.map((h) => (
                  <div className="sr-hl" key={`${h.timestamp}-${h.label}`}>
                    <span className="sr-hl-tag">{sourceLabel(h.source)}</span>
                    <span className="sr-hl-label">{h.label}</span>
                    <span className="sr-hl-date">
                      {formatDateShort(h.timestamp)}
                    </span>
                  </div>
                ))}
              </div>
            </section>
          ) : null}

          {/* Contributors (team scope only) */}
          {scope === "team" && report.devices.length > 0 ? (
            <section className="sr-section">
              <h2 className="sr-h2">Contributors</h2>
              <div>
                {report.devices.map((device) => (
                  <div
                    className="sr-contrib"
                    key={device.userId ?? device.deviceId ?? "__local__"}
                  >
                    <span className="sr-contrib-name">
                      {device.userName ?? device.deviceName ?? "Local device"}
                    </span>
                    <span>{device.eventCount.toLocaleString()} events</span>
                    <span className="sr-contrib-time">
                      {formatDuration(device.estimatedMinutes)}
                    </span>
                  </div>
                ))}
              </div>
            </section>
          ) : null}
        </>
      )}

      {config.footerText ? (
        <footer className="sr-footer">{config.footerText}</footer>
      ) : null}
    </ReportFrame>
  );
}