{% extends "base.html" %}

{% block title %}Статистика - AWM{% endblock %}

{% block content %}
<div class="card">
    <div class="toolbar">
        <h2>📊 Статистика</h2>
        <div style="display: flex; gap: 10px;">
            <button class="btn btn-primary" onclick="refreshStats()">
                <span>🔄</span> Обновить
            </button>
            <a href="/" class="btn btn-secondary">
                <span>←</span> Назад
            </a>
        </div>
    </div>
    
    <div id="stats-content" style="padding: 20px;">
        <div class="loading">Загрузка статистики...</div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Функция для API вызовов
    async function apiCall(method, url, data = null) {
        const options = {
            method: method,
            headers: {
                'Content-Type': 'application/json'
            }
        };
        
        if (data) {
            options.body = JSON.stringify(data);
        }
        
        const response = await fetch(url, options);
        
        if (!response.ok) {
            const error = await response.json().catch(() => ({ detail: response.statusText }));
            throw new Error(error.detail || `HTTP ${response.status}`);
        }
        
        return await response.json();
    }

    // Обновление статистики в header
    async function updateStats() {
        try {
            const statPlaybooks = document.getElementById('stat-playbooks');
            const statInventories = document.getElementById('stat-inventories');
            const statRuns = document.getElementById('stat-runs');
            
            if (!statPlaybooks || !statInventories || !statRuns) {
                console.warn('Stats elements not found, skipping update');
                return;
            }
            
            const [playbooksData, inventoriesData, runsData] = await Promise.all([
                apiCall('GET', '/api/playbooks'),
                apiCall('GET', '/api/inventories'),
                apiCall('GET', '/api/runs')
            ]);
            
            statPlaybooks.textContent = playbooksData.playbooks?.length || 0;
            statInventories.textContent = inventoriesData.inventories?.length || 0;
            statRuns.textContent = runsData.runs?.length || 0;
        } catch (error) {
            console.error('Error updating stats:', error);
            // Устанавливаем значения по умолчанию при ошибке
            const statPlaybooks = document.getElementById('stat-playbooks');
            const statInventories = document.getElementById('stat-inventories');
            const statRuns = document.getElementById('stat-runs');
            
            if (statPlaybooks) statPlaybooks.textContent = '-';
            if (statInventories) statInventories.textContent = '-';
            if (statRuns) statRuns.textContent = '-';
        }
    }

    async function loadStatistics() {
        try {
            const [runsData, playbooksData, inventoriesData] = await Promise.all([
                fetch('/api/runs').then(r => r.json()),
                fetch('/api/playbooks').then(r => r.json()),
                fetch('/api/inventories').then(r => r.json())
            ]);
            
            const runs = runsData.runs || [];
            const playbooks = playbooksData.playbooks || [];
            const inventories = inventoriesData.inventories || [];
            
            // Подсчет статистики по запускам
            const totalRuns = runs.length;
            const successfulRuns = runs.filter(r => r.status === 'success').length;
            const failedRuns = runs.filter(r => r.status === 'failed').length;
            const runningRuns = runs.filter(r => r.status === 'running' || r.status === 'pending').length;
            const successRate = totalRuns > 0 ? ((successfulRuns / totalRuns) * 100).toFixed(1) : 0;
            
            // Статистика по плейбукам
            const mostUsedPlaybook = getMostUsedItem(runs, 'playbook_name');
            const playbookUsage = getUsageStats(runs, 'playbook_name');
            
            // Статистика по инвентори
            const mostUsedInventory = getMostUsedItem(runs, 'inventory_name');
            const inventoryUsage = getUsageStats(runs, 'inventory_name');
            
            // Время выполнения
            const avgDuration = calculateAverageDuration(runs);
            
            const statsHtml = `
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px;">
                    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px;">
                        <div style="font-size: 36px; font-weight: bold; margin-bottom: 10px;">${totalRuns}</div>
                        <div style="font-size: 14px; opacity: 0.9;">Всего запусков</div>
                    </div>
                    <div style="background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; padding: 20px; border-radius: 10px;">
                        <div style="font-size: 36px; font-weight: bold; margin-bottom: 10px;">${successfulRuns}</div>
                        <div style="font-size: 14px; opacity: 0.9;">Успешных</div>
                    </div>
                    <div style="background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%); color: white; padding: 20px; border-radius: 10px;">
                        <div style="font-size: 36px; font-weight: bold; margin-bottom: 10px;">${failedRuns}</div>
                        <div style="font-size: 14px; opacity: 0.9;">С ошибками</div>
                    </div>
                    <div style="background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); color: white; padding: 20px; border-radius: 10px;">
                        <div style="font-size: 36px; font-weight: bold; margin-bottom: 10px;">${runningRuns}</div>
                        <div style="font-size: 14px; opacity: 0.9;">Выполняется</div>
                    </div>
                    <div style="background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); color: white; padding: 20px; border-radius: 10px;">
                        <div style="font-size: 36px; font-weight: bold; margin-bottom: 10px;">${successRate}%</div>
                        <div style="font-size: 14px; opacity: 0.9;">Успешность</div>
                    </div>
                </div>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                    <div style="background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px;">
                        <h3 style="margin-top: 0; margin-bottom: 15px;">📝 Плейбуки</h3>
                        <div style="font-size: 24px; font-weight: bold; margin-bottom: 10px;">${playbooks.length}</div>
                        <div style="color: #718096; font-size: 14px;">Всего плейбуков</div>
                        ${mostUsedPlaybook ? `<div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #e2e8f0;">
                            <div style="font-size: 12px; color: #718096; margin-bottom: 5px;">Самый используемый:</div>
                            <div style="font-weight: 600;">${mostUsedPlaybook.name}</div>
                            <div style="font-size: 12px; color: #718096;">${mostUsedPlaybook.count} запусков</div>
                        </div>` : ''}
                    </div>
                    
                    <div style="background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px;">
                        <h3 style="margin-top: 0; margin-bottom: 15px;">📋 Инвентори</h3>
                        <div style="font-size: 24px; font-weight: bold; margin-bottom: 10px;">${inventories.length}</div>
                        <div style="color: #718096; font-size: 14px;">Всего инвентори</div>
                        ${mostUsedInventory ? `<div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #e2e8f0;">
                            <div style="font-size: 12px; color: #718096; margin-bottom: 5px;">Самый используемый:</div>
                            <div style="font-weight: 600;">${mostUsedInventory.name}</div>
                            <div style="font-size: 12px; color: #718096;">${mostUsedInventory.count} запусков</div>
                        </div>` : ''}
                    </div>
                    
                    <div style="background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px;">
                        <h3 style="margin-top: 0; margin-bottom: 15px;">⏱️ Время выполнения</h3>
                        ${avgDuration ? `<div style="font-size: 24px; font-weight: bold; margin-bottom: 10px;">${avgDuration}</div>
                        <div style="color: #718096; font-size: 14px;">Среднее время</div>` : '<div style="color: #718096;">Недостаточно данных</div>'}
                    </div>
                </div>
                
                ${playbookUsage.length > 0 ? `
                <div style="margin-top: 30px; background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px;">
                    <h3 style="margin-top: 0; margin-bottom: 20px;">📊 Использование плейбуков</h3>
                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        ${playbookUsage.slice(0, 10).map(item => `
                            <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #f7fafc; border-radius: 5px;">
                                <div style="font-weight: 600;">${item.name || 'Unknown'}</div>
                                <div style="display: flex; align-items: center; gap: 10px;">
                                    <div style="width: 100px; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden;">
                                        <div style="height: 100%; width: ${(item.count / totalRuns) * 100}%; background: #4299e1;"></div>
                                    </div>
                                    <div style="font-weight: 600; min-width: 40px; text-align: right;">${item.count}</div>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                </div>
                ` : ''}
            `;
            
            document.getElementById('stats-content').innerHTML = statsHtml;
        } catch (error) {
            document.getElementById('stats-content').innerHTML = `<div class="empty-state">Ошибка: ${error.message}</div>`;
        }
    }
    
    function getMostUsedItem(runs, field) {
        const counts = {};
        runs.forEach(run => {
            const value = run[field];
            if (value) {
                counts[value] = (counts[value] || 0) + 1;
            }
        });
        
        const entries = Object.entries(counts);
        if (entries.length === 0) return null;
        
        const [name, count] = entries.reduce((a, b) => a[1] > b[1] ? a : b);
        return { name, count };
    }
    
    function getUsageStats(runs, field) {
        const counts = {};
        runs.forEach(run => {
            const value = run[field];
            if (value) {
                counts[value] = (counts[value] || 0) + 1;
            }
        });
        
        return Object.entries(counts)
            .map(([name, count]) => ({ name, count }))
            .sort((a, b) => b.count - a.count);
    }
    
    function calculateAverageDuration(runs) {
        const completedRuns = runs.filter(r => r.started_at && r.finished_at);
        if (completedRuns.length === 0) return null;
        
        let totalSeconds = 0;
        completedRuns.forEach(run => {
            const start = new Date(run.started_at);
            const end = new Date(run.finished_at);
            totalSeconds += (end - start) / 1000;
        });
        
        const avgSeconds = totalSeconds / completedRuns.length;
        
        if (avgSeconds < 60) {
            return `${Math.round(avgSeconds)} сек`;
        } else if (avgSeconds < 3600) {
            return `${Math.round(avgSeconds / 60)} мин`;
        } else {
            const hours = Math.floor(avgSeconds / 3600);
            const minutes = Math.round((avgSeconds % 3600) / 60);
            return `${hours} ч ${minutes} мин`;
        }
    }
    
    function refreshStats() {
        document.getElementById('stats-content').innerHTML = '<div class="loading">Загрузка статистики...</div>';
        loadStatistics();
    }
    
    // Загружаем статистику при загрузке страницы
    loadStatistics();
    updateStats();
</script>
{% endblock %}