import type { Metadata } from 'next';
import Link from 'next/link';
import { t } from '@/i18n';
import { isNotBuilt } from '@/lib/api';
import { apiExplore } from '@/lib/api-explore';
import { formatDate } from '@/lib/format';
import { routes } from '@/lib/site';
import type { ChangesFeedResponse } from '@/lib/types-explore';
import { ChangesFeed } from '@/components/changes/changes-feed';
import { NotBuiltState } from '@/components/data/empty-state';
import { Section } from '@/components/data/section';
import { PageHeader } from '@/components/explore/page-header';
import { Movers } from '@/components/home/movers';
import { apiAnalytics } from '@/lib/api-analytics';
import { safe } from '@/lib/api';

export const revalidate = 900;

export const metadata: Metadata = {
  title: t('changes.title'),
  description: t('changes.sub'),
  alternates: { canonical: routes.changes() },
};

type SP = Record<string, string | string[] | undefined>;

export default async function ChangesPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const countryRaw = Array.isArray(sp.country) ? sp.country[0] : sp.country;
  const country = countryRaw && /^[a-z0-9-]+$/i.test(countryRaw) ? countryRaw : undefined;
  let data: ChangesFeedResponse | null = null;
  try {
    data = await apiExplore.changes({ limit: 100, country });
  } catch (e) {
    if (!isNotBuilt(e)) throw e;
  }
  const winRaw = Array.isArray(sp.window) ? sp.window[0] : sp.window;
  const win: 5 | 10 = winRaw === '10' ? 10 : 5;
  const movers = await safe(apiAnalytics.movers({ window: win, limit: 12 }));
  return (
    <>
      <PageHeader title={t('changes.title')} lede={t('changes.sub')} meta={data?.meta.built_at ? t('site.footer.refreshed', { date: formatDate(data.meta.built_at) }) : undefined} />
      {country ? (
        <p className="mb-3 text-sm text-ink-2">
          {t('changes.filteredCountry', { country })}{' '}
          <Link href={routes.changes()} className="text-accent hover:underline">
            {t('changes.clearCountry')}
          </Link>
        </p>
      ) : null}
      {!data ? (
        <NotBuiltState />
      ) : (
        <>
          <nav aria-label={t('changes.windows.nav')} className="mb-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-ink-2">
            <span>{t('changes.windows.nav')}</span>
            <span className="inline-flex min-h-[36px] items-center rounded-sm bg-ink px-2 text-xs text-paper">{t('home.movers.window.1')}</span>
            <Link href={`${routes.changes()}?window=5#windows`} className="inline-flex min-h-[36px] items-center text-accent hover:underline">
              {t('home.movers.window.5')} ↓
            </Link>
            <Link href={`${routes.changes()}?window=10#windows`} className="inline-flex min-h-[36px] items-center text-accent hover:underline">
              {t('home.movers.window.10')} ↓
            </Link>
          </nav>
          <details className="mb-2 border-y border-rule py-3 text-sm">
            <summary className="flex min-h-[44px] cursor-pointer list-none items-center gap-2 font-medium text-ink-2 hover:text-ink">
              <span aria-hidden>›</span> {t('changes.methodology')}
            </summary>
            <p className="mt-2 max-w-prose leading-relaxed text-ink-2">{t('changes.how')}</p>
            <p className="mt-2 text-xs">
              <Link href={`${routes.methodology()}#changes`} className="text-accent hover:underline">
                {t('site.footer.methodology')} →
              </Link>
            </p>
          </details>
          <ChangesFeed initial={data.items} kinds={data.kinds ?? []} limit={100} />
          <Section id="windows" title={t('changes.windows.title')} subtitle={t('changes.windows.sub')}>
            <Movers key={win} initial={movers} initialWindow={win} limit={12} compact />
          </Section>
        </>
      )}
    </>
  );
}