import { listRuns, listWorkers, overviewCounts } from "@autoscholar/core";
import { papers, securityEvents } from "@autoscholar/db";
import { desc, sql } from "drizzle-orm";
import Link from "next/link";
import { StatusBadge } from "@/components/StatusBadge";
import { ago, fmtDateTime, fmtUsd } from "@/lib/format";
import { db } from "@/lib/server/db";

export const dynamic = "force-dynamic";

export default async function Overview() {
  const d = db();
  const counts = await overviewCounts(d);
  const workers = await listWorkers(d);
  const [pubs] = await d.select({ n: sql<number>`count(*)::int` }).from(papers);
  const alerts = await d.select().from(securityEvents).orderBy(desc(securityEvents.createdAt)).limit(8);
  const recent = await listRuns(d, { limit: 8 });
  const tiles: Array<[string, number]> = [
    ["Running", (counts.byStatus.running ?? 0) + (counts.byStatus.provisioning ?? 0)],
    ["Queued", (counts.byStatus.queued ?? 0) + (counts.byStatus.retrying ?? 0)],
    ["Blocked", (counts.byStatus.quality_failed ?? 0) + (counts.byStatus.awaiting_approval ?? 0)],
    ["Completed", counts.byStatus.published ?? 0],
    ["Failed", (counts.byStatus.failed ?? 0) + (counts.byStatus.cancelled ?? 0)],
  ];
  const online = workers.filter((w) => w.status === "online" || w.status === "draining");
  return (
    <div className="space-y-8">
      <header className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <p className="eyebrow">Command center</p>
          <h1 className="serif mt-1 text-2xl font-semibold">Overview</h1>
        </div>
        <Link href="/admin/new" className="btn btn-primary">
          New research
        </Link>
      </header>
      <section aria-label="Job counts" className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
        {tiles.map(([l, n]) => (
          <div key={l} className="surface p-4">
            <p className="label">{l}</p>
            <p className="serif mt-1 text-2xl">{n}</p>
          </div>
        ))}
        <div className="surface p-4">
          <p className="label">Provider spend</p>
          <p className="serif mt-1 text-2xl">{fmtUsd(counts.totalCostUsd)}</p>
          <p className="subtle text-xs">client-side estimate</p>
        </div>
      </section>
      <section className="grid gap-6 lg:grid-cols-2">
        <div className="surface p-4">
          <div className="flex items-center justify-between">
            <h2 className="serif text-lg font-semibold">MacLustr workers</h2>
            <Link href="/admin/maclustr" className="text-xs">
              Details
            </Link>
          </div>
          <p className="muted text-xs">
            {online.length} of {workers.length} online · {pubs?.n ?? 0} publications
          </p>
          <ul className="mt-3 space-y-2 text-sm">
            {workers.length === 0 && (
              <li className="muted">
                No worker has enrolled yet. Install the worker daemon on a MacLustr node (docs/OPERATIONS.md).
              </li>
            )}
            {workers.map((w) => (
              <li key={w.id} className="flex items-center justify-between gap-2">
                <span className="font-mono">{w.name}</span>
                <span className="flex items-center gap-2">
                  <StatusBadge status={w.status} />
                  <span className="subtle text-xs">
                    {w.running}/{w.capacity} · {ago(w.lastHeartbeatAt)}
                  </span>
                </span>
              </li>
            ))}
          </ul>
        </div>
        <div className="surface p-4">
          <div className="flex items-center justify-between">
            <h2 className="serif text-lg font-semibold">Security alerts</h2>
            <Link href="/admin/settings" className="text-xs">
              Audit log
            </Link>
          </div>
          <ul className="mt-3 space-y-1 text-xs">
            {alerts.length === 0 && <li className="muted">No security events recorded.</li>}
            {alerts.map((a) => (
              <li key={a.id} className="flex justify-between gap-2">
                <span>
                  <span className="font-mono">{a.kind}</span>{" "}
                  <span className="muted">{JSON.stringify(a.detail).slice(0, 80)}</span>
                </span>
                <span className="subtle whitespace-nowrap">{fmtDateTime(a.createdAt)}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>
      <section className="surface p-4">
        <div className="flex items-center justify-between">
          <h2 className="serif text-lg font-semibold">Recent runs</h2>
          <Link href="/admin/runs" className="text-xs">
            All runs
          </Link>
        </div>
        <table className="table mt-3">
          <thead>
            <tr>
              <th>Title</th>
              <th>Status</th>
              <th>Stage</th>
              <th>Attempt</th>
              <th>Cost</th>
              <th>Updated</th>
            </tr>
          </thead>
          <tbody>
            {recent.length === 0 && (
              <tr>
                <td colSpan={6} className="muted py-6 text-center">
                  No runs yet. Upload a research instruction to start.
                </td>
              </tr>
            )}
            {recent.map((r) => (
              <tr key={r.id}>
                <td>
                  <Link href={`/admin/runs/${r.id}`}>{r.title}</Link>
                </td>
                <td>
                  <StatusBadge status={r.status} />
                </td>
                <td className="font-mono text-xs">{r.currentStage ?? "—"}</td>
                <td>
                  {r.currentAttemptNo}/{r.maxAttempts}
                </td>
                <td>{fmtUsd(r.totalCostUsd)}</td>
                <td className="subtle text-xs">{ago(r.updatedAt)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </div>
  );
}