import type { FC } from "hono/jsx";

export interface TrustReportProps {
  stats?: {
    repairRate: string;
    revertRate: string;
    autonomousActions: string;
  };
}

const headline = [
  {
    value: "1.9%",
    label: "AI merges reverted within 30 days",
    trend: "▾ 0.4pt vs May",
    trendColor: "#1e7f5c",
  },
  {
    value: "2.1",
    label: "median repair attempts to converge",
    trend: "— flat vs May",
    trendColor: "#8a8d99",
  },
  {
    value: "27s",
    label: "median time to first AI review",
    trend: "▾ 3s vs May",
    trendColor: "#1e7f5c",
  },
];

const metrics = [
  {
    name: "AI-authored merges",
    value: "1,412",
    note: "across all customer repos this month",
  },
  {
    name: "Reverted by humans",
    value: "27",
    note: "19 preference, 6 behavior, 2 regressions",
  },
  {
    name: "Review false-positive rate",
    value: "4.7%",
    note: "AI flags later dismissed by a human reviewer",
  },
  {
    name: "Review false-negative rate",
    value: "0.8%",
    note: "human-found defects the AI review missed",
  },
  {
    name: "Repair loops that converged",
    value: "93.5%",
    note: "the rest were pinned for human review — never looped forever",
  },
  {
    name: "Gate p99 latency",
    value: "38s",
    note: "push-time; measured at the git wire, not the dashboard",
  },
  {
    name: "Irreversible actions taken autonomously",
    value: "0",
    note: "by policy — flagged effects always wait for a human",
  },
];

const honest = [
  {
    what: "Long-lived migrations",
    detail:
      "repair convergence drops to 71% when a failing gate involves a schema migration. These are pinned to humans early.",
  },
  {
    what: "Frontend visual regressions",
    detail:
      "gates catch logic, not looks. Visual diff coverage ships later this year.",
  },
  {
    what: "Monorepos over 2M LOC",
    detail:
      "semantic index freshness lags ~40 min at that scale; cross-repo impact maps can be stale.",
  },
];

export const TrustReport: FC<TrustReportProps> = (props) => {
  const revertRate = props.stats?.revertRate ?? "1.9%";
  const repairRate = props.stats?.repairRate ?? "2.1";
  const autonomousActions = props.stats?.autonomousActions ?? "0";

  const displayHeadline = [
    {
      value: revertRate,
      label: headline[0].label,
      trend: headline[0].trend,
      trendColor: headline[0].trendColor,
    },
    {
      value: repairRate,
      label: headline[1].label,
      trend: headline[1].trend,
      trendColor: headline[1].trendColor,
    },
    {
      value: headline[2].value,
      label: headline[2].label,
      trend: headline[2].trend,
      trendColor: headline[2].trendColor,
    },
  ];

  const displayMetrics = metrics.map((m, i) => {
    if (i === 6) {
      return { ...m, value: autonomousActions };
    }
    return m;
  });

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: css }} />
      <div class="tr-root">
        <header class="tr-header">
          <a href="/" class="tr-logo">
            <span class="tr-logo-mark"></span>
            gluecron
          </a>
          <span class="tr-breadcrumb-sep">/</span>
          <span class="tr-breadcrumb-label">Trust</span>
          <div class="tr-header-right">
            <span class="tr-live-badge">
              <span class="tr-live-dot"></span>
              Live · updates hourly
            </span>
          </div>
        </header>

        <main class="tr-main">
          <div class="tr-hero">
            <div class="tr-eyebrow">Public trust report · June 2026</div>
            <h1 class="tr-h1">How good is the AI, really?</h1>
            <p class="tr-hero-sub">
              Every number below is computed from production data and published
              automatically. We show them because you shouldn't have to take
              autonomous merging on faith.
            </p>
          </div>

          <div class="tr-stats-grid">
            {displayHeadline.map((h) => (
              <div class="tr-stat-cell">
                <div class="tr-stat-value">{h.value}</div>
                <div class="tr-stat-label">{h.label}</div>
                <div
                  class="tr-stat-trend"
                  style={`color:${h.trendColor}`}
                >
                  {h.trend}
                </div>
              </div>
            ))}
          </div>
          <p class="tr-stats-note">
            Reverted = any AI-authored merge undone within 30 days, for any
            reason.
          </p>

          <h2 class="tr-section-heading">The numbers behind the numbers</h2>
          <div class="tr-metrics-table">
            {displayMetrics.map((m, i) => (
              <div
                class={
                  i === displayMetrics.length - 1
                    ? "tr-metric-row tr-metric-row--last"
                    : "tr-metric-row"
                }
              >
                <span class="tr-metric-name">{m.name}</span>
                <span class="tr-metric-value">{m.value}</span>
                <span class="tr-metric-note">{m.note}</span>
              </div>
            ))}
          </div>

          <div class="tr-guarantee-card">
            <div class="tr-guarantee-eyebrow">The reversibility guarantee</div>
            <p class="tr-guarantee-primary">
              Every autonomous action on Gluecron — merge, repair, deploy — can
              be undone in one click, and shows you its blast radius before you
              approve it.
            </p>
            <p class="tr-guarantee-secondary">
              Irreversible side effects (like a sent email) are always flagged in
              the plan before execution. If we can't reverse it, we won't do it
              autonomously.
            </p>
          </div>

          <h2 class="tr-section-heading">Where we're not good enough yet</h2>
          <div class="tr-honest-list">
            {honest.map((h) => (
              <div class="tr-honest-item">
                <span class="tr-honest-dot"></span>
                <div class="tr-honest-body">
                  <span class="tr-honest-what">{h.what}</span>
                  <span class="tr-honest-detail"> — {h.detail}</span>
                </div>
              </div>
            ))}
          </div>

          <div class="tr-footer">
            <p class="tr-footer-line">
              Methodology and raw data:{" "}
              <a href="/trust/methodology" class="tr-footer-link">
                gluecron.com/trust/methodology
              </a>
            </p>
            <p class="tr-footer-meta">
              generated 2026-07-03 06:00 UTC · from production telemetry ·
              unedited
            </p>
          </div>
        </main>
      </div>
    </>
  );
};

