import Link from 'next/link';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { formatValue, isNum, ordinal } from '@/lib/format';
import { routes } from '@/lib/site';
import type { FormatSpec as Spec, Provenance } from '@/lib/types';
import { MARK } from './palette';

export interface RankedBarRow {
  id: string;
  label: string;
  flag?: string | null;
  href?: string | null;
  value: number | null;
  rank?: number | null;
  /** Secondary text shown right of the value (e.g. change); hidden on phones. */
  hint?: string | null;
  /** Observation year — pass it only when it is older than the list's reference year (freshness honesty); always visible. */
  year?: number | null;
}

/**
 * Horizontal ranked bars rendered as HTML (server component, fully responsive, no SVG text scaling).
 * One series → one colour (slot 1); `highlightId` marks the country of interest with the accent and bold label.
 * Bars ≤ 24 px thick, 4 px rounded data-end, square at the baseline; value labelled at the tip (text tokens).
 */
export function RankedBars({
  rows,
  spec,
  highlightId,
  showRank = true,
  className,
  provenance,
  ariaLabel,
  linkRows = true,
}: {
  rows: RankedBarRow[];
  spec: Spec;
  highlightId?: string | null;
  showRank?: boolean;
  className?: string;
  provenance?: Provenance | null;
  ariaLabel?: string;
  linkRows?: boolean;
}) {
  const values = rows.map((r) => r.value).filter(isNum);
  const max = values.length ? Math.max(...values.map(Math.abs)) : 0;
  const top = rows[0];
  const summary = top ? t('chart.summary.bars', { top: top.label, value: formatValue(top.value, spec), n: rows.length }) : t('chart.noData');
  if (rows.length === 0) return <p className="text-sm text-ink-3">{t('chart.noData')}</p>;
  return (
    <div className={cn('min-w-0', className)} role="img" aria-label={ariaLabel ?? summary}>
      <ol className="divide-y divide-rule">
        {rows.map((r, i) => {
          const pct = isNum(r.value) && max > 0 ? Math.max(0, (Math.abs(r.value) / max) * 100) : 0;
          const hl = highlightId && r.id === highlightId;
          // Names wrap on phones (never clipped mid-word); they truncate only in the fixed 13 rem column on sm+.
          const label = (
            <span className={cn('flex min-w-0 items-center gap-1.5 text-sm leading-snug', hl ? 'font-semibold text-ink' : 'text-ink')}>
              {r.flag ? (
                <span aria-hidden className="text-base leading-none">
                  {r.flag}
                </span>
              ) : null}
              <span className="min-w-0 sm:truncate">{r.label}</span>
            </span>
          );
          // Phones: [rank + name] [value] on line 1, bar on line 2. sm+: [rank + name] [bar] [value hint] on one line.
          return (
            <li key={r.id} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 py-1.5 sm:grid-cols-[minmax(0,13rem)_1fr_auto] sm:gap-y-0">
              <div className="flex min-w-0 items-center gap-2">
                {showRank ? <span className="tnum w-6 shrink-0 text-right text-xs text-ink-3">{r.rank ?? i + 1}</span> : null}
                {linkRows && r.href ? (
                  <Link href={r.href} className="link-quiet min-w-0 sm:truncate">
                    {label}
                  </Link>
                ) : (
                  label
                )}
              </div>
              <div className="col-span-2 row-start-2 h-3 min-w-0 sm:col-span-1 sm:col-start-2 sm:row-start-1 sm:h-4" style={{ maxHeight: MARK.barMax }}>
                <div
                  className={cn('h-full rounded-r-sm', hl ? 'bg-accent' : 'bg-series-1')}
                  style={{ width: `${pct}%`, minWidth: isNum(r.value) ? 2 : 0, borderRadius: `0 ${MARK.barRadius}px ${MARK.barRadius}px 0`, opacity: hl ? 1 : 0.85 }}
                />
              </div>
              <div className="col-start-2 row-start-1 flex shrink-0 items-center justify-end gap-2 sm:col-start-3">
                <span className={cn('tnum whitespace-nowrap text-right text-sm', hl ? 'font-semibold text-ink' : 'text-ink')} style={{ minWidth: '4.5rem' }}>
                  {formatValue(r.value, spec)}
                  {r.year != null ? <span className="tnum ml-1 rounded-xs bg-surface-2 px-1 text-2xs font-normal text-ink-2">{r.year}</span> : null}
                </span>
                {r.hint ? <span className="tnum hidden shrink-0 text-xs text-ink-3 sm:inline">{r.hint}</span> : null}
              </div>
            </li>
          );
        })}
      </ol>
      {provenance ? (
        <p className="mt-1.5 text-2xs text-ink-2">
          <span className="text-ink-3">{t('common.source')}: </span>
          {[provenance.source_name, provenance.dataset].filter(Boolean).join(' — ')} · {provenance.series_code}
        </p>
      ) : null}
    </div>
  );
}

/** Convenience: a country row for RankedBars from a ranking row. */
export function rankedRowFromCountry(c: { id: string; slug: string | null; name: string | null; flag: string | null }, value: number | null, rank?: number | null, hint?: string | null, year?: number | null): RankedBarRow {
  return { id: c.id, label: c.name ?? c.id, flag: c.flag, href: c.slug ? routes.country(c.slug) : null, value, rank, hint, year };
}

/** Year to display for a row (freshness honesty): only when ≥ 2 years older than the reference year. */
export function staleYear(year: number | null | undefined, reference: number | null | undefined): number | null {
  return year != null && reference != null && reference - year >= 2 ? year : null;
}

export { ordinal };