export const dynamic = "force-dynamic";

"use client";
import { useState, useEffect, useCallback } from "react";
import { Cpu, MemoryStick, HardDrive, Clock, RefreshCw, Wifi, Activity } from "lucide-react";

const TABS = ["Openclaw", "Сервисы"] as const;
type TabName = typeof TABS[number];

const MACHINE_MAP: Record<TabName, string> = {
  "Openclaw": "ocplatform",
  "Сервисы": "services",
};

interface Metrics {
  cpu: number | null;
  load1: number | null;
  cpuCount: number;
  ram: { used: number; total: number; percent: number } | null;
  disk: { used: number; total: number; percent: number } | null;
  uptime: string | null;
  network: { rxBytes: number | null; txBytes: number | null };
}

function CircularGauge({ value, size = 96, color, label }: { value: number; size?: number; color: string; label: string }) {
  const radius = (size - 14) / 2;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (value / 100) * circumference;

  return (
    <div className="flex flex-col items-center gap-2">
      <div className="relative" style={{ width: size, height: size }}>
        <svg width={size} height={size} className="-rotate-90">
          <defs>
            <linearGradient id={`gauge-gradient-${label}`} x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor={color} stopOpacity="0.9" />
              <stop offset="100%" stopColor={color} stopOpacity="0.4" />
            </linearGradient>
          </defs>
          <circle cx={size/2} cy={size/2} r={radius} fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="10" />
          <circle
            cx={size/2} cy={size/2} r={radius}
            fill="none"
            stroke={`url(#gauge-gradient-${label})`}
            strokeWidth="10" strokeLinecap="round"
            strokeDasharray={circumference} strokeDashoffset={offset}
            style={{ transition: "stroke-dashoffset 0.8s ease", filter: `drop-shadow(0 0 8px ${color}60)` }}
          />
        </svg>
        <div className="absolute inset-0 flex items-center justify-center">
          <span className="text-lg font-bold text-white">{value}%</span>
        </div>
      </div>
      <span className="text-xs text-slate-400 font-medium">{label}</span>
    </div>
  );
}

function UsageBar({ label, value, color, detail }: { label: string; value: number; color: string; detail?: string }) {
  return (
    <div className="space-y-2">
      <div className="flex justify-between text-xs">
        <span className="text-slate-400 font-medium">{label}</span>
        <span className="text-white font-semibold">{detail || `${value}%`}</span>
      </div>
      <div className="h-1.5 rounded-full overflow-hidden bg-white/5">
        <div
          className="h-full rounded-full transition-all duration-700"
          style={{ width: `${value}%`, background: color, boxShadow: `0 0 8px ${color}80` }}
        />
      </div>
    </div>
  );
}

