// ===== Status público (status.pleita.pro) =====

const STATUS_SVCS = [
  { n: "App principal · pleita.pro",          status: "up",        uptime: 99.97 },
  { n: "API REST · api.pleita.pro",           status: "up",        uptime: 99.99 },
  { n: "Workers (Fastify + agentes IA)",      status: "up",        uptime: 99.94 },
  { n: "PNCP · sincronização",                status: "up",        uptime: 99.81 },
  { n: "PNCP Swagger",                        status: "degraded",  uptime: 96.42 },
  { n: "Compras.gov · integração",            status: "up",        uptime: 99.55 },
  { n: "DOU · varredura",                     status: "up",        uptime: 99.92 },
  { n: "Stripe (pagamentos)",                 status: "up",        uptime: 99.98 },
  { n: "WhatsApp Business · notificações",    status: "up",        uptime: 99.74 },
  { n: "Modelos Anthropic Claude",            status: "up",        uptime: 99.92 },
];

const STATUS_INC = [
  { date: "12 mai 2026 · 18:00–18:42",  title: "Indisponibilidade Compras.gov",       sev: "manutenção Serpro", impact: "Sincronização atrasou 42min.", status: "resolvido" },
  { date: "08 mai 2026 · 14:22–14:38",  title: "Spike de latência PNCP Swagger",       sev: "degradação",        impact: "8 das últimas 10 chamadas acima de 1.5s.", status: "monitorando" },
  { date: "29 abr 2026 · 02:14–02:31",  title: "Manutenção programada · banco",       sev: "manutenção",        impact: "Sem impacto observado em jobs.", status: "resolvido" },
  { date: "21 abr 2026 · 09:14–09:32",  title: "Erro em jobs de Análise · Sonnet",    sev: "incidente menor",   impact: "12 jobs reprocessados automaticamente.", status: "resolvido" },
];

const STATUS_BUCKETS_UP   = Array.from({ length: 90 }, () => "up");
const STATUS_BUCKETS_DEG  = STATUS_BUCKETS_UP.map((s, i) => (i === 83 || i === 86 ? "degraded" : s));

function StatusBuckets({ pattern = "up" }) {
  const data = pattern === "degraded" ? STATUS_BUCKETS_DEG : STATUS_BUCKETS_UP;
  return (
    <div className="flex items-end gap-px h-8">
      {data.map((b, i) => {
        const color = b === "up" ? "rgb(34 197 94)" : b === "degraded" ? "rgb(245 158 11)" : "rgb(220 38 38)";
        return <span key={i} className="flex-1 rounded-sm" style={{ background: color, height: b === "up" ? "100%" : "60%", opacity: 0.85 }} />;
      })}
    </div>
  );
}

const STATUS_TONE = {
  up:       { fg: "rgb(22 163 74)",  bg: "rgb(34 197 94 / .14)",  label: "operacional" },
  degraded: { fg: "rgb(245 158 11)", bg: "rgb(245 158 11 / .14)", label: "degradado" },
  down:     { fg: "rgb(220 38 38)",  bg: "rgb(220 38 38 / .14)",  label: "fora do ar" },
};

