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

export interface AdminConsoleProps {
  user?: any;
  kpis?: any;
  activeSection?: string;
}

export const AdminConsole: FC<AdminConsoleProps> = (props) => {
  const initialSection = props.activeSection || "overview";

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: css }} />
      <div class="ac-root">
        {/* Sidebar */}
        <aside class="ac-sidebar">
          <a href="/" class="ac-logo">
            <span class="ac-logo-mark"></span>
            gluecron
            <span class="ac-logo-admin">admin</span>
          </a>
          <nav class="ac-nav" id="ac-nav">
            <button type="button" class="ac-nav-item" data-section="overview" data-active="true">
              <span class="ac-nav-icon">&#9651;</span>
              Overview
            </button>
            <button type="button" class="ac-nav-item" data-section="diagnostics">
              <span class="ac-nav-icon">&#9677;</span>
              Diagnostics
              <span class="ac-nav-count ac-count-amber" id="ac-diag-count">1</span>
            </button>
            <button type="button" class="ac-nav-item" data-section="support">
              <span class="ac-nav-icon">&#9682;</span>
              Support
              <span class="ac-nav-count" id="ac-sup-count">4</span>
            </button>
            <button type="button" class="ac-nav-item" data-section="billing">
              <span class="ac-nav-icon">&#9684;</span>
              Customers
            </button>
            <a href="/admin/layers" class="ac-nav-item ac-nav-link">
              <span class="ac-nav-icon">&#8593;</span>
              Deploys / Flags
            </a>
            <a href="/trust" class="ac-nav-item ac-nav-link">
              <span class="ac-nav-icon">&#8801;</span>
              Audit
            </a>
          </nav>
          <div class="ac-sidebar-footer">
            <div class="ac-footer-status">
              <span class="ac-dot ac-dot-green"></span>
              gluecron.com · healthy
            </div>
            <div class="ac-footer-meta">82321e8 · main · up 41d</div>
          </div>
        </aside>

        {/* Main content */}
        <main class="ac-main">

          {/* ═══════════ OVERVIEW ═══════════ */}
          <div class="ac-section" id="ac-section-overview">
            <div class="ac-page-header">
              <div>
                <div class="ac-eyebrow">Site admin · Overview</div>
                <h1 class="ac-h1">Platform operations</h1>
              </div>
              <div class="ac-header-actions">
                <button type="button" class="ac-btn-secondary" id="ac-deploy-btn">Trigger deploy</button>
                <button type="button" class="ac-btn-primary" id="ac-run-diag-btn">Run full diagnosis</button>
              </div>
            </div>

            {/* KPI row */}
            <div class="ac-kpi-grid">
              <div class="ac-kpi-cell">
                <div class="ac-kpi-label">Uptime · 30d</div>
                <div class="ac-kpi-value">99.98%</div>
                <div class="ac-kpi-delta ac-delta-green">SLO 99.9% — within budget</div>
              </div>
              <div class="ac-kpi-cell">
                <div class="ac-kpi-label">Active customers</div>
                <div class="ac-kpi-value">212</div>
                <div class="ac-kpi-delta ac-delta-green">+9 this week</div>
              </div>
              <div class="ac-kpi-cell">
                <div class="ac-kpi-label">Open tickets</div>
                <div class="ac-kpi-value">4</div>
                <div class="ac-kpi-delta ac-delta-amber">1 urgent · agent pre-diagnosed all 4</div>
              </div>
              <div class="ac-kpi-cell">
                <div class="ac-kpi-label">MRR</div>
                <div class="ac-kpi-value">$18,940</div>
                <div class="ac-kpi-delta ac-delta-meta">internal platforms exempt</div>
              </div>
            </div>

            {/* Two-column: diagnostics + support queue */}
            <div class="ac-two-col">
              <section>
                <div class="ac-section-header">
                  <h2 class="ac-h2">Self-diagnosis</h2>
                  <button type="button" class="ac-link-btn" data-goto="diagnostics">Open diagnostics →</button>
                </div>
                <div class="ac-card">
                  <div class="ac-diag-row">
                    <span class="ac-dot ac-dot-amber ac-pulse" style="margin-top:6px;flex-shrink:0"></span>
                    <div class="ac-diag-content">
                      <div class="ac-diag-title-row">
                        <span class="ac-diag-name">OCI registry</span>
                        <span class="ac-mono-small">registry.gluecron.com</span>
                      </div>
                      <p class="ac-diag-detail">Intermittent push failures — stale region-scoped auth token. Fix drafted.</p>
                    </div>
                    <button type="button" class="ac-btn-ghost ac-fix-btn" data-fix="incident" id="ac-ov-fix-1">Apply fix</button>
                  </div>
                  <div class="ac-diag-row">
                    <span class="ac-dot ac-dot-amber ac-pulse" style="margin-top:6px;flex-shrink:0"></span>
                    <div class="ac-diag-content">
                      <div class="ac-diag-title-row">
                        <span class="ac-diag-name">Gate workers</span>
                        <span class="ac-mono-small">pool-a · 8 workers</span>
                      </div>
                      <p class="ac-diag-detail">At capacity — one stalled repair loop (pr-214) is holding two workers.</p>
                    </div>
                    <button type="button" class="ac-btn-ghost ac-fix-btn" data-fix="drain" id="ac-ov-fix-2">Drain loop</button>
                  </div>
                  <div class="ac-diag-row">
                    <span class="ac-dot ac-dot-green" style="margin-top:6px;flex-shrink:0"></span>
                    <div class="ac-diag-content">
                      <div class="ac-diag-title-row">
                        <span class="ac-diag-name">Postgres (Neon)</span>
                        <span class="ac-mono-small">primary · us-east</span>
                      </div>
                      <p class="ac-diag-detail">Healthy. 4ms median query, no lock contention in 24h.</p>
                    </div>
                  </div>
                  <div class="ac-diag-row">
                    <span class="ac-dot ac-dot-green" style="margin-top:6px;flex-shrink:0"></span>
                    <div class="ac-diag-content">
                      <div class="ac-diag-title-row">
                        <span class="ac-diag-name">Caddy ingress</span>
                        <span class="ac-mono-small">edge · 2 nodes</span>
                      </div>
                      <p class="ac-diag-detail">Certificates valid 71 days. Rate-limit rejections nominal.</p>
                    </div>
                  </div>
                  <div class="ac-diag-row ac-diag-row-last">
                    <span class="ac-dot ac-dot-green" style="margin-top:6px;flex-shrink:0"></span>
                    <div class="ac-diag-content">
                      <div class="ac-diag-title-row">
                        <span class="ac-diag-name">Semantic index</span>
                        <span class="ac-mono-small">voyage-code-3</span>
                      </div>
                      <p class="ac-diag-detail">US shard healthy. EU shard backfill pending (see SUP-1041).</p>
                    </div>
                  </div>
                </div>
              </section>

              <section>
                <div class="ac-section-header">
                  <h2 class="ac-h2">Support queue</h2>
                  <button type="button" class="ac-link-btn" data-goto="support">Open support →</button>
                </div>
                <div class="ac-ticket-list-preview">
                  <button type="button" class="ac-ticket-card" data-goto="support">
                    <div class="ac-ticket-meta">
                      <span class="ac-badge ac-badge-urgent">Urgent</span>
                      <span class="ac-mono-small">SUP-1042</span>
                      <span class="ac-ticket-age">18m</span>
                    </div>
                    <div class="ac-ticket-title">Push rejected — gate timeout on every push since 11:40</div>
                    <div class="ac-ticket-who">northwind-labs · Team plan</div>
                  </button>
                  <button type="button" class="ac-ticket-card" data-goto="support">
                    <div class="ac-ticket-meta">
                      <span class="ac-badge ac-badge-high">High</span>
                      <span class="ac-mono-small">SUP-1041</span>
                      <span class="ac-ticket-age">1h</span>
                    </div>
                    <div class="ac-ticket-title">EU data-region repo shows empty semantic search results</div>
                    <div class="ac-ticket-who">helvetia-fintech · Enterprise</div>
                  </button>
                  <button type="button" class="ac-ticket-card" data-goto="support">
                    <div class="ac-ticket-meta">
                      <span class="ac-badge ac-badge-normal">Normal</span>
                      <span class="ac-mono-small">SUP-1039</span>
                      <span class="ac-ticket-age">3h</span>
                    </div>
                    <div class="ac-ticket-title">How do we exempt a bot account from AI review?</div>
                    <div class="ac-ticket-who">acme-tools · Pro</div>
                  </button>
                </div>
              </section>
            </div>
          </div>

          {/* ═══════════ DIAGNOSTICS ═══════════ */}
          <div class="ac-section ac-hidden" id="ac-section-diagnostics">
            <div class="ac-page-header">
              <div>
                <div class="ac-eyebrow">Site admin · Diagnostics</div>
                <h1 class="ac-h1">Self-healing diagnosis</h1>
                <p class="ac-subtitle">The same repair engine that fixes customer pushes watches the platform itself. When something drifts, it isolates the cause, drafts the fix, and waits for your one-click apply.</p>
              </div>
              <button type="button" class="ac-btn-primary" id="ac-diagnose-btn">Run full diagnosis</button>
            </div>

            {/* Incident card */}
            <div class="ac-incident-card">
              <div class="ac-incident-header">
                <div class="ac-incident-title-row">
                  <span class="ac-dot ac-dot-amber ac-pulse"></span>
                  <span class="ac-incident-title">OCI registry push failing intermittently</span>
                  <span class="ac-mono-small" style="margin-left:auto">detected 22 min ago</span>
                </div>
                <p class="ac-incident-desc">Deterministic local agent traced 4 failed pushes to a stale auth token in the registry middleware — config drift from the 0083 data-region migration, not a network fault.</p>
              </div>
              <div class="ac-incident-body">
                <div class="ac-mono-label">Drafted fix</div>
                <div class="ac-diff-block">
                  <div class="ac-diff-comment">// src/middleware/registry-auth.ts</div>
                  <div class="ac-diff-remove">− const token = env.REGISTRY_TOKEN;</div>
                  <div class="ac-diff-add">+ const token = await regionScopedToken(repo.dataRegion);</div>
                </div>
                <div class="ac-incident-actions">
                  <button type="button" class="ac-btn-primary" id="ac-incident-fix-btn">Apply fix</button>
                  <a href="/admin/layers" class="ac-btn-secondary-link">Open trace</a>
                  <span class="ac-incident-note">Applies as an audited PR against the platform repo — reversible.</span>
                </div>
              </div>
            </div>

            {/* Subsystem table */}
            <h2 class="ac-h2" style="margin:0 0 16px">Subsystems</h2>
            <div class="ac-table-card">
              <div class="ac-table-header ac-subsys-grid">
                <span>Subsystem</span>
                <span>Signal</span>
                <span>P99</span>
                <span>Status</span>
              </div>
              <div class="ac-table-row ac-subsys-grid">
                <span class="ac-table-name">Git Smart HTTP</span>
                <span class="ac-table-signal">clone/push/fetch</span>
                <span class="ac-table-p99">310ms</span>
                <span class="ac-status-cell ac-status-green"><span class="ac-dot ac-dot-green"></span>healthy</span>
              </div>
              <div class="ac-table-row ac-subsys-grid">
                <span class="ac-table-name">Gate runner</span>
                <span class="ac-table-signal">push-time gates</span>
                <span class="ac-table-p99">38s</span>
                <span class="ac-status-cell ac-status-amber"><span class="ac-dot ac-dot-amber ac-pulse"></span>degraded</span>
              </div>
              <div class="ac-table-row ac-subsys-grid">
                <span class="ac-table-name">Auto-repair engine</span>
                <span class="ac-table-signal">repair loops</span>
                <span class="ac-table-p99">2 attempts</span>
                <span class="ac-status-cell ac-status-amber"><span class="ac-dot ac-dot-amber ac-pulse"></span>1 stalled</span>
              </div>
              <div class="ac-table-row ac-subsys-grid">
                <span class="ac-table-name">PR sandboxes</span>
                <span class="ac-table-signal">boot + preview</span>
                <span class="ac-table-p99">24s boot</span>
                <span class="ac-status-cell ac-status-green"><span class="ac-dot ac-dot-green"></span>healthy</span>
              </div>
              <div class="ac-table-row ac-subsys-grid">
                <span class="ac-table-name">OCI registry</span>
                <span class="ac-table-signal">image push/pull</span>
                <span class="ac-table-p99">1.9s</span>
                <span class="ac-status-cell ac-status-amber"><span class="ac-dot ac-dot-amber ac-pulse"></span>fix drafted</span>
              </div>
              <div class="ac-table-row ac-subsys-grid">
                <span class="ac-table-name">Webhooks</span>
                <span class="ac-table-signal">outbound HMAC</span>
                <span class="ac-table-p99">140ms</span>
                <span class="ac-status-cell ac-status-green"><span class="ac-dot ac-dot-green"></span>healthy</span>
              </div>
              <div class="ac-table-row ac-subsys-grid ac-table-row-last">
                <span class="ac-table-name">Email (Resend)</span>
                <span class="ac-table-signal">notifications</span>
                <span class="ac-table-p99">820ms</span>
                <span class="ac-status-cell ac-status-green"><span class="ac-dot ac-dot-green"></span>healthy</span>
              </div>
            </div>

            {/* Flywheel telemetry */}
            <h2 class="ac-h2" style="margin:32px 0 16px">Flywheel telemetry — last 24h</h2>
            <div class="ac-flywheel-grid">
              <div class="ac-flywheel-cell">
                <div class="ac-kpi-label">Repair cycles completed</div>
                <div class="ac-flywheel-value">31</div>
                <div class="ac-kpi-delta ac-delta-green">29 converged · median 2 attempts</div>
              </div>
              <div class="ac-flywheel-cell">
                <div class="ac-kpi-label">Stalled loops</div>
                <div class="ac-flywheel-value">1</div>
                <div class="ac-kpi-delta ac-delta-amber">pr-214 · oscillating on gate: types — pinned for review</div>
              </div>
              <div class="ac-flywheel-cell">
                <div class="ac-kpi-label">AI spend</div>
                <div class="ac-flywheel-value">$14.20</div>
                <div class="ac-kpi-delta ac-delta-meta">62% local models · 38% hosted Claude</div>
              </div>
            </div>
          </div>

          {/* ═══════════ SUPPORT ═══════════ */}
          <div class="ac-section ac-hidden" id="ac-section-support">
            <div class="ac-page-header">
              <div>
                <div class="ac-eyebrow">Site admin · Support</div>
                <h1 class="ac-h1">Customer support</h1>
                <p class="ac-subtitle">Every ticket arrives pre-diagnosed: the agent correlates the customer's report with their audit log, gate runs, and deploys before you open it.</p>
              </div>
            </div>

            <div class="ac-support-grid">
              {/* Ticket list */}
              <div class="ac-ticket-list" id="ac-ticket-list">
                <button type="button" class="ac-ticket-card ac-ticket-active" data-ticket="0">
                  <div class="ac-ticket-meta">
                    <span class="ac-badge ac-badge-urgent">Urgent</span>
                    <span class="ac-mono-small">SUP-1042</span>
                    <span class="ac-ticket-age">18m</span>
                  </div>
                  <div class="ac-ticket-title">Push rejected — gate timeout on every push since 11:40</div>
                  <div class="ac-ticket-who">northwind-labs · Team plan</div>
                </button>
                <button type="button" class="ac-ticket-card" data-ticket="1">
                  <div class="ac-ticket-meta">
                    <span class="ac-badge ac-badge-high">High</span>
                    <span class="ac-mono-small">SUP-1041</span>
                    <span class="ac-ticket-age">1h</span>
                  </div>
                  <div class="ac-ticket-title">EU data-region repo shows empty semantic search results</div>
                  <div class="ac-ticket-who">helvetia-fintech · Enterprise</div>
                </button>
                <button type="button" class="ac-ticket-card" data-ticket="2">
                  <div class="ac-ticket-meta">
                    <span class="ac-badge ac-badge-normal">Normal</span>
                    <span class="ac-mono-small">SUP-1039</span>
                    <span class="ac-ticket-age">3h</span>
                  </div>
                  <div class="ac-ticket-title">How do we exempt a bot account from AI review?</div>
                  <div class="ac-ticket-who">acme-tools · Pro</div>
                </button>
                <button type="button" class="ac-ticket-card" data-ticket="3">
                  <div class="ac-ticket-meta">
                    <span class="ac-badge ac-badge-normal">Normal</span>
                    <span class="ac-mono-small">SUP-1038</span>
                    <span class="ac-ticket-age">5h</span>
                  </div>
                  <div class="ac-ticket-title">Sandbox preview URL 404s for ~30s after PR open</div>
                  <div class="ac-ticket-who">brightpath-edu · Team</div>
                </button>
              </div>

              {/* Ticket detail */}
              <div class="ac-ticket-detail" id="ac-ticket-detail">
                {/* Content injected by JS */}
              </div>
            </div>
          </div>

          {/* ═══════════ CUSTOMERS & BILLING ═══════════ */}
          <div class="ac-section ac-hidden" id="ac-section-billing">
            <div style="margin-bottom:32px">
              <div class="ac-eyebrow">Site admin · Customers</div>
              <h1 class="ac-h1">Customers &amp; billing</h1>
              <p class="ac-subtitle">First-party platforms are marked <strong style="color:#16181d">Internal — exempt</strong> and are never billed. Quotas still apply so internal usage can't starve customers.</p>
            </div>
            <div class="ac-table-card">
              <div class="ac-table-header ac-cust-grid">
                <span>Organization</span>
                <span>Plan</span>
                <span>Seats</span>
                <span>AI usage / mo</span>
                <span>Billing</span>
              </div>
              <div class="ac-table-row ac-cust-grid">
                <span class="ac-org-cell">
                  <span class="ac-org-avatar" style="background:#4353c9">GC</span>
                  <span class="ac-table-name">gluecron (platform)</span>
                </span>
                <span class="ac-table-signal">Internal</span>
                <span class="ac-table-mono">6</span>
                <span class="ac-table-mono">—</span>
                <span class="ac-bill-cell ac-bill-exempt"><span class="ac-dot" style="background:#c4c6cf"></span>Exempt</span>
              </div>
              <div class="ac-table-row ac-cust-grid">
                <span class="ac-org-cell">
                  <span class="ac-org-avatar" style="background:#4353c9">GI</span>
                  <span class="ac-table-name">gluecron-infra</span>
                </span>
                <span class="ac-table-signal">Internal</span>
                <span class="ac-table-mono">3</span>
                <span class="ac-table-mono">—</span>
                <span class="ac-bill-cell ac-bill-exempt"><span class="ac-dot" style="background:#c4c6cf"></span>Exempt</span>
              </div>
              <div class="ac-table-row ac-cust-grid">
                <span class="ac-org-cell">
                  <span class="ac-org-avatar" style="background:#16181d">HF</span>
                  <span class="ac-table-name">helvetia-fintech</span>
                </span>
                <span class="ac-table-signal">Enterprise</span>
                <span class="ac-table-mono">140</span>
                <span class="ac-table-mono">$2,410</span>
                <span class="ac-bill-cell ac-bill-current"><span class="ac-dot ac-dot-green"></span>Current</span>
              </div>
              <div class="ac-table-row ac-cust-grid">
                <span class="ac-org-cell">
                  <span class="ac-org-avatar" style="background:#41707e">NL</span>
                  <span class="ac-table-name">northwind-labs</span>
                </span>
                <span class="ac-table-signal">Team</span>
                <span class="ac-table-mono">24</span>
                <span class="ac-table-mono">$380</span>
                <span class="ac-bill-cell ac-bill-current"><span class="ac-dot ac-dot-green"></span>Current</span>
              </div>
              <div class="ac-table-row ac-cust-grid">
                <span class="ac-org-cell">
                  <span class="ac-org-avatar" style="background:#6b7080">AT</span>
                  <span class="ac-table-name">acme-tools</span>
                </span>
                <span class="ac-table-signal">Pro</span>
                <span class="ac-table-mono">8</span>
                <span class="ac-table-mono">$96</span>
                <span class="ac-bill-cell ac-bill-current"><span class="ac-dot ac-dot-green"></span>Current</span>
              </div>
              <div class="ac-table-row ac-cust-grid ac-table-row-last">
                <span class="ac-org-cell">
                  <span class="ac-org-avatar" style="background:#b45309">BE</span>
                  <span class="ac-table-name">brightpath-edu</span>
                </span>
                <span class="ac-table-signal">Team</span>
                <span class="ac-table-mono">17</span>
                <span class="ac-table-mono">$204</span>
                <span class="ac-bill-cell ac-bill-pastdue"><span class="ac-dot ac-dot-amber"></span>Past due · 3d</span>
              </div>
            </div>
          </div>

        </main>
      </div>

      <script dangerouslySetInnerHTML={{ __html: js }} />
    </>
  );
};

