import Link from 'next/link';
import { Section } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { Freshness } from '@/components/ui/freshness';
import { Badge, ClaimBadge, StatusBadge } from '@/components/ui/badge';
import { SourceBadge } from '@/components/ui/source-badge';
import { recentApprovals } from '@/lib/queries/approvals';
import { fmtDate, toDate } from '@/lib/format';

/**
 * Home module "New oncology approvals": the last dated approval records across every ingested
 * authority (one record = one authority's decision for one application/DIN — never a bare
 * "approved"). Regulatory claim label; source badge per row because authorities differ.
 */
export async function ApprovalsModule({ limit = 8 }: { limit?: number }) {
  const rows = await recentApprovals(limit);
  return (
    <Section
      id="approvals"
      kicker="Regulatory"
      title="New oncology approvals"
      description="Latest dated approval records by authority and jurisdiction. A record is one decision for one application or DIN; Health Canada records do not state indications."
      actions={
        <Link href="/approvals" className="ci-link">
          Approvals feed →
        </Link>
      }
    >
      {rows.length === 0 ? (
        <EmptyState knows={[{ label: 'Drugs', href: '/drugs' }, { label: 'Sources', href: '/sources' }]}>No regulatory approval record has been ingested yet.</EmptyState>
      ) : (
        <>
          <div className="ci-table-wrap">
            <table className="ci-table">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Drug</th>
                  <th>Authority</th>
                  <th>Cancer</th>
                  <th>Status</th>
                  <th>Source</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((a) => (
                  <tr key={a.id}>
                    <td className="whitespace-nowrap">{fmtDate(a.approval_date)}</td>
                    <td>
                      <Link className="ci-link font-medium" href={`/drug/${a.drug_slug}#approvals`}>
                        {a.drug_name}
                      </Link>
                      {a.approval_type ? <span className="ml-1.5 ci-mono text-[11px] text-ink-3">{a.approval_type}</span> : null}
                    </td>
                    <td className="whitespace-nowrap">
                      <span className="text-ink-2">{a.authority}</span> <Badge mono tone="outline">{a.jurisdiction}</Badge>
                    </td>
                    <td className="text-[12.5px]">
                      {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">not stated in this record</span>
                      ) : null}
                    </td>
                    <td>
                      <StatusBadge status={a.status} />
                    </td>
                    <td>
                      <SourceBadge compact p={{ sourceSlug: a.source_slug, sourceName: a.source_name }} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="mt-2 flex flex-wrap items-center gap-1.5 text-[12px] text-ink-3">
            <ClaimBadge kind="regulatory" />
            <span>Jurisdiction-specific and time-bound; not a treatment recommendation.</span>
          </div>
          <Freshness dataUpdatedAt={rows.map((r) => toDate(r.updated_at)).filter((d): d is Date => !!d).sort((a, b) => b.getTime() - a.getTime())[0] ?? null} sourceUpdatedAt={rows[0]?.approval_date ?? null} />
        </>
      )}
    </Section>
  );
}