{% extends "base.html" %}

{% block title %}Dispatchers - Kamailio Monitor{% endblock %}
{% block page_title %}Dispatcher Infrastructure{% endblock %}

{% block content %}
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-number" id="totalDispatchers">0</div>
        <div class="stat-label">Total Dispatchers</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="activeDispatchers">0</div>
        <div class="stat-label">Active Dispatchers</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="avgLatency">0</div>
        <div class="stat-label">Avg Latency (ms)</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="totalTimeouts">0</div>
        <div class="stat-label">Total Timeouts</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="totalSets">0</div>
        <div class="stat-label">Dispatcher Sets</div>
    </div>
</div>

<div class="main-content">
    <div class="tables-container">
        <div class="table-container">
            <div class="table-header">
                <h2><i class="fas fa-network-wired"></i> All Dispatchers</h2>
                <small>Dispatcher infrastructure overview with <span id="dispatcherRefreshRate">5</span> second refresh</small>
            </div>
            <div class="table-wrapper">
                <table>
                    <thead>
                        <tr>
                            <th>Set ID</th>
                            <th>Name</th>
                            <th>IP Address</th>
                            <th>Status</th>
                            <th>Priority</th>
                            <th>Current Latency</th>
                            <th>Avg Latency</th>
                            <th>Max Latency</th>
                            <th>Timeouts</th>
                            <th>Flags</th>
                        </tr>
                    </thead>
                    <tbody id="dispatchersTable">
                        <tr>
                            <td colspan="10" class="loading">
                                <div class="loading-spinner"></div>
                                Loading dispatcher data...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <div id="dispatcherSetsContainer">
            <!-- Dispatcher sets will be populated here -->
        </div>
    </div>
    
    <div class="sidebar">
        <div class="chart-container">
            <h3><i class="fas fa-chart-pie"></i> Dispatcher Status</h3>
            <canvas id="dispatcherChart" width="250" height="250"></canvas>
        </div>
        
        <div class="info-panel">
            <h3><i class="fas fa-info-circle"></i> Dispatcher Metrics</h3>
            <div class="info-item">
                <span>Last Update:</span>
                <span id="dispatcherLastUpdate">Never</span>
            </div>
            <div class="info-item">
                <span>Refresh Rate:</span>
                <span id="dispatcherRefreshRateInfo">5 seconds</span>
            </div>
            <div class="info-item">
                <span>Best Latency:</span>
                <span id="bestLatency">N/A</span>
            </div>
            <div class="info-item">
                <span>Worst Latency:</span>
                <span id="worstLatency">N/A</span>
            </div>
            <div class="info-item">
                <span>Health Score:</span>
                <span id="healthScore">100%</span>
            </div>
            <div class="info-item">
                <span>Load Balance:</span>
                <span id="loadBalance">Optimal</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let dispatcherChart;

// Initialize Dispatcher Chart
function initDispatcherChart() {
    const ctx = document.getElementById('dispatcherChart');
    if (!ctx) return;
    
    if (dispatcherChart) {
        dispatcherChart.destroy();
    }
    
    dispatcherChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Active', 'Inactive'],
            datasets: [{
                data: [0, 0],
                backgroundColor: [
                    '#10b981',
                    '#ef4444'
                ],
                borderWidth: 0,
                hoverOffset: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        color: '#1e293b',
                        usePointStyle: true,
                        pointStyle: 'circle',
                        padding: 15,
                        font: {
                            family: 'Inter',
                            size: 12,
                            weight: '500'
                        }
                    }
                }
            }
        }
    });
}

