@model dynamic

@{
    ViewData["Title"] = "Server Overview";
}

<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="section-title mb-0">Server Overview</h1>
        <span class="text-muted">Last updated: @DateTime.Now.ToString("HH:mm:ss")</span>
    </div>

    <div class="row g-4">
        @foreach (var server in Model.servers)
        {
            <div class="col-xl-4 col-lg-6">
                <div class="card server-detail-card">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h2 class="card-title mb-1">@server.Name</h2>
                            <span class="server-ip">@server.IPAddress</span>
                        </div>
                        <span class="status-badge status-online">@server.State</span>
                    </div>

                    <div class="server-metrics">
                        <!-- CPU Load -->
                        <div class="metric-section mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="metric-label-small">CPU Load</span>
                                <span class="metric-value-small">400%</span>
                            </div>
                            <canvas id="cpuChart1" class="chart-canvas"></canvas>
                        </div>

                        <!-- RAM Load -->
                        <div class="metric-section mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="metric-label-small">RAM Load</span>
                                <span class="metric-value-small">400 MB</span>
                            </div>
                            <canvas id="ramChart1" class="chart-canvas"></canvas>
                        </div>

                        <!-- Uptime -->
                        <div class="metric-section">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="metric-label-small">Uptime</span>
                                <span class="metric-value-small">400 days</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Configuration for charts
        const chartConfig = {
            type: 'line',
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        enabled: false
                    }
                },
                scales: {
                    x: {
                        display: false
                    },
                    y: {
                        display: false,
                        min: 0,
                        max: 100
                    }
                },
                elements: {
                    line: {
                        tension: 0.4,
                        borderWidth: 2
                    },
                    point: {
                        radius: 0
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index'
                }
            }
        };

        // Generate random data for demo
        function generateData() {
            return Array.from({ length: 20 }, () => Math.floor(Math.random() * 60) + 20);
        }

        // Create CPU charts
        for (let i = 1; i <= 6; i++) {
            const ctx = document.getElementById(`cpuChart${i}`);
            if (ctx) {
                new Chart(ctx, {
                    ...chartConfig,
                    data: {
                        labels: Array(20).fill(''),
                        datasets: [{
                            data: generateData(),
                            borderColor: '#58a6ff',
                            backgroundColor: 'rgba(88, 166, 255, 0.1)',
                            fill: true
                        }]
                    }
                });
            }
        }

        // Create RAM charts
        for (let i = 1; i <= 6; i++) {
            const ctx = document.getElementById(`ramChart${i}`);
            if (ctx) {
                new Chart(ctx, {
                    ...chartConfig,
                    data: {
                        labels: Array(20).fill(''),
                        datasets: [{
                            data: generateData(),
                            borderColor: '#3fb950',
                            backgroundColor: 'rgba(63, 185, 80, 0.1)',
                            fill: true
                        }]
                    }
                });
            }
        }

        // Auto-refresh every 30 seconds
        setInterval(function () {
            location.reload();
        }, 30000);
    </script>
}

<style>
    .server-detail-card {
        max-height: 420px;
        height: 100%;
        transition: transform 0.2s ease;
        display: flex;
        flex-direction: column;
    }

    .server-detail-card:hover {
        transform: translateY(-4px);
    }

    .server-metrics {
        padding-top: 1rem;
        flex: 1;
        overflow: hidden;
    }

    .metric-section {
        padding: 0.5rem 0.75rem;
        background-color: var(--bg-tertiary);
        border-radius: 6px;
        border: 1px solid var(--border-color);
    }

    .metric-label-small {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
    }

    .metric-value-small {
        font-size: 0.875rem;
        color: var(--text-primary);
        font-weight: 600;
    }

    .chart-canvas {
        height: 50px !important;
        max-height: 50px !important;
        margin-top: 0.5rem;
    }
</style>