{% extends "base.html" %}

{% block title %}Overview - Kamailio Monitor{% endblock %}
{% block page_title %}Overview Dashboard{% endblock %}

{% block content %}
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-number" id="overviewTotalCalls">0</div>
        <div class="stat-label">Active Calls</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="overviewTotalDispatchers">0</div>
        <div class="stat-label">Total Dispatchers</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="overviewActiveDispatchers">0</div>
        <div class="stat-label">Active Dispatchers</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="overviewAvgLatency">0</div>
        <div class="stat-label">Avg Latency (ms)</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="systemUptime">99.9</div>
        <div class="stat-label">Uptime (%)</div>
    </div>
</div>

<div class="overview-grid">
    <div class="overview-card calls">
        <i class="fas fa-phone"></i>
        <h4>Call Processing</h4>
        <div class="status-text status-operational" id="callProcessingStatus">Operational</div>
        <div class="sub-text">Processing: <span id="callsPerSecond">0</span> calls/sec</div>
    </div>
    
    <div class="overview-card dispatchers">
        <i class="fas fa-network-wired"></i>
        <h4>Dispatchers</h4>
        <div class="status-text status-operational" id="dispatcherProcessingStatus">Operational</div>
        <div class="sub-text">Load: <span id="dispatcherLoad">Balanced</span></div>
    </div>
    
    <div class="overview-card monitoring">
        <i class="fas fa-chart-line"></i>
        <h4>Monitoring</h4>
        <div class="status-text status-operational">Active</div>
        <div class="sub-text">Updates: <span id="updateFreq">Real-time</span></div>
    </div>
    
    <div class="overview-card security">
        <i class="fas fa-shield-alt"></i>
        <h4>Security</h4>
        <div class="status-text status-operational">Secured</div>
        <div class="sub-text">Auth: <span id="authStatus">Enabled</span></div>
    </div>
</div>

<div class="system-activity">
    <h4><i class="fas fa-activity"></i> System Activity</h4>
    <div class="activity-grid">
        <div class="activity-item">
            <span>Recent Calls:</span>
            <span id="recentCalls">0</span>
        </div>
        <div class="activity-item">
            <span>Success Rate:</span>
            <span id="successRate">100%</span>
        </div>
        <div class="activity-item">
            <span>Avg Response:</span>
            <span id="avgResponse">&lt; 1ms</span>
        </div>
        <div class="activity-item">
            <span>Network Status:</span>
            <span id="networkStatus">Stable</span>
        </div>
        <div class="activity-item">
            <span>Redis Interval:</span>
            <span id="redisIntervalDisplay">2 seconds</span>
        </div>
        <div class="activity-item">
            <span>Dispatcher Interval:</span>
            <span id="dispatcherIntervalDisplay">5 seconds</span>
        </div>
    </div>
</div>

<div class="main-content">
    <div class="chart-container">
        <h3><i class="fas fa-heartbeat"></i> System Health</h3>
        <div class="health-section">
            <div class="health-label">
                <span>Call System:</span>
                <span id="callSystemHealth">100%</span>
            </div>
            <div class="health-bar">
                <div class="health-fill health-excellent" id="callHealthBar" style="width: 100%"></div>
            </div>
        </div>
        
        <div class="health-section">
            <div class="health-label">
                <span>Dispatchers:</span>
                <span id="dispatcherSystemHealth">100%</span>
            </div>
            <div class="health-bar">
                <div class="health-fill health-excellent" id="dispatcherHealthBar" style="width: 100%"></div>
            </div>
        </div>
        
        <div class="health-section">
            <div class="health-label">
                <span>Network:</span>
                <span id="networkHealth">100%</span>
            </div>
            <div class="health-bar">
                <div class="health-fill health-excellent" id="networkHealthBar" style="width: 100%"></div>
            </div>
        </div>
        
        <div class="health-section">
            <div class="health-label">
                <span>Overall:</span>
                <span id="overallHealth">100%</span>
            </div>
            <div class="health-bar">
                <div class="health-fill health-excellent" id="overallHealthBar" style="width: 100%"></div>
            </div>
        </div>
    </div>
    
    <div class="info-panel">
        <h3><i class="fas fa-cog"></i> Performance Metrics</h3>
        <div class="info-item">
            <span>System Uptime:</span>
            <span id="systemUptimeText">99.9%</span>
        </div>
        <div class="info-item">
            <span>Response Time:</span>
            <span id="systemResponseTime">&lt; 1ms</span>
        </div>
        <div class="info-item">
            <span>System Load:</span>
            <span id="systemLoad">Normal</span>
        </div>
        <div class="info-item">
            <span>Memory Usage:</span>
            <span id="memoryUsage">Optimal</span>
        </div>
        <div class="info-item">
            <span>CPU Usage:</span>
            <span id="cpuUsage">Efficient</span>
        </div>
        <div class="info-item">
            <span>Last Call Update:</span>
            <span id="lastCallUpdate">Never</span>
        </div>
        <div class="info-item">
            <span>Last Dispatcher Update:</span>
            <span id="lastDispatcherUpdate">Never</span>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Overview specific functionality
