import type { Metadata } from 'next';
import { RankingTabs, RankingsTable } from '@/components/rankings/rankings-table';
import { Container, Note, PageHeader, Unavailable } from '@/components/ui/section';
import { api, safe } from '@/lib/api';
import { str, type SP } from '@/lib/params';
import { RANKING_KINDS } from '@/lib/site';

export const metadata: Metadata = { title: 'Rankings', description: 'Most active companies, fastest hiring growth and decline, product velocity, AI activity, geographic expansion, developer momentum, pricing changes and unusual activity — by window and region.' };
export const revalidate = 120;

export default async function RankingsPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const kind = RANKING_KINDS.some((k) => k.id === str(sp.kind)) ? (str(sp.kind) as string) : 'most_active';
  const window = ['24h', '7d', '30d', '90d', '1y'].includes(str(sp.window) ?? '') ? (str(sp.window) as string) : '30d';
  const country = str(sp.country);
  const industry = str(sp.industry);
  const [data, countries, industries] = await Promise.all([safe(api.rankings({ kind, window, country, industry, limit: 50 })), safe(api.countries()), safe(api.industries())]);
  const k = RANKING_KINDS.find((x) => x.id === kind)!;
  return (
    <Container wide>
      <PageHeader eyebrow="Rankings" title={k.label} lede="Rankings are computed from monitored public surfaces and normalised by coverage. Windows compare the same company against its own baseline; deltas show the move since the previous window." />
      <RankingTabs kind={kind} window={window} country={country} industry={industry} />
      <form method="get" action="/rankings" className="mt-3 flex flex-wrap gap-2">
        <input type="hidden" name="kind" value={kind} />
        <input type="hidden" name="window" value={window} />
        <select name="country" defaultValue={country ?? ''} className="field h-9 text-xs" aria-label="Country">
          <option value="">All countries</option>
          {(countries?.items ?? []).map((c) => (
            <option key={c.code} value={c.code}>
              {c.name}
            </option>
          ))}
        </select>
        <select name="industry" defaultValue={industry ?? ''} className="field h-9 text-xs" aria-label="Industry">
          <option value="">All industries</option>
          {(industries?.items ?? []).map((i) => (
            <option key={i.slug} value={i.slug}>
              {i.name}
            </option>
          ))}
        </select>
        <button type="submit" className="btn btn-sm">
          Apply
        </button>
      </form>
      <div className="mt-4">{data ? <RankingsTable data={data} /> : <Unavailable what="Rankings" />}</div>
      <Note className="mt-4">{k.unit === 'pct' ? 'Hiring momentum is the percentage change in publicly listed open roles; a decline in listings is not evidence of layoffs.' : k.unit === 'count' ? 'Counts structured pricing events detected on public pricing pages in the window.' : 'Scores are 0–100 relative to the monitored population; see methodology for formula versions.'}</Note>
    </Container>
  );
}