import { listRuns, listWorkers, overviewCounts } from "@autoscholar/core";
import { papers, securityEvents } from "@autoscholar/db";
import { STAGES } from "@autoscholar/schemas";
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: 10 });
  const active = recent.filter((r) =>
    ["running", "provisioning", "queued", "retrying", "quality_check", "publishing"].includes(r.status),
  );
  const tiles: Array<[string, number, string]> = [
    [
      "Running",
      (counts.byStatus.running ?? 0) + (counts.byStatus.provisioning ?? 0),
      "var(--color-info-500)",
    ],
    ["Queued", (counts.byStatus.queued ?? 0) + (counts.byStatus.retrying ?? 0), "var(--fg-muted)"],
    [
      "Needs attention",
      (counts.byStatus.quality_failed ?? 0) + (counts.byStatus.awaiting_approval ?? 0),
      "var(--color-warn-500)",
    ],
    ["Published", counts.byStatus.published ?? 0, "var(--color-ok-500)"],
    [
      "Failed / cancelled",
      (counts.byStatus.failed ?? 0) + (counts.byStatus.cancelled ?? 0),
      "var(--color-danger-500)",
    ],
  ];
  const online = workers.filter((w) => w.status === "online" || w.status === "draining");
  return (
    <div className="space-y-6">
      <header className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <p className="eyebrow">Command center</p>
          <h1 className="title-2 mt-1">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 xl:grid-cols-6">
        {tiles.map(([l, n, c]) => (
          <div key={l} className="surface p-4">
            <p className="label">{l}</p>
            <p className="serif mt-1 text-3xl" style={{ color: n > 0 ? c : undefined }}>
              {n}
            </p>
          </div>
        ))}
        <div className="surface p-4">
          <p className="label">Provider spend</p>
          <p className="serif mt-1 text-3xl">{fmtUsd(counts.totalCostUsd)}</p>
          <p className="subtle text-xs">client-side estimate</p>
        </div>
      </section>

      {active.length > 0 && (
        <section className="surface p-4" aria-labelledby="active">
          <h2 id="active" className="title-3">
            Active research
          </h2>
          <ul className="mt-3 divide-y hairline">
            {active.map((r) => {
              const idx = STAGES.findIndex((s) => s.key === r.currentStage);
              const pct = Math.max(4, Math.round(((idx + 1) / STAGES.length) * 100));
              return (
                <li key={r.id} className="grid gap-2 py-3 sm:grid-cols-12 sm:items-center">
                  <div className="min-w-0 sm:col-span-5">
                    <Link
                      href={`/admin/runs/${r.id}`}
                      className="block truncate font-medium no-underline hover:underline"
                    >
                      {r.title}
                    </Link>
                    <p className="subtle mt-0.5 font-mono text-[11px]">{r.id}</p>
                  </div>
                  <div className="sm:col-span-4">
                    <div className="flex items-center justify-between text-xs">
                      <span className="font-mono">{r.currentStage ?? "—"}</span>
                      <span className="subtle">{idx >= 0 ? `${idx + 1}/${STAGES.length}` : ""}</span>
                    </div>
                    <div className="mt-1 h-1.5 rounded-full" style={{ background: "var(--bg-muted)" }}>
                      <div
                        className="h-1.5 rounded-full"
                        style={{ width: `${pct}%`, background: "var(--sci)" }}
                      />
                    </div>
                  </div>
                  <div className="flex items-center justify-between gap-2 text-xs sm:col-span-3 sm:justify-end">
                    <StatusBadge status={r.status} />
                    <span className="subtle">
                      {fmtUsd(r.totalCostUsd)} · {ago(r.updatedAt)}
                    </span>
                  </div>
                </li>
              );
            })}
          </ul>
        </section>
      )}

      <section className="grid gap-4 lg:grid-cols-2">
        <div className="surface p-4">
          <div className="flex items-center justify-between">
            <h2 className="title-3">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="title-3">Security alerts</h2>
            <Link href="/admin/settings" className="text-xs">
              Audit log
            </Link>
          </div>
          <ul className="mt-3 space-y-1.5 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 className="min-w-0 truncate">
                  <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="title-3">Recent runs</h2>
          <Link href="/admin/runs" className="text-xs">
            All runs
          </Link>
        </div>
        <div className="table-wrap mt-3">
          <table className="table">
            <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 className="max-w-[18rem]">
                    <Link href={`/admin/runs/${r.id}`} className="block truncate">
                      {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>
        </div>
      </section>
    </div>
  );
}