/**
 * JavaScript для управления маршрутизацией (FR-023)
 */

let rules = [];
let sortableInstance = null;

// Загрузка правил
async function loadRules() {
    try {
        const response = await fetch('/api/admin/routing/rules');
        const data = await response.json();
        if (data.success) {
            rules = data.rules;
            renderRules();
            initSortable();
        } else {
            showAlert('Ошибка загрузки правил: ' + data.error, 'danger');
        }
    } catch (error) {
        showAlert('Ошибка при загрузке правил: ' + error.message, 'danger');
    }
}

// Рендеринг правил с поддержкой drag-and-drop
function renderRules() {
    const container = document.getElementById('rulesTableContainer');
    if (rules.length === 0) {
        container.innerHTML = '<p class="text-muted">Правила маршрутизации отсутствуют</p>';
        return;
    }
    
    let html = '<table class="admin-table table table-striped table-hover">';
    html += '<thead><tr>';
    html += '<th style="width: 30px;"><i class="bi bi-grip-vertical"></i></th>';
    html += '<th>Модуль</th><th>Сервис</th><th>Приоритет</th><th>Методы</th><th>Хосты</th><th>Действия</th>';
    html += '</tr></thead>';
    html += '<tbody id="rulesTableBody">';
    
    rules.forEach((rule, index) => {
        html += `<tr data-index="${index}" class="sortable-row">`;
        html += '<td class="drag-handle" style="cursor: move;"><i class="bi bi-grip-vertical text-muted"></i></td>';
        html += `<td><code>${escapeHtml(rule.module)}</code></td>`;
        html += `<td><code>${escapeHtml(rule.service)}</code></td>`;
        html += `<td><span class="badge bg-info">${rule.priority || 0}</span></td>`;
        html += `<td>${rule.methods ? rule.methods.map(m => `<span class="badge bg-secondary">${escapeHtml(m)}</span>`).join(' ') : '<span class="text-muted">Все</span>'}</td>`;
        html += `<td>${rule.hosts ? rule.hosts.map(h => `<span class="badge bg-light text-dark">${escapeHtml(h)}</span>`).join(' ') : '<span class="text-muted">Все</span>'}</td>`;
        html += '<td>';
        html += `<button class="btn btn-sm btn-outline-danger" onclick="deleteRule(${index})" title="Удалить"><i class="bi bi-trash"></i></button>`;
        html += '</td>';
        html += '</tr>';
    });
    
    html += '</tbody></table>';
    container.innerHTML = html;
}

// Инициализация Sortable для drag-and-drop
function initSortable() {
    const tbody = document.getElementById('rulesTableBody');
    if (!tbody || sortableInstance) {
        if (sortableInstance) {
            sortableInstance.destroy();
        }
    }
    
    if (tbody && typeof Sortable !== 'undefined') {
        sortableInstance = new Sortable(tbody, {
            handle: '.drag-handle',
            animation: 150,
            onEnd: async function(evt) {
                const oldIndex = evt.oldIndex;
                const newIndex = evt.newIndex;
                
                if (oldIndex !== newIndex) {
                    // Обновляем порядок в массиве
                    const movedRule = rules.splice(oldIndex, 1)[0];
                    rules.splice(newIndex, 0, movedRule);
                    
                    // Отправляем новый порядок на сервер
                    await reorderRules();
                }
            }
        });
    }
}

// Изменение порядка правил
async function reorderRules() {
    try {
        const order = rules.map((_, index) => index);
        const response = await fetch('/api/v1/admin/routing/rules/reorder', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ order: order })
        });
        
        const data = await response.json();
        if (data.success) {
            showAlert('Порядок правил обновлен', 'success');
            await loadRules();
        } else {
            showAlert('Ошибка изменения порядка: ' + data.error, 'danger');
            await loadRules(); // Восстанавливаем исходный порядок
        }
    } catch (error) {
        showAlert('Ошибка при изменении порядка: ' + error.message, 'danger');
        await loadRules(); // Восстанавливаем исходный порядок
    }
}

// Добавление правила
async function addRule() {
    const module = document.getElementById('ruleModule').value.trim();
    const service = document.getElementById('ruleService').value.trim();
    const priority = parseInt(document.getElementById('rulePriority').value) || 0;
    const methodsStr = document.getElementById('ruleMethods').value.trim();
    const hostsStr = document.getElementById('ruleHosts').value.trim();
    
    if (!module || !service) {
        showAlert('Модуль и сервис обязательны для заполнения', 'warning');
        return;
    }
    
    const ruleData = {
        module: module,
        service: service,
        priority: priority
    };
    
    if (methodsStr) {
        ruleData.methods = methodsStr.split(',').map(m => m.trim()).filter(m => m);
    }
    
    if (hostsStr) {
        ruleData.hosts = hostsStr.split(',').map(h => h.trim()).filter(h => h);
    }
    
    try {
        const response = await fetch('/api/admin/routing/rules', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(ruleData)
        });
        
        const data = await response.json();
        if (data.success) {
            showAlert('Правило успешно добавлено', 'success');
            const modal = bootstrap.Modal.getInstance(document.getElementById('addRuleModal'));
            modal.hide();
            document.getElementById('addRuleForm').reset();
            await loadRules();
        } else {
            showAlert('Ошибка добавления правила: ' + data.error, 'danger');
        }
    } catch (error) {
        showAlert('Ошибка при добавлении правила: ' + error.message, 'danger');
    }
}

