import { useState, useEffect, useRef } from 'react';
import api from './lib/api.js';
import CommunityAutocompleteInput from './components/CommunityAutocompleteInput.jsx';
import CommunityBadge from './components/CommunityBadge.jsx';
import { 
  IconPlus, 
  IconSearch, 
  IconEdit, 
  IconTrash, 
  IconCheck, 
  IconX, 
  IconDatabase,
  IconRefresh,
  IconUpload,
  IconDownload,
  IconDeviceFloppy,
  IconHash,
  IconClock,
  IconFileText,
  IconFilter,
  IconArrowUp,
  IconArrowDown,
  IconCopy
} from '@tabler/icons-react';
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
import S3MetaBar from './components/S3MetaBar.jsx';
import PageHeaderActions from './components/PageHeaderActions.jsx';
import PageHeader from './components/PageHeader.jsx';
import EmptyState from './components/EmptyState.jsx';
import Breadcrumbs from './components/Breadcrumbs.jsx';
import ConfirmDialog from './components/ConfirmDialog.jsx';
import WsUpdateModal from './components/WsUpdateModal.jsx';
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
import HistoryModal from './components/HistoryModal.jsx';
import ErrorAlert from './components/ErrorAlert.jsx';
import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
import ImportModal from './components/ImportModal.jsx';
import QuickAddBar from './components/QuickAddBar.jsx';
import AccordionCard from './components/AccordionCard.jsx';
import SavedFilters from './components/SavedFilters.jsx';
import BulkActionsBar from './components/BulkActionsBar.jsx';
import Tooltip from './components/Tooltip.jsx';
import { getAsnName, getAsnNameSync } from './lib/asn.js';

const API_URL = '/api';

