import type { Metadata } from "next";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { formatDate, formatPercent, timeAgo } from "@/lib/format";
import { getStatusSnapshot, type ComponentState, type DayPoint, type Incident } from "@/lib/queries/status";
import { cn } from "@/lib/utils";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Status",
  description: "Live operational status of the Fetcha API, dashboard, proxy networks and authentication, with 24-hour success rate and 30-day history.",
  alternates: { canonical: "/status" },
};

const STATE_META: Record<ComponentState, { label: string; badge: "success" | "warning" | "danger" | "outline" | "default"; dot: string }> = {
  operational: { label: "Operational", badge: "success", dot: "bg-success" },
  degraded: { label: "Degraded", badge: "warning", dot: "bg-warning" },
  outage: { label: "Major outage", badge: "danger", dot: "bg-danger" },
  "not-launched": { label: "Not launched", badge: "outline", dot: "bg-border-strong" },
  unknown: { label: "Unknown", badge: "default", dot: "bg-fg-subtle" },
};

const DAY_TONE: Record<DayPoint["state"], string> = {
  operational: "bg-success",
  degraded: "bg-warning",
  outage: "bg-danger",
  "no-data": "bg-bg-muted",
  "not-launched": "bg-bg-muted",
  unknown: "bg-bg-muted",
};

function dayLabel(p: DayPoint): string {
  const date = new Date(`${p.day}T00:00:00Z`).toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
  if (p.state === "no-data" || p.total === 0) return `${date} · No data`;
  return `${date} · ${formatPercent((p.successRate ?? 0) * 100, 2)} success · ${p.total.toLocaleString("en-US")} requests`;
}

function UptimeBar({ history, name }: { history: DayPoint[]; name: string }) {
  const measured = history.filter((p) => p.state !== "no-data" && p.successRate !== null);
  const avg = measured.length ? measured.reduce((a, p) => a + (p.successRate ?? 0), 0) / measured.length : null;
  return (
    <div>
      <ul className="flex h-7 items-stretch gap-[3px]" aria-label={`${name}: 30-day history`}>
        {history.map((p) => {
          const label = dayLabel(p);
          return (
            <li key={p.day} className={cn("min-w-0 flex-1 rounded-[2px] transition-opacity hover:opacity-80", DAY_TONE[p.state])} title={label}>
              <span className="sr-only">{label}</span>
            </li>
          );
        })}
      </ul>
      <div className="mt-1.5 flex items-center justify-between text-[11.5px] text-fg-subtle">
        <span>30 days ago</span>
        <span className="font-mono tabular">{avg === null ? "No data" : `${formatPercent(avg * 100, 2)} avg. success`}</span>
        <span>Today</span>
      </div>
    </div>
  );
}

function IncidentItem({ i }: { i: Incident }) {
  const sev = i.severity.toLowerCase();
  return (
    <li className="px-5 py-4">
      <div className="flex flex-wrap items-center gap-2">
        <Badge variant={i.resolvedAt ? "outline" : sev === "major" || sev === "critical" ? "danger" : "warning"} dot>
          {i.resolvedAt ? "Resolved" : sev === "major" || sev === "critical" ? "Major" : "Minor"}
        </Badge>
        <span className="text-[12px] text-fg-subtle">{i.component}</span>
      </div>
      <h3 className="mt-1.5 text-[15px] font-semibold tracking-tight">{i.title}</h3>
      {i.body ? <p className="mt-1 text-[13.5px] leading-relaxed text-fg-muted">{i.body}</p> : null}
      <p className="mt-2 font-mono text-[12px] tabular text-fg-subtle">
        Started {formatDate(i.startedAt)}
        {i.resolvedAt ? ` · Resolved ${formatDate(i.resolvedAt)}` : ` · Ongoing (${timeAgo(i.startedAt)})`}
      </p>
    </li>
  );
}

