import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader, Section, Note } from '@/components/ui/section';
import { Badge } from '@/components/ui/badge';
import { EmptyState } from '@/components/ui/empty-state';
import { listMetrics } from '@/lib/queries/rankings';
import { humanize, unitLabel } from '@/lib/format';

export const metadata: Metadata = { title: 'Rankings', description: 'Transparent cancer rankings: one metric, one scope, one formula version per table, with lineage for every rank.' };
export const dynamic = 'force-dynamic';

const CATEGORY_ORDER = ['burden', 'lethality', 'trials', 'research', 'trend', 'molecular', 'unmet_need', 'rarity', 'treatment', 'composite'];
const CATEGORY_LABEL: Record<string, string> = { burden: 'Burden', lethality: 'Lethality', trials: 'Clinical research', research: 'Research activity', trend: 'Trends', molecular: 'Molecular knowledge', unmet_need: 'Gap indexes', rarity: 'Rarity', treatment: 'Treatment', composite: 'Composite' };

export default async function RankingsIndex() {
  const metrics = await listMetrics();
  const byCat = new Map<string, typeof metrics>();
  for (const m of metrics) byCat.set(m.category, [...(byCat.get(m.category) ?? []), m]);
  const cats = [...byCat.keys()].sort((a, b) => CATEGORY_ORDER.indexOf(a) - CATEGORY_ORDER.indexOf(b));
  const computed = metrics.filter((m) => m.snapshot_count > 0).length;

  return (
    <div>
      <PageHeader kicker="Rankings" title="Rankings" lede="Every ranking is one metric, in one scope (geography · sex · age · year · entity level), under one formula version. No composite 'worst cancer' score is published in this phase.">
        <p className="mt-3 text-[13px] text-ink-2">
          <span className="ci-num font-medium">{computed}</span> of <span className="ci-num">{metrics.length}</span> metrics currently have a computed snapshot.
        </p>
      </PageHeader>

      <Note tone="warn">"Deadliest cancer" has no single answer. Annual deaths, age-standardized mortality rate, mortality-to-incidence ratio and 5-year survival each rank cancers differently and are published as separate metrics. Pick the question before reading the table.</Note>

      {metrics.length === 0 ? (
        <div className="mt-6">
          <EmptyState title="Metric catalog not seeded">The metric definitions table is empty on this environment. Run the database seed.</EmptyState>
        </div>
      ) : (
        <div className="mt-6 space-y-8">
          {cats.map((cat) => (
            <Section key={cat} id={cat} kicker="Category" title={CATEGORY_LABEL[cat] ?? humanize(cat)}>
              <div className="ci-table-wrap">
                <table className="ci-table">
                  <thead>
                    <tr>
                      <th>Metric</th>
                      <th>Unit</th>
                      <th>Direction</th>
                      <th>Scopes</th>
                      <th className="num">Snapshots</th>
                      <th>Sources</th>
                      <th>Formula version</th>
                    </tr>
                  </thead>
                  <tbody>
                    {(byCat.get(cat) ?? []).map((m) => (
                      <tr key={m.slug}>
                        <td className="min-w-[220px]">
                          <Link className="ci-link font-medium" href={`/rankings/${m.slug}`}>
                            {m.name}
                          </Link>
                          {m.experimental ? <Badge tone="warn" className="ml-1">experimental</Badge> : null}
                          <p className="mt-0.5 max-w-[520px] text-[12px] text-ink-3">{m.description}</p>
                        </td>
                        <td>{unitLabel(m.unit)}</td>
                        <td className="text-[12.5px]">{m.higher_is_worse == null ? 'neutral' : m.higher_is_worse ? 'higher = worse' : 'higher = better'}</td>
                        <td className="text-[12px] text-ink-3">{m.valid_dimensions.join(', ')}</td>
                        <td className="num">{m.snapshot_count > 0 ? m.snapshot_count : <span className="text-ink-4" title="No snapshot computed yet">—</span>}</td>
                        <td className="text-[12px]">
                          {m.source_slugs.map((s) => (
                            <Link key={s} href={`/source/${s}`} className="ci-mono mr-1 text-ink-2 hover:text-accent">
                              {s}
                            </Link>
                          ))}
                        </td>
                        <td>
                          <span className="ci-mono text-[11.5px]">{m.formula_version}</span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Section>
          ))}
        </div>
      )}
    </div>
  );
}