export default function SystemPage() {
  const [activeTab, setActiveTab] = useState<TabName>("Openclaw");
  const [metrics, setMetrics] = useState<Metrics | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);

  const fetchMetrics = useCallback(async () => {
    setLoading(true);
    setError(false);
    try {
      const res = await fetch(`/api/metrics?machine=${MACHINE_MAP[activeTab]}`);
      if (!res.ok) throw new Error();
      const data = await res.json();
      setMetrics(data);
      setLastUpdated(new Date());
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  }, [activeTab]);

  useEffect(() => {
    fetchMetrics();
    const interval = setInterval(fetchMetrics, 30000);
    return () => clearInterval(interval);
  }, [fetchMetrics]);

  const formatBytes = (bytes: number | null) => {
    if (bytes == null) return "—";
    const gb = bytes / 1024 / 1024 / 1024;
    if (gb >= 1) return `${gb.toFixed(1)} GB`;
    const mb = bytes / 1024 / 1024;
    return `${mb.toFixed(0)} MB`;
  };

  return (
    <div className="space-y-5 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex items-center justify-between pt-1">
        <div>
          <h1 className="text-2xl font-bold text-white">System Monitor</h1>
          <p className="text-slate-500 text-sm mt-0.5">
            {lastUpdated ? `Обновлено: ${lastUpdated.toLocaleTimeString("ru-RU")}` : "Загрузка..."}
          </p>
        </div>
        <button
          onClick={fetchMetrics}
          disabled={loading}
          className="flex items-center gap-2 px-4 py-2 rounded-xl border border-white/10 text-slate-300 text-sm transition-all hover:border-white/20 hover:bg-white/5 disabled:opacity-50 bg-white/3"
        >
          <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
          Обновить
        </button>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 p-1 rounded-2xl w-fit bg-white/5">
        {TABS.map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={`px-5 py-2 rounded-xl text-sm font-medium transition-all ${
              activeTab === tab
                ? "text-white shadow-lg shadow-indigo-500/20"
                : "text-slate-500 hover:text-slate-300"
            }`}
            style={activeTab === tab ? { background: "linear-gradient(135deg, #6366f1, #8b5cf6)" } : {}}
          >
            {tab}
          </button>
        ))}
      </div>

      {error ? (
        <div className="card p-8 text-center">
          <div className="text-red-400 text-sm mb-2">⚠️ Не удалось получить метрики</div>
          <div className="text-slate-600 text-xs">Убедитесь что node_exporter запущен на хосте</div>
          <button onClick={fetchMetrics} className="mt-4 text-indigo-400 text-sm hover:text-indigo-300 transition-colors">
            Попробовать снова
          </button>
        </div>
      ) : (
        <>
          {/* Circular gauges */}
          <div className="card card-violet p-6">
            <div className="flex items-center gap-2 mb-6">
              <div className="w-7 h-7 rounded-lg bg-violet-500/15 flex items-center justify-center">
                <Activity className="w-3.5 h-3.5 text-violet-400" />
              </div>
              <span className="text-sm font-semibold text-white">Загрузка системы</span>
            </div>
            {loading ? (
              <div className="flex gap-12 justify-center animate-pulse">
                {[1,2,3].map(i => <div key={i} className="w-24 h-28 bg-white/5 rounded-full" />)}
              </div>
            ) : (
              <div className="flex flex-wrap gap-10 justify-around">
                <CircularGauge value={metrics?.cpu ?? 0} label="CPU" color="#6366f1" />
                <CircularGauge value={metrics?.ram?.percent ?? 0} label="RAM" color="#8b5cf6" />
                <CircularGauge value={metrics?.disk?.percent ?? 0} label="Disk" color="#10b981" />
              </div>
            )}
          </div>

          {/* Stats grid */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            {[
              { icon: Cpu, label: "CPU", value: loading ? "..." : `${metrics?.cpu ?? "—"}%`, sub: loading ? "" : `Load: ${metrics?.load1?.toFixed(2) ?? "—"} · ${metrics?.cpuCount ?? "?"} cores`, color: "text-indigo-400", accent: "card-blue" },
              { icon: MemoryStick, label: "RAM", value: loading ? "..." : `${metrics?.ram?.used ?? "—"} GB`, sub: loading ? "" : `из ${metrics?.ram?.total ?? "?"} GB`, color: "text-violet-400", accent: "card-violet" },
              { icon: HardDrive, label: "Disk", value: loading ? "..." : `${metrics?.disk?.used ?? "—"} GB`, sub: loading ? "" : `из ${metrics?.disk?.total ?? "?"} GB`, color: "text-emerald-400", accent: "card-emerald" },
              { icon: Clock, label: "Uptime", value: loading ? "..." : (metrics?.uptime ?? "—"), sub: "Время работы", color: "text-amber-400", accent: "card-amber" },
            ].map((item) => (
              <div key={item.label} className={`card ${item.accent} p-5`}>
                <div className="flex items-center gap-2 mb-3">
                  <item.icon className={`w-4 h-4 ${item.color}`} />
                  <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">{item.label}</span>
                </div>
                <div className="text-2xl font-bold text-white">{item.value}</div>
                {item.sub && <div className="text-xs text-slate-600 mt-1">{item.sub}</div>}
              </div>
            ))}
          </div>

          {/* Usage bars */}
          {!loading && metrics && (
            <div className="card p-5 space-y-5">
              <h3 className="text-sm font-semibold text-white">Использование ресурсов</h3>
              <UsageBar label="CPU" value={metrics.cpu ?? 0} color="#6366f1" detail={`${metrics.cpu ?? "—"}%`} />
              {metrics.ram && (
                <UsageBar label="RAM" value={metrics.ram.percent} color="#8b5cf6" detail={`${metrics.ram.used} / ${metrics.ram.total} GB`} />
              )}
              {metrics.disk && (
                <UsageBar label="Disk" value={metrics.disk.percent} color="#10b981" detail={`${metrics.disk.used} / ${metrics.disk.total} GB`} />
              )}
            </div>
          )}

          {/* Network */}
          {!loading && metrics?.network && (
            <div className="card card-cyan p-5">
              <div className="flex items-center gap-2 mb-4">
                <div className="w-7 h-7 rounded-lg bg-cyan-500/15 flex items-center justify-center">
                  <Wifi className="w-3.5 h-3.5 text-cyan-400" />
                </div>
                <span className="text-sm font-semibold text-white">Сеть (всего)</span>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="rounded-xl p-3 border border-white/5" style={{ background: "rgba(6,182,212,0.05)" }}>
                  <div className="text-[10px] text-slate-500 mb-1 uppercase tracking-wider">↓ Получено</div>
                  <div className="text-xl font-bold text-white">{formatBytes(metrics.network.rxBytes)}</div>
                </div>
                <div className="rounded-xl p-3 border border-white/5" style={{ background: "rgba(6,182,212,0.05)" }}>
                  <div className="text-[10px] text-slate-500 mb-1 uppercase tracking-wider">↑ Отправлено</div>
                  <div className="text-xl font-bold text-white">{formatBytes(metrics.network.txBytes)}</div>
                </div>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}