// Визуализация трейсов (FR-031)
let currentTraceId = null;
let currentTraceData = null;

// Поиск трейсов
async function searchTraces() {
    try {
        const traceId = document.getElementById('searchTraceId').value;
        const serviceName = document.getElementById('searchService').value;
        const status = document.getElementById('searchStatus').value;
        const minDuration = document.getElementById('minDuration').value;
        const maxDuration = document.getElementById('maxDuration').value;
        
        const params = new URLSearchParams();
        if (traceId) params.append('trace_id', traceId);
        if (serviceName) params.append('service_name', serviceName);
        if (status) params.append('status', status);
        if (minDuration) params.append('min_duration', minDuration);
        if (maxDuration) params.append('max_duration', maxDuration);
        params.append('limit', 100);
        
        const response = await fetch(`/api/v1/admin/traces/search?${params.toString()}`);
        const data = await response.json();
        
        if (data.success) {
            displayTracesList(data.traces || []);
        } else {
            document.getElementById('tracesList').innerHTML = 
                `<div class="alert alert-danger">Ошибка: ${data.error || 'Неизвестная ошибка'}</div>`;
        }
    } catch (error) {
        console.error('Ошибка при поиске трейсов:', error);
        document.getElementById('tracesList').innerHTML = 
            `<div class="alert alert-danger">Ошибка при поиске: ${error.message}</div>`;
    }
}

// Отображение списка трейсов
function displayTracesList(traces) {
    const container = document.getElementById('tracesList');
    
    if (traces.length === 0) {
        container.innerHTML = '<div class="alert alert-info">Трейсы не найдены</div>';
        return;
    }
    
    let html = '<div class="list-group">';
    traces.forEach(trace => {
        const startTime = new Date(trace.start_time * 1000).toLocaleString('ru-RU');
        const duration = trace.duration ? trace.duration.toFixed(2) : '0';
        const spanCount = trace.spans ? trace.spans.length : 0;
        
        html += `<a href="#" class="list-group-item list-group-item-action" onclick="loadTraceDetails('${trace.trace_id}'); return false;">`;
        html += `<div class="d-flex w-100 justify-content-between">`;
        html += `<h6 class="mb-1">Trace ID: <code>${trace.trace_id}</code></h6>`;
        html += `<small>${startTime}</small>`;
        html += `</div>`;
        html += `<p class="mb-1">`;
        html += `<span class="badge bg-info me-2">${trace.service_name || 'unknown'}</span>`;
        html += `<span class="badge bg-secondary me-2">${spanCount} spans</span>`;
        html += `<span class="badge bg-primary">${duration}ms</span>`;
        html += `</p>`;
        html += `</a>`;
    });
    html += '</div>';
    
    container.innerHTML = html;
}

// Загрузка деталей трейса
async function loadTraceDetails(traceId) {
    try {
        currentTraceId = traceId;
        document.getElementById('currentTraceId').textContent = traceId;
        document.getElementById('traceDetailsCard').style.display = 'block';
        
        // Показываем загрузку
        document.getElementById('traceSummaryContent').innerHTML = '<div class="text-center"><div class="spinner-border"></div></div>';
        
        const response = await fetch(`/api/v1/admin/traces/${traceId}/details`);
        const data = await response.json();
        
        if (data.success) {
            currentTraceData = data.trace;
            displayTraceSummary(data.trace);
            displayWaterfall(data.trace.waterfall_data || []);
            displayFlameGraph(data.trace.flame_graph_data || []);
            displaySpans(data.trace.spans || []);
        } else {
            document.getElementById('traceSummaryContent').innerHTML = 
                `<div class="alert alert-danger">Ошибка: ${data.error || 'Трейс не найден'}</div>`;
        }
    } catch (error) {
        console.error('Ошибка при загрузке деталей трейса:', error);
        document.getElementById('traceSummaryContent').innerHTML = 
            `<div class="alert alert-danger">Ошибка: ${error.message}</div>`;
    }
}

