import Link from 'next/link';
import { Fragment, type ReactNode } from 'react';
import { Badge, ClaimBadge, MatchBadge, StatusBadge, isExactMatch } from '@/components/ui/badge';
import { SourceBadge, TableProvenance } from '@/components/ui/source-badge';
import { EVIDENCE_LEVEL_LABEL, EVIDENCE_DESCRIPTION_CHARS, groupEvidence, therapyKey, type EvidenceItem, type EvidenceGroupBy } from '@/lib/queries/evidence';
import type { ProvRow } from '@/lib/queries/provenance';
import { toInfo } from '@/lib/queries/provenance';
import { humanize } from '@/lib/format';

const CIVIC = { sourceSlug: 'civic', sourceName: 'CIViC' };

function Direction({ e }: { e: EvidenceItem }) {
  const dir = e.evidence_direction ?? '—';
  const sig = e.significance ?? '';
  const tone = dir === 'DOES_NOT_SUPPORT' ? 'warn' : sig.includes('RESIST') ? 'danger' : sig.includes('SENSITIV') ? 'ok' : 'neutral';
  return (
    <>
      <Badge tone={tone}>{humanize(dir)}</Badge>
      {sig ? (
        <>
          {' '}
          <Badge tone="outline">{humanize(sig.replace('SENSITIVITYRESPONSE', 'SENSITIVITY_RESPONSE'))}</Badge>
        </>
      ) : null}
    </>
  );
}

/**
 * CIViC evidence in ONE dense table. Rows are grouped (by molecular profile → therapy, or by cancer
 * on variant pages) with a `<tbody>` per group and a row-group header, instead of one table per
 * group: a table header is rendered once, which halves the markup for pages with many small groups
 * (every element ships twice — HTML + RSC payload). Levels, directions and significance are shown
 * in their native form (§3, never collapsed to works/doesn't). One provenance popover for the whole
 * table (all rows come from one CIViC release); rows carry a compact badge.
 *
 * `summary` replaces the default "N evidence items" sentence — pass the page window when the caller
 * paginates ("Showing 1–50 of 405 evidence items").
 */