export default AdminConsole;

const js = `
(function() {
  var tickets = [
    {
      id: 'SUP-1042', priority: 'Urgent', badgeCls: 'ac-badge-urgent', age: '18m',
      title: 'Push rejected — gate timeout on every push since 11:40',
      who: 'northwind-labs · Team plan', plan: 'Team',
      report: '"All our pushes to api-core started failing about 40 minutes ago with \\'gate: security timed out\\'. Nothing changed on our side. We\\'re blocked on a release."',
      diagnosis: 'Their pushes queue behind the stalled repair loop on pr-214 (same worker pool). Not customer-caused. Draining the stalled loop restores gate capacity; no customer action needed.',
      evidence: 'evidence: 6 gate runs > 120s · worker pool at 100% · repair loop pr-214 oscillating since 11:32'
    },
    {
      id: 'SUP-1041', priority: 'High', badgeCls: 'ac-badge-high', age: '1h',
      title: 'EU data-region repo shows empty semantic search results',
      who: 'helvetia-fintech · Enterprise', plan: 'Enterprise',
      report: '"Semantic search returns nothing for our Frankfurt-region repos. Keyword search works fine."',
      diagnosis: 'The 0083 data-region migration created the EU index shard but the embedding backfill job never ran for pre-existing repos. Re-running the backfill for region=eu fixes it — approximately 12 minutes.',
      evidence: 'evidence: eu shard row-count 0 · backfill job last ran pre-migration · 2 repos affected'
    },
    {
      id: 'SUP-1039', priority: 'Normal', badgeCls: 'ac-badge-normal', age: '3h',
      title: 'How do we exempt a bot account from AI review?',
      who: 'acme-tools · Pro', plan: 'Pro',
      report: '"Our release bot\\'s version-bump PRs keep getting flagged by AI review. Can we skip review for that account?"',
      diagnosis: 'Supported: add the bot to the repo\\'s review-exempt list (Settings → AI review → Exemptions). Drafted reply includes the exact steps and a caution about scope.',
      evidence: 'evidence: 14 bot PRs flagged, all version bumps · exemption feature available on Pro'
    },
    {
      id: 'SUP-1038', priority: 'Normal', badgeCls: 'ac-badge-normal', age: '5h',
      title: 'Sandbox preview URL 404s for ~30s after PR open',
      who: 'brightpath-edu · Team', plan: 'Team',
      report: '"Clicking the preview link right after opening a PR gives a 404. Refreshing after a minute works."',
      diagnosis: 'Expected cold-boot window while the sandbox provisions. A \\'booting\\' interstitial ships in the current release; drafted reply explains the timeline.',
      evidence: 'evidence: median boot 24s · 404s only within first 40s of PR open'
    }
  ];

  var state = {
    view: 'overview',
    ticket: 0,
    incidentApplied: false,
    resolved: false,
    replied: false,
    deployed: false,
    diagnosing: false
  };

  function showSection(name) {
    var sections = document.querySelectorAll('.ac-section');
    sections.forEach(function(s) { s.classList.add('ac-hidden'); });
    var target = document.getElementById('ac-section-' + name);
    if (target) target.classList.remove('ac-hidden');

    var navItems = document.querySelectorAll('.ac-nav-item[data-section]');
    navItems.forEach(function(btn) {
      var active = btn.getAttribute('data-section') === name;
      btn.setAttribute('data-active', active ? 'true' : 'false');
    });

    state.view = name;
    if (name === 'support') renderTicketDetail();
  }

  function renderTicketDetail() {
    var t = tickets[state.ticket];
    var detail = document.getElementById('ac-ticket-detail');
    if (!detail) return;

    var resolveLabel = state.resolved ? 'Resolved \\u2713' : 'Apply agent fix &amp; resolve';
    var resolveBg = state.resolved ? '#1e7f5c' : '#16181d';
    var replyLabel = state.replied ? 'Reply sent \\u2713' : 'Reply to customer';

    detail.innerHTML = '<div class="ac-td-header">' +
      '<div class="ac-td-meta">' +
        '<span class="ac-badge ' + t.badgeCls + '">' + t.priority + '</span>' +
        '<span class="ac-mono-small">' + t.id + '</span>' +
        '<span class="ac-td-who">' + t.who + ' · ' + t.plan + '</span>' +
      '</div>' +
      '<h2 class="ac-td-title">' + t.title + '</h2>' +
    '</div>' +
    '<div class="ac-td-body">' +
      '<div>' +
        '<div class="ac-mono-label" style="margin-bottom:8px">Customer report</div>' +
        '<p class="ac-td-report">' + t.report + '</p>' +
      '</div>' +
      '<div class="ac-diagnosis-card">' +
        '<div class="ac-diagnosis-label">Agent pre-diagnosis</div>' +
        '<p class="ac-diagnosis-text">' + t.diagnosis + '</p>' +
        '<div class="ac-evidence">' + t.evidence + '</div>' +
      '</div>' +
      '<div class="ac-td-actions">' +
        '<button type="button" class="ac-btn-primary" id="ac-resolve-btn" style="background:' + resolveBg + '">' + resolveLabel + '</button>' +
        '<a href="/admin/layers" class="ac-btn-secondary-link">View customer audit log</a>' +
        '<button type="button" class="ac-btn-secondary" id="ac-reply-btn">' + replyLabel + '</button>' +
      '</div>' +
    '</div>';

    var resolveBtn = document.getElementById('ac-resolve-btn');
    if (resolveBtn && !state.resolved) {
      resolveBtn.addEventListener('click', function() {
        state.resolved = true;
        renderTicketDetail();
      });
    }
    var replyBtn = document.getElementById('ac-reply-btn');
    if (replyBtn && !state.replied) {
      replyBtn.addEventListener('click', function() {
        state.replied = true;
        renderTicketDetail();
      });
    }
  }

  function updateTicketListSelection() {
    var cards = document.querySelectorAll('#ac-ticket-list .ac-ticket-card');
    cards.forEach(function(c, i) {
      if (i === state.ticket) {
        c.classList.add('ac-ticket-active');
      } else {
        c.classList.remove('ac-ticket-active');
      }
    });
  }

  document.addEventListener('DOMContentLoaded', function() {
    // Nav items
    var navItems = document.querySelectorAll('.ac-nav-item[data-section]');
    navItems.forEach(function(btn) {
      btn.addEventListener('click', function() {
        var section = this.getAttribute('data-section');
        if (section) showSection(section);
      });
    });

    // Link buttons (data-goto)
    document.addEventListener('click', function(e) {
      var target = e.target;
      while (target && target !== document) {
        if (target.getAttribute && target.getAttribute('data-goto')) {
          showSection(target.getAttribute('data-goto'));
          return;
        }
        target = target.parentElement;
      }
    });

    // Deploy button
    var deployBtn = document.getElementById('ac-deploy-btn');
    if (deployBtn) {
      deployBtn.addEventListener('click', function() {
        state.deployed = true;
        this.textContent = 'Deploy dispatched \\u2713';
        this.disabled = true;
      });
    }

    // Run full diagnosis button (overview)
    var runDiagBtn = document.getElementById('ac-run-diag-btn');
    if (runDiagBtn) {
      runDiagBtn.addEventListener('click', function() {
        showSection('diagnostics');
      });
    }

    // Diagnose button (diagnostics page)
    var diagBtn = document.getElementById('ac-diagnose-btn');
    if (diagBtn) {
      diagBtn.addEventListener('click', function() {
        if (state.diagnosing) return;
        state.diagnosing = true;
        diagBtn.textContent = 'Diagnosing\\u2026';
        diagBtn.disabled = true;
        setTimeout(function() {
          state.diagnosing = false;
          diagBtn.textContent = 'Run full diagnosis';
          diagBtn.disabled = false;
        }, 2000);
      });
    }

    // Overview fix buttons
    var ovFix1 = document.getElementById('ac-ov-fix-1');
    if (ovFix1) {
      ovFix1.addEventListener('click', function() {
        state.incidentApplied = true;
        this.textContent = '\\u2713 Applied';
        this.disabled = true;
        var incidentBtn = document.getElementById('ac-incident-fix-btn');
        if (incidentBtn) {
          incidentBtn.textContent = 'Fix applied \\u2014 PR #219 opened';
          incidentBtn.style.background = '#1e7f5c';
          incidentBtn.disabled = true;
        }
      });
    }
    var ovFix2 = document.getElementById('ac-ov-fix-2');
    if (ovFix2) {
      ovFix2.addEventListener('click', function() {
        this.textContent = '\\u2713 Applied';
        this.disabled = true;
      });
    }

    // Incident fix button (diagnostics page)
    var incidentFixBtn = document.getElementById('ac-incident-fix-btn');
    if (incidentFixBtn) {
      incidentFixBtn.addEventListener('click', function() {
        state.incidentApplied = true;
        this.textContent = 'Fix applied \\u2014 PR #219 opened';
        this.style.background = '#1e7f5c';
        this.disabled = true;
        var ovFix = document.getElementById('ac-ov-fix-1');
        if (ovFix) {
          ovFix.textContent = '\\u2713 Applied';
          ovFix.disabled = true;
        }
      });
    }

    // Ticket selection
    var ticketCards = document.querySelectorAll('#ac-ticket-list .ac-ticket-card');
    ticketCards.forEach(function(card) {
      card.addEventListener('click', function() {
        var idx = parseInt(this.getAttribute('data-ticket') || '0', 10);
        state.ticket = idx;
        state.resolved = false;
        state.replied = false;
        updateTicketListSelection();
        renderTicketDetail();
      });
    });

    // Initial render
    renderTicketDetail();
  });
})();
`;

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; }

