import type { Metadata } from 'next';
import Link from 'next/link';
import { t, tOpt } from '@/i18n';
import { isNotBuilt, safe } from '@/lib/api';
import { apiExplore } from '@/lib/api-explore';
import { compact, formatValue, grouped, isNum } from '@/lib/format';
import { routes } from '@/lib/site';
import type { RegionItem, RegionResponse } from '@/lib/types-explore';
import { NotBuiltState } from '@/components/data/empty-state';
import { Section } from '@/components/data/section';
import { PageHeader } from '@/components/explore/page-header';

export const revalidate = 900;

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

const KIND_ORDER = ['world', 'region', 'continent', 'income', 'org', 'custom'] as const;

export default async function RegionsPage() {
  let items: RegionItem[] = [];
  let notBuilt = false;
  try {
    items = (await apiExplore.regions()).items;
  } catch (e) {
    if (isNotBuilt(e)) notBuilt = true;
    else throw e;
  }
  if (notBuilt) {
    return (
      <>
        <PageHeader title={t('regions.title')} lede={t('regions.sub')} />
        <NotBuiltState />
      </>
    );
  }
  // Third figure (median life expectancy) comes from the group detail — fetched in parallel, cached by ISR.
  const details = await Promise.all(items.map((g) => safe(apiExplore.region(g.slug ?? g.id))));
  const detailById = new Map<string, RegionResponse | null>(items.map((g, i) => [g.id, details[i] ?? null]));

  const groups = KIND_ORDER.map((kind) => ({ kind, rows: items.filter((g) => (g.kind ?? 'custom') === kind) })).filter((s) => s.rows.length);
  const other = items.filter((g) => !KIND_ORDER.includes((g.kind ?? 'custom') as (typeof KIND_ORDER)[number]));
  if (other.length) groups.push({ kind: 'custom', rows: other });

  return (
    <>
      <PageHeader title={t('regions.title')} lede={t('regions.sub')} meta={`${grouped(items.length)} groups`} />
      {groups.map(({ kind, rows }, gi) => (
        <Section key={kind} id={kind} title={tOpt(`regions.kind.${kind}`, kind)} className={gi === 0 ? 'border-t-0' : undefined} tight={kind === 'world'}>
          <ul className="grid gap-x-8 sm:grid-cols-2 lg:grid-cols-3">
            {rows.map((g) => {
              const d = detailById.get(g.id);
              const le = d?.aggregates['life-expectancy'];
              const gdppc = d?.aggregates['gdp-per-capita'];
              return (
                <li key={g.id} className="border-t border-rule">
                  <Link href={routes.region(g.slug ?? g.id)} className="group flex min-h-[64px] flex-col justify-center py-3">
                    <span className="flex items-baseline justify-between gap-3">
                      <span className="text-sm font-semibold text-ink group-hover:text-accent">{g.name}</span>
                      <span className="tnum shrink-0 text-xs text-ink-3">{t('regions.members', { n: g.n_members ?? d?.n_members ?? 0 })}</span>
                    </span>
                    <dl className="tnum mt-1 grid grid-cols-3 gap-x-3 text-xs">
                      <div className="min-w-0">
                        <dt className="text-2xs leading-tight text-ink-3">
                          {t('regions.population')} <span className="text-ink-3/80">({t('regions.sum')})</span>
                        </dt>
                        <dd className="truncate text-ink">{isNum(g.population_latest) ? compact(g.population_latest) : t('common.na')}</dd>
                      </div>
                      <div className="min-w-0">
                        <dt className="text-2xs leading-tight text-ink-3">
                          {t('regions.gdp')} <span className="text-ink-3/80">({t('regions.sum')})</span>
                        </dt>
                        <dd className="truncate text-ink">{isNum(g.gdp_latest) ? `US$${compact(g.gdp_latest)}` : t('common.na')}</dd>
                      </div>
                      <div className="min-w-0">
                        <dt className="text-2xs leading-tight text-ink-3">
                          {le ? `${t('regions.lifeExpectancy')} (${t('regions.median')})` : gdppc ? `${t('common.gdpPerCapita')} (${t('regions.weighted_mean')})` : t('regions.lifeExpectancy')}
                        </dt>
                        <dd className="truncate text-ink">{le ? formatValue(le.value, le.indicator) : gdppc ? formatValue(gdppc.value, gdppc.indicator) : t('common.na')}</dd>
                      </div>
                    </dl>
                  </Link>
                </li>
              );
            })}
          </ul>
        </Section>
      ))}
    </>
  );
}