import type { Metadata } from 'next';
import Link from 'next/link';
import { t, tOpt } from '@/i18n';
import { ApiError, isNotBuilt } from '@/lib/api';
import { apiPlatform } from '@/lib/api-platform';
import { compact, formatDate, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import { topicById } from '@/lib/topics';
import type { UpdatesResponse } from '@/lib/types-analytics';
import { cn } from '@/lib/cn';
import { EmptyState, NotBuiltState } from '@/components/data/empty-state';
import { FreshnessBadge } from '@/components/data/freshness-badge';
import { Section } from '@/components/data/section';
import { PageHeader } from '@/components/explore/page-header';

export const revalidate = 600;

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

const STATUS_TONE: Record<string, string> = {
  ok: 'border-up/40 text-up',
  partial: 'border-warn/40 text-warn',
  failed: 'border-down/40 text-down',
  stale: 'border-warn/40 text-warn',
  unknown: 'border-rule text-ink-3',
};

export default async function UpdatesPage() {
  let data: UpdatesResponse | null = null;
  let missing = false;
  try {
    data = await apiPlatform.updates();
  } catch (e) {
    if (isNotBuilt(e)) return <NotBuiltState />;
    if (e instanceof ApiError && e.status === 404) missing = true;
    else throw e;
  }
  const now = Date.parse(data?.meta.generated_at ?? '') || Date.now();

  return (
    <>
      <PageHeader title={t('updates.title')} lede={t('updates.sub')} meta={data?.snapshot.built_at ? `${t('site.footer.refreshed', { date: formatDate(data.snapshot.built_at) })} · ${t('site.footer.build', { run: data.snapshot.run_id ?? '' })}` : undefined} />
      {missing || !data ? (
        <EmptyState title={t('updates.unavailable')} />
      ) : (
        <>
          {/* Snapshot ticker */}
          <section aria-label={t('updates.snapshot.title')} className="border-y border-rule">
            <dl className="ticker divide-x divide-rule">
              {[
                [t('updates.snapshot.built'), formatDate(data.snapshot.built_at), null],
                [t('updates.snapshot.observations'), compact(data.snapshot.observations), null],
                [t('updates.snapshot.indicators'), grouped(data.snapshot.indicators), null],
                [t('updates.snapshot.countries'), grouped(data.snapshot.countries), null],
                [t('updates.snapshot.changed'), grouped(data.snapshot.values_changed), t('updates.snapshot.changedHint')],
              ].map(([k, v, hint]) => (
                <div key={k as string} className="min-w-[10rem] px-4 py-4 first:pl-0" title={(hint as string | null) ?? undefined}>
                  <dt className="text-2xs font-medium uppercase tracking-wide text-ink-3">{k}</dt>
                  <dd className="pnum mt-1 text-xl font-semibold leading-none text-ink md:text-2xl">{v}</dd>
                </div>
              ))}
            </dl>
          </section>

          <Section id="sources" title={t('updates.sources.title')} subtitle={t('updates.sources.sub')} className="border-t-0">
            {/* Desktop table */}
            <table className="hidden w-full border-collapse text-sm md:table">
              <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('updates.col.source')}</th>
                  <th scope="col" className="py-1.5 pr-3 font-medium">{t('updates.col.status')}</th>
                  <th scope="col" className="py-1.5 pr-3 font-medium">{t('updates.col.lastImport')}</th>
                  <th scope="col" className="py-1.5 pr-3 font-medium">{t('updates.col.vintage')}</th>
                  <th scope="col" className="py-1.5 pr-3 text-right font-medium">{t('updates.col.datasets')}</th>
                  <th scope="col" className="py-1.5 pr-3 text-right font-medium">{t('updates.col.indicators')}</th>
                  <th scope="col" className="py-1.5 pr-3 text-right font-medium">{t('updates.col.observations')}</th>
                  <th scope="col" className="py-1.5 pr-3 text-right font-medium">{t('updates.col.latestYear')}</th>
                  <th scope="col" className="py-1.5 pr-3 text-right font-medium">{t('updates.col.changed')}</th>
                  <th scope="col" className="py-1.5 text-right font-medium">{t('updates.col.countries')}</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-rule">
                {data.sources.map((s) => (
                  <tr key={s.source.id}>
                    <td className="py-2 pr-3">
                      <Link href={routes.source(s.source.id)} className="link-quiet font-medium text-ink">
                        {s.source.name ?? s.source.id}
                      </Link>
                      <span className="block text-2xs text-ink-3">{s.source.organization}</span>
                    </td>
                    <td className="py-2 pr-3">
                      <span className={cn('badge', STATUS_TONE[s.status] ?? STATUS_TONE.unknown)}>{tOpt(`updates.status.${s.status}`, s.status)}</span>
                    </td>
                    <td className="tnum py-2 pr-3 text-ink-2">
                      {formatDate(s.last_success_at ?? s.last_retrieved_at)}
                      <span className="ml-1.5 inline-block align-middle">
                        <FreshnessBadge retrievedAt={s.last_success_at ?? s.last_retrieved_at} now={now} />
                      </span>
                    </td>
                    <td className="tnum py-2 pr-3 text-ink-2">{formatDate(s.source_updated_at)}</td>
                    <td className="tnum py-2 pr-3 text-right text-ink">{grouped(s.n_datasets)}</td>
                    <td className="tnum py-2 pr-3 text-right text-ink">{grouped(s.n_indicators)}</td>
                    <td className="tnum py-2 pr-3 text-right text-ink">{compact(s.n_observations)}</td>
                    <td className="tnum py-2 pr-3 text-right text-ink">{s.latest_year ?? t('common.na')}</td>
                    <td className="tnum py-2 pr-3 text-right text-ink">{grouped(s.values_changed)}</td>
                    <td className="tnum py-2 text-right text-ink">{grouped(s.countries_affected)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            {/* Phone: one block per source */}
            <ul className="divide-y divide-rule md:hidden">
              {data.sources.map((s) => (
                <li key={s.source.id} className="py-3">
                  <div className="flex items-center justify-between gap-2">
                    <Link href={routes.source(s.source.id)} className="link-quiet inline-flex min-h-[44px] min-w-0 items-center truncate text-sm font-medium text-ink">
                      {s.source.name ?? s.source.id}
                    </Link>
                    <span className={cn('badge shrink-0', STATUS_TONE[s.status] ?? STATUS_TONE.unknown)}>{tOpt(`updates.status.${s.status}`, s.status)}</span>
                  </div>
                  <dl className="tnum mt-1.5 grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
                    <div className="flex justify-between gap-2">
                      <dt className="text-ink-3">{t('updates.col.lastImport')}</dt>
                      <dd className="text-ink">{formatDate(s.last_success_at ?? s.last_retrieved_at)}</dd>
                    </div>
                    <div className="flex justify-between gap-2">
                      <dt className="text-ink-3">{t('updates.col.vintage')}</dt>
                      <dd className="text-ink">{formatDate(s.source_updated_at)}</dd>
                    </div>
                    <div className="flex justify-between gap-2">
                      <dt className="text-ink-3">{t('updates.col.observations')}</dt>
                      <dd className="text-ink">{compact(s.n_observations)}</dd>
                    </div>
                    <div className="flex justify-between gap-2">
                      <dt className="text-ink-3">{t('updates.col.latestYear')}</dt>
                      <dd className="text-ink">{s.latest_year ?? t('common.na')}</dd>
                    </div>
                    <div className="flex justify-between gap-2">
                      <dt className="text-ink-3">{t('updates.col.changed')}</dt>
                      <dd className="text-ink">{grouped(s.values_changed)}</dd>
                    </div>
                    <div className="flex justify-between gap-2">
                      <dt className="text-ink-3">{t('updates.col.countries')}</dt>
                      <dd className="text-ink">{grouped(s.countries_affected)}</dd>
                    </div>
                  </dl>
                </li>
              ))}
            </ul>
            <p className="mt-3 max-w-prose text-xs text-ink-3">{t('updates.schedule')}</p>
          </Section>

          <div className="grid gap-x-10 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
            <Section id="runs" title={t('updates.runs.title')} subtitle={t('updates.runs.sub')}>
              {data.recent_runs.length === 0 ? (
                <p className="text-sm text-ink-3">{t('updates.none')}</p>
              ) : (
                <ol className="divide-y divide-rule border-y border-rule">
                  {data.recent_runs.map((r, i) => (
                    <li key={`${r.run_id}-${r.connector}-${r.dataset}-${i}`} className="grid gap-x-4 gap-y-0.5 py-2 text-sm sm:grid-cols-[5.5rem_minmax(0,1fr)_5rem_6rem]">
                      <span className={cn('badge self-start', STATUS_TONE[r.status ?? 'unknown'] ?? STATUS_TONE.unknown)}>{tOpt(`source.run.${r.status ?? 'unknown'}`, r.status ?? '')}</span>
                      <span className="min-w-0">
                        <span className="block truncate font-mono text-xs text-ink">
                          {r.connector} · {r.dataset}
                        </span>
                        {r.message ? <span className="block truncate text-xs text-ink-3">{r.message}</span> : null}
                      </span>
                      <span className="tnum text-xs text-ink-2">
                        {r.rows_valid != null ? `${compact(r.rows_valid)} ${t('updates.col.rows').toLowerCase()}` : ''}
                        {r.warnings ? ` · ${r.warnings} ⚠` : ''}
                        {r.errors ? ` · ${r.errors} ✕` : ''}
                      </span>
                      <span className="tnum text-xs text-ink-3">{formatDate(r.finished_at ?? r.started_at)}</span>
                    </li>
                  ))}
                </ol>
              )}
            </Section>
            <Section id="indicators" title={t('updates.indicators.title')} subtitle={t('updates.indicators.sub')}>
              <ul className="divide-y divide-rule">
                {data.indicators_recently_updated.slice(0, 15).map((ind) => (
                  <li key={ind.id}>
                    <Link href={routes.indicator(ind.slug)} className="group grid min-h-[48px] grid-cols-[1fr_auto] items-center gap-x-4 py-2">
                      <span className="min-w-0">
                        <span className="block truncate text-sm text-ink group-hover:text-accent">{ind.name ?? ind.slug}</span>
                        <span className="block truncate text-xs text-ink-3">
                          {topicById(ind.topic ?? '')?.short ?? ind.topic}
                          {ind.primary_source_id ? ` · ${ind.primary_source_id}` : ''}
                        </span>
                      </span>
                      <span className="tnum text-right text-xs text-ink-2">
                        <span className="block">{formatDate(ind.latest_source_updated_at)}</span>
                        {ind.last_year ? <span className="block text-ink-3">→ {ind.last_year}</span> : null}
                      </span>
                    </Link>
                  </li>
                ))}
              </ul>
            </Section>
          </div>
        </>
      )}
    </>
  );
}