// Update dispatcher data
window.updateDispatcherData = function(data) {
    const totalDispatchers = data.total_dispatchers || 0;
    const stats = data.stats || {};
    
    // Update stats
    animateNumber('totalDispatchers', totalDispatchers);
    animateNumber('activeDispatchers', stats.active || 0);
    animateNumber('avgLatency', Math.round(stats.avg_latency || 0));
    animateNumber('totalTimeouts', stats.total_timeouts || 0);
    animateNumber('totalSets', data.total_sets || 0);
    
    // Update dispatcher chart
    if (dispatcherChart && stats) {
        const inactiveDispatchers = totalDispatchers - (stats.active || 0);
        dispatcherChart.data.datasets[0].data = [stats.active || 0, inactiveDispatchers];
        dispatcherChart.update('active');
    }
    
    // Update dispatchers table
    updateDispatchersTable(data.dispatchers || []);
    
    // Update dispatcher sets
    updateDispatcherSets(data.sets || []);
    
    // Update latency metrics
    if (data.dispatchers && data.dispatchers.length > 0) {
        const latencies = data.dispatchers
            .filter(d => d.is_active && d.latency.avg > 0)
            .map(d => d.latency.avg);
        
        if (latencies.length > 0) {
            const bestLatency = Math.min(...latencies);
            const worstLatency = Math.max(...latencies);
            document.getElementById('bestLatency').textContent = `${bestLatency.toFixed(1)}ms`;
            document.getElementById('worstLatency').textContent = `${worstLatency.toFixed(1)}ms`;
            
            // Calculate health score
            const healthScore = Math.max(0, 100 - (stats.avg_latency / 10));
            document.getElementById('healthScore').textContent = `${Math.round(healthScore)}%`;
            
            // Update load balance status
            const loadBalance = document.getElementById('loadBalance');
            if (healthScore >= 80) {
                loadBalance.textContent = 'Optimal';
                loadBalance.style.color = 'var(--success)';
            } else if (healthScore >= 60) {
                loadBalance.textContent = 'Good';
                loadBalance.style.color = 'var(--info)';
            } else if (healthScore >= 40) {
                loadBalance.textContent = 'Poor';
                loadBalance.style.color = 'var(--warning)';
            } else {
                loadBalance.textContent = 'Critical';
                loadBalance.style.color = 'var(--error)';
            }
        }
    }
    
    // Update last update time
    const now = new Date();
    document.getElementById('dispatcherLastUpdate').textContent = now.toLocaleTimeString();
    
    // Update refresh rate display
    document.getElementById('dispatcherRefreshRateInfo').textContent = `${currentDispatcherInterval} seconds`;
    document.getElementById('dispatcherRefreshRate').textContent = currentDispatcherInterval;
};

function updateDispatchersTable(dispatchers) {
    const tbody = document.getElementById('dispatchersTable');

    if (!dispatchers || dispatchers.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="10" class="no-dispatchers">
                    <i class="fas fa-search" style="margin-right: 8px;"></i>
                    No dispatchers detected
                </td>
            </tr>
        `;
        return;
    }

    tbody.innerHTML = dispatchers.map((dispatcher, index) => {
        const currentLatencyClass = getLatencyClass(dispatcher.latency.current || 0);
        const avgLatencyClass = getLatencyClass(dispatcher.latency.avg);
        const maxLatencyClass = getLatencyClass(dispatcher.latency.max);
        const statusClass = getStatusClass(dispatcher.status);
        
        return `
            <tr>
                <td>${dispatcher.set_id}</td>
                <td><strong>${dispatcher.name}</strong></td>
                <td>${dispatcher.ip}</td>
                <td><span class="status ${statusClass}">${dispatcher.status}</span></td>
                <td><span class="priority-badge">P${dispatcher.priority}</span></td>
                <td><span class="latency-badge ${currentLatencyClass}">${(dispatcher.latency.current || 0).toFixed(1)}ms</span></td>
                <td><span class="latency-badge ${avgLatencyClass}">${dispatcher.latency.avg.toFixed(1)}ms</span></td>
                <td><span class="latency-badge ${maxLatencyClass}">${dispatcher.latency.max.toFixed(1)}ms</span></td>
                <td>${dispatcher.latency.timeout}</td>
                <td><code>${dispatcher.flags}</code></td>
            </tr>
        `;
    }).join('');
}

function updateDispatcherSets(sets) {
    const container = document.getElementById('dispatcherSetsContainer');
    
    if (!sets || sets.length === 0) {
        container.innerHTML = '';
        return;
    }

    container.innerHTML = sets.map(set => `
        <div class="dispatcher-set-card">
            <div class="dispatcher-set-header">
                <div class="dispatcher-set-title">${set.alias} (Set ${set.id})</div>
                <div class="dispatcher-set-stats">
                    <span>Total: <strong>${set.total_targets}</strong></span>
                    <span>Active: <strong>${set.active_targets}</strong></span>
                    <span>Avg Latency: <strong>${set.avg_latency.toFixed(1)}ms</strong></span>
                </div>
            </div>
            <div class="table-wrapper">
                <table>
                    <thead>
                        <tr>
                            <th>IP Address</th>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Priority</th>
                            <th>Current Latency</th>
                            <th>Avg Latency</th>
                            <th>Timeouts</th>
                            <th>Flags</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${set.targets.map(target => `
                            <tr>
                                <td>${target.ip}</td>
                                <td><strong>${target.name}</strong></td>
                                <td><span class="status ${getStatusClass(target.status)}">${target.status}</span></td>
                                <td><span class="priority-badge">P${target.priority}</span></td>
                                <td><span class="latency-badge ${getLatencyClass(target.latency.current || 0)}">${(target.latency.current || 0).toFixed(1)}ms</span></td>
                                <td><span class="latency-badge ${getLatencyClass(target.latency.avg)}">${target.latency.avg.toFixed(1)}ms</span></td>
                                <td>${target.latency.timeout}</td>
                                <td><code>${target.flags}</code></td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        </div>
    `).join('');
}

// Initialize chart when page loads
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(initDispatcherChart, 100);
});
</script>
{% endblock %}