flatrender/src/components/admin/NodesTable.tsx

"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { apiFetch } from "@/lib/api/fetch";
import { useRouter } from "next/navigation";

interface V2Node {
  id: string;
  name: string;
  status: "Online" | "Busy" | "Offline" | "Draining";
  last_heartbeat: string;
  active_job_id: string | null;
  slots_total: number;
  slots_used: number;
  version: string | null;
  tags: string[] | null;
}

const STATUS_COLORS: Record<V2Node["status"], string> = {
  Online: "bg-emerald-500/20 text-emerald-300 border-emerald-500/30",
  Busy: "bg-blue-500/20 text-blue-300 border-blue-500/30",
  Offline: "bg-gray-500/20 text-gray-400 border-gray-500/30",
  Draining: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30",
};

function heartbeatAge(iso: string): string {
  const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
  if (diff < 60) return `${diff}s ago`;
  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
  return `${Math.floor(diff / 3600)}h ago`;
}

export function NodesTable({ nodes }: { nodes: V2Node[] }) {
  const t = useTranslations("auto.componentsAdminNodesTable");
  const router = useRouter();
  const [loading, setLoading] = useState<Record<string, boolean>>({});

  const action = async (nodeId: string, endpoint: string) => {
    setLoading((p) => ({ ...p, [nodeId]: true }));
    try {
      await apiFetch(`/api/admin/nodes/${nodeId}/${endpoint}`, { method: "POST" });
      router.refresh();
    } finally {
      setLoading((p) => ({ ...p, [nodeId]: false }));
    }
  };

  if (nodes.length === 0) {
    return (
      <div className="rounded-xl border border-[#1e2235] bg-[#0f1120] px-6 py-16 text-center text-sm text-gray-500">
        {t("emptyState")}
      </div>
    );
  }

  return (
    <div className="overflow-hidden rounded-xl border border-[#1e2235]">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-[#1e2235] bg-[#0f1120] text-left text-xs font-medium uppercase tracking-wider text-gray-500">
            <th className="px-4 py-3">{t("colNode")}</th>
            <th className="px-4 py-3">{t("colStatus")}</th>
            <th className="px-4 py-3">{t("colSlots")}</th>
            <th className="px-4 py-3">{t("colHeartbeat")}</th>
            <th className="px-4 py-3">{t("colActiveJob")}</th>
            <th className="px-4 py-3">{t("colTags")}</th>
            <th className="px-4 py-3">{t("colActions")}</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-[#1e2235] bg-[#0c0e1a]">
          {nodes.map((node) => (
            <tr key={node.id} className="hover:bg-[#0f1120]/60 transition-colors">
              <td className="px-4 py-3">
                <div className="font-medium text-white">{node.name}</div>
                <div className="text-[11px] text-gray-600 font-mono mt-0.5">{node.id.slice(0, 8)}…</div>
              </td>
              <td className="px-4 py-3">
                <span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${STATUS_COLORS[node.status]}`}>
                  {node.status}
                </span>
              </td>
              <td className="px-4 py-3 tabular-nums text-gray-300">
                {node.slots_used} / {node.slots_total}
              </td>
              <td className="px-4 py-3 text-gray-400">
                {heartbeatAge(node.last_heartbeat)}
              </td>
              <td className="px-4 py-3 font-mono text-[11px] text-gray-500">
                {node.active_job_id ? node.active_job_id.slice(0, 12) + "…" : "—"}
              </td>
              <td className="px-4 py-3">
                <div className="flex flex-wrap gap-1">
                  {(node.tags ?? []).map((t) => (
                    <span key={t} className="rounded bg-[#1e2235] px-1.5 py-0.5 text-[10px] text-gray-400">
                      {t}
                    </span>
                  ))}
                </div>
              </td>
              <td className="px-4 py-3">
                <div className="flex gap-2">
                  <button
                    onClick={() => action(node.id, "drain")}
                    disabled={loading[node.id] || node.status === "Offline"}
                    className="rounded px-2.5 py-1 text-xs text-yellow-300 border border-yellow-500/30 hover:bg-yellow-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                  >
                    {t("actionDrain")}
                  </button>
                  <button
                    onClick={() => action(node.id, "release")}
                    disabled={loading[node.id]}
                    className="rounded px-2.5 py-1 text-xs text-red-300 border border-red-500/30 hover:bg-red-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                  >
                    {t("actionRelease")}
                  </button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}