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 { ClaimBadge } from '@/components/ui/badge';
import type { MapCountryDatum } from '@/components/charts/world-map';
import { countryCounts } from '@/lib/queries/trial-sites';
import { fmtInt } from '@/lib/format';

/**
 * Home module: compact choropleth of RECRUITING trial sites per country, all cancers, any phase
 * (precomputed by `pnpm cix intel`). Links to the full map with filters and its data table. The
 * country list under the map keeps the module readable without colour or hover.
 */
export async function TrialMapModule({ topN = 8 }: { topN?: number }) {
  const rows = await countryCounts({ cancerId: null, phase: null, recruitingOnly: true });
  const totalSites = rows.reduce((s, r) => s + r.sites, 0);
  const data: MapCountryDatum[] = rows.map((r) => ({ country: r.country, iso3: r.iso3, sites: r.sites, trials: r.trials, href: `/trials?country=${encodeURIComponent(r.country)}&status=RECRUITING` }));
  return (
    <Section
      id="trial-map"
      kicker="Where trials recruit"
      title="Recruiting trial sites by country"
      description="Study locations with status RECRUITING (or in a recruiting study when the site has no status), all cancers, any phase. A site is one registrant-entered location; multi-site studies weigh by their number of sites."
      actions={
        <Link href="/trials/map?recruiting=1" className="ci-link">
          Full choropleth map and filters →
        </Link>
      }
    >
      {rows.length === 0 ? (
        <EmptyState title="Trial map not yet computed" compact>
          Country aggregates appear after <code className="ci-mono">pnpm cix intel</code> has run on ingested ClinicalTrials.gov locations.
        </EmptyState>
      ) : (
        <div>
          <div className="min-w-0">
            <div className="ci-table-wrap">
              <table className="ci-table" id="trial-map-top">
                <thead>
                  <tr>
                    <th className="num">#</th>
                    <th>Country</th>
                    <th className="num">Recruiting sites</th>
                    <th className="num">Trials</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.slice(0, topN).map((r, i) => (
                    <tr key={r.country}>
                      <td className="num">{i + 1}</td>
                      <td>
                        <Link href={data[i]!.href} className="ci-link">
                          {r.country}
                        </Link>
                      </td>
                      <td className="num">{fmtInt(r.sites)}</td>
                      <td className="num">{fmtInt(r.trials)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p className="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11.5px] text-ink-3">
              <ClaimBadge kind="computed" />
              <span>
                {fmtInt(totalSites)} recruiting sites · {fmtInt(rows.length)} countries · <span className="ci-mono">{rows[0]?.formula_version}</span> · source: clinicaltrials
              </span>
            </p>
            <Freshness dataUpdatedAt={rows[0]?.computed_at ?? null} extra="registrant-entered locations" />
          </div>
        </div>
      )}
    </Section>
  );
}