export function EvidenceTable({ items, prov, showCancer = false, groupBy = 'variant', summary }: { items: EvidenceItem[]; prov: Map<number, ProvRow>; showCancer?: boolean; groupBy?: EvidenceGroupBy; summary?: ReactNode }) {
  const groups = groupEvidence(items, groupBy);
  const first = items[0] ? toInfo(prov.get(items[0].provenance_id)) : null;
  const cancerCol = showCancer && groupBy !== 'cancer';
  const profileCol = groupBy === 'cancer';
  const cols = 7 + (cancerCol ? 1 : 0) + (profileCol ? 1 : 0);
  return (
    <div>
      <TableProvenance p={first ?? CIVIC} claim={<ClaimBadge kind="curated" />}>
        {summary ?? `${items.length} evidence item${items.length === 1 ? '' : 's'}`} · levels, directions and significance as curated at the source; each row links to its CIViC record.
      </TableProvenance>
      <div className="ci-table-wrap">
        <table className="ci-table ci-evidence">
          <thead>
            <tr>
              {profileCol ? <th scope="col">Molecular profile</th> : null}
              <th scope="col">Therapy</th>
              {cancerCol ? <th scope="col">Cancer</th> : null}
              <th scope="col">Type</th>
              <th scope="col" title="CIViC evidence level: A validated · B clinical · C case study · D preclinical · E inferential">
                Level
              </th>
              <th scope="col" title="Evidence direction and clinical significance as curated at the source">
                Direction · significance
              </th>
              <th scope="col" className="num">
                Rating (1–5)
              </th>
              <th scope="col">Status</th>
              <th scope="col">Evidence</th>
              <th scope="col">Source</th>
            </tr>
          </thead>
          {groups.map((g) => (
            <tbody key={g.key}>
              {groupBy !== 'none' ? (
                <tr className="ci-group">
                  <th scope="rowgroup" colSpan={cols}>
                    {g.href ? (
                      <Link href={g.href}>
                        {g.label}
                      </Link>
                    ) : (
                      <span>{g.label}</span>
                    )}
                    {g.genes.length > 1
                      ? g.genes.map((s) => (
                          <Link key={s} href={`/gene/${s}`} className="ci-mono ml-2 text-[12px] text-ink-3 hover:text-accent">
                            {s}
                          </Link>
                        ))
                      : null}
                    <span className="ci-num ml-2 text-[12px] text-ink-3">{g.items.length}</span>
                    {g.unmapped ? (
                      <Badge tone="danger" className="ml-2">
                        unmapped disease
                      </Badge>
                    ) : null}
                  </th>
                </tr>
              ) : null}
              {g.items.map((e, i) => {
                const prevKey = i > 0 ? therapyKey(g.items[i - 1]!) : null;
                const sameTherapy = prevKey === therapyKey(e) && groupBy === 'variant';
                const desc = e.description ?? '';
                const cut = desc.length >= EVIDENCE_DESCRIPTION_CHARS;
                return (
                  <tr key={e.id}>
                    {profileCol ? <td className="w-t text-[12.5px]">{e.molecular_profile_name ?? e.name ?? '—'}</td> : null}
                    <td className="w-t">
                      {sameTherapy ? (
                        <span className="text-ink-4" aria-label="same therapy as the row above">
                          〃
                        </span>
                      ) : e.therapy_slugs?.length ? (
                        e.therapy_slugs.map((s, j) => (
                          <Fragment key={s}>
                            {j > 0 ? ' + ' : ''}
                            <Link href={`/drug/${s}`}>
                              {e.therapy_slug_names?.[j] ?? s}
                            </Link>
                          </Fragment>
                        ))
                      ) : (
                        <span className="text-ink-3">{therapyLabel(e)}</span>
                      )}
                      {e.therapy_interaction_type && !sameTherapy ? <span className="block text-[11px] text-ink-3">{humanize(e.therapy_interaction_type)}</span> : null}
                    </td>
                    {cancerCol ? (
                      <td className="w-t">
                        {e.cancer_slug ? (
                          <Link href={`/cancer/${e.cancer_slug}`}>
                            {e.cancer_name}
                          </Link>
                        ) : (
                          <span className="text-ink-3">{e.disease_name ?? '—'}</span>
                        )}
                        {/* Exact mappings are the norm; only non-exact ones (alias, broader, probabilistic, unresolved) carry the caveat badge. */}
                        {!isExactMatch(e.cancer_match_type) ? <MatchBadge matchType={e.cancer_match_type} className="ml-1" /> : null}
                      </td>
                    ) : null}
                    <td>
                      <Badge>{humanize(e.evidence_type)}</Badge>
                    </td>
                    <td>
                      <abbr {...(e.evidence_level && EVIDENCE_LEVEL_LABEL[e.evidence_level] ? { title: EVIDENCE_LEVEL_LABEL[e.evidence_level] } : {})}>
                        {e.evidence_level ?? '—'}
                      </abbr>
                    </td>
                    <td>
                      <Direction e={e} />
                    </td>
                    <td className="num">{e.evidence_rating ?? '—'}</td>
                    <td>
                      <StatusBadge status={e.status} />
                    </td>
                    <td className="ev">
                      <details>
                        <summary>EID{e.civic_id}</summary>
                        <p>
                          {desc ? `${desc}${cut ? '…' : ''}` : 'No description at source.'}
                          {cut ? <span className="text-ink-3"> (full text at CIViC)</span> : null}
                        </p>
                        <p>
                          {e.pmid ? (
                            <>
                              PMID{' '}
                              <a href={`https://pubmed.ncbi.nlm.nih.gov/${e.pmid}/`} target="_blank">
                                {e.pmid}
                              </a>
                              {e.source_citation ? <span className="text-ink-3"> · {e.source_citation}</span> : null}
                              {' · '}
                            </>
                          ) : null}
                          <a href={`https://civicdb.org/evidence/${e.civic_id}/summary`} target="_blank">
                            Open in CIViC
                          </a>
                        </p>
                      </details>
                    </td>
                    <td>
                      <SourceBadge compact title={null} p={toInfo(prov.get(e.provenance_id)) ?? CIVIC} />
                    </td>
                  </tr>
                );
              })}
            </tbody>
          ))}
        </table>
      </div>
    </div>
  );
}

function therapyLabel(e: EvidenceItem): string {
  if (e.therapy_names.length) return e.therapy_names.join(' + ');
  return e.evidence_type === 'PREDICTIVE' ? 'Unspecified therapy' : `(${(e.evidence_type ?? 'evidence').toLowerCase()})`;
}