import type { Metadata } from 'next';
import Link from 'next/link';
import { t } from '@/i18n';
import { api, isNotBuilt, safe } from '@/lib/api';
import { apiAnalytics } from '@/lib/api-analytics';
import { apiExplore } from '@/lib/api-explore';
import { routes } from '@/lib/site';
import { HEADLINE_INDICATORS } from '@/lib/topics';
import { RankedBars, rankedRowFromCountry } from '@/components/charts/ranked-bars';
import type { IndicatorOption } from '@/components/controls/indicator-select';
import { NotBuiltState } from '@/components/data/empty-state';
import { Section } from '@/components/data/section';
import { SimilarityPlayground } from '@/components/explore/similarity-playground';
import { CompareTeaser } from '@/components/home/compare-teaser';
import { IndicatorList } from '@/components/home/featured-indicators';
import { Hero } from '@/components/home/hero';
import { HeroMap, type HeroCountry } from '@/components/home/hero-map';
import { LatestUpdates } from '@/components/home/latest-updates';
import { Movers } from '@/components/home/movers';
import { SnapshotStrip } from '@/components/home/snapshot-strip';
import { TopicsGrid } from '@/components/home/topics-grid';
import { TrajectoryTeaser } from '@/components/home/trajectory-teaser';
import { Transparency } from '@/components/home/transparency';
import { WorldPulse } from '@/components/home/world-pulse';
import { baseFeatures } from '@/components/indicators/map-geometry';

export const metadata: Metadata = { alternates: { canonical: '/' } };
export const revalidate = 900;

const DEFAULT_MAP = 'gdp-per-capita-ppp';
const MAP_CHIPS = ['gdp-per-capita-ppp', 'population', 'gdp', 'gdp-growth', 'inflation', 'life-expectancy', 'fertility-rate', 'internet-users', 'co2-per-capita', 'renewable-electricity-share', 'unemployment-rate', 'population-growth'];
/** The three curated lists kept on the home page (the rest lives on /rankings). */
const LIST_KEYS = ['largest_economies', 'highest_life_expectancy', 'energy_transition_leaders'] as const;