export default async function StatusPage() {
  const snap = await getStatusSnapshot();
  const overall = STATE_META[snap.overall];
  const headline =
    snap.overall === "operational" ? "All systems operational" : snap.overall === "degraded" ? "Some systems degraded" : snap.overall === "outage" ? "Major outage in progress" : "Status partially unavailable";

  return (
    <div className="container-page py-14 sm:py-20">
      <header className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-[11.5px] font-semibold uppercase tracking-[0.12em] text-accent">Status</p>
          <h1 className="mt-2 flex items-center gap-3 text-[30px] font-semibold leading-tight tracking-tight sm:text-[36px]">
            <span className={cn("size-3 shrink-0 rounded-full", overall.dot, snap.overall === "operational" && "animate-pulse-soft")} aria-hidden />
            {headline}
          </h1>
          <p className="mt-2 text-[13.5px] text-fg-muted">
            Computed live from health checks and request outcomes. Generated <time dateTime={snap.generatedAt.toISOString()}>{formatDate(snap.generatedAt)}</time> UTC.
          </p>
        </div>
        <dl className="grid grid-cols-2 gap-6 sm:text-right">
          <div>
            <dt className="text-[11.5px] uppercase tracking-wide text-fg-subtle">Success rate · 24 h</dt>
            <dd className="mt-0.5 font-mono text-[22px] font-semibold tabular tracking-tight">{snap.successRate24h === null ? "—" : formatPercent(snap.successRate24h * 100, 2)}</dd>
          </div>
          <div>
            <dt className="text-[11.5px] uppercase tracking-wide text-fg-subtle">Requests · 24 h</dt>
            <dd className="mt-0.5 font-mono text-[22px] font-semibold tabular tracking-tight">{snap.requests24h.toLocaleString("en-US")}</dd>
          </div>
        </dl>
      </header>

      {!snap.dbReachable ? (
        <div role="status" className="mt-8 rounded-lg border border-warning/30 bg-warning-soft px-4 py-3 text-[13.5px] text-fg">
          The status database could not be reached while rendering this page, so some components show as degraded or unknown. This reflects the status page itself, not necessarily the API.
        </div>
      ) : null}

      {snap.openIncidents.length > 0 ? (
        <section aria-labelledby="open-incidents" className="mt-10">
          <h2 id="open-incidents" className="text-[13px] font-semibold uppercase tracking-wide text-fg-subtle">
            Active incidents
          </h2>
          <ul className="mt-3 divide-y divide-border rounded-lg border border-danger/30 bg-bg-elevated">
            {snap.openIncidents.map((i) => (
              <IncidentItem key={i.id} i={i} />
            ))}
          </ul>
        </section>
      ) : null}

      <section aria-labelledby="components-title" className="mt-10">
        <h2 id="components-title" className="text-[13px] font-semibold uppercase tracking-wide text-fg-subtle">
          Components
        </h2>
        <ul className="mt-3 divide-y divide-border rounded-lg border border-border bg-bg-elevated">
          {snap.components.map((c) => {
            const m = STATE_META[c.state];
            return (
              <li key={c.key} className={cn("px-5 py-5", c.state === "not-launched" && "bg-bg-subtle/50")}>
                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                  <div className="min-w-0">
                    <h3 className="text-[15.5px] font-semibold tracking-tight">{c.name}</h3>
                    <p className="mt-0.5 text-[13px] text-fg-muted">{c.description}</p>
                    {c.detail ? <p className="mt-1 text-[12.5px] text-fg-subtle">{c.detail}</p> : null}
                  </div>
                  <Badge variant={m.badge} dot className="shrink-0 self-start">
                    {m.label}
                  </Badge>
                </div>
                <div className="mt-4">
                  <UptimeBar history={c.history} name={c.name} />
                </div>
              </li>
            );
          })}
        </ul>
        <ul className="mt-3 flex flex-wrap items-center gap-x-5 gap-y-1.5 text-[12px] text-fg-subtle" aria-label="Legend">
          {[
            ["bg-success", "≥ 99% success"],
            ["bg-warning", "95–99% or minor incident"],
            ["bg-danger", "< 95% or major incident"],
            ["bg-bg-muted border border-border", "No data"],
          ].map(([tone, label]) => (
            <li key={label} className="flex items-center gap-1.5">
              <span className={cn("inline-block size-2.5 rounded-[2px]", tone)} aria-hidden />
              {label}
            </li>
          ))}
        </ul>
      </section>

      <section aria-labelledby="history-title" className="mt-14">
        <h2 id="history-title" className="text-[13px] font-semibold uppercase tracking-wide text-fg-subtle">
          Incident history
        </h2>
        {snap.resolvedIncidents.length === 0 ? (
          <p className="mt-3 rounded-lg border border-dashed border-border px-5 py-8 text-center text-[13.5px] text-fg-muted">No resolved incidents on record.</p>
        ) : (
          <ul className="mt-3 divide-y divide-border rounded-lg border border-border">
            {snap.resolvedIncidents.map((i) => (
              <IncidentItem key={i.id} i={i} />
            ))}
          </ul>
        )}
      </section>

      <section className="mt-14 grid gap-6 rounded-lg border border-border bg-bg-subtle/60 p-6 text-[13.5px] leading-relaxed text-fg-muted sm:grid-cols-3">
        <div>
          <h2 className="font-semibold text-fg">How this is computed</h2>
          <p className="mt-1">Success rate counts completed requests whose outcome depended on the platform; requests rejected for invalid input, disallowed URLs or exhausted quotas are excluded. Network status comes from continuous upstream health checks.</p>
        </div>
        <div>
          <h2 className="font-semibold text-fg">Machine-readable</h2>
          <p className="mt-1">
            <code className="font-mono text-fg">GET /api/health</code> and <code className="font-mono text-fg">GET /api/ready</code> return JSON you can poll from your own monitoring.
          </p>
        </div>
        <div>
          <h2 className="font-semibold text-fg">Report an issue</h2>
          <p className="mt-1">
            Include the <code className="font-mono text-fg">X-Fetcha-Request-ID</code> from the failing response and email <a className="text-accent underline-offset-4 hover:underline" href="mailto:support@fetcha.co">support@fetcha.co</a>. See the <Link href="/changelog" className="text-accent underline-offset-4 hover:underline">changelog</Link> for releases.
          </p>
        </div>
      </section>
    </div>
  );
}