'use client';
import Link from 'next/link';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { displayValue, formatPeriod } from '@/lib/format';
import { routes } from '@/lib/site';
import type { MetricValue } from '@/lib/types';
import { ChangeChip } from '@/components/data/change-chip';
import { payloadFor, type MetricCountry } from '@/components/data/metric';
import { useProvenance } from '@/components/data/provenance-context';
import { RankBadge } from '@/components/data/rank-badge';

/**
 * Latest values of a subtopic, shown while its charts are collapsed on a long topic page: name · value · period
 * (highlighted when ≥ 2 years older than the newest value of the block) · change · world rank. Value → provenance.
 */
export function TopicCompact({ rows, country, regionName }: { rows: MetricValue[]; country: MetricCountry; regionName?: string | null }) {
  const { open } = useProvenance();
  const latestYear = Math.max(0, ...rows.map((m) => m.year ?? 0));
  return (
    <div className="min-w-0">
      <p className="mb-1 text-xs text-ink-3">{t('topic.collapsedHint')}</p>
      <ul className="divide-y divide-rule border-b border-rule text-sm">
        {rows.map((m) => {
          const stale = m.year != null && latestYear - m.year >= 2;
          return (
            <li key={m.indicator} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 py-1 sm:grid-cols-[minmax(0,1fr)_auto_minmax(5rem,auto)_minmax(6rem,auto)]">
              <Link href={routes.indicator(m.indicator)} className="link-quiet inline-flex min-h-[44px] min-w-0 items-center text-ink md:min-h-[36px]">
                <span className="truncate">{m.indicator_name ?? m.indicator}</span>
              </Link>
              <button type="button" onClick={() => open(payloadFor(m, country))} className="tnum -mx-1 inline-flex min-h-[44px] items-baseline justify-end gap-1.5 rounded-sm px-1 text-right hover:bg-surface-2 md:min-h-[36px]" aria-label={`${m.indicator_name ?? m.indicator}: ${displayValue(m.value, m, m.formatted)} (${formatPeriod(m.period, m.frequency)}). ${t('common.openProvenance')}`}>
                <span className="font-medium text-ink">{displayValue(m.value, m, m.formatted)}</span>
                <span className={cn('text-2xs', stale ? 'rounded-xs bg-surface-2 px-1 text-ink-2' : 'text-ink-3')}>{formatPeriod(m.period, m.frequency)}</span>
              </button>
              <span className="hidden justify-end sm:flex">
                <ChangeChip change={m.change} spec={m} showVs={false} />
              </span>
              <span className="hidden min-w-0 justify-end truncate text-right sm:flex">
                <RankBadge rank={m} regionName={regionName} compact />
              </span>
            </li>
          );
        })}
      </ul>
    </div>
  );
}