{% extends 'base.html' %}
{% load static %}

{% block title %}System Monitoring - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Apexchart css -->
<link href="{% static 'plugins/apexcharts/apexcharts.css' %}" rel="stylesheet" />

<!-- INTERNAL Data table css -->
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatable/responsive.bootstrap5.css' %}" rel="stylesheet" />

<style>
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}
.status-healthy { background-color: #28a745; }
.status-warning { background-color: #ffc107; }
.status-critical { background-color: #dc3545; }
.status-unknown { background-color: #6c757d; }

.metric-card {
    transition: transform 0.2s;
}
.metric-card:hover {
    transform: translateY(-2px);
}
</style>
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">System Monitoring</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Monitoring</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 - System Status Overview -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">System Status Overview</h3>
                <div class="card-options">
                    <button type="button" class="btn btn-sm btn-primary" id="refresh-status">
                        <i class="fa fa-refresh"></i> Refresh
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="text-center">
                            <span class="status-indicator status-{{ system_status.overall|default:'unknown' }}"></span>
                            <h6>Overall Status</h6>
                            <h4 class="text-{{ system_status.overall|default:'muted' }}">{{ system_status.overall_text|default:'Unknown' }}</h4>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="text-center">
                            <span class="status-indicator status-{{ system_status.database|default:'unknown' }}"></span>
                            <h6>Database</h6>
                            <h4 class="text-{{ system_status.database|default:'muted' }}">{{ system_status.database_text|default:'Unknown' }}</h4>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="text-center">
                            <span class="status-indicator status-{{ system_status.redis|default:'unknown' }}"></span>
                            <h6>Redis</h6>
                            <h4 class="text-{{ system_status.redis|default:'muted' }}">{{ system_status.redis_text|default:'Unknown' }}</h4>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="text-center">
                            <span class="status-indicator status-{{ system_status.celery|default:'unknown' }}"></span>
                            <h6>Celery</h6>
                            <h4 class="text-{{ system_status.celery|default:'muted' }}">{{ system_status.celery_text|default:'Unknown' }}</h4>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="text-center">
                            <span class="status-indicator status-{{ system_status.storage|default:'unknown' }}"></span>
                            <h6>Storage</h6>
                            <h4 class="text-{{ system_status.storage|default:'muted' }}">{{ system_status.storage_text|default:'Unknown' }}</h4>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="text-center">
                            <span class="status-indicator status-{{ system_status.api|default:'unknown' }}"></span>
                            <h6>API</h6>
                            <h4 class="text-{{ system_status.api|default:'muted' }}">{{ system_status.api_text|default:'Unknown' }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->

<!-- ROW-2 - System Metrics -->
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="card metric-card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">CPU Usage</h6>
                        <h2 class="mb-0 number-font">{{ metrics.cpu_usage|default:0 }}%</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-microchip fa-3x text-primary"></i>
                        </div>
                    </div>
                </div>
                <div class="progress progress-sm mt-2">
                    <div class="progress-bar bg-primary" style="width: {{ metrics.cpu_usage|default:0 }}%"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card metric-card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Memory Usage</h6>
                        <h2 class="mb-0 number-font">{{ metrics.memory_usage|default:0 }}%</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-memory fa-3x text-success"></i>
                        </div>
                    </div>
                </div>
                <div class="progress progress-sm mt-2">
                    <div class="progress-bar bg-success" style="width: {{ metrics.memory_usage|default:0 }}%"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card metric-card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Disk Usage</h6>
                        <h2 class="mb-0 number-font">{{ metrics.disk_usage|default:0 }}%</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-hdd fa-3x text-warning"></i>
                        </div>
                    </div>
                </div>
                <div class="progress progress-sm mt-2">
                    <div class="progress-bar bg-warning" style="width: {{ metrics.disk_usage|default:0 }}%"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card metric-card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Network I/O</h6>
                        <h2 class="mb-0 number-font">{{ metrics.network_io|default:0 }} MB/s</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-network-wired fa-3x text-info"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12">In: {{ metrics.network_in|default:0 }} MB/s | Out: {{ metrics.network_out|default:0 }} MB/s</span>
            </div>
        </div>
    </div>
</div>
<!-- ROW-2 END -->

<!-- ROW-3 - Performance Charts -->
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">System Performance</h3>
                <div class="card-options">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-outline-primary active" data-metric="cpu">CPU</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" data-metric="memory">Memory</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" data-metric="disk">Disk</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" data-metric="network">Network</button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="performance-chart"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Active Processes</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Process</th>
                                <th>CPU</th>
                                <th>Memory</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for process in active_processes %}
                            <tr>
                                <td>{{ process.name }}</td>
                                <td>{{ process.cpu }}%</td>
                                <td>{{ process.memory }}%</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center">No process data available</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-3 END -->

<!-- ROW-4 - Service Status and Logs -->
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Service Status</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="service-status">
                        <thead>
                            <tr>
                                <th>Service</th>
                                <th>Status</th>
                                <th>Uptime</th>
                                <th>Last Check</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for service in services %}
                            <tr>
                                <td>{{ service.name }}</td>
                                <td>
                                    <span class="status-indicator status-{{ service.status }}"></span>
                                    {{ service.status_text }}
                                </td>
                                <td>{{ service.uptime|default:'-' }}</td>
                                <td>{{ service.last_check|date:"M d, H:i" }}</td>
                                <td>
                                    <button class="btn btn-sm btn-primary" onclick="checkService('{{ service.name }}')">Check</button>
                                    {% if service.status != 'healthy' %}
                                    <button class="btn btn-sm btn-warning" onclick="restartService('{{ service.name }}')">Restart</button>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center">No service data available</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Recent Alerts</h3>
                <div class="card-options">
                    <button type="button" class="btn btn-sm btn-secondary" onclick="clearAlerts()">Clear All</button>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="alerts-table">
                        <thead>
                            <tr>
                                <th>Time</th>
                                <th>Type</th>
                                <th>Message</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for alert in recent_alerts %}
                            <tr class="{% if alert.severity == 'critical' %}table-danger{% elif alert.severity == 'warning' %}table-warning{% endif %}">
                                <td>{{ alert.timestamp|date:"M d, H:i" }}</td>
                                <td>{{ alert.type }}</td>
                                <td>{{ alert.message }}</td>
                                <td>
                                    {% if alert.resolved %}
                                    <span class="badge bg-success">Resolved</span>
                                    {% else %}
                                    <span class="badge bg-danger">Active</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center">No recent alerts</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-4 END -->

<!-- ROW-5 - System Information -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">System Information</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-3 col-md-6">
                        <h6>Server Information</h6>
                        <ul class="list-unstyled">
                            <li><strong>Hostname:</strong> {{ system_info.hostname|default:'-' }}</li>
                            <li><strong>OS:</strong> {{ system_info.os|default:'-' }}</li>
                            <li><strong>Kernel:</strong> {{ system_info.kernel|default:'-' }}</li>
                            <li><strong>Architecture:</strong> {{ system_info.architecture|default:'-' }}</li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <h6>Hardware Information</h6>
                        <ul class="list-unstyled">
                            <li><strong>CPU Cores:</strong> {{ system_info.cpu_cores|default:'-' }}</li>
                            <li><strong>Total Memory:</strong> {{ system_info.total_memory|default:'-' }} GB</li>
                            <li><strong>Total Disk:</strong> {{ system_info.total_disk|default:'-' }} GB</li>
                            <li><strong>Network Interfaces:</strong> {{ system_info.network_interfaces|default:'-' }}</li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <h6>Application Information</h6>
                        <ul class="list-unstyled">
                            <li><strong>Django Version:</strong> {{ system_info.django_version|default:'-' }}</li>
                            <li><strong>Python Version:</strong> {{ system_info.python_version|default:'-' }}</li>
                            <li><strong>App Version:</strong> {{ system_info.app_version|default:'-' }}</li>
                            <li><strong>Debug Mode:</strong> {{ system_info.debug_mode|default:'-' }}</li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <h6>Uptime Information</h6>
                        <ul class="list-unstyled">
                            <li><strong>System Uptime:</strong> {{ system_info.system_uptime|default:'-' }}</li>
                            <li><strong>App Uptime:</strong> {{ system_info.app_uptime|default:'-' }}</li>
                            <li><strong>Last Restart:</strong> {{ system_info.last_restart|default:'-' }}</li>
                            <li><strong>Load Average:</strong> {{ system_info.load_average|default:'-' }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-5 END -->
{% endblock %}

{% block extra_js %}
<!-- INTERNAL Apexchart js -->
<script src="{% static 'js/apexcharts.js' %}"></script>

<!-- INTERNAL Data tables js-->
<script src="{% static 'plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.bootstrap5.js' %}"></script>
<script src="{% static 'plugins/datatable/dataTables.responsive.min.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize DataTables
    $('#service-status').DataTable({
        "pageLength": 10,
        "searching": false,
        "info": false,
        "lengthChange": false
    });
    
    $('#alerts-table').DataTable({
        "pageLength": 10,
        "order": [[ 0, "desc" ]],
        "searching": false,
        "info": false,
        "lengthChange": false
    });
    
    // Initialize performance chart
    initializePerformanceChart();
    
    // Auto-refresh every 30 seconds
    setInterval(function() {
        refreshMetrics();
    }, 30000);
    
    // Event handlers
    $('#refresh-status').on('click', function() {
        refreshStatus();
    });
    
    $('.btn-group button').on('click', function() {
        $('.btn-group button').removeClass('active');
        $(this).addClass('active');
        updatePerformanceChart($(this).data('metric'));
    });
});

function initializePerformanceChart() {
    var options = {
        chart: {
            height: 350,
            type: 'line',
            toolbar: {
                show: false
            },
            animations: {
                enabled: true,
                easing: 'easeinout',
                speed: 800
            }
        },
        series: [{
            name: 'CPU Usage',
            data: {{ chart_data.cpu|default:"[]" }}
        }],
        xaxis: {
            categories: {{ chart_data.timestamps|default:"[]" }}
        },
        yaxis: {
            min: 0,
            max: 100,
            labels: {
                formatter: function(val) {
                    return val + '%';
                }
            }
        },
        colors: ['#6259ca'],
        stroke: {
            curve: 'smooth',
            width: 3
        },
        markers: {
            size: 4
        }
    };
    
    window.performanceChart = new ApexCharts(document.querySelector("#performance-chart"), options);
    window.performanceChart.render();
}

function updatePerformanceChart(metric) {
    $.ajax({
        url: '/monitoring/chart-data/',
        data: {
            'metric': metric
        },
        success: function(data) {
            window.performanceChart.updateSeries([{
                name: metric.charAt(0).toUpperCase() + metric.slice(1) + ' Usage',
                data: data.values
            }]);
            window.performanceChart.updateOptions({
                xaxis: {
                    categories: data.timestamps
                }
            });
        }
    });
}

function refreshStatus() {
    $('#refresh-status').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Refreshing...');
    
    $.ajax({
        url: '/monitoring/refresh-status/',
        method: 'POST',
        success: function(data) {
            if (data.success) {
                location.reload();
            } else {
                alert('Failed to refresh status: ' + data.error);
            }
        },
        error: function() {
            alert('Failed to refresh status');
        },
        complete: function() {
            $('#refresh-status').prop('disabled', false).html('<i class="fa fa-refresh"></i> Refresh');
        }
    });
}

function refreshMetrics() {
    $.ajax({
        url: '/monitoring/metrics/',
        success: function(data) {
            // Update metric cards
            updateMetricCard('cpu_usage', data.cpu_usage);
            updateMetricCard('memory_usage', data.memory_usage);
            updateMetricCard('disk_usage', data.disk_usage);
            updateMetricCard('network_io', data.network_io);
        }
    });
}

function updateMetricCard(metric, value) {
    var card = $('[data-metric="' + metric + '"]');
    if (card.length) {
        card.find('.number-font').text(value + (metric.includes('usage') ? '%' : ' MB/s'));
        card.find('.progress-bar').css('width', value + '%');
    }
}

function checkService(serviceName) {
    $.ajax({
        url: '/monitoring/check-service/',
        method: 'POST',
        data: {
            'service': serviceName,
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        success: function(data) {
            if (data.success) {
                location.reload();
            } else {
                alert('Failed to check service: ' + data.error);
            }
        }
    });
}

function restartService(serviceName) {
    if (confirm('Are you sure you want to restart ' + serviceName + '?')) {
        $.ajax({
            url: '/monitoring/restart-service/',
            method: 'POST',
            data: {
                'service': serviceName,
                'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(data) {
                if (data.success) {
                    alert('Service restart initiated');
                    location.reload();
                } else {
                    alert('Failed to restart service: ' + data.error);
                }
            }
        });
    }
}

function clearAlerts() {
    if (confirm('Are you sure you want to clear all alerts?')) {
        $.ajax({
            url: '/monitoring/clear-alerts/',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(data) {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Failed to clear alerts: ' + data.error);
                }
            }
        });
    }
}
</script>
{% endblock %}