import type { Metadata } from 'next';
import Link from 'next/link';
import { LargestGrid, MonthStrip, TopEvents, TopLists } from '@/components/history/HistoryViews';
import { Section } from '@/components/ui/primitives';
import { apiGet } from '@/lib/api';
import type { HistorySummary } from '@/lib/types';

export const dynamic = 'force-dynamic';
export const metadata: Metadata = { title: 'History', description: 'Explore the proprietary history of Global Internet Pressure: months, days, largest events, most affected networks and regions.' };

export default async function HistoryPage() {
  const s = await apiGet<HistorySummary>('/api/v1/history/summary');
  return (
    <div className="pb-8">
      <header className="pt-6 pb-4">
        <p className="label">History explorer</p>
        <h1 className="mt-1 text-[26px] font-medium tracking-tight sm:text-[32px]">All time</h1>
        <p className="mt-1 max-w-[760px] text-[13px] text-ink-2">Pressure history is retained indefinitely (1-minute for a year, 5-minute for three, hourly forever). Every incident page is kept. Browse by month, then by day.</p>
        <nav className="num mt-3 flex flex-wrap gap-2 text-[12px]" aria-label="Available months">
          {s.available_months.map((m) => {
            const [y, mo] = m.split('-');
            return (
              <Link key={m} href={`/history/${y}/${Number(mo)}`} className="rounded-[3px] border border-line px-2 py-1 text-ink-2 hover:text-ink">
                {m}
              </Link>
            );
          })}
        </nav>
      </header>
      <Section label="Months">
        <MonthStrip months={s.months ?? []} />
      </Section>
      <Section label="Largest events">
        <LargestGrid largest={s.largest} />
      </Section>
      <TopLists s={s} />
      <Section label="Top events" right={<Link href="/incidents" className="hover:text-ink">all incidents →</Link>}>
        <TopEvents events={s.top_events} />
      </Section>
    </div>
  );
}