import Link from 'next/link';
import { t } from '@/i18n';
import { formatDate } from '@/lib/format';
import { routes } from '@/lib/site';
import { Logo } from '@/components/brand/Logo';

/**
 * Site footer: explore/reference link columns, licence note, credits ("Made by … · contact", "Hosted on MacLustr").
 * `builtAt`/`runId` (optional) come from the API `meta` of the page that renders it. Reuse `<FooterCredits />`
 * on /sources and /api pages for the contact line.
 */
export function SiteFooter({ builtAt, runId }: { builtAt?: string | null; runId?: string | null }) {
  const explore = [
    { href: routes.explore(), label: t('nav.explore') },
    { href: routes.countries(), label: t('nav.countries') },
    { href: routes.compare(), label: t('nav.compare') },
    { href: routes.rankings(), label: t('nav.rankings') },
    { href: routes.indicators(), label: t('nav.indicators') },
    { href: routes.regions(), label: t('nav.regions') },
    { href: routes.changes(), label: t('site.footer.changes') },
    { href: routes.trajectories(), label: t('nav.trajectories') },
    { href: routes.scatter(), label: t('nav.scatter') },
    { href: routes.finder(), label: t('nav.finder') },
    { href: routes.extremes(), label: t('nav.extremes') },
    { href: routes.stories(), label: t('nav.stories') },
  ];
  const reference = [
    { href: routes.sources(), label: t('site.footer.sources') },
    { href: routes.methodology(), label: t('site.footer.methodology') },
    { href: routes.api(), label: t('site.footer.api') },
    { href: routes.download(), label: t('site.footer.data') },
    { href: routes.updates(), label: t('nav.updates') },
    { href: routes.peers(), label: t('nav.peers') },
  ];
  return (
    <footer className="mt-16 border-t border-rule bg-surface-2/40 text-sm">
      <div className="container-x mx-auto max-w-[1400px] py-10">
        <div className="grid gap-8 md:grid-cols-[1.4fr_1.2fr_1fr]">
          <div className="max-w-md">
            <Logo variant="full" />
            <p className="mt-3 text-ink-2">{t('site.tagline')}</p>
            <p className="mt-3 text-xs leading-relaxed text-ink-3">{t('site.licence')}</p>
            {builtAt ? (
              <p className="tnum mt-3 text-xs text-ink-3">
                {t('site.footer.refreshed', { date: formatDate(builtAt) })}
                {runId ? ` · ${t('site.footer.build', { run: runId })}` : ''}
              </p>
            ) : null}
          </div>
          <FooterColumn title={t('site.footer.explore')} items={explore} />
          <FooterColumn title={t('site.footer.reference')} items={reference} />
        </div>
        <div className="mt-8 flex flex-col gap-2 border-t border-rule pt-5 text-xs text-ink-2 md:flex-row md:items-center md:justify-between">
          <FooterCredits />
          <p className="text-ink-3">{t('site.footer.made')}</p>
        </div>
      </div>
    </footer>
  );
}

function FooterColumn({ title, items }: { title: string; items: Array<{ href: string; label: string }> }) {
  return (
    <div>
      <div className="eyebrow mb-2">{title}</div>
      <ul className="grid grid-cols-2 gap-x-4 gap-y-1 sm:grid-cols-1">
        {items.map((it) => (
          <li key={it.href}>
            <Link href={it.href} className="inline-flex min-h-[44px] items-center text-ink-2 hover:text-accent md:min-h-[32px]">
              {it.label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

/** "Made by Simon-Pierre Boucher · contact@spboucher.ai" + "Hosted on MacLustr". */
export function FooterCredits({ className }: { className?: string }) {
  return (
    <p className={className}>
      {t('site.footer.madeBy')} <span className="text-ink">{t('site.footer.author')}</span> ·{' '}
      <a href={`mailto:${t('site.footer.contact')}`} className="text-accent hover:underline">
        {t('site.footer.contact')}
      </a>
      <span className="mx-2 text-ink-3">·</span>
      {t('site.footer.hostedOn')}{' '}
      <a href="https://www.maclustr.io" target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">
        {t('site.footer.host')}
      </a>
    </p>
  );
}