import Link from 'next/link';
import type { ReactNode } from 'react';
import { Badge, ClaimBadge, StatusBadge } from '@/components/ui/badge';
import { SourceBadge, TableProvenance, type ProvenanceInfo } from '@/components/ui/source-badge';
import type { TrialListRow } from '@/lib/queries/trials';
import { fmtDate, fmtInt, phaseLabel } from '@/lib/format';

const CT: ProvenanceInfo = { sourceSlug: 'clinicaltrials', sourceName: 'ClinicalTrials.gov', dataset: 'ClinicalTrials.gov API v2 studies', layer: 'normalized' };

/**
 * Dense trial table. All rows come from one registry, so the provenance popover is rendered once in
 * the caption (with the latest retrieval date of the page) and each row carries a compact badge.
 */
export function TrialTable({ rows, summary }: { rows: TrialListRow[]; summary?: ReactNode }) {
  const latest = rows.reduce<Date | string | null>((m, t) => (m == null || String(t.updated_at) > String(m) ? t.updated_at : m), null);
  return (
    <div>
      <TableProvenance p={{ ...CT, retrievedAt: latest }} claim={<ClaimBadge kind="published" />}>
        {summary ?? `${fmtInt(rows.length)} stud${rows.length === 1 ? 'y' : 'ies'}`} · status and phase as posted by the registrant; each row links to the study record.
      </TableProvenance>
      <div className="ci-table-wrap">
        <table className="ci-table">
          <thead>
            <tr>
              <th scope="col">NCT</th>
              <th scope="col">Title</th>
              <th scope="col">Status</th>
              <th scope="col">Phase</th>
              <th scope="col" className="num">
                Enrollment (n)
              </th>
              <th scope="col">Sponsor</th>
              <th scope="col" className="num">
                Countries
              </th>
              <th scope="col">Last update</th>
              <th scope="col">Source</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((t) => (
              <tr key={t.id}>
                <td>
                  <Link href={`/trial/${t.nct_id}`} className="ci-mono ci-link">
                    {t.nct_id}
                  </Link>
                </td>
                <td className="min-w-[280px] max-w-[520px]">
                  <Link href={`/trial/${t.nct_id}`} className="text-ink no-underline hover:text-accent">
                    {t.brief_title}
                  </Link>
                  {t.acronym ? <span className="ml-1 text-[12px] text-ink-3">({t.acronym})</span> : null}
                </td>
                <td>
                  <StatusBadge status={t.overall_status} />
                </td>
                <td className="whitespace-nowrap">{t.phases.length ? t.phases.map(phaseLabel).join(' / ') : <span className="text-ink-4">—</span>}</td>
                <td className="num">{t.enrollment_count == null ? '—' : fmtInt(t.enrollment_count)}</td>
                <td className="max-w-[220px] truncate text-[12.5px]" title={t.lead_sponsor ?? ''}>
                  {t.lead_sponsor ?? '—'}
                  {t.lead_sponsor_class ? (
                    <Badge tone="outline" className="ml-1">
                      {t.lead_sponsor_class}
                    </Badge>
                  ) : null}
                </td>
                <td className="num">{t.countries.length}</td>
                <td className="whitespace-nowrap text-[12.5px]">{fmtDate(t.last_update_posted_date)}</td>
                <td>
                  <SourceBadge compact title={null} p={CT} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}