import type { Metadata } from 'next';
import Link from 'next/link';
import { IncidentsList } from '@/components/home/IncidentsList';
import { IncidentRow } from '@/components/incidents/IncidentRow';
import { Empty, Section } from '@/components/ui/primitives';
import { apiGet } from '@/lib/api';
import { fmtInt } from '@/lib/format';
import type { IncidentList } from '@/lib/types';

export const dynamic = 'force-dynamic';
export const metadata: Metadata = { title: 'Incidents', description: 'Detected, developing, active, recovering and resolved Internet incidents with evidence, hypotheses and confidence.' };

export default async function IncidentsPage({ searchParams }: { searchParams: Promise<{ page?: string }> }) {
  const sp = await searchParams;
  const page = Math.max(1, Number(sp.page ?? 1) || 1);
  const limit = 25;
  const [active, resolved] = await Promise.all([apiGet<IncidentList>('/api/v1/incidents?status=active&limit=50'), apiGet<IncidentList>(`/api/v1/incidents?status=resolved&limit=${limit}&offset=${(page - 1) * limit}`)]);
  const pages = Math.max(1, Math.ceil(resolved.total / limit));
  return (
    <div className="pb-8">
      <header className="pt-6 pb-4">
        <p className="label">Event engine</p>
        <h1 className="mt-1 text-[26px] font-medium tracking-tight sm:text-[32px]">Incidents</h1>
        <p className="mt-1 max-w-[760px] text-[13px] text-ink-2">An incident opens when a component or regional score stays above the detection threshold for consecutive cycles, then moves detected → developing → active → recovering → resolved. Confidence reflects probe count, geographic diversity, signal agreement and BGP corroboration. Pages are kept forever.</p>
      </header>
      <Section label="Active" right={<span>{fmtInt(active.total)} open · live</span>}>
        <IncidentsList initial={active.incidents} />
      </Section>
      <Section label="Resolved" right={<span>{fmtInt(resolved.total)} total</span>}>
        {resolved.incidents.length ? (
          <ul className="divide-y divide-line">
            {resolved.incidents.map((i) => (
              <IncidentRow key={i.event_id} inc={i} />
            ))}
          </ul>
        ) : (
          <Empty>No resolved incident yet.</Empty>
        )}
        {pages > 1 && (
          <nav className="num mt-4 flex gap-2 text-[12px]" aria-label="Pagination">
            {Array.from({ length: pages }, (_, i) => i + 1).map((n) => (
              <Link key={n} href={`/incidents?page=${n}`} className={`rounded-[3px] border px-2 py-1 ${n === page ? 'border-line-2 text-ink' : 'border-line text-ink-2 hover:text-ink'}`} aria-current={n === page ? 'page' : undefined}>
                {n}
              </Link>
            ))}
          </nav>
        )}
      </Section>
    </div>
  );
}