use crate::models::{
    AppArtifactAliasHistoryRow, AppArtifactRow, AppArtifactRunSummaryRow, AppArtifactRunView,
    AppHeadArtifactView, AppHeadEvalSummaryRow, AppHeadRow, AppOperatorAuditPageView,
    AppOperatorAuditRow, AppOperatorControlReplayPageView, AppOperatorControlReplayRow,
    AppOperatorFacetBucketView, AppOperatorReplayPageView, AppOperatorReplaySnapshotDetailView,
    AppOperatorReplaySnapshotRow, AppOperatorRetentionView, AppPublishedArtifactRow,
};
use dioxus::prelude::*;
use dioxus::ssr::render_element;

use super::browser_app;

const DASHBOARD_SCRIPT: &str = r#"
const raw = document.getElementById("raw");
const robustnessReasons = document.getElementById("robustness-reasons");
const robustnessAlerts = document.getElementById("robustness-alerts");
const robustnessPeers = document.getElementById("robustness-peers");
const robustnessCanary = document.getElementById("robustness-canary");
const update = (payload) => {
  document.getElementById("connected").textContent = payload.swarm.connected_peers;
  document.getElementById("observed").textContent = payload.swarm.observed_peers.length;
  document.getElementById("admitted").textContent = payload.admitted_peers.length;
  document.getElementById("rejected").textContent = Object.keys(payload.rejected_peers).length;
  document.getElementById("receipts").textContent = payload.accepted_receipts;
  document.getElementById("merges").textContent = payload.certified_merges;
  document.getElementById("services").textContent = payload.services.join(", ");
  document.getElementById("transfers").textContent = payload.in_flight_transfers.length;
  document.getElementById("quarantined").textContent = payload.quarantined_peers.length;
  document.getElementById("banned").textContent = payload.banned_peers.length;
  document.getElementById("revocation").textContent = payload.minimum_revocation_epoch == null ? "n/a" : payload.minimum_revocation_epoch;
  const lower = payload.swarm.network_estimate.eta_lower_seconds;
  const upper = payload.swarm.network_estimate.eta_upper_seconds;
  document.getElementById("eta").textContent = lower == null && upper == null ? "n/a" : `${lower ?? "?"}s - ${upper ?? "?"}s`;
  document.getElementById("error").textContent = payload.last_error ?? "none";
  const panel = payload.robustness_panel;
  const rollup = payload.robustness_rollup;
  const rejectedUpdates = rollup?.rejected_updates ?? (panel == null ? 0 : panel.rejection_reasons.reduce((count, reason) => count + reason.count, 0));
  const meanTrust = rollup?.mean_trust_score != null
    ? rollup.mean_trust_score.toFixed(3)
    : panel == null || panel.trust_scores.length === 0
      ? "n/a"
      : (panel.trust_scores.reduce((sum, point) => sum + point.score, 0) / panel.trust_scores.length).toFixed(3);
  const quarantinedPeers = rollup?.quarantined_peer_count ?? (panel?.quarantined_peers.length ?? 0);
  const banRecommendations = rollup?.ban_recommended_peer_count ?? (panel?.quarantined_peers.filter((peer) => peer.ban_recommended).length ?? 0);
  const canaryRegressions = rollup?.canary_regression_count ?? (panel?.canary_regressions.length ?? 0);
  document.getElementById("robustness-preset").textContent = panel?.preset ?? "n/a";
  document.getElementById("robustness-rejections").textContent = `${rejectedUpdates}`;
  document.getElementById("robustness-quarantined").textContent = `${quarantinedPeers}`;
  document.getElementById("robustness-ban").textContent = `${banRecommendations}`;
  document.getElementById("robustness-canary-count").textContent = `${canaryRegressions}`;
  document.getElementById("robustness-trust").textContent = meanTrust;
  robustnessReasons.textContent = panel == null || panel.rejection_reasons.length === 0
    ? "No rejection reasons recorded yet."
    : panel.rejection_reasons.map((reason) => `${reason.reason}: ${reason.count}`).join("\n");
  robustnessAlerts.textContent = panel == null || panel.alerts.length === 0
    ? "No active robustness alerts."
    : panel.alerts.map((alert) => `${alert.severity}: ${alert.message}`).join("\n");
  robustnessPeers.textContent = panel == null || panel.quarantined_peers.length === 0
    ? "No quarantined peers."
    : panel.quarantined_peers.map((peer) => `${peer.peer_id} | reducer=${peer.reducer_eligible} | validator=${peer.validator_eligible} | ban=${peer.ban_recommended}`).join("\n");
  robustnessCanary.textContent = panel == null || panel.canary_regressions.length === 0
    ? "No canary regressions."
    : panel.canary_regressions.map((report) => `${report.candidate_head_id} | margin=${report.regression_margin.toFixed(4)} | backdoor=${report.detected_backdoor_trigger}`).join("\n");
  raw.textContent = JSON.stringify(payload, null, 2);
};

fetch("/status").then((response) => response.json()).then(update).catch((error) => {
  raw.textContent = `failed to load /status: ${error}`;
});

const events = new EventSource("/events");
events.onmessage = (event) => {
  update(JSON.parse(event.data));
};
events.onerror = () => {
  document.body.classList.add("danger");
};
"#;

pub(super) fn render_dashboard_html(network_id: &str) -> String {
    render_document(
        format!("burn_p2p bootstrap {network_id}"),
        rsx! { DashboardPage { network_id: network_id.to_owned() } },
        Some(DASHBOARD_SCRIPT),
    )
}

pub(super) fn render_artifact_run_summaries_html(
    experiment_id: &str,
    rows: &[AppArtifactRunSummaryRow],
    app_path: &str,
) -> String {
    render_document(
        format!("Artifact runs for {experiment_id}"),
        rsx! {
            ArtifactRunSummariesPage {
                experiment_id: experiment_id.to_owned(),
                rows: rows.to_vec(),
                back_href: app_path.to_owned(),
            }
        },
        None,
    )
}

pub(super) fn render_artifact_run_view_html(view: &AppArtifactRunView) -> String {
    render_document(
        format!("Artifact run {}", view.run_id),
        rsx! { ArtifactRunPage { view: view.clone() } },
        None,
    )
}

pub(super) fn render_head_artifact_view_html(view: &AppHeadArtifactView) -> String {
    render_document(
        format!("Artifact head {}", view.head.head_id),
        rsx! { ArtifactHeadPage { view: view.clone() } },
        None,
    )
}

pub(super) fn render_operator_control_replay_html(
    view: &AppOperatorControlReplayPageView,
) -> String {
    render_document(
        "Operator control replay".into(),
        rsx! { OperatorControlReplayPage { view: view.clone() } },
        None,
    )
}

pub(super) fn render_operator_audit_html(view: &AppOperatorAuditPageView) -> String {
    render_document(
        "Operator audit history".into(),
        rsx! { OperatorAuditPage { view: view.clone() } },
        None,
    )
}

pub(super) fn render_operator_replay_html(view: &AppOperatorReplayPageView) -> String {
    render_document(
        "Operator replay history".into(),
        rsx! { OperatorReplayPage { view: view.clone() } },
        None,
    )
}

pub(super) fn render_operator_replay_snapshot_html(
    view: &AppOperatorReplaySnapshotDetailView,
) -> String {
    render_document(
        "Operator replay snapshot".into(),
        rsx! { OperatorReplaySnapshotDetailPage { view: view.clone() } },
        None,
    )
}

pub(super) fn render_operator_retention_html(view: &AppOperatorRetentionView) -> String {
    render_document(
        "Operator retention".into(),
        rsx! { OperatorRetentionPage { view: view.clone() } },
        None,
    )
}

