import Link from 'next/link';
import { t, tOpt } from '@/i18n';
import { cn } from '@/lib/cn';
import { compact, formatDate, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import type { UpdatesResponse } from '@/lib/types-analytics';

/** Latest data updates: one row per source (status, last import, vintage, latest year, values changed). */
export function LatestUpdates({ data, limit = 9 }: { data: UpdatesResponse; limit?: number }) {
  const rows = [...data.sources].sort((a, b) => (b.last_success_at ?? '').localeCompare(a.last_success_at ?? '')).slice(0, limit);
  return (
    <div className="min-w-0">
      <ul className="divide-y divide-rule border-y border-rule text-sm">
        {rows.map((s) => (
          <li key={s.source.id} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 py-2 md:grid-cols-[minmax(0,12rem)_6rem_7rem_5rem_minmax(0,1fr)]">
            <Link href={routes.source(s.source.id)} className="link-quiet flex min-h-[32px] min-w-0 items-center gap-2 font-medium text-ink">
              <span className={cn('inline-block h-2 w-2 shrink-0 rounded-full', s.status === 'ok' ? 'bg-up' : s.status === 'partial' ? 'bg-warn' : s.status === 'failed' ? 'bg-down' : 'bg-rule-strong')} aria-hidden />
              <span className="truncate">{s.source.name ?? s.source.id}</span>
              <span className="sr-only">{tOpt(`home.updates.status.${s.status}`, s.status)}</span>
            </Link>
            <span className="tnum text-right text-xs text-ink-2 md:text-left">{formatDate(s.last_success_at ?? s.last_retrieved_at)}</span>
            <span className="tnum hidden text-xs text-ink-3 md:block">{s.source_updated_at ? t('home.updates.vintage', { date: formatDate(s.source_updated_at) }) : ''}</span>
            <span className="tnum hidden text-xs text-ink-3 md:block">{s.latest_year ? `→ ${s.latest_year}` : ''}</span>
            <span className="tnum hidden truncate text-xs text-ink-3 md:block">
              {t('home.updates.counts', { obs: compact(s.n_observations), ind: grouped(s.n_indicators) })}
              {s.values_changed ? ` · ${t('home.updates.changed', { n: grouped(s.values_changed), c: grouped(s.countries_affected) })}` : ''}
            </span>
          </li>
        ))}
      </ul>
      <div className="mt-2 flex flex-wrap items-center justify-between gap-2 text-xs text-ink-3">
        <span className="tnum">{t('home.updates.snapshot', { run: data.snapshot.run_id ?? '', date: formatDate(data.snapshot.built_at) })}</span>
        <Link href={routes.updates()} className="inline-flex min-h-[36px] items-center text-sm text-accent hover:underline">
          {t('home.updates.all')} →
        </Link>
      </div>
    </div>
  );
}