'use client';
import { ChevronRight } from 'lucide-react';
import Link from 'next/link';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { COMPARE_TOPIC_TABS, compareQuery, type CompareState, type CompareTab } from '@/lib/compare-state';
import { displayValue, formatChange, isNum, ordinal } from '@/lib/format';
import { routes } from '@/lib/site';
import type { CompareSnapshotRow, CountryLite } from '@/lib/types-compare';
import type { MetricValue } from '@/lib/types';
import { seriesVar } from '@/components/charts/palette';
import { payloadFor } from '@/components/data/metric';
import { useProvenance } from '@/components/data/provenance-context';

/** Cell text for the current value mode: absolute value, world percentile (from rank / n) or 10-year change. */
export function cellText(m: MetricValue, mode: CompareState['mode']): { text: string; sub: string | null } {
  if (mode === 'percentile') {
    if (isNum(m.rank_world) && isNum(m.n_world) && m.n_world > 1) return { text: t('compare.cell.percentile', { p: ordinal(Math.round((1 - (m.rank_world - 1) / (m.n_world - 1)) * 100)) }), sub: `${m.rank_world}/${m.n_world}` };
    return { text: t('common.na'), sub: null };
  }
  if (mode === 'change') {
    const c = m.change_10y ? formatChange(m.change_10y.abs, m.change_10y.pct, m) : null;
    return c ? { text: m.change_10y?.formatted ?? c.text, sub: t('compare.cell.change10y') } : { text: t('common.na'), sub: null };
  }
  return { text: displayValue(m.value, m, m.formatted), sub: null };
}

/** Where a snapshot indicator's chart lives: its topic tab when it is one of the compare tabs, else the custom tab. */
export function chartHrefFor(slugs: string[], state: CompareState, indicator: { slug: string; topic: string | null }): string {
  const tab = (COMPARE_TOPIC_TABS as readonly string[]).includes(indicator.topic ?? '') ? (indicator.topic as CompareTab) : 'custom';
  const indicators = tab === 'custom' ? Array.from(new Set([indicator.slug, ...state.indicators])).slice(0, 6) : state.indicators;
  return `${routes.compare(...slugs)}${compareQuery({ ...state, tab, indicator: indicator.slug, indicators })}`;
}

/**
 * Compact latest-values table used inside a collapsed subtopic block (no charts): one row per indicator,
 * one cell per country (value · year, best highlighted). Indicator name → its chart (hero). Any cell →
 * provenance. Phones: value cells wrap under the indicator name.
 */
export function SnapshotCompact({ rows, countries, slugs, state }: { rows: CompareSnapshotRow[]; countries: CountryLite[]; slugs: string[]; state: CompareState }) {
  const { open } = useProvenance();
  const openCell = (m: MetricValue, c: CountryLite, name: string) => open(payloadFor(m, { id: c.id, slug: c.slug, name: c.name, flag: c.flag }, { name }));
  if (rows.length === 0) return null;
  const latestYear = Math.max(0, ...rows.flatMap((r) => Object.values(r.values).map((v) => v.year ?? 0)));
  return (
    <ul className="divide-y divide-rule border-b border-rule text-sm" aria-label={t('group.latestCol')}>
      {rows.map((r) => {
        const name = r.indicator.short_name ?? r.indicator.name ?? r.indicator.slug;
        return (
          <li key={r.indicator.slug} className="grid gap-x-4 gap-y-1 py-1.5 md:grid-cols-[minmax(0,14rem)_1fr] lg:grid-cols-[minmax(0,18rem)_1fr]">
            <Link href={chartHrefFor(slugs, state, r.indicator)} className="group/i inline-flex min-h-[32px] min-w-0 items-center gap-1 text-ink hover:text-accent" aria-label={t('compare.snapshot.openChart', { name })}>
              <span className="truncate">{r.indicator.name ?? name}</span>
              <ChevronRight size={12} aria-hidden className="shrink-0 text-ink-3 group-hover/i:text-accent" />
            </Link>
            <ul className="flex flex-wrap gap-x-4 gap-y-0.5">
              {countries.map((c, i) => {
                const m = r.values[c.id];
                const has = !!m && m.has_data && isNum(m.value);
                const best = r.best === c.id;
                const stale = has && m.year != null && latestYear - m.year >= 2;
                return (
                  <li key={c.id}>
                    <button type="button" disabled={!has} onClick={() => has && openCell(m, c, r.indicator.name ?? name)} className="inline-flex min-h-[32px] items-center gap-1.5 rounded-sm px-1 hover:bg-surface-2 disabled:hover:bg-transparent" aria-label={has ? `${c.name}: ${displayValue(m.value, m, m.formatted)} (${m.year ?? ''}). ${t('common.openProvenance')}` : `${c.name}: ${t('common.noData')}`}>
                      <span aria-hidden className="h-2 w-2 shrink-0 rounded-full" style={{ background: seriesVar(i) }} />
                      <span aria-hidden>{c.flag}</span>
                      <span className={cn('tnum', has ? (best ? 'font-semibold text-ink' : 'text-ink') : 'text-ink-3')}>{has ? displayValue(m.value, m, m.formatted) : t('common.noData')}</span>
                      {has && m.year != null ? <span className={cn('tnum text-2xs', stale ? 'rounded-xs bg-surface-2 px-1 text-ink-2' : 'text-ink-3')}>{m.year}</span> : null}
                    </button>
                  </li>
                );
              })}
            </ul>
          </li>
        );
      })}
    </ul>
  );
}