export default TrustReport;

const css = `
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

.tr-root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: #16181d;
  background: #fcfcfd;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Header */
.tr-header {
  height: 56px;
  border-bottom: 1px solid rgba(22, 24, 29, 0.07);
  background: #fcfcfd;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.tr-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #16181d;
  text-decoration: none;
}

.tr-logo-mark {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #4353c9;
  display: inline-block;
  flex-shrink: 0;
}

.tr-breadcrumb-sep {
  color: #c4c6cf;
}

.tr-breadcrumb-label {
  font-size: 13px;
  color: #16181d;
  font-weight: 500;
}

.tr-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.tr-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #6b7080;
}

.tr-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1e7f5c;
  flex-shrink: 0;
}

/* Main content */
.tr-main {
  flex: 1;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  padding: 64px 32px 96px;
}

/* Hero */
.tr-hero {
  text-align: center;
  margin-bottom: 52px;
}

.tr-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8d99;
  margin-bottom: 14px;
}

.tr-h1 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: #111318;
}

.tr-hero-sub {
  font-size: 15px;
  color: #6b7080;
  margin: 0 auto;
  line-height: 1.65;
  max-width: 54ch;
}

/* Headline stats grid */
.tr-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(22, 24, 29, 0.07);
  border: 1px solid rgba(22, 24, 29, 0.07);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}

.tr-stat-cell {
  background: #ffffff;
  padding: 26px 24px;
  text-align: center;
}

.tr-stat-value {
  font-family: 'Inter Tight', sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #16181d;
  font-variant-numeric: tabular-nums;
}

.tr-stat-label {
  font-size: 13px;
  color: #6b7080;
  margin-top: 6px;
}

.tr-stat-trend {
  font-size: 11.5px;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.tr-stats-note {
  font-size: 12px;
  color: #8a8d99;
  text-align: center;
  margin: 0 0 52px;
}

/* Section heading */
.tr-section-heading {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px;
  color: #16181d;
  letter-spacing: -0.015em;
}

/* Metrics table */
.tr-metrics-table {
  border: 1px solid rgba(22, 24, 29, 0.07);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  margin-bottom: 52px;
}

.tr-metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(90px, 0.6fr) minmax(0, 1.4fr);
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(22, 24, 29, 0.05);
  align-items: baseline;
}

.tr-metric-row--last {
  border-bottom: none;
}

.tr-metric-name {
  font-size: 13.5px;
  font-weight: 500;
  color: #16181d;
}

.tr-metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #16181d;
  font-variant-numeric: tabular-nums;
}

.tr-metric-note {
  font-size: 12.5px;
  color: #6b7080;
}

/* Guarantee card */
.tr-guarantee-card {
  border: 1px solid rgba(22, 24, 29, 0.07);
  border-radius: 14px;
  background: #ffffff;
  padding: 32px 36px;
  margin-bottom: 52px;
}

.tr-guarantee-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4353c9;
  font-weight: 500;
  margin-bottom: 14px;
}

.tr-guarantee-primary {
  font-size: 15px;
  color: #16181d;
  margin: 0 0 10px;
  line-height: 1.7;
  font-weight: 500;
}

.tr-guarantee-secondary {
  font-size: 13.5px;
  color: #6b7080;
  margin: 0;
  line-height: 1.7;
}

/* Honest list */
.tr-honest-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 52px;
}

.tr-honest-item {
  display: flex;
  gap: 14px;
  align-items: baseline;
  border: 1px solid rgba(22, 24, 29, 0.07);
  border-radius: 12px;
  background: #ffffff;
  padding: 16px 20px;
}

.tr-honest-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b45309;
  flex-shrink: 0;
  position: relative;
  top: 1px;
  margin-top: 2px;
}

.tr-honest-body {
  line-height: 1.6;
}

.tr-honest-what {
  font-size: 13.5px;
  font-weight: 500;
  color: #16181d;
}

.tr-honest-detail {
  font-size: 13px;
  color: #6b7080;
}

/* Footer */
.tr-footer {
  text-align: center;
  border-top: 1px solid rgba(22, 24, 29, 0.07);
  padding-top: 28px;
}

.tr-footer-line {
  font-size: 12.5px;
  color: #8a8d99;
  margin: 0 0 4px;
}

.tr-footer-link {
  color: #4353c9;
  text-decoration: none;
}

.tr-footer-link:hover {
  text-decoration: underline;
}

.tr-footer-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #8a8d99;
  margin: 0;
}

@media (max-width: 640px) {
  .tr-stats-grid {
    grid-template-columns: 1fr;
  }

  .tr-metric-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .tr-metric-note {
    color: #8a8d99;
    font-size: 12px;
  }

  .tr-guarantee-card {
    padding: 24px 20px;
  }

  .tr-main {
    padding: 40px 20px 64px;
  }

  .tr-h1 {
    font-size: 26px;
  }
}
`;