body {
  margin: 0;
  background: #fcfcfd;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@keyframes gcPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.ac-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;
}

/* ── Sidebar ── */
.ac-sidebar {
  width: 224px;
  flex-shrink: 0;
  border-right: 1px solid rgba(22,24,29,0.07);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.ac-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;
  padding: 4px 10px;
  margin-bottom: 24px;
}

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

.ac-logo-admin {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8d99;
  font-weight: 500;
  margin-left: 2px;
}

.ac-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ac-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #6b7080;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 450;
  cursor: pointer;
  text-align: left;
  width: 100%;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}

.ac-nav-item:hover {
  background: rgba(22,24,29,0.04);
  color: #16181d;
}

.ac-nav-item[data-active="true"] {
  background: rgba(22,24,29,0.05);
  color: #16181d;
  font-weight: 600;
}

.ac-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6b7080;
}

.ac-nav-link:hover {
  color: #16181d;
}

.ac-nav-icon {
  width: 16px;
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
  flex-shrink: 0;
}

.ac-nav-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #8a8d99;
  font-weight: 500;
}

.ac-count-amber { color: #b45309; }

.ac-sidebar-footer {
  margin-top: auto;
  padding: 14px 10px;
  border-top: 1px solid rgba(22,24,29,0.07);
}

.ac-footer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #6b7080;
  margin-bottom: 6px;
}

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

