import Link from 'next/link';
import { Section } from '@/components/ui/section';
import { Badge } from '@/components/ui/badge';
import { EmptyState } from '@/components/ui/empty-state';
import { listSnapshots } from '@/lib/queries/rankings';
import { fmtDateTime, fmtInt, scopeLabel } from '@/lib/format';

export default async function AdminRankingsPage() {
  const snaps = await listSnapshots(300);
  return (
    <div className="space-y-6">
      <header className="pt-4">
        <h1 className="text-3xl">Ranking snapshots</h1>
        <p className="mt-1 text-[13.5px] text-ink-2">Every snapshot ever generated (current and superseded). Run `pnpm cix rank` to compute.</p>
      </header>
      <Section id="snapshots" title={`${fmtInt(snaps.length)} snapshots`} kicker="Newest first">
        {snaps.length ? (
          <div className="ci-table-wrap">
            <table className="ci-table">
              <thead>
                <tr>
                  <th className="num">Id</th>
                  <th>Metric</th>
                  <th>Scope</th>
                  <th>Formula</th>
                  <th className="num">Eligible</th>
                  <th className="num">Rows</th>
                  <th>Current</th>
                  <th>Generated</th>
                  <th>Inputs hash</th>
                </tr>
              </thead>
              <tbody>
                {snaps.map((s) => (
                  <tr key={s.id}>
                    <td className="num">{s.id}</td>
                    <td>
                      <Link className="ci-link" href={`/rankings/${s.metric_slug}?scope=${encodeURIComponent(s.scope_key)}`}>
                        {s.metric_name}
                      </Link>
                    </td>
                    <td className="text-[12.5px]">{scopeLabel(s.scope_key)}</td>
                    <td className="ci-mono text-[11.5px]">{s.formula_version}</td>
                    <td className="num">{fmtInt(s.eligible_entities)}</td>
                    <td className="num">{fmtInt(s.row_count)}</td>
                    <td>{s.is_current ? <Badge tone="ok">current</Badge> : <Badge tone="outline">superseded</Badge>}</td>
                    <td className="whitespace-nowrap text-[12.5px]">{fmtDateTime(s.generated_at)}</td>
                    <td className="ci-mono text-[11px] text-ink-3">{s.inputs_hash}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState compact title="No snapshot">The ranking engine has not produced any snapshot on this environment.</EmptyState>
        )}
      </Section>
    </div>
  );
}