export default async function HomePage() {
  let home: Awaited<ReturnType<typeof api.home>> | null = null;
  let notBuilt = false;
  try {
    home = await api.home();
  } catch (e) {
    if (isNotBuilt(e)) notBuilt = true;
    else throw e;
  }
  if (notBuilt || !home) {
    return (
      <>
        <Hero />
        <NotBuiltState />
      </>
    );
  }
  const [countriesRes, frames, indicators, pulse, movers, scatter, updates, sources] = await Promise.all([
    safe(api.countries()),
    safe(apiAnalytics.indicatorFrames(DEFAULT_MAP)),
    safe(apiExplore.indicators({ with_data: true })),
    safe(apiAnalytics.pulse()),
    safe(apiAnalytics.movers({ window: 1, limit: 12 })),
    safe(apiAnalytics.scatter({ x: 'gdp-per-capita-ppp', y: 'life-expectancy', size: 'population' })),
    safe(apiAnalytics.updates()),
    safe(apiExplore.sources()),
  ]);
  const countries = countriesRes?.items ?? [];
  const { features, sphere } = countries.length ? baseFeatures(countries) : { features: [], sphere: '' };
  const heroCountries: HeroCountry[] = countries.map((c) => ({ id: c.id, slug: c.slug, name: c.name ?? c.id, flag: c.flag, region: c.region }));
  const options: IndicatorOption[] = (indicators?.items ?? [])
    .filter((i) => (i.n_countries ?? 0) >= 20 && i.frequency === 'A')
    .map((i) => ({ slug: i.slug, name: i.name ?? i.slug, short_name: i.short_name, topic: i.topic, unit: i.unit, featured: i.featured, first_year: i.first_year, last_year: i.last_year, n_countries: i.n_countries }));
  const chips = MAP_CHIPS.filter((s) => options.some((o) => o.slug === s));
  const s = home.snapshot;

  return (
    <>
      <Hero />

      {/* Global interactive hero map + time machine */}
      <section id="map" aria-labelledby="map-h" className="pb-8 md:pb-10">
        <h2 id="map-h" className="sr-only">
          {t('home.map.title')}
        </h2>
        {features.length ? <HeroMap geometry={features} sphere={sphere} initial={frames} options={options.length ? options : HEADLINE_INDICATORS.map((sl) => ({ slug: sl, name: sl }))} chips={chips.length ? chips : [DEFAULT_MAP]} countries={heroCountries} /> : null}
      </section>

      <SnapshotStrip s={s} />

      {pulse && pulse.items.length ? (
        <Section id="pulse" title={t('home.pulse.title')} subtitle={t('home.pulse.sub')} actions={<Link href={routes.changes()} className="text-accent hover:underline">{t('home.changes.all')} →</Link>}>
          <WorldPulse data={pulse} />
        </Section>
      ) : null}

      <Section id="movers" title={t('home.movers.title')} subtitle={t('home.movers.sub')}>
        <Movers initial={movers} limit={12} compact />
      </Section>

      <Section id="topics" title={t('home.topics.title')} subtitle={t('home.topics.sub')}>
        <TopicsGrid />
      </Section>

      <div className="grid gap-x-10 lg:grid-cols-2">
        <Section id="compare" title={t('home.compare.title')} subtitle={t('home.compare.sub')}>
          <CompareTeaser countries={countries} />
        </Section>
        <Section id="similar" title={t('home.similar.title')} subtitle={t('home.similar.sub')}>
          <SimilarityPlayground />
        </Section>
      </div>

      <Section id="rankings" title={t('nav.rankings')} subtitle={t('home.rankings.sub')} actions={<Link href={routes.rankings()} className="text-accent hover:underline">{t('common.seeAll')} →</Link>}>
        <div className="grid gap-x-10 gap-y-8 lg:grid-cols-3">
          {LIST_KEYS.map((key) => {
            const list = home.lists[key];
            if (!list || !list.rows?.length) return null;
            const latestYear = Math.max(0, ...list.rows.map((r) => r.year ?? 0));
            return (
              <div key={key} className="min-w-0">
                <div className="mb-2 flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5">
                  <h3 className="text-base font-semibold text-ink">{list.title}</h3>
                  <span className="text-xs text-ink-3">{list.description}</span>
                </div>
                {list.filter_note ? <p className="-mt-1 mb-2 text-xs text-ink-3">{list.filter_note}</p> : null}
                <RankedBars rows={list.rows.slice(0, 6).map((r) => rankedRowFromCountry(r.country, r.value, r.rank, null, r.year != null && latestYear - r.year >= 2 ? r.year : null))} spec={list.indicator} provenance={list.rows[0]?.provenance ?? null} />
                <Link href={routes.ranking(list.indicator.slug)} className="mt-2 inline-flex min-h-[36px] items-center text-sm text-accent hover:underline">
                  {t('common.seeFullRanking')} →
                </Link>
              </div>
            );
          })}
        </div>
      </Section>

      {scatter && scatter.points.length ? (
        <Section id="trajectory" title={t('home.trajectory.title')} subtitle={t('home.trajectory.sub')}>
          <TrajectoryTeaser data={scatter} />
        </Section>
      ) : null}

      <div className="grid gap-x-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
        <Section id="featured" title={t('home.featured.title')} subtitle={t('home.featured.sub')}>
          <IndicatorList items={home.trending.length ? home.trending : home.featured_indicators} limit={10} />
        </Section>
        {updates ? (
          <Section id="updated" title={t('home.updates.title')} subtitle={t('home.updates.sub')}>
            <LatestUpdates data={updates} />
          </Section>
        ) : (
          <Section id="updated" title={t('home.updated.title')} subtitle={t('home.updated.sub')}>
            <IndicatorList items={home.recently_updated} showUpdated limit={8} />
          </Section>
        )}
      </div>

      <Section id="transparency" title={t('home.transparency.title')} subtitle={t('home.transparency.sub')}>
        <Transparency sources={sources?.items ?? []} />
      </Section>
    </>
  );
}