import type { Metadata } from 'next';
import Link from 'next/link';
import type { ReactNode } from 'react';
import { t, tOpt } from '@/i18n';
import { isNotBuilt } from '@/lib/api';
import { apiExplore } from '@/lib/api-explore';
import { formatDate, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import type { MethodologyResponse } from '@/lib/types-explore';
import { StatusBadge } from '@/components/data/freshness-badge';
import { PageHeader } from '@/components/explore/page-header';
import { Toc } from '@/components/methodology/toc';

export const revalidate = 3600;

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

const SECTIONS = ['principles', 'countries', 'indicators', 'sources', 'validation', 'freshness', 'rankings', 'changes', 'similarity', 'insights', 'dna', 'limitations', 'versioning', 'licence'] as const;

function Prose({ id, title, children }: { id: string; title: string; children: ReactNode }) {
  return (
    <section id={id} className="scroll-mt-28 border-t border-rule py-8 first:border-t-0 md:py-10" aria-labelledby={`${id}-h`}>
      <h2 id={`${id}-h`} className="display text-2xl text-ink md:text-3xl">
        <a href={`#${id}`} className="link-quiet">
          {title}
        </a>
      </h2>
      <div className="mt-3 max-w-prose space-y-3 text-base leading-relaxed text-ink-2 [&_p]:text-pretty">{children}</div>
    </section>
  );
}

function Kv({ rows }: { rows: Array<[string, ReactNode]> }) {
  return (
    <dl className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-6 gap-y-1 text-sm">
      {rows.map(([k, v]) => (
        <div key={k} className="contents">
          <dt className="text-ink-2">{k}</dt>
          <dd className="tnum text-right text-ink">{v}</dd>
        </div>
      ))}
    </dl>
  );
}

export default async function MethodologyPage() {
  let m: MethodologyResponse | null = null;
  try {
    m = await apiExplore.methodology();
  } catch (e) {
    if (!isNotBuilt(e)) throw e;
  }
  const toc = SECTIONS.map((id) => ({ id, label: t(`method.${id}` as 'method.principles') }));
  const stale = m?.validation.stale_after_days ?? { A: 800, Q: 200, M: 75 };

  return (
    <>
      <PageHeader title={t('method.title')} lede={t('method.sub')} meta={m?.meta.built_at ? `${t('site.footer.refreshed', { date: formatDate(m.meta.built_at) })}${m.meta.run_id ? ` · ${t('site.footer.build', { run: m.meta.run_id })}` : ''}` : undefined} />
      <div className="lg:grid lg:grid-cols-[14rem_minmax(0,1fr)] lg:gap-12">
        <div className="lg:self-start">
          <Toc items={toc} />
        </div>
        <article className="min-w-0">
          <Prose id="principles" title={t('method.principles')}>
            <ol className="list-decimal space-y-2 pl-5">
              {(m?.principles ?? []).map((p) => (
                <li key={p}>{p}</li>
              ))}
            </ol>
          </Prose>

          <Prose id="countries" title={t('method.countries')}>
            <p>{t('method.countries.text')}</p>
            <p className="text-sm">
              <Link href={routes.regions()} className="text-accent hover:underline">
                {t('regions.title')} →
              </Link>
            </p>
          </Prose>

          <Prose id="indicators" title={t('method.indicators')}>
            <p>{t('method.indicators.text', { n: grouped(m?.indicators.n ?? 260) })}</p>
            {m ? (
              <div className="grid gap-6 pt-2 sm:grid-cols-2">
                <div>
                  <h3 className="mb-1.5 text-sm font-semibold text-ink">{t('method.indicators.formats')}</h3>
                  <Kv rows={m.indicators.formats.map((f) => [f.format, grouped(f.n)] as [string, ReactNode])} />
                </div>
                <div>
                  <h3 className="mb-1.5 text-sm font-semibold text-ink">{t('method.indicators.units')}</h3>
                  <Kv rows={m.indicators.units.slice(0, 10).map((u) => [u.unit, grouped(u.n)] as [string, ReactNode])} />
                  <h3 className="mb-1.5 mt-5 text-sm font-semibold text-ink">{t('method.indicators.frequencies')}</h3>
                  <Kv rows={Object.entries(m.indicators.frequencies).map(([k, v]) => [tOpt(`indicator.frequency.${k}`, k), grouped(v)] as [string, ReactNode])} />
                  <h3 className="mb-1.5 mt-5 text-sm font-semibold text-ink">{t('method.indicators.aggregations')}</h3>
                  <Kv rows={Object.entries(m.indicators.aggregations).map(([k, v]) => [k, grouped(v)] as [string, ReactNode])} />
                </div>
              </div>
            ) : null}
            <p className="text-sm">
              <Link href={routes.indicators()} className="text-accent hover:underline">
                {t('indicators.title')} →
              </Link>
            </p>
          </Prose>

          <Prose id="sources" title={t('method.sources')}>
            <p>{m?.sources.priority_rule}</p>
            <p>{t('method.sources.text2')}</p>
            {m ? (
              <div className="grid gap-6 pt-2 sm:grid-cols-2">
                <div>
                  <h3 className="mb-1.5 text-sm font-semibold text-ink">{t('method.sources.mapped')}</h3>
                  <Kv
                    rows={Object.entries(m.sources.series_mapped_per_connector)
                      .sort((a, b) => b[1] - a[1])
                      .map(([k, v]) => [k, grouped(v)] as [string, ReactNode])}
                  />
                </div>
                <div>
                  <h3 className="mb-1.5 text-sm font-semibold text-ink">{t('method.sources.urls')}</h3>
                  <ul className="space-y-1 text-xs">
                    {Object.entries(m.sources.urls).map(([k, v]) => (
                      <li key={k} className="grid grid-cols-[5rem_minmax(0,1fr)] gap-2">
                        <span className="text-ink-2">{k}</span>
                        <code className="break-all font-mono text-ink">{v}</code>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ) : null}
            <p className="text-sm">
              <Link href={routes.sources()} className="text-accent hover:underline">
                {t('sources.title')} →
              </Link>
            </p>
          </Prose>

          <Prose id="validation" title={t('method.validation')}>
            <p>{t('method.validation.text')}</p>
            {m ? (
              <table className="w-full 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('method.rule.code')}</th>
                    <th scope="col" className="py-1.5 pr-3 font-medium">{t('method.rule.severity')}</th>
                    <th scope="col" className="py-1.5 font-medium">{t('method.rule.effect')}</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-rule">
                  {m.validation.rules.map((r) => (
                    <tr key={r.code}>
                      <td className="py-2 pr-3 align-top font-mono text-xs text-ink">{r.code}</td>
                      <td className="py-2 pr-3 align-top text-xs text-ink-2">{r.severity}</td>
                      <td className="py-2 align-top text-ink-2">{r.text}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : null}
            <h3 className="pt-2 text-sm font-semibold text-ink">{t('method.validation.statuses')}</h3>
            <ul className="space-y-2">
              {(['verified', 'imported', 'warning', 'stale', 'quarantined'] as const).map((s) => (
                <li key={s} className="flex items-start gap-3">
                  <span className="mt-0.5 shrink-0">
                    <StatusBadge status={s} />
                  </span>
                  <span className="text-sm">{t(`method.validation.status.${s}` as 'method.validation.status.verified')}</span>
                </li>
              ))}
            </ul>
            <h3 className="pt-2 text-sm font-semibold text-ink">{t('method.validation.stale')}</h3>
            <p className="text-sm">{t('method.validation.staleText', { a: stale.A ?? 800, q: stale.Q ?? 200, m: stale.M ?? 75 })}</p>
          </Prose>

          <Prose id="freshness" title={t('method.freshness')}>
            <p>{t('method.freshness.text')}</p>
            {m ? (
              <>
                <h3 className="pt-2 text-sm font-semibold text-ink">{t('method.periods')}</h3>
                <Kv rows={Object.entries(m.periods).map(([k, v]) => [k, <code key={k} className="font-mono text-xs">{v}</code>] as [string, ReactNode])} />
              </>
            ) : null}
          </Prose>

          <Prose id="rankings" title={t('method.rankings')}>
            <p>{t('method.rankings.text')}</p>
            {m ? <p className="text-sm text-ink-3">{m.derived.rankings}</p> : null}
            <p className="text-sm">
              <Link href={routes.rankings()} className="text-accent hover:underline">
                {t('nav.rankings')} →
              </Link>
            </p>
          </Prose>

          <Prose id="changes" title={t('method.changes')}>
            <p>{t('method.changes.text')}</p>
            {m ? <p className="text-sm text-ink-3">{m.derived.changes}</p> : null}
            <p className="text-sm">
              <Link href={routes.changes()} className="text-accent hover:underline">
                {t('changes.title')} →
              </Link>
            </p>
          </Prose>

          <Prose id="similarity" title={t('method.similarity')}>
            <p>{t('method.similarity.text')}</p>
            {m ? (
              <>
                <h3 className="pt-2 text-sm font-semibold text-ink">{t('method.similarity.modes')}</h3>
                <dl className="space-y-1.5 text-sm">
                  {Object.entries(m.derived.similarity.modes).map(([k, v]) => (
                    <div key={k} className="grid grid-cols-[7rem_minmax(0,1fr)] gap-2">
                      <dt className="font-medium text-ink">{tOpt(`country.similar.mode.${k}`, k)}</dt>
                      <dd className="text-ink-2">{v}</dd>
                    </div>
                  ))}
                </dl>
                <p className="text-sm text-ink-3">{m.derived.similarity.method}</p>
              </>
            ) : null}
          </Prose>

          <Prose id="insights" title={t('method.insights')}>
            <p>{t('method.insights.text')}</p>
            {m ? <p className="text-sm text-ink-3">{m.derived.insights}</p> : null}
          </Prose>

          <Prose id="dna" title={t('method.dna')}>
            <p>{t('method.dna.text')}</p>
            {m ? (
              <ul className="grid gap-x-6 gap-y-1.5 text-sm sm:grid-cols-2">
                {m.derived.country_dna.dimensions.map((d) => (
                  <li key={d.id} className="grid grid-cols-[8rem_minmax(0,1fr)] gap-2">
                    <span className="font-medium text-ink">{d.label}</span>
                    <span className="min-w-0">
                      {d.indicators.map((s, i) => (
                        <span key={s}>
                          {i > 0 ? ', ' : ''}
                          <Link href={routes.indicator(s)} className="text-accent hover:underline">
                            {s}
                          </Link>
                        </span>
                      ))}
                    </span>
                  </li>
                ))}
              </ul>
            ) : null}
            {m ? <p className="text-sm text-ink-3">{m.derived.world_aggregates}</p> : null}
          </Prose>

          <Prose id="limitations" title={t('method.limitations')}>
            <p>{t('method.limitations.text')}</p>
          </Prose>

          <Prose id="versioning" title={t('method.versioning')}>
            <p>{t('method.versioning.text')}</p>
          </Prose>

          <Prose id="licence" title={t('method.licence')}>
            <p>{t('method.licence.text')}</p>
            {m ? (
              <>
                <h3 className="pt-2 text-sm font-semibold text-ink">{t('method.formatting')}</h3>
                <Kv rows={Object.entries(m.formatting).map(([k, v]) => [k, v] as [string, ReactNode])} />
              </>
            ) : null}
            <p className="text-sm">
              <Link href={routes.data()} className="text-accent hover:underline">
                {t('data.title')} →
              </Link>
            </p>
          </Prose>
        </article>
      </div>
    </>
  );
}