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, ConfidenceBadge } from '@/components/ui/badge';
import { gapRankings } from '@/lib/queries/rankings';
import { fmtDate, fmtInt, fmtValue, scopeLabel } from '@/lib/format';

/**
 * Home module "Largest trial gaps / research gaps" (§105, §328, §265-266): the gap indexes from the current
 * ranking snapshots for a geography. Rendered only when snapshots exist; each row exposes the two percentiles
 * that produced the value (lineage stored on the ranking row).
 */
export async function GapsModule({ geo = 'USA', limit = 8 }: { geo?: string; limit?: number }) {
  const gaps = await gapRankings(geo, limit);
  return (
    <Section
      id="gaps"
      kicker="Unmet need"
      title="Largest trial and research gaps"
      description="Burden percentile minus activity percentile within the same scope. Positive values flag cancers with high mortality burden but comparatively few active trials (trial gap) or little recent literature (research gap). A quantitative signal, not an accusation."
      actions={
        <Link href="/rankings" className="ci-link">
          All rankings →
        </Link>
      }
    >
      {gaps.length === 0 ? (
        <EmptyState title="Gap indexes not yet computed">
          Trial and research gap indexes require a burden snapshot (deaths per top-level cancer for one geography and year) plus trial and literature counters. Nothing is shown until such a snapshot exists.
        </EmptyState>
      ) : (
        <div className="grid gap-6 lg:grid-cols-2">
          {gaps.map(({ metric, snapshot, rows }) => (
            <div key={metric.slug} className="min-w-0">
              <p className="mb-1 flex flex-wrap items-baseline justify-between gap-x-2">
                <Link href={`/rankings/${metric.slug}?scope=${encodeURIComponent(snapshot.scope_key)}`} className="ci-link font-medium">
                  {metric.name}
                </Link>
                <span className="text-[11.5px] text-ink-3">{scopeLabel(snapshot.scope_key)}</span>
              </p>
              <div className="ci-table-wrap">
                <table className="ci-table">
                  <thead>
                    <tr>
                      <th className="num">#</th>
                      <th>Cancer</th>
                      <th className="num">Gap (pct. points)</th>
                      <th className="num">Deaths</th>
                      <th className="num">{metric.slug === 'trial_gap' ? 'Active trials' : 'Publications 5y'}</th>
                      <th>Confidence</th>
                    </tr>
                  </thead>
                  <tbody>
                    {rows.map((r) => (
                      <tr key={r.id}>
                        <td className="num">{r.rank}</td>
                        <td>
                          <Link className="ci-link" href={`/cancer/${r.slug}/rankings`}>
                            {r.canonical_name}
                          </Link>
                        </td>
                        <td className={`num font-medium ${r.value > 0 ? 'text-danger' : ''}`}>{fmtValue(r.value, r.unit)}</td>
                        <td className="num">{fmtInt(r.inputs.deaths as number | undefined)}</td>
                        <td className="num">{fmtInt(r.inputs.activity as number | undefined)}</td>
                        <td>
                          <ConfidenceBadge level={r.confidence} />
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <p className="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11.5px] text-ink-3">
                <ClaimBadge kind="computed" />
                <span>
                  formula <code className="ci-mono">{metric.formula}</code> · <span className="ci-mono">{snapshot.formula_version}</span>
                </span>
                <span>sources: {snapshot.source_ids.join(', ')}</span>
                <span>{fmtInt(snapshot.eligible_entities)} eligible</span>
              </p>
              <p className="mt-1 text-[11.5px] text-ink-3">
                {metric.slug === 'trial_gap' ? 'Caveat: trial counts aggregate a cancer and its NCIt descendants; trials registered at a broader level (e.g. "colorectal") are attributed to the broader entity and can overstate the gap of narrower sites.' : 'Caveat: literature counts are query-based per entity and not aggregated over descendants.'}{' '}
                <Link className="ci-link" href="/methodology#gap-caveat">
                  Read the caveat
                </Link>
              </p>
              <Freshness dataUpdatedAt={snapshot.generated_at} extra={`snapshot generated ${fmtDate(snapshot.generated_at)}`} />
            </div>
          ))}
        </div>
      )}
    </Section>
  );
}