import { t } from '@/i18n';
import { compact, fixed, formatDate, grouped, isNum } from '@/lib/format';
import type { GlobalSnapshot } from '@/lib/types';

/**
 * Global snapshot as an information ticker: seven figures on one rule. Horizontal snap-scroll strip on phones
 * (`ticker`), one row with hairline dividers from lg. Uppercase eyebrow labels, large tabular figures, year/sub.
 */
export function SnapshotStrip({ s }: { s: GlobalSnapshot }) {
  const cells: Array<{ label: string; value: string; sub?: string }> = [
    { label: t('home.snapshot.population'), value: s.world_population_formatted ?? (isNum(s.world_population) ? compact(s.world_population) : t('common.na')), sub: s.world_population_year ? String(s.world_population_year) : undefined },
    { label: t('home.snapshot.gdp'), value: s.world_gdp_formatted ?? (isNum(s.world_gdp) ? `US$${compact(s.world_gdp)}` : t('common.na')), sub: s.world_gdp_year ? String(s.world_gdp_year) : undefined },
    { label: t('home.snapshot.lifeExpectancy'), value: isNum(s.median_life_expectancy) ? `${fixed(s.median_life_expectancy, 1)} yrs` : t('common.na'), sub: s.median_life_expectancy_year ? String(s.median_life_expectancy_year) : undefined },
    { label: t('home.snapshot.countries'), value: grouped(s.n_countries + (s.n_territories ?? 0)), sub: t('home.snapshot.countriesSub') },
    { label: t('home.snapshot.indicators'), value: grouped(s.n_indicators), sub: s.n_indicators_with_data ? t('home.snapshot.withData', { n: grouped(s.n_indicators_with_data) }) : undefined },
    { label: t('home.snapshot.observations'), value: compact(s.n_observations), sub: t('home.snapshot.sources', { n: s.n_sources }) },
    { label: t('home.snapshot.updated'), value: s.built_at ? formatDate(s.built_at) : t('common.na'), sub: s.run_id ? t('site.footer.build', { run: s.run_id }) : undefined },
  ];
  return (
    <section aria-label={t('home.snapshot.title')} className="border-y border-rule">
      <dl className="ticker gap-0 lg:grid lg:grid-cols-7 lg:divide-x lg:divide-rule">
        {cells.map((c, i) => (
          <div key={c.label} className={`min-w-[9.5rem] py-3.5 pr-6 lg:min-w-0 lg:pr-4 ${i > 0 ? 'lg:pl-4' : ''} ${i === 0 ? '' : 'border-l border-rule pl-4 lg:border-l-0'}`}>
            <dt className="eyebrow">{c.label}</dt>
            <dd className="pnum mt-1 text-xl font-semibold leading-none text-ink md:text-2xl">{c.value}</dd>
            {c.sub ? <dd className="tnum mt-1 truncate text-xs text-ink-3">{c.sub}</dd> : null}
          </div>
        ))}
      </dl>
    </section>
  );
}