import Link from "next/link";
import { api } from "@/lib/api";
import { fmtInt } from "@/lib/format";
import { Bar, Empty, Panel } from "./ui";

/** Homepage rail: Global Observation Coverage Score by sector (server component). */
export async function CoverageRail() {
  const c = await api.coverage();
  return (
    <Panel title={<span>Observation coverage {c ? <span className={`font-mono ${c.global_score >= 60 ? "text-signal" : "text-high"}`}>{c.global_score.toFixed(1)}</span> : null}</span>} dense action={<Link href="/coverage" className="text-[11px] text-fg-subtle hover:text-fg">coverage →</Link>}>
      {!c || !c.sectors.length ? (
        <Empty>Coverage universes are loading.</Empty>
      ) : (
        <ul className="px-3 py-1.5 text-[12px]">
          {c.sectors.slice(0, 10).map((s) => (
            <li key={s.sector} className="grid grid-cols-[7.5rem_1fr_2.5rem] items-center gap-2 py-0.5">
              <Link href={`/coverage/${s.sector}`} className="truncate text-fg-muted hover:text-fg" title={`${fmtInt(s.covered)} / ${fmtInt(s.members)} observed`}>{s.label}</Link>
              <Bar value={s.score} tone={s.score >= 80 ? "signal" : s.score >= 60 ? "high" : s.score >= 40 ? "mid" : "info"} />
              <span className="text-right font-mono tabular text-fg-muted">{Math.round(s.score)}%</span>
            </li>
          ))}
          <li className="pt-1 text-[10.5px] text-fg-subtle">{fmtInt(c.covered)} / {fmtInt(c.members)} organizations · {fmtInt(c.monitored.shadow)} sensors in shadow</li>
        </ul>
      )}
    </Panel>
  );
}