import Link from "next/link";
import type { Metadata } from "next";
import { Bar, Empty, Flag, PageHeader, Panel, Table, Td } from "@/components/ui";
import { api } from "@/lib/api";
import { fmtInt } from "@/lib/format";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Countries", description: "Country desks: government, business, infrastructure, health, media, cyber, AI and science signals for every country WebSensor covers.", alternates: { canonical: "/country" } };

export default async function CountriesPage() {
  const { items } = await api.countries();
  const totals = items.reduce((a, c) => ({ sources: a.sources + c.sources, events: a.events + c.events_24h, breaking: a.breaking + c.breaking_24h }), { sources: 0, events: 0, breaking: 0 });
  const max = Math.max(1, ...items.map((c) => c.events_24h));
  return (
    <>
      <PageHeader compact kicker="Desks" title="Countries" description={`${fmtInt(items.length)} countries · ${fmtInt(totals.sources)} sources · ${fmtInt(totals.events)} events and ${fmtInt(totals.breaking)} breaking signals in the last 24 h. Each desk groups official government, business, infrastructure, health and media signals by jurisdiction.`} />
      <Panel dense>
        {items.length === 0 ? (
          <Empty>Country desks appear once sources carry a country.</Empty>
        ) : (
          <Table head={["", "Country", "Code", "Sources", "Events 24 h", "", "Breaking 24 h", ""]}>
            {items.map((c) => (
              <tr key={c.country} className="hover:bg-panel-2/60">
                <Td className="w-8 text-base leading-none">{c.flag || <Flag code={c.country} />}</Td>
                <Td><Link href={`/country/${c.slug}`} className="font-medium hover:underline">{c.name}</Link></Td>
                <Td mono className="text-fg-subtle">{c.country}</Td>
                <Td mono>{fmtInt(c.sources)}</Td>
                <Td mono>{fmtInt(c.events_24h)}</Td>
                <Td><div className="w-20 sm:w-40"><Bar value={c.events_24h} max={max} /></div></Td>
                <Td mono className={c.breaking_24h ? "text-hot" : "text-fg-subtle"}>{fmtInt(c.breaking_24h)}</Td>
                <Td><Link href={`/country/${c.slug}`} className="whitespace-nowrap text-[11px] text-fg-subtle hover:text-fg">desk →</Link></Td>
              </tr>
            ))}
          </Table>
        )}
      </Panel>
    </>
  );
}