import type { Metadata } from 'next';
import Link from 'next/link';
import { Suspense } from 'react';
import { t } from '@/i18n';
import { api, safe } from '@/lib/api';
import { apiExplore } from '@/lib/api-explore';
import { formatDate } from '@/lib/format';
import { SITE_URL, routes } from '@/lib/site';
import { toCountryLite } from '@/lib/types-compare';
import type { IndicatorOption } from '@/components/controls/indicator-select';
import { Section } from '@/components/data/section';
import { CodeBlock } from '@/components/explore/copy-button';
import { DownloadPicker } from '@/components/explore/download-picker';
import { PageHeader } from '@/components/explore/page-header';
import { FooterCredits } from '@/components/layout/site-footer';
import { DownloadBuilder } from '@/components/platform/download-builder';

export const revalidate = 3600;

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

const COLUMNS = ['country_id', 'country_name', 'indicator_id', 'indicator_name', 'period', 'year', 'frequency', 'value', 'unit', 'is_estimate', 'is_forecast', 'status', 'source', 'source_name', 'dataset', 'series_code', 'retrieved_at', 'source_updated_at', 'url', 'licence'];

export default async function DownloadPage() {
  const [sources, countriesRes, indicatorsRes] = await Promise.all([safe(apiExplore.sources()), safe(api.countries()), safe(apiExplore.indicators({ with_data: true }))]);
  const items = sources?.items ?? [];
  const names = items.map((s) => s.name ?? s.id);
  const built = sources?.meta.built_at ?? null;
  const countries = (countriesRes?.items ?? []).filter((c) => c.kind !== 'aggregate').map(toCountryLite).sort((a, b) => a.name.localeCompare(b.name));
  // Plain data for the client builder (the helper in indicator-select.tsx is a client module; map here on the server).
  const indicators: IndicatorOption[] = (indicatorsRes?.items ?? []).map((i) => ({ slug: i.slug, name: i.name ?? i.slug, short_name: i.short_name, topic: i.topic, unit: i.unit, featured: i.featured, first_year: i.first_year, last_year: i.last_year, n_countries: i.n_countries }));
  const maxYear = Math.max(new Date().getUTCFullYear(), ...indicators.map((i) => i.last_year ?? 0));
  const bulk = `# list indicators, then fetch each dataset\ncurl -s "${SITE_URL}/api/v1/indicators" | jq -r '.items[].slug' | while read slug; do\n  curl -s -o "$slug.csv" "${SITE_URL}/api/v1/indicators/$slug/download.csv"; sleep 0.6\ndone`;

  return (
    <>
      <PageHeader title={t('download.title')} lede={t('download.sub')} meta={built && sources?.meta.run_id ? t('download.snapshot', { run: sources.meta.run_id, date: formatDate(built) }) : undefined} />

      <Section id="builder" title={t('download.builder.title')} subtitle={t('download.builder.sub')} className="border-t-0">
        <Suspense fallback={null}>
          <DownloadBuilder countries={countries} indicators={indicators} maxYear={maxYear} />
        </Suspense>
      </Section>

      <Section id="quick" title={t('download.quick.title')} subtitle={t('download.quick.sub')}>
        <div className="grid gap-x-10 gap-y-6 lg:grid-cols-2">
          <div>
            <h3 className="text-sm font-semibold text-ink">{t('download.quick.country')}</h3>
            <p className="mb-2 text-xs text-ink-3">{t('download.quick.countrySub')}</p>
            <DownloadPicker type="country" />
          </div>
          <div>
            <h3 className="text-sm font-semibold text-ink">{t('download.quick.indicator')}</h3>
            <p className="mb-2 text-xs text-ink-3">{t('download.quick.indicatorSub')}</p>
            <DownloadPicker type="indicator" />
          </div>
        </div>
      </Section>

      <div className="grid gap-x-10 lg:grid-cols-2">
        <Section id="bulk" title={t('download.bulk.title')} subtitle={t('download.bulk.sub')}>
          <p className="max-w-prose text-sm leading-relaxed text-ink-2">{t('download.bulk.text')}</p>
          <CodeBlock code={bulk} lang="bash" className="mt-3" />
        </Section>
        <Section id="columns" title={t('download.columns.title')} subtitle={t('download.columns.sub')}>
          <ul className="flex flex-wrap gap-1.5">
            {COLUMNS.map((c) => (
              <li key={c} className="rounded-xs border border-rule bg-surface px-1.5 py-0.5 font-mono text-xs text-ink-2">
                {c}
              </li>
            ))}
          </ul>
          <h3 className="mt-6 text-sm font-semibold text-ink">{t('download.api.title')}</h3>
          <p className="mt-1 max-w-prose text-sm leading-relaxed text-ink-2">{t('download.api.text', { base: `${SITE_URL}/api/v1` })}</p>
          <Link href={routes.api()} className="mt-1 inline-flex min-h-[44px] items-center text-sm text-accent hover:underline md:min-h-[36px]">
            {t('download.api.link')} →
          </Link>
        </Section>
      </div>

      <Section id="licence" title={t('download.licence.title')} subtitle={t('download.licence.sub')}>
        <div className="max-w-prose space-y-3 text-sm leading-relaxed text-ink-2">
          <p>{t('download.licence.compilation')}</p>
          <p>{t('download.licence.sources')}</p>
        </div>
        {items.length ? (
          <table className="mt-4 w-full max-w-3xl border-collapse text-sm">
            <thead>
              <tr className="border-b border-rule text-left text-xs text-ink-3">
                <th scope="col" className="py-1.5 pr-3 font-medium">{t('download.licence.source')}</th>
                <th scope="col" className="py-1.5 pr-3 font-medium">{t('download.licence.licence')}</th>
                <th scope="col" className="hidden py-1.5 font-medium sm:table-cell">{t('download.licence.attribution')}</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-rule">
              {items.map((s) => (
                <tr key={s.id}>
                  <td className="py-2 pr-3">
                    <Link href={routes.source(s.id)} className="link-quiet inline-flex min-h-[44px] items-center text-ink md:min-h-[32px]">
                      {s.name ?? s.id}
                    </Link>
                  </td>
                  <td className="py-2 pr-3 text-ink-2">{s.licence ?? t('common.na')}</td>
                  <td className="hidden py-2 text-xs text-ink-3 sm:table-cell">{s.attribution ?? ''}</td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : null}
        <h3 className="mt-5 text-sm font-semibold text-ink">{t('download.licence.example')}</h3>
        <blockquote className="mt-1 max-w-prose border-l-2 border-rule pl-3 text-sm text-ink-2">{t('download.licence.exampleText', { sources: names.slice(0, 4).join(', ') || 'World Bank, IMF, OECD', date: formatDate(built ?? new Date().toISOString()) })}</blockquote>
        <FooterCredits className="mt-6 text-xs text-ink-2" />
      </Section>
    </>
  );
}