import { ExternalLink } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { t } from '@/i18n';
import { isNotBuilt } from '@/lib/api';
import { apiExplore } from '@/lib/api-explore';
import { compact, formatDate, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import type { SourcesResponse } from '@/lib/types-explore';
import { NotBuiltState } from '@/components/data/empty-state';
import { FreshnessBadge } from '@/components/data/freshness-badge';
import { PageHeader } from '@/components/explore/page-header';
import { FooterCredits } from '@/components/layout/site-footer';

export const revalidate = 900;

export const metadata: Metadata = {
  title: t('sources.title'),
  description: t('sources.sub', { n: 9 }),
  alternates: { canonical: routes.sources() },
};

export default async function SourcesPage() {
  let data: SourcesResponse | null = null;
  try {
    data = await apiExplore.sources();
  } catch (e) {
    if (!isNotBuilt(e)) throw e;
  }
  const items = data?.items ?? [];
  return (
    <>
      <PageHeader title={t('sources.title')} lede={t('sources.sub', { n: grouped(items.length || 9) })} />
      {!data ? (
        <NotBuiltState />
      ) : (
        <>
          <p className="max-w-prose border-y border-rule py-4 text-sm leading-relaxed text-ink-2">{t('sources.rule')}</p>
          <ol className="divide-y divide-rule">
            {items.map((s) => (
              <li key={s.id} className="grid gap-x-8 gap-y-2 py-4 md:grid-cols-[minmax(0,1fr)_16rem]">
                <div className="min-w-0">
                  <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                    <Link href={routes.source(s.id)} className="link-quiet text-lg font-semibold text-ink">
                      {s.name ?? s.id}
                    </Link>
                    <span className="text-sm text-ink-3">{s.organization}</span>
                    {s.licence ? <span className="rounded-xs border border-rule px-1 py-px text-2xs text-ink-2">{s.licence}</span> : null}
                  </div>
                  {s.attribution ? <p className="mt-1 text-sm text-ink-2">{s.attribution}</p> : null}
                  <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
                    <code className="font-mono text-ink-3">{s.id}</code>
                    {s.url ? (
                      <a href={s.url} target="_blank" rel="noopener noreferrer" className="inline-flex min-h-[32px] items-center gap-1 text-accent hover:underline">
                        <ExternalLink size={12} aria-hidden /> {t('sources.website')}
                      </a>
                    ) : null}
                    <Link href={routes.source(s.id)} className="inline-flex min-h-[32px] items-center text-accent hover:underline">
                      {t('common.more')} →
                    </Link>
                  </div>
                </div>
                <dl className="tnum grid grid-cols-2 gap-x-4 gap-y-1 text-sm md:grid-cols-1">
                  <div className="flex justify-between gap-2 md:justify-start">
                    <dt className="text-ink-3">{t('sources.observations', { n: '' }).trim()}</dt>
                    <dd className="text-ink">{s.n_observations != null ? compact(s.n_observations) : t('common.na')}</dd>
                  </div>
                  <div className="flex justify-between gap-2 md:justify-start">
                    <dt className="text-ink-3">{t('sources.indicators', { n: '' }).trim()}</dt>
                    <dd className="text-ink">{s.n_indicators != null ? grouped(s.n_indicators) : t('common.na')}</dd>
                  </div>
                  <div className="col-span-2 flex flex-wrap items-center gap-2 md:col-span-1">
                    <dt className="sr-only">{t('sources.lastImport', { date: '' })}</dt>
                    <dd className="text-xs text-ink-3">{t('sources.lastImport', { date: formatDate(s.last_success_at ?? s.last_retrieved_at) })}</dd>
                    <dd>
                      <FreshnessBadge retrievedAt={s.last_success_at ?? s.last_retrieved_at} />
                    </dd>
                  </div>
                </dl>
              </li>
            ))}
          </ol>
          <div className="mt-8 border-t border-rule pt-4 text-sm text-ink-2">
            <span className="mr-2 font-medium text-ink">{t('sources.contact')}</span>
            <FooterCredits className="mt-1 inline text-xs" />
          </div>
        </>
      )}
    </>
  );
}