"use client";

import Link from "next/link";
import { Badge, Button, EmptyState, RelativeTime, SkeletonRows, Table, TBody, Td, Th, THead, Tr } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtInt } from "@/lib/format";
import type { OpsOverview } from "@/lib/admin-api";
import { durationBetween, ErrorNote, fmtBytes, fmtMs, HealthDot, JsonView, KV, Mono, Panel, RefreshButton, RunStatusBadge, Stat } from "./primitives";
import { AdminPageHeader } from "./shell";
import { useToast } from "./toast";
import { useAdminMutation, useAdminQuery } from "./use-admin-query";

const REFRESH_MS = 30_000;

function num(v: unknown): number | null {
  return typeof v === "number" && Number.isFinite(v) ? v : typeof v === "string" && v.trim() !== "" && Number.isFinite(Number(v)) ? Number(v) : null;
}
function str(v: unknown): string | null {
  return typeof v === "string" ? v : null;
}

/** Best-effort reading of the worker heartbeat (shape is free-form JSON published by the worker). */
function readWorker(w: unknown): { heartbeat: string | null; host: string | null; pid: number | null; running: Array<Record<string, unknown>> | number | null; version: string | null; rest: Record<string, unknown> } | null {
  if (!w || typeof w !== "object") return null;
  const o = w as Record<string, unknown>;
  const heartbeat = str(o.heartbeat) ?? str(o.at) ?? str(o.ts) ?? str(o.updatedAt) ?? str(o.time) ?? str(o.lastHeartbeat) ?? null;
  const host = str(o.host) ?? str(o.hostname) ?? null;
  const pid = num(o.pid);
  const runningRaw = o.running ?? o.activeRuns ?? o.jobs ?? o.active ?? null;
  const running = Array.isArray(runningRaw) ? (runningRaw as Array<Record<string, unknown>>) : num(runningRaw);
  const version = str(o.version) ?? null;
  const rest: Record<string, unknown> = {};
  for (const [k, v] of Object.entries(o)) if (!["heartbeat", "at", "ts", "updatedAt", "time", "lastHeartbeat", "host", "hostname", "pid", "running", "activeRuns", "jobs", "active", "version"].includes(k)) rest[k] = v;
  return { heartbeat, host, pid, running, version, rest };
}

function BudgetBar({ label, used, limit }: { label: string; used: number; limit: number }) {
  const share = limit > 0 ? Math.min(1, used / limit) : 0;
  const tone = share >= 0.9 ? "bg-danger" : share >= 0.6 ? "bg-warn" : "bg-ink-2";
  return (
    <div>
      <div className="flex items-baseline justify-between text-[12.5px]">
        <span className="text-ink-2">{label}</span>
        <span className="figure text-ink">
          {fmtInt(used)} <span className="text-ink-4">/ {fmtInt(limit)} credits</span>
        </span>
      </div>
      <div className="mt-1 h-1.5 w-full rounded-full bg-surface-3">
        <div className={cn("h-full rounded-full", tone)} style={{ width: `${share * 100}%` }} />
      </div>
    </div>
  );
}

