import { useState, useEffect, useRef } from 'react';
import api from './lib/api.js';
import ConfirmDialog from './components/ConfirmDialog.jsx';
import FormModal from './components/FormModal.jsx';
import ConfirmModal from './components/ConfirmModal.jsx';
import FormField from './components/FormField.jsx';
import { 
  IconPlus, 
  IconSearch, 
  IconEdit, 
  IconTrash, 
  IconCheck, 
  IconX, 
  IconDatabase,
  IconRefresh,
  IconArrowsExchange,
  IconDownload,
  IconUpload,
  IconAlertTriangle,
  IconServer,
  IconChevronDown,
  IconLink,
  IconFilter,
  IconMapPin,
  IconWorld
} from '@tabler/icons-react';
import GraphView from './GraphView';

const API_URL = '/api';
const SERVER_TYPE_OPTIONS = [
  { value: 'jumphost', label: 'Jumphost' },
  { value: 'exit', label: 'Выходная нода' },
];
const NEEDS_GATEWAYS = (type) => ['jumphost', 'exit'].includes(String(type || '').toLowerCase());

const makeGateway = (over = {}) => ({
  id: `${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
  name: '',
  ip: '',
  comment: '',
  primary: false,
  ...over,
});

const normalizeGateways = (gateways = [], fallbackName = '') => {
  if (!Array.isArray(gateways)) return [];
  const cleaned = gateways
    .map((g, idx) => ({
      id: g?.id || `${Date.now()}-${idx}`,
      name: String(g?.name || '').trim(),
      ip: String(g?.ip || '').trim(),
      comment: String(g?.comment || '').trim(),
      primary: Boolean(g?.primary),
    }))
    .filter(g => g.name || g.ip || g.comment);
  if (cleaned.length === 0) {
    return [{ id: `${Date.now()}-primary`, name: fallbackName || 'gateway', ip: '', comment: '', primary: true }];
  }
  // ensure single primary
  let hasPrimary = false;
  cleaned.forEach((g, i) => {
    if (g.primary && !hasPrimary) {
      hasPrimary = true;
    } else {
      g.primary = false;
    }
  });
  if (!hasPrimary) cleaned[0].primary = true;
  return cleaned;
};

function ServerManager() {
  const [servers, setServers] = useState([]);
  const [newServer, setNewServer] = useState({ 
    id: '',
    ip: '', 
    extIp: '',
    internalIp: '',
    dns: '', 
    country: '', 
    provider: '', 
    tunnel: 'GRE',
    type: 'jumphost',
    gateway: '',
    gateways: [makeGateway({ primary: true })],
  });
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [searchTerm, setSearchTerm] = useState('');
  const [editingServer, setEditingServer] = useState(null);
  const [editingValues, setEditingValues] = useState({});
  const [bulkFrom, setBulkFrom] = useState('GRE');
  const [bulkTo, setBulkTo] = useState('IPSec');
  const [loading, setLoading] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [serverToDelete, setServerToDelete] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [sortField, setSortField] = useState('ip');
  const [sortOrder, setSortOrder] = useState('asc');
  const [filterTunnel, setFilterTunnel] = useState('');
  const [filterCountry, setFilterCountry] = useState('');
  const [filterProvider, setFilterProvider] = useState('');
  const [filterType, setFilterType] = useState('');
  const editInputRef = useRef(null);
  const pageSize = 10;

  const [editModalOpen, setEditModalOpen] = useState(false);
  const [editModalServer, setEditModalServer] = useState(null);

  // Состояние для генератора ссылок
  const [linkGeneratorOpen, setLinkGeneratorOpen] = useState(false);
  const [linkGeneratorServer, setLinkGeneratorServer] = useState(null);
  const [urlSettings, setUrlSettings] = useState({
    baseUrl: 'https://functions.yandexcloud.net/d4eno3im0qgsr4tj5hdo',
    cloudflare_gateway: 'SWE-IHOR',
    bunny_gateway: 'SWE-IHOR',
    fastly_gateway: 'SWE-IHOR',
    telegram_gateway: '94.142.140.1',
    hetzner_gateway: '94.142.140.1',
    type: 'routes',
    version: 'v4.rsc'
  });
  const presets = {
    default: { baseUrl: 'https://functions.yandexcloud.net/d4eno3im0qgsr4tj5hdo', cloudflare_gateway: 'SWE-IHOR', bunny_gateway: 'SWE-IHOR', fastly_gateway: 'SWE-IHOR', telegram_gateway: '94.142.140.1', hetzner_gateway: '94.142.140.1', type: 'routes', version: 'v4.rsc' },
    cloudflareSWE: { baseUrl: 'https://cf.example/api', cloudflare_gateway: 'SWE-IHOR', bunny_gateway: '', fastly_gateway: '', telegram_gateway: '', hetzner_gateway: '', type: 'routes', version: 'v4.rsc' },
    hetznerDE: { baseUrl: 'https://hetzner.example/api', cloudflare_gateway: '', bunny_gateway: '', fastly_gateway: '', telegram_gateway: '', hetzner_gateway: '94.142.140.1', type: 'routes', version: 'v4.rsc' }
  };

  // Состояние для мониторинга сети
  const [networkStatus, setNetworkStatus] = useState({});
  const [monitoringEnabled, setMonitoringEnabled] = useState(false);

  // Состояние для модального окна добавления сервера
  const [addServerModalOpen, setAddServerModalOpen] = useState(false);
  const [customProvider, setCustomProvider] = useState('');

  const [connections, setConnections] = useState([]);
  const [newConnection, setNewConnection] = useState({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
  const [graphConnectionModalOpen, setGraphConnectionModalOpen] = useState(false);

  // Фильтры графа
  const [graphTunnelFilters, setGraphTunnelFilters] = useState({ GRE: true, IPSec: true, WireGuard: true, OpenVPN: true });
  const [graphCountryFilter, setGraphCountryFilter] = useState('');
  const [graphProviderFilter, setGraphProviderFilter] = useState('');
  const [confirmState, setConfirmState] = useState({ open: false, text: '', onConfirm: null });

  const normalizeServerType = (type) => {
    const value = String(type || '').toLowerCase();
    return SERVER_TYPE_OPTIONS.some((opt) => opt.value === value) ? value : 'jumphost';
  };

  useEffect(() => {
    fetchServers();
    fetchConnections();
  }, []);

  // Загружаем настройки URL из localStorage
  useEffect(() => {
    const savedSettings = localStorage.getItem('urlSettings');
    if (savedSettings) {
      try {
        const parsed = JSON.parse(savedSettings);
        setUrlSettings(prev => ({ ...prev, ...parsed }));
      } catch (e) {
        console.error('Ошибка при загрузке настроек URL:', e);
      }
    }
  }, []);

  const fetchServers = async () => {
    setLoading(true);
    try {
      const response = await api.get(`/servers`);
      const normalized = (Array.isArray(response.data) ? response.data : []).map((srv) => ({
        ...srv,
        type: normalizeServerType(srv.type),
        gateways: NEEDS_GATEWAYS(srv.type) ? normalizeGateways(srv.gateways, srv.gateway || srv.dns || srv.ip) : (Array.isArray(srv.gateways) ? srv.gateways : []),
      }));
      setServers(normalized);
      setError('');
    } catch (error) {
      console.error('Error fetching servers:', error);
      setError('Не удалось загрузить серверы. Проверьте, запущен ли бэкенд.');
    } finally {
      setLoading(false);
    }
  };

  const fetchConnections = async () => {
    try {
      const response = await api.get(`/server-connections`);
      if (Array.isArray(response.data)) {
        setConnections(response.data);
      } else {
        setConnections([]);
      }
    } catch (error) {
      console.error('Error fetching server connections:', error);
      // Не перекрываем возможную ошибку по серверам, просто логируем
    }
  };

  const handleAddServer = () => {
    if (!newServer.ip.trim() || !newServer.dns.trim() || !newServer.country.trim() || !newServer.provider.trim() || !newServer.tunnel.trim() || !newServer.type) {
      setError('Все обязательные поля должны быть заполнены.');
      return;
    }
    setError('');
    const nextId = `srv-${servers.length + 1}`;
    const serverToAdd = {
      ...newServer,
      id: newServer.id || nextId,
      type: normalizeServerType(newServer.type),
    };
    setServers([...servers, serverToAdd]);
    setNewServer({ 
      id: '',
      ip: '', 
      extIp: '',
      internalIp: '',
      dns: '', 
      country: '', 
      provider: '', 
      tunnel: 'GRE',
      type: 'jumphost',
      gateway: '',
      gateways: [makeGateway({ primary: true })],
    });
  };

  // Функции для модального окна добавления сервера
  const handleOpenAddServerModal = () => {
    setAddServerModalOpen(true);
  };

  const handleCloseAddServerModal = () => {
    setAddServerModalOpen(false);
    setNewServer({ 
      id: '',
      ip: '', 
      extIp: '',
      internalIp: '',
      dns: '', 
      country: '', 
      provider: '', 
      tunnel: 'GRE',
      type: 'jumphost',
      gateway: '',
      gateways: [makeGateway({ primary: true })],
    });
    setCustomProvider('');
    setError('');
  };

  const handleAddServerFromModal = () => {
    if (!newServer.ip.trim() || !newServer.dns.trim() || !newServer.country.trim() || !newServer.provider.trim() || !newServer.tunnel.trim() || !newServer.type) {
      setError('Все обязательные поля должны быть заполнены.');
      return;
    }
    if (NEEDS_GATEWAYS(newServer.type)) {
      const normalizedGws = normalizeGateways(newServer.gateways, newServer.gateway || newServer.dns || newServer.ip);
      if (!normalizedGws.length) {
        setError('Добавьте хотя бы один gateway и отметьте основной.');
        return;
      }
      newServer.gateways = normalizedGws;
    } else {
      newServer.gateways = [];
    }
    
    // Проверяем, если выбран "Другой" провайдер, то customProvider должен быть заполнен
    if (newServer.provider === 'Другой' && !customProvider.trim()) {
      setError('Пожалуйста, введите название провайдера.');
      return;
    }
    
    setError('');
    
    // Используем customProvider если выбран "Другой"
    const finalProvider = newServer.provider === 'Другой' ? customProvider : newServer.provider;
    const nextId = `srv-${servers.length + 1}`;
    const normalizedGws = NEEDS_GATEWAYS(newServer.type)
      ? normalizeGateways(newServer.gateways, newServer.gateway || newServer.dns || newServer.ip)
      : [];
    if (NEEDS_GATEWAYS(newServer.type) && (!normalizedGws || normalizedGws.length === 0)) {
      setError('Для jumphost/exit добавьте хотя бы один gateway и отметьте основной.');
      return;
    }

    const serverToAdd = { 
      ...newServer, 
      provider: finalProvider,
      id: newServer.id || nextId,
      type: normalizeServerType(newServer.type),
      gateways: normalizedGws,
    };
    
    setServers([...servers, serverToAdd]);
    setNewServer({ 
      id: '',
      ip: '', 
      extIp: '',
      internalIp: '',
      dns: '', 
      country: '', 
      provider: '', 
      tunnel: 'GRE',
      type: 'jumphost',
      gateway: '',
      gateways: [makeGateway({ primary: true })],
    });
    setCustomProvider('');
    setAddServerModalOpen(false);
    setSuccess('Сервер успешно добавлен!');
    setTimeout(() => setSuccess(''), 3000);
  };

  const handleEdit = (server) => {
    setEditModalServer({ ...server });
    setEditModalOpen(true);
  };

  const handleEditModalChange = (updatedServer) => {
    setEditModalServer(updatedServer);
  };

  const handleEditModalSave = (updatedServer) => {
    const normalizedServer = { 
      ...updatedServer, 
      type: normalizeServerType(updatedServer.type),
      gateways: NEEDS_GATEWAYS(updatedServer.type) ? normalizeGateways(updatedServer.gateways, updatedServer.gateway || updatedServer.dns || updatedServer.ip) : [],
    };
    if (NEEDS_GATEWAYS(normalizedServer.type) && normalizedServer.gateways.length === 0) {
      setError('Для jumphost/exit необходим хотя бы один gateway с признаком основного.');
      return;
    }
    setServers(servers.map(s => {
      const sameId = s.id && updatedServer.id ? s.id === updatedServer.id : false;
      const sameIp = s.ip === updatedServer.ip;
      return (sameId || sameIp) ? { ...s, ...normalizedServer } : s;
    }));
    setEditModalOpen(false);
    setEditModalServer(null);
  };

  const handleEditModalClose = () => {
    setEditModalOpen(false);
    setEditModalServer(null);
  };

  // Функции для генератора ссылок
  const handleGenerateLink = (server) => {
    setLinkGeneratorServer(server);
    setLinkGeneratorOpen(true);
  };

  const handleLinkGeneratorClose = () => {
    setLinkGeneratorOpen(false);
    setLinkGeneratorServer(null);
  };

  const generateServerUrl = (server) => {
    const params = new URLSearchParams();
    
    // Добавляем все параметры из настроек
    Object.entries(urlSettings).forEach(([key, value]) => {
      if (key !== 'baseUrl' && value) {
        params.append(key, value);
      }
    });
    
    // Добавляем IP сервера как параметр server
    params.append('server', server.ip);
    
    return `${urlSettings.baseUrl}?${params.toString()}`;
  };

  const applyPreset = (name) => {
    const p = presets[name];
    if (!p) return;
    setUrlSettings(prev => ({ ...prev, ...p }));
    localStorage.setItem('urlSettings', JSON.stringify({ ...urlSettings, ...p }));
    setSuccess('Профиль применён');
    setTimeout(() => setSuccess(''), 2000);
  };

  // Функция резервного копирования для http
  const fallbackCopyToClipboard = (text) => {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      document.execCommand('copy');
      setSuccess('Ссылка скопирована в буфер обмена!');
      setTimeout(() => setSuccess(''), 3000);
    } catch (err) {
      setError('Не удалось скопировать ссылку');
    }
    document.body.removeChild(textArea);
  };

  const copyToClipboard = async (text) => {
    if (navigator.clipboard) {
      try {
        await navigator.clipboard.writeText(text);
        setSuccess('Ссылка скопирована в буфер обмена!');
        setTimeout(() => setSuccess(''), 3000);
        return;
      } catch (err) {
        // fallback ниже
      }
    }
    fallbackCopyToClipboard(text);
  };

  const quickCopyLink = async (server) => {
    const url = generateServerUrl(server);
    await copyToClipboard(url);
  };

  const exportAllLinks = () => {
    const filtered = servers
      .filter(s => (!filterTunnel || s.tunnel === filterTunnel))
      .filter(s => (!filterCountry || s.country === filterCountry))
      .filter(s => (!filterProvider || s.provider === filterProvider))
      .filter(s => (!filterType || s.type === filterType));
    const csvContent = [
      ['ID', 'IP', 'Ext IP', 'Internal IP', 'DNS', 'Country', 'Provider', 'Type', 'Tunnel', 'Generated URL'],
      ...filtered.map(server => [
        server.id || '',
        server.ip,
        server.extIp || '',
        server.internalIp || '',
        server.dns,
        server.country,
        server.provider,
        server.type,
        server.tunnel,
        generateServerUrl(server)
      ])
    ].map(row => row.map(cell => `"${cell}"`).join(',')).join('\n');

    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', `server_links_${new Date().toISOString().split('T')[0]}.csv`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const handleCancelEdit = () => {
    setEditingServer(null);
  };

  const handleDeleteServer = (serverIp) => {
    setServers(servers.filter(s => s.ip !== serverIp));
  };

  const confirmDelete = (server) => {
    setServerToDelete(server);
    setShowDeleteModal(true);
  };

  const executeDelete = () => {
    if (serverToDelete) {
      handleDeleteServer(serverToDelete.ip);
      setShowDeleteModal(false);
      setServerToDelete(null);
    }
  };

  const handleSaveChanges = async () => {
    setLoading(true);
    try {
      const normalizedServers = servers.map((s) => ({ ...s, type: normalizeServerType(s.type) }));
      setServers(normalizedServers);
      await api.post(`/servers`, { domains: normalizedServers });
      await api.post(`/server-connections`, { domains: connections });
      setSuccess('Изменения по серверам и связям успешно сохранены!');
      setTimeout(() => setSuccess(''), 3000);
    } catch (error) {
      console.error('Error saving changes:', error);
      setError('Не удалось сохранить изменения по серверам или связям.');
    } finally {
      setLoading(false);
    }
  };

  const handleBulkUpdate = () => {
    if (!bulkFrom || !bulkTo) {
      setError('Оба поля для массового обновления должны быть заполнены.');
      return;
    }
    setConfirmState({
      open: true,
      text: `Вы уверены, что хотите заменить все туннели "${bulkFrom}" на "${bulkTo}"? Это действие необратимо.`,
      onConfirm: () => {
        const updatedServers = servers.map(s => s.tunnel === bulkFrom ? { ...s, tunnel: bulkTo } : s);
        setServers(updatedServers);
        setSuccess(`Туннели "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`);
        setConfirmState({ open: false, text: '', onConfirm: null });
      },
    });
  };

  // Сортировка
  const sortedServers = [...servers].sort((a, b) => {
    let valA = a[sortField] || '';
    let valB = b[sortField] || '';
    if (typeof valA === 'string') valA = valA.toLowerCase();
    if (typeof valB === 'string') valB = valB.toLowerCase();
    if (valA < valB) return sortOrder === 'asc' ? -1 : 1;
    if (valA > valB) return sortOrder === 'asc' ? 1 : -1;
    return 0;
  });

  // Фильтрация
  let filteredServers = sortedServers;
  
  if (filterTunnel) {
    filteredServers = filteredServers.filter(s => s.tunnel === filterTunnel);
  }
  
  if (filterCountry) {
    filteredServers = filteredServers.filter(s => s.country === filterCountry);
  }
  
  if (filterProvider) {
    filteredServers = filteredServers.filter(s => s.provider === filterProvider);
  }

  if (filterType) {
    filteredServers = filteredServers.filter(s => s.type === filterType);
  }

  // Поиск
  filteredServers = filteredServers.filter(s =>
    s.ip.toLowerCase().includes(searchTerm.toLowerCase()) ||
    s.dns.toLowerCase().includes(searchTerm.toLowerCase()) ||
    s.country.toLowerCase().includes(searchTerm.toLowerCase()) ||
    s.provider.toLowerCase().includes(searchTerm.toLowerCase()) ||
    (s.type || '').toLowerCase().includes(searchTerm.toLowerCase())
  );

  // Пагинация
  const totalPages = Math.ceil(filteredServers.length / pageSize);
  const paginatedServers = filteredServers.slice((currentPage - 1) * pageSize, currentPage * pageSize);

  // Для фильтров - списки всех уникальных значений
  const allTunnels = Array.from(new Set(servers.map(s => s.tunnel)));
  const allCountries = Array.from(new Set(servers.map(s => s.country)));
  const allProviders = Array.from(new Set(servers.map(s => s.provider)));
  const allTypes = Array.from(new Set(servers.map(s => s.type).filter(Boolean)));

  // Сортировка по клику
  const handleSort = (field) => {
    if (sortField === field) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortOrder('asc');
    }
  };

  // Улучшенный инлайн-редакт
  useEffect(() => {
    if (editingServer && editInputRef.current) {
      editInputRef.current.focus();
    }
  }, [editingServer]);

  const handleEditKeyDown = (e, serverIp) => {
    if (e.key === 'Enter') handleSaveEdit(serverIp);
    if (e.key === 'Escape') handleCancelEdit();
  };

  // Функция для преобразования кода страны в emoji-флаг
  function countryToFlag(isoCode) {
    if (!isoCode) return '';
    return isoCode
      .toUpperCase()
      .replace(/./g, char =>
        String.fromCodePoint(127397 + char.charCodeAt())
      );
  }

  // Валидация и добавление связи (общая функция для формы и модального окна графа)
  const addConnectionInternal = (draft) => {
    if (!draft.from || !draft.to || !draft.tunnelType || !draft.ipA || !draft.ipB) {
      setError('Все поля для связи должны быть заполнены.');
      return false;
    }
    if (draft.from === draft.to) {
      setError('Сервер A и сервер B не могут быть одинаковыми.');
      return false;
    }
    const next = { ...draft };
    setConnections((prev) => [...prev, next]);
    setSuccess('Связь успешно добавлена!');
    setTimeout(() => setSuccess(''), 3000);
    return true;
  };

  // Добавление новой связи из нижней формы
  const handleAddConnection = () => {
    const ok = addConnectionInternal(newConnection);
    if (!ok) return;
    setNewConnection({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
    setError('');
  };

  // Подтверждение связи, созданной через граф (модальное окно)
  const handleConfirmGraphConnection = () => {
    const ok = addConnectionInternal(newConnection);
    if (!ok) return;
    setGraphConnectionModalOpen(false);
    setNewConnection({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
    setError('');
  };

  // Удаление связи
  const handleDeleteConnection = (index) => {
    setConnections(connections.filter((_, i) => i !== index));
    setSuccess('Связь удалена!');
    setTimeout(() => setSuccess(''), 3000);
  };

  return (
    <>
      {error && (
        <div className="alert alert-danger alert-dismissible" role="alert">
          <div className="d-flex">
            <div>
              <IconX className="icon alert-icon" />
            </div>
            <div>
              {error}
            </div>
          </div>
          <button type="button" className="btn-close" onClick={() => setError('')}></button>
        </div>
      )}
      
      {success && (
        <div className="alert alert-success alert-dismissible" role="alert">
          <div className="d-flex">
            <div>
              <IconCheck className="icon alert-icon" />
            </div>
            <div>
              {success}
            </div>
          </div>
          <button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
        </div>
      )}

      {/* Page header */}
      <div className="page-header d-print-none mb-3">
        <div className="row align-items-center">
          <div className="col">
            <h2 className="page-title">Серверы</h2>
            <div className="page-pretitle">Главная / Управление / Серверы</div>
          </div>
          <div className="col-auto ms-auto d-print-none">
            <div className="btn-list">
              <div className="dropdown">
                <button className="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                  Профили ссылок
                </button>
                <div className="dropdown-menu">
                  {Object.keys(presets).map(key => (
                    <button key={key} className="dropdown-item" type="button" onClick={() => applyPreset(key)}>{key}</button>
                  ))}
                </div>
              </div>
              <button type="button" className="btn btn-outline-primary d-flex align-items-center" onClick={exportAllLinks} disabled={servers.length === 0}>
                <IconDownload className="me-1" /> Экспорт
              </button>
              <button type="button" className="btn btn-outline-primary d-flex align-items-center" onClick={handleSaveChanges} disabled={loading}>
                <IconDatabase className={loading ? 'spin me-1' : 'me-1'} /> Сохранить
              </button>
              <button type="button" className="btn btn-primary d-flex align-items-center" onClick={handleOpenAddServerModal}>
                <IconPlus className="me-1" /> Добавить
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Таблица серверов на всю ширину */}
      <div className="card w-100">
        <div className="card-header d-flex justify-content-between align-items-center">
          <h3 className="card-title mb-0">Список серверов <span className="badge bg-blue-lt text-blue ms-2">{filteredServers.length}</span></h3>
          <div className="d-flex gap-2 w-75">
            {/* Фильтры и поиск */}
            <select className="form-select w-auto" value={filterTunnel} onChange={e => { setFilterTunnel(e.target.value); setCurrentPage(1); }}>
              <option value="">Все туннели</option>
              {allTunnels.map(tunnel => (
                <option key={tunnel} value={tunnel}>{tunnel}</option>
              ))}
            </select>
            <select className="form-select w-auto" value={filterCountry} onChange={e => { setFilterCountry(e.target.value); setCurrentPage(1); }}>
              <option value="">Все страны</option>
              {allCountries.map(country => (
                <option key={country} value={country}>{country}</option>
              ))}
            </select>
            <select className="form-select w-auto" value={filterProvider} onChange={e => { setFilterProvider(e.target.value); setCurrentPage(1); }}>
              <option value="">Все провайдеры</option>
              {allProviders.map(provider => (
                <option key={provider} value={provider}>{provider}</option>
              ))}
            </select>
            <select className="form-select w-auto" value={filterType} onChange={e => { setFilterType(e.target.value); setCurrentPage(1); }}>
              <option value="">Все типы</option>
              {allTypes.map(type => (
                <option key={type} value={type}>{type === 'exit' ? 'Выходная нода' : 'Jumphost'}</option>
              ))}
            </select>
            <div className="input-icon flex-grow-1">
              <span className="input-icon-addon">
                <IconSearch size={18} />
              </span>
              <input
                type="text"
                className="form-control"
                placeholder="Поиск серверов..."
                value={searchTerm}
                onChange={e => { setSearchTerm(e.target.value); setCurrentPage(1); }}
              />
            </div>
            <button
              className="btn btn-outline-secondary"
              type="button"
              onClick={() => { setFilterTunnel(''); setFilterCountry(''); setFilterProvider(''); setFilterType(''); setSearchTerm(''); setCurrentPage(1); }}
              title="Сбросить фильтры"
            >
              Сбросить
            </button>
          </div>
        </div>
        <div className="table-responsive">
          <table className="table card-table table-vcenter table-nowrap mb-0">
            <thead>
              <tr>
                <th className="cursor-pointer" onClick={() => handleSort('ip')}>
                  IP адрес
                  {sortField === 'ip' && (
                    <span className="ms-1">
                      {sortOrder === 'asc' ? '▲' : '▼'}
                    </span>
                  )}
                </th>
                <th className="cursor-pointer" onClick={() => handleSort('type')}>
                  Тип
                  {sortField === 'type' && (
                    <span className="ms-1">
                      {sortOrder === 'asc' ? '▲' : '▼'}
                    </span>
                  )}
                </th>
                <th>
                  Внешний IP
                </th>
                <th>
                  Внутренний IP
                </th>
                <th className="cursor-pointer" onClick={() => handleSort('dns')}>
                  DNS имя
                  {sortField === 'dns' && (
                    <span className="ms-1">
                      {sortOrder === 'asc' ? '▲' : '▼'}
                    </span>
                  )}
                </th>
                <th className="cursor-pointer" onClick={() => handleSort('country')}>
                  Страна
                  {sortField === 'country' && (
                    <span className="ms-1">
                      {sortOrder === 'asc' ? '▲' : '▼'}
                    </span>
                  )}
                </th>
                <th className="cursor-pointer" onClick={() => handleSort('provider')}>
                  Провайдер
                  {sortField === 'provider' && (
                    <span className="ms-1">
                      {sortOrder === 'asc' ? '▲' : '▼'}
                    </span>
                  )}
                </th>
                <th className="cursor-pointer" onClick={() => handleSort('tunnel')}>
                  Туннель
                  {sortField === 'tunnel' && (
                    <span className="ms-1">
                      {sortOrder === 'asc' ? '▲' : '▼'}
                    </span>
                  )}
                </th>
                <th className="cursor-pointer" onClick={() => handleSort('gateway')}>
                  Основной шлюз
                  {sortField === 'gateway' && (
                    <span className="ms-1">
                      {sortOrder === 'asc' ? '▲' : '▼'}
                    </span>
                  )}
                </th>
                <th className="text-center">Статус</th>
                <th className="text-end w-1" style={{ minWidth: 140 }}></th>
              </tr>
            </thead>
            <tbody>
              {paginatedServers.length === 0 ? (
                <tr>
                  <td colSpan={11} className="text-center text-muted py-4">Ничего не найдено. Измените фильтры или поиск.</td>
                </tr>
              ) : paginatedServers.map((server) => (
                <tr key={server.id || server.ip} className={editingServer === server.ip ? 'table-info' : ''}>
                  <td>{server.ip}</td>
                  <td>
                    <span className={`badge ${server.type === 'exit' ? 'bg-red-lt text-danger' : 'bg-blue-lt text-blue'}`}>
                      {server.type === 'exit' ? 'Выходная нода' : 'Jumphost'}
                    </span>
                  </td>
                  <td>{server.extIp || <span className="text-muted">—</span>}</td>
                  <td>{server.internalIp || <span className="text-muted">—</span>}</td>
                  <td>{server.dns}</td>
                  <td><span className="badge bg-blue-lt text-blue">{countryToFlag(server.country)} {server.country}</span></td>
                  <td>{server.provider}</td>
                  <td><span className="badge bg-green-lt text-green">{server.tunnel}</span></td>
                  <td className="text-center">
                    <span className="badge bg-blue-lt text-blue">
                      {server.gateway}
                    </span>
                  </td>
                  <td className="text-center">
                    <span className="badge bg-success-lt text-success">Онлайн</span>
                  </td>
                  <td className="text-end w-1" style={{ minWidth: 140 }}>
                    <div className="btn-list gap-1 mb-0">
                      <button className="btn btn-outline-primary btn-icon btn-sm" title="Ссылка" onClick={() => handleGenerateLink(server)} onContextMenu={(e) => { e.preventDefault(); quickCopyLink(server); }}>
                        <IconLink size={16} />
                      </button>
                      <button className="btn btn-outline-secondary btn-icon btn-sm" title="Редактировать" onClick={() => handleEdit(server)}>
                        <IconEdit size={16} />
                      </button>
                      <button className="btn btn-outline-danger btn-icon btn-sm" title="Удалить" onClick={() => confirmDelete(server)}>
                        <IconTrash size={16} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {/* Пагинация */}
        {totalPages > 1 && (
          <div className="card-footer d-flex align-items-center justify-content-between">
            <div className="text-muted">
              Показано {(currentPage - 1) * pageSize + 1} - {Math.min(currentPage * pageSize, filteredServers.length)} из {filteredServers.length}
            </div>
            <ul className="pagination m-0">
              <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
                <button className="page-link" onClick={() => setCurrentPage(1)} disabled={currentPage === 1}>Первая</button>
              </li>
              <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
                <button className="page-link" onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1}>Назад</button>
              </li>
              {(() => {
                const pages = [];
                let start = Math.max(1, currentPage - 2);
                let end = Math.min(totalPages, currentPage + 2);
                if (currentPage <= 3) end = Math.min(totalPages, 5);
                if (currentPage >= totalPages - 2) start = Math.max(1, totalPages - 4);
                if (start > 1) pages.push('start-ellipsis');
                for (let p = start; p <= end; p++) pages.push(p);
                if (end < totalPages) pages.push('end-ellipsis');
                return pages.map((p) => (
                  p === 'start-ellipsis' || p === 'end-ellipsis' ? (
                    <li key={p} className="page-item disabled"><span className="page-link">…</span></li>
                  ) : (
                    <li key={p} className={`page-item${currentPage === p ? ' active' : ''}`}>
                      <button className="page-link" onClick={() => setCurrentPage(p)}>{p}</button>
                    </li>
                  )
                ));
              })()}
              <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
                <button className="page-link" onClick={() => setCurrentPage(currentPage + 1)} disabled={currentPage === totalPages}>Вперед</button>
              </li>
              <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
                <button className="page-link" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages}>Последняя</button>
              </li>
            </ul>
          </div>
        )}
      </div>

      {/* Delete Modal - New unified component */}
      <ConfirmModal
        show={showDeleteModal}
        onClose={() => setShowDeleteModal(false)}
        onConfirm={executeDelete}
        title="Подтверждение удаления"
        message={
          serverToDelete ? (
            <>
              <p>Вы уверены, что хотите удалить сервер <strong>{serverToDelete.ip}</strong>?</p>
              <p className="text-muted mb-0">Это действие нельзя отменить.</p>
            </>
          ) : null
        }
        confirmLabel="Удалить"
        variant="danger"
        icon={IconTrash}
      />

      {/* Edit Server Modal */}
      <EditServerModal
        show={editModalOpen}
        server={editModalServer}
        onChange={handleEditModalChange}
        onSave={handleEditModalSave}
        onClose={handleEditModalClose}
      />

      {/* Link Generator Modal */}
      <LinkGeneratorModal
        show={linkGeneratorOpen}
        server={linkGeneratorServer}
        urlSettings={urlSettings}
        onUrlSettingsChange={setUrlSettings}
        onGenerateUrl={generateServerUrl}
        onCopyToClipboard={copyToClipboard}
        onClose={handleLinkGeneratorClose}
      />

      {/* Add Server Modal - New unified component */}
      <FormModal
        show={addServerModalOpen}
        onClose={handleCloseAddServerModal}
        onSubmit={handleAddServerFromModal}
        title="Добавить новый сервер"
        submitLabel="Добавить сервер"
        submitIcon={IconPlus}
        size="md"
      >
        {error && (
          <div className="alert alert-danger mb-3" role="alert">
            {error}
          </div>
        )}
        
        <FormField
          label="IP адрес"
          name="ip"
          value={newServer.ip}
          onChange={(val) => setNewServer({ ...newServer, ip: val })}
          placeholder="192.168.1.1"
          required
          icon={IconServer}
          helpText="Введите IPv4 адрес сервера"
        />

        <FormField
          label="Внешний IP (опционально)"
          name="extIp"
          value={newServer.extIp}
          onChange={(val) => setNewServer({ ...newServer, extIp: val })}
          placeholder="Публичный IP, если отличается"
          icon={IconServer}
        />

        <FormField
          label="Внутренний IP (опционально)"
          name="internalIp"
          value={newServer.internalIp}
          onChange={(val) => setNewServer({ ...newServer, internalIp: val })}
          placeholder="10.x.x.x / 192.168.x.x"
          icon={IconServer}
        />

        <FormField
          label="DNS имя"
          name="dns"
          value={newServer.dns}
          onChange={(val) => setNewServer({ ...newServer, dns: val })}
          placeholder="srv1.shx.su"
          required
          icon={IconWorld}
          helpText="Полное доменное имя сервера"
        />

        <FormField
          label="Страна"
          name="country"
          type="select"
          value={newServer.country}
          onChange={(val) => setNewServer({ ...newServer, country: val })}
          required
          icon={IconMapPin}
          options={[
            { value: '', label: 'Выберите страну', disabled: true },
            { value: 'RU', label: 'Россия (RU)' },
            { value: 'SWE', label: 'Швеция (SWE)' },
            { value: 'US', label: 'США (US)' },
            { value: 'DE', label: 'Германия (DE)' },
            { value: 'NL', label: 'Нидерланды (NL)' },
            { value: 'SG', label: 'Сингапур (SG)' }
          ]}
        />

        <FormField
          label="Провайдер"
          name="provider"
          type="select"
          value={newServer.provider}
          onChange={(val) => setNewServer({ ...newServer, provider: val })}
          required
          options={[
            { value: '', label: 'Выберите провайдера', disabled: true },
            { value: 'Yandex', label: 'Yandex Cloud' },
            { value: 'AWS', label: 'Amazon Web Services' },
            { value: 'Google', label: 'Google Cloud' },
            { value: 'Azure', label: 'Microsoft Azure' },
            { value: 'Hetzner', label: 'Hetzner' },
            { value: 'OVH', label: 'OVH' },
            { value: 'DigitalOcean', label: 'DigitalOcean' },
            { value: 'Vultr', label: 'Vultr' },
            { value: 'Linode', label: 'Linode' },
            { value: 'VPSVILLE', label: 'VPSVILLE' },
            { value: 'HIPHOST', label: 'HIPHOST' },
            { value: 'Другой', label: 'Другой' }
          ]}
        />

        {newServer.provider === 'Другой' && (
          <FormField
            label="Название провайдера"
            name="customProvider"
            value={customProvider}
            onChange={setCustomProvider}
            placeholder="Введите название провайдера"
            required
            helpText="Укажите название вашего провайдера"
          />
        )}

        <FormField
          label="Тип сервера"
          name="type"
          type="select"
          value={newServer.type}
          onChange={(val) => setNewServer({ ...newServer, type: val })}
          required
          options={[
            { value: '', label: 'Выберите тип', disabled: true },
            ...SERVER_TYPE_OPTIONS.map(opt => ({ value: opt.value, label: opt.label }))
          ]}
          helpText="Выберите роль: jumphost или выходная нода"
        />

        <FormField
          label="Тип туннеля"
          name="tunnel"
          type="select"
          value={newServer.tunnel}
          onChange={(val) => setNewServer({ ...newServer, tunnel: val })}
          required
          options={[
            { value: 'GRE', label: 'GRE (Generic Routing Encapsulation)' },
            { value: 'IPSec', label: 'IPSec' },
            { value: 'WireGuard', label: 'WireGuard' },
            { value: 'OpenVPN', label: 'OpenVPN' }
          ]}
        />

        <FormField
          label="Основной шлюз"
          name="gateway"
          value={newServer.gateway}
          onChange={(val) => setNewServer({ ...newServer, gateway: val })}
          placeholder="Cloudflare, Hetzner, Мой шлюз и т.д."
          required
          helpText="Имя основного шлюза для маршрутизации"
        />
        {NEEDS_GATEWAYS(newServer.type) && (
          <>
            <div className="form-label">Шлюзы</div>
            <div className="list-group list-group-flush border rounded mb-2">
              {(newServer.gateways || []).map((gw, idx) => (
                <div key={gw.id || idx} className="list-group-item">
                  <div className="row g-2 align-items-end">
                    <div className="col-12 col-md-4">
                      <label className="form-label small mb-1">Имя *</label>
                      <input
                        type="text"
                        className="form-control"
                        value={gw.name}
                        onChange={(e) => {
                          const list = newServer.gateways.map((g, i) => i === idx ? { ...g, name: e.target.value } : g);
                          setNewServer({ ...newServer, gateways: list });
                        }}
                        placeholder="GW-MSK"
                        required
                      />
                    </div>
                    <div className="col-12 col-md-4">
                      <label className="form-label small mb-1">IP</label>
                      <input
                        type="text"
                        className="form-control"
                        value={gw.ip || ''}
                        onChange={(e) => {
                          const list = newServer.gateways.map((g, i) => i === idx ? { ...g, ip: e.target.value } : g);
                          setNewServer({ ...newServer, gateways: list });
                        }}
                        placeholder="10.0.0.1"
                      />
                    </div>
                    <div className="col-12 col-md-3">
                      <label className="form-label small mb-1">Комментарий</label>
                      <input
                        type="text"
                        className="form-control"
                        value={gw.comment || ''}
                        onChange={(e) => {
                          const list = newServer.gateways.map((g, i) => i === idx ? { ...g, comment: e.target.value } : g);
                          setNewServer({ ...newServer, gateways: list });
                        }}
                        placeholder="Основной шлюз"
                      />
                    </div>
                    <div className="col-12 col-md-1 d-flex align-items-center justify-content-center">
                      <div className="form-check form-switch m-0">
                        <input
                          className="form-check-input"
                          type="checkbox"
                          checked={gw.primary}
                          onChange={(e) => {
                            const list = newServer.gateways.map((g, i) => ({ ...g, primary: i === idx ? e.target.checked : false }));
                            if (!list.some(g => g.primary)) list[idx].primary = true;
                            setNewServer({ ...newServer, gateways: list });
                          }}
                          title="Основной шлюз"
                        />
                      </div>
                    </div>
                  </div>
                  <div className="d-flex justify-content-between align-items-center mt-2">
                    <div className="text-muted small">{gw.primary ? 'Основной шлюз' : 'Резервный шлюз'}</div>
                    {newServer.gateways.length > 1 && (
                      <button
                        type="button"
                        className="btn btn-link text-danger px-0"
                        onClick={() => {
                          if (newServer.gateways.length === 1) return;
                          const list = newServer.gateways.filter((_, i) => i !== idx);
                          if (!list.some(g => g.primary) && list.length > 0) list[0].primary = true;
                          setNewServer({ ...newServer, gateways: list });
                        }}
                      >
                        Удалить
                      </button>
                    )}
                  </div>
                </div>
              ))}
            </div>
            <button
              type="button"
              className="btn btn-outline-primary btn-sm"
              onClick={() => {
                setNewServer((prev) => {
                  const list = Array.isArray(prev.gateways) ? prev.gateways : [];
                  return { ...prev, gateways: [...list, makeGateway({ primary: list.length === 0 })] };
                });
              }}
            >
              <IconPlus className="icon" />
              Добавить шлюз
            </button>
            <div className="form-text">Для jumphost/exit должен быть один основной gateway.</div>
          </>
        )}
      </FormModal>

      <div className="card w-100 mb-4">
        <div className="card-header d-flex justify-content-between align-items-center">
          <h3 className="card-title mb-0">Граф связей между серверами</h3>
          <div className="text-muted small">Поддержка: GRE, IPSec, WireGuard, OpenVPN</div>
        </div>
        <div className="card-body">
          <div className="mb-3 d-flex flex-wrap gap-2 align-items-center">
            <span className="text-muted small d-flex align-items-center"><IconFilter size={16} className="me-1" />Фильтры графа:</span>
            <div className="btn-group btn-group-sm" role="group" aria-label="Туннели">
              {['GRE','IPSec','WireGuard','OpenVPN'].map(t => (
                <button key={t} className={`btn ${graphTunnelFilters[t] ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setGraphTunnelFilters(prev => ({...prev, [t]: !prev[t]}))}>{t}</button>
              ))}
            </div>
            <div className="d-flex align-items-center ms-2">
              <IconMapPin size={16} className="me-1 text-muted" />
              <select className="form-select form-select-sm" value={graphCountryFilter} onChange={e => setGraphCountryFilter(e.target.value)}>
                <option value="">Все страны</option>
                {Array.from(new Set(servers.map(s => s.country).filter(Boolean))).map(c => (<option key={c} value={c}>{c}</option>))}
              </select>
            </div>
            <div className="d-flex align-items-center">
              <IconServer size={16} className="me-1 text-muted" />
              <select className="form-select form-select-sm" value={graphProviderFilter} onChange={e => setGraphProviderFilter(e.target.value)}>
                <option value="">Все провайдеры</option>
                {Array.from(new Set(servers.map(s => s.provider).filter(Boolean))).map(p => (<option key={p} value={p}>{p}</option>))}
              </select>
            </div>
          </div>
          <GraphView 
            servers={servers.filter(s => (!graphCountryFilter || s.country === graphCountryFilter) && (!graphProviderFilter || s.provider === graphProviderFilter))} 
            connections={connections.filter(c => graphTunnelFilters[c.tunnelType])}
            onCreateConnection={({ from, to }) => {
              // Открываем современный флоу создания связи прямо поверх графа
              setNewConnection(prev => ({
                ...prev,
                from,
                to,
                // Если серверы уже имеют тип туннеля, предлагаем его по умолчанию
                tunnelType:
                  prev.tunnelType ||
                  servers.find(s => s.ip === from)?.tunnel ||
                  servers.find(s => s.ip === to)?.tunnel ||
                  'GRE',
              }));
              setGraphConnectionModalOpen(true);
            }} 
          />
          <div className="mt-3">
            <div className="d-flex align-items-center gap-3 flex-wrap">
              <div className="d-flex align-items-center gap-2"><span style={{display:'inline-block',width:24,height:4,background:'#206bc4'}}></span><span className="text-muted small">GRE</span></div>
              <div className="d-flex align-items-center gap-2"><span style={{display:'inline-block',width:24,height:4,background:'#f59f00',borderBottom:'2px dashed #f59f00'}}></span><span className="text-muted small">IPSec</span></div>
              <div className="d-flex align-items-center gap-2"><span style={{display:'inline-block',width:24,height:4,background:'#2fb344'}}></span><span className="text-muted small">WireGuard</span></div>
              <div className="d-flex align-items-center gap-2"><span style={{display:'inline-block',width:24,height:4,background:'#be4bdb',borderBottom:'2px dotted #be4bdb'}}></span><span className="text-muted small">OpenVPN</span></div>
            </div>
          </div>
        </div>
      </div>
      {/* Модальное окно для быстрого создания связи после соединения узлов на графе */}
      <FormModal
        show={graphConnectionModalOpen}
        onClose={() => {
          setGraphConnectionModalOpen(false);
          setNewConnection({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
          setError('');
        }}
        onSubmit={handleConfirmGraphConnection}
        title="Создать связь между серверами"
        submitLabel="Создать связь"
        submitIcon={IconPlus}
        size="md"
      >
        {error && (
          <div className="alert alert-danger mb-3" role="alert">
            {error}
          </div>
        )}
        <div className="mb-3">
          <div className="text-muted small mb-1">Вы выбрали связь между:</div>
          <div className="d-flex flex-wrap align-items-center gap-2">
            <span className="badge bg-blue-lt text-blue">
              {newConnection.from || 'Сервер A'}
            </span>
            <span className="text-muted">⇄</span>
            <span className="badge bg-blue-lt text-blue">
              {newConnection.to || 'Сервер B'}
            </span>
          </div>
        </div>
        <div className="row g-3">
          <div className="col-md-4">
            <FormField
              label="Тип туннеля"
              name="tunnelType"
              type="select"
              value={newConnection.tunnelType}
              onChange={(val) => setNewConnection({ ...newConnection, tunnelType: val })}
              required
              options={[
                { value: 'GRE', label: 'GRE' },
                { value: 'IPSec', label: 'IPSec' },
                { value: 'WireGuard', label: 'WireGuard' },
                { value: 'OpenVPN', label: 'OpenVPN' },
              ]}
            />
          </div>
          <div className="col-md-4">
            <FormField
              label="IP адрес сервера A"
              name="ipA"
              value={newConnection.ipA}
              onChange={(val) => setNewConnection({ ...newConnection, ipA: val })}
              placeholder="10.10.100.1"
              required
            />
          </div>
          <div className="col-md-4">
            <FormField
              label="IP адрес сервера B"
              name="ipB"
              value={newConnection.ipB}
              onChange={(val) => setNewConnection({ ...newConnection, ipB: val })}
              placeholder="10.10.100.2"
              required
            />
          </div>
        </div>
        <div className="mt-2 text-muted small">
          Протяните линию между серверами в графе — здесь вы только уточняете параметры туннеля. Это делает
          построение схемы максимально быстрым и наглядным.
        </div>
      </FormModal>
      <div id="add-connection-anchor" className="card w-100 mb-4">
        <div className="card-header">
          <h3 className="card-title mb-0">Добавить связь между серверами</h3>
        </div>
        <div className="card-body">
          <div className="row g-3">
            <div className="col-md-6">
              <label className="form-label">Сервер A (IP/DNS)</label>
              <select className="form-select" value={newConnection.from} onChange={e => setNewConnection({ ...newConnection, from: e.target.value })}>
                <option value="">Выберите сервер A</option>
                {servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)}
              </select>
            </div>
            <div className="col-md-6">
              <label className="form-label">Сервер B (IP/DNS)</label>
              <select className="form-select" value={newConnection.to} onChange={e => setNewConnection({ ...newConnection, to: e.target.value })}>
                <option value="">Выберите сервер B</option>
                {servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)}
              </select>
            </div>
            <div className="col-md-4">
              <label className="form-label">Тип туннеля</label>
              <select className="form-select" value={newConnection.tunnelType} onChange={e => setNewConnection({ ...newConnection, tunnelType: e.target.value })}>
                <option value="GRE">GRE</option>
                <option value="IPSec">IPSec</option>
                <option value="WireGuard">WireGuard</option>
                <option value="OpenVPN">OpenVPN</option>
              </select>
            </div>
            <div className="col-md-4">
              <label className="form-label">IP адрес сервера A</label>
              <input className="form-control" value={newConnection.ipA} onChange={e => setNewConnection({ ...newConnection, ipA: e.target.value })} placeholder="10.10.100.1" />
            </div>
            <div className="col-md-4">
              <label className="form-label">IP адрес сервера B</label>
              <input className="form-control" value={newConnection.ipB} onChange={e => setNewConnection({ ...newConnection, ipB: e.target.value })} placeholder="10.10.100.2" />
            </div>
            <div className="col-12">
              <button className="btn btn-primary d-flex align-items-center" type="button" onClick={handleAddConnection}>
                <span className="me-2 d-flex align-items-center"><IconPlus className="icon" /></span>
                <span className="fw-bold">Добавить связь</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Список существующих связей */}
      {connections.length > 0 && (
        <div className="card w-100 mb-4">
          <div className="card-header">
            <h3 className="card-title mb-0">Существующие связи ({connections.length})</h3>
          </div>
            <div className="card-body">
              <div className="table-responsive">
                <table className="table card-table table-vcenter table-nowrap mb-0">
                <thead>
                  <tr>
                    <th>Сервер A</th>
                    <th>Сервер B</th>
                    <th>Тип туннеля</th>
                    <th>IP адреса туннеля</th>
                    <th className="text-end">Действия</th>
                  </tr>
                </thead>
                <tbody>
                  {connections.map((connection, index) => {
                    const serverA = servers.find(s => s.ip === connection.from);
                    const serverB = servers.find(s => s.ip === connection.to);
                    return (
                      <tr key={index}>
                        <td>
                          <div>
                            <div className="fw-bold">{connection.from}</div>
                            <div className="text-muted">{serverA?.dns || 'Неизвестный сервер'}</div>
                          </div>
                        </td>
                        <td>
                          <div>
                            <div className="fw-bold">{connection.to}</div>
                            <div className="text-muted">{serverB?.dns || 'Неизвестный сервер'}</div>
                          </div>
                        </td>
                        <td>
                          <span className="badge bg-green-lt text-green">{connection.tunnelType}</span>
                        </td>
                        <td>
                          <code>{connection.ipA} ⇄ {connection.ipB}</code>
                        </td>
                        <td className="text-end">
                          <button 
                            className="btn btn-icon btn-sm btn-outline-danger rounded" 
                            title="Удалить связь"
                            onClick={() => handleDeleteConnection(index)}
                          >
                            <IconTrash size={18} />
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      <ConfirmDialog
        open={confirmState.open}
        title="Подтверждение"
        message={confirmState.text}
        onCancel={() => setConfirmState({ open: false, text: '', onConfirm: null })}
        onConfirm={() => confirmState.onConfirm?.()}
      />
    </>
  );
}

// Модальное окно для редактирования сервера с backdrop и анимацией
function EditServerModal({ show, server, onChange, onSave, onClose }) {
  const modalRef = useRef(null);
  const initializedRef = useRef(false);
  // Локальное состояние для формы
  const [localServer, setLocalServer] = useState({});

  // Функция для создания сервера с гарантированными gateways
  const ensureGateways = (srv) => {
    if (!srv) return { gateways: [] };
    const needs = NEEDS_GATEWAYS(srv.type);
    let gateways = [];
    if (needs) {
      gateways = normalizeGateways(srv.gateways, srv.gateway || srv.dns || srv.ip);
      if (gateways.length === 0) {
        gateways = [makeGateway({ primary: true })];
      }
    }
    return { ...srv, gateways };
  };

  // Синхронизируем локальное состояние с пропсами ТОЛЬКО при открытии модалки
  useEffect(() => {
    if (show && server && !initializedRef.current) {
      const prepared = ensureGateways(server);
      console.log('[EditServerModal] Инициализация с сервером:', prepared);
      setLocalServer(prepared);
      initializedRef.current = true;
    }
    // Сбрасываем флаг при закрытии
    if (!show) {
      initializedRef.current = false;
    }
  }, [show, server]);

  useEffect(() => {
    if (window.Tabler && window.Tabler.Modal && modalRef.current) {
      const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
      if (show) {
        modalInstance.show();
      } else {
        modalInstance.hide();
      }
      // Закрытие по событию Tabler
      const handler = () => onClose && onClose();
      modalRef.current.addEventListener('hide.bs.modal', handler);
      return () => {
        if (modalRef.current) {
          modalRef.current.removeEventListener('hide.bs.modal', handler);
        }
      };
    }
  }, [show, onClose]);

  // Универсальная функция обновления поля
  const handleFieldChange = (field, value) => {
    setLocalServer(prev => {
      const updated = { ...prev, [field]: value };
      onChange && onChange(updated);
      return updated;
    });
  };

  // Функция обновления шлюза по индексу
  const handleGatewayChange = (idx, field, value) => {
    setLocalServer(prev => {
      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
      const updatedGateways = currentGateways.map((gw, i) => 
        i === idx ? { ...gw, [field]: value } : gw
      );
      const updated = { ...prev, gateways: updatedGateways };
      onChange && onChange(updated);
      return updated;
    });
  };

  // Функция переключения primary шлюза
  const handlePrimaryChange = (idx, checked) => {
    setLocalServer(prev => {
      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
      const updatedGateways = currentGateways.map((gw, i) => ({
        ...gw,
        primary: i === idx ? checked : false
      }));
      // Убедимся, что хотя бы один primary
      if (!updatedGateways.some(g => g.primary) && updatedGateways.length > 0) {
        updatedGateways[idx].primary = true;
      }
      const updated = { ...prev, gateways: updatedGateways };
      onChange && onChange(updated);
      return updated;
    });
  };

  // Функция добавления нового шлюза
  const handleAddGateway = () => {
    console.log('[EditServerModal] handleAddGateway вызвана, текущий localServer:', localServer);
    setLocalServer(prev => {
      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
      const newGw = makeGateway({ primary: currentGateways.length === 0 });
      const updatedGateways = [...currentGateways, newGw];
      const updated = { ...prev, gateways: updatedGateways };
      console.log('[EditServerModal] Новый localServer после добавления шлюза:', updated);
      onChange && onChange(updated);
      return updated;
    });
  };

  // Функция удаления шлюза
  const handleRemoveGateway = (idx) => {
    setLocalServer(prev => {
      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
      if (currentGateways.length <= 1) return prev; // Не удаляем последний
      const updatedGateways = currentGateways.filter((_, i) => i !== idx);
      // Убедимся, что есть primary
      if (!updatedGateways.some(g => g.primary) && updatedGateways.length > 0) {
        updatedGateways[0].primary = true;
      }
      const updated = { ...prev, gateways: updatedGateways };
      onChange && onChange(updated);
      return updated;
    });
  };

  // Получаем текущие шлюзы для рендера
  const currentGateways = Array.isArray(localServer.gateways) ? localServer.gateways : [];
  const showGateways = NEEDS_GATEWAYS(localServer.type);

  return (
    <div className="modal" tabIndex="-1" ref={modalRef}>
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">Редактировать сервер</h5>
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div className="modal-body">
            <form onSubmit={e => { e.preventDefault(); onSave && onSave(localServer); }}>
              <div className="mb-3">
                <label className="form-label">ID (опционально)</label>
                <input type="text" className="form-control" value={localServer.id || ''} onChange={e => handleFieldChange('id', e.target.value)} placeholder="srv-1" />
              </div>
              <div className="mb-3">
                <label className="form-label">IP адрес</label>
                <input type="text" className="form-control" value={localServer.ip || ''} onChange={e => handleFieldChange('ip', e.target.value)} />
              </div>
              <div className="mb-3">
                <label className="form-label">Внешний IP (опционально)</label>
                <input type="text" className="form-control" value={localServer.extIp || ''} onChange={e => handleFieldChange('extIp', e.target.value)} placeholder="публичный IP, если отличается" />
              </div>
              <div className="mb-3">
                <label className="form-label">Внутренний IP (опционально)</label>
                <input type="text" className="form-control" value={localServer.internalIp || ''} onChange={e => handleFieldChange('internalIp', e.target.value)} placeholder="10.x.x.x / 192.168.x.x" />
              </div>
              <div className="mb-3">
                <label className="form-label">DNS имя</label>
                <input type="text" className="form-control" value={localServer.dns || ''} onChange={e => handleFieldChange('dns', e.target.value)} />
              </div>
              <div className="mb-3">
                <label className="form-label">Страна</label>
                <input type="text" className="form-control" value={localServer.country || ''} onChange={e => handleFieldChange('country', e.target.value)} />
              </div>
              <div className="mb-3">
                <label className="form-label">Провайдер</label>
                <input type="text" className="form-control" value={localServer.provider || ''} onChange={e => handleFieldChange('provider', e.target.value)} />
              </div>
              <div className="mb-3">
                <label className="form-label">Тип сервера</label>
                <select className="form-select" value={localServer.type || 'jumphost'} onChange={e => handleFieldChange('type', e.target.value)}>
                  {SERVER_TYPE_OPTIONS.map((opt) => (
                    <option key={opt.value} value={opt.value}>{opt.label}</option>
                  ))}
                </select>
              </div>
              <div className="mb-3">
                <label className="form-label">Тип туннеля</label>
                <input type="text" className="form-control" value={localServer.tunnel || ''} onChange={e => handleFieldChange('tunnel', e.target.value)} />
              </div>
              {showGateways && (
                <>
                  <div className="form-label">Шлюзы ({currentGateways.length})</div>
                  <div className="list-group list-group-flush border rounded mb-2">
                    {currentGateways.map((gw, idx) => (
                      <div key={gw.id || `gw-${idx}`} className="list-group-item">
                        <div className="row g-2 align-items-end">
                          <div className="col-12 col-md-4">
                            <label className="form-label small mb-1">Имя *</label>
                            <input
                              type="text"
                              className="form-control"
                              value={gw.name || ''}
                              onChange={(e) => handleGatewayChange(idx, 'name', e.target.value)}
                              placeholder="GW-MSK"
                              required
                            />
                          </div>
                          <div className="col-12 col-md-4">
                            <label className="form-label small mb-1">IP</label>
                            <input
                              type="text"
                              className="form-control"
                              value={gw.ip || ''}
                              onChange={(e) => handleGatewayChange(idx, 'ip', e.target.value)}
                              placeholder="10.0.0.1"
                            />
                          </div>
                          <div className="col-12 col-md-3">
                            <label className="form-label small mb-1">Комментарий</label>
                            <input
                              type="text"
                              className="form-control"
                              value={gw.comment || ''}
                              onChange={(e) => handleGatewayChange(idx, 'comment', e.target.value)}
                              placeholder="Основной шлюз"
                            />
                          </div>
                          <div className="col-12 col-md-1 d-flex align-items-center justify-content-center">
                            <div className="form-check form-switch m-0">
                              <input
                                className="form-check-input"
                                type="checkbox"
                                checked={!!gw.primary}
                                onChange={(e) => handlePrimaryChange(idx, e.target.checked)}
                                title="Основной шлюз"
                              />
                            </div>
                          </div>
                        </div>
                        <div className="d-flex justify-content-between align-items-center mt-2">
                          <div className="text-muted small">{gw.primary ? 'Основной шлюз' : 'Резервный шлюз'}</div>
                          {currentGateways.length > 1 && (
                            <button
                              type="button"
                              className="btn btn-link text-danger px-0"
                              onClick={() => handleRemoveGateway(idx)}
                            >
                              Удалить
                            </button>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                  <button
                    type="button"
                    className="btn btn-outline-primary btn-sm"
                    onClick={handleAddGateway}
                  >
                    <IconPlus className="icon" />
                    Добавить шлюз
                  </button>
                  <div className="form-text">Для jumphost/exit должен быть один основной gateway.</div>
                </>
              )}
            </form>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
              <span className="fw-bold">Отмена</span>
            </button>
            <button type="button" className="btn btn-primary d-flex align-items-center" onClick={() => onSave && onSave(localServer)}>
              <span className="fw-bold">Сохранить</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function DeleteServerModal({ show, server, onDelete, onClose }) {
  const modalRef = useRef(null);

  useEffect(() => {
    if (window.Tabler && window.Tabler.Modal && modalRef.current) {
      const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
      if (show) {
        modalInstance.show();
      } else {
        modalInstance.hide();
      }
      const handler = () => onClose && onClose();
      modalRef.current.addEventListener('hide.bs.modal', handler);
      return () => {
        if (modalRef.current) {
          modalRef.current.removeEventListener('hide.bs.modal', handler);
        }
      };
    }
  }, [show, onClose]);

  return (
    <div className="modal" tabIndex="-1" ref={modalRef}>
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-status bg-danger"></div>
          <div className="modal-header">
            <IconAlertTriangle className="icon text-danger me-2" size={28} />
            <h5 className="modal-title">Подтверждение удаления</h5>
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div className="modal-body">
            <p>Вы уверены, что хотите удалить сервер <strong>{server?.ip}</strong>?</p>
            <p className="text-muted">Это действие нельзя отменить.</p>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
              <span className="fw-bold">Отмена</span>
            </button>
            <button type="button" className="btn btn-danger d-flex align-items-center" onClick={onDelete}>
              <span className="fw-bold">Удалить</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Модальное окно для генератора ссылок
function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, onGenerateUrl, onCopyToClipboard, onClose }) {
  const modalRef = useRef(null);
  const [localUrlSettings, setLocalUrlSettings] = useState(urlSettings);

  // Синхронизируем локальное состояние с пропсами
  useEffect(() => {
    setLocalUrlSettings(urlSettings);
  }, [urlSettings]);

  useEffect(() => {
    if (window.Tabler && window.Tabler.Modal && modalRef.current) {
      const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
      if (show) {
        modalInstance.show();
      } else {
        modalInstance.hide();
      }
      const handler = () => onClose && onClose();
      modalRef.current.addEventListener('hide.bs.modal', handler);
      return () => {
        if (modalRef.current) {
          modalRef.current.removeEventListener('hide.bs.modal', handler);
        }
      };
    }
  }, [show, onClose]);

  const handleSettingChange = (key, value) => {
    const updated = { ...localUrlSettings, [key]: value };
    setLocalUrlSettings(updated);
    onUrlSettingsChange(updated);
  };

  const handleSaveSettings = () => {
    onUrlSettingsChange(localUrlSettings);
    // Сохраняем в localStorage
    localStorage.setItem('urlSettings', JSON.stringify(localUrlSettings));
  };

  const generatedUrl = server ? onGenerateUrl(server) : '';

  return (
    <div className="modal modal-lg" tabIndex="-1" ref={modalRef}>
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">
              <IconLink className="icon me-2" />
              Генератор ссылок для {server?.ip}
            </h5>
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div className="modal-body">
            <div className="row">
              <div className="col-md-6">
                <h6 className="mb-3">Настройки URL</h6>
                <div className="mb-3">
                  <label className="form-label">Базовый URL</label>
                  <input
                    type="text"
                    className="form-control"
                    value={localUrlSettings.baseUrl}
                    onChange={e => handleSettingChange('baseUrl', e.target.value)}
                    placeholder="https://functions.yandexcloud.net/d4eno3im0qgsr4tj5hdo"
                  />
                </div>
                <div className="mb-3">
                  <label className="form-label">Cloudflare Gateway</label>
                  <input
                    type="text"
                    className="form-control"
                    value={localUrlSettings.cloudflare_gateway}
                    onChange={e => handleSettingChange('cloudflare_gateway', e.target.value)}
                    placeholder="SWE-IHOR или IP"
                  />
                </div>
                <div className="mb-3">
                  <label className="form-label">Bunny Gateway</label>
                  <input
                    type="text"
                    className="form-control"
                    value={localUrlSettings.bunny_gateway}
                    onChange={e => handleSettingChange('bunny_gateway', e.target.value)}
                    placeholder="SWE-IHOR или IP"
                  />
                </div>
                <div className="mb-3">
                  <label className="form-label">Fastly Gateway</label>
                  <input
                    type="text"
                    className="form-control"
                    value={localUrlSettings.fastly_gateway}
                    onChange={e => handleSettingChange('fastly_gateway', e.target.value)}
                    placeholder="SWE-IHOR или IP"
                  />
                </div>
              </div>
              <div className="col-md-6">
                <div className="mb-3">
                  <label className="form-label">Telegram Gateway</label>
                  <input
                    type="text"
                    className="form-control"
                    value={localUrlSettings.telegram_gateway}
                    onChange={e => handleSettingChange('telegram_gateway', e.target.value)}
                    placeholder="IP адрес"
                  />
                </div>
                <div className="mb-3">
                  <label className="form-label">Hetzner Gateway</label>
                  <input
                    type="text"
                    className="form-control"
                    value={localUrlSettings.hetzner_gateway}
                    onChange={e => handleSettingChange('hetzner_gateway', e.target.value)}
                    placeholder="IP адрес"
                  />
                </div>
                <div className="mb-3">
                  <label className="form-label">Тип</label>
                  <input
                    type="text"
                    className="form-control"
                    value={localUrlSettings.type}
                    onChange={e => handleSettingChange('type', e.target.value)}
                    placeholder="routes"
                  />
                </div>
                <div className="mb-3">
                  <label className="form-label">Версия</label>
                  <input
                    type="text"
                    className="form-control"
                    value={localUrlSettings.version}
                    onChange={e => handleSettingChange('version', e.target.value)}
                    placeholder="v4.rsc"
                  />
                </div>
              </div>
            </div>
            
            <div className="mt-4">
              <h6 className="mb-3">Сгенерированная ссылка</h6>
              <div className="input-group">
                <input
                  type="text"
                  className="form-control"
                  value={generatedUrl}
                  readOnly
                  style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}
                />
                <button
                  className="btn btn-outline-secondary d-flex align-items-center"
                  type="button"
                  onClick={() => onCopyToClipboard(generatedUrl)}
                  title="Копировать в буфер обмена"
                >
                  <span className="me-2 d-flex align-items-center"><IconDownload size={18} /></span>
                  <span className="fw-bold">Копировать</span>
                </button>
              </div>
            </div>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
              <span className="fw-bold">Закрыть</span>
            </button>
            <button type="button" className="btn btn-primary d-flex align-items-center" onClick={handleSaveSettings}>
              <span className="fw-bold">Сохранить настройки</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Модальное окно для добавления нового сервера
function AddServerModal({ show, newServer, customProvider, onNewServerChange, onCustomProviderChange, onAddServer, onClose, error }) {
  const modalRef = useRef(null);

  useEffect(() => {
    if (window.Tabler && window.Tabler.Modal && modalRef.current) {
      const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
      if (show) {
        modalInstance.show();
      } else {
        modalInstance.hide();
      }
      const handler = () => onClose && onClose();
      modalRef.current.addEventListener('hide.bs.modal', handler);
      return () => {
        if (modalRef.current) {
          modalRef.current.removeEventListener('hide.bs.modal', handler);
        }
      };
    }
  }, [show, onClose]);

  const handleChange = (field, value) => {
    onNewServerChange({ ...newServer, [field]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onAddServer();
  };

  return (
    <div className="modal" tabIndex="-1" ref={modalRef}>
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">
              <IconPlus className="icon me-2" />
              Добавить новый сервер
            </h5>
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div className="modal-body">
            {error && (
              <div className="alert alert-danger" role="alert">
                {error}
              </div>
            )}
            <form onSubmit={handleSubmit}>
              <div className="mb-3">
                <label className="form-label">IP адрес *</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="192.168.1.1"
                  value={newServer.ip}
                  onChange={(e) => handleChange('ip', e.target.value)}
                  required
                />
              </div>
              <div className="mb-3">
                <label className="form-label">DNS имя *</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="srv1.shx.su"
                  value={newServer.dns}
                  onChange={(e) => handleChange('dns', e.target.value)}
                  required
                />
              </div>
              <div className="mb-3">
                <label className="form-label">Страна *</label>
                <select
                  className="form-select"
                  value={newServer.country}
                  onChange={(e) => handleChange('country', e.target.value)}
                  required
                >
                  <option value="">Выберите страну</option>
                  <option value="RU">Россия (RU)</option>
                  <option value="SWE">Швеция (SWE)</option>
                  <option value="US">США (US)</option>
                  <option value="DE">Германия (DE)</option>
                  <option value="NL">Нидерланды (NL)</option>
                  <option value="SG">Сингапур (SG)</option>
                </select>
              </div>
              <div className="mb-3">
                <label className="form-label">Провайдер *</label>
                <select
                  className="form-select"
                  value={newServer.provider}
                  onChange={(e) => handleChange('provider', e.target.value)}
                  required
                >
                  <option value="">Выберите провайдера</option>
                  <option value="Yandex">Yandex Cloud</option>
                  <option value="AWS">Amazon Web Services</option>
                  <option value="Google">Google Cloud</option>
                  <option value="Azure">Microsoft Azure</option>
                  <option value="Hetzner">Hetzner</option>
                  <option value="OVH">OVH</option>
                  <option value="DigitalOcean">DigitalOcean</option>
                  <option value="Vultr">Vultr</option>
                  <option value="Linode">Linode</option>
                  <option value="VPSVILLE">VPSVILLE</option>
                  <option value="HIPHOST">HIPHOST</option>
                  <option value="Другой">Другой</option>
                </select>
                {newServer.provider === 'Другой' && (
                  <input
                    type="text"
                    className="form-control mt-2"
                    placeholder="Введите название провайдера"
                    value={customProvider}
                    onChange={(e) => onCustomProviderChange(e.target.value)}
                  />
                )}
              </div>
              <div className="mb-3">
                <label className="form-label">Тип сервера *</label>
                <select
                  className="form-select"
                  value={newServer.type}
                  onChange={(e) => handleChange('type', e.target.value)}
                  required
                >
                  <option value="">Выберите тип</option>
                  {SERVER_TYPE_OPTIONS.map((opt) => (
                    <option key={opt.value} value={opt.value}>{opt.label}</option>
                  ))}
                </select>
              </div>
              <div className="mb-3">
                <label className="form-label">Тип туннеля *</label>
                <select
                  className="form-select"
                  value={newServer.tunnel}
                  onChange={(e) => handleChange('tunnel', e.target.value)}
                  required
                >
                  <option value="GRE">GRE (Generic Routing Encapsulation)</option>
                  <option value="IPSec">IPSec</option>
                  <option value="WireGuard">WireGuard</option>
                  <option value="OpenVPN">OpenVPN</option>
                </select>
              </div>
              <div className="mb-3">
                <label className="form-label">Основной шлюз *</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Cloudflare, Hetzner, Мой шлюз и т.д."
                  value={newServer.gateway}
                  onChange={(e) => handleChange('gateway', e.target.value)}
                  required
                />
              </div>
            </form>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
              <span className="fw-bold">Отмена</span>
            </button>
            <button type="button" className="btn btn-primary d-flex align-items-center" onClick={onAddServer}>
              <span className="me-2 d-flex align-items-center"><IconPlus className="icon" /></span>
              <span className="fw-bold">Добавить сервер</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ServerManager;