import type { Metadata } from 'next';
import { TargetsRegistry } from '@/components/targets/TargetsRegistry';
import { apiGet } from '@/lib/api';
import { fmtInt } from '@/lib/format';
import type { Target } from '@/lib/types';

export const dynamic = 'force-dynamic';
export const metadata: Metadata = { title: 'Target registry', description: 'The representative endpoints we measure: cloud, CDN, DNS, developer platforms, social, finance, government, streaming and more.' };

const PAGE = 250;

type TargetsResponse = { total: number; limit: number; offset: number; categories: string[]; targets: Target[] };

export default async function TargetsPage({ searchParams }: { searchParams: Promise<{ q?: string; category?: string; page?: string; tier?: string; country?: string }> }) {
  const sp = await searchParams;
  const page = Math.max(1, Number(sp.page ?? '1') || 1);
  const params = new URLSearchParams({ limit: String(PAGE), offset: String((page - 1) * PAGE) });
  if (sp.q) params.set('q', sp.q);
  if (sp.category) params.set('category', sp.category);
  if (sp.tier) params.set('tier', sp.tier);
  if (sp.country) params.set('country', sp.country);
  const res = await apiGet<TargetsResponse>(`/api/v1/targets?${params.toString()}`);
  const pages = Math.max(1, Math.ceil(res.total / PAGE));
  return (
    <div className="pb-8">
      <header className="pt-6 pb-4">
        <p className="label">Registry</p>
        <h1 className="mt-1 text-[26px] font-medium tracking-tight sm:text-[32px]">Targets</h1>
        <p className="mt-1 max-w-[760px] text-[13px] text-ink-2">{fmtInt(res.total)} endpoints across {res.categories.length} categories. Tier 1 is checked every 20 s, tier 2 every 45 s, tier 3 every 5 min, tier 4 every 15 min; traceroutes every 15 min. Importance (1–5) weights each target in the aggregates.</p>
      </header>
      <TargetsRegistry targets={res.targets} categories={res.categories} initialQuery={sp.q ?? ''} initialCategory={sp.category ?? ''} total={res.total} page={page} pages={pages} pageSize={PAGE} />
    </div>
  );
}