import Link from 'next/link';
import { ExternalLink } from 'lucide-react';
import { fmtDate } from '@/lib/format';

export interface ProvenanceInfo {
  sourceSlug: string;
  sourceName?: string | null;
  dataset?: string | null;
  datasetVersion?: string | null;
  retrievedAt?: Date | string | null;
  sourceUrl?: string | null;
  layer?: 'raw' | 'normalized' | 'canonical' | 'derived' | 'ranked';
  license?: string | null;
  evidenceType?: string | null;
  pmid?: string | null;
  ingestRunId?: string | null;
  note?: string | null;
}

/** One-line provenance summary for `title` attributes on compact badges (dataset · version · retrieved). */
export function provenanceTitle(p: ProvenanceInfo): string {
  const bits = [p.sourceName ?? p.sourceSlug];
  if (p.dataset) bits.push(p.dataset);
  if (p.datasetVersion) bits.push(`version ${p.datasetVersion}`);
  if (p.retrievedAt) bits.push(`retrieved ${fmtDate(p.retrievedAt)}`);
  if (p.layer === 'derived' || p.layer === 'ranked') bits.push('computed by CancerIndex');
  return bits.join(' · ');
}

/**
 * Small source badge; hover / focus reveals the provenance popover (source, dataset, version,
 * retrieved date, raw vs normalized, link). CSS-only so it works inside server components.
 *
 * `compact`: link only, no popover — for dense tables. When every row shares one source/dataset the
 * popover is shown once in the table caption; when provenance genuinely differs per row (e.g.
 * epidemiology observations from different datasets/years) pass `title` (or let it default to a
 * dataset · version · retrieved summary) so the detail stays one hover away without the markup.
 */
export function SourceBadge({ p, className = '', compact = false, title }: { p: ProvenanceInfo; className?: string; compact?: boolean; title?: string | null }) {
  if (compact) {
    // The visible slug is the link text; the "Source" column header gives the context and `title`
    // (dataset · version · retrieved) is exposed as the accessible description. No aria-label
    // duplicate: every attribute here is repeated hundreds of times per page (HTML + RSC payload).
    const t = title === null ? undefined : (title ?? (p.dataset || p.datasetVersion ? provenanceTitle(p) : undefined));
    const extra = t ? { title: t } : {};
    return (
      <Link href={`/source/${p.sourceSlug}`} className={`ci-src${className ? ` ${className}` : ''}`} {...extra}>
        {p.sourceSlug}
      </Link>
    );
  }
  return (
    <span className={`ci-pop ${className}`}>
      <Link href={`/source/${p.sourceSlug}`} className="ci-src" aria-label={`Source: ${p.sourceName ?? p.sourceSlug}. Open provenance.`}>
        {p.sourceSlug}
      </Link>
      <span className="ci-pop-panel" role="tooltip">
        <span className="ci-kicker block">Provenance</span>
        <dl className="mt-1 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5">
          <dt className="text-ink-3">Source</dt>
          <dd>{p.sourceName ?? p.sourceSlug}</dd>
          {p.dataset ? (
            <>
              <dt className="text-ink-3">Dataset</dt>
              <dd>{p.dataset}</dd>
            </>
          ) : null}
          {p.datasetVersion ? (
            <>
              <dt className="text-ink-3">Version</dt>
              <dd className="ci-mono">{p.datasetVersion}</dd>
            </>
          ) : null}
          {p.retrievedAt ? (
            <>
              <dt className="text-ink-3">Retrieved</dt>
              <dd>{fmtDate(p.retrievedAt)}</dd>
            </>
          ) : null}
          <dt className="text-ink-3">Layer</dt>
          <dd>{p.layer === 'derived' || p.layer === 'ranked' ? `${p.layer} (computed by CancerIndex)` : p.layer === 'raw' ? 'raw (as published)' : `${p.layer ?? 'normalized'} (units and labels harmonized; values unchanged)`}</dd>
          {p.evidenceType ? (
            <>
              <dt className="text-ink-3">Evidence</dt>
              <dd>{p.evidenceType.replace(/_/g, ' ')}</dd>
            </>
          ) : null}
          {p.license ? (
            <>
              <dt className="text-ink-3">License</dt>
              <dd>{p.license}</dd>
            </>
          ) : null}
          {p.pmid ? (
            <>
              <dt className="text-ink-3">PMID</dt>
              <dd className="ci-mono">{p.pmid}</dd>
            </>
          ) : null}
          {p.ingestRunId ? (
            <>
              <dt className="text-ink-3">Run</dt>
              <dd className="ci-mono break-all">{p.ingestRunId}</dd>
            </>
          ) : null}
        </dl>
        {p.note ? <span className="mt-1 block text-ink-3">{p.note}</span> : null}
        {p.sourceUrl ? (
          <a className="ci-link mt-1.5 inline-flex items-center gap-1" href={p.sourceUrl} target="_blank" rel="noopener noreferrer">
            Open at source <ExternalLink className="h-3 w-3" aria-hidden />
          </a>
        ) : null}
      </span>
    </span>
  );
}

/**
 * Table caption used by every dense list: ONE provenance popover for the whole table, the claim
 * label and a count sentence. Rows then carry compact badges only.
 */
export function TableProvenance({ p, claim, children, className = '' }: { p: ProvenanceInfo; claim?: React.ReactNode; children?: React.ReactNode; className?: string }) {
  return (
    // <div>, not <p>: the popover contains a <dl>, which the HTML parser would close a <p> on (React #418 in production).
    <div className={`mb-2 flex flex-wrap items-center gap-2 text-[12px] text-ink-3 ${className}`}>
      <SourceBadge p={p} />
      {claim}
      {children ? <span>{children}</span> : null}
    </div>
  );
}