server-26/drb-frontend/app/nodes/page.tsx

"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useNodes } from "@/lib/useNodes";
import { useSystems } from "@/lib/useSystems";
import { NodeCard } from "@/components/NodeCard";
import { NodeConfigModal } from "@/components/NodeConfigModal";
import { useAuth } from "@/components/AuthProvider";
import { c2api } from "@/lib/c2api";
import type { NodeRecord } from "@/lib/types";

export default function NodesPage() {
  const { isAdmin, isOperator, loading: authLoading } = useAuth();
  const router = useRouter();
  const { nodes, loading } = useNodes();
  const { systems } = useSystems();

  useEffect(() => {
    if (!authLoading && !isAdmin && !isOperator) router.replace("/");
  }, [authLoading, isAdmin, isOperator, router]);

  const [configNode, setConfigNode] = useState<NodeRecord | null>(null);
  const [updatingAll, setUpdatingAll] = useState(false);

  async function handleUpdateAll() {
    if (
      !confirm(
        "Update every approved node? Each one pulls the latest release it tracks and recreates its " +
          "containers (radio capture pauses for about a minute per node). Online nodes start within " +
          "seconds; offline nodes pick it up on their next check-in (up to ~15 minutes).",
      )
    )
      return;
    setUpdatingAll(true);
    try {
      const r = await c2api.requestUpdateAllNodes();
      const offline = r.requested.filter((n) => !r.mqtt_sent.includes(n));
      alert(
        `Update requested for ${r.requested.length} node(s).` +
          (offline.length ? ` Not reachable over MQTT right now (will update on next check-in): ${offline.join(", ")}.` : "") +
          (r.skipped.length ? ` Skipped (not approved): ${r.skipped.join(", ")}.` : ""),
      );
    } catch (err) {
      alert(err instanceof Error ? err.message : "Update request failed.");
    } finally {
      setUpdatingAll(false);
    }
  }

  // Every hook must run before this guard. React tracks hooks by call order,
  // so returning early on the first render and then reaching a useState on the
  // next one is error #310 ("rendered more hooks than during the previous
  // render") -- which crashed this whole page to a blank client-exception
  // screen the moment auth resolved.
  if (authLoading || (!isAdmin && !isOperator)) return null;
  const systemMap = Object.fromEntries(systems.map((s) => [s.system_id, s]));
  const pending = nodes.filter((n) => !n.configured);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-4">
        <h1 className="text-xl font-bold text-white font-mono">Nodes</h1>
        {isAdmin && (
          <button
            onClick={handleUpdateAll}
            disabled={updatingAll}
            className="px-4 py-2 bg-raised hover:bg-gray-700 text-ink-2 rounded-lg text-sm font-mono transition-colors disabled:opacity-50"
          >
            {updatingAll ? "Requesting…" : "Update All Nodes"}
          </button>
        )}
      </div>

      {pending.length > 0 && (
        <div className="space-y-2">
          <h2 className="text-sm font-semibold text-indigo-400 uppercase tracking-wider">
            Needs Configuration ({pending.length})
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {pending.map((n) => (
              <div key={n.node_id} onClick={() => setConfigNode(n)} className="cursor-pointer">
                <NodeCard node={n} system={systemMap[n.assigned_system_id ?? ""]} linkToDetail={false} />
              </div>
            ))}
          </div>
        </div>
      )}

      <div className="space-y-2">
        <h2 className="text-sm font-semibold text-ink-2 uppercase tracking-wider">
          All Nodes ({nodes.length})
        </h2>
        {loading ? (
          <p className="text-ink-muted text-sm font-mono">Loading…</p>
        ) : nodes.length === 0 ? (
          <p className="text-ink-muted text-sm font-mono">No nodes registered yet. Boot a Pi to get started.</p>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {nodes.map((n) => (
              <NodeCard key={n.node_id} node={n} system={systemMap[n.assigned_system_id ?? ""]} />
            ))}
          </div>
        )}
      </div>

      {configNode && (
        <NodeConfigModal
          node={configNode}
          systems={systems}
          onClose={() => setConfigNode(null)}
        />
      )}
    </div>
  );
}