"use client";

// Fleet UI: live per-node health cards (Local hardware) + a fleet overview. Data
// comes from the nodes registry (`GET /api/nodes`), polled every 3s.

import { useCallback, useEffect, useState } from "react";
import { Cpu, HardDrive, MemoryStick, Network, Plus, Server, ShieldCheck, Terminal, Trash2 } from "lucide-react";
import { useQueryStates } from "nuqs";

import { useFetchJson } from "@/lib/api/use-fetch";
import { panelParsers } from "@/lib/url/panel-params";

import { ConnectHostWizard } from "../ConnectHostWizard";

const mono = "'Geist Mono', ui-monospace, monospace";

export interface NodeHealth {
  cpuPct: number;
  memTotal: number;
  memUsed: number;
  memPressure: number;
  swapUsed: number;
  diskTotal: number;
  diskFree: number;
  load1: number;
  load5: number;
  load15: number;
  containerCount: number;
}

export interface FleetNode {
  id: string;
  name: string;
  hostname: string | null;
  localIp: string | null;
  status: "pending" | "online" | "offline" | "draining";
  agentVersion: string | null;
  tailscaleIp: string | null;
  lastSeen: number | null;
  createdAt: number;
  health: NodeHealth | null;
}

const STATUS_COLOR: Record<FleetNode["status"], string> = {
  online: "#5fd08a",
  offline: "#6a6a72",
  pending: "#e8b465",
  draining: "#ff8a7a",
};

/** A node is "live" if the channel reports online OR its last heartbeat is fresh
 *  (<15s) — so a transient status-column flip never shows a healthy node down. */
export function isLive(n: FleetNode): boolean {
  if (n.status === "pending" || n.status === "draining") return false;
  if (n.lastSeen != null && Date.now() / 1000 - n.lastSeen < 15) return true;
  return n.status === "online";
}

/** The status to render: pending/draining pass through; otherwise online iff live. */
export function displayStatus(n: FleetNode): FleetNode["status"] {
  if (n.status === "pending" || n.status === "draining") return n.status;
  return isLive(n) ? "online" : "offline";
}

function fmtBytes(b: number): string {
  if (b >= 1e12) return `${(b / 1e12).toFixed(1)} TB`;
  if (b >= 1e9) return `${(b / 1e9).toFixed(1)} GB`;
  if (b >= 1e6) return `${(b / 1e6).toFixed(0)} MB`;
  return `${b} B`;
}

/** Stream the workspace's nodes live over SSE (status updates push instantly,
 *  no 3s poll lag). `refresh` does a one-shot GET for an immediate nudge after
 *  pairing a new host. */
export function useNodes(): { nodes: FleetNode[]; refresh: () => void } {
  const [nodes, setNodes] = useState<FleetNode[]>([]);
  const refresh = useCallback(() => {
    fetch("/api/nodes")
      .then((r) => (r.ok ? r.json() : null))
      .then((d: { nodes: FleetNode[] } | null) => {
        if (d?.nodes) setNodes(d.nodes);
      })
      .catch(() => {});
  }, []);
  useEffect(() => {
    refresh();
    const es = new EventSource("/api/nodes/live");
    es.addEventListener("nodes", (e) => {
      try {
        setNodes(JSON.parse((e as MessageEvent).data) as FleetNode[]);
      } catch {
        /* ignore malformed frame */
      }
    });
    return () => es.close();
  }, [refresh]);
  return { nodes, refresh };
}

function Bar({ label, pct, detail, color }: { label: string; pct: number; detail: string; color: string }) {
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#9a9aa2", marginBottom: 4 }}>
        <span>{label}</span>
        <span style={{ fontFamily: mono, color: "#cfcfd5" }}>{detail}</span>
      </div>
      <div style={{ height: 6, borderRadius: 3, background: "rgba(255,255,255,.07)", overflow: "hidden" }}>
        <div style={{ height: "100%", width: `${Math.max(0, Math.min(100, pct))}%`, background: color, borderRadius: 3, transition: "width .4s ease" }} />
      </div>
    </div>
  );
}

