import type { Metadata } from 'next';
import { t } from '@/i18n';
import { isNotBuilt } from '@/lib/api';
import { apiAnalytics } from '@/lib/api-analytics';
import { grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import { isTopicId } from '@/lib/topics';
import type { ExtremesResponse } from '@/lib/types-analytics';
import { NotBuiltState } from '@/components/data/empty-state';
import { ExtremeFacetBlock } from '@/components/explorer/extreme-facet';
import { ExtremesControls } from '@/components/explorer/extremes-controls';
import { firstParam, type SP } from '@/components/explorer/options';

export const revalidate = 900;
const WINDOWS = new Set(['1', '5', '10', '25', 'since1990']);

function parseState(sp: SP) {
  const w = firstParam(sp, 'window') ?? '10';
  const topic = (firstParam(sp, 'topic') ?? '').toLowerCase();
  return { window: WINDOWS.has(w) ? w : '10', topic: isTopicId(topic) ? topic : null, all: firstParam(sp, 'all') === '1' };
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const sp = await searchParams;
  return {
    title: t('extremes.metaTitle'),
    description: t('extremes.description'),
    alternates: { canonical: routes.extremes() },
    robots: Object.keys(sp).length ? { index: false, follow: true } : undefined,
    openGraph: { title: `${t('extremes.metaTitle')} — ${t('site.name')}`, description: t('extremes.description'), url: routes.extremes(), type: 'website' },
  };
}

export default async function ExtremesPage({ searchParams }: { searchParams: Promise<SP> }) {
  const state = parseState(await searchParams);
  let data: ExtremesResponse;
  try {
    data = await apiAnalytics.extremes({ window: state.window, topic: state.topic, min_population: state.all ? 0 : null });
  } catch (e) {
    if (isNotBuilt(e)) return <NotBuiltState />;
    throw e;
  }
  return (
    <>
      <header className="pb-3 pt-6 md:pt-10">
        <h1 className="display text-3xl leading-tight text-ink md:text-4xl">{t('extremes.title')}</h1>
        <p className="mt-2 max-w-prose text-sm text-ink-2 md:text-base">{t('extremes.lede')}</p>
        <p className="tnum mt-1 text-xs text-ink-3">
          {t('extremes.facets', { n: grouped(data.facets.length), y0: data.from_year ?? '', y1: data.to_year ?? '' })}
          {data.filter_note ? ` · ${data.filter_note}` : ` · ${t('extremes.allCountries')}`}
        </p>
      </header>
      <ExtremesControls window={state.window} topic={state.topic} all={state.all} />
      <p className="max-w-prose py-3 text-xs text-ink-3">{t('extremes.semantics')}</p>
      {data.facets.length ? (
        <>
          <nav aria-label={t('extremes.title')} className="-mx-4 px-4 sm:mx-0 sm:px-0">
            <ul className="scrollbar-none flex gap-1.5 overflow-x-auto py-1 sm:flex-wrap">
              {data.facets.map((f) => (
                <li key={f.id} className="shrink-0">
                  <a href={`#${f.id}`} className="inline-flex h-11 items-center whitespace-nowrap rounded-sm border border-rule px-3 text-sm text-ink-2 hover:border-accent hover:text-accent md:h-9 md:px-2.5">
                    {f.title}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
          {data.facets.map((f) => (
            <ExtremeFacetBlock key={f.id} facet={f} />
          ))}
        </>
      ) : (
        <p className="py-10 text-center text-sm text-ink-3">{t('extremes.none')}</p>
      )}
    </>
  );
}