"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, Terminal, Trash2 } from "lucide-react";

import { useFetchJson } from "@/lib/api/use-fetch";

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

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;
  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",
};

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`;
}

/** Poll the workspace's nodes every 3s. */
export function useNodes(): { nodes: FleetNode[]; refresh: () => void } {
  const { data, refresh } = useFetchJson<{ nodes: FleetNode[] }>("/api/nodes");
  useEffect(() => {
    const t = setInterval(refresh, 3000);
    return () => clearInterval(t);
  }, [refresh]);
  return { nodes: data?.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 [term, setTerm] = useState(false);
  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.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.agentVersion ? <span>· v{node.agentVersion}</span> : null}
          </div>
        </div>
        {node.status === "online" ? (
          <button type="button" onClick={() => setTerm(true)} title="Open terminal" 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>
      )}
      {term ? <NodeTerminal nodeId={node.id} nodeName={node.name} onClose={() => setTerm(false)} /> : 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>
  );
}

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. */
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={{ 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>
  );
}