/* ── Main ── */
.ac-main {
  flex: 1;
  min-width: 0;
  padding: 40px 44px 72px;
  max-width: 1180px;
}

.ac-section { display: block; }
.ac-hidden { display: none !important; }

/* ── Page header ── */
.ac-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

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

.ac-h1 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 6px;
  color: #111318;
}

.ac-subtitle {
  font-size: 13.5px;
  color: #6b7080;
  margin: 0;
  max-width: 60ch;
}

.ac-h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: #16181d;
}

.ac-header-actions {
  display: flex;
  gap: 10px;
}

/* ── Buttons ── */
.ac-btn-primary {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 0;
  background: #16181d;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.ac-btn-primary:hover { opacity: 0.88; }
.ac-btn-primary:disabled { background: #9a9da8; cursor: default; }

.ac-btn-secondary {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(22,24,29,0.12);
  background: #ffffff;
  color: #16181d;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color 0.15s;
}

.ac-btn-secondary:hover { border-color: rgba(22,24,29,0.24); }
.ac-btn-secondary:disabled { opacity: 0.6; cursor: default; }

.ac-btn-secondary-link {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(22,24,29,0.12);
  background: #ffffff;
  color: #16181d;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  transition: border-color 0.15s;
}

.ac-btn-secondary-link:hover { border-color: rgba(22,24,29,0.24); }

.ac-btn-ghost {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(22,24,29,0.12);
  background: #ffffff;
  color: #16181d;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: border-color 0.15s;
}

.ac-btn-ghost:hover { border-color: rgba(22,24,29,0.24); }
.ac-btn-ghost:disabled { opacity: 0.6; cursor: default; }

.ac-link-btn {
  border: 0;
  background: none;
  font-size: 12.5px;
  color: #6b7080;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: color 0.15s;
}

.ac-link-btn:hover { color: #16181d; }

/* ── Status dots ── */
.ac-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.ac-dot-green { background: #1e7f5c; }
.ac-dot-amber { background: #b45309; }
.ac-dot-red { background: #b42318; }
.ac-dot-gray { background: #c4c6cf; }
.ac-pulse { animation: gcPulse 1.4s ease-in-out infinite; }

/* ── KPI grid ── */
.ac-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(22,24,29,0.07);
  border: 1px solid rgba(22,24,29,0.07);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 36px;
}

.ac-kpi-cell {
  background: #ffffff;
  padding: 20px 22px;
}

.ac-kpi-label {
  font-size: 12px;
  color: #8a8d99;
  margin-bottom: 8px;
}

.ac-kpi-value {
  font-family: 'Inter Tight', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #16181d;
  font-variant-numeric: tabular-nums;
}

.ac-kpi-delta {
  font-size: 12px;
  margin-top: 4px;
}

.ac-delta-green { color: #1e7f5c; }
.ac-delta-amber { color: #b45309; }
.ac-delta-meta { color: #8a8d99; }

/* ── Two column layout ── */
.ac-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.ac-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* ── Card ── */
.ac-card {
  border: 1px solid rgba(22,24,29,0.07);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

/* ── Diagnostics rows ── */
.ac-diag-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(22,24,29,0.05);
}

.ac-diag-row-last { border-bottom: 0; }

.ac-diag-content {
  min-width: 0;
  flex: 1;
}

.ac-diag-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.ac-diag-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #16181d;
}

.ac-diag-detail {
  font-size: 12.5px;
  color: #6b7080;
  margin: 2px 0 0;
}

/* ── Ticket cards ── */
.ac-ticket-list-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ac-ticket-card {
  text-align: left;
  border: 1px solid rgba(22,24,29,0.07);
  border-radius: 12px;
  background: #ffffff;
  padding: 14px 18px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s;
}

.ac-ticket-card:hover { border-color: rgba(22,24,29,0.18); }
.ac-ticket-active { border-color: rgba(22,24,29,0.30) !important; }

.ac-ticket-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ac-ticket-age {
  margin-left: auto;
  font-size: 11.5px;
  color: #8a8d99;
}

.ac-ticket-title {
  font-size: 13.5px;
  font-weight: 500;
  color: #16181d;
}

.ac-ticket-who {
  font-size: 12px;
  color: #6b7080;
  margin-top: 2px;
}

/* ── Badges ── */
.ac-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 9999px;
}

.ac-badge-urgent { background: rgba(180,35,24,0.08); color: #b42318; }
.ac-badge-high { background: rgba(180,83,9,0.10); color: #b45309; }
.ac-badge-normal { background: rgba(22,24,29,0.06); color: #6b7080; }

/* ── Mono helpers ── */
.ac-mono-small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #8a8d99;
}

.ac-mono-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8d99;
  font-weight: 500;
}

/* ── Incident card ── */
.ac-incident-card {
  border: 1px solid rgba(180,83,9,0.25);
  border-radius: 12px;
  background: #ffffff;
  margin-bottom: 28px;
  overflow: hidden;
}

.ac-incident-header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(22,24,29,0.06);
}

.ac-incident-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.ac-incident-title {
  font-size: 14px;
  font-weight: 600;
}

.ac-incident-desc {
  font-size: 13px;
  color: #6b7080;
  margin: 0;
  max-width: 70ch;
}

.ac-incident-body {
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ac-diff-block {
  padding: 14px 16px;
  background: #fcfcfd;
  border: 1px solid rgba(22,24,29,0.07);
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #16181d;
  overflow-x: auto;
}

.ac-diff-comment { color: #8a8d99; white-space: pre; }
.ac-diff-remove { color: #b42318; white-space: pre; }
.ac-diff-add { color: #1e7f5c; white-space: pre; }

.ac-incident-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ac-incident-note {
  font-size: 12px;
  color: #8a8d99;
}

/* ── Table card ── */
.ac-table-card {
  border: 1px solid rgba(22,24,29,0.07);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.ac-table-header {
  padding: 10px 20px;
  border-bottom: 1px solid rgba(22,24,29,0.07);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8d99;
  display: grid;
  gap: 16px;
}

.ac-table-row {
  padding: 13px 20px;
  border-bottom: 1px solid rgba(22,24,29,0.05);
  align-items: center;
  display: grid;
  gap: 16px;
}

.ac-table-row-last { border-bottom: 0; }

.ac-subsys-grid {
  grid-template-columns: minmax(160px, 1.2fr) 1fr 110px 130px;
}

.ac-cust-grid {
  grid-template-columns: minmax(140px, 1.6fr) minmax(80px, 1fr) minmax(56px, 0.6fr) minmax(90px, 1fr) minmax(110px, 1.1fr);
}

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

.ac-table-signal {
  font-size: 12.5px;
  color: #6b7080;
}

.ac-table-p99 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #16181d;
  font-variant-numeric: tabular-nums;
}

.ac-table-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #16181d;
  font-variant-numeric: tabular-nums;
}

.ac-status-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
}

.ac-status-green { color: #1e7f5c; }
.ac-status-amber { color: #b45309; }

/* ── Flywheel grid ── */
.ac-flywheel-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: 12px;
  overflow: hidden;
}

.ac-flywheel-cell {
  background: #ffffff;
  padding: 20px 22px;
}

.ac-flywheel-value {
  font-family: 'Inter Tight', sans-serif;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #16181d;
}

/* ── Support grid ── */
.ac-support-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
  gap: 32px;
  align-items: start;
}

.ac-ticket-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Ticket detail ── */
.ac-ticket-detail {
  border: 1px solid rgba(22,24,29,0.07);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  min-height: 400px;
}

.ac-td-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(22,24,29,0.06);
}

.ac-td-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.ac-td-who {
  font-size: 12px;
  color: #8a8d99;
}

.ac-td-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  color: #16181d;
}

.ac-td-body {
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ac-td-report {
  font-size: 13.5px;
  color: #16181d;
  margin: 0;
  line-height: 1.6;
}

.ac-diagnosis-card {
  border: 1px solid rgba(67,83,201,0.18);
  background: rgba(67,83,201,0.03);
  border-radius: 10px;
  padding: 14px 16px;
}

.ac-diagnosis-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4353c9;
  font-weight: 500;
  margin-bottom: 8px;
}

.ac-diagnosis-text {
  font-size: 13px;
  color: #16181d;
  margin: 0 0 10px;
  line-height: 1.6;
}

.ac-evidence {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #6b7080;
}

.ac-td-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Customers / billing ── */
.ac-org-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ac-org-avatar {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ac-bill-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
}

.ac-bill-exempt { color: #6b7080; }
.ac-bill-current { color: #1e7f5c; }
.ac-bill-pastdue { color: #b45309; }
`;