function ScreenStatus() {
  const allOk = STATUS_SVCS.every((s) => s.status === "up");
  return (
    <div className="min-h-full bg-surface-1">
      <nav className="sticky top-0 z-10 border-b border-pleita-line/60 bg-pleita-paper/85 backdrop-blur">
        <div className="max-w-6xl mx-auto px-6 md:px-10 h-16 flex items-center justify-between">
          <Logo size={22} />
          <span className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">status.pleita.pro</span>
        </div>
      </nav>

      <div className="max-w-6xl mx-auto px-6 md:px-10 py-12">
        {/* Hero status banner */}
        <section className={`rounded-[10px] p-8 md:p-10 mb-8 shadow-pl-sm`} style={{ background: allOk ? "rgb(34 197 94 / .10)" : "rgb(245 158 11 / .12)", border: `1px solid ${allOk ? "rgb(34 197 94 / .35)" : "rgb(245 158 11 / .35)"}` }}>
          <div className="flex items-center gap-4 flex-wrap">
            <span className={`size-14 rounded-full grid place-items-center text-2xl`} style={{ background: allOk ? "rgb(34 197 94 / .2)" : "rgb(245 158 11 / .2)" }}>
              {allOk ? "✓" : "⚠"}
            </span>
            <div className="flex-1 min-w-0">
              <h1 className="font-display text-2xl md:text-3xl text-pleita-ink leading-tight">
                {allOk ? "Todos os sistemas operacionais" : "1 sistema com degradação"}
                <span className="text-pleita-lime">.</span>
              </h1>
              <p className="pl-num text-xs text-pleita-stone-2 mt-1 inline-flex items-center gap-2">
                <span className="size-1.5 rounded-full bg-verdict-go animate-pulse" />
                última verificação há 14s · ping a cada 60s
              </p>
            </div>
            <button className="pl-num text-xs px-4 py-2 rounded-md border border-pleita-line bg-surface-card text-pleita-ink hover:bg-surface-2">
              🔔 Inscrever para alertas
            </button>
          </div>
        </section>

        {/* Services */}
        <section className="rounded-[10px] bg-surface-card border border-pleita-line shadow-pl-sm overflow-hidden mb-8">
          <header className="px-6 py-4 border-b border-pleita-line flex items-center justify-between flex-wrap gap-3">
            <h2 className="font-display text-lg text-pleita-ink">Componentes · últimos 90 dias</h2>
            <div className="flex items-center gap-4 pl-num text-[11px] text-pleita-stone-2">
              <span className="inline-flex items-center gap-1.5"><span className="size-2 rounded-sm bg-verdict-go" />no ar</span>
              <span className="inline-flex items-center gap-1.5"><span className="size-2 rounded-sm bg-verdict-caution" />degradado</span>
              <span className="inline-flex items-center gap-1.5"><span className="size-2 rounded-sm bg-verdict-stop" />fora</span>
            </div>
          </header>
          <ul className="divide-y divide-pleita-line/60">
            {STATUS_SVCS.map((s) => {
              const m = STATUS_TONE[s.status];
              return (
                <li key={s.n} className="px-6 py-4 grid grid-cols-12 items-center gap-4">
                  <div className="col-span-12 md:col-span-5">
                    <div className="font-medium text-pleita-ink">{s.n}</div>
                  </div>
                  <div className="col-span-8 md:col-span-5">
                    <StatusBuckets pattern={s.status === "degraded" ? "degraded" : "up"} />
                  </div>
                  <div className="col-span-4 md:col-span-2 text-right">
                    <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded font-semibold inline-flex items-center gap-1" style={{ background: m.bg, color: m.fg }}>
                      <span className="size-1.5 rounded-full" style={{ background: m.fg }} />{m.label}
                    </span>
                    <div className="pl-num text-[11px] text-pleita-stone-2 mt-1">{s.uptime}%</div>
                  </div>
                </li>
              );
            })}
          </ul>
        </section>

        {/* Incidentes */}
        <section className="rounded-[10px] bg-surface-card border border-pleita-line shadow-pl-sm overflow-hidden mb-8">
          <header className="px-6 py-4 border-b border-pleita-line">
            <h2 className="font-display text-lg text-pleita-ink">Incidentes recentes</h2>
            <p className="text-xs text-pleita-stone-2 mt-0.5">90 dias · post-mortems em <a className="underline">/postmortems</a></p>
          </header>
          <ul className="divide-y divide-pleita-line/60">
            {STATUS_INC.map((inc, i) => (
              <li key={i} className="px-6 py-4 grid grid-cols-12 items-start gap-3">
                <div className="col-span-12 md:col-span-3 pl-num text-[11px] text-pleita-stone-2">{inc.date}</div>
                <div className="col-span-12 md:col-span-7">
                  <div className="font-medium text-pleita-ink">{inc.title}</div>
                  <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">{inc.sev}</div>
                  <p className="text-sm text-pleita-stone mt-1.5">{inc.impact}</p>
                </div>
                <div className="col-span-12 md:col-span-2 md:text-right">
                  <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold" style={{ background: inc.status === "resolvido" ? "rgb(34 197 94 / .14)" : "rgb(59 130 246 / .14)", color: inc.status === "resolvido" ? "rgb(22 163 74)" : "rgb(59 130 246)" }}>{inc.status}</span>
                </div>
              </li>
            ))}
          </ul>
        </section>

        {/* Métricas resumidas */}
        <section className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {[
            ["Uptime · 30d",  "99,94%",  "+0,04pp"],
            ["Latência p50",   "184ms",  "−12ms"],
            ["Latência p95",   "612ms",  "estável"],
            ["Incidentes/mês", "0,8",    "−0,3"],
          ].map(([l, v, d]) => (
            <div key={l} className="rounded-[10px] bg-surface-card border border-pleita-line p-4 shadow-pl-sm">
              <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{l}</div>
              <div className="pl-num font-semibold text-2xl text-pleita-ink mt-1.5">{v}</div>
              <div className="pl-num text-[11px] text-verdict-go mt-1">{d}</div>
            </div>
          ))}
        </section>

        <footer className="mt-12 pt-8 border-t border-pleita-line/60 flex items-center justify-between flex-wrap gap-3 pl-num text-[11px] text-pleita-stone-2">
          <span>powered by Pleita SRE · auditado por <a className="underline">SBA Compliance</a></span>
          <span>RSS feed · webhooks · API</span>
        </footer>
      </div>
    </div>
  );
}

window.ScreenStatus = ScreenStatus;