import type { Metadata } from 'next';
import Link from 'next/link';
import { t, tOpt } from '@/i18n';
import { isNotBuilt, safe } from '@/lib/api';
import { apiAnalytics } from '@/lib/api-analytics';
import { apiExplore } from '@/lib/api-explore';
import { fixed, formatValue, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import type { RegionCompareResponse } from '@/lib/types-analytics';
import { NotBuiltState } from '@/components/data/empty-state';
import { Section } from '@/components/data/section';
import { PageHeader } from '@/components/explore/page-header';
import { GroupComparePicker } from '@/components/regions/group-compare-picker';
import { GroupHistory } from '@/components/regions/group-history';

export const revalidate = 900;
type SP = Record<string, string | string[] | undefined>;

function slugOf(v: string | string[] | undefined, fallback: string): string {
  const s = (Array.isArray(v) ? v[0] : v) ?? '';
  return /^[a-z0-9][a-z0-9-]*$/.test(s) ? s : fallback;
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const sp = await searchParams;
  const a = slugOf(sp.a, 'g7');
  const b = slugOf(sp.b, 'brics');
  const data = await safe(apiAnalytics.regionsCompare(a, b));
  const names = data ? data.groups.map((g) => g.name ?? g.id) : [a, b];
  const title = t('regions.compare.title', { a: names[0] ?? a, b: names[1] ?? b });
  const canonical = routes.regionCompare(a, b);
  return { title, description: t('regions.compare.description', { a: names[0] ?? a, b: names[1] ?? b }), alternates: { canonical }, robots: a === 'g7' && b === 'brics' ? undefined : { index: false, follow: true } };
}

export default async function RegionsComparePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const a = slugOf(sp.a, 'g7');
  const b = slugOf(sp.b, 'brics');
  let data: RegionCompareResponse | null = null;
  try {
    data = await apiAnalytics.regionsCompare(a, b);
  } catch (e) {
    if (isNotBuilt(e)) return <NotBuiltState />;
    data = null;
  }
  const regions = await safe(apiExplore.regions());
  const groups = regions?.items ?? [];
  const names: Record<string, string> = data ? Object.fromEntries(data.groups.map((g) => [g.id, g.name ?? g.id])) : {};
  const ids = data ? data.groups.map((g) => g.id) : [];

  return (
    <>
      <PageHeader crumbs={[{ href: routes.regions(), label: t('regions.title') }]} title={data ? t('regions.compare.heading', { a: names[ids[0] ?? ''] ?? a, b: names[ids[1] ?? ''] ?? b }) : t('regions.compare.pageTitle')} lede={t('regions.compare.lede')} />
      <div className="pb-4">
        <GroupComparePicker groups={groups} a={a} b={b} />
      </div>
      {!data ? (
        <p className="py-8 text-sm text-ink-3">{t('regions.compare.unavailable')}</p>
      ) : (
        <>
          <Section id="shares" title={t('regions.compare.shares')} subtitle={t('regions.compare.sharesSub')} className="border-t-0">
            <div className="grid gap-x-10 gap-y-4 sm:grid-cols-2">
              {(['population_share_pct', 'gdp_share_pct'] as const).map((k) => (
                <div key={k}>
                  <div className="eyebrow mb-2">{k === 'gdp_share_pct' ? t('regions.compare.gdpShare') : t('regions.compare.popShare')}</div>
                  <ol className="space-y-2">
                    {data.groups.map((g, i) => {
                      const v = data.shares[g.id]?.[k] ?? null;
                      return (
                        <li key={g.id} className="grid grid-cols-[minmax(0,9rem)_minmax(0,1fr)_4rem] items-center gap-x-3 text-sm">
                          <Link href={routes.region(g.slug ?? g.id)} className="link-quiet truncate font-medium text-ink">
                            {g.name}
                          </Link>
                          <span className="h-3 overflow-hidden rounded-xs bg-surface-2" aria-hidden>
                            <span className="block h-full" style={{ width: `${Math.min(100, v ?? 0)}%`, background: `var(--series-${i + 1})` }} />
                          </span>
                          <span className="tnum text-right text-ink">{v != null ? `${fixed(v, 1)} %` : t('common.na')}</span>
                        </li>
                      );
                    })}
                  </ol>
                </div>
              ))}
            </div>
          </Section>

          <Section id="table" title={t('regions.compare.table')} subtitle={t('regions.compare.tableSub')}>
            <table className="w-full border-collapse text-sm">
              <caption className="sr-only">{t('regions.compare.table')}</caption>
              <thead>
                <tr className="border-b border-rule text-left text-2xs uppercase tracking-wide text-ink-3">
                  <th scope="col" className="py-2 pr-3 font-medium">
                    {t('common.indicator')}
                  </th>
                  {data.groups.map((g, i) => (
                    <th key={g.id} scope="col" className="py-2 pr-3 text-right font-medium">
                      <span className="inline-flex items-center gap-1.5">
                        <span aria-hidden className="inline-block h-2 w-2 rounded-full" style={{ background: `var(--series-${i + 1})` }} />
                        {g.name}
                      </span>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-rule">
                {data.rows.map((r) => (
                  <tr key={r.indicator.slug}>
                    <th scope="row" className="py-2 pr-3 text-left font-normal">
                      <Link href={routes.indicator(r.indicator.slug)} className="link-quiet block text-ink">
                        {r.indicator.short_name ?? r.indicator.name}
                      </Link>
                      <span className="block text-2xs text-ink-3">
                        {tOpt(`regions.${r.kind}`, r.kind)} · {r.indicator.unit}
                      </span>
                    </th>
                    {data.groups.map((g) => {
                      const v = r.values[g.id];
                      return (
                        <td key={g.id} className="tnum py-2 pr-3 text-right align-top">
                          <span className="block text-base font-medium text-ink">{v ? formatValue(v.value, r.indicator) : t('common.na')}</span>
                          {v ? <span className="block text-2xs text-ink-3">{t('region.aggregates.n', { n: grouped(v.n ?? 0), year: v.year ?? '' })}</span> : null}
                        </td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </Section>

          <Section id="history" title={t('regions.compare.history')} subtitle={t('regions.compare.historySub')}>
            <GroupHistory data={data} ids={ids} names={names} />
          </Section>
        </>
      )}
    </>
  );
}