proxmox-monitor/src/components/Dashboard.js

'use client';

import { useState, useEffect, useRef } from 'react';
import NodeList from './NodeList';
import VMList from './VMList';
import LXCList from './LXCList';
import axios from 'axios';

const DEFAULT_INTERVAL = Number(process.env.NEXT_PUBLIC_API_POLL_INTERVAL || 30000);

function pollUrls() {
  return ['/api/nodes', '/api/vms', '/api/lxc', '/api/status'];
}

/** @returns {import('react').ReactNode} */
export default function Dashboard() {
  const [activeTab, setActiveTab] = useState('nodes');
  const [powerActionStatus, setPowerActionStatus] = useState(null);
  const [intervalMs, setIntervalMs] = useState(DEFAULT_INTERVAL);
  const [nodes, setNodes] = useState([]);
  const [vms, setVms] = useState([]);
  const [lxc, setLxc] = useState([]);
  const [summary, setSummary] = useState(null);
  const [error, setError] = useState(null);

  const ref = useRef({ nodes: setNodes, vms: setVms, lxc: setLxc, status: setSummary });
  useEffect(() => {
    ref.current = { nodes: setNodes, vms: setVms, lxc: setLxc, status: setSummary };
  }, []);

  useEffect(() => {
    let cancelled = false;

    const poll = async () => {
      try {
        const [n, v, l, s] = await Promise.all([
          axios.get('/api/nodes'),
          axios.get('/api/vms'),
          axios.get('/api/lxc'),
          axios.get('/api/status'),
        ]);
        if (cancelled) return;
        setNodes(n.data.data);
        setVms(v.data.data);
        setLxc(l.data.data);
        setSummary(s.data.data);
        setError(null);
      } catch (err) {
        if (!cancelled) setError(err.message);
      }
    };
    poll();
    const id = setInterval(poll, intervalMs);
    return () => { cancelled = true; clearInterval(id); };
  }, [intervalMs]);

  const handlePowerAction = async (node, vmid, type, action) => {
    const label = action.charAt(0).toUpperCase() + action.slice(1);
    const kind = type === 'qemu' ? 'VM' : 'LXC';
    setPowerActionStatus({ text: `${label}ing ${kind} ${vmid}...`, type: 'pending' });
    await new Promise((r) => requestAnimationFrame(r));

    try {
      await axios.post('/api/power', { node, vmid, type, action });
      await pollUrls().map((url) => axios.get(url));
      setPowerActionStatus({ text: `${label} successful`, type: 'success' });
      // Sync state from poll responses
      setNodes(nodes.map((n) => n));
      setVms(vms.map((v) => v));
      setLxc(lxc.map((l) => l));
      setTimeout(() => setPowerActionStatus(null), 3000);
    } catch (err) {
      setPowerActionStatus({ text: err.message || `${label} failed`, type: 'error' });
    }
  };

  const [isRefreshing, setIsRefreshing] = useState(false);
  const handleRefresh = async () => {
    setIsRefreshing(true);
    try {
      await Promise.all(pollUrls().map((url) => axios.get(url)));
    } finally {
      setIsRefreshing(false);
    }
  };

  const handleIntervalChange = (e) => {
    const v = Number(e.target.value);
    if (v > 0) setIntervalMs(v);
  };

  const [intervalInput, setIntervalInput] = useState(DEFAULT_INTERVAL);
  useEffect(() => { setIntervalInput(intervalMs); }, [intervalMs]);

  const handleIntervalBlur = () => {
    handleIntervalChange({ target: { value: intervalInput } });
  };

  const handleOpenConsole = (vm) => {
    window.open(vm.consoleUrl, '_blank');
  };

  const tabs = [
    { id: 'nodes', label: 'Nodes' },
    { id: 'vms', label: 'VMs' },
    { id: 'lxc', label: 'LXCs' },
  ];

  return (
    <div className="min-h-screen p-4 sm:p-6 lg:p-8">
      {/* Header */}
      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-text-primary">Proxmox Monitor</h1>
          <p className="mt-1 text-sm text-text-secondary">
            {nodes.length} node{nodes.length !== 1 ? 's' : ''} • {summary?.runningVMs ?? 0} running • Updated{' '}
            {new Date().toLocaleTimeString()}
          </p>
        </div>
        <div className="flex gap-2 self-start sm:self-auto">
          <input
            type="number"
            min="1000"
            step="1000"
            value={intervalInput}
            onChange={(e) => setIntervalInput(Number(e.target.value))}
            onBlur={handleIntervalBlur}
            onKeyDown={(e) => { if (e.key === 'Enter') { e.currentTarget.blur(); } }}
            className="w-24 rounded-md border border-border-card bg-bg-card px-2 py-1.5 text-sm text-text-primary focus:border-accent focus:outline-none"
            placeholder="ms"
          />
          <button
            onClick={handleRefresh}
            disabled={isRefreshing}
            className="self-start rounded-md border border-border-card bg-bg-card px-3 py-1.5 text-sm font-medium text-text-secondary hover:border-accent hover:text-accent disabled:opacity-50"
          >
            {isRefreshing ? 'Refreshing…' : '↻ Refresh'}
          </button>
        </div>
      </div>

      {/* Summary Cards */}
      {summary && !error && (
        <div className="mb-6 grid gap-4 sm:grid-cols-4">
          <div className="rounded-xl border border-border-card bg-bg-card p-4">
            <div className="text-xs uppercase tracking-wider text-text-secondary">Nodes</div>
            <div className="mt-1 text-2xl font-bold text-text-primary">{summary.totalNodes}</div>
          </div>
          <div className="rounded-xl border border-border-card bg-bg-card p-4">
            <div className="text-xs uppercase tracking-wider text-text-secondary">Running VMs</div>
            <div className="mt-1 text-2xl font-bold text-status-green">{summary.runningVMs}</div>
          </div>
          <div className="rounded-xl border border-border-card bg-bg-card p-4">
            <div className="text-xs uppercase tracking-wider text-text-secondary">Stopped VMs</div>
            <div className="mt-1 text-2xl font-bold text-status-red">{summary.stoppedVMs}</div>
          </div>
          <div className="rounded-xl border border-border-card bg-bg-card p-4">
            <div className="text-xs uppercase tracking-wider text-text-secondary">Total Memory</div>
            <div className="mt-1 text-xl font-bold text-text-primary">
              {summary.totalMemory?.total
                ? `${(summary.totalMemory.used / (1024 ** 3)).toFixed(1)} / ${(summary.totalMemory.total / (1024 ** 3)).toFixed(1)} GB`
                : 'N/A'}
            </div>
          </div>
        </div>
      )}

      {error && (
        <div className="mb-6 rounded-xl border border-status-red/30 bg-status-red/10 p-4 text-sm text-status-red">
          {error}
        </div>
      )}

      {powerActionStatus && (
        <div className={`mb-6 rounded-xl border p-4 text-sm ${
          powerActionStatus.type === 'success' ? 'border-status-green/30 bg-status-green/10 text-status-green'
            : powerActionStatus.type === 'error' ? 'border-status-red/30 bg-status-red/10 text-status-red'
            : 'border-border-card bg-bg-card text-text-secondary'
        }`}>
          {powerActionStatus.text}
        </div>
      )}

      {/* Tab navigation */}
      <div className="mb-4 flex gap-2 border-b border-border-card">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id
              ? 'border-b-2 border-accent text-text-primary'
              : 'text-text-secondary hover:text-text-primary'
              }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab content */}
      <div>
        {activeTab === 'nodes' && <NodeList nodes={nodes} />}
        {activeTab === 'vms' && <VMList vms={vms} onPowerAction={handlePowerAction} onOpenConsole={handleOpenConsole} />}
        {activeTab === 'lxc' && <LXCList lxc={lxc} onPowerAction={handlePowerAction} onOpenConsole={handleOpenConsole} />}
      </div>

      {/* Footer */}
      <div className="mt-8 text-center text-xs text-text-secondary">
        Polling every {intervalMs / 1000}s • Proxmox VE Monitor
      </div>
    </div>
  );
}