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

const AE_VERSIONS = ["2025", "2024", "2023", "2022", "2021", "2020"];
const NODE_KINDS = ["Shared", "Dedicated", "Spot"];
const emptyNode = { name: "", region: "", node_ip: "", worker_port: 8088, current_ae_version: "2024", node_kind: "Dedicated", ram_gb: "", cpu_cores: "", priority: 5 };
const fldCls = "w-full rounded-lg border border-[#262b40] bg-[#0c0e1a] px-3 py-2 text-sm text-gray-100 outline-none focus:border-indigo-500";

export function NodesTable({ nodes }: { nodes: V2Node[] }) {
  const t = useTranslations("auto.componentsAdminNodesTable");
  const router = useRouter();
  const [loading, setLoading] = useState<Record<string, boolean>>({});
  const [showAdd, setShowAdd] = useState(false);
  const [nf, setNf] = useState({ ...emptyNode });
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState<string | null>(null);

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

  const addNode = async () => {
    setSaving(true); setErr(null);
    const res = await fetch("/api/admin/nodes", {
      method: "POST", headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: nf.name, region: nf.region, node_ip: nf.node_ip, worker_port: Number(nf.worker_port),
        current_ae_version: nf.current_ae_version, node_kind: nf.node_kind,
        ram_gb: nf.ram_gb ? Number(nf.ram_gb) : null, cpu_cores: nf.cpu_cores ? Number(nf.cpu_cores) : null,
        priority: Number(nf.priority) || 5,
      }),
    });
    const d = await res.json().catch(() => null);
    if (res.ok) { setShowAdd(false); setNf({ ...emptyNode }); router.refresh(); }
    else setErr(d?.error ?? "ساخت نود ناموفق بود");
    setSaving(false);
  };

  const addBtn = (
    <button onClick={() => { setShowAdd(true); setErr(null); }} className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500">
      + افزودن نود
    </button>
  );

  const addModal = showAdd && (
    <div className="fixed inset-0 z-50 flex items-stretch justify-center bg-black/70 p-2 sm:p-6" dir="rtl" onClick={() => setShowAdd(false)}>
      <div className="flex max-h-full w-full max-w-2xl flex-col rounded-xl border border-[#1e2235] bg-[#0f1120]" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between border-b border-[#1e2235] px-5 py-3">
          <h2 className="text-sm font-semibold text-white">افزودن نود رندر</h2>
          <button className="rounded-lg px-2 py-1 text-gray-400 hover:bg-[#161a2e] hover:text-white" onClick={() => setShowAdd(false)}>✕</button>
        </div>
        <div className="grid flex-1 gap-3 overflow-y-auto p-5 sm:grid-cols-2">
          {err && <p className="sm:col-span-2 rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-300">{err}</p>}
          <div><label className="mb-1 block text-xs text-gray-400">نام نود *</label><input className={fldCls} value={nf.name} onChange={(e) => setNf({ ...nf, name: e.target.value })} /></div>
          <div><label className="mb-1 block text-xs text-gray-400">منطقه (Region) *</label><input className={fldCls} value={nf.region} onChange={(e) => setNf({ ...nf, region: e.target.value })} placeholder="ir-tehran" dir="ltr" /></div>
          <div><label className="mb-1 block text-xs text-gray-400">آدرس IP *</label><input className={fldCls} value={nf.node_ip} onChange={(e) => setNf({ ...nf, node_ip: e.target.value })} placeholder="192.168.1.10" dir="ltr" /></div>
          <div><label className="mb-1 block text-xs text-gray-400">پورت Worker *</label><input className={fldCls} type="number" value={nf.worker_port} onChange={(e) => setNf({ ...nf, worker_port: Number(e.target.value) })} dir="ltr" /></div>
          <div>
            <label className="mb-1 block text-xs text-gray-400">نسخهٔ افترافکت *</label>
            <select className={fldCls} value={nf.current_ae_version} onChange={(e) => setNf({ ...nf, current_ae_version: e.target.value })}>
              {AE_VERSIONS.map((v) => <option key={v} value={v}>After Effects {v}</option>)}
            </select>
          </div>
          <div>
            <label className="mb-1 block text-xs text-gray-400">نوع نود</label>
            <select className={fldCls} value={nf.node_kind} onChange={(e) => setNf({ ...nf, node_kind: e.target.value })}>
              {NODE_KINDS.map((k) => <option key={k} value={k}>{k}</option>)}
            </select>
          </div>
          <div><label className="mb-1 block text-xs text-gray-400">RAM (GB)</label><input className={fldCls} type="number" value={nf.ram_gb} onChange={(e) => setNf({ ...nf, ram_gb: e.target.value })} dir="ltr" /></div>
          <div><label className="mb-1 block text-xs text-gray-400">هسته‌های CPU</label><input className={fldCls} type="number" value={nf.cpu_cores} onChange={(e) => setNf({ ...nf, cpu_cores: e.target.value })} dir="ltr" /></div>
          <div><label className="mb-1 block text-xs text-gray-400">اولویت</label><input className={fldCls} type="number" value={nf.priority} onChange={(e) => setNf({ ...nf, priority: Number(e.target.value) })} dir="ltr" /></div>
        </div>
        <div className="flex items-center justify-end gap-2 border-t border-[#1e2235] px-5 py-3">
          <button className="rounded-lg border border-[#262b40] px-3 py-1.5 text-xs text-gray-300 hover:bg-[#161a2e]" onClick={() => setShowAdd(false)}>انصراف</button>
          <button className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-50" onClick={addNode} disabled={saving || !nf.name || !nf.region || !nf.node_ip}>{saving ? "در حال ذخیره…" : "ذخیره نود"}</button>
        </div>
      </div>
    </div>
  );

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

  return (
    <div className="space-y-3">
      <div className="flex justify-end">{addBtn}</div>
      {addModal}
      <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, "restart")}
                    disabled={loading[node.id]}
                    className="rounded px-2.5 py-1 text-xs text-blue-300 border border-blue-500/30 hover:bg-blue-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                  >
                    {t("actionRestart")}
                  </button>
                  <button
                    onClick={() => action(node.id, "close-ae")}
                    disabled={loading[node.id]}
                    className="rounded px-2.5 py-1 text-xs text-orange-300 border border-orange-500/30 hover:bg-orange-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                  >
                    {t("actionCloseAe")}
                  </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>
    </div>
  );
}