import Link from 'next/link';
import { Badge, ClaimBadge, MatchBadge, isExactMatch } from '@/components/ui/badge';
import { SourceBadge, TableProvenance } from '@/components/ui/source-badge';
import { Freshness } from '@/components/ui/freshness';
import type { FreqRow } from '@/lib/queries/genomics';
import type { ProvRow } from '@/lib/queries/provenance';
import { toInfo } from '@/lib/queries/provenance';
import { fmtInt, fmtPct, humanize } from '@/lib/format';
import { Pager } from '@/components/ui/pager';
import { pageInfo } from '@/lib/pagination';

/**
 * Gene alteration frequencies with mandatory denominators (§260-261), one table per cohort.
 * Every row of a cohort table shares one provenance (one cohort, one release), so the popover is
 * rendered once per cohort in the caption; rows carry the compact badge.
 */
export function FrequencyTables({ rows, prov, cohortFilter, showCancer = false }: { rows: FreqRow[]; prov: Map<number, ProvRow>; cohortFilter?: string | null; showCancer?: boolean }) {
  const cohorts = new Map<string, FreqRow[]>();
  for (const r of rows) {
    if (cohortFilter && r.cohort_id !== cohortFilter) continue;
    if (!cohorts.has(r.cohort_id)) cohorts.set(r.cohort_id, []);
    cohorts.get(r.cohort_id)!.push(r);
  }
  return (
    <div className="space-y-8">
      {[...cohorts.entries()].map(([cohortId, rs]) => {
        const c = rs[0]!;
        const info = toInfo(prov.get(c.provenance_id)) ?? { sourceSlug: c.source_slug, sourceName: c.source_name, datasetVersion: c.data_release };
        return (
          <section key={cohortId} aria-label={c.cohort_name}>
            <header className="mb-1.5 flex flex-wrap items-baseline justify-between gap-2">
              <h3 className="font-sans text-[15px] font-medium">
                {c.cohort_name} <span className="ci-mono text-[12px] text-ink-3">{c.study_id}</span>
                {c.program ? <Badge className="ml-2">{c.program}</Badge> : null}
              </h3>
              <p className="text-[12.5px] text-ink-3">
                {c.cases_with_ssm != null ? (
                  <>
                    <span className="ci-num">{fmtInt(c.cases_with_ssm)}</span> cases with simple somatic mutation data
                  </>
                ) : null}
                {c.case_count != null ? (
                  <>
                    {' '}
                    · <span className="ci-num">{fmtInt(c.case_count)}</span> cases total
                  </>
                ) : null}
                {c.data_release ? <span className="ci-mono"> · {c.data_release}</span> : null}
                {showCancer && c.cancer_slug ? (
                  <>
                    {' '}
                    · mapped to{' '}
                    <Link className="ci-link" href={`/cancer/${c.cancer_slug}`}>
                      {c.cancer_name}
                    </Link>{' '}
                    <MatchBadge matchType={c.cancer_match_type} />
                  </>
                ) : null}
              </p>
            </header>
            <TableProvenance p={info} claim={<ClaimBadge kind="observed" />}>
              {rs.length} gene{rs.length === 1 ? '' : 's'} · frequency = affected / profiled, as published by the cohort.
            </TableProvenance>
            <div className="ci-table-wrap">
              <table className="ci-table">
                <thead>
                  <tr>
                    <th scope="col" className="num">
                      #
                    </th>
                    <th scope="col">Gene</th>
                    <th scope="col">Alteration</th>
                    <th scope="col" className="num">
                      Affected (n)
                    </th>
                    <th scope="col" className="num">
                      Profiled (n)
                    </th>
                    <th scope="col" className="num">
                      Frequency (%)
                    </th>
                    <th scope="col">Source</th>
                  </tr>
                </thead>
                <tbody>
                  {rs.map((r, i) => (
                    <tr key={r.id}>
                      <td className="num text-ink-3">{r.rank ?? i + 1}</td>
                      <td>
                        <Link className="ci-mono ci-link font-medium" href={`/gene/${r.gene_symbol}`}>
                          {r.gene_symbol}
                        </Link>
                      </td>
                      <td>
                        <Badge tone="outline">{humanize(r.alteration_type)}</Badge>
                      </td>
                      <td className="num">{fmtInt(r.cases_affected)}</td>
                      <td className="num">{fmtInt(r.cases_profiled)}</td>
                      <td className="num font-medium">{fmtPct(r.frequency, 1)}</td>
                      <td>
                        <SourceBadge compact title={null} p={info} />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <Freshness dataUpdatedAt={c.updated_at} sourceVersion={c.data_release} />
          </section>
        );
      })}
    </div>
  );
}

/**
 * Gene-centric view: one compact row per cohort (used on /gene/[symbol]); denominators stay mandatory.
 * Rows come from different cohorts (different releases), so each compact badge carries a `title`
 * with dataset · version · retrieved; the caption shows one popover for the source.
 */
export function GeneFrequencyTable({ rows, prov, page = 1, pageSize = 50, hrefFor }: { rows: FreqRow[]; prov: Map<number, ProvRow>; page?: number; pageSize?: number; hrefFor?: (page: number) => string }) {
  const all = [...rows].sort((a, b) => b.frequency - a.frequency);
  const info = pageInfo(page, pageSize, all.length);
  const sorted = all.slice(info.offset, info.offset + pageSize);
  const first = sorted[0];
  const caption = first ? (toInfo(prov.get(first.provenance_id)) ?? { sourceSlug: first.source_slug, sourceName: first.source_name }) : null;
  return (
    <div>
      {caption ? (
        <TableProvenance p={caption} claim={<ClaimBadge kind="observed" />}>
          {all.length} cohort row{all.length === 1 ? '' : 's'}{all.length > sorted.length ? ` (showing ${sorted.length}, sorted by frequency)` : ''} · frequency = affected / profiled, as published by each cohort; cohorts are not pooled. Hover a row badge for its release.
        </TableProvenance>
      ) : null}
      <div className="ci-table-wrap">
        <table className="ci-table">
          <thead>
            <tr>
              <th scope="col">Cohort</th>
              <th scope="col">Mapped cancer</th>
              <th scope="col">Alteration</th>
              <th scope="col" className="num">
                Affected (n)
              </th>
              <th scope="col" className="num">
                Profiled (n)
              </th>
              <th scope="col" className="num">
                Frequency (%)
              </th>
              <th scope="col" className="num">
                Rank in cohort
              </th>
              <th scope="col">Source</th>
            </tr>
          </thead>
          <tbody>
            {sorted.map((r) => (
              <tr key={r.id}>
                <td>
                  <span className="font-medium">{r.cohort_name}</span> <span className="ci-mono text-[11.5px] text-ink-3">{r.study_id}</span>
                </td>
                <td>
                  {r.cancer_slug ? (
                    <>
                      <Link className="ci-link" href={`/cancer/${r.cancer_slug}`}>
                        {r.cancer_name}
                      </Link>
                      {!isExactMatch(r.cancer_match_type) ? <MatchBadge matchType={r.cancer_match_type} className="ml-1" /> : null}
                    </>
                  ) : (
                    <span className="text-ink-3">unmapped</span>
                  )}
                </td>
                <td>
                  <Badge tone="outline">{humanize(r.alteration_type)}</Badge>
                </td>
                <td className="num">{fmtInt(r.cases_affected)}</td>
                <td className="num">{fmtInt(r.cases_profiled)}</td>
                <td className="num font-medium">{fmtPct(r.frequency, 1)}</td>
                <td className="num text-ink-3">{r.rank ?? '—'}</td>
                <td>
                  <SourceBadge compact p={toInfo(prov.get(r.provenance_id)) ?? { sourceSlug: r.source_slug, sourceName: r.source_name, dataset: r.cohort_name, datasetVersion: r.data_release }} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {hrefFor ? <Pager total={all.length} pageSize={pageSize} page={info.page} hrefFor={hrefFor} label="Cohort pages" noun="cohorts" className="mt-2 text-[12px]" /> : null}
    </div>
  );
}