'use client';
import { ChevronRight } from 'lucide-react';
import Link from 'next/link';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { displayValue, formatPeriod, ordinal } from '@/lib/format';
import type { MetricValue } from '@/lib/types';
import { pointsFromSpark } from '@/components/charts/scales';
import { Sparkline } from '@/components/charts/sparkline';
import { ChangeChip } from './change-chip';
import { RankBadge } from './rank-badge';
import { useProvenance, type ProvenancePayload } from './provenance-context';

export interface MetricCountry {
  id: string;
  slug: string | null;
  name: string;
  flag?: string | null;
}

/** Build the provenance-sheet payload for a MetricValue (also used by topic rows and chart source lines). */
export function payloadFor(m: MetricValue, country?: MetricCountry | null, extra?: { name?: string | null; methodology?: string | null; description?: string | null }): ProvenancePayload {
  return {
    indicator: { slug: m.indicator, name: extra?.name ?? m.indicator_name ?? m.indicator, format: m.format, unit: m.unit, unit_short: m.unit_short, frequency: m.frequency, higher_is_better: m.higher_is_better, methodology: extra?.methodology ?? null, description: extra?.description ?? null },
    value: m.has_data ? { value: m.value, formatted: m.formatted, period: m.period, year: m.year, unit: m.unit, is_estimate: m.is_estimate, is_forecast: m.is_forecast, status: m.status, provenance: m.provenance } : null,
    country: country ?? null,
  };
}

/**
 * Percentile of the latest value within the country's own history (share of earlier points strictly below it).
 * Null with fewer than 5 earlier points. 100 = highest ever, 0 = lowest ever.
 */
export function ownHistoryPercentile(m: MetricValue): number | null {
  const pts = m.sparkline.filter((p) => typeof p[1] === 'number') as Array<[number, number]>;
  if (pts.length < 6 || m.value == null) return null;
  const earlier = pts.slice(0, -1).map((p) => p[1]);
  const below = earlier.filter((v) => v < m.value!).length;
  return Math.round((below / earlier.length) * 100);
}

/**
 * Headline metric module: label (link) + sparkline, big value, period, change chip, ranks (world · region),
 * percentile of own history. Click on the value → provenance sheet. 1 px separators, no card. Heights are
 * reserved so the grid does not shift while data loads.
 */
export function Metric({ metric, country, regionName, href, className, size = 'md', showOwnPercentile = true }: { metric: MetricValue; country?: MetricCountry | null; regionName?: string | null; href?: string | null; className?: string; size?: 'sm' | 'md' | 'lg'; showOwnPercentile?: boolean }) {
  const { open } = useProvenance();
  const m = metric;
  const hasValue = m.has_data && m.value != null;
  const dir = m.change?.abs == null ? null : m.change.abs > 0 ? 'up' : m.change.abs < 0 ? 'down' : 'flat';
  const points = pointsFromSpark(m.sparkline);
  const pct = showOwnPercentile && hasValue ? ownHistoryPercentile(m) : null;
  const firstYear = points[0]?.year;
  return (
    <div className={cn('flex min-w-0 flex-col gap-1 border-t border-rule py-3', className)} id={m.indicator}>
      <div className="flex items-start justify-between gap-2">
        {href ? (
          <Link href={href} className="group/l -my-1 flex min-h-[44px] min-w-0 items-center gap-0.5 py-1 text-xs font-medium leading-snug text-ink-2 hover:text-accent md:min-h-[32px]" aria-label={t('metric.open', { name: m.indicator_name ?? m.indicator })}>
            <span className="line-clamp-2">{m.indicator_name ?? m.indicator}</span>
            <ChevronRight size={13} aria-hidden className="shrink-0 text-ink-3 group-hover/l:text-accent" />
          </Link>
        ) : (
          <div className="line-clamp-2 min-w-0 py-1 text-xs font-medium leading-snug text-ink-2">{m.indicator_name ?? m.indicator}</div>
        )}
        {points.length >= 2 ? <Sparkline points={points} width={72} height={22} direction={dir} className="mt-0.5 shrink-0 opacity-90" ariaLabel={firstYear ? t('metric.sparkAria', { name: m.indicator_name ?? m.indicator, y0: firstYear, y1: m.year ?? '' }) : undefined} /> : <span className="inline-block h-[22px] w-[72px] shrink-0" aria-hidden />}
      </div>
      <button type="button" onClick={() => open(payloadFor(m, country))} className="group -mx-1 flex min-h-[44px] flex-col items-start rounded-sm px-1 text-left hover:bg-surface-2 focus-visible:bg-surface-2" aria-label={t('common.openProvenance')}>
        <span className={cn('pnum font-semibold leading-none text-ink', size === 'lg' ? 'text-3xl md:text-4xl' : size === 'sm' ? 'text-xl' : 'text-2xl md:text-[1.75rem]')}>
          {hasValue ? displayValue(m.value, m, m.formatted) : <span className="text-ink-3">{t('common.noData')}</span>}
        </span>
        <span className="mt-1 flex min-h-[1.1rem] flex-wrap items-baseline gap-x-2 text-xs text-ink-3">
          {hasValue ? <span className="tnum">{formatPeriod(m.period, m.frequency)}</span> : null}
          {m.is_estimate ? <span>{t('common.estimate')}</span> : null}
          <ChangeChip change={m.change} spec={m} prevPeriod={m.prev?.period} />
        </span>
      </button>
      <div className="min-h-[1.1rem] min-w-0 truncate">
        <RankBadge rank={m} regionName={regionName} />
      </div>
      {pct != null && firstYear ? (
        <div className="tnum min-h-[1.1rem] flex items-center gap-1.5 text-2xs text-ink-3" title={t('metric.ownPercentileHint', { y0: firstYear })}>
          <span className="inline-flex h-1 w-12 overflow-hidden rounded-xs bg-surface-2" aria-hidden>
            <span className="h-full bg-ink-3" style={{ width: `${pct}%` }} />
          </span>
          {t('metric.ownPercentile', { p: ordinal(pct), y0: firstYear })}
        </div>
      ) : null}
    </div>
  );
}

/** Responsive editorial grid for Metrics: swipeable strip on phones (2 visible), 3–4 columns on desktop. */
export function MetricGrid({ children, className, cols = 4 }: { children: React.ReactNode; className?: string; cols?: 3 | 4 }) {
  return <div className={cn('grid gap-x-6 min-[361px]:grid-cols-2 md:grid-cols-3', cols === 4 && 'xl:grid-cols-4', className)}>{children}</div>;
}