import Link from 'next/link';
import { Section, Note } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { ClaimBadge, ConfidenceBadge } from '@/components/ui/badge';
import { JsonView } from '@/components/ui/json-view';
import { rankingsForCancer } from '@/lib/queries/rankings';
import { fmtDate, fmtInt, fmtValue, scopeLabel, unitLabel } from '@/lib/format';
import { latestYearPerScope } from '@/lib/rankings-util';
import { CancerGapCard } from '@/components/research-gap/cancer-gap-card';
import type { CancerBundle } from '../load';

function Delta({ rank, prev }: { rank: number; prev: number | null }) {
  if (prev == null) return <span className="text-ink-4" title="No previous snapshot for this scope">new</span>;
  const d = prev - rank;
  if (d === 0) return <span className="text-ink-3">=</span>;
  return (
    <span className={d > 0 ? 'text-ok' : 'text-danger'} title={`Previous rank ${prev}`}>
      {d > 0 ? '▲' : '▼'} {Math.abs(d)}
    </span>
  );
}

export async function RankingsTab({ b }: { b: CancerBundle }) {
  const allRows = await rankingsForCancer(b.cancer.id);
  // One row per (metric, geography, sex, age, level): the latest year only. Historical years stay on the ranking pages.
  const { rows, hidden: hiddenYears } = latestYearPerScope(allRows);
  if (rows.length === 0) {
    return (
      <Section id="rankings" kicker="Rankings" title="Why this rank?">
        <EmptyState title="Not ranked yet" knows={[{ label: 'All rankings', href: '/rankings' }, { label: 'Methodology', href: '/methodology' }]}>
          This entity appears in no current ranking snapshot. Rankings are computed per metric and scope (geography, sex, age, year, entity level) once the underlying counters or licensed observations exist; an entity with a zero counter is ranked only when the metric admits zeros.
        </EmptyState>
      </Section>
    );
  }
  return (
    <div className="space-y-6">
      <Section id="rankings" kicker="Rankings" title="Why this rank?" description={`${fmtInt(rows.length)} current ranking rows (latest year per scope${hiddenYears > 0 ? `; ${fmtInt(hiddenYears)} earlier yearly snapshots are on the ranking pages` : ''}). Each row lists the scope, the formula version, the value and the exact inputs that produced it.`}>
        <div className="ci-table-wrap">
          <table className="ci-table">
            <thead>
              <tr>
                <th scope="col">Metric</th>
                <th scope="col">Scope</th>
                <th scope="col" className="num">
                  Rank / eligible
                </th>
                <th scope="col" className="num">
                  <abbr title="Change versus the previous snapshot">Δ</abbr>
                </th>
                <th scope="col" className="num">
                  Value
                </th>
                <th scope="col" className="num">
                  Percentile
                </th>
                <th scope="col">Confidence</th>
                <th scope="col">Formula</th>
                <th scope="col">Generated</th>
                <th scope="col">Inputs</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.id}>
                  <td>
                    <Link className="ci-link" href={`/rankings/${r.metric_slug}?scope=${encodeURIComponent(r.scope_key)}`}>
                      {r.metric_name}
                    </Link>
                  </td>
                  <td className="text-[12.5px] text-ink-2">{scopeLabel(r.scope_key)}</td>
                  <td className="num">
                    <span className="font-medium">#{r.rank}</span> <span className="text-ink-3">/ {fmtInt(r.eligible_entities)}</span>
                  </td>
                  <td className="num">
                    <Delta rank={r.rank} prev={r.previous_rank} />
                  </td>
                  <td className="num">
                    {fmtValue(r.value, r.unit)} <span className="text-[11px] text-ink-3">{unitLabel(r.unit)}</span>
                  </td>
                  <td className="num">{r.percentile}</td>
                  <td>
                    <ConfidenceBadge level={r.confidence} />
                  </td>
                  <td>
                    <span className="ci-mono text-[11.5px]">{r.formula_version}</span>
                  </td>
                  <td className="whitespace-nowrap text-[12.5px]">{fmtDate(r.generated_at)}</td>
                  <td>
                    <details>
                      <summary className="ci-link text-[12.5px]">show</summary>
                      <div className="mt-1 max-w-[420px]">
                        <p className="ci-mono mb-1 text-[11px] text-ink-3">formula: {r.formula}</p>
                        <JsonView data={r.inputs} />
                        <p className="ci-mono mt-1 text-[11px] text-ink-3">inputs hash {r.inputs_hash}</p>
                        <Link href={`/admin/trace?table=rankings&id=${r.id}`} className="ci-link text-[11.5px]">
                          Trace lineage (admin)
                        </Link>
                      </div>
                    </details>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="mt-2 flex items-center gap-2 text-[12px] text-ink-3">
          <ClaimBadge kind="computed" /> Ranks are competition ranks (ties share a rank). Percentile = share of eligible entities ranked at or below this one in the ranking direction.
        </p>
      </Section>
      <Note>"Deadliest" is ambiguous: annual deaths, age-standardized mortality rate, mortality-to-incidence ratio and 5-year survival rank cancers differently. CancerIndex publishes each as a separate metric.</Note>
      <CancerGapCard cancerId={b.cancer.id} />
    </div>
  );
}