import Link from 'next/link';
import { t } from '@/i18n';
import { compact, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import type { Source } from '@/lib/types-explore';

/** Data transparency block: the sources with licence + counts, and the trust links (methodology, provenance, API). */
export function Transparency({ sources }: { sources: Source[] }) {
  const rows = [...sources].sort((a, b) => (b.n_observations ?? 0) - (a.n_observations ?? 0));
  return (
    <div className="grid gap-x-10 gap-y-6 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
      <ul className="divide-y divide-rule border-y border-rule text-sm">
        {rows.map((s) => (
          <li key={s.id} className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-4 py-2 md:grid-cols-[minmax(0,11rem)_minmax(0,1fr)_7rem_6rem]">
            <Link href={routes.source(s.id)} className="link-quiet font-medium text-ink">
              {s.name ?? s.id}
            </Link>
            <span className="hidden truncate text-xs text-ink-3 md:block">{s.organization}</span>
            <span className="tnum text-right text-xs text-ink-2 md:text-left">{s.n_observations != null ? t('home.transparency.obs', { n: compact(s.n_observations) }) : ''}</span>
            <span className="hidden truncate text-xs text-ink-3 md:block">{s.licence ?? ''}</span>
          </li>
        ))}
      </ul>
      <div className="max-w-prose text-sm leading-relaxed text-ink-2">
        <p>{t('home.transparency.text', { n: grouped(sources.length) })}</p>
        <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-sm">
          <li>
            <Link href={routes.methodology()} className="inline-flex min-h-[44px] items-center md:min-h-[36px] text-accent hover:underline">
              {t('site.footer.methodology')} →
            </Link>
          </li>
          <li>
            <Link href={routes.sources()} className="inline-flex min-h-[44px] items-center md:min-h-[36px] text-accent hover:underline">
              {t('site.footer.sources')} →
            </Link>
          </li>
          <li>
            <Link href={routes.api()} className="inline-flex min-h-[44px] items-center md:min-h-[36px] text-accent hover:underline">
              {t('site.footer.api')} →
            </Link>
          </li>
          <li>
            <Link href={routes.download()} className="inline-flex min-h-[44px] items-center md:min-h-[36px] text-accent hover:underline">
              {t('site.footer.data')} →
            </Link>
          </li>
        </ul>
      </div>
    </div>
  );
}