import { Download, Scale } from 'lucide-react';
import Link from 'next/link';
import { t } from '@/i18n';
import { compact, displayValue, formatDate, formatPct, grouped, isNum } from '@/lib/format';
import { routes } from '@/lib/site';
import type { CountryResponse } from '@/lib/types';
import type { CountryQualityResponse } from '@/lib/types-analytics';
import { FreshnessBadge } from '@/components/data/freshness-badge';
import { QualityBadges } from '@/components/data/quality-badge';
import { CopyApiButton } from './copy-api-button';
import { MiniMap } from './mini-map';
import { ShareButton } from './share-button';

/**
 * Country hero 2.0: flag + display name + official name, chips (region · income · capital), a fact strip
 * (population, GDP, GDP/capita, area, currency), locator mini map, bordering countries, freshness + coverage
 * badges, actions Compare / Download / Share / API. Editorial: one rule below, no card.
 */
export function CountryHeader({ data, quality }: { data: CountryResponse; quality: CountryQualityResponse | null }) {
  const c = data.country;
  const name = c.name ?? c.id;
  const pick = (id: string) => data.headline.find((m) => m.indicator === id && m.has_data) ?? null;
  const pop = pick('population');
  const gdp = pick('gdp');
  const gpc = pick('gdp-per-capita');
  const facts: Array<{ k: string; v: string; sub?: string }> = [];
  if (pop && isNum(pop.value)) facts.push({ k: t('country.population'), v: displayValue(pop.value, pop, pop.formatted), sub: pop.year ? String(pop.year) : undefined });
  if (gdp && isNum(gdp.value)) facts.push({ k: t('common.gdp'), v: displayValue(gdp.value, gdp, gdp.formatted), sub: gdp.year ? String(gdp.year) : undefined });
  if (gpc && isNum(gpc.value)) facts.push({ k: t('common.gdpPerCapita'), v: displayValue(gpc.value, gpc, gpc.formatted), sub: gpc.year ? String(gpc.year) : undefined });
  if (isNum(c.area_km2)) facts.push({ k: t('country.area'), v: `${c.area_km2 >= 1e6 ? compact(c.area_km2) : grouped(c.area_km2)} km²` });
  if (c.currency_code) facts.push({ k: t('country.currency'), v: c.currency_code, sub: c.currency_name ?? undefined });
  const chips = [c.region_name, c.income_name, c.capital ? `${t('country.capital')} ${c.capital}` : null].filter(Boolean) as string[];
  const badges = quality ? deriveCountryBadges(quality) : null;

  return (
    <header className="border-b border-rule pb-5 pt-6 md:pb-6 md:pt-8">
      <div className="grid gap-x-8 gap-y-5 md:grid-cols-[minmax(0,1fr)_16rem] lg:grid-cols-[minmax(0,1fr)_20rem]">
        <div className="min-w-0">
          <div className="flex items-start gap-3 md:gap-4">
            <span aria-hidden className="text-4xl leading-none md:text-6xl">
              {c.flag}
            </span>
            <div className="min-w-0">
              <h1 className="display text-3xl leading-none text-ink md:text-5xl">{name}</h1>
              {c.official_name && c.official_name !== name ? <p className="mt-1.5 text-sm text-ink-2">{c.official_name}</p> : null}
              <ul className="mt-2 flex flex-wrap gap-1.5 text-xs">
                {chips.map((ch) => (
                  <li key={ch} className="badge border-rule text-ink-2">
                    {ch}
                  </li>
                ))}
                {c.landlocked ? <li className="badge border-rule text-ink-3">{t('country.landlocked')}</li> : null}
                {c.status === 'territory' ? <li className="badge border-rule text-ink-3">{t('countries.territory')}</li> : null}
              </ul>
            </div>
          </div>

          <dl className="ticker mt-5 gap-0 border-y border-rule sm:grid sm:grid-cols-5 sm:divide-x sm:divide-rule">
            {facts.map((f, i) => (
              <div key={f.k} className={`min-w-[8rem] py-3 pr-5 sm:min-w-0 sm:pr-4 ${i > 0 ? 'border-l border-rule pl-4 sm:border-l-0' : ''}`}>
                <dt className="eyebrow">{f.k}</dt>
                <dd className="pnum mt-1 text-xl font-semibold leading-none text-ink md:text-2xl">{f.v}</dd>
                {f.sub ? <dd className="tnum mt-1 truncate text-xs text-ink-3">{f.sub}</dd> : null}
              </div>
            ))}
          </dl>

          <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-ink-3">
            {data.freshness.retrieved_at ? <span className="tnum">{t('country.refreshed', { date: formatDate(data.freshness.built_at ?? data.freshness.retrieved_at) })}</span> : null}
            <FreshnessBadge retrievedAt={data.freshness.retrieved_at} now={Date.parse(data.meta.generated_at) || Date.now()} />
            {quality ? <span className="tnum">{t('country.coverage', { pct: formatPct(quality.summary.coverage_pct), n: grouped(quality.summary.n_with_data) })}</span> : data.coverage ? <span className="tnum">{t('country.coverage', { pct: formatPct(data.coverage.coverage_pct), n: grouped(data.coverage.n_indicators ?? 0) })}</span> : null}
            {quality ? <span className="tnum">{t('country.freshSplit', { fresh: quality.summary.n_fresh, stale: quality.summary.n_stale })}</span> : null}
            <QualityBadges badges={badges} max={3} />
          </div>

          <div className="mt-4 flex flex-wrap gap-2">
            <Link href={routes.compare(c.slug ?? c.id)} className="inline-flex h-10 items-center justify-center gap-2 rounded-sm bg-ink px-4 text-sm font-medium text-paper hover:bg-accent hover:text-accent-ink" aria-label={t('country.compareWith', { name })}>
              <Scale size={15} aria-hidden /> {t('country.compare')}
            </Link>
            <a href={routes.countryDownload(c.id)} className="inline-flex h-10 items-center justify-center gap-2 rounded-sm border border-rule px-4 text-sm text-ink hover:bg-surface-2" title={t('country.downloadHint')}>
              <Download size={15} aria-hidden /> {t('country.download')}
            </a>
            <ShareButton title={t('country.title', { name })} />
            <CopyApiButton path={`/api/v1/countries/${c.id}`} />
          </div>
        </div>

        <div className="min-w-0">
          <MiniMap iso3={c.id} neighbours={c.borders ?? []} latitude={c.latitude} longitude={c.longitude} name={name} className="rounded-sm" />
          {data.neighbours.length ? (
            <div className="mt-2 text-xs">
              <span className="text-ink-3">{t('country.borders')}: </span>
              <ul className="mt-1 flex flex-wrap gap-1">
                {data.neighbours.map((n) => (
                  <li key={n.id}>
                    <Link href={routes.country(n.slug ?? n.id)} className="badge min-h-[28px] border-rule text-ink hover:border-accent hover:text-accent">
                      <span aria-hidden>{n.flag}</span> {n.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ) : (
            <p className="mt-2 text-xs text-ink-3">{c.landlocked === false ? t('country.noLandBorders') : ''}</p>
          )}
        </div>
      </div>
    </header>
  );
}

/** Coarse badges for the whole country from the quality summary. */
function deriveCountryBadges(q: CountryQualityResponse): Array<'fresh' | 'stale' | 'limited-coverage' | 'sparse' | 'flagged'> {
  const out: Array<'fresh' | 'stale' | 'limited-coverage' | 'sparse' | 'flagged'> = [];
  const s = q.summary;
  if (s.n_with_data && s.n_fresh / s.n_with_data >= 0.6) out.push('fresh');
  if (s.n_with_data && s.n_stale / s.n_with_data >= 0.4) out.push('stale');
  if ((s.coverage_pct ?? 100) < 50) out.push('limited-coverage');
  if (s.n_with_data && s.n_sparse / s.n_with_data >= 0.3) out.push('sparse');
  if (s.n_with_data && s.n_flagged / s.n_with_data >= 0.3) out.push('flagged');
  return out;
}