import type { Metadata } from 'next';
import Link from 'next/link';
import { BgpLive } from '@/components/bgp/BgpLive';
import { BgpSeriesChart } from '@/components/bgp/BgpSeriesChart';
import { Section, StatusDot } from '@/components/ui/primitives';
import { apiGet } from '@/lib/api';
import { fmt, fmtInt } from '@/lib/format';
import { Time } from '@/lib/time';
import type { BgpStats } from '@/lib/types';

export const dynamic = 'force-dynamic';
export const metadata: Metadata = { title: 'BGP', description: 'Live BGP updates and withdrawals per second versus baseline, collector health, one-hour series and top origin ASNs.' };

export default async function BgpPage() {
  const b = await apiGet<BgpStats>('/api/v1/bgp/stats');
  return (
    <div className="pb-8">
      <header className="pt-6 pb-4">
        <p className="label">Routing component</p>
        <h1 className="mt-1 text-[26px] font-medium tracking-tight sm:text-[32px]">BGP</h1>
        <p className="mt-1 max-w-[760px] text-[13px] text-ink-2">Announcements and withdrawals from RIPE RIS Live collectors, normalised and compared with a rolling baseline. Withdrawal spikes, origin-ASN changes and collector disagreement feed the Routing component.</p>
      </header>
      <Section label="Live rates" right={<span>updated every 5 s from real counters</span>}>
        <BgpLive initial={b} />
      </Section>
      <Section label="Last hour" right={<span>per minute</span>}>
        <BgpSeriesChart series={b.series_1h} />
      </Section>
      <div className="grid grid-cols-[minmax(0,1fr)] gap-x-10 lg:grid-cols-2">
        <Section label="Collectors" right={<span>{fmtInt(b.collectors.length)} · {fmtInt(b.peers)} peers</span>} className="min-w-0">
          <div className="scroll-x -mx-3 px-3">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Collector</th>
                  <th className="hidden sm:table-cell">Location</th>
                  <th className="r">Ann./s</th>
                  <th className="r">Wd./s</th>
                  <th className="r hidden sm:table-cell">Peers</th>
                  <th className="r">Last msg</th>
                  <th>Fresh</th>
                </tr>
              </thead>
              <tbody>
                {b.collectors.map((c) => (
                  <tr key={c.id}>
                    <td className="num text-ink">{c.id}</td>
                    <td className="hidden text-ink-2 sm:table-cell">{c.location}</td>
                    <td className="num r">{fmt(c.announcements_per_s)}</td>
                    <td className="num r">{fmt(c.withdrawals_per_s)}</td>
                    <td className="num r hidden text-ink-2 sm:table-cell">{fmtInt(c.peers)}</td>
                    <td className="num r text-ink-2">
                      <Time ts={c.last_message} style="time" />
                    </td>
                    <td>
                      <StatusDot status={c.fresh ? 'online' : 'stale'} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Section>
        <Section label="Top origins · 1 h" className="min-w-0">
          <div className="scroll-x -mx-3 px-3">
          <table className="tbl">
            <thead>
              <tr>
                <th>Origin ASN</th>
                <th className="r">Announcements</th>
                <th className="r">Withdrawals</th>
                <th className="r hidden sm:table-cell">Wd. share</th>
              </tr>
            </thead>
            <tbody>
              {b.top_origins_1h.map((o) => {
                const share = o.announcements + o.withdrawals ? o.withdrawals / (o.announcements + o.withdrawals) : 0;
                return (
                  <tr key={o.asn}>
                    <td>
                      <Link href={`/asn/${o.asn}`} className="text-ink hover:text-accent">
                        <span className="num">AS{o.asn}</span> {o.name}
                      </Link>
                    </td>
                    <td className="num r">{fmtInt(o.announcements)}</td>
                    <td className="num r" style={{ color: share > 0.3 ? 'var(--p-high)' : undefined }}>
                      {fmtInt(o.withdrawals)}
                    </td>
                    <td className="num r hidden text-ink-2 sm:table-cell">{Math.round(share * 100)} %</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          </div>
        </Section>
      </div>
    </div>
  );
}