import type { Metadata } from 'next';
import { t } from '@/i18n';
import { api, isNotBuilt, safe } from '@/lib/api';
import { routes } from '@/lib/site';
import { toCountryLite, type CountryLite } from '@/lib/types-compare';
import { CompareBuilder } from '@/components/compare/compare-builder';
import { NotBuiltState } from '@/components/data/empty-state';

export const revalidate = 900;

export const metadata: Metadata = {
  title: t('compare.metaTitle'),
  description: t('compare.description'),
  alternates: { canonical: routes.compare() },
  openGraph: { title: `${t('compare.metaTitle')} — ${t('site.name')}`, description: t('compare.description'), url: routes.compare(), type: 'website' },
};

/** /compare — the builder: typeahead, ordered chips, presets, "Compare" → /compare/a/b/c. */
export default async function ComparePage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const sp = await searchParams;
  let list;
  try {
    list = await api.countries();
  } catch (e) {
    if (isNotBuilt(e)) return <NotBuiltState />;
    throw e;
  }
  const countries: CountryLite[] = list.items.filter((c) => c.kind !== 'aggregate').map(toCountryLite).sort((a, b) => a.name.localeCompare(b.name));
  const similar = await safe(api.countrySimilar('CAN', 'overall', 6));
  const peers = (similar?.peers ?? []).map((p) => toCountryLite(p.country));
  const initial = String(Array.isArray(sp.c) ? sp.c[0] : sp.c ?? '')
    .split(',')
    .map((s) => s.trim().toLowerCase())
    .filter(Boolean);

  return (
    <>
      <header className="pb-4 pt-6 md:pt-10">
        <h1 className="display text-3xl leading-tight text-ink md:text-5xl">{t('compare.title')}</h1>
        <p className="mt-2 max-w-prose text-sm text-ink-2 md:text-base">{t('compare.sub')}</p>
      </header>
      <CompareBuilder countries={countries} peers={peers} initial={initial} />
    </>
  );
}