import Link from 'next/link';
import { Section } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { Freshness } from '@/components/ui/freshness';
import { ClaimBadge } from '@/components/ui/badge';
import { SourceBadge } from '@/components/ui/source-badge';
import { ExplorerChart } from '@/components/charts/explorer-chart';
import { resolveGeographyRef, topCancersByLatest, yearRangeFor, explorerObservations, explorerOptions } from '@/lib/queries/explorer';
import { EPI_METRIC_LABEL } from '@/lib/queries/epidemiology';
import { groupComparable } from '@/lib/explorer-series';
import { serializeExplorerParams, type ExplorerState } from '@/lib/explorer-params';
import { fmtDate, fmtInt, humanize, toDate, unitLabel } from '@/lib/format';

/**
 * Home module: the explorer's default chart — the five top-level cancers with the highest annual deaths
 * in the latest year (computed, not curated), one comparable group only (a single source and standard),
 * with the source line and a link that opens the same selection in /explore.
 */
export async function ExplorerModule({ metric = 'mortality_count', geographySlug = 'united-states', n = 5 }: { metric?: string; geographySlug?: string; n?: number }) {
  const [geo, options] = await Promise.all([resolveGeographyRef(geographySlug), explorerOptions()]);
  const hasMetric = options.metrics.some((m) => m.metric === metric);
  const top = geo && hasMetric ? await topCancersByLatest(metric, geo.id, 'all', 'all', n) : null;
  const range = geo && hasMetric ? await yearRangeFor(metric, geo.id) : null;
  const obs = geo && top && top.cancers.length > 0 ? await explorerObservations({ metric, cancerIds: top.cancers.map((c) => c.id), geographyId: geo.id, sex: 'all', age: 'all', from: range?.min ?? null, to: range?.max ?? null }) : [];
  const groups = groupComparable(obs);
  const g = groups[0];
  const metricLabel = EPI_METRIC_LABEL[metric] ?? humanize(metric);
  const state: ExplorerState | null =
    geo && top
      ? { metric, cancers: top.cancers.map((c) => c.slug), geography: geo.slug, sex: 'all', age: 'all', from: range?.min ?? null, to: range?.max ?? null, view: 'lines', normalize: 'none', page: 1 }
      : null;
  const href = state ? `/explore${serializeExplorerParams(state)}` : '/explore';
  const prov = g ? obs.filter((o) => o.source_slug === g.source_slug).sort((a, b) => String(b.retrieved_at ?? '') .localeCompare(String(a.retrieved_at ?? '')))[0] : undefined;
  const freshest = obs.map((o) => toDate(o.updated_at)).filter((d): d is Date => !!d).sort((a, b) => b.getTime() - a.getTime())[0] ?? null;

  return (
    <Section
      id="explorer"
      kicker="Data explorer"
      title={g ? `${metricLabel} · ${g.geography_name} · ${g.year_min}–${g.year_max}` : 'Data explorer'}
      description={g && top ? `The ${top.cancers.length} top-level cancers with the highest ${metricLabel.toLowerCase()} in ${top.year}, both sexes, all ages, ${unitLabel(g.unit)} per site group as published by ${g.source_name ?? g.source_slug}. Selection computed from the observations; every metric, cancer, geography, sex, age group and year is one click away.` : 'Chart and download registry observations by metric, cancer, geography, sex, age group and year.'}
      actions={
        <Link href={href} className="ci-link">
          Open in the Data explorer →
        </Link>
      }
    >
      {!g ? (
        <EmptyState title="Data not yet available">
          The explorer chart appears once a licensed registry connector has ingested {metricLabel.toLowerCase()} observations{geo ? ` for ${geo.name}` : ''}.{' '}
          <Link className="ci-link" href="/explore/coverage">
            Coverage matrix
          </Link>
        </EmptyState>
      ) : (
        <>
          <ExplorerChart series={g.series.map((s, i) => ({ name: s.name, points: s.points, dashed: s.dashed, slot: i }))} unit={g.unit} ariaLabel={`${metricLabel} in ${g.geography_name}, ${g.year_min}–${g.year_max}, ${g.series.length} cancers, source ${g.source_slug}`} />
          {/* div, not p: the SourceBadge popover contains a <dl>. */}
          <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[12px] text-ink-3">
            <SourceBadge p={{ sourceSlug: g.source_slug, sourceName: g.source_name, dataset: prov?.dataset ?? null, datasetVersion: prov?.dataset_version ?? null, retrievedAt: prov?.retrieved_at ?? null, sourceUrl: prov?.source_url ?? null, license: prov?.source_license ?? null, layer: 'normalized', evidenceType: 'observed_data' }} />
            <ClaimBadge kind="observed" />
            <span>
              {g.source_name ?? g.source_slug}
              {prov?.retrieved_at ? ` (retrieved ${fmtDate(prov.retrieved_at)})` : ''} · {fmtInt(g.n_obs)} observations · {unitLabel(g.unit)} · both sexes · all ages
              {g.standard_population ? ` · standard: ${g.standard_population}` : ''}
            </span>
            {groups.length > 1 ? (
              <span>
                · {groups.length - 1} other source{groups.length > 2 ? 's' : ''} publish{groups.length > 2 ? '' : 'es'} this metric — shown separately in the explorer, never overlaid
              </span>
            ) : null}
          </div>
          <Freshness dataUpdatedAt={freshest} sourceVersion={prov?.dataset_version ?? null} />
        </>
      )}
    </Section>
  );
}