export function OpsOverviewView() {
  const q = useAdminQuery<OpsOverview>("ops", { refreshMs: REFRESH_MS, timeoutMs: 20_000 });
  const { busy, run } = useAdminMutation();
  const toast = useToast();
  const d = q.data;
  const worker = readWorker(d?.worker);
  // age measured against the time the ops payload arrived (state) — keeps render pure
  const hbAge = worker?.heartbeat && q.updatedAt ? q.updatedAt - new Date(worker.heartbeat).getTime() : null;
  const workerOk = worker ? (hbAge == null ? true : hbAge < 90_000) : false;
  const budgets = d?.budgets;
  const used = budgets?.used ?? {};
  const scrapflyUsed = used.scrapfly?.credits ?? (typeof budgets?.["dci:budget:scrapfly"] === "string" ? Number(budgets["dci:budget:scrapfly"]) : 0) ?? 0;
  const firecrawlUsed = used.firecrawl?.credits ?? (typeof budgets?.["dci:budget:firecrawl"] === "string" ? Number(budgets["dci:budget:firecrawl"]) : 0) ?? 0;

  const maintenance = async (task: "rankings" | "metrics" | "refresh-stats") => {
    const r = await run<{ enqueued: boolean; job?: { id?: string } }>(`m:${task}`, `maintenance/${task}`, { body: {} });
    if (r.ok) toast({ tone: "ok", title: `Enqueued ${task}`, description: r.data.job?.id ? `job ${r.data.job.id}` : undefined });
    else toast({ tone: "danger", title: `Could not enqueue ${task}`, description: r.error });
  };
  const invalidate = async () => {
    const r = await run<{ invalidated: number }>("cache", "cache/invalidate", { body: { prefix: "" } });
    if (r.ok) toast({ tone: "ok", title: "API cache invalidated", description: `${fmtInt(r.data.invalidated)} entries` });
    else toast({ tone: "danger", title: "Cache invalidation failed", description: r.error });
  };
  const resolve = async (id: string) => {
    const r = await run<{ resolved: boolean }>(`alert:${id}`, `alerts/${id}/resolve`, { body: {} });
    if (r.ok) {
      q.mutate((prev) => (prev ? { ...prev, alerts: prev.alerts.filter((a) => a.id !== id) } : prev));
      toast({ tone: "ok", title: "Alert resolved" });
    } else toast({ tone: "danger", title: "Could not resolve alert", description: r.error });
  };

  return (
    <div>
      <AdminPageHeader title="Operations" description="Worker, queues, premium budgets, storage health and the latest runs. Auto-refreshes every 30 s." aside={<RefreshButton onClick={() => void q.refresh()} busy={q.refreshing} updatedAt={q.updatedAt} />} />
      <ErrorNote error={q.error && !d ? `Ops endpoint unavailable: ${q.error}` : null} onRetry={() => void q.refresh()} className="mb-3" />

      {/* health strip */}
      <div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
        <Stat label="Worker" tone={d ? (workerOk ? "ok" : "danger") : undefined} value={d ? (worker ? (workerOk ? "alive" : "stale") : "offline") : "…"} note={worker?.heartbeat ? <RelativeTime iso={worker.heartbeat} /> : d ? "no heartbeat key" : undefined} />
        <Stat label="Postgres" tone={d ? "ok" : undefined} value={d?.db.sizePretty ?? "…"} note={d ? `${fmtInt(d.db.tables.reduce((a, t) => a + t.rows, 0))} rows (est.)` : undefined} />
        <Stat label="Redis" tone={d ? (d.redis.ok ? "ok" : "danger") : undefined} value={d ? (d.redis.ok ? "ok" : "down") : "…"} note={d ? `cache ${fmtInt(d.apiCache.entries)}/${fmtInt(d.apiCache.max)}` : undefined} />
        <Stat label="ClickHouse" tone={d ? (d.clickhouse.ok ? "ok" : "danger") : undefined} value={d ? (d.clickhouse.ok ? "ok" : "down") : "…"} note={d ? <Mono>{d.clickhouse.url.replace(/^https?:\/\//, "")}</Mono> : undefined} />
        <Stat label="MinIO" tone={d ? (d.minio.ok ? "ok" : "danger") : undefined} value={d ? (d.minio.ok ? "ok" : "down") : "…"} note={d ? <Mono>{d.minio.bucket}</Mono> : undefined} />
        <Stat label="Open alerts" tone={d ? (d.alerts.length ? "warn" : "ok") : undefined} value={d ? fmtInt(d.alerts.length) : "…"} note={d?.alerts.length ? `${d.alerts.filter((a) => a.level === "error" || a.level === "critical").length} error-level` : undefined} />
      </div>

      <div className="grid gap-3 lg:grid-cols-3">
        <Panel title="Worker" description="Heartbeat published in Redis (dci:worker:status)">
          {!d ? (
            <SkeletonRows rows={3} />
          ) : !worker ? (
            <EmptyState compact title="No worker heartbeat" description="The worker process is not publishing its status. Jobs will queue until it starts." />
          ) : (
            <div className="space-y-2">
              <KV
                items={[
                  { k: "Heartbeat", v: worker.heartbeat ? <RelativeTime iso={worker.heartbeat} /> : DASH },
                  { k: "Host", v: worker.host ? <Mono>{worker.host}</Mono> : DASH },
                  { k: "PID", v: worker.pid != null ? <Mono>{worker.pid}</Mono> : DASH },
                  { k: "Version", v: worker.version ? <Mono>{worker.version}</Mono> : DASH },
                  { k: "Running jobs", v: Array.isArray(worker.running) ? fmtInt(worker.running.length) : worker.running != null ? fmtInt(worker.running) : DASH },
                ]}
              />
              {Array.isArray(worker.running) && worker.running.length > 0 && (
                <ul className="space-y-1 text-[12px]">
                  {worker.running.slice(0, 8).map((j, i) => (
                    <li key={i} className="flex items-center gap-2">
                      <HealthDot health="running" />
                      <Mono>{str(j.connectorId) ?? str(j.id) ?? JSON.stringify(j).slice(0, 60)}</Mono>
                      {str(j.task) && <Badge size="xs">{str(j.task)}</Badge>}
                    </li>
                  ))}
                </ul>
              )}
              {Object.keys(worker.rest).length > 0 && <JsonView value={worker.rest} maxHeight={160} collapsible />}
            </div>
          )}
        </Panel>

        <Panel title="Queues" description="BullMQ counts (prefix dci)" padded={false}>
          {!d ? (
            <div className="p-3">
              <SkeletonRows rows={3} />
            </div>
          ) : (
            <Table responsive={false} className="text-[12.5px]">
              <THead>
                <Tr>
                  <Th className="pl-3">Queue</Th>
                  <Th numeric>Wait</Th>
                  <Th numeric>Prio</Th>
                  <Th numeric>Active</Th>
                  <Th numeric>Delay</Th>
                  <Th numeric>Done</Th>
                  <Th numeric className="pr-3">
                    Failed
                  </Th>
                </Tr>
              </THead>
              <TBody>
                {Object.entries(d.queues).map(([name, c]) => (
                  <Tr key={name}>
                    <Td className="pl-3">
                      <Mono>{name.replace(/^dci:/, "")}</Mono>
                    </Td>
                    <Td numeric>{fmtInt(c.waiting ?? 0)}</Td>
                    <Td numeric>{fmtInt(c.prioritized ?? 0)}</Td>
                    <Td numeric className={cn((c.active ?? 0) > 0 && "text-accent")}>
                      {fmtInt(c.active ?? 0)}
                    </Td>
                    <Td numeric>{fmtInt(c.delayed ?? 0)}</Td>
                    <Td numeric muted>
                      {fmtInt(c.completed ?? 0)}
                    </Td>
                    <Td numeric className={cn("pr-3", (c.failed ?? 0) > 0 && "text-danger")}>
                      {fmtInt(c.failed ?? 0)}
                    </Td>
                  </Tr>
                ))}
                {Object.keys(d.queues).length === 0 && (
                  <Tr>
                    <Td colSpan={7} className="px-3 py-4 text-center text-ink-3">
                      No queue data (Redis unreachable?)
                    </Td>
                  </Tr>
                )}
              </TBody>
            </Table>
          )}
        </Panel>

        <Panel title="Premium budgets" description={d ? `Today ${budgets?.day ?? ""} · source ${budgets?.source ?? DASH}` : undefined}>
          {!d ? (
            <SkeletonRows rows={2} />
          ) : (
            <div className="space-y-3">
              <BudgetBar label="Scrapfly (L4)" used={scrapflyUsed} limit={budgets?.limits.scrapfly ?? 0} />
              <BudgetBar label="Firecrawl (L3)" used={firecrawlUsed} limit={budgets?.limits.firecrawl ?? 0} />
              <KV
                items={[
                  { k: "Direct requests today", v: used.direct ? fmtInt(used.direct.requests) : DASH },
                  { k: "Firecrawl requests", v: used.firecrawl ? fmtInt(used.firecrawl.requests) : DASH },
                  { k: "Scrapfly requests", v: used.scrapfly ? fmtInt(used.scrapfly.requests) : DASH },
                ]}
              />
            </div>
          )}
        </Panel>
      </div>

      <div className="mt-3 grid gap-3 lg:grid-cols-3">
        <Panel
          title="System alerts"
          description="Open alerts from the worker doctor"
          className="lg:col-span-2"
          padded={false}
          aside={
            d && d.alerts.length > 0 ? (
              <Badge tone="warn" size="xs">
                {fmtInt(d.alerts.length)} open
              </Badge>
            ) : undefined
          }
        >
          {!d ? (
            <div className="p-3">
              <SkeletonRows rows={2} />
            </div>
          ) : d.alerts.length === 0 ? (
            <EmptyState compact title="No open alerts" />
          ) : (
            <ul className="divide-y divide-hair">
              {d.alerts.map((a) => (
                <li key={a.id} className="flex flex-col gap-1 px-3 py-2 sm:flex-row sm:items-start sm:gap-3">
                  <div className="flex shrink-0 items-center gap-2 sm:w-[190px]">
                    <Badge tone={a.level === "error" || a.level === "critical" ? "danger" : a.level === "warn" ? "warn" : "info"} size="xs">
                      {a.level}
                    </Badge>
                    <Mono title={a.component}>{a.component}</Mono>
                  </div>
                  <div className="min-w-0 flex-1 text-[12.5px] text-ink-2">
                    <div className="break-words">{a.message}</div>
                    <div className="mt-0.5 text-[11px] text-ink-4">
                      <RelativeTime iso={a.createdAt} />
                    </div>
                  </div>
                  <Button size="xs" variant="ghost" onClick={() => void resolve(a.id)} disabled={busy === `alert:${a.id}`}>
                    Resolve
                  </Button>
                </li>
              ))}
            </ul>
          )}
        </Panel>

        <Panel title="Quick actions">
          <div className="flex flex-wrap gap-2">
            <Button size="sm" href="/admin/connectors">
              Connectors
            </Button>
            <Button size="sm" href="/admin/documents?status=error">
              Failed documents
            </Button>
            <Button size="sm" href="/admin/matches">
              Match queue
            </Button>
            <Button size="sm" href="/admin/devtool">
              Dev tool
            </Button>
          </div>
          <div className="label-caps mb-1.5 mt-4">Maintenance jobs</div>
          <div className="flex flex-wrap gap-2">
            {(["rankings", "metrics", "refresh-stats"] as const).map((t) => (
              <Button key={t} size="xs" variant="secondary" onClick={() => void maintenance(t)} disabled={busy === `m:${t}`}>
                {t}
              </Button>
            ))}
            <Button size="xs" variant="ghost" onClick={() => void invalidate()} disabled={busy === "cache"}>
              Invalidate API cache
            </Button>
          </div>
          {d && (
            <>
              <div className="label-caps mb-1.5 mt-4">Largest tables</div>
              <KV items={d.db.tables.slice(0, 8).map((t) => ({ k: <Mono>{t.table}</Mono>, v: <span className="figure">{fmtInt(t.rows)} rows · {fmtBytes(t.bytes)}</span> }))} />
            </>
          )}
        </Panel>
      </div>

      <Panel title="Last 20 runs" className="mt-3" padded={false} aside={<Button size="xs" variant="ghost" href="/admin/connectors">All connectors</Button>}>
        {!d ? (
          <div className="p-3">
            <SkeletonRows rows={6} />
          </div>
        ) : d.lastRuns.length === 0 ? (
          <EmptyState compact title="No runs yet" />
        ) : (
          <Table className="text-[12.5px]">
            <THead>
              <Tr>
                <Th className="pl-3">Connector</Th>
                <Th>Task</Th>
                <Th>Status</Th>
                <Th>Started</Th>
                <Th numeric>Duration</Th>
                <Th numeric>Fetched</Th>
                <Th numeric>Changed</Th>
                <Th numeric>Entities</Th>
                <Th numeric className="pr-3">
                  Failed
                </Th>
              </Tr>
            </THead>
            <TBody>
              {d.lastRuns.map((r) => {
                const s = r.stats ?? {};
                return (
                  <Tr key={r.id}>
                    <Td primary label="Connector" className="pl-3">
                      <Link href={`/admin/connectors/${encodeURIComponent(r.connectorId)}`} className="font-mono text-[12.5px] font-medium text-ink hover:text-accent hover:underline">
                        {r.connectorId}
                      </Link>
                      <div className="mt-0.5">
                        <Link href={`/admin/runs/${encodeURIComponent(r.id)}`} className="font-mono text-[11px] text-ink-4 hover:text-accent hover:underline" title="Run detail: changes written, rollback">
                          {r.id} →
                        </Link>
                      </div>
                      {r.error && <div className="mt-0.5 truncate text-[11.5px] text-danger sm:max-w-[320px]" title={r.error}>{r.error}</div>}
                    </Td>
                    <Td label="Task">
                      <Badge size="xs" mono>
                        {r.task}
                      </Badge>
                    </Td>
                    <Td label="Status">
                      <RunStatusBadge status={r.status} />
                    </Td>
                    <Td label="Started" muted>
                      <RelativeTime iso={r.startedAt} />
                    </Td>
                    <Td label="Duration" numeric>
                      {fmtMs(durationBetween(r.startedAt, r.finishedAt))}
                    </Td>
                    <Td label="Fetched" numeric>
                      {num(s.fetched) != null ? fmtInt(num(s.fetched)) : DASH}
                    </Td>
                    <Td label="Changed" numeric>
                      {num(s.changed) != null ? fmtInt(num(s.changed)) : DASH}
                    </Td>
                    <Td label="Entities" numeric>
                      {num(s.entities) != null ? fmtInt(num(s.entities)) : DASH}
                    </Td>
                    <Td label="Failed" numeric className={cn("pr-3", (num(s.failed) ?? 0) > 0 && "text-danger")}>
                      {num(s.failed) != null ? fmtInt(num(s.failed)) : DASH}
                    </Td>
                  </Tr>
                );
              })}
            </TBody>
          </Table>
        )}
      </Panel>
    </div>
  );
}