// Отображение сводки
function displayTraceSummary(trace) {
    const metrics = trace.metrics || {};
    const statuses = trace.statuses || {};
    
    let html = '<div class="row">';
    html += '<div class="col-md-6">';
    html += '<h6>Основная информация</h6>';
    html += `<p><strong>Trace ID:</strong> <code>${trace.trace_id}</code></p>`;
    html += `<p><strong>Сервис:</strong> ${trace.service_name || 'unknown'}</p>`;
    html += `<p><strong>Всего spans:</strong> ${trace.span_count || 0}</p>`;
    html += `<p><strong>Общая длительность:</strong> ${(trace.total_duration || 0).toFixed(2)}ms</p>`;
    html += '</div>';
    html += '<div class="col-md-6">';
    html += '<h6>Метрики</h6>';
    html += `<p><strong>Средняя длительность:</strong> ${(metrics.avg_duration || 0).toFixed(2)}ms</p>`;
    html += `<p><strong>Мин. длительность:</strong> ${(metrics.min_duration || 0).toFixed(2)}ms</p>`;
    html += `<p><strong>Макс. длительность:</strong> ${(metrics.max_duration || 0).toFixed(2)}ms</p>`;
    html += `<p><strong>Ошибок:</strong> ${metrics.error_count || 0}</p>`;
    html += `<p><strong>Успешных:</strong> ${metrics.ok_count || 0}</p>`;
    html += '</div>';
    html += '</div>';
    
    if (trace.statuses) {
        html += '<div class="mt-3"><h6>Статусы spans</h6>';
        html += '<div class="d-flex gap-2">';
        for (const [status, count] of Object.entries(trace.statuses)) {
            const badgeClass = status === 'error' ? 'danger' : status === 'ok' ? 'success' : 'secondary';
            html += `<span class="badge bg-${badgeClass}">${status}: ${count}</span>`;
        }
        html += '</div></div>';
    }
    
    document.getElementById('traceSummaryContent').innerHTML = html;
}

// Отображение Waterfall диаграммы
function displayWaterfall(waterfallData) {
    const container = document.getElementById('waterfallChart');
    if (!waterfallData || waterfallData.length === 0) {
        container.innerHTML = '<div class="alert alert-info">Нет данных для Waterfall диаграммы</div>';
        return;
    }
    
    // Находим максимальное время окончания
    const maxEnd = Math.max(...waterfallData.map(d => d.end || 0));
    const width = container.offsetWidth || 800;
    const barHeight = 30;
    const padding = 5;
    
    let html = `<svg width="${width}" height="${waterfallData.length * (barHeight + padding) + 50}">`;
    
    // Ось времени
    html += `<line x1="0" y1="0" x2="${width}" y2="0" stroke="#333" stroke-width="2"/>`;
    const timeSteps = 10;
    for (let i = 0; i <= timeSteps; i++) {
        const x = (i / timeSteps) * width;
        const time = (i / timeSteps) * maxEnd;
        html += `<line x1="${x}" y1="0" x2="${x}" y2="5" stroke="#333"/>`;
        html += `<text x="${x}" y="20" text-anchor="middle" font-size="10">${time.toFixed(1)}ms</text>`;
    }
    
    // Барчики
    waterfallData.forEach((item, index) => {
        const y = 40 + index * (barHeight + padding);
        const barWidth = (item.duration / maxEnd) * width;
        const barX = (item.start / maxEnd) * width;
        const color = item.status === 'error' ? '#dc3545' : item.status === 'ok' ? '#28a745' : '#6c757d';
        
        html += `<rect x="${barX}" y="${y}" width="${barWidth}" height="${barHeight}" fill="${color}" stroke="#333" stroke-width="1"/>`;
        html += `<text x="${barX + 5}" y="${y + barHeight / 2 + 4}" font-size="11" fill="white">${item.name} (${item.duration.toFixed(1)}ms)</text>`;
    });
    
    html += '</svg>';
    
    container.innerHTML = html;
}

