import Link from 'next/link';
import { Badge, ClaimBadge, StatusBadge } from '@/components/ui/badge';
import { SourceBadge, TableProvenance } from '@/components/ui/source-badge';
import type { ApprovalRow } from '@/lib/queries/drugs';
import type { ProvRow } from '@/lib/queries/provenance';
import { toInfo } from '@/lib/queries/provenance';
import { fmtDate, fmtInt } from '@/lib/format';
import { Pager } from '@/components/ui/pager';
import { pageInfo } from '@/lib/pagination';

/**
 * Jurisdiction-aware regulatory status (§13). Never a bare "approved". Approvals may come from
 * different authorities' datasets, so rows keep a compact badge with a dataset · version title;
 * the caption carries one full popover (first row's provenance) and the claim label.
 */
export function ApprovalsTable({ rows: allRows, prov, showDrug = true, showCancer = true, page = 1, pageSize = 50, hrefFor }: { rows: ApprovalRow[]; prov: Map<number, ProvRow>; showDrug?: boolean; showCancer?: boolean; page?: number; pageSize?: number; hrefFor?: (page: number) => string }) {
  // Optional server-side pagination (URL state); without hrefFor the first page only is shown with a count.
  const info = pageInfo(page, pageSize, allRows.length);
  const rows = allRows.slice(info.offset, info.offset + pageSize);
  const first = rows[0];
  const caption = first ? (toInfo(prov.get(first.provenance_id)) ?? { sourceSlug: first.source_slug, sourceName: first.source_name }) : null;
  const sources = new Set(rows.map((r) => r.source_slug));
  return (
    <div>
      {caption ? (
        <TableProvenance p={caption} claim={<ClaimBadge kind="regulatory" />}>
          {fmtInt(rows.length)} approval record{rows.length === 1 ? '' : 's'}
          {sources.size > 1 ? ` from ${sources.size} sources (hover a row badge for its dataset)` : ''} · authority, jurisdiction and indication text as published.
        </TableProvenance>
      ) : null}
      <div className="ci-table-wrap">
        <table className="ci-table">
          <thead>
            <tr>
              {showDrug ? <th scope="col">Drug</th> : null}
              <th scope="col">Jurisdiction · authority</th>
              {showCancer ? <th scope="col">Cancer</th> : null}
              <th scope="col">Indication</th>
              <th scope="col">Status</th>
              <th scope="col">Approval date</th>
              <th scope="col">Source</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((a) => (
              <tr key={a.id}>
                {showDrug ? (
                  <td>
                    <Link className="ci-link" href={`/drug/${a.drug_slug}`}>
                      {a.drug_name}
                    </Link>
                  </td>
                ) : null}
                <td className="whitespace-nowrap">
                  <span className="ci-mono font-medium">{a.jurisdiction}</span> <span className="text-ink-3">{a.authority}</span>
                </td>
                {showCancer ? (
                  <td>
                    {a.tumor_agnostic ? <Badge tone="accent">Tumor-agnostic</Badge> : null}
                    {a.cancer_slug ? (
                      <Link className="ci-link" href={`/cancer/${a.cancer_slug}`}>
                        {a.cancer_name}
                      </Link>
                    ) : !a.tumor_agnostic ? (
                      <span className="text-ink-3">—</span>
                    ) : null}
                  </td>
                ) : null}
                <td className="min-w-[280px] max-w-[520px] text-[12.5px]">
                  {a.indication}
                  <span className="mt-0.5 flex flex-wrap gap-1">
                    {a.line_of_therapy ? <Badge tone="outline">{a.line_of_therapy}</Badge> : null}
                    {a.disease_stage ? <Badge tone="outline">{a.disease_stage}</Badge> : null}
                    {a.accelerated ? <Badge tone="warn">accelerated</Badge> : null}
                    {a.conditional ? <Badge tone="warn">conditional</Badge> : null}
                    {a.biomarker_ids.length ? <Badge tone="outline">biomarker-restricted</Badge> : null}
                  </span>
                </td>
                <td>
                  <StatusBadge status={a.status} />
                  {a.source_status && a.source_status.toLowerCase() !== a.status ? (
                    <span className="block text-[11px] text-ink-3" title="Status as published by the source for this one product (DIN); not the status of the molecule.">
                      source: {a.source_status}
                    </span>
                  ) : null}
                  {a.withdrawal_date ? <span className="block text-[11px] text-danger">since {fmtDate(a.withdrawal_date)}</span> : null}
                </td>
                <td className="whitespace-nowrap">{fmtDate(a.approval_date)}</td>
                <td>
                  <SourceBadge compact p={toInfo(prov.get(a.provenance_id)) ?? { sourceSlug: a.source_slug, sourceName: a.source_name }} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {hrefFor ? <Pager total={allRows.length} pageSize={pageSize} page={info.page} hrefFor={hrefFor} label="Approval pages" noun="approval records" /> : allRows.length > rows.length ? <p className="mt-1 text-[12px] text-ink-3">Showing {rows.length} of {fmtInt(allRows.length)} approval records.</p> : null}
    </div>
  );
}