function ASNsNewManager() {
  const [items, setItems] = useState([]);
  const [originalItems, setOriginalItems] = useState([]);
  const [etag, setEtag] = useState('');
  const [lastModified, setLastModified] = useState('');
  const [contentLength, setContentLength] = useState(null);
  const [newItem, setNewItem] = useState({ asn: '', community: '' });
  const [newInvalid, setNewInvalid] = useState({ asn: false, community: false });
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [searchTerm, setSearchTerm] = useState('');
  const searchTimer = useRef(null);
  const didInit = useRef(false);
  const [editingAsn, setEditingAsn] = useState(null);
  const [editingValue, setEditingValue] = useState('');
  const [loading, setLoading] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [itemToDelete, setItemToDelete] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalItems, setTotalItems] = useState(0);
  const [sortField, setSortField] = useState('asn');
  const [sortOrder, setSortOrder] = useState('asc');
  const [filterCommunity, setFilterCommunity] = useState('');
  const editInputRef = useRef(null);
  const pageSize = 10;
  const [asnNameMap, setAsnNameMap] = useState({});
  const [selectedItems, setSelectedItems] = useState(new Set());

  // Справочник community для подсказок
  const [communities, setCommunities] = useState([]);
  useEffect(() => {
    (async () => {
      try {
        const res = await api.get(`/communities`);
        setCommunities(Array.isArray(res.data) ? res.data : []);
      } catch (e) {
        // тихо игнорируем
      }
    })();
  }, []);

  // Подгружаем имена ASN из кэша/внешних API (эффект будет размещен ниже после определения paginatedItems)

  const renderCommunityBadge = (value) => (<CommunityBadge value={value} communities={communities} />);

  const isValidAsn = (value) => /^[0-9]+$/.test(String(value).trim());
  // Допускаем как числовые, так и строковые (AS:NNN) community
  const isValidCommunity = (value) => /^(\d+|\d+:\d+)$/.test(String(value).trim());

  const [wsOpen, setWsOpen] = useState(false);
  const [wsUrl, setWsUrl] = useState('');

  useEffect(() => {
    // Load WS URL once
    (async () => {
      try { const r = await api.get('/ws/url'); setWsUrl(String(r.data?.url || '')); } catch {}
    })();
  }, []);

  const fetchItems = async () => {
    setLoading(true);
    try {
      const response = await api.get(`/asns`, { params: { offset: 0, limit: 0, format: 'std' } });
      const payload = Array.isArray(response.data?.items) ? response.data.items : [];
      const mapped = payload.map(item => ({ asn: String(item.domain), community: String(item.type) }));
      const total = mapped.length;
      setItems(mapped);
      setOriginalItems(mapped);
      setTotalItems(Number.isFinite(total) ? total : 0);
      setEtag(response.headers?.etag || '');
      setLastModified(response.headers?.['last-modified'] || '');
      const lengthHeader = response.headers?.['content-length-source'];
      setContentLength(typeof lengthHeader !== 'undefined' ? Number(lengthHeader) : null);
      setError('');
    } catch (error) {
      console.error('Error fetching ASNs:', error);
      setError('Не удалось загрузить список ASN. Проверьте, запущен ли бэкенд.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { if (!didInit.current) { didInit.current = true; fetchItems(); } }, []);

  const handleAddItem = () => {
    const asnOk = isValidAsn(newItem.asn);
    const communityOk = isValidCommunity(newItem.community);
    setNewInvalid({ asn: !asnOk, community: !communityOk });
    if (!asnOk || !communityOk) {
      setError('Введите корректный номер ASN и числовой community.');
      return;
    }
    setError('');
    setItems([...items, { asn: String(newItem.asn).trim(), community: String(newItem.community).trim() }]);
    setNewItem({ asn: '', community: '' });
    setNewInvalid({ asn: false, community: false });
  };

  const handleEdit = (item) => {
    setEditingAsn(item.asn);
    setEditingValue(item.community);
  };

  const handleSaveEdit = (asn) => {
    if (!isValidCommunity(editingValue)) {
      setError('Community должен быть числом.');
      return;
    }
    const updatedItems = items.map(i =>
      i.asn === asn ? { ...i, community: String(editingValue).trim() } : i
    );
    setItems(updatedItems);
    setEditingAsn(null);
  };

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

  const handleDeleteItem = (asnToDelete) => {
    setItems(items.filter(i => i.asn !== asnToDelete));
    setSelectedItems(prev => {
      const next = new Set(prev);
      next.delete(asnToDelete);
      return next;
    });
  };

  // Функции для работы с выбранными элементами
  const toggleSelectItem = (asn) => {
    setSelectedItems(prev => {
      const next = new Set(prev);
      if (next.has(asn)) {
        next.delete(asn);
      } else {
        next.add(asn);
      }
      return next;
    });
  };

  const selectAll = () => {
    setSelectedItems(new Set(paginatedItems.map(i => i.asn)));
  };

  const deselectAll = () => {
    setSelectedItems(new Set());
  };

  const handleBulkDelete = () => {
    if (selectedItems.size === 0) return;
    const count = selectedItems.size;
    setItems(items.filter(i => !selectedItems.has(i.asn)));
    setSelectedItems(new Set());
    window.notify?.success?.(`Удалено ${count} записей`);
  };

  const handleBulkExport = () => {
    if (selectedItems.size === 0) return;
    const selected = items.filter(i => selectedItems.has(i.asn));
    const header = ['asn', 'community'];
    const csv = [header, ...selected.map(i => [i.asn, i.community])]
      .map(r => r.map(x => `"${(x ?? '').toString().replace(/"/g, '""')}"`).join(','))
      .join('\n');
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `asns_selected_${new Date().toISOString().split('T')[0]}.csv`;
    a.click();
    URL.revokeObjectURL(url);
    window.notify?.success?.(`Экспортировано ${selectedItems.size} записей`);
  };

  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text).then(() => {
      window.notify?.success?.('Скопировано в буфер обмена');
    }).catch(() => {
      window.notify?.error?.('Не удалось скопировать');
    });
  };

  const confirmDelete = (item) => {
    setItemToDelete(item);
    setShowDeleteModal(true);
  };

  const executeDelete = () => {
    if (itemToDelete) {
      handleDeleteItem(itemToDelete.asn);
      setShowDeleteModal(false);
      setItemToDelete(null);
    }
  };

  const deduplicate = (arr) => {
    const seen = new Set();
    const out = [];
    for (const i of arr) {
      const key = String(i.asn).trim();
      if (!key) continue;
      if (seen.has(key)) continue;
      seen.add(key);
      out.push({ asn: key, community: String(i.community || '').trim() });
    }
    return out;
  };

  const computeDiff = (before, after) => {
    const mapBefore = new Map(before.map(i => [i.asn, i]));
    const mapAfter = new Map(after.map(i => [i.asn, i]));
    const added = [];
    const removed = [];
    const changed = [];
    for (const [k, v] of mapAfter) {
      if (!mapBefore.has(k)) { added.push(v); continue; }
      const prev = mapBefore.get(k);
      if (String(prev.community) !== String(v.community)) changed.push({ from: prev, to: v });
    }
    for (const [k, v] of mapBefore) {
      if (!mapAfter.has(k)) removed.push(v);
    }
    return { added, removed, changed };
  };

  const [showDiff, setShowDiff] = useState(false);
  const [diff, setDiff] = useState({ added: [], removed: [], changed: [] });
  const [confirmSaveOpen, setConfirmSaveOpen] = useState(false);
  const [historyOpen, setHistoryOpen] = useState(false);
  const [clearCommunitiesOpen, setClearCommunitiesOpen] = useState(false);

  const handlePreviewDiff = () => {
    const valid = items.filter(i => isValidAsn(i.asn) && isValidCommunity(i.community))
      .map(i => ({ asn: String(i.asn).trim(), community: String(i.community).trim() }));
    const unique = deduplicate(valid);
    setDiff(computeDiff(originalItems, unique));
    setShowDiff(true);
  };

  const handleSaveChanges = async () => {
    // подготовим diff и спросим подтверждение только при массовых изменениях (>10)
    const valid = items.filter(i => isValidAsn(i.asn) && isValidCommunity(i.community))
      .map(i => ({ asn: String(i.asn).trim(), community: String(i.community).trim() }));
    const unique = deduplicate(valid);
    const diffData = computeDiff(originalItems, unique);
    setDiff(diffData);
    
    // Умное подтверждение: показываем модалку только при массовых изменениях
    const totalChanges = (diffData.added?.length || 0) + (diffData.removed?.length || 0) + (diffData.changed?.length || 0);
    
    if (totalChanges > 10) {
      // Массовое изменение - требуется подтверждение
      setConfirmSaveOpen(true);
    } else {
      // Малое изменение - сохраняем сразу
      performSave();
    }
  };

  const performSave = async () => {
    setConfirmSaveOpen(false);
    setLoading(true);
    try {
      const valid = items.filter(i => isValidAsn(i.asn) && isValidCommunity(i.community))
        .map(i => ({ asn: String(i.asn).trim(), community: String(i.community).trim() }));
      const unique = deduplicate(valid);

      // Загрузим полный список, совместим и сохраним
      const fullRes = await api.get(`/asns`, { params: { offset: 0, limit: 0, format: 'std' } });
      const fullPayload = Array.isArray(fullRes.data?.items) ? fullRes.data.items : (Array.isArray(fullRes.data) ? fullRes.data : []);
      const full = fullPayload.map(item => ({ asn: String(item.domain).trim(), community: String(item.type || '').trim() }));
      const fullMap = new Map(full.map(i => [i.asn, { asn: i.asn, community: i.community }]));
      const originalPageMap = new Map(originalItems.map(i => [String(i.asn).trim(), true]));
      const uniqueMap = new Map(unique.map(i => [String(i.asn).trim(), { asn: i.asn, community: i.community }]));
      for (const key of originalPageMap.keys()) {
        if (!uniqueMap.has(key)) fullMap.delete(key);
      }
      for (const [key, val] of uniqueMap.entries()) fullMap.set(key, val);
      const fullToSave = Array.from(fullMap.values()).map(i => ({ domain: i.asn, type: i.community }));

      const et = fullRes?.headers?.etag || etag;
      const payload = { domains: fullToSave, etag: et };
      const response = await api.post(`/asns`, payload, { validateStatus: () => true });
      if (response.status === 412) {
        setError('Данные изменились в S3 (ETag mismatch). Обновите список и попробуйте снова.');
        return;
      }
      if (response.status >= 400) throw new Error(`Save failed with status ${response.status}`);
      setEtag(response.headers?.etag || et);
      await fetchItems();
      setSuccess('Изменения успешно сохранены!');
      setTimeout(() => setSuccess(''), 3000);
      notifyMutationSuccess('Изменения сохранены');
    } catch (error) {
      console.error('Error saving changes:', error);
      setError('Не удалось сохранить изменения.');
    } finally {
      setLoading(false);
    }
  };

  const handleImport = () => {
    setImportOpen(true);
  };

  const handleExport = async () => {
    try {
      const effectiveQ = searchTerm ? searchTerm : (filterCommunity ? filterCommunity : '');
      const response = await api.get(`/asns`, { params: { q: effectiveQ, offset: 0, limit: 0, format: 'std' } });
      const payload = Array.isArray(response.data?.items) ? response.data.items : (Array.isArray(response.data) ? response.data : []);
      const all = payload.map(item => ({ asn: item.domain, community: item.type }));
      const header = ['asn', 'community'];
      const csv = [header, ...all.map(i => [i.asn, i.community])]
        .map(r => r.map(x => `"${(x ?? '').toString().replace(/"/g, '""')}"`).join(','))
        .join('\n');
      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `asns_${new Date().toISOString().split('T')[0]}.csv`;
      a.click();
      URL.revokeObjectURL(url);
    } catch (e) {
      window.notify?.error('Экспорт ASN не удался', String(e?.message || e));
    }
  };

  // Drag&Drop импорт (быстрый путь)
  const onDropImport = async (e) => {
    e.preventDefault();
    const file = e.dataTransfer?.files?.[0];
    if (!file) return;
    const text = await file.text();
    const lines = text.split(/\r?\n/).map(l => l.trim()).filter(Boolean);
    const parsed = lines.map(l => {
      const [a, c] = l.split(/\s+/);
      return { asn: (a || '').trim(), community: (c || '').trim() };
    }).filter(i => isValidAsn(i.asn) && isValidCommunity(i.community));
    setItems(prev => {
      const merged = [...prev, ...parsed];
      const map = new Map();
      for (const it of merged) {
        const key = String(it.asn).trim();
        if (!map.has(key)) map.set(key, { asn: key, community: String(it.community).trim() });
      }
      return Array.from(map.values());
    });
  };

  const clearInvalid = () => {
    setItems(prev => prev.filter(i => i.asn || i.community)
      .filter(i => isValidAsn(i.asn) && isValidCommunity(i.community))
    );
  };

  // ===== Импорт через модалку =====
  const [importOpen, setImportOpen] = useState(false);
  const parseLine = (line) => {
    const [a, c] = String(line).split(/\s+/);
    return { asn: (a || '').trim(), community: (c || '').trim() };
  };
  const validateItem = (obj) => isValidAsn(obj.asn) && isValidCommunity(obj.community);
  const applyImportedItems = (list) => {
    setItems(prev => {
      const merged = [...prev, ...list];
      const map = new Map();
      for (const it of merged) {
        const key = String(it.asn).trim();
        if (!map.has(key)) map.set(key, { asn: key, community: String(it.community).trim() });
      }
      return Array.from(map.values());
    });
    setImportOpen(false);
  };

  // Сортировка
  const sortedItems = [...items].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;
  });

  // Локальная фильтрация и пагинация
  const filtered = sortedItems.filter(i => {
    if (!i) return false;
    const byCommunity = !filterCommunity || i.community === filterCommunity;
    const term = String(searchTerm || '').toLowerCase();
    const bySearch = !term || String(i.asn || '').toLowerCase().includes(term);
    return byCommunity && bySearch;
  });
  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
  const paginatedItems = filtered.slice((currentPage - 1) * pageSize, (currentPage) * pageSize);

  // Подгружаем имена ASN из кэша/внешних API (после вычисления paginatedItems)
  useEffect(() => {
    const visible = paginatedItems.filter(i => i != null).map(i => i.asn).filter(asn => asn != null);
    visible.forEach(async (asn) => {
      const cached = getAsnNameSync(asn);
      if (cached !== null && typeof cached !== 'undefined') {
        setAsnNameMap(prev => ({ ...prev, [asn]: cached }));
        return;
      }
      const name = await getAsnName(asn);
      if (name !== null) setAsnNameMap(prev => ({ ...prev, [asn]: name }));
    });
  }, [JSON.stringify(paginatedItems)]);

  // Для фильтра - список всех уникальных community
  const allCommunities = Array.from(new Set(items.filter(i => i != null).map(i => String(i.community || '')).filter(c => c !== '')));

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

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

  // Глобальные хоткеи: Ctrl+S — сохранить изменения
  useEffect(() => {
    const onKey = (e) => {
      if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S')) {
        e.preventDefault();
        if (!loading) handleSaveChanges();
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [loading, items, originalItems, etag, sortField, sortOrder, filterCommunity]);

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

  return (
    <>
      {error && (
        <ErrorAlert message={error} onClose={() => setError('')} />
      )}
      
      {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>
      )}

      <PageHeader
        title="ASNs"
        pretitle={(
          <Breadcrumbs items={[
            { label: 'Главная', to: '/dashboard' },
            { label: 'Данные' },
            { label: 'ASNs' },
          ]} />
        )}
        actions={(
          <PageHeaderActions
              loading={loading}
              onPreview={handlePreviewDiff}
              disablePreview={loading || items.length === 0}
              onRefresh={fetchItems}
              disableRefresh={loading}
              onImport={handleImport}
              onExport={handleExport}
              disableExport={items.length === 0}
              onClear={clearInvalid}
              disableClear={items.length === 0}
              onClearCommunities={() => { if (!filterCommunity) { setError('Выберите community в фильтре для очистки'); return; } setClearCommunitiesOpen(true); }}
              disableClearCommunities={items.length === 0 || !filterCommunity}
              onSave={handleSaveChanges}
              disableSave={loading}
              onHistory={() => setHistoryOpen(true)}
              onOnlineUpdate={() => setWsOpen(true)}
              onBackgroundUpdate={async () => {
                try {
                  const res = await fetch('/api/update-bgp/background', { method: 'POST' });
                  const data = await res.json().catch(() => ({}));
                  if (!res.ok || data.ok === false) {
                    throw new Error(data?.message || `HTTP ${res.status}`);
                  }
                  notifyMutationSuccess('Фоновое обновление запущено', data);
                } catch (e) {
                  window.notify?.error('Не удалось запустить фоновое обновление', String(e));
                }
              }}
          />
        )}
      />
      <div className="row">
        <div className="col-lg-3">
          {/* Classic Add New ASN Card (improved) */}
          <div className="card card-md animate-in">
            <div className="card-header bg-primary-lt">
              <h3 className="card-title text-primary">
                <IconPlus className="icon me-2" />
                Добавить новый ASN
              </h3>
            </div>
            <div className="card-body">
              <form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
                <div className="mb-3">
                  <label className="form-label required">Номер AS</label>
                  <div className="input-icon">
                    <span className="input-icon-addon">
                      <IconHash size={18} />
                    </span>
                    <input
                      type="text"
                      className={`form-control${newInvalid.asn ? ' is-invalid' : isValidAsn(newItem.asn) ? ' is-valid' : ''}`}
                      placeholder="12345"
                      value={newItem.asn}
                      onChange={(e) => setNewItem({ ...newItem, asn: e.target.value })}
                    />
                  </div>
                  {newInvalid.asn && <div className="invalid-feedback">Только цифры</div>}
                  {isValidAsn(newItem.asn) && !newInvalid.asn && (<div className="valid-feedback">Корректный номер AS</div>)}
                  <div className="form-text text-muted small">Формат: только цифры, например 12345</div>
                </div>
                <div className="mb-3">
                  <label className="form-label required">Community</label>
                  <div className="input-icon">
                    <span className="input-icon-addon">
                      <IconHash size={18} />
                    </span>
                    <CommunityAutocompleteInput
                      value={newItem.community}
                      onChange={(v) => setNewItem({ ...newItem, community: v })}
                      communities={communities}
                      placeholder="Начните вводить номер или имя"
                      className={`form-control${newInvalid.community ? ' is-invalid' : isValidCommunity(newItem.community) ? ' is-valid' : ''}`}
                    />
                  </div>
                  {newInvalid.community && <div className="invalid-feedback">Неверный формат community</div>}
                  {isValidCommunity(newItem.community) && !newInvalid.community && (<div className="valid-feedback">Корректный формат community</div>)}
                  <div className="form-text">Формат: N или N:N (например 65000:100)</div>
                  {(() => {
                    const match = communities.find(c => c.value === String(newItem.community).trim());
                    if (!match) return null;
                    return (
                      <div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
                        <div className="d-flex">
                          <div>
                            <strong>{match.name || match.value}</strong>
                            {match.description && <div className="text-muted small">{match.description}</div>}
                            {match.tags && match.tags.length > 0 && (
                              <div className="mt-1">
                                {match.tags.map((tag, idx) => (<span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>))}
                              </div>
                            )}
                          </div>
                        </div>
                      </div>
                    );
                  })()}
                </div>
                <div className="form-footer">
                  <button type="submit" className="btn btn-primary w-100" disabled={!isValidAsn(newItem.asn) || !isValidCommunity(newItem.community)}>
                    <IconPlus className="icon me-2" />
                    Добавить ASN
                  </button>
                </div>
              </form>
            </div>
          </div>

          {/* Дополнительные варианты */}
          <AccordionCard title={'Дополнительные варианты'} defaultOpen={false} className="animate-in" style={{animationDelay: '0.1s'}}>
            <QuickAddBar
              placeholder={'12345 65000:100'}
              help={'Вставьте строки: ASN ПРОБЕЛ COMMUNITY'}
              parseLine={(line) => { const [a, c] = String(line).split(/\s+/); return { asn: (a||'').trim(), community: (c||'').trim() }; }}
              validateItem={(obj) => isValidAsn(obj.asn) && isValidCommunity(obj.community)}
              onApply={(list) => {
                setItems(prev => {
                  const merged = [...prev, ...list];
                  const map = new Map();
                  for (const it of merged) {
                    const key = String(it.asn).trim();
                    if (!map.has(key)) map.set(key, { asn: key, community: String(it.community).trim() });
                  }
                  return Array.from(map.values());
                });
              }}
            />
            <div className="card card-md border-dashed mt-3 animate-in"
                 style={{animationDelay: '0.15s'}}
                 onDragOver={(e) => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--tblr-primary)'; }}
                 onDragLeave={(e) => { e.currentTarget.style.borderColor = ''; }}
                 onDrop={(e) => { e.currentTarget.style.borderColor = ''; onDropImport(e); }}
            >
              <div className="card-body text-center text-muted py-4">
                <IconUpload size={32} className="mb-2 text-muted" />
                <div className="fw-medium">Перетащите файл TXT/CSV сюда</div>
                <div className="small">Формат: ASN community</div>
              </div>
            </div>
          </AccordionCard>
          

          {/* Карточка действий больше не нужна — действия перенесены в page-header */}
        </div>

        <div className="col-lg-9">
          {/* BulkActionsBar */}
          <BulkActionsBar
            selectedCount={selectedItems.size}
            totalCount={paginatedItems.length}
            onSelectAll={selectAll}
            onDeselectAll={deselectAll}
            onDelete={selectedItems.size > 0 ? () => {
              if (confirm(`Удалить ${selectedItems.size} записей?`)) {
                handleBulkDelete();
              }
            } : null}
            onExport={selectedItems.size > 0 ? handleBulkExport : null}
          />

          <div className="card">
            <div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
              <h3 className="card-title mb-0">Список ASN <span className="badge bg-blue-lt text-blue ms-2">{items.length}</span></h3>
              <div className="d-flex gap-2 flex-wrap">
                <SavedFilters
                  pageKey="asns"
                  currentFilters={{ searchTerm, filterCommunity, sortField, sortOrder }}
                  onApplyFilter={(filters) => {
                    setSearchTerm(filters.searchTerm || '');
                    setFilterCommunity(filters.filterCommunity || '');
                    setSortField(filters.sortField || 'asn');
                    setSortOrder(filters.sortOrder || 'asc');
                    setCurrentPage(1);
                  }}
                />
                {/* Фильтр по community */}
                <div className="input-icon">
                  <span className="input-icon-addon">
                    <IconFilter size={18} />
                  </span>
                  <select
                  className="form-select"
                  style={{ minWidth: '200px' }}
                  value={filterCommunity}
                  onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}
                  title={(() => {
                    const meta = communities.find(c => String(c.value) === String(filterCommunity));
                    if (!meta) return 'Все community';
                    const name = meta.name ? meta.name + ' — ' : '';
                    const desc = meta.description || '';
                    const tags = meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : '';
                    return name + desc + tags;
                  })()}
                >
                  <option value="">Все community</option>
                  {allCommunities.map(community => {
                    const meta = communities.find(c => String(c.value) === String(community));
                    const label = meta && meta.name ? `${community} — ${meta.name}` : community;
                    const title = meta ? `${meta.name ? meta.name + ' — ' : ''}${meta.description || ''}${meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : ''}` : community;
                    return (
                      <option key={community} value={String(community)} title={title}>{label}</option>
                    );
                  })}
                  </select>
                </div>
                {/* Поиск */}
                <div className="input-icon flex-grow-1" style={{ minWidth: '200px', position: 'relative' }}>
                  <span className="input-icon-addon">
                    <IconSearch size={18} />
                  </span>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Поиск ASN..."
                    value={searchTerm}
                    onChange={e => { setSearchTerm(e.target.value); setCurrentPage(1); }}
                    aria-label="Поиск ASN"
                    style={{ paddingRight: searchTerm ? '2.5rem' : undefined }}
                  />
                  {!!searchTerm && (
                    <button
                      type="button"
                      className="btn btn-ghost-secondary btn-icon btn-sm"
                      style={{ position: 'absolute', right: '0.25rem', top: '50%', transform: 'translateY(-50%)', zIndex: 2 }}
                      aria-label="Очистить поиск"
                      onClick={() => { setSearchTerm(''); setCurrentPage(1); }}
                    >
                      <IconX size={16} />
                    </button>
                  )}
                </div>
              </div>
              <div></div>
            </div>
            {/* Мета-информация будет показана внизу карточки */}
            {loading ? (
              <TableSkeleton rows={10} cols={3} />
            ) : paginatedItems.length === 0 ? (
              <TableEmpty cols={3}>
                <EmptyState
                  title="Нет ASN"
                  description="Импортируйте или добавьте записи, чтобы начать."
                  action={<button className="btn btn-primary" onClick={handleImport}>Импорт</button>}
                  secondaryAction={<button className="btn btn-outline-primary" onClick={() => {
                    const header = ['asn','community'];
                    const lines = [header, ['12345','65000:100']].map(r => r.map(x => `"${(x ?? '').toString().replace(/"/g, '""')}"`).join(',')).join('\n');
                    const blob = new Blob([lines], { type: 'text/csv;charset=utf-8;' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a'); a.href = url; a.download = 'asns_sample.csv'; a.click(); URL.revokeObjectURL(url);
                  }}>Шаблон CSV</button>}
                />
              </TableEmpty>
            ) : (
            <div className="table-responsive">
              <table className="table card-table table-vcenter table-nowrap mb-0">
                <thead>
                  <tr>
                    <th style={{width: '40px'}}>
                      <input
                        type="checkbox"
                        className="form-check-input"
                        checked={paginatedItems.length > 0 && paginatedItems.every(i => selectedItems.has(i.asn))}
                        onChange={(e) => {
                          if (e.target.checked) {
                            selectAll();
                          } else {
                            deselectAll();
                          }
                        }}
                        title="Выбрать все на странице"
                      />
                    </th>
                    <th className="cursor-pointer user-select-none" onClick={() => handleSort('asn')}>
                      <div className="d-flex align-items-center">
                        <IconHash size={16} className="me-1 text-muted" />
                        Номер AS
                        {sortField === 'asn' && (
                          <span className="ms-1">
                            {sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
                          </span>
                        )}
                      </div>
                    </th>
                    <th>
                      Имя AS
                    </th>
                    <th className="cursor-pointer user-select-none" onClick={() => handleSort('community')}>
                      <div className="d-flex align-items-center">
                        <IconHash size={16} className="me-1 text-muted" />
                        Community
                        {sortField === 'community' && (
                          <span className="ms-1">
                            {sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
                          </span>
                        )}
                      </div>
                    </th>
                    <th className="text-end">Действия</th>
                  </tr>
                </thead>
                <tbody>
                  {paginatedItems.map((item, idx) => (
                    <tr key={item.asn} className={editingAsn === item.asn ? 'table-active' : (selectedItems.has(item.asn) ? 'table-selected' : '')} style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}>
                      <td>
                        <input
                          type="checkbox"
                          className="form-check-input"
                          checked={selectedItems.has(item.asn)}
                          onChange={() => toggleSelectItem(item.asn)}
                          onClick={(e) => e.stopPropagation()}
                        />
                      </td>
                      <td className="font-monospace" title="ASN">
                        <div className="d-flex align-items-center">
                          <IconHash size={16} className="me-2 text-muted" />
                          <span>{item.asn}</span>
                          <Tooltip content="Копировать ASN" position="top">
                            <button
                              className="btn btn-ghost-secondary btn-icon btn-sm ms-2"
                              onClick={() => copyToClipboard(item.asn)}
                              aria-label="Копировать"
                              title="Копировать ASN"
                            >
                              <IconCopy size={14} />
                            </button>
                          </Tooltip>
                        </div>
                      </td>
                      <td title={asnNameMap[item.asn] || ''}>
                        {asnNameMap[item.asn] ? (
                          <span>{asnNameMap[item.asn]}</span>
                        ) : (
                          <span className="text-muted">—</span>
                        )}
                      </td>
                      <td>{renderCommunityBadge(item.community)}</td>
                      <td className="text-end">
                        {editingAsn === item.asn ? (
                          <>
                            <CommunityAutocompleteInput
                              value={editingValue}
                              onChange={setEditingValue}
                              communities={communities}
                              onKeyDown={(e) => handleEditKeyDown(e, item.asn)}
                              className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
                              style={{ width: '150px' }}
                            />
                            <Tooltip content="Сохранить (Enter)">
                              <button className="btn btn-success btn-icon btn-sm me-1" onClick={() => handleSaveEdit(item.asn)} disabled={!isValidCommunity(editingValue)}><IconCheck size={16} /></button>
                            </Tooltip>
                            <Tooltip content="Отмена (Esc)">
                              <button className="btn btn-secondary btn-icon btn-sm" onClick={handleCancelEdit}><IconX size={16} /></button>
                            </Tooltip>
                          </>
                        ) : (
                          <>
                            <Tooltip content="Редактировать" position="top">
                              <button className="btn btn-outline-primary btn-icon btn-sm me-1" aria-label="Редактировать" onClick={() => handleEdit(item)} title="Редактировать"><IconEdit size={16} /></button>
                            </Tooltip>
                            <Tooltip content="Копировать" position="top">
                              <button className="btn btn-outline-secondary btn-icon btn-sm me-1" aria-label="Копировать" onClick={() => copyToClipboard(`${item.asn} ${item.community}`)} title="Копировать"><IconCopy size={16} /></button>
                            </Tooltip>
                            <Tooltip content="Удалить" position="top">
                              <button className="btn btn-outline-danger btn-icon btn-sm" aria-label="Удалить" onClick={() => confirmDelete(item)} title="Удалить"><IconTrash size={16} /></button>
                            </Tooltip>
                          </>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            )}
            {/* Пагинация */}
            {totalPages > 1 && (
              <div className="card-footer">
                <div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
                  <div className="text-muted small">
                    Показано <strong>{((currentPage - 1) * pageSize) + 1}</strong> - <strong>{((currentPage - 1) * pageSize) + paginatedItems.length}</strong> из <strong>{totalItems || filtered.length}</strong>
                  </div>
                  <ul className="pagination m-0">
                    <li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
                      <button className="page-link" onClick={() => setCurrentPage(1)} disabled={currentPage === 1} aria-label="Первая страница">
                        <IconArrowUp size={14} style={{ transform: 'rotate(-90deg)' }} />
                      </button>
                    </li>
                    <li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
                      <button className="page-link" onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1} aria-label="Предыдущая страница">
                        <IconArrowUp size={14} style={{ transform: 'rotate(-90deg)' }} />
                        <span className="d-none d-sm-inline ms-1">Назад</span>
                      </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)} aria-label={`Страница ${p}`} aria-current={currentPage === p ? 'page' : undefined}>{p}</button>
                          </li>
                        )
                      ));
                    })()}
                    <li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
                      <button className="page-link" onClick={() => setCurrentPage(currentPage + 1)} disabled={currentPage === totalPages} aria-label="Следующая страница">
                        <span className="d-none d-sm-inline me-1">Вперед</span>
                        <IconArrowDown size={14} style={{ transform: 'rotate(-90deg)' }} />
                      </button>
                    </li>
                    <li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
                      <button className="page-link" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages} aria-label="Последняя страница">
                        <IconArrowDown size={14} style={{ transform: 'rotate(-90deg)' }} />
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
            )}
            <S3MetaBar keys={["asns"]} />
          </div>
        </div>
      </div>

      <ConfirmDialog
        open={showDeleteModal}
        title={'Удалить ASN?'}
        message={!itemToDelete ? '' : `Вы уверены, что хотите удалить "${itemToDelete.asn}"? Это действие необратимо.`}
        confirmText={'Удалить'}
        cancelText={'Отмена'}
        destructive
        size={'sm'}
        onConfirm={executeDelete}
        onCancel={() => setShowDeleteModal(false)}
      />
      <ConfirmDiffModal
        show={confirmSaveOpen}
        diff={diff}
        onConfirm={performSave}
        onClose={() => setConfirmSaveOpen(false)}
      />
      <ImportModal
        show={importOpen}
        title={'Импорт ASN'}
        description={'Формат: ASN ПРОБЕЛ COMMUNITY'}
        parseLine={parseLine}
        validateItem={validateItem}
        onConfirm={applyImportedItems}
        onClose={() => setImportOpen(false)}
        sampleHeader={['asn','community']}
        placeholder={'12345 65000:100'}
      />
      <HistoryModal
        resource="asns"
        show={historyOpen}
        onClose={() => setHistoryOpen(false)}
        onRolledBack={() => fetchItems()}
      />
      <WsUpdateModal
        show={wsOpen}
        url={wsUrl}
        onClose={() => setWsOpen(false)}
      />
      <ConfirmDialog
        open={clearCommunitiesOpen}
        title={'Удалить записи community'}
        message={`Будут удалены все записи с community "${filterCommunity}". Действие НЕ сохраняет изменения автоматически.`}
        confirmText={'Удалить'}
        cancelText={'Отмена'}
        onConfirm={() => { setItems(prev => prev.filter(i => i.community !== filterCommunity)); setClearCommunitiesOpen(false); }}
        onCancel={() => setClearCommunitiesOpen(false)}
      />
      {/* datalist больше не нужен, т.к. используем кастомный автокомплит */}
    </>
  );
}

export default ASNsNewManager;