// Отображение Flame Graph
function displayFlameGraph(flameData) {
    const container = document.getElementById('flameGraph');
    if (!flameData || flameData.length === 0) {
        container.innerHTML = '<div class="alert alert-info">Нет данных для Flame Graph</div>';
        return;
    }
    
    // Находим максимальное значение
    const maxValue = Math.max(...flameData.map(d => d.value || 0));
    const width = container.offsetWidth || 800;
    const height = 400;
    
    // Сортируем по времени начала
    const sortedData = [...flameData].sort((a, b) => (a.start || 0) - (b.start || 0));
    
    let html = `<svg width="${width}" height="${height}">`;
    
    // Строим Flame Graph
    sortedData.forEach((item, index) => {
        const x = ((item.start || 0) / maxValue) * width;
        const w = ((item.value || 0) / maxValue) * width;
        const h = 20;
        const y = index * (h + 2);
        
        if (y + h > height) return; // Пропускаем если не влезает
        
        const color = item.status === 'error' ? '#dc3545' : item.status === 'ok' ? '#28a745' : '#6c757d';
        
        html += `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${color}" stroke="#333" stroke-width="1"`;
        html += ` onclick="showSpanDetails('${item.span_id}')" style="cursor: pointer;"/>`;
        html += `<text x="${x + 5}" y="${y + h / 2 + 4}" font-size="10" fill="white">${item.name}</text>`;
    });
    
    html += '</svg>';
    
    container.innerHTML = html;
}

// Отображение списка spans
function displaySpans(spans) {
    const container = document.getElementById('traceSpansContent');
    
    if (spans.length === 0) {
        container.innerHTML = '<div class="alert alert-info">Нет spans</div>';
        return;
    }
    
    let html = '<div class="table-responsive"><table class="table table-sm">';
    html += '<thead><tr>';
    html += '<th>Span ID</th><th>Имя</th><th>Сервис</th><th>Длительность (мс)</th><th>Статус</th><th>Действия</th>';
    html += '</tr></thead><tbody>';
    
    spans.forEach(span => {
        const statusClass = span.status === 'error' ? 'danger' : span.status === 'ok' ? 'success' : 'secondary';
        html += '<tr>';
        html += `<td><code>${span.span_id || ''}</code></td>`;
        html += `<td>${span.name || ''}</td>`;
        html += `<td>${span.service_name || ''}</td>`;
        html += `<td>${(span.duration || 0).toFixed(2)}</td>`;
        html += `<td><span class="badge bg-${statusClass}">${span.status || 'unset'}</span></td>`;
        html += `<td><button class="btn btn-sm btn-info" onclick="showSpanDetails('${span.span_id}')">Детали</button></td>`;
        html += '</tr>';
    });
    
    html += '</tbody></table></div>';
    
    container.innerHTML = html;
}

// Показать детали span
function showSpanDetails(spanId) {
    if (!currentTraceData || !currentTraceData.spans) {
        alert('Данные трейса не загружены');
        return;
    }
    
    const span = currentTraceData.spans.find(s => s.span_id === spanId);
    if (!span) {
        alert('Span не найден');
        return;
    }
    
    let details = `Span ID: ${span.span_id}\n`;
    details += `Имя: ${span.name}\n`;
    details += `Сервис: ${span.service_name}\n`;
    details += `Длительность: ${(span.duration || 0).toFixed(2)}ms\n`;
    details += `Статус: ${span.status}\n`;
    if (span.error) {
        details += `Ошибка: ${span.error}\n`;
    }
    if (span.attributes) {
        details += `\nАтрибуты:\n${JSON.stringify(span.attributes, null, 2)}`;
    }
    
    alert(details);
}

// Экспорт трейса
function exportTrace(format) {
    if (!currentTraceId) {
        alert('Выберите трейс для экспорта');
        return;
    }
    
    window.location.href = `/api/v1/admin/traces/${currentTraceId}/export?format=${format}`;
}

// Инициализация
document.addEventListener('DOMContentLoaded', function() {
    // Загружаем список трейсов при загрузке страницы
    searchTraces();
});
