import { useState, useEffect } from 'react';
import { Cpu, HardDrive, Activity } from 'lucide-react';
import axios from 'axios';
import { API_URL } from '../config';

export default function Stats({ serverName, token }) {
  const [stats, setStats] = useState({
    status: 'stopped',
    cpu: 0,
    memory: 0,
    disk: 0
  });

  useEffect(() => {
    loadStats();
    const interval = setInterval(loadStats, 2000);
    return () => clearInterval(interval);
  }, [serverName]);

  const loadStats = async () => {
    try {
      const { data } = await axios.get(`${API_URL}/api/servers/${serverName}/stats`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      setStats(data);
    } catch (error) {
      console.error('Ошибка загрузки статистики:', error);
    }
  };

  return (
    <div className="p-8 bg-gray-900">
      <h2 className="text-2xl font-bold mb-6">Статистика сервера</h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold">CPU</h3>
            <Cpu className="w-6 h-6 text-blue-400" />
          </div>
          <div className="text-3xl font-bold mb-2">{stats.cpu}%</div>
          <div className="w-full bg-gray-700 rounded-full h-2">
            <div
              className="bg-blue-500 h-2 rounded-full transition-all"
              style={{ width: `${Math.min(stats.cpu, 100)}%` }}
            />
          </div>
        </div>

        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold">ОЗУ</h3>
            <Activity className="w-6 h-6 text-green-400" />
          </div>
          <div className="text-3xl font-bold mb-2">{stats.memory} МБ</div>
          <div className="w-full bg-gray-700 rounded-full h-2">
            <div
              className="bg-green-500 h-2 rounded-full transition-all"
              style={{ width: `${Math.min((stats.memory / 2048) * 100, 100)}%` }}
            />
          </div>
        </div>

        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold">Диск</h3>
            <HardDrive className="w-6 h-6 text-purple-400" />
          </div>
          <div className="text-3xl font-bold mb-2">{stats.disk} МБ</div>
          <div className="text-sm text-gray-400 mt-2">
            Использовано на диске
          </div>
        </div>
      </div>

      <div className="mt-8 bg-gray-800 rounded-lg p-6 border border-gray-700">
        <h3 className="text-lg font-semibold mb-4">Статус</h3>
        <div className="flex items-center gap-3">
          <div
            className={`w-4 h-4 rounded-full ${
              stats.status === 'running' ? 'bg-green-500' : 'bg-red-500'
            }`}
          />
          <span className="text-xl">
            {stats.status === 'running' ? 'Запущен' : 'Остановлен'}
          </span>
        </div>
      </div>
    </div>
  );
}