export function NodeCard({ node, onRemoved }: { node: FleetNode; onRemoved: () => void }) {
  const h = node.health;
  const [, setParams] = useQueryStates(panelParsers, { shallow: true });
  const [check, setCheck] = useState<{ ok: boolean; output: string } | null>(null);
  const [checking, setChecking] = useState(false);
  const runCheck = useCallback(() => {
    setChecking(true);
    setCheck(null);
    fetch(`/api/nodes/${node.id}/sandbox-check`, { method: "POST" })
      .then((r) => r.json())
      .then((d: { ok: boolean; output: string }) => setCheck(d))
      .catch((e: Error) => setCheck({ ok: false, output: e.message }))
      .finally(() => setChecking(false));
  }, [node.id]);
  const memPct = h && h.memTotal > 0 ? (h.memUsed / h.memTotal) * 100 : 0;
  const diskUsedPct = h && h.diskTotal > 0 ? ((h.diskTotal - h.diskFree) / h.diskTotal) * 100 : 0;
  const remove = useCallback(() => {
    if (!confirm(`Remove "${node.name}" from your fleet?`)) return;
    fetch(`/api/nodes/${node.id}`, { method: "DELETE" }).then(onRemoved);
  }, [node.id, node.name, onRemoved]);

  return (
    <div style={{ borderRadius: 14, background: "#0f0f13", border: "1px solid rgba(255,255,255,.08)", padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ width: 36, height: 36, borderRadius: 9, background: "rgba(94,200,216,.1)", border: "1px solid rgba(94,200,216,.25)", display: "flex", alignItems: "center", justifyContent: "center", color: "#5ec8d8" }}><Server size={18} /></span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: "#f3f3f5", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{node.hostname ?? node.name}</div>
          <div style={{ display: "flex", alignItems: "center", gap: 6, fontFamily: mono, fontSize: 10, color: "#7a7a82", marginTop: 2 }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: STATUS_COLOR[node.status] }} />
            {node.status.toUpperCase()}
            {node.localIp ? <span>· {node.localIp}</span> : null}
            {node.agentVersion ? <span>· v{node.agentVersion}</span> : null}
          </div>
        </div>
        {node.status === "online" ? (
          <>
            <button type="button" onClick={runCheck} disabled={checking} title="Run sandbox readiness check" aria-label="Sandbox check" style={{ width: 30, height: 30, borderRadius: 8, border: "1px solid rgba(95,208,138,.3)", background: "rgba(95,208,138,.08)", color: "#5fd08a", cursor: checking ? "default" : "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><ShieldCheck size={14} /></button>
            <button type="button" onClick={() => setParams({ app: "terminal", node: node.id, device: "phone" })} title="Open terminal in the computer" aria-label="Open terminal" style={{ width: 30, height: 30, borderRadius: 8, border: "1px solid rgba(94,200,216,.3)", background: "rgba(94,200,216,.08)", color: "#5ec8d8", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><Terminal size={14} /></button>
          </>
        ) : null}
        <button type="button" onClick={remove} title="Remove node" aria-label="Remove node" style={{ width: 30, height: 30, borderRadius: 8, border: "1px solid rgba(255,255,255,.1)", background: "transparent", color: "#7a7a82", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><Trash2 size={14} /></button>
      </div>

      {h ? (
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <Bar label="CPU" pct={h.cpuPct} detail={`${h.cpuPct.toFixed(0)}%`} color="#7fc8ff" />
          <Bar label="Memory" pct={memPct} detail={`${fmtBytes(h.memUsed)} / ${fmtBytes(h.memTotal)}`} color={h.memPressure > 0.85 ? "#ff6f61" : "#c98af0"} />
          <Bar label="Disk" pct={diskUsedPct} detail={`${fmtBytes(h.diskFree)} free`} color="#5fd08a" />
          <div style={{ display: "flex", gap: 14, fontSize: 11, color: "#9a9aa2", fontFamily: mono, paddingTop: 2 }}>
            <span>load {h.load1.toFixed(2)}</span>
            <span>· {h.containerCount} containers</span>
            {node.tailscaleIp ? (
              <button type="button" onClick={() => navigator.clipboard?.writeText(`ssh ${node.tailscaleIp}`)} title={`Tailscale SSH — copy: ssh ${node.tailscaleIp}`} style={{ display: "inline-flex", alignItems: "center", gap: 4, border: 0, background: "transparent", color: "#5ec8d8", cursor: "pointer", fontFamily: mono, fontSize: 11, padding: 0 }}>
                <Network size={11} /> ssh {node.tailscaleIp}
              </button>
            ) : null}
          </div>
        </div>
      ) : (
        <div style={{ fontFamily: mono, fontSize: 11.5, color: "#6a6a72", padding: "8px 0" }}>
          {node.status === "pending" ? "waiting for the daemon to connect…" : "no health reported yet"}
        </div>
      )}
      {checking || check ? (
        <div style={{ borderRadius: 9, background: "#08080a", border: `1px solid ${check && !check.ok ? "rgba(255,111,97,.3)" : "rgba(95,208,138,.3)"}`, padding: 10 }}>
          <div style={{ fontFamily: mono, fontSize: 9.5, letterSpacing: ".08em", color: check && !check.ok ? "#ff8a7a" : "#5fd08a", marginBottom: check ? 6 : 0 }}>
            {checking ? "RUNNING SANDBOX CHECK…" : check?.ok ? "✓ SANDBOX READY" : "✗ CHECK FAILED"}
          </div>
          {check ? (
            <pre style={{ fontFamily: mono, fontSize: 10.5, color: "#bfe9d4", whiteSpace: "pre-wrap", wordBreak: "break-word", margin: 0, maxHeight: 120, overflow: "auto" }}>{check.output}</pre>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

export function LocalHardware() {
  const { nodes, refresh } = useNodes();
  const [wizard, setWizard] = useState(false);

  return (
    <div style={{ height: "100%", overflow: "auto", padding: "28px 32px" }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "flex-end", gap: 12, marginBottom: 20 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".12em", color: "#5a5a62", marginBottom: 6 }}>LOCAL HARDWARE · {nodes.length} NODE{nodes.length === 1 ? "" : "S"}</div>
            <div style={{ fontSize: 24, fontWeight: 800, color: "#f3f3f5", letterSpacing: "-.02em" }}>Your machines</div>
          </div>
          <button type="button" onClick={() => setWizard(true)} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "10px 16px", borderRadius: 10, border: "1px solid rgba(94,200,216,.4)", background: "rgba(94,200,216,.1)", color: "#5ec8d8", fontSize: 13, fontWeight: 600, cursor: "pointer" }}><Plus size={16} /> Connect a host</button>
        </div>

        {nodes.length === 0 ? (
          <div style={{ borderRadius: 16, border: "1px dashed rgba(255,255,255,.12)", padding: "44px 24px", textAlign: "center" }}>
            <span style={{ display: "inline-flex", width: 48, height: 48, borderRadius: 12, background: "rgba(94,200,216,.1)", border: "1px solid rgba(94,200,216,.25)", alignItems: "center", justifyContent: "center", color: "#5ec8d8", marginBottom: 14 }}><HardDrive size={24} /></span>
            <div style={{ fontSize: 16, fontWeight: 700, color: "#f3f3f5", marginBottom: 6 }}>No nodes connected yet</div>
            <p style={{ fontSize: 13, color: "#8a8a92", maxWidth: 420, margin: "0 auto 18px", lineHeight: 1.55 }}>Run agents on your own machines — install the lightweight daemon and it reports back here with live health.</p>
            <button type="button" onClick={() => setWizard(true)} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "11px 18px", borderRadius: 11, border: 0, background: "linear-gradient(135deg,#5ec8d8,#3aa6b8)", color: "#04222a", fontSize: 13.5, fontWeight: 700, cursor: "pointer" }}><Plus size={16} /> Connect your first host</button>
          </div>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(290px, 1fr))", gap: 16 }}>
            {nodes.map((n) => (
              <NodeCard key={n.id} node={n} onRemoved={refresh} />
            ))}
          </div>
        )}
      </div>
      {wizard ? <ConnectHostWizard onClose={() => { setWizard(false); refresh(); }} /> : null}
    </div>
  );
}

/** Choose where new agent sandboxes provision (a connected node, or local). */
function PlacementSection() {
  const { nodes } = useNodes();
  const { data, refresh } = useFetchJson<{ node: string | null }>("/api/fleet/placement");
  const current = data?.node ?? "local";
  const online = nodes.filter((n) => n.status === "online");
  const set = useCallback(
    (node: string) => {
      fetch("/api/fleet/placement", { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ node }) }).then(refresh);
    },
    [refresh],
  );
  return (
    <section style={{ borderRadius: 16, background: "#0f0f13", border: "1px solid rgba(255,255,255,.08)", padding: 18 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 12 }}>
        <span style={{ width: 30, height: 30, borderRadius: 8, background: "rgba(255,111,97,.1)", border: "1px solid rgba(255,111,97,.25)", display: "flex", alignItems: "center", justifyContent: "center", color: "#ff8a7a" }}><Cpu size={15} /></span>
        <span style={{ fontSize: 15, fontWeight: 700, color: "#f3f3f5", flex: 1 }}>Run agents on</span>
      </div>
      <select
        value={current}
        onChange={(e) => set(e.target.value)}
        style={{ width: "100%", padding: "10px 12px", borderRadius: 10, border: "1px solid rgba(255,255,255,.14)", background: "#08080a", color: "#f3f3f5", fontSize: 13.5, cursor: "pointer" }}
      >
        <option value="local">Local — the gateway host (default)</option>
        {online.map((n) => (
          <option key={n.id} value={n.id}>{n.name}</option>
        ))}
      </select>
      <p style={{ fontSize: 12, color: "#7a7a82", marginTop: 10, marginBottom: 0, lineHeight: 1.5 }}>New agent sandboxes provision on this host. Falls back to local automatically if the node goes offline. Existing agents are unaffected until their sandbox is next created.</p>
    </section>
  );
}

interface TsDevice {
  name: string | null;
  addr: string | null;
  os: string | null;
  version: string | null;
  lastSeen: string | null;
}

function tsOnline(lastSeen: string | null): boolean {
  if (!lastSeen) return false;
  const t = Date.parse(lastSeen);
  return Number.isFinite(t) && Date.now() - t < 5 * 60 * 1000;
}

/** Connect a workspace's Tailscale (BYO) and show its tailnet device metrics. */
export function TailscaleSection() {
  const { data: status, refresh } = useFetchJson<{ connected: boolean; tailnet: string | null }>("/api/fleet/tailscale");
  const { data: dev } = useFetchJson<{ connected: boolean; devices: TsDevice[]; error?: string }>(status?.connected ? "/api/fleet/tailscale/devices" : null);
  const [apiKey, setApiKey] = useState("");
  const [tailnet, setTailnet] = useState("");
  const [busy, setBusy] = useState(false);

  const connect = useCallback(() => {
    if (!apiKey.trim() || !tailnet.trim()) return;
    setBusy(true);
    fetch("/api/fleet/tailscale", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ apiKey, tailnet }) })
      .then(() => { setApiKey(""); refresh(); })
      .finally(() => setBusy(false));
  }, [apiKey, tailnet, refresh]);

  const devices = dev?.devices ?? [];
  const online = devices.filter((d) => tsOnline(d.lastSeen)).length;

  return (
    <section style={{ marginTop: 4, borderRadius: 16, background: "#0f0f13", border: "1px solid rgba(255,255,255,.08)", padding: 18 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
        <span style={{ width: 30, height: 30, borderRadius: 8, background: "rgba(94,200,216,.12)", border: "1px solid rgba(94,200,216,.3)", display: "flex", alignItems: "center", justifyContent: "center", color: "#5ec8d8" }}><Network size={15} /></span>
        <span style={{ fontSize: 15, fontWeight: 700, color: "#f3f3f5", flex: 1 }}>Tailscale network</span>
        {status?.connected ? (
          <span style={{ fontFamily: mono, fontSize: 11, color: "#5fd08a" }}>{online}/{devices.length} online · {status.tailnet}</span>
        ) : null}
      </div>

      {!status?.connected ? (
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <p style={{ fontSize: 12.5, color: "#9a9aa2", margin: 0, lineHeight: 1.5 }}>Connect your tailnet to see network status here. Paste a Tailscale API key and your tailnet (e.g. <code style={{ fontFamily: mono, color: "#cfcfd5" }}>example.com</code> or <code style={{ fontFamily: mono, color: "#cfcfd5" }}>your-org.ts.net</code>).</p>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <input value={tailnet} onChange={(e) => setTailnet(e.target.value)} placeholder="tailnet" style={{ flex: "1 1 160px", padding: "9px 11px", borderRadius: 9, border: "1px solid rgba(255,255,255,.12)", background: "#08080a", color: "#f3f3f5", fontSize: 13 }} />
            <input value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="tskey-api-…" type="password" style={{ flex: "2 1 240px", padding: "9px 11px", borderRadius: 9, border: "1px solid rgba(255,255,255,.12)", background: "#08080a", color: "#f3f3f5", fontSize: 13, fontFamily: mono }} />
            <button type="button" onClick={connect} disabled={busy || !apiKey.trim() || !tailnet.trim()} style={{ padding: "9px 16px", borderRadius: 9, border: 0, background: apiKey.trim() && tailnet.trim() ? "#5ec8d8" : "rgba(94,200,216,.3)", color: "#04222a", fontSize: 13, fontWeight: 700, cursor: busy ? "default" : "pointer" }}>{busy ? "Connecting…" : "Connect"}</button>
          </div>
        </div>
      ) : devices.length === 0 ? (
        <div style={{ fontFamily: mono, fontSize: 12, color: "#6a6a72" }}>{dev?.error ? `Tailscale: ${dev.error}` : "No devices on this tailnet yet."}</div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {devices.map((d, i) => (
            <div key={d.addr ?? i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 11px", borderRadius: 9, background: "#101014", border: "1px solid rgba(255,255,255,.06)" }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: tsOnline(d.lastSeen) ? "#5fd08a" : "#6a6a72" }} />
              <span style={{ fontSize: 13, color: "#cfcfd5", fontWeight: 600, flex: 1, minWidth: 0, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.name ?? "device"}</span>
              <span style={{ fontFamily: mono, fontSize: 11, color: "#7a7a82" }}>{d.addr}</span>
              {d.os ? <span style={{ fontFamily: mono, fontSize: 10.5, color: "#5a5a62" }}>{d.os}</span> : null}
            </div>
          ))}
        </div>
      )}
    </section>
  );
}

export function FleetOverview() {
  const { nodes } = useNodes();
  const online = nodes.filter((n) => n.status === "online");
  const cores = online.reduce((a, n) => a + (n.health?.containerCount ?? 0), 0);
  const totalMem = online.reduce((a, n) => a + (n.health?.memTotal ?? 0), 0);
  const totalDisk = online.reduce((a, n) => a + (n.health?.diskTotal ?? 0), 0);

  const stats = [
    { label: "Nodes", value: String(nodes.length), sub: `${online.length} online`, icon: Server, tint: "#5ec8d8" },
    { label: "Containers", value: String(cores), sub: "running", icon: Cpu, tint: "#7fc8ff" },
    { label: "Memory", value: fmtBytes(totalMem), sub: "fleet total", icon: MemoryStick, tint: "#c98af0" },
    { label: "Storage", value: fmtBytes(totalDisk), sub: "fleet total", icon: HardDrive, tint: "#5fd08a" },
  ];

  return (
    <div style={{ height: "100%", overflow: "auto", padding: "28px 32px" }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".12em", color: "#5a5a62", marginBottom: 6 }}>FLEET</div>
        <div style={{ fontSize: 24, fontWeight: 800, color: "#f3f3f5", letterSpacing: "-.02em" }}>Overview</div>
        <p style={{ fontSize: 13.5, color: "#8a8a92", marginTop: 8, marginBottom: 22, lineHeight: 1.5 }}>The machines connected to your fleet across all of your infrastructure. Connect Tailscale to see your network here too.</p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 14, marginBottom: 26 }}>
          {stats.map((s) => (
            <div key={s.label} style={{ borderRadius: 14, background: "#0f0f13", border: "1px solid rgba(255,255,255,.08)", padding: 16 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
                <span style={{ width: 30, height: 30, borderRadius: 8, background: `${s.tint}1a`, border: `1px solid ${s.tint}40`, display: "flex", alignItems: "center", justifyContent: "center", color: s.tint }}><s.icon size={15} /></span>
                <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".1em", color: "#7a7a82" }}>{s.label.toUpperCase()}</span>
              </div>
              <div style={{ fontSize: 26, fontWeight: 800, color: "#f3f3f5", letterSpacing: "-.02em" }}>{s.value}</div>
              <div style={{ fontSize: 11.5, color: "#7a7a82", marginTop: 2 }}>{s.sub}</div>
            </div>
          ))}
        </div>

        <div style={{ marginBottom: 22 }}>
          <PlacementSection />
        </div>

        <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
          {nodes.map((n) => (
            <div key={n.id} style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "9px 13px", borderRadius: 999, background: "#101014", border: "1px solid rgba(255,255,255,.08)" }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: STATUS_COLOR[n.status] }} />
              <span style={{ fontSize: 13, color: "#cfcfd5", fontWeight: 600 }}>{n.name}</span>
              {n.health ? <span style={{ fontFamily: mono, fontSize: 10.5, color: "#7a7a82" }}>{n.health.cpuPct.toFixed(0)}% cpu</span> : null}
            </div>
          ))}
          {nodes.length === 0 ? <span style={{ fontFamily: mono, fontSize: 12, color: "#6a6a72" }}>No nodes yet — add one under Local hardware.</span> : null}
        </div>

        <div style={{ marginTop: 26 }}>
          <TailscaleSection />
        </div>
      </div>
    </div>
  );
}