fn render_document(title: String, page: Element, script: Option<&str>) -> String {
    let title = escape_html_text(&title);
    let body = render_element(rsx! {
        {page}
        if let Some(script) = script {
            script { dangerous_inner_html: "{script}" }
        }
    });
    format!(
        concat!(
            "<!doctype html>",
            "<html lang=\"en\">",
            "<head>",
            "<meta charset=\"utf-8\">",
            "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "<meta name=\"theme-color\" content=\"#05070c\">",
            "<title>{title}</title>",
            "<style>{style}</style>",
            "</head>",
            "<body>{body}</body>",
            "</html>"
        ),
        title = title,
        style = browser_app::browser_app_stylesheet(),
        body = body,
    )
}

fn escape_html_text(value: &str) -> String {
    value
        .replace('&', "&amp;")
        .replace('<', "&lt;")
        .replace('>', "&gt;")
}

#[component]
fn DashboardPage(network_id: String) -> Element {
    rsx! {
        main { class: "operator-main",
            section { class: "panel hero-shell hero",
                div { class: "hero-top",
                    div { class: "hero-copy",
                        div { class: "eyebrow", "bootstrap edge" }
                        h1 { "burn_p2p" }
                        p { class: "hero-lead",
                            "Signed snapshots, diagnostics, and artifact history for ",
                            strong { "{network_id}" },
                            "."
                        }
                        div { class: "service-pill-stack",
                            span { class: "pill", "network {network_id}" }
                            span { class: "pill", "live edge" }
                        }
                    }
                    div { class: "hero-meta-grid",
                        MetaCard { label: "events", value: "/events", detail: "live diagnostics" }
                        MetaCard { label: "bundle", value: "/diagnostics/bundle", detail: "support export" }
                        MetaCard { label: "snapshot", value: "/portal/snapshot", detail: "browser edge state" }
                        MetaCard { label: "trust", value: "/trust", detail: "rollout and re-enrollment" }
                    }
                }
                div { class: "summary-grid hero-summary-grid",
                    LiveSummaryCard { label: "connected", value: "0", element_id: Some("connected") }
                    LiveSummaryCard { label: "observed", value: "0", element_id: Some("observed") }
                    LiveSummaryCard { label: "admitted", value: "0", element_id: Some("admitted") }
                    LiveSummaryCard { label: "rejected", value: "0", element_id: Some("rejected") }
                    LiveSummaryCard { label: "receipts", value: "0", element_id: Some("receipts") }
                    LiveSummaryCard { label: "merges", value: "0", element_id: Some("merges") }
                }
                div { class: "operator-link-row",
                    LinkPill { href: "/portal/snapshot", label: "/portal/snapshot" }
                    LinkPill { href: "/directory/signed", label: "/directory/signed" }
                    LinkPill { href: "/leaderboard", label: "/leaderboard" }
                    LinkPill { href: "/heads", label: "/heads" }
                    LinkPill { href: "/receipts", label: "/receipts" }
                    LinkPill { href: "/reducers/load", label: "/reducers/load" }
                    LinkPill { href: "/operator/audit".to_owned(), label: "/operator/audit" }
                    LinkPill { href: "/operator/replay".to_owned(), label: "/operator/replay" }
                    LinkPill { href: "/operator/control", label: "/operator/control" }
                    LinkPill { href: "/operator/retention/view".to_owned(), label: "/operator/retention/view" }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "services" }
                h2 { "Live edge state" }
                p { class: "muted section-copy", "Runtime posture, queue health, and trust state from the active bootstrap edge." }
                div { id: "services", class: "status-strip muted", "loading..." }
            }
            section { class: "panel",
                div { class: "eyebrow", "policy" }
                h2 { "Peers and policy" }
                div { class: "info-list",
                    InfoMetric { label: "in-flight transfers", value: "0", element_id: Some("transfers") }
                    InfoMetric { label: "quarantined", value: "0", element_id: Some("quarantined") }
                    InfoMetric { label: "banned", value: "0", element_id: Some("banned") }
                    InfoMetric { label: "min revocation epoch", value: "n/a", element_id: Some("revocation") }
                    InfoMetric { label: "eta", value: "n/a", element_id: Some("eta") }
                    InfoMetric { label: "last error", value: "none", element_id: Some("error") }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "robustness" }
                h2 { "Robustness" }
                p { class: "muted section-copy", "Current screening posture, quarantine state, and canary outcomes." }
                div { class: "info-list",
                    InfoMetric { label: "preset", value: "n/a", element_id: Some("robustness-preset") }
                    InfoMetric { label: "rejected updates", value: "0", element_id: Some("robustness-rejections") }
                    InfoMetric { label: "quarantined peers", value: "0", element_id: Some("robustness-quarantined") }
                    InfoMetric { label: "ban recommendations", value: "0", element_id: Some("robustness-ban") }
                    InfoMetric { label: "canary regressions", value: "0", element_id: Some("robustness-canary-count") }
                    InfoMetric { label: "mean trust", value: "n/a", element_id: Some("robustness-trust") }
                }
                div { class: "scroll-table",
                    div { class: "operator-raw-block",
                        h3 { "Rejection reasons" }
                        pre { id: "robustness-reasons", class: "operator-raw", "waiting for snapshot..." }
                    }
                    div { class: "operator-raw-block",
                        h3 { "Alerts" }
                        pre { id: "robustness-alerts", class: "operator-raw", "waiting for snapshot..." }
                    }
                    div { class: "operator-raw-block",
                        h3 { "Quarantined peers" }
                        pre { id: "robustness-peers", class: "operator-raw", "waiting for snapshot..." }
                    }
                    div { class: "operator-raw-block",
                        h3 { "Canary regressions" }
                        pre { id: "robustness-canary", class: "operator-raw", "waiting for snapshot..." }
                    }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "raw" }
                h2 { "Diagnostics" }
                p { class: "muted section-copy", "Live /status payload for quick inspection." }
                pre { id: "raw", class: "operator-raw", "waiting for snapshot..." }
            }
        }
    }
}