window.updateCallData = function(data) {
    const totalCalls = data.total_calls || 0;
    const stats = data.stats || {};
    
    // Update overview stats
    animateNumber('overviewTotalCalls', totalCalls);
    animateNumber('recentCalls', totalCalls);
    
    // Update call processing status
    const callStatus = document.getElementById('callProcessingStatus');
    if (totalCalls > 0) {
        callStatus.textContent = 'Operational';
        callStatus.className = 'status-text status-operational';
    } else {
        callStatus.textContent = 'Idle';
        callStatus.className = 'status-text status-warning';
    }
    
    // Update calls per second (simulated)
    document.getElementById('callsPerSecond').textContent = Math.floor(Math.random() * 5) + 1;
    
    // Update last call update time
    const now = new Date();
    document.getElementById('lastCallUpdate').textContent = now.toLocaleTimeString();
    
    // Update call system health
    const callHealth = totalCalls > 0 ? 100 : 80;
    document.getElementById('callSystemHealth').textContent = `${callHealth}%`;
    updateHealthBar('callHealthBar', callHealth);
    
    // Update Redis interval display
    document.getElementById('redisIntervalDisplay').textContent = `${currentRedisInterval} seconds`;
};

window.updateDispatcherData = function(data) {
    const totalDispatchers = data.total_dispatchers || 0;
    const activeDispatchers = data.stats?.active || 0;
    const avgLatency = Math.round(data.stats?.avg_latency || 0);
    
    // Update overview stats
    animateNumber('overviewTotalDispatchers', totalDispatchers);
    animateNumber('overviewActiveDispatchers', activeDispatchers);
    animateNumber('overviewAvgLatency', avgLatency);
    
    // Update dispatcher processing status
    const dispatcherStatus = document.getElementById('dispatcherProcessingStatus');
    const healthPercentage = totalDispatchers > 0 ? Math.round((activeDispatchers / totalDispatchers) * 100) : 0;
    
    if (healthPercentage >= 80) {
        dispatcherStatus.textContent = 'Operational';
        dispatcherStatus.className = 'status-text status-operational';
        document.getElementById('dispatcherLoad').textContent = 'Balanced';
    } else if (healthPercentage >= 50) {
        dispatcherStatus.textContent = 'Degraded';
        dispatcherStatus.className = 'status-text status-warning';
        document.getElementById('dispatcherLoad').textContent = 'Unbalanced';
    } else {
        dispatcherStatus.textContent = 'Critical';
        dispatcherStatus.className = 'status-text status-error';
        document.getElementById('dispatcherLoad').textContent = 'Failed';
    }
    
    // Update last dispatcher update time
    const now = new Date();
    document.getElementById('lastDispatcherUpdate').textContent = now.toLocaleTimeString();
    
    // Update dispatcher system health
    document.getElementById('dispatcherSystemHealth').textContent = `${healthPercentage}%`;
    updateHealthBar('dispatcherHealthBar', healthPercentage);
    
    // Update network health based on latency
    const networkHealth = avgLatency < 100 ? 100 : Math.max(50, 100 - (avgLatency / 10));
    document.getElementById('networkHealth').textContent = `${Math.round(networkHealth)}%`;
    updateHealthBar('networkHealthBar', networkHealth);
    
    // Update overall health
    const overallHealth = Math.round((healthPercentage + networkHealth + (totalDispatchers > 0 ? 100 : 80)) / 3);
    document.getElementById('overallHealth').textContent = `${overallHealth}%`;
    updateHealthBar('overallHealthBar', overallHealth);
    
    // Update dispatcher interval display
    document.getElementById('dispatcherIntervalDisplay').textContent = `${currentDispatcherInterval} seconds`;
    
    // Update system metrics
    document.getElementById('avgResponse').textContent = `${avgLatency}ms`;
    document.getElementById('networkStatus').textContent = avgLatency < 100 ? 'Stable' : avgLatency < 200 ? 'Slow' : 'Unstable';
};

function updateHealthBar(barId, percentage) {
    const bar = document.getElementById(barId);
    if (!bar) return;
    
    bar.style.width = `${percentage}%`;
    
    // Update bar color based on percentage
    bar.className = 'health-fill';
    if (percentage >= 80) {
        bar.classList.add('health-excellent');
    } else if (percentage >= 60) {
        bar.classList.add('health-good');
    } else if (percentage >= 40) {
        bar.classList.add('health-warning');
    } else {
        bar.classList.add('health-poor');
    }
}

// Update refresh frequency display
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('updateFreq').textContent = `Redis: ${currentRedisInterval}s, Dispatcher: ${currentDispatcherInterval}s`;
});
</script>
{% endblock %}