import type { Metadata } from "next";
import Link from "next/link";
import { Page, PageHeader } from "@/components/ui/section";
import { StatusBadge } from "@/components/ui/status-badge";
import { api } from "@/lib/api";
import type { StatusReport } from "@/lib/types";

export const metadata: Metadata = { title: "Status", description: "Operational status of Market Atlas components.", alternates: { canonical: "/status" } };
export const dynamic = "force-dynamic";

export default async function StatusPage() {
  const s = await api<StatusReport>("/v1/status");
  const worst = s.components.some((c) => c.status === "outage") ? "outage" : s.components.some((c) => c.status === "degraded") ? "degraded" : "operational";
  return (
    <Page>
      <PageHeader kicker="Status" title={worst === "operational" ? "All systems operational" : worst === "degraded" ? "Partial degradation" : "Service disruption"} lead={`Market Atlas v${s.version} · ${s.connectors.healthy} of ${s.connectors.total} connectors healthy. Source-group status reflects whether at least one connector of the group is delivering.`} actions={<StatusBadge status={worst} />} />
      <ul className="divide-y divide-rule rounded-md border border-rule bg-surface">
        {s.components.map((c) => (
          <li key={c.id} className="flex items-center justify-between px-4 py-3 text-sm">
            <span>{c.name}</span>
            <StatusBadge status={c.status} />
          </li>
        ))}
      </ul>
      <p className="mt-4 text-xs text-ink-3">
        Detailed connector metrics and incidents: <Link href="/data-health" className="text-accent hover:underline">data health</Link>. This page intentionally omits infrastructure details.
      </p>
    </Page>
  );
}