/**
 * Snapshot comparison: countries as columns on md+ (value · year · rank chip per cell, best value highlighted);
 * on phones each indicator is a block with one horizontal mini bar per country — no horizontal overflow.
 * Any cell → provenance sheet; the indicator name → that indicator's chart.
 */
export function SnapshotTable({ rows, countries, slugs, state }: { rows: CompareSnapshotRow[]; countries: CountryLite[]; slugs: string[]; state: CompareState }) {
  const { open } = useProvenance();
  const visible = rows.filter((r) => countries.some((c) => r.values[c.id]?.has_data));
  if (visible.length === 0) return <p className="py-6 text-sm text-ink-3">{t('compare.snapshot.empty')}</p>;

  const openCell = (m: MetricValue, c: CountryLite, name: string) => open(payloadFor(m, { id: c.id, slug: c.slug, name: c.name, flag: c.flag }, { name }));

  return (
    <div className="min-w-0">
      {/* Desktop table */}
      <table className="hidden w-full border-collapse text-sm md:table">
        <caption className="sr-only">{t('compare.snapshot.title')}</caption>
        <thead>
          <tr className="border-b border-rule text-left text-xs text-ink-3">
            <th scope="col" className="w-[30%] py-2 pr-3 font-medium">
              {t('compare.snapshot.indicatorCol')}
            </th>
            {countries.map((c, i) => (
              <th key={c.id} scope="col" className="py-2 pr-3 text-right font-medium">
                <Link href={routes.country(c.slug)} className="link-quiet inline-flex max-w-full items-center gap-1.5">
                  <span aria-hidden className="h-2 w-2 shrink-0 rounded-full" style={{ background: seriesVar(i) }} />
                  <span aria-hidden>{c.flag}</span>
                  <span className="truncate text-ink">{c.name}</span>
                </Link>
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="divide-y divide-rule">
          {visible.map((r) => {
            const name = r.indicator.short_name ?? r.indicator.name ?? r.indicator.slug;
            const hib = r.indicator.higher_is_better;
            return (
              <tr key={r.indicator.slug} className="hover:bg-surface-2/50">
                <th scope="row" className="py-2 pr-3 text-left align-top font-normal">
                  <Link href={chartHrefFor(slugs, state, r.indicator)} className="group/i inline-flex min-h-[32px] items-center gap-1 text-sm font-medium text-ink hover:text-accent" aria-label={t('compare.snapshot.openChart', { name })}>
                    <span>{r.indicator.name ?? name}</span>
                    <ChevronRight size={13} aria-hidden className="shrink-0 text-ink-3 group-hover/i:text-accent" />
                  </Link>
                  <div className="text-2xs text-ink-3">
                    {r.indicator.unit}
                    {hib != null ? <span> · {hib ? t('compare.snapshot.hib.higher') : t('compare.snapshot.hib.lower')}</span> : null}
                  </div>
                </th>
                {countries.map((c) => {
                  const m = r.values[c.id];
                  const best = r.best === c.id;
                  if (!m || !m.has_data)
                    return (
                      <td key={c.id} className="py-2 pr-3 text-right align-top text-ink-3">
                        {t('common.noData')}
                      </td>
                    );
                  return (
                    <td key={c.id} className={cn('py-1 pr-1 text-right align-top', best && 'bg-accent-soft/60')}>
                      <button type="button" onClick={() => openCell(m, c, r.indicator.name ?? name)} className="group/c -my-0 flex min-h-[44px] w-full flex-col items-end rounded-sm px-2 py-1 text-right hover:bg-surface-2" aria-label={t('common.openProvenance')}>
                        <span className={cn('tnum text-base leading-tight', best ? 'font-semibold text-ink' : 'text-ink')}>{cellText(m, state.mode).text}</span>
                        <span className="tnum mt-0.5 flex items-center gap-1.5 text-2xs text-ink-3">
                          <span>{cellText(m, state.mode).sub ?? m.year ?? ''}</span>
                          {isNum(m.rank_world) && isNum(m.n_world) ? (
                            <span className={cn('rounded-xs px-1 py-px', best ? 'bg-accent text-accent-ink' : 'bg-surface-2 text-ink-2')} title={t('compare.snapshot.rankOf', { rank: ordinal(m.rank_world), n: m.n_world })}>
                              {t('compare.snapshot.rank', { rank: m.rank_world })}
                            </span>
                          ) : null}
                        </span>
                      </button>
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>

      {/* Phone: one block per indicator, one bar per country */}
      <ul className="divide-y divide-rule md:hidden">
        {visible.map((r) => {
          const name = r.indicator.short_name ?? r.indicator.name ?? r.indicator.slug;
          const vals = countries.map((c) => r.values[c.id]?.value).filter(isNum);
          const max = vals.length ? Math.max(...vals.map(Math.abs)) : 0;
          return (
            <li key={r.indicator.slug} className="py-3">
              <Link href={chartHrefFor(slugs, state, r.indicator)} className="group/i flex min-h-[44px] items-center justify-between gap-2" aria-label={t('compare.snapshot.openChart', { name })}>
                <span className="min-w-0">
                  <span className="block text-sm font-medium text-ink group-hover/i:text-accent">{r.indicator.name ?? name}</span>
                  <span className="block truncate text-2xs text-ink-3">{r.indicator.unit}</span>
                </span>
                <span className="inline-flex shrink-0 items-center gap-0.5 text-2xs text-accent">
                  {t('compare.snapshot.showChart')}
                  <ChevronRight size={12} aria-hidden />
                </span>
              </Link>
              <ol className="mt-1 space-y-0.5">
                {countries.map((c, i) => {
                  const m = r.values[c.id];
                  const best = r.best === c.id;
                  const has = !!m && m.has_data && isNum(m.value);
                  const pct = has && max > 0 ? Math.max(1.5, (Math.abs(m.value!) / max) * 100) : 0;
                  return (
                    <li key={c.id}>
                      <button
                        type="button"
                        disabled={!has}
                        onClick={() => has && openCell(m, c, r.indicator.name ?? name)}
                        className="grid min-h-[44px] w-full grid-cols-[1.5rem_minmax(0,1fr)_auto] items-center gap-x-2 rounded-sm text-left hover:bg-surface-2 disabled:hover:bg-transparent"
                        aria-label={has ? `${c.name}: ${displayValue(m.value, m, m.formatted)} (${m.year ?? ''}). ${t('common.openProvenance')}` : `${c.name}: ${t('common.noData')}`}
                      >
                        <span aria-hidden className="text-base leading-none">
                          {c.flag}
                        </span>
                        <span className="min-w-0">
                          <span className="h-2 w-full overflow-hidden rounded-xs bg-surface-2" aria-hidden style={{ display: 'block' }}>
                            <span className="block h-full rounded-r-xs" style={{ width: `${pct}%`, background: seriesVar(i), opacity: best ? 1 : 0.8 }} />
                          </span>
                        </span>
                        <span className="tnum flex items-baseline gap-1.5 text-right">
                          <span className={cn('text-sm', best ? 'font-semibold text-ink' : 'text-ink')}>{has ? cellText(m, state.mode).text : t('common.noData')}</span>
                          <span className="text-2xs text-ink-3">{has ? cellText(m, state.mode).sub ?? m.year : ''}</span>
                        </span>
                      </button>
                    </li>
                  );
                })}
              </ol>
            </li>
          );
        })}
      </ul>
    </div>
  );
}