import Link from 'next/link';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { fixed, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import { topicById } from '@/lib/topics';
import type { RelatedResponse } from '@/lib/types-analytics';

/** Statistically related indicators: ρ, r, N, year, direction; each row opens the scatter of the pair. */
export function RelatedTable({ data, slug }: { data: RelatedResponse; slug: string }) {
  if (!data.items.length) return <p className="text-sm text-ink-3">{t('indicator.related.noneStat')}</p>;
  return (
    <div className="min-w-0">
      <ul className="divide-y divide-rule border-y border-rule">
        {data.items.map((it) => {
          const rho = it.spearman ?? it.pearson ?? 0;
          const w = Math.min(100, Math.abs(rho) * 100);
          return (
            <li key={it.indicator.slug} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-1 py-2 md:grid-cols-[minmax(0,16rem)_minmax(6rem,1fr)_4rem_4rem_4rem_3.5rem_5rem]">
              <Link href={routes.scatter({ x: slug, y: it.indicator.slug, year: it.year })} className="link-quiet min-w-0">
                <span className="block truncate text-sm font-medium text-ink">{it.indicator.short_name ?? it.indicator.name}</span>
                <span className="block truncate text-2xs text-ink-3">{topicById(it.indicator.topic ?? '')?.short ?? it.indicator.topic}</span>
              </Link>
              <div className="col-span-full flex items-center gap-2 md:col-span-1" aria-hidden>
                <span className="tnum w-8 text-right text-2xs text-ink-3">−1</span>
                <span className="relative h-1.5 min-w-0 flex-1 rounded-xs bg-surface-2">
                  <span className="absolute inset-y-0 left-1/2 w-px bg-rule-strong" />
                  <span className={cn('absolute inset-y-0 rounded-xs', rho >= 0 ? 'bg-inc' : 'bg-dec')} style={rho >= 0 ? { left: '50%', width: `${w / 2}%` } : { right: '50%', width: `${w / 2}%` }} />
                </span>
                <span className="tnum w-8 text-2xs text-ink-3">+1</span>
              </div>
              <span className="tnum text-right text-sm font-medium text-ink" title={t('scatter.stats.spearman')}>
                {it.spearman != null ? fixed(it.spearman, 2) : t('common.na')}
              </span>
              <span className="tnum hidden text-right text-xs text-ink-2 md:block" title={t('scatter.stats.pearson')}>
                r {it.pearson != null ? fixed(it.pearson, 2) : t('common.na')}
              </span>
              <span className="tnum hidden text-right text-xs text-ink-3 md:block">n {grouped(it.n)}</span>
              <span className="tnum hidden text-right text-xs text-ink-3 md:block">{it.year ?? ''}</span>
              <span className={cn('hidden text-right text-2xs uppercase tracking-wide md:block', it.direction === 'positive' ? 'text-inc' : 'text-dec')}>{t(`indicator.related.${it.direction}` as 'indicator.related.positive')}</span>
            </li>
          );
        })}
      </ul>
      <p className="mt-2 text-xs text-ink-3">
        {t('indicator.related.method', { year: data.year_used ?? '', n: grouped(data.n_candidates) })} <strong className="font-medium text-ink-2">{data.note}</strong>
      </p>
    </div>
  );
}