#[component]
fn ArtifactRunSummariesPage(
    experiment_id: String,
    rows: Vec<AppArtifactRunSummaryRow>,
    back_href: String,
) -> Element {
    let run_count = rows.len().to_string();
    rsx! {
        main { class: "operator-main",
            section { class: "panel hero-shell hero",
                div { class: "hero-top",
                    div { class: "hero-copy",
                        div { class: "eyebrow", "artifact history" }
                        h1 { "Artifact runs for {experiment_id}" }
                        p { class: "hero-lead", "Run-scoped alias history and publication summaries." }
                        div { class: "service-pill-stack",
                            span { class: "pill", "experiment {experiment_id}" }
                            span { class: "pill", "{rows.len()} run(s)" }
                        }
                    }
                    div { class: "hero-meta-grid",
                        MetaCard { label: "view", value: "runs", detail: "current aliases and publications" }
                        MetaCard { label: "api", value: "/artifacts/runs", detail: "json detail paths" }
                    }
                }
                div { class: "summary-grid hero-summary-grid",
                    LiveSummaryCard { label: "experiment", value: experiment_id.clone(), element_id: None }
                    LiveSummaryCard { label: "visible runs", value: run_count, element_id: None }
                }
                div { class: "operator-link-row",
                    LinkPill { href: back_href, label: "Back" }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "runs" }
                h2 { "Runs" }
                if rows.is_empty() {
                    p { class: "muted", "No run-scoped artifact history is currently available for this experiment." }
                } else {
                    div { class: "scroll-table",
                        table {
                            thead {
                                tr {
                                    th { "Run" }
                                    th { "Latest head" }
                                    th { "Aliases" }
                                    th { "Alias history" }
                                    th { "Published" }
                                    th { "API" }
                                }
                            }
                            tbody {
                                for row in rows.iter() {
                                    tr {
                                        td { a { href: row.run_view_path.clone(), code { "{row.run_id}" } } }
                                        td { code { "{row.latest_head_id}" } }
                                        td { "{row.alias_count}" }
                                        td { "{row.alias_history_count}" }
                                        td { "{row.published_artifact_count}" }
                                        td { a { class: "table-link", href: row.json_view_path.clone(), "json" } }
                                    }
                                }
                            }
                        }
                    }
                    div { class: "mobile-card-list",
                        for row in rows {
                            article { class: "mobile-card",
                                div { strong { "{row.run_id}" } }
                                div { class: "mobile-meta", "Latest head: {row.latest_head_id}" }
                                div { class: "mobile-meta", "Aliases: {row.alias_count}" }
                                div { class: "mobile-meta", "Alias history: {row.alias_history_count}" }
                                div { class: "mobile-meta", "Published: {row.published_artifact_count}" }
                                div { class: "operator-link-row", style: "margin-top: 10px;",
                                    a { href: row.run_view_path.clone(), "Open run" }
                                    a { href: row.json_view_path.clone(), "JSON" }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#[component]
fn ArtifactRunPage(view: AppArtifactRunView) -> Element {
    let latest_head = view
        .latest_head_id
        .clone()
        .unwrap_or_else(|| "n/a".to_owned());
    rsx! {
        main { class: "operator-main",
            section { class: "panel hero-shell hero",
                div { class: "hero-top",
                    div { class: "hero-copy",
                        div { class: "eyebrow", "artifact run" }
                        h1 { "Artifact run {view.run_id}" }
                        p { class: "hero-lead", "Current aliases, head history, evaluations, and publication state." }
                        div { class: "service-pill-stack",
                            span { class: "pill", "experiment {view.experiment_id}" }
                            span { class: "pill", "run {view.run_id}" }
                        }
                    }
                    div { class: "hero-meta-grid",
                        MetaCard { label: "latest head", value: latest_head.clone(), detail: "current frontier" }
                        MetaCard { label: "json", value: view.json_view_path.clone(), detail: "run payload" }
                    }
                }
                div { class: "summary-grid hero-summary-grid",
                    LiveSummaryCard { label: "heads", value: view.heads.len().to_string(), element_id: None }
                    LiveSummaryCard { label: "aliases", value: view.aliases.len().to_string(), element_id: None }
                    LiveSummaryCard { label: "history", value: view.alias_history.len().to_string(), element_id: None }
                    LiveSummaryCard { label: "publications", value: view.publications.len().to_string(), element_id: None }
                }
                div { class: "operator-link-row",
                    LinkPill { href: view.app_path.clone(), label: "Back" }
                    LinkPill { href: view.json_view_path.clone(), label: "View JSON" }
                }
            }
            HeadSection { heads: view.heads.clone(), aliases: view.aliases.clone() }
            AliasSection { aliases: view.aliases.clone(), empty: "No current artifact aliases are visible for this run." }
            AliasHistorySection { rows: view.alias_history.clone(), empty: "No historical alias transitions have been recorded for this run." }
            EvalSection { rows: view.eval_reports.clone(), empty: "No evaluation reports are currently attached to this run." }
            PublicationSection { rows: view.publications.clone(), empty: "No published artifacts are currently attached to this run." }
        }
    }
}

#[component]
fn ArtifactHeadPage(view: AppHeadArtifactView) -> Element {
    rsx! {
        main { class: "operator-main",
            section { class: "panel hero-shell hero",
                div { class: "hero-top",
                    div { class: "hero-copy",
                        div { class: "eyebrow", "artifact head" }
                        h1 { "Artifact head {view.head.head_id}" }
                        p { class: "hero-lead", "Publication state, available profiles, and attached evaluations for this checkpoint." }
                        div { class: "service-pill-stack",
                            span { class: "pill", "experiment {view.experiment_id}" }
                            span { class: "pill", "run {view.run_id}" }
                        }
                    }
                    div { class: "hero-meta-grid",
                        MetaCard { label: "step", value: view.head.global_step.to_string(), detail: view.head.created_at.clone() }
                        MetaCard { label: "json", value: view.json_view_path.clone(), detail: "head payload" }
                    }
                }
                div { class: "summary-grid hero-summary-grid",
                    LiveSummaryCard { label: "aliases", value: view.aliases.len().to_string(), element_id: None }
                    LiveSummaryCard { label: "history", value: view.alias_history.len().to_string(), element_id: None }
                    LiveSummaryCard { label: "evaluations", value: view.eval_reports.len().to_string(), element_id: None }
                    LiveSummaryCard { label: "publications", value: view.publications.len().to_string(), element_id: None }
                }
                div { class: "operator-link-row",
                    LinkPill { href: view.app_path.clone(), label: "Back" }
                    LinkPill { href: view.run_view_path.clone(), label: "Run history" }
                    LinkPill { href: view.json_view_path.clone(), label: "View JSON" }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "profiles" }
                h2 { "Available profiles" }
                if view.available_profiles.is_empty() {
                    p { class: "muted", "No publication profiles are currently available." }
                } else {
                    div { class: "service-pill-stack",
                        for profile in view.available_profiles.iter() {
                            span { class: "pill", "{profile}" }
                        }
                    }
                }
            }
            AliasSection { aliases: view.aliases.clone(), empty: "No current aliases resolve to this head." }
            AliasHistorySection { rows: view.alias_history.clone(), empty: "No alias transition history is currently visible for this head." }
            EvalSection { rows: view.eval_reports.clone(), empty: "No evaluation reports are currently attached to this head." }
            PublicationSection { rows: view.publications.clone(), empty: "No published artifacts are currently attached to this head." }
        }
    }
}

#[component]
fn OperatorAuditPage(view: AppOperatorAuditPageView) -> Element {
    let filter_count = view.filter_tags.len().to_string();
    rsx! {
        main { class: "operator-main",
            section { class: "panel hero-shell hero",
                div { class: "hero-top",
                    div { class: "hero-copy",
                        div { class: "eyebrow", "operator audit" }
                        h1 { "Operator audit history" }
                        p { class: "hero-lead",
                            "Receipts, heads, merges, lifecycle plans, schedules, and metrics across retained operator history."
                        }
                        div { class: "service-pill-stack",
                            span { class: "pill", "backend {view.summary.backend}" }
                            span { class: "pill", "{view.total} matching row(s)" }
                            span { class: "pill", "{filter_count} active filter(s)" }
                        }
                    }
                    div { class: "hero-meta-grid",
                        MetaCard { label: "json page", value: view.json_page_path.clone(), detail: "paged api export" }
                        MetaCard { label: "json summary", value: view.json_summary_path.clone(), detail: "aggregate counts" }
                        MetaCard { label: "json facets", value: view.json_facets_path.clone(), detail: "top buckets" }
                    }
                }
                div { class: "summary-grid hero-summary-grid",
                    LiveSummaryCard { label: "records", value: view.summary.record_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "experiments", value: view.summary.distinct_experiment_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "peers", value: view.summary.distinct_peer_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "heads", value: view.summary.distinct_head_count.to_string(), element_id: None }
                }
                div { class: "operator-link-row",
                    LinkPill { href: "/".to_owned(), label: "Dashboard" }
                    LinkPill { href: view.json_page_path.clone(), label: "View JSON page" }
                    LinkPill { href: view.json_summary_path.clone(), label: "View JSON summary" }
                    LinkPill { href: view.json_facets_path.clone(), label: "View JSON facets" }
                    if let Some(clear_filters_path) = view.clear_filters_path.clone() {
                        a { class: "pill", href: clear_filters_path, "Reset query" }
                    }
                    if let Some(prev_page_path) = view.prev_page_path.clone() {
                        a { class: "pill", href: prev_page_path, "Prev page" }
                    }
                    if let Some(next_page_path) = view.next_page_path.clone() {
                        a { class: "pill", href: next_page_path, "Next page" }
                    }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "query" }
                h2 { "Current query" }
                if view.filter_tags.is_empty() {
                    p { class: "muted", "No filters are active. Showing the newest retained audit rows." }
                } else {
                    div { class: "service-pill-stack",
                        for tag in view.filter_tags.iter() {
                            span { class: "pill", "{tag}" }
                        }
                    }
                }
                div { class: "info-list",
                    InfoMetric { label: "offset", value: view.offset.to_string(), element_id: None }
                    InfoMetric { label: "limit", value: view.limit.to_string(), element_id: None }
                    InfoMetric { label: "total", value: view.total.to_string(), element_id: None }
                    InfoMetric {
                        label: "capture range",
                        value: format!(
                            "{} -> {}",
                            view.summary
                                .earliest_captured_at
                                .clone()
                                .unwrap_or_else(|| "n/a".into()),
                            view.summary
                                .latest_captured_at
                                .clone()
                                .unwrap_or_else(|| "n/a".into())
                        ),
                        element_id: None,
                    }
                }
                if !view.summary.kind_counts.is_empty() {
                    div { class: "service-pill-stack",
                        for kind in view.summary.kind_counts.iter() {
                            span { class: "pill", "{kind}" }
                        }
                    }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "facets" }
                h2 { "Top facets" }
                p { class: "muted section-copy", "Highest-frequency values across the filtered audit query." }
                div { class: "mobile-card-list",
                    FacetBucketCard { label: "Kinds".to_owned(), buckets: view.facets.kinds.clone() }
                    FacetBucketCard { label: "Studies".to_owned(), buckets: view.facets.studies.clone() }
                    FacetBucketCard { label: "Experiments".to_owned(), buckets: view.facets.experiments.clone() }
                    FacetBucketCard { label: "Revisions".to_owned(), buckets: view.facets.revisions.clone() }
                    FacetBucketCard { label: "Peers".to_owned(), buckets: view.facets.peers.clone() }
                    FacetBucketCard { label: "Heads".to_owned(), buckets: view.facets.heads.clone() }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "records" }
                h2 { "Audit rows" }
                if view.rows.is_empty() {
                    p { class: "muted", "No audit rows matched the current query." }
                } else {
                    div { class: "scroll-table",
                        table {
                            thead {
                                tr {
                                    th { "Kind" }
                                    th { "Scope" }
                                    th { "Peer / head" }
                                    th { "Captured" }
                                    th { "Summary" }
                                }
                            }
                            tbody {
                                for row in view.rows.iter() {
                                    OperatorAuditRowView { row: row.clone() }
                                }
                            }
                        }
                    }
                    div { class: "mobile-card-list",
                        for row in view.rows {
                            OperatorAuditCard { row: row.clone() }
                        }
                    }
                }
            }
        }
    }
}

#[component]
fn OperatorControlReplayPage(view: AppOperatorControlReplayPageView) -> Element {
    let filter_count = view.filter_tags.len().to_string();
    rsx! {
        main { class: "operator-main",
            section { class: "panel hero-shell hero",
                div { class: "hero-top",
                    div { class: "hero-copy",
                        div { class: "eyebrow", "operator replay" }
                        h1 { "Lifecycle and schedule history" }
                        p { class: "hero-lead",
                            "Typed control-plane replay for authoritative lifecycle plans and fleet schedule epochs."
                        }
                        div { class: "service-pill-stack",
                            span { class: "pill", "backend {view.summary.backend}" }
                            span { class: "pill", "{view.total} matching row(s)" }
                            span { class: "pill", "{filter_count} active filter(s)" }
                        }
                    }
                    div { class: "hero-meta-grid",
                        MetaCard { label: "json page", value: view.json_page_path.clone(), detail: "paged api export" }
                        MetaCard { label: "json summary", value: view.json_summary_path.clone(), detail: "aggregate counts" }
                    }
                }
                div { class: "summary-grid hero-summary-grid",
                    LiveSummaryCard { label: "records", value: view.summary.record_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "experiments", value: view.summary.distinct_experiment_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "peers", value: view.summary.distinct_peer_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "windows", value: view.summary.distinct_window_count.to_string(), element_id: None }
                }
                div { class: "operator-link-row",
                    LinkPill { href: "/".to_owned(), label: "Dashboard" }
                    LinkPill { href: view.json_page_path.clone(), label: "View JSON page" }
                    LinkPill { href: view.json_summary_path.clone(), label: "View JSON summary" }
                    if let Some(clear_filters_path) = view.clear_filters_path.clone() {
                        a { class: "pill", href: clear_filters_path, "Reset query" }
                    }
                    if let Some(prev_page_path) = view.prev_page_path.clone() {
                        a { class: "pill", href: prev_page_path, "Prev page" }
                    }
                    if let Some(next_page_path) = view.next_page_path.clone() {
                        a { class: "pill", href: next_page_path, "Next page" }
                    }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "query" }
                h2 { "Current query" }
                if view.filter_tags.is_empty() {
                    p { class: "muted", "No filters are active. Showing the newest retained control replay rows." }
                } else {
                    div { class: "service-pill-stack",
                        for tag in view.filter_tags.iter() {
                            span { class: "pill", "{tag}" }
                        }
                    }
                }
                div { class: "info-list",
                    InfoMetric { label: "offset", value: view.offset.to_string(), element_id: None }
                    InfoMetric { label: "limit", value: view.limit.to_string(), element_id: None }
                    InfoMetric { label: "total", value: view.total.to_string(), element_id: None }
                    InfoMetric {
                        label: "capture range",
                        value: format!(
                            "{} -> {}",
                            view.summary
                                .earliest_captured_at
                                .clone()
                                .unwrap_or_else(|| "n/a".into()),
                            view.summary
                                .latest_captured_at
                                .clone()
                                .unwrap_or_else(|| "n/a".into())
                        ),
                        element_id: None,
                    }
                }
                if !view.summary.kind_counts.is_empty() {
                    div { class: "service-pill-stack",
                        for kind in view.summary.kind_counts.iter() {
                            span { class: "pill", "{kind}" }
                        }
                    }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "records" }
                h2 { "Replay rows" }
                if view.rows.is_empty() {
                    p { class: "muted", "No lifecycle or schedule rows matched the current query." }
                } else {
                    div { class: "scroll-table",
                        table {
                            thead {
                                tr {
                                    th { "Kind" }
                                    th { "Scope" }
                                    th { "Peer / slot" }
                                    th { "Window / epoch" }
                                    th { "Captured" }
                                    th { "Summary" }
                                }
                            }
                            tbody {
                                for row in view.rows.iter() {
                                    OperatorControlReplayRowView { row: row.clone() }
                                }
                            }
                        }
                    }
                    div { class: "mobile-card-list",
                        for row in view.rows {
                            OperatorControlReplayCard { row: row.clone() }
                        }
                    }
                }
            }
        }
    }
}

#[component]
fn OperatorReplayPage(view: AppOperatorReplayPageView) -> Element {
    let filter_count = view.filter_tags.len().to_string();
    rsx! {
        main { class: "operator-main",
            section { class: "panel hero-shell hero",
                div { class: "hero-top",
                    div { class: "hero-copy",
                        div { class: "eyebrow", "operator replay" }
                        h1 { "Retained replay snapshots" }
                        p { class: "hero-lead",
                            "Snapshot-level replay history for lifecycle, schedule, and retained training state."
                        }
                        div { class: "service-pill-stack",
                            span { class: "pill", "{view.total} matching snapshot(s)" }
                            span { class: "pill", "{filter_count} active filter(s)" }
                        }
                    }
                    div { class: "hero-meta-grid",
                        MetaCard { label: "json page", value: view.json_page_path.clone(), detail: "paged api export" }
                        MetaCard { label: "page receipts", value: view.visible_receipt_count.to_string(), detail: "visible retained receipts" }
                        MetaCard {
                            label: "page control",
                            value: format!(
                                "{} lifecycle / {} schedule",
                                view.visible_lifecycle_plan_count,
                                view.visible_schedule_epoch_count
                            ),
                            detail: "visible control history"
                        }
                    }
                }
                div { class: "summary-grid hero-summary-grid",
                    LiveSummaryCard { label: "snapshots", value: view.total.to_string(), element_id: None }
                    LiveSummaryCard { label: "visible receipts", value: view.visible_receipt_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "visible lifecycle", value: view.visible_lifecycle_plan_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "visible schedule", value: view.visible_schedule_epoch_count.to_string(), element_id: None }
                }
                div { class: "operator-link-row",
                    LinkPill { href: "/".to_owned(), label: "Dashboard" }
                    LinkPill { href: view.json_page_path.clone(), label: "View JSON page" }
                    if let Some(clear_filters_path) = view.clear_filters_path.clone() {
                        a { class: "pill", href: clear_filters_path, "Reset query" }
                    }
                    if let Some(prev_page_path) = view.prev_page_path.clone() {
                        a { class: "pill", href: prev_page_path, "Prev page" }
                    }
                    if let Some(next_page_path) = view.next_page_path.clone() {
                        a { class: "pill", href: next_page_path, "Next page" }
                    }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "query" }
                h2 { "Current query" }
                if view.filter_tags.is_empty() {
                    p { class: "muted", "No filters are active. Showing the newest retained replay snapshots." }
                } else {
                    div { class: "service-pill-stack",
                        for tag in view.filter_tags.iter() {
                            span { class: "pill", "{tag}" }
                        }
                    }
                }
                div { class: "info-list",
                    InfoMetric { label: "offset", value: view.offset.to_string(), element_id: None }
                    InfoMetric { label: "limit", value: view.limit.to_string(), element_id: None }
                    InfoMetric { label: "total", value: view.total.to_string(), element_id: None }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "snapshots" }
                h2 { "Replay rows" }
                if view.rows.is_empty() {
                    p { class: "muted", "No replay snapshots matched the current query." }
                } else {
                    div { class: "scroll-table",
                        table {
                            thead {
                                tr {
                                    th { "Captured" }
                                    th { "Scope" }
                                    th { "Counts" }
                                    th { "Summary" }
                                    th { "API" }
                                }
                            }
                            tbody {
                                for row in view.rows.iter() {
                                    OperatorReplayRowView { row: row.clone() }
                                }
                            }
                        }
                    }
                    div { class: "mobile-card-list",
                        for row in view.rows {
                            OperatorReplayCard { row: row.clone() }
                        }
                    }
                }
            }
        }
    }
}

#[component]
fn OperatorReplaySnapshotDetailPage(view: AppOperatorReplaySnapshotDetailView) -> Element {
    rsx! {
        main { class: "operator-main",
            section { class: "panel hero-shell hero",
                div { class: "hero-top",
                    div { class: "hero-copy",
                        div { class: "eyebrow", "operator replay snapshot" }
                        h1 { "Retained replay snapshot" }
                        p { class: "hero-lead",
                            "Human-facing detail view for one retained operator replay snapshot."
                        }
                        div { class: "service-pill-stack",
                            span { class: "pill", "{view.captured_at}" }
                            span { class: "pill", "{view.receipt_count} receipts" }
                            span { class: "pill", "{view.lifecycle_plan_count} lifecycle / {view.schedule_epoch_count} schedule" }
                        }
                    }
                    div { class: "hero-meta-grid",
                        MetaCard { label: "json", value: view.json_snapshot_path.clone(), detail: "snapshot payload" }
                        MetaCard { label: "replay", value: view.replay_page_path.clone(), detail: "back to paged history" }
                    }
                }
                div { class: "summary-grid hero-summary-grid",
                    LiveSummaryCard { label: "heads", value: view.head_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "merges", value: view.merge_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "peer metrics", value: view.peer_window_metric_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "eval reports", value: view.head_eval_report_count.to_string(), element_id: None }
                }
                div { class: "operator-link-row",
                    LinkPill { href: view.replay_page_path.clone(), label: "Replay history" }
                    LinkPill { href: view.json_snapshot_path.clone(), label: "View JSON snapshot" }
                    if let Some(audit_scope_path) = view.audit_scope_path.clone() {
                        a { class: "pill", href: audit_scope_path, "Audit scope" }
                    }
                    if let Some(control_scope_path) = view.control_scope_path.clone() {
                        a { class: "pill", href: control_scope_path, "Control scope" }
                    }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "scope" }
                h2 { "Retained scope" }
                div { class: "info-list",
                    InfoMetric { label: "studies", value: format_scope_list(&view.study_ids), element_id: None }
                    InfoMetric { label: "experiments", value: format_scope_list(&view.experiment_ids), element_id: None }
                    InfoMetric { label: "revisions", value: format_scope_list(&view.revision_ids), element_id: None }
                    InfoMetric { label: "heads", value: format_scope_list(&view.head_ids), element_id: None }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "counts" }
                h2 { "Retained entities" }
                div { class: "info-list",
                    InfoMetric { label: "receipts", value: view.receipt_count.to_string(), element_id: None }
                    InfoMetric { label: "heads", value: view.head_count.to_string(), element_id: None }
                    InfoMetric { label: "merges", value: view.merge_count.to_string(), element_id: None }
                    InfoMetric { label: "lifecycle plans", value: view.lifecycle_plan_count.to_string(), element_id: None }
                    InfoMetric { label: "schedule epochs", value: view.schedule_epoch_count.to_string(), element_id: None }
                    InfoMetric { label: "peer window metrics", value: view.peer_window_metric_count.to_string(), element_id: None }
                    InfoMetric { label: "reducer cohort metrics", value: view.reducer_cohort_metric_count.to_string(), element_id: None }
                    InfoMetric { label: "head eval reports", value: view.head_eval_report_count.to_string(), element_id: None }
                    InfoMetric { label: "eval protocol manifests", value: view.eval_protocol_manifest_count.to_string(), element_id: None }
                }
            }
        }
    }
}

#[component]
fn OperatorRetentionPage(view: AppOperatorRetentionView) -> Element {
    rsx! {
        main { class: "operator-main",
            section { class: "panel hero-shell hero",
                div { class: "hero-top",
                    div { class: "hero-copy",
                        div { class: "eyebrow", "operator retention" }
                        h1 { "Retention policy" }
                        p { class: "hero-lead",
                            "Current backend retention posture for replay snapshots, audit rows, and raw metrics history."
                        }
                        div { class: "service-pill-stack",
                            span { class: "pill", "backend {view.backend}" }
                            span { class: "pill", "{view.persisted_snapshot_count} retained snapshots" }
                            span { class: "pill", "{view.persisted_audit_record_count} retained audit rows" }
                        }
                    }
                    div { class: "hero-meta-grid",
                        MetaCard { label: "json", value: view.json_summary_path.clone(), detail: "retention summary payload" }
                        MetaCard {
                            label: "latest snapshot",
                            value: view.latest_snapshot_at.clone().unwrap_or_else(|| "n/a".into()),
                            detail: "newest retained replay point"
                        }
                    }
                }
                div { class: "summary-grid hero-summary-grid",
                    LiveSummaryCard { label: "snapshot limit", value: view.snapshot_retention_limit.to_string(), element_id: None }
                    LiveSummaryCard { label: "audit limit", value: view.audit_retention_limit.to_string(), element_id: None }
                    LiveSummaryCard { label: "retained snapshots", value: view.persisted_snapshot_count.to_string(), element_id: None }
                    LiveSummaryCard { label: "retained audit", value: view.persisted_audit_record_count.to_string(), element_id: None }
                }
                div { class: "operator-link-row",
                    LinkPill { href: "/".to_owned(), label: "Dashboard" }
                    LinkPill { href: view.json_summary_path.clone(), label: "View JSON summary" }
                }
            }
            section { class: "panel",
                div { class: "eyebrow", "budget" }
                h2 { "Metrics retention budget" }
                div { class: "info-list",
                    InfoMetric { label: "peer window / revision", value: view.max_peer_window_entries_per_revision.to_string(), element_id: None }
                    InfoMetric { label: "reducer cohort / revision", value: view.max_reducer_cohort_entries_per_revision.to_string(), element_id: None }
                    InfoMetric { label: "head eval / revision", value: view.max_head_eval_reports_per_revision.to_string(), element_id: None }
                    InfoMetric { label: "metric revisions / experiment", value: view.max_metric_revisions_per_experiment.to_string(), element_id: None }
                    InfoMetric { label: "peer detail windows", value: view.max_peer_window_detail_windows.to_string(), element_id: None }
                }
            }
        }
    }
}

#[component]
fn FacetBucketCard(label: String, buckets: Vec<AppOperatorFacetBucketView>) -> Element {
    rsx! {
        article { class: "mobile-card",
            div { strong { "{label}" } }
            if buckets.is_empty() {
                div { class: "muted", "No matching values." }
            } else {
                div { class: "service-pill-stack", style: "margin-top: 10px;",
                    for bucket in buckets {
                        span { class: "pill", "{bucket.value} ({bucket.count})" }
                    }
                }
            }
        }
    }
}

#[component]
fn OperatorAuditRowView(row: AppOperatorAuditRow) -> Element {
    let scope = format_operator_scope(
        row.study_id.as_deref(),
        row.experiment_id.as_deref(),
        row.revision_id.as_deref(),
    );
    let peer_head = format_operator_peer_head(row.peer_id.as_deref(), row.head_id.as_deref());
    rsx! {
        tr {
            td {
                div { class: "table-cell-stack",
                    strong { "{row.kind}" }
                    span { class: "muted", "{row.record_id}" }
                }
            }
            td { "{scope}" }
            td { "{peer_head}" }
            td { "{row.captured_at}" }
            td {
                div { class: "table-cell-stack",
                    span { "{row.summary}" }
                    if row.control_path.is_some() || row.replay_path.is_some() {
                        div { class: "operator-link-row", style: "margin-top: 8px;",
                            if let Some(control_path) = row.control_path.clone() {
                                a { class: "table-link", href: control_path, "control" }
                            }
                            if let Some(replay_path) = row.replay_path.clone() {
                                a { class: "table-link", href: replay_path, "replay" }
                            }
                        }
                    }
                }
            }
        }
    }
}

#[component]
fn OperatorAuditCard(row: AppOperatorAuditRow) -> Element {
    let scope = format_operator_scope(
        row.study_id.as_deref(),
        row.experiment_id.as_deref(),
        row.revision_id.as_deref(),
    );
    let peer_head = format_operator_peer_head(row.peer_id.as_deref(), row.head_id.as_deref());
    rsx! {
        article { class: "mobile-card",
            div { strong { "{row.kind}" } }
            div { class: "mobile-meta", "{row.record_id}" }
            div { class: "mobile-meta", "{scope}" }
            div { class: "mobile-meta", "{peer_head}" }
            div { class: "mobile-meta", "{row.captured_at}" }
            div { class: "muted", "{row.summary}" }
            if row.control_path.is_some() || row.replay_path.is_some() {
                div { class: "operator-link-row", style: "margin-top: 10px;",
                    if let Some(control_path) = row.control_path.clone() {
                        a { href: control_path, "Control history" }
                    }
                    if let Some(replay_path) = row.replay_path.clone() {
                        a { href: replay_path, "Replay history" }
                    }
                }
            }
        }
    }
}

#[component]
fn OperatorControlReplayRowView(row: AppOperatorControlReplayRow) -> Element {
    let scope = match (
        row.source_experiment_id.as_deref(),
        row.source_revision_id.as_deref(),
    ) {
        (Some(source_experiment_id), Some(source_revision_id)) => format!(
            "{} / {} -> {} / {}",
            source_experiment_id, source_revision_id, row.experiment_id, row.revision_id
        ),
        (Some(source_experiment_id), None) => format!(
            "{} -> {} / {}",
            source_experiment_id, row.experiment_id, row.revision_id
        ),
        _ => format!("{} / {}", row.experiment_id, row.revision_id),
    };
    let peer_slot = match (row.peer_id.as_deref(), row.slot_index) {
        (Some(peer_id), Some(slot_index)) => format!("{peer_id} · slot {slot_index}"),
        (Some(peer_id), None) => peer_id.to_owned(),
        (None, Some(slot_index)) => format!("slot {slot_index}"),
        (None, None) => "n/a".into(),
    };
    let window_epoch = match row.ends_before_window {
        Some(ends_before_window) => format!(
            "window {} .. < {} · epoch {}",
            row.window_id, ends_before_window, row.plan_epoch
        ),
        None => format!("window {} · epoch {}", row.window_id, row.plan_epoch),
    };
    rsx! {
        tr {
            td {
                div { class: "table-cell-stack",
                    strong { "{row.kind}" }
                    span { class: "muted", "{row.record_id}" }
                }
            }
            td {
                div { class: "table-cell-stack",
                    code { "{row.network_id}" }
                    span { class: "muted", "{row.study_id}" }
                    span { class: "muted", "{scope}" }
                }
            }
            td { "{peer_slot}" }
            td { "{window_epoch}" }
            td { "{row.captured_at}" }
            td {
                div { class: "table-cell-stack",
                    span { "{row.summary}" }
                    div { class: "operator-link-row", style: "margin-top: 8px;",
                        a { class: "table-link", href: row.audit_path.clone(), "audit" }
                        a { class: "table-link", href: row.replay_path.clone(), "replay" }
                    }
                }
            }
        }
    }
}

#[component]
fn OperatorControlReplayCard(row: AppOperatorControlReplayRow) -> Element {
    let scope = match (
        row.source_experiment_id.as_deref(),
        row.source_revision_id.as_deref(),
    ) {
        (Some(source_experiment_id), Some(source_revision_id)) => format!(
            "{} / {} -> {} / {}",
            source_experiment_id, source_revision_id, row.experiment_id, row.revision_id
        ),
        (Some(source_experiment_id), None) => format!(
            "{} -> {} / {}",
            source_experiment_id, row.experiment_id, row.revision_id
        ),
        _ => format!("{} / {}", row.experiment_id, row.revision_id),
    };
    let peer_slot = match (row.peer_id.as_deref(), row.slot_index) {
        (Some(peer_id), Some(slot_index)) => format!("{peer_id} · slot {slot_index}"),
        (Some(peer_id), None) => peer_id.to_owned(),
        (None, Some(slot_index)) => format!("slot {slot_index}"),
        (None, None) => "n/a".into(),
    };
    let window_epoch = match row.ends_before_window {
        Some(ends_before_window) => format!(
            "window {} .. < {} · epoch {}",
            row.window_id, ends_before_window, row.plan_epoch
        ),
        None => format!("window {} · epoch {}", row.window_id, row.plan_epoch),
    };
    rsx! {
        article { class: "mobile-card",
            div { strong { "{row.kind}" } }
            div { class: "mobile-meta", "{row.record_id}" }
            div { class: "mobile-meta", "{row.network_id} · {row.study_id}" }
            div { class: "mobile-meta", "{scope}" }
            div { class: "mobile-meta", "{peer_slot}" }
            div { class: "mobile-meta", "{window_epoch}" }
            div { class: "mobile-meta", "{row.captured_at}" }
            div { class: "muted", "{row.summary}" }
            div { class: "operator-link-row", style: "margin-top: 10px;",
                a { href: row.audit_path.clone(), "Audit history" }
                a { href: row.replay_path.clone(), "Replay history" }
            }
        }
    }
}

#[component]
fn OperatorReplayRowView(row: AppOperatorReplaySnapshotRow) -> Element {
    let scope = format_replay_scope(&row);
    let counts = format_replay_counts(&row);
    rsx! {
        tr {
            td { "{row.captured_at}" }
            td { "{scope}" }
            td { "{counts}" }
            td { "{row.summary}" }
            td {
                div { class: "table-cell-stack",
                    a { class: "table-link", href: row.snapshot_view_path.clone(), "view" }
                    a { class: "table-link", href: row.json_snapshot_path.clone(), "json" }
                    if let Some(audit_scope_path) = row.audit_scope_path.clone() {
                        a { class: "table-link", href: audit_scope_path, "audit" }
                    }
                    if let Some(control_scope_path) = row.control_scope_path.clone() {
                        a { class: "table-link", href: control_scope_path, "control" }
                    }
                }
            }
        }
    }
}

#[component]
fn OperatorReplayCard(row: AppOperatorReplaySnapshotRow) -> Element {
    let scope = format_replay_scope(&row);
    let counts = format_replay_counts(&row);
    rsx! {
        article { class: "mobile-card",
            div { strong { "{row.captured_at}" } }
            div { class: "mobile-meta", "{scope}" }
            div { class: "mobile-meta", "{counts}" }
            div { class: "muted", "{row.summary}" }
            div { class: "operator-link-row", style: "margin-top: 10px;",
                a { href: row.snapshot_view_path.clone(), "Open snapshot" }
                a { href: row.json_snapshot_path.clone(), "JSON snapshot" }
                if let Some(audit_scope_path) = row.audit_scope_path.clone() {
                    a { href: audit_scope_path, "Audit scope" }
                }
                if let Some(control_scope_path) = row.control_scope_path.clone() {
                    a { href: control_scope_path, "Control scope" }
                }
            }
        }
    }
}

fn format_operator_scope(
    study_id: Option<&str>,
    experiment_id: Option<&str>,
    revision_id: Option<&str>,
) -> String {
    let mut parts = Vec::new();
    if let Some(study_id) = study_id {
        parts.push(study_id.to_owned());
    }
    if let Some(experiment_id) = experiment_id {
        parts.push(experiment_id.to_owned());
    }
    if let Some(revision_id) = revision_id {
        parts.push(revision_id.to_owned());
    }
    if parts.is_empty() {
        "n/a".into()
    } else {
        parts.join(" / ")
    }
}

fn format_operator_peer_head(peer_id: Option<&str>, head_id: Option<&str>) -> String {
    match (peer_id, head_id) {
        (Some(peer_id), Some(head_id)) => format!("{peer_id} · {head_id}"),
        (Some(peer_id), None) => peer_id.to_owned(),
        (None, Some(head_id)) => head_id.to_owned(),
        (None, None) => "n/a".into(),
    }
}

fn format_scope_list(values: &[String]) -> String {
    if values.is_empty() {
        "n/a".into()
    } else {
        values.join(", ")
    }
}

fn format_replay_scope(row: &AppOperatorReplaySnapshotRow) -> String {
    format!(
        "{} | {} | {}",
        format_scope_list(&row.study_ids),
        format_scope_list(&row.experiment_ids),
        format_scope_list(&row.revision_ids),
    )
}

fn format_replay_counts(row: &AppOperatorReplaySnapshotRow) -> String {
    format!(
        "receipts {} · heads {} · merges {} · lifecycle {} · schedule {}",
        row.receipt_count,
        row.head_count,
        row.merge_count,
        row.lifecycle_plan_count,
        row.schedule_epoch_count,
    )
}

#[component]
fn HeadSection(heads: Vec<AppHeadRow>, aliases: Vec<AppArtifactRow>) -> Element {
    rsx! {
        section { class: "panel",
            div { class: "eyebrow", "heads" }
            h2 { "Heads" }
            if heads.is_empty() {
                p { class: "muted", "No heads are currently recorded for this run." }
            } else {
                div { class: "scroll-table",
                    table {
                        thead { tr { th { "Head" } th { "Revision" } th { "Step" } th { "Created" } } }
                        tbody {
                            for head in heads.iter() {
                                tr {
                                    td {
                                        a {
                                            href: aliases.iter()
                                                .find(|row| row.head_id == head.head_id)
                                                .map(|row| row.head_view_path.clone())
                                                .unwrap_or_else(|| format!("#head-{}", head.head_id)),
                                            code { "{head.head_id}" }
                                        }
                                    }
                                    td { code { "{head.revision_id}" } }
                                    td { "{head.global_step}" }
                                    td { "{head.created_at}" }
                                }
                            }
                        }
                    }
                }
                div { class: "mobile-card-list",
                    for head in heads {
                        article { class: "mobile-card",
                            div { strong { "{head.head_id}" } }
                            div { class: "mobile-meta", "Revision: {head.revision_id}" }
                            div { class: "mobile-meta", "Step: {head.global_step}" }
                            div { class: "mobile-meta", "{head.created_at}" }
                        }
                    }
                }
            }
        }
    }
}

#[component]
fn AliasSection(aliases: Vec<AppArtifactRow>, empty: &'static str) -> Element {
    rsx! {
        section { class: "panel",
            div { class: "eyebrow", "aliases" }
            h2 { "Current aliases" }
            if aliases.is_empty() {
                p { class: "muted", "{empty}" }
            } else {
                div { class: "scroll-table",
                    table {
                        thead {
                            tr {
                                th { "Alias" }
                                th { "Scope" }
                                th { "Profile" }
                                th { "Head" }
                                th { "Status" }
                                th { "Published" }
                                th { "Actions" }
                            }
                        }
                        tbody {
                            for row in aliases.iter() {
                                AliasRow { row: row.clone() }
                            }
                        }
                    }
                }
                div { class: "mobile-card-list",
                    for row in aliases {
                        AliasCard { row }
                    }
                }
            }
        }
    }
}

#[component]
fn AliasHistorySection(rows: Vec<AppArtifactAliasHistoryRow>, empty: &'static str) -> Element {
    rsx! {
        section { class: "panel",
            div { class: "eyebrow", "history" }
            h2 { "Alias transition history" }
            if rows.is_empty() {
                p { class: "muted", "{empty}" }
            } else {
                div { class: "scroll-table",
                    table {
                        thead { tr { th { "Alias" } th { "Scope" } th { "Profile" } th { "Head" } th { "Resolved" } th { "Reason" } } }
                        tbody {
                            for row in rows.iter() {
                                tr {
                                    td { code { "{row.alias_name}" } }
                                    td { "{row.scope}" }
                                    td { "{row.artifact_profile}" }
                                    td { code { "{row.head_id}" } }
                                    td { "{row.resolved_at}" }
                                    td { "{row.source_reason}" }
                                }
                            }
                        }
                    }
                }
                div { class: "mobile-card-list",
                    for row in rows {
                        article { class: "mobile-card",
                            div { strong { "{row.alias_name}" } }
                            div { class: "mobile-meta", "{row.scope} · {row.artifact_profile}" }
                            div { class: "mobile-meta", "Head: {row.head_id}" }
                            div { class: "mobile-meta", "{row.resolved_at}" }
                            div { class: "muted", "{row.source_reason}" }
                        }
                    }
                }
            }
        }
    }
}

#[component]
fn EvalSection(rows: Vec<AppHeadEvalSummaryRow>, empty: &'static str) -> Element {
    rsx! {
        section { class: "panel",
            div { class: "eyebrow", "evaluation" }
            h2 { "Evaluation reports" }
            if rows.is_empty() {
                p { class: "muted", "{empty}" }
            } else {
                div { class: "scroll-table",
                    table {
                        thead { tr { th { "Head" } th { "Protocol" } th { "Status" } th { "Dataset" } th { "Samples" } th { "Metrics" } th { "Finished" } } }
                        tbody {
                            for row in rows.iter() {
                                tr {
                                    td { code { "{row.head_id}" } }
                                    td { code { "{row.eval_protocol_id}" } }
                                    td { "{row.status}" }
                                    td { code { "{row.dataset_view_id}" } }
                                    td { "{row.sample_count}" }
                                    td { "{row.metric_summary}" }
                                    td { "{row.finished_at}" }
                                }
                            }
                        }
                    }
                }
                div { class: "mobile-card-list",
                    for row in rows {
                        article { class: "mobile-card",
                            div { strong { "{row.head_id}" } }
                            div { class: "mobile-meta", "Protocol: {row.eval_protocol_id}" }
                            div { class: "mobile-meta", "Status: {row.status}" }
                            div { class: "mobile-meta", "Dataset: {row.dataset_view_id}" }
                            div { class: "mobile-meta", "Samples: {row.sample_count}" }
                            div { class: "muted", "{row.metric_summary}" }
                        }
                    }
                }
            }
        }
    }
}

#[component]
fn PublicationSection(rows: Vec<AppPublishedArtifactRow>, empty: &'static str) -> Element {
    rsx! {
        section { class: "panel",
            div { class: "eyebrow", "publication" }
            h2 { "Published artifacts" }
            if rows.is_empty() {
                p { class: "muted", "{empty}" }
            } else {
                div { class: "scroll-table",
                    table {
                        thead { tr { th { "Head" } th { "Profile" } th { "Target" } th { "Status" } th { "Object key" } th { "Bytes" } th { "Expires / created" } } }
                        tbody {
                            for row in rows.iter() {
                                tr {
                                    td { code { "{row.head_id}" } }
                                    td { "{row.artifact_profile}" }
                                    td { code { "{row.publication_target_id}" } }
                                    td { "{row.status}" }
                                    td { code { "{row.object_key}" } }
                                    td { "{row.content_length}" }
                                    td { "{row.expires_at.clone().unwrap_or_else(|| row.created_at.clone())}" }
                                }
                            }
                        }
                    }
                }
                div { class: "mobile-card-list",
                    for row in rows {
                        article { class: "mobile-card",
                            div { strong { "{row.head_id}" } }
                            div { class: "mobile-meta", "{row.artifact_profile} · {row.status}" }
                            div { class: "mobile-meta", "Target: {row.publication_target_id}" }
                            div { class: "mobile-meta", "{row.object_key}" }
                            div { class: "mobile-meta", "Bytes: {row.content_length}" }
                        }
                    }
                }
            }
        }
    }
}

#[component]
fn AliasRow(row: AppArtifactRow) -> Element {
    let published = row
        .last_published_at
        .clone()
        .unwrap_or_else(|| "not yet".to_owned());
    let history = alias_history_summary(&row);
    rsx! {
        tr {
            td {
                div { class: "table-cell-stack",
                    code { "{row.alias_name}" }
                    if !history.is_empty() {
                        span { class: "muted", "{history}" }
                    }
                }
            }
            td { "{row.scope}" }
            td { "{row.artifact_profile}" }
            td { a { href: row.head_view_path.clone(), code { "{row.head_id}" } } }
            td { "{row.status}" }
            td { "{published}" }
            td { class: "table-cell-stack",
                button { r#type: "button", class: "action-button", "Download" }
                button { r#type: "button", class: "action-button secondary", "Prepare export" }
                if let Some(run_view_path) = row.run_view_path.clone() {
                    a { class: "table-link", href: run_view_path, "Run history" }
                }
            }
        }
    }
}

#[component]
fn AliasCard(row: AppArtifactRow) -> Element {
    let published = row
        .last_published_at
        .clone()
        .unwrap_or_else(|| "not yet".to_owned());
    let history = alias_history_summary(&row);
    rsx! {
        article { class: "mobile-card",
            div { strong { "{row.alias_name}" } }
            div { class: "mobile-meta", "{row.scope} · {row.artifact_profile}" }
            div { class: "mobile-meta", "Head: {row.head_id}" }
            div { class: "mobile-meta", "Status: {row.status}" }
            div { class: "mobile-meta", "Published: {published}" }
            if !history.is_empty() {
                div { class: "muted", "{history}" }
            }
            div { class: "operator-link-row", style: "margin-top: 10px;",
                a { href: row.head_view_path.clone(), "Head" }
                if let Some(run_view_path) = row.run_view_path.clone() {
                    a { href: run_view_path, "Run history" }
                }
            }
        }
    }
}

fn alias_history_summary(row: &AppArtifactRow) -> String {
    if row.history_count <= 1 && row.previous_head_id.is_none() {
        return String::new();
    }
    let mut summary = format!("{} resolution", row.history_count);
    if row.history_count != 1 {
        summary.push('s');
    }
    if let Some(previous_head_id) = row.previous_head_id.as_deref() {
        summary.push_str(" · previous ");
        summary.push_str(previous_head_id);
    }
    summary
}

#[component]
fn MetaCard(label: &'static str, value: String, detail: String) -> Element {
    rsx! {
        div { class: "hero-meta-card",
            span { "{label}" }
            strong { "{value}" }
            p { "{detail}" }
        }
    }
}

#[component]
fn LiveSummaryCard(
    label: &'static str,
    value: String,
    element_id: Option<&'static str>,
) -> Element {
    rsx! {
        div { class: "summary-card",
            div { class: "muted", "{label}" }
            if let Some(element_id) = element_id {
                strong { id: element_id, "{value}" }
            } else {
                strong { "{value}" }
            }
        }
    }
}

#[component]
fn InfoMetric(label: &'static str, value: String, element_id: Option<&'static str>) -> Element {
    rsx! {
        div {
            span { "{label}" }
            if let Some(element_id) = element_id {
                strong { id: element_id, "{value}" }
            } else {
                strong { "{value}" }
            }
        }
    }
}

#[component]
fn LinkPill(href: String, label: &'static str) -> Element {
    rsx! {
        a { class: "pill", href: href, "{label}" }
    }
}
