'use client';
import { useEffect, useState, useCallback } from 'react';
import { monitoringService } from '@/services/monitoring.service';
import type { PerformanceSnapshot } from '@/types/monitoring.types';

function formatBytes(bytes: number): string {
  if (!Number.isFinite(bytes) || bytes < 0) return '-';
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  let value = bytes;
  let unit = 0;
  while (value >= 1024 && unit < units.length - 1) {
    value /= 1024;
    unit += 1;
  }
  return `${value.toFixed(1)} ${units[unit]}`;
}

function Gauge({ label, value, max, color }: { label: string; value: number; max: number; color: string }) {
  const pct = Math.min(100, Math.max(0, (value / max) * 100));
  return (
    <div className="rounded-xl border border-white/5 bg-white/[0.02] p-4">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs font-medium text-slate-300">{label}</span>
        <span className="font-mono text-sm text-white">{value.toFixed(2)}</span>
      </div>
      <div className="h-2 w-full rounded-full bg-white/5">
        <div className={`h-2 rounded-full ${color}`} style={{ width: `${pct}%` }} />
      </div>
    </div>
  );
}

export default function MonitoringPerformancePage() {
  const [perf, setPerf] = useState<PerformanceSnapshot | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchPerf = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await monitoringService.getPerformance();
      setPerf(res);
    } catch (e: any) {
      setError(e?.message ?? 'Failed to fetch performance');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchPerf();
    const id = setInterval(fetchPerf, 5000);
    return () => clearInterval(id);
  }, [fetchPerf]);

  if (loading && !perf) {
    return <div className="animate-pulse space-y-4">{[1, 2, 3].map((i) => <div key={i} className="h-32 rounded-xl bg-white/[0.03]" />)}</div>;
  }

  if (!perf) {
    return <p className="py-10 text-center text-sm text-slate-500">{error ?? 'Failed to load performance metrics'}</p>;
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Performance Metrics</h1>
          <p className="mt-1 text-sm text-white/50">CPU, memory, event loop delay, and process runtime stats</p>
        </div>
        <button onClick={fetchPerf} className="rounded-lg bg-white/10 px-3 py-2 text-xs text-white/70 hover:bg-white/20 transition-colors">Refresh</button>
      </div>

      {error && <div className="rounded-xl border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-300">{error}</div>}

      {/* Gauges */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        <Gauge label="CPU Usage (%)" value={perf.cpu.percent} max={100} color="bg-indigo-500" />
        <Gauge label="Memory Used (%)" value={perf.memory.usedPercent} max={100} color="bg-amber-500" />
        <Gauge label="Event Loop (ms)" value={perf.eventLoop.currentMs} max={1000} color="bg-red-500" />
        <Gauge label="Heap Used (MB)" value={perf.process.heapUsedMb} max={512} color="bg-emerald-500" />
      </div>

      {/* Event loop */}
      <div className="rounded-xl border border-white/5 bg-white/[0.02] p-4">
        <h3 className="mb-3 text-sm font-medium text-white">Event Loop Delay</h3>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
          <Metric label="Current" value={`${perf.eventLoop.currentMs.toFixed(2)} ms`} />
          <Metric label="Max" value={`${perf.eventLoop.maxMs.toFixed(2)} ms`} />
          <Metric label="Avg" value={`${perf.eventLoop.avgMs.toFixed(2)} ms`} />
          <Metric label="p95" value={`${perf.eventLoop.p95Ms.toFixed(2)} ms`} />
        </div>
      </div>

      {/* CPU */}
      <div className="rounded-xl border border-white/5 bg-white/[0.02] p-4">
        <h3 className="mb-3 text-sm font-medium text-white">CPU</h3>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
          <Metric label="Usage" value={`${perf.cpu.percent.toFixed(2)}%`} />
          <Metric label="Cores" value={`${perf.cpu.cores}`} />
          <Metric label="Load 1m" value={`${perf.cpu.loadAvg[0].toFixed(2)}`} />
          <Metric label="Load 5m" value={`${perf.cpu.loadAvg[1].toFixed(2)}`} />
        </div>
      </div>

      {/* Memory */}
      <div className="rounded-xl border border-white/5 bg-white/[0.02] p-4">
        <h3 className="mb-3 text-sm font-medium text-white">Memory</h3>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
          <Metric label="Used" value={formatBytes(perf.memory.usedBytes)} />
          <Metric label="Free" value={formatBytes(perf.memory.freeBytes)} />
          <Metric label="Total" value={formatBytes(perf.memory.totalBytes)} />
          <Metric label="Process RSS" value={`${perf.memory.processRssMb.toFixed(2)} MB`} />
        </div>
      </div>

      {/* Process */}
      <div className="rounded-xl border border-white/5 bg-white/[0.02] p-4">
        <h3 className="mb-3 text-sm font-medium text-white">Process</h3>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
          <Metric label="Uptime" value={`${Math.floor(perf.process.uptimeSeconds / 60)}m`} />
          <Metric label="Heap Used" value={`${perf.process.heapUsedMb.toFixed(2)} MB`} />
          <Metric label="RSS" value={`${perf.process.rssMb.toFixed(2)} MB`} />
        </div>
      </div>
    </div>
  );
}

function Metric({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-lg bg-white/5 p-3">
      <p className="text-[10px] uppercase tracking-wider text-slate-500">{label}</p>
      <p className="mt-1 font-mono text-sm text-white">{value}</p>
    </div>
  );
}