"use client";

import { useCallback, useEffect, useState } from "react";

interface Health {
  status?: string; cpu_pct?: number | null; ram_available_mb?: number | null;
  ae_running?: boolean; current_job_id?: string | null; cache_used_gb?: number | null; recorded_at?: string | null;
}
interface HealthLog { recorded_at?: string; cpu_pct?: number | null; ram_available_mb?: number | null; status?: string }
interface Crash {
  id: string; crashed_at: string; crash_signal?: string | null; error_log?: string | null;
  last_known_frame?: number | null; auto_recovered: boolean; log_file_url?: string | null;
}

const card = "rounded-xl border border-[#1e2235] bg-[#0f1120]";

function faTime(iso?: string | null) {
  if (!iso) return "—";
  try { return new Date(iso).toLocaleString("fa-IR"); } catch { return iso; }
}

/** Per-node detail modal: live health + recent health history + crash log. */
export function NodeDetail({ nodeId, nodeName, onClose }: { nodeId: string; nodeName: string; onClose: () => void }) {
  const [health, setHealth] = useState<Health | null>(null);
  const [history, setHistory] = useState<HealthLog[]>([]);
  const [crashes, setCrashes] = useState<Crash[]>([]);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    const base = `/api/admin/resource/nodes/${nodeId}`;
    const [h, hh, cr] = await Promise.all([
      fetch(`${base}/health`, { cache: "no-store" }).then((r) => r.json()).catch(() => null),
      fetch(`${base}/health/history`, { cache: "no-store" }).then((r) => r.json()).catch(() => null),
      fetch(`${base}/crashes`, { cache: "no-store" }).then((r) => r.json()).catch(() => null),
    ]);
    setHealth(h ?? null);
    setHistory(hh?.data ?? []);
    setCrashes(cr?.data ?? []);
    setLoading(false);
  }, [nodeId]);
  useEffect(() => { load(); }, [load]);

  const maxCpu = Math.max(1, ...history.map((p) => p.cpu_pct ?? 0));
  const stat = (label: string, value: string) => (
    <div className="rounded-lg border border-[#262b40] bg-[#0c0e1a] px-3 py-2">
      <div className="text-[10px] text-gray-500">{label}</div>
      <div className="mt-0.5 text-sm text-gray-200">{value}</div>
    </div>
  );

  return (
    <div className="fixed inset-0 z-50 flex items-stretch justify-center bg-black/70 p-2 sm:p-6" dir="rtl" onClick={onClose}>
      <div className={`${card} flex max-h-full w-full max-w-3xl flex-col`} 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">جزئیات نود: {nodeName}</h2>
          <div className="flex items-center gap-2">
            <button className="rounded-lg border border-[#262b40] px-2.5 py-1 text-xs text-gray-300 hover:bg-[#161a2e]" onClick={load}>بروزرسانی</button>
            <button className="rounded-lg px-2 py-1 text-gray-400 hover:bg-[#161a2e] hover:text-white" onClick={onClose}>✕</button>
          </div>
        </div>

        <div className="flex-1 space-y-5 overflow-y-auto p-5">
          {loading ? (
            <p className="py-8 text-center text-sm text-gray-500">در حال بارگذاری…</p>
          ) : (
            <>
              <section>
                <h3 className="mb-2 text-xs font-semibold text-gray-400">وضعیت لحظه‌ای</h3>
                <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
                  {stat("وضعیت", health?.status ?? "—")}
                  {stat("پردازنده", health?.cpu_pct != null ? `${health.cpu_pct}٪` : "—")}
                  {stat("RAM آزاد", health?.ram_available_mb != null ? `${health.ram_available_mb} MB` : "—")}
                  {stat("After Effects", health?.ae_running ? "در حال اجرا" : "خاموش")}
                  {stat("کش", health?.cache_used_gb != null ? `${health.cache_used_gb} GB` : "—")}
                  {stat("آخرین ضربان", faTime(health?.recorded_at))}
                </div>
              </section>

              <section>
                <h3 className="mb-2 text-xs font-semibold text-gray-400">نمودار پردازنده (۲۴ ساعت اخیر)</h3>
                {history.length === 0 ? (
                  <p className="text-xs text-gray-600">داده‌ای ثبت نشده.</p>
                ) : (
                  <div className="flex h-24 items-end gap-px overflow-x-auto rounded-lg border border-[#262b40] bg-[#0c0e1a] p-2">
                    {history.map((p, i) => (
                      <div key={i} className="flex min-w-[3px] flex-1 flex-col justify-end" title={`${faTime(p.recorded_at)} — ${p.cpu_pct ?? 0}٪`}>
                        <div className="w-full rounded-t bg-indigo-500/70" style={{ height: `${((p.cpu_pct ?? 0) / maxCpu) * 100}%` }} />
                      </div>
                    ))}
                  </div>
                )}
              </section>

              <section>
                <h3 className="mb-2 text-xs font-semibold text-gray-400">کرش‌های اخیر ({crashes.length.toLocaleString("fa-IR")})</h3>
                {crashes.length === 0 ? (
                  <p className="text-xs text-gray-600">کرشی ثبت نشده. 🎉</p>
                ) : (
                  <div className="space-y-2">
                    {crashes.map((c) => (
                      <div key={c.id} className="rounded-lg border border-[#262b40] bg-[#0c0e1a] p-3 text-xs">
                        <div className="flex items-center justify-between">
                          <span className="text-gray-300">{faTime(c.crashed_at)}</span>
                          <span className="flex items-center gap-2">
                            {c.crash_signal && <span className="rounded bg-red-500/15 px-1.5 py-0.5 text-red-300">{c.crash_signal}</span>}
                            {c.auto_recovered
                              ? <span className="rounded bg-emerald-500/15 px-1.5 py-0.5 text-emerald-300">بازیابی خودکار</span>
                              : <span className="rounded bg-amber-500/15 px-1.5 py-0.5 text-amber-300">بدون بازیابی</span>}
                          </span>
                        </div>
                        {c.last_known_frame != null && <p className="mt-1 text-gray-500">آخرین فریم: {c.last_known_frame}</p>}
                        {c.error_log && <pre className="mt-1 max-h-24 overflow-auto whitespace-pre-wrap text-[11px] text-gray-400" dir="ltr">{c.error_log.slice(0, 600)}</pre>}
                        {c.log_file_url && <a href={c.log_file_url} target="_blank" rel="noreferrer" className="text-indigo-400 hover:underline">فایل لاگ کامل</a>}
                      </div>
                    ))}
                  </div>
                )}
              </section>
            </>
          )}
        </div>
      </div>
    </div>
  );
}
