import { useState, useEffect } from 'react';
import { Server, Plus, Trash2, Edit, RefreshCw, CheckCircle, XCircle, Activity } from 'lucide-react';
import axios from 'axios';
import { API_URL } from '../config';
import { notify } from './NotificationSystem';

export default function Daemons({ token }) {
  const [daemons, setDaemons] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showAddModal, setShowAddModal] = useState(false);
  const [editingDaemon, setEditingDaemon] = useState(null);

  const [formData, setFormData] = useState({
    name: '',
    address: '',
    port: 24444,
    key: '',
    remarks: ''
  });

  useEffect(() => {
    loadDaemons();
    const interval = setInterval(loadDaemons, 10000); // Обновляем каждые 10 секунд
    return () => clearInterval(interval);
  }, []);

  const loadDaemons = async () => {
    try {
      const { data } = await axios.get(`${API_URL}/api/daemons`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      setDaemons(data);
      setLoading(false);
    } catch (error) {
      console.error('Ошибка загрузки демонов:', error);
      setLoading(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      if (editingDaemon) {
        await axios.put(
          `${API_URL}/api/daemons/${editingDaemon.id}`,
          formData,
          { headers: { Authorization: `Bearer ${token}` } }
        );
        notify('success', 'Демон обновлен', 'Демон успешно обновлен');
      } else {
        await axios.post(
          `${API_URL}/api/daemons`,
          formData,
          { headers: { Authorization: `Bearer ${token}` } }
        );
        notify('success', 'Демон добавлен', 'Демон успешно добавлен');
      }

      setShowAddModal(false);
      setEditingDaemon(null);
      setFormData({ name: '', address: '', port: 24444, key: '', remarks: '' });
      loadDaemons();
    } catch (error) {
      notify('error', 'Ошибка', error.response?.data?.detail || 'Не удалось сохранить демон');
    }
  };

  const handleDelete = async (daemonId) => {
    if (!confirm('Вы уверены, что хотите удалить этот демон?')) return;

    try {
      await axios.delete(`${API_URL}/api/daemons/${daemonId}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      notify('success', 'Демон удален', 'Демон успешно удален');
      loadDaemons();
    } catch (error) {
      notify('error', 'Ошибка удаления', error.response?.data?.detail || 'Не удалось удалить демон');
    }
  };

  const handleEdit = (daemon) => {
    setEditingDaemon(daemon);
    setFormData({
      name: daemon.name,
      address: daemon.address,
      port: daemon.port,
      key: daemon.key,
      remarks: daemon.remarks || ''
    });
    setShowAddModal(true);
  };

  const formatBytes = (bytes) => {
    if (!bytes) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-gray-400">Загрузка демонов...</div>
      </div>
    );
  }

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <Server className="w-8 h-8 text-blue-400" />
          <div>
            <h2 className="text-2xl font-bold text-white">Демоны</h2>
            <p className="text-gray-400">Управление удаленными серверами</p>
          </div>
        </div>
        <div className="flex gap-2">
          <button
            onClick={loadDaemons}
            className="btn-secondary flex items-center gap-2"
          >
            <RefreshCw className="w-4 h-4" />
            Обновить
          </button>
          <button
            onClick={() => {
              setEditingDaemon(null);
              setFormData({ name: '', address: '', port: 24444, key: '', remarks: '' });
              setShowAddModal(true);
            }}
            className="btn-primary flex items-center gap-2"
          >
            <Plus className="w-4 h-4" />
            Добавить демон
          </button>
        </div>
      </div>

      {daemons.length === 0 ? (
        <div className="card p-12 text-center">
          <Server className="w-16 h-16 mx-auto mb-4 text-gray-500 opacity-50" />
          <p className="text-lg font-medium mb-2">Нет демонов</p>
          <p className="text-sm text-gray-400 mb-4">
            Добавьте первый демон для управления удаленными серверами
          </p>
          <button
            onClick={() => setShowAddModal(true)}
            className="btn-primary"
          >
            Добавить демон
          </button>
        </div>
      ) : (
        <div className="grid gap-4">
          {daemons.map((daemon) => (
            <div key={daemon.id} className="card p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-center gap-4">
                  <div className={`p-3 rounded-xl ${daemon.status === 'online' ? 'bg-green-500/20' : 'bg-red-500/20'}`}>
                    <Server className={`w-6 h-6 ${daemon.status === 'online' ? 'text-green-400' : 'text-red-400'}`} />
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <h3 className="text-lg font-semibold text-white">{daemon.name}</h3>
                      {daemon.status === 'online' ? (
                        <span className="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded flex items-center gap-1">
                          <CheckCircle className="w-3 h-3" />
                          Онлайн
                        </span>
                      ) : (
                        <span className="px-2 py-1 bg-red-500/20 text-red-400 text-xs rounded flex items-center gap-1">
                          <XCircle className="w-3 h-3" />
                          Оффлайн
                        </span>
                      )}
                    </div>
                    <p className="text-sm text-gray-400 mt-1">
                      {daemon.address}:{daemon.port}
                    </p>
                    {daemon.remarks && (
                      <p className="text-sm text-gray-500 mt-1">{daemon.remarks}</p>
                    )}
                  </div>
                </div>

                <div className="flex gap-2">
                  <button
                    onClick={() => handleEdit(daemon)}
                    className="p-2 bg-dark-700 hover:bg-dark-600 rounded transition"
                    title="Редактировать"
                  >
                    <Edit className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => handleDelete(daemon.id)}
                    className="p-2 bg-dark-700 hover:bg-dark-600 rounded text-red-400 transition"
                    title="Удалить"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </div>

              {daemon.status === 'online' && daemon.system && (
                <div className="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-gray-700">
                  <div>
                    <div className="flex items-center gap-2 mb-2">
                      <Activity className="w-4 h-4 text-blue-400" />
                      <span className="text-sm text-gray-400">CPU</span>
                    </div>
                    <div className="text-xl font-bold text-white">{daemon.system.cpu_usage?.toFixed(1)}%</div>
                    <div className="w-full bg-dark-700 rounded-full h-2 mt-2">
                      <div
                        className="bg-blue-500 h-2 rounded-full transition-all"
                        style={{ width: `${Math.min(daemon.system.cpu_usage || 0, 100)}%` }}
                      />
                    </div>
                  </div>

                  <div>
                    <div className="flex items-center gap-2 mb-2">
                      <Activity className="w-4 h-4 text-green-400" />
                      <span className="text-sm text-gray-400">ОЗУ</span>
                    </div>
                    <div className="text-xl font-bold text-white">{daemon.system.memory_percent?.toFixed(1)}%</div>
                    <div className="text-xs text-gray-500">
                      {formatBytes(daemon.system.memory_used)} / {formatBytes(daemon.system.memory_total)}
                    </div>
                    <div className="w-full bg-dark-700 rounded-full h-2 mt-2">
                      <div
                        className="bg-green-500 h-2 rounded-full transition-all"
                        style={{ width: `${Math.min(daemon.system.memory_percent || 0, 100)}%` }}
                      />
                    </div>
                  </div>

                  <div>
                    <div className="flex items-center gap-2 mb-2">
                      <Activity className="w-4 h-4 text-purple-400" />
                      <span className="text-sm text-gray-400">Диск</span>
                    </div>
                    <div className="text-xl font-bold text-white">{daemon.system.disk_percent?.toFixed(1)}%</div>
                    <div className="text-xs text-gray-500">
                      {formatBytes(daemon.system.disk_used)} / {formatBytes(daemon.system.disk_total)}
                    </div>
                    <div className="w-full bg-dark-700 rounded-full h-2 mt-2">
                      <div
                        className="bg-purple-500 h-2 rounded-full transition-all"
                        style={{ width: `${Math.min(daemon.system.disk_percent || 0, 100)}%` }}
                      />
                    </div>
                  </div>
                </div>
              )}

              {daemon.status === 'online' && daemon.servers && (
                <div className="mt-4 pt-4 border-t border-gray-700">
                  <div className="flex items-center gap-2 text-sm text-gray-400">
                    <Server className="w-4 h-4" />
                    <span>Серверов: {daemon.servers.total || 0}</span>
                    <span className="text-gray-600">•</span>
                    <span className="text-green-400">Запущено: {daemon.servers.running || 0}</span>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      {/* Модальное окно добавления/редактирования */}
      {showAddModal && (
        <div className="modal-overlay" onClick={() => setShowAddModal(false)}>
          <div className="modal-content max-w-2xl" onClick={(e) => e.stopPropagation()}>
            <h2 className="text-xl font-bold text-white mb-6">
              {editingDaemon ? 'Редактировать демон' : 'Добавить демон'}
            </h2>

            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2 text-white">
                  Название
                </label>
                <input
                  type="text"
                  required
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className="input"
                  placeholder="Main Server"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-2 text-white">
                    IP адрес
                  </label>
                  <input
                    type="text"
                    required
                    value={formData.address}
                    onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                    className="input"
                    placeholder="192.168.1.100"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-2 text-white">
                    Порт
                  </label>
                  <input
                    type="number"
                    required
                    value={formData.port}
                    onChange={(e) => setFormData({ ...formData, port: parseInt(e.target.value) })}
                    className="input"
                    placeholder="24444"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2 text-white">
                  Ключ демона
                </label>
                <input
                  type="text"
                  required
                  value={formData.key}
                  onChange={(e) => setFormData({ ...formData, key: e.target.value })}
                  className="input"
                  placeholder="your-secret-key"
                />
                <p className="text-xs text-gray-400 mt-1">
                  Ключ должен совпадать с DAEMON_KEY в .env файле демона
                </p>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2 text-white">
                  Примечания (необязательно)
                </label>
                <textarea
                  value={formData.remarks}
                  onChange={(e) => setFormData({ ...formData, remarks: e.target.value })}
                  className="w-full bg-dark-800 border-gray-700 border rounded-xl px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 transition resize-none"
                  rows={3}
                  placeholder="Дополнительная информация о демоне"
                />
              </div>

              <div className="flex gap-2 pt-4">
                <button
                  type="button"
                  onClick={() => {
                    setShowAddModal(false);
                    setEditingDaemon(null);
                  }}
                  className="flex-1 btn-secondary"
                >
                  Отмена
                </button>
                <button
                  type="submit"
                  className="flex-1 btn-primary"
                >
                  {editingDaemon ? 'Сохранить' : 'Добавить'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}