import { useState, useEffect, useRef, useMemo } from 'react';
import api from './lib/api.js';
import {
  IconPlus,
  IconTrash,
  IconDownload,
  IconAlertCircle,
  IconCheck,
  IconUpload,
  IconDeviceFloppy,
  IconInfoCircle,
  IconCircleCheck,
  IconCopy,
  IconSearch,
  IconLink,
  IconHash,
  IconWorld,
  IconFileExport,
  IconSortAscending,
  IconSortDescending,
  IconX
} from '@tabler/icons-react';
import PageHeader from './components/PageHeader.jsx';
import TableSkeleton from './components/TableSkeleton.jsx';
import EmptyState from './components/EmptyState.jsx';
import ImportModal from './components/ImportModal.jsx';
import ErrorAlert from './components/ErrorAlert.jsx';
import LastSaved from './components/LastSaved.jsx';

function AutoUrlManager() {
  const [urls, setUrls] = useState([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [processing, setProcessing] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [touched, setTouched] = useState({});
  const [importOpen, setImportOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [filterValid, setFilterValid] = useState('all'); // 'all' | 'valid' | 'invalid'
  const [sortField, setSortField] = useState(null); // 'url' | 'community' | null
  const [sortDir, setSortDir] = useState('asc'); // 'asc' | 'desc'
  const [lastSaved, setLastSaved] = useState(null);
  const [selectedRows, setSelectedRows] = useState(new Set());
  const searchInputRef = useRef(null);

  useEffect(() => {
    fetchUrls();
  }, []);

  const fetchUrls = async () => {
    try {
      setLoading(true);
      setError('');
      const response = await api.get('/auto-urls');
      setUrls(response.data || []);
    } catch (err) {
      console.error('Error fetching URLs:', err);
      setError('Ошибка при загрузке URL-адресов');
    } finally {
      setLoading(false);
    }
  };

  const addUrl = () => {
    setUrls([...urls, { url: '', community: '' }]);
  };

  const clearEmptyRows = () => {
    setUrls(urls.filter(u => u != null && (u.url || u.community)));
  };

  const removeUrl = (index) => {
    setUrls(urls.filter((_, i) => i !== index));
  };

  const updateUrl = (index, field, value) => {
    const newUrls = [...urls];
    newUrls[index][field] = value;
    setUrls(newUrls);
    setTouched(prev => ({ ...prev, [index]: true }));
  };

  const isValidHttpUrl = (value) => {
    try {
      const u = new URL(value);
      return u.protocol === 'http:' || u.protocol === 'https:';
    } catch {
      return false;
    }
  };

  const isValidCommunity = (value) => {
    return /^[0-9]+$/.test(String(value).trim());
  };

  const getRowValidity = (row) => ({
    url: row.url ? isValidHttpUrl(row.url) : false,
    community: row.community ? isValidCommunity(row.community) : false
  });

  const hasAtLeastOneValidRow = urls.some(u => isValidHttpUrl(u.url) && isValidCommunity(u.community));

  const saveUrls = async () => {
    try {
      setSaving(true);
      setError('');
      setSuccess('');
      
      // Validate URLs (пустой список тоже валиден - для очистки)
      const validUrls = urls
        .filter(u => u != null && isValidHttpUrl(u.url) && isValidCommunity(u.community))
        .map(u => ({ url: u.url.trim(), community: String(u.community).trim() }));

      await api.post('/auto-urls', { urls: validUrls });
      setUrls(validUrls);
      setLastSaved(new Date().toISOString());
      setSuccess(validUrls.length === 0 ? 'Список URL очищен' : 'URL-адреса сохранены успешно');
      setSelectedRows(new Set());
      setTimeout(() => setSuccess(''), 3000);
    } catch (err) {
      console.error('Error saving URLs:', err);
      setError('Ошибка при сохранении URL-адресов');
    } finally {
      setSaving(false);
    }
  };

  const processUrls = async () => {
    try {
      setProcessing(true);
      setError('');
      setSuccess('');
      
      const response = await api.post('/auto-urls/process');
      setSuccess(response.data?.message || 'URL-адреса успешно обработаны');
      setTimeout(() => setSuccess(''), 5000);
    } catch (err) {
      console.error('Error processing URLs:', err);
      setError(err.response?.data?.message || err.response?.data || 'Ошибка при обработке URL-адресов');
    } finally {
      setProcessing(false);
    }
  };

  const copyExample = async () => {
    const text = 'https://test.com/ips.txt 555\nhttps://example.com/blacklist.txt 666';
    try {
      if (navigator.clipboard) {
        await navigator.clipboard.writeText(text);
      } else {
        const ta = document.createElement('textarea');
        ta.value = text;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
      }
      setSuccess('Пример формата скопирован');
      setTimeout(() => setSuccess(''), 2000);
    } catch (e) {
      setError('Не удалось скопировать пример');
      setTimeout(() => setError(''), 2000);
    }
  };

  // Статистика
  const stats = useMemo(() => {
    const valid = urls.filter(u => u != null && isValidHttpUrl(u.url) && isValidCommunity(u.community)).length;
    const invalid = urls.length - valid;
    return { total: urls.length, valid, invalid };
  }, [urls]);

  // Фильтрация и сортировка
  const filteredAndSortedUrls = useMemo(() => {
    let filtered = urls.filter(u => {
      if (!u) return false;
      const matchesSearch = !searchTerm || 
        u.url.toLowerCase().includes(searchTerm.toLowerCase()) ||
        String(u.community).toLowerCase().includes(searchTerm.toLowerCase());
      if (!matchesSearch) return false;
      
      if (filterValid === 'valid') {
        return isValidHttpUrl(u.url) && isValidCommunity(u.community);
      } else if (filterValid === 'invalid') {
        return !isValidHttpUrl(u.url) || !isValidCommunity(u.community);
      }
      return true;
    });

    if (sortField) {
      filtered = [...filtered].sort((a, b) => {
        const aVal = String(a[sortField] || '').toLowerCase();
        const bVal = String(b[sortField] || '').toLowerCase();
        const comparison = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
        return sortDir === 'asc' ? comparison : -comparison;
      });
    }

    return filtered;
  }, [urls, searchTerm, filterValid, sortField, sortDir]);

  const toggleSort = (field) => {
    if (sortField === field) {
      setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDir('asc');
    }
  };

  const toggleSelectRow = (originalIndex) => {
    setSelectedRows(prev => {
      const next = new Set(prev);
      if (next.has(originalIndex)) next.delete(originalIndex);
      else next.add(originalIndex);
      return next;
    });
  };

  const toggleSelectAll = () => {
    const allOriginalIndices = filteredAndSortedUrls.map(url => urls.findIndex(u => u === url));
    const allSelected = allOriginalIndices.every(idx => selectedRows.has(idx));
    
    if (allSelected) {
      setSelectedRows(new Set());
    } else {
      setSelectedRows(new Set(allOriginalIndices));
    }
  };

  const deleteSelected = () => {
    setUrls(prev => prev.filter((_, i) => !selectedRows.has(i)));
    setSelectedRows(new Set());
  };

  const exportUrls = () => {
    const text = urls
      .filter(u => u != null && isValidHttpUrl(u.url) && isValidCommunity(u.community))
      .map(u => `${u.url.trim()} ${String(u.community).trim()}`)
      .join('\n');
    const blob = new Blob([text], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `auto-urls-${new Date().toISOString().split('T')[0]}.txt`;
    a.click();
    URL.revokeObjectURL(url);
  };

  // Горячие клавиши
  useEffect(() => {
    const handleKeyDown = (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();
        // Разрешить сохранение: либо пустой список, либо есть валидные строки
        const canSave = urls.length === 0 || hasAtLeastOneValidRow;
        if (canSave && !saving && !processing) {
          saveUrls();
        }
      }
      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
        e.preventDefault();
        searchInputRef.current?.focus();
      }
      if (e.key === 'Escape') {
        setSearchTerm('');
        setFilterValid('all');
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [urls.length, hasAtLeastOneValidRow, saving, processing, saveUrls]);

  return (
    <div>
      <PageHeader
        title="Автоматические URL"
        pretitle="Управление автоматическими URL-адресами для загрузки списков IP и доменов"
        actions={(
          <div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div className="btn-list">
              <button 
                className="btn btn-outline-primary"
                type="button"
                onClick={() => setImportOpen(true)}
                disabled={saving || processing}
                title="Импорт из текста или файла"
              >
                <IconUpload className="me-1" /> Импорт
              </button>
              <button 
                className="btn btn-primary"
                type="button"
                onClick={addUrl}
                disabled={saving || processing}
                title="Добавить строку"
              >
                <IconPlus className="me-1" /> Добавить URL
              </button>
            </div>
            <div className="ms-auto btn-list">
              {stats.total > 0 && (
                <button
                  className="btn btn-outline-secondary"
                  type="button"
                  onClick={exportUrls}
                  disabled={saving || processing || stats.valid === 0}
                  title="Экспорт валидных URL"
                >
                  <IconFileExport className="me-1" /> Экспорт
                </button>
              )}
              <button
                className="btn btn-outline-secondary"
                type="button"
                onClick={clearEmptyRows}
                disabled={saving || processing || urls.length === 0}
                title="Удалить пустые строки"
              >
                Очистить пустые
              </button>
              <button
                className="btn btn-outline-primary"
                type="button"
                onClick={saveUrls}
                disabled={saving || processing || (urls.length > 0 && !hasAtLeastOneValidRow)}
                title="Сохранить список URL (Ctrl+S)"
              >
                {saving ? (
                  <>
                    <span className="spinner-border spinner-border-sm me-2" role="status" />
                    Сохранение...
                  </>
                ) : (
                  <>
                    <IconDeviceFloppy className="me-1" /> Сохранить
                  </>
                )}
              </button>
              <button
                className="btn btn-primary"
                type="button"
                onClick={processUrls}
                disabled={saving || processing || !hasAtLeastOneValidRow}
                title="Загрузить и обработать все URL"
              >
                {processing ? (
                  <>
                    <span className="spinner-border spinner-border-sm me-2" role="status" />
                    Обработка...
                  </>
                ) : (
                  <>
                    <IconDownload className="me-1" /> Загрузить списки
                  </>
                )}
              </button>
            </div>
          </div>
        )}
      />

      {/* Уведомления */}
      {error && (
        <ErrorAlert 
          message={error} 
          onClose={() => setError('')}
          onRetry={fetchUrls}
        />
      )}
      {success && (
        <div className="alert alert-success alert-dismissible" role="alert">
          <div className="d-flex">
            <IconCheck className="me-2" />
            {success}
          </div>
          <button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
        </div>
      )}

      {/* Статистика */}
      {!loading && urls.length > 0 && (
        <div className="row g-3 mb-4">
          <div className="col-md-3">
            <div className="card h-100">
              <div className="card-body d-flex align-items-center">
                <span className="avatar avatar-lg me-3 bg-blue-lt text-blue border-0">
                  <IconWorld size={32} />
                </span>
                <div>
                  <div className="h3 mb-0 fw-bold">{stats.total}</div>
                  <div className="text-muted small">Всего URL</div>
                </div>
              </div>
            </div>
          </div>
          <div className="col-md-3">
            <div className="card h-100">
              <div className="card-body d-flex align-items-center">
                <span className="avatar avatar-lg me-3 bg-green-lt text-green border-0">
                  <IconCheck size={32} />
                </span>
                <div>
                  <div className="h3 mb-0 fw-bold">{stats.valid}</div>
                  <div className="text-muted small">Валидных</div>
                </div>
              </div>
            </div>
          </div>
          <div className="col-md-3">
            <div className="card h-100">
              <div className="card-body d-flex align-items-center">
                <span className="avatar avatar-lg me-3 bg-red-lt text-red border-0">
                  <IconAlertCircle size={32} />
                </span>
                <div>
                  <div className="h3 mb-0 fw-bold">{stats.invalid}</div>
                  <div className="text-muted small">Невалидных</div>
                </div>
              </div>
            </div>
          </div>
          <div className="col-md-3">
            <div className="card h-100">
              <div className="card-body d-flex align-items-center">
                <span className="avatar avatar-lg me-3 bg-azure-lt text-azure border-0">
                  <IconLink size={32} />
                </span>
                <div>
                  <div className="h3 mb-0 fw-bold">{filteredAndSortedUrls.length}</div>
                  <div className="text-muted small">Отображается</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="card">
        <div className="card-header">
          <div className="row align-items-center g-2">
            <div className="col">
              <h3 className="card-title mb-0">
                <IconLink className="me-2" />
                Список URL-адресов
              </h3>
            </div>
            <div className="col-auto">
              <div className="input-icon" style={{ maxWidth: 320 }}>
                <span className="input-icon-addon">
                  <IconSearch size={16} />
                </span>
                <input
                  ref={searchInputRef}
                  type="text"
                  className="form-control"
                  placeholder="Поиск (Ctrl+F)..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
                {searchTerm && (
                  <button
                    className="btn btn-icon btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y me-1"
                    type="button"
                    onClick={() => setSearchTerm('')}
                    title="Очистить поиск"
                  >
                    <IconX size={16} />
                  </button>
                )}
              </div>
            </div>
            <div className="col-auto">
              <div className="btn-group btn-group-sm">
                <button
                  className={`btn ${filterValid === 'all' ? 'btn-primary' : 'btn-outline-secondary'}`}
                  onClick={() => setFilterValid('all')}
                  title="Все записи"
                >
                  Все
                </button>
                <button
                  className={`btn ${filterValid === 'valid' ? 'btn-success' : 'btn-outline-success'}`}
                  onClick={() => setFilterValid('valid')}
                  title="Только валидные"
                >
                  <IconCheck size={14} className="me-1" />
                  Валидные
                </button>
                <button
                  className={`btn ${filterValid === 'invalid' ? 'btn-danger' : 'btn-outline-danger'}`}
                  onClick={() => setFilterValid('invalid')}
                  title="Только невалидные"
                >
                  <IconAlertCircle size={14} className="me-1" />
                  Невалидные
                </button>
              </div>
            </div>
          </div>
        </div>
        <div className="card-body">
          {loading ? (
            <TableSkeleton rows={6} cols={4} />
          ) : urls.length === 0 ? (
            <EmptyState
              icon={IconAlertCircle}
              title="Нет добавленных URL-адресов"
              description="Добавьте хотя бы одну строку с корректным URL и числовым community."
              size="default"
              action={(
                <button 
                  className="btn btn-primary" 
                  onClick={addUrl}
                  disabled={saving || processing}
                >
                  <IconPlus className="me-1" />
                  Добавить первый URL
                </button>
              )}
              secondaryAction={(
                <button 
                  className="btn btn-outline-primary"
                  onClick={() => setImportOpen(true)}
                  disabled={saving || processing}
                >
                  <IconUpload className="me-1" />
                  Импорт
                </button>
              )}
            />
          ) : filteredAndSortedUrls.length === 0 ? (
            <EmptyState
              icon={IconSearch}
              title="Ничего не найдено"
              description={searchTerm ? `По запросу "${searchTerm}" ничего не найдено` : 'Нет записей, соответствующих выбранному фильтру'}
              size="default"
              action={(
                <button 
                  className="btn btn-outline-secondary"
                  onClick={() => {
                    setSearchTerm('');
                    setFilterValid('all');
                  }}
                >
                  <IconX className="me-1" />
                  Сбросить фильтры
                </button>
              )}
            />
          ) : (
            <>
              {selectedRows.size > 0 && (
                <div className="alert alert-info d-flex justify-content-between align-items-center mb-3">
                  <span>Выбрано записей: <strong>{selectedRows.size}</strong></span>
                  <div className="btn-list">
                    <button
                      className="btn btn-sm btn-outline-danger"
                      onClick={deleteSelected}
                    >
                      <IconTrash size={14} className="me-1" />
                      Удалить выбранные
                    </button>
                    <button
                      className="btn btn-sm btn-outline-secondary"
                      onClick={() => setSelectedRows(new Set())}
                    >
                      <IconX size={14} className="me-1" />
                      Отменить выбор
                    </button>
                  </div>
                </div>
              )}
              <div className="table-responsive">
                <table className="table card-table table-vcenter table-nowrap mb-0">
                  <thead>
                    <tr>
                      <th style={{ width: 40 }}>
                        <input
                          type="checkbox"
                          className="form-check-input"
                          checked={filteredAndSortedUrls.length > 0 && filteredAndSortedUrls.every(url => {
                            const idx = urls.findIndex(u => u === url);
                            return selectedRows.has(idx);
                          })}
                          onChange={toggleSelectAll}
                          title="Выбрать все"
                        />
                      </th>
                      <th 
                        className="cursor-pointer"
                        onClick={() => toggleSort('url')}
                        style={{ minWidth: 300 }}
                      >
                        <div className="d-flex align-items-center">
                          <IconLink size={16} className="me-1" />
                          URL
                          {sortField === 'url' && (
                            sortDir === 'asc' ? <IconSortAscending size={16} className="ms-1" /> : <IconSortDescending size={16} className="ms-1" />
                          )}
                        </div>
                      </th>
                      <th 
                        className="cursor-pointer"
                        onClick={() => toggleSort('community')}
                        style={{ minWidth: 150 }}
                      >
                        <div className="d-flex align-items-center">
                          <IconHash size={16} className="me-1" />
                          Community
                          {sortField === 'community' && (
                            sortDir === 'asc' ? <IconSortAscending size={16} className="ms-1" /> : <IconSortDescending size={16} className="ms-1" />
                          )}
                        </div>
                      </th>
                      <th style={{ width: 100 }}>Статус</th>
                      <th className="text-end" style={{ width: 100 }}>Действия</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredAndSortedUrls.map((url, displayIndex) => {
                      const originalIndex = urls.findIndex(u => u === url);
                      const v = getRowValidity(url);
                      const isValid = v.url && v.community;
                      const isInvalid = touched[originalIndex] && (!v.url || !v.community);
                      const isSelected = selectedRows.has(originalIndex);
                      
                      return (
                        <tr 
                          key={originalIndex}
                          className={isSelected ? 'table-active' : ''}
                        >
                          <td>
                            <input
                              type="checkbox"
                              className="form-check-input"
                              checked={isSelected}
                              onChange={() => toggleSelectRow(originalIndex)}
                            />
                          </td>
                          <td>
                            <div className="input-group input-group-sm">
                              <span className="input-group-text bg-transparent border-0 p-0 me-1">
                                {v.url ? (
                                  <IconCheck size={16} className="text-success" />
                                ) : touched[originalIndex] ? (
                                  <IconAlertCircle size={16} className="text-danger" />
                                ) : null}
                              </span>
                              <input
                                type="text"
                                className={`form-control${isInvalid && !v.url ? ' is-invalid' : ''}`}
                                placeholder="https://example.com/ips.txt"
                                value={url.url}
                                onChange={(e) => updateUrl(originalIndex, 'url', e.target.value)}
                                disabled={saving || processing}
                              />
                            </div>
                            {isInvalid && !v.url && (
                              <div className="invalid-feedback d-block">Укажите корректный http/https URL</div>
                            )}
                          </td>
                          <td>
                            <div className="input-group input-group-sm">
                              <span className="input-group-text bg-transparent border-0 p-0 me-1">
                                {v.community ? (
                                  <IconCheck size={16} className="text-success" />
                                ) : touched[originalIndex] ? (
                                  <IconAlertCircle size={16} className="text-danger" />
                                ) : null}
                              </span>
                              <input
                                type="text"
                                className={`form-control${isInvalid && !v.community ? ' is-invalid' : ''}`}
                                placeholder="555"
                                value={url.community}
                                onChange={(e) => updateUrl(originalIndex, 'community', e.target.value)}
                                disabled={saving || processing}
                              />
                            </div>
                            {isInvalid && !v.community && (
                              <div className="invalid-feedback d-block">Только цифры, например 555</div>
                            )}
                          </td>
                          <td>
                            {isValid ? (
                              <span className="badge bg-green-lt text-green">
                                <IconCheck size={12} className="me-1" />
                                Валидно
                              </span>
                            ) : isInvalid ? (
                              <span className="badge bg-red-lt text-red">
                                <IconAlertCircle size={12} className="me-1" />
                                Ошибка
                              </span>
                            ) : (
                              <span className="badge bg-secondary-lt text-secondary">Не заполнено</span>
                            )}
                          </td>
                          <td className="text-end">
                            <button
                              className="btn btn-outline-danger btn-icon btn-sm"
                              onClick={() => removeUrl(originalIndex)}
                              disabled={saving || processing}
                              title="Удалить"
                            >
                              <IconTrash size={16} />
                            </button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </>
          )}
        </div>
        <div className="card-footer">
          <div className="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div className="d-flex align-items-center gap-2">
              {urls.length > 0 && (
                <>
                  <span className="badge bg-blue-lt text-blue">Всего: {stats.total}</span>
                  <span className="badge bg-green-lt text-green">Валидных: {stats.valid}</span>
                  {stats.invalid > 0 && (
                    <span className="badge bg-red-lt text-red">Невалидных: {stats.invalid}</span>
                  )}
                </>
              )}
              {lastSaved && (
                <LastSaved timestamp={lastSaved} variant="compact" />
              )}
            </div>
            <div className="text-muted small">
              Введите http/https URL и числовой community. Невалидные поля подсвечиваются.
            </div>
          </div>
        </div>
      </div>

      <div className="card mt-4">
        <div className="card-header">
          <h3 className="card-title"><IconInfoCircle className="me-2" />Информация</h3>
        </div>
        <div className="card-body">
          <div className="row g-4">
            <div className="col-md-6">
              <h4 className="mb-3">Как это работает</h4>
              <ul className="list-unstyled m-0">
                <li className="d-flex align-items-start mb-2">
                  <span className="text-blue me-2"><IconCircleCheck size={18} /></span>
                  <span>Добавьте URL-адреса, которые содержат списки IP-адресов или доменных имён</span>
                </li>
                <li className="d-flex align-items-start mb-2">
                  <span className="text-blue me-2"><IconCircleCheck size={18} /></span>
                  <span>Укажите community для каждого URL (только цифры)</span>
                </li>
                <li className="d-flex align-items-start mb-2">
                  <span className="text-blue me-2"><IconCircleCheck size={18} /></span>
                  <span>Нажмите «Загрузить списки» для обработки всех URL</span>
                </li>
                <li className="d-flex align-items-start">
                  <span className="text-blue me-2"><IconCircleCheck size={18} /></span>
                  <span>IP-диапазоны попадут в <code>bgp_data/ips.txt</code>, домены — в <code>bgp_data/domains_community.txt</code></span>
                </li>
              </ul>
            </div>
            <div className="col-md-6">
              <h4 className="mb-3">Формат файла</h4>
              <div className="card card-sm">
                <div className="card-header">
                  <h3 className="card-title">Пример</h3>
                  <div className="card-actions">
                    <button className="btn btn-outline-secondary btn-sm" onClick={copyExample}>
                      <IconCopy className="me-1" />
                      Копировать
                    </button>
                  </div>
                </div>
                <div className="card-body">
                  <pre
                    className="m-0 p-2 bg-dark text-light rounded"
                    style={{
                      fontFamily:
                        "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
                      fontSize: '0.875rem',
                      overflow: 'auto'
                    }}
                  >
                    <code>{`https://test.com/ips.txt 555\nhttps://example.com/blacklist.txt 666`}</code>
                  </pre>
                  <div className="text-muted small mt-2">Каждая строка: URL и community через пробел</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Модальное окно импорта */}
      <ImportModal
        show={importOpen}
        title="Импорт URL + community"
        description="Формат строк: URL ПРОБЕЛ COMMUNITY. Например: https://example.com/ips.txt 555"
        sampleHeader={['url', 'community']}
        placeholder={'https://example.com/ips.txt 555\nhttps://test.com/domains.txt 666'}
        parseLine={(line) => {
          const [u, c] = String(line).split(/\s+/);
          return { url: u || '', community: c || '' };
        }}
        validateItem={(obj) => Boolean(obj?.url) && Boolean(obj?.community)}
        onConfirm={(items) => {
          setUrls(prev => [...prev, ...items]);
          setImportOpen(false);
        }}
        onClose={() => setImportOpen(false)}
      />
    </div>
  );
}

export default AutoUrlManager;