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

"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useNodes } from "@/lib/useNodes";
import { c2api } from "@/lib/c2api";
import type { UserRecord } from "@/lib/types";
import { StatusBadge } from "@/components/StatusBadge";
import { Card } from "@/components/ui/Card";
import { ErrorBanner } from "@/components/ui/EmptyState";
import { SkeletonRow } from "@/components/ui/Skeleton";

const UNASSIGNED = "__unassigned__";

export default function NodeOwnershipSettingsPage() {
  const { nodes, loading: nodesLoading } = useNodes();
  const [users, setUsers] = useState<UserRecord[]>([]);
  const [loadingUsers, setLoadingUsers] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [savingNodeId, setSavingNodeId] = useState<string | null>(null);

  useEffect(() => {
    c2api.listUsers()
      .then(setUsers)
      .catch((e) => setError(e instanceof Error ? e.message : String(e)))
      .finally(() => setLoadingUsers(false));
  }, []);

  // Ownership (owned_node_ids) is only meaningful for operators elsewhere in the
  // app (see Admin → Users); admins already have full access regardless.
  const assignable = useMemo(() => users.filter((u) => u.role === "operator"), [users]);

  const ownerByNode = useMemo(() => {
    const map = new Map<string, UserRecord>();
    for (const u of users) {
      if (u.role !== "operator") continue;
      for (const nodeId of u.owned_node_ids) map.set(nodeId, u);
    }
    return map;
  }, [users]);

  const reassign = useCallback(async (nodeId: string, newUid: string) => {
    setSavingNodeId(nodeId);
    setError(null);
    try {
      const prevOwner = ownerByNode.get(nodeId);
      // Remove from previous owner, if any and different from the new one.
      if (prevOwner && prevOwner.uid !== newUid) {
        const next = prevOwner.owned_node_ids.filter((id) => id !== nodeId);
        await c2api.updateUser(prevOwner.uid, { owned_node_ids: next });
        setUsers((all) => all.map((u) => (u.uid === prevOwner.uid ? { ...u, owned_node_ids: next } : u)));
      }
      // Add to new owner, if one was selected.
      if (newUid !== UNASSIGNED) {
        const newOwner = users.find((u) => u.uid === newUid);
        if (newOwner && !newOwner.owned_node_ids.includes(nodeId)) {
          const next = [...newOwner.owned_node_ids, nodeId];
          await c2api.updateUser(newOwner.uid, { owned_node_ids: next });
          setUsers((all) => all.map((u) => (u.uid === newOwner.uid ? { ...u, owned_node_ids: next } : u)));
        }
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setSavingNodeId(null);
    }
  }, [ownerByNode, users]);

  const loading = nodesLoading || loadingUsers;

  return (
    <div className="space-y-4">
      <p className="text-sm text-gray-500">
        Assign each node to the operator responsible for it. Operators only see and manage the nodes assigned to them here.
      </p>

      {error && <ErrorBanner message={error} />}

      <Card padding="none" className="overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800 bg-gray-900">
              <th className="px-4 py-3 text-left">Node</th>
              <th className="px-4 py-3 text-left hidden sm:table-cell">Status</th>
              <th className="px-4 py-3 text-left">Owner</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              Array.from({ length: 3 }).map((_, i) => <SkeletonRow key={i} cols={3} />)
            ) : nodes.length === 0 ? (
              <tr><td colSpan={3} className="px-4 py-8 text-center text-gray-600 text-sm">No nodes registered yet.</td></tr>
            ) : (
              nodes.map((n) => {
                const owner = ownerByNode.get(n.node_id);
                return (
                  <tr key={n.node_id} className="border-b border-gray-800 last:border-0">
                    <td className="px-4 py-3">
                      <Link href={`/nodes/${n.node_id}`} className="text-white hover:text-indigo-300 transition-colors">
                        {n.name}
                      </Link>
                      <p className="text-gray-600 text-xs font-mono">{n.node_id}</p>
                    </td>
                    <td className="px-4 py-3 hidden sm:table-cell"><StatusBadge status={n.status} /></td>
                    <td className="px-4 py-3">
                      <select
                        value={owner?.uid ?? UNASSIGNED}
                        disabled={savingNodeId === n.node_id}
                        onChange={(e) => reassign(n.node_id, e.target.value)}
                        className="bg-gray-800 border border-gray-700 rounded-lg px-2 py-1.5 text-xs text-white focus:outline-none focus:border-indigo-500 disabled:opacity-50 max-w-[14rem]"
                      >
                        <option value={UNASSIGNED}>Unassigned</option>
                        {assignable.map((u) => (
                          <option key={u.uid} value={u.uid}>{u.display_name || u.email}</option>
                        ))}
                      </select>
                    </td>
                  </tr>
                );
              })
            )}
          </tbody>
        </table>
      </Card>
    </div>
  );
}