// Удаление правила
async function deleteRule(index) {
    if (!confirm('Вы уверены, что хотите удалить это правило?')) {
        return;
    }
    
    try {
        const response = await fetch(`/api/admin/routing/rules/${index}`, {
            method: 'DELETE'
        });
        
        const data = await response.json();
        if (data.success) {
            showAlert('Правило успешно удалено', 'success');
            await loadRules();
        } else {
            showAlert('Ошибка удаления правила: ' + data.error, 'danger');
        }
    } catch (error) {
        showAlert('Ошибка при удалении правила: ' + error.message, 'danger');
    }
}

// Предпросмотр правил
function showPreviewModal() {
    const modal = new bootstrap.Modal(document.getElementById('previewModal'));
    modal.show();
}

async function previewRules() {
    const module = document.getElementById('previewModule').value.trim();
    const method = document.getElementById('previewMethod').value;
    const host = document.getElementById('previewHost').value.trim();
    const headersStr = document.getElementById('previewHeaders').value.trim();
    
    if (!module) {
        showAlert('Модуль обязателен для заполнения', 'warning');
        return;
    }
    
    let headers = {};
    if (headersStr) {
        try {
            headers = JSON.parse(headersStr);
        } catch (e) {
            showAlert('Неверный формат JSON для заголовков', 'danger');
            return;
        }
    }
    
    try {
        const response = await fetch('/api/v1/admin/routing/preview', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                module: module,
                method: method,
                host: host || null,
                headers: headers
            })
        });
        
        const data = await response.json();
        if (data.success) {
            const resultDiv = document.getElementById('previewResult');
            const resultContent = document.getElementById('previewResultContent');
            resultDiv.style.display = 'block';
            resultContent.textContent = JSON.stringify(data.preview, null, 2);
        } else {
            showAlert('Ошибка предпросмотра: ' + data.error, 'danger');
        }
    } catch (error) {
        showAlert('Ошибка при предпросмотре: ' + error.message, 'danger');
    }
}

// Тестирование маршрута
function showTestModal() {
    const modal = new bootstrap.Modal(document.getElementById('testModal'));
    modal.show();
}

async function testRoute() {
    const module = document.getElementById('testModule').value.trim();
    const method = document.getElementById('testMethod').value;
    const host = document.getElementById('testHost').value.trim();
    const headersStr = document.getElementById('testHeaders').value.trim();
    
    if (!module) {
        showAlert('Модуль обязателен для заполнения', 'warning');
        return;
    }
    
    let headers = {};
    if (headersStr) {
        try {
            headers = JSON.parse(headersStr);
        } catch (e) {
            showAlert('Неверный формат JSON для заголовков', 'danger');
            return;
        }
    }
    
    try {
        const response = await fetch('/api/v1/admin/routing/test', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                module: module,
                method: method,
                host: host || null,
                headers: headers
            })
        });
        
        const data = await response.json();
        if (data.success) {
            const resultDiv = document.getElementById('testResult');
            const resultContent = document.getElementById('testResultContent');
            resultDiv.style.display = 'block';
            
            const testResult = data.test_result;
            let html = '';
            
            if (testResult.matched_service) {
                html += `<div class="alert alert-success">`;
                html += `<strong>✓ Маршрут найден!</strong><br>`;
                html += `Сервис: <code>${escapeHtml(testResult.matched_service)}</code><br>`;
                html += `Приоритет: ${testResult.matched_rule.priority}`;
                html += `</div>`;
            } else {
                html += `<div class="alert alert-warning">`;
                html += `<strong>⚠ Маршрут не найден</strong><br>`;
                html += `Нет подходящего правила для модуля <code>${escapeHtml(module)}</code>`;
                html += `</div>`;
            }
            
            html += `<h6 class="mt-3">Детали проверки:</h6>`;
            html += `<ul class="list-group">`;
            testResult.all_matches.forEach((match, idx) => {
                html += `<li class="list-group-item">`;
                html += `<strong>Правило ${idx + 1}:</strong> ${match.rule.module} → ${match.rule.service} (приоритет: ${match.rule.priority})<br>`;
                html += `<small class="text-muted">${match.matched ? '✓ Совпадает' : '✗ Не совпадает'}</small><br>`;
                html += `<small>${match.reasons.join(', ')}</small>`;
                html += `</li>`;
            });
            html += `</ul>`;
            
            resultContent.innerHTML = html;
        } else {
            showAlert('Ошибка тестирования: ' + data.error, 'danger');
        }
    } catch (error) {
        showAlert('Ошибка при тестировании: ' + error.message, 'danger');
    }
}

