import type { Metadata } from 'next';
import Link from 'next/link';
import { LevelBadge, PNum, Section } from '@/components/ui/primitives';
import { apiGet } from '@/lib/api';
import { fmt, fmtInt } from '@/lib/format';
import { pressureColor } from '@/lib/pressure';
import { Time } from '@/lib/time';
import type { AsnRow } from '@/lib/types';

export const dynamic = 'force-dynamic';
export const metadata: Metadata = { title: 'Autonomous systems', description: 'Pressure observed per autonomous system: routing churn, latency and availability toward the networks we measure.' };

export default async function AsnsPage() {
  const { asns, ts } = await apiGet<{ ts: string; asns: AsnRow[] }>('/api/v1/asns');
  const sorted = [...asns].sort((a, b) => b.pressure - a.pressure);
  return (
    <div className="pb-8">
      <header className="pt-6 pb-4">
        <p className="label">Index</p>
        <h1 className="mt-1 text-[26px] font-medium tracking-tight sm:text-[32px]">Autonomous systems</h1>
        <p className="mt-1 text-[13px] text-ink-2">
          {fmtInt(asns.length)} networks with anchored targets or BGP attribution · engine <Time ts={ts} style="time" className="num" />
        </p>
      </header>
      <Section>
        <div className="scroll-x -mx-3 px-3">
          <table className="tbl">
            <thead>
              <tr>
                <th>ASN</th>
                <th>Name</th>
                <th className="hidden sm:table-cell">CC</th>
                <th className="r">Pressure</th>
                <th className="hidden md:table-cell">Level</th>
                <th className="r hidden sm:table-cell">Routing</th>
                <th className="r hidden sm:table-cell">Latency</th>
                <th className="r hidden md:table-cell">Avail.</th>
                <th className="r hidden md:table-cell">Targets</th>
                <th className="r hidden lg:table-cell">Prefixes</th>
                <th className="r hidden lg:table-cell">Imp.</th>
              </tr>
            </thead>
            <tbody>
              {sorted.map((a) => (
                <tr key={a.asn}>
                  <td className="num">
                    <Link href={`/asn/${a.asn}`} className="text-ink hover:text-accent">
                      AS{a.asn}
                    </Link>
                  </td>
                  <td>
                    <Link href={`/asn/${a.asn}`} className="text-ink hover:text-accent">
                      {a.name}
                    </Link>
                  </td>
                  <td className="hidden text-ink-2 sm:table-cell">{a.country}</td>
                  <td className="r">
                    <PNum value={a.pressure} className="text-[14px]" />
                  </td>
                  <td className="hidden md:table-cell">
                    <LevelBadge level={a.level} size="xs" />
                  </td>
                  <td className="num r hidden sm:table-cell" style={{ color: pressureColor(a.routing) }}>
                    {fmt(a.routing, 0)}
                  </td>
                  <td className="num r hidden sm:table-cell" style={{ color: pressureColor(a.latency) }}>
                    {fmt(a.latency, 0)}
                  </td>
                  <td className="num r hidden md:table-cell" style={{ color: pressureColor(a.availability) }}>
                    {fmt(a.availability, 0)}
                  </td>
                  <td className="num r hidden text-ink-2 md:table-cell">{fmtInt(a.targets)}</td>
                  <td className="num r hidden text-ink-2 lg:table-cell">{fmtInt(a.prefixes_observed)}</td>
                  <td className="num r hidden text-ink-2 lg:table-cell">{a.importance}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>
    </div>
  );
}