'use client';
import Link from 'next/link';
import { t } from '@/i18n';
import { formatValue, grouped, ordinal } from '@/lib/format';
import { routes } from '@/lib/site';
import type { FormatSpec } from '@/lib/types';
import type { DistributionResponse } from '@/lib/types-analytics';
import { Histogram, type HistogramMarker } from '@/components/charts/histogram';

/**
 * Distribution of an indicator across countries: histogram with markers (world median, the highlighted
 * country, its region median) and a table of medians by region and income group.
 */
export function DistributionPanel({ data, spec }: { data: DistributionResponse; spec: FormatSpec }) {
  const markers: HistogramMarker[] = [];
  if (data.stats.median != null) markers.push({ id: 'world', label: t('indicator.dist.worldMedian'), value: data.stats.median, tone: 'ink' });
  const h = data.highlight;
  if (h && h.value != null) markers.push({ id: 'hl', label: h.country.name ?? h.country.id, value: h.value, tone: 'accent' });
  if (h && h.region_median != null && h.region) markers.push({ id: 'region', label: t('indicator.dist.regionMedian', { region: h.region.name ?? '' }), value: h.region_median, tone: 'muted' });
  return (
    <div className="grid gap-x-10 gap-y-6 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
      <div className="min-w-0">
        <Histogram edges={data.histogram.edges} counts={data.histogram.counts} log={data.histogram.log} markers={markers} spec={spec} height={240} defaultWidth={720} unitLabel={spec.unit ?? undefined} title={t('indicator.dist.title', { year: data.year_used ?? '' })} subtitle={t('indicator.dist.sub', { n: grouped(data.n), p10: formatValue(data.stats.p10, spec), p90: formatValue(data.stats.p90, spec) })} />
        {h && h.value != null ? (
          <p className="mt-2 text-sm text-ink-2">
            <Link href={routes.country(h.country.slug ?? h.country.id)} className="link-quiet font-medium text-ink">
              <span aria-hidden>{h.country.flag} </span>
              {h.country.name}
            </Link>{' '}
            {t('indicator.dist.highlight', { value: formatValue(h.value, spec), pct: h.percentile != null ? ordinal(Math.round(h.percentile)) : t('common.na'), rank: h.rank ?? '', n: h.n ?? '' })}
          </p>
        ) : null}
      </div>
      <div className="min-w-0">
        <table className="w-full border-collapse text-sm">
          <caption className="sr-only">{t('indicator.dist.medians')}</caption>
          <thead>
            <tr className="border-b border-rule text-left text-2xs uppercase tracking-wide text-ink-3">
              <th scope="col" className="py-1.5 pr-3 font-medium">
                {t('indicator.dist.group')}
              </th>
              <th scope="col" className="py-1.5 pr-3 text-right font-medium">
                {t('indicator.trend.median')}
              </th>
              <th scope="col" className="py-1.5 text-right font-medium">
                {t('indicator.dist.n')}
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-rule">
            <tr className="font-medium">
              <td className="py-1.5 pr-3 text-ink">{t('common.world')}</td>
              <td className="tnum py-1.5 pr-3 text-right text-ink">{formatValue(data.stats.median, spec)}</td>
              <td className="tnum py-1.5 text-right text-ink-2">{grouped(data.n)}</td>
            </tr>
            {data.by_region.map((r) => (
              <tr key={r.group.id}>
                <td className="py-1.5 pr-3 text-ink-2">
                  <Link href={routes.region(r.group.slug ?? r.group.id)} className="link-quiet">
                    {r.group.name}
                  </Link>
                </td>
                <td className="tnum py-1.5 pr-3 text-right text-ink">{formatValue(r.median, spec)}</td>
                <td className="tnum py-1.5 text-right text-ink-3">{grouped(r.n)}</td>
              </tr>
            ))}
            {data.by_income.map((r) => (
              <tr key={r.group.id}>
                <td className="py-1.5 pr-3 text-ink-2">
                  <Link href={routes.region(r.group.slug ?? r.group.id)} className="link-quiet">
                    {r.group.name}
                  </Link>
                </td>
                <td className="tnum py-1.5 pr-3 text-right text-ink">{formatValue(r.median, spec)}</td>
                <td className="tnum py-1.5 text-right text-ink-3">{grouped(r.n)}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <dl className="tnum mt-3 grid grid-cols-4 gap-x-3 text-xs">
          {(
            [
              ['p10', data.stats.p10],
              ['p25', data.stats.p25],
              ['p75', data.stats.p75],
              ['p90', data.stats.p90],
            ] as Array<[string, number | null]>
          ).map(([k, v]) => (
            <div key={k}>
              <dt className="text-2xs uppercase tracking-wide text-ink-3">{k}</dt>
              <dd className="text-ink">{formatValue(v, spec)}</dd>
            </div>
          ))}
        </dl>
      </div>
    </div>
  );
}