// История изменений
function showHistoryModal() {
    const modal = new bootstrap.Modal(document.getElementById('historyModal'));
    modal.show();
    loadHistory();
}

async function loadHistory() {
    const container = document.getElementById('historyContainer');
    container.innerHTML = '<div class="text-center"><div class="spinner-border text-primary"></div></div>';
    
    try {
        const response = await fetch('/api/v1/admin/routing/history?limit=50');
        const data = await response.json();
        
        if (data.success && data.history.length > 0) {
            let html = '<div class="admin-table-wrap admin-table-wrap--modal"><table class="admin-table table">';
            html += '<thead><tr><th>Версия</th><th>Тип изменения</th><th>Описание</th><th>Дата</th><th>Действия</th></tr></thead>';
            html += '<tbody>';
            
            data.history.forEach(entry => {
                const date = new Date(entry.created_at);
                html += '<tr>';
                html += `<td><span class="badge bg-primary">v${entry.version}</span></td>`;
                html += `<td><span class="badge bg-${getChangeTypeColor(entry.change_type)}">${escapeHtml(entry.change_type)}</span></td>`;
                html += `<td>${escapeHtml(entry.description || '—')}</td>`;
                html += `<td>${date.toLocaleString('ru-RU')}</td>`;
                html += '<td>';
                html += `<button class="btn btn-sm btn-outline-info me-1" onclick="viewVersion(${entry.version})" title="Просмотр"><i class="bi bi-eye"></i></button>`;
                html += `<button class="btn btn-sm btn-outline-warning" onclick="restoreVersion(${entry.version})" title="Откатить"><i class="bi bi-arrow-counterclockwise"></i></button>`;
                html += '</td>';
                html += '</tr>';
            });
            
            html += '</tbody></table></div>';
            container.innerHTML = html;
        } else {
            container.innerHTML = '<p class="text-muted text-center">История изменений пуста</p>';
        }
    } catch (error) {
        container.innerHTML = `<div class="alert alert-danger">Ошибка загрузки истории: ${error.message}</div>`;
    }
}

function getChangeTypeColor(type) {
    const colors = {
        'create': 'success',
        'update': 'info',
        'delete': 'danger',
        'reorder': 'warning'
    };
    return colors[type] || 'secondary';
}

async function viewVersion(version) {
    try {
        const response = await fetch(`/api/v1/admin/routing/history/${version}`);
        const data = await response.json();
        
        if (data.success) {
            // Создаем модальное окно для просмотра версии
            const modalHtml = `
                <div class="modal fade" id="versionViewModal" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Версия ${version}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <p><strong>Тип изменения:</strong> <span class="badge bg-${getChangeTypeColor(data.change_type)}">${escapeHtml(data.change_type)}</span></p>
                                <p><strong>Описание:</strong> ${escapeHtml(data.description || '—')}</p>
                                <p><strong>Дата:</strong> ${new Date(data.created_at).toLocaleString('ru-RU')}</p>
                                <hr>
                                <h6>Правила:</h6>
                                <pre class="admin-json-preview">${escapeHtml(JSON.stringify(data.rules, null, 2))}</pre>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            // Удаляем предыдущее модальное окно, если есть
            const existingModal = document.getElementById('versionViewModal');
            if (existingModal) {
                existingModal.remove();
            }
            
            // Добавляем новое модальное окно
            document.body.insertAdjacentHTML('beforeend', modalHtml);
            const modal = new bootstrap.Modal(document.getElementById('versionViewModal'));
            modal.show();
            
            // Удаляем модальное окно после закрытия
            document.getElementById('versionViewModal').addEventListener('hidden.bs.modal', function() {
                this.remove();
            });
        } else {
            showAlert('Ошибка получения версии: ' + data.error, 'danger');
        }
    } catch (error) {
        showAlert('Ошибка при получении версии: ' + error.message, 'danger');
    }
}

async function restoreVersion(version) {
    if (!confirm(`Вы уверены, что хотите откатить правила к версии ${version}?`)) {
        return;
    }
    
    try {
        const response = await fetch(`/api/v1/admin/routing/history/${version}/restore`, {
            method: 'POST'
        });
        
        const data = await response.json();
        if (data.success) {
            showAlert(`Правила успешно восстановлены до версии ${version}`, 'success');
            await loadRules();
            const modal = bootstrap.Modal.getInstance(document.getElementById('historyModal'));
            modal.hide();
        } else {
            showAlert('Ошибка отката: ' + data.error, 'danger');
        }
    } catch (error) {
        showAlert('Ошибка при откате: ' + error.message, 'danger');
    }
}

// Утилиты
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function showAlert(message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    const container = document.querySelector('.container-fluid') || document.querySelector('.container');
    container.insertBefore(alertDiv, container.firstChild);
    setTimeout(() => alertDiv.remove(), 5000);
}

// Загружаем правила при загрузке страницы
document.addEventListener('DOMContentLoaded', loadRules);
