@model dynamic

@{
    ViewData["Title"] = "Dashboard";
}

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

    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="metric-card">
                <div class="metric-label">Total Servers</div>
                <div class="metric-value">@ViewBag.TotalServers</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card">
                <div class="metric-label">Online</div>
                <div class="metric-value" style="color: var(--success)">@ViewBag.OnlineServers</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card">
                <div class="metric-label">Offline</div>
                <div class="metric-value" style="color: var(--danger)">@ViewBag.OfflineServers</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card">
                <div class="metric-label">Totoal Services</div>
                <div class="metric-value">@ViewBag.ServiceCount</div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card">
                <h2 class="card-title">Monitored Servers</h2>
                <ul class="server-list">
                    @if (ViewBag.Servers != null && ViewBag.Servers.Count > 0)
                    {
                        @foreach (var server in ViewBag.Servers)
                        {
                            <li class="server-item">
                                <div class="server-info">
                                    <span class="server-name">@server.Name</span>
                                    <span class="server-ip">@server.IPAddress</span>
                                </div>
                                <span class="status-badge @(server.IsOnline ? "status-online" : "status-offline")">
                                    @(server.IsOnline ? "Online" : "Offline")
                                </span>
                            </li>
                        }
                    }
                    else
                    {
                        <li class="text-center py-4" style="color: var(--text-muted)">
                            No servers configured yet
                        </li>
                    }
                </ul>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <h2 class="card-title">Quick Stats</h2>
                <div class="card-text">
                    <div class="d-flex justify-content-between mb-3 pb-3" style="border-bottom: 1px solid var(--border-color)">
                        <span style="color: var(--text-secondary)">System Uptime</span>
                        <span class="fw-semibold">99.8%</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3 pb-3" style="border-bottom: 1px solid var(--border-color)">
                        <span style="color: var(--text-secondary)">Avg Response Time</span>
                        <span class="fw-semibold">42ms</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3 pb-3" style="border-bottom: 1px solid var(--border-color)">
                        <span style="color: var(--text-secondary)">Database Size</span>
                        <span class="fw-semibold">210 MiB</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3 pb-3" style="border-bottom: 1px solid var(--border-color)">
                        <span style="color: var(--text-secondary)">Last Backup</span>
                        <span class="fw-semibold">3 Days ago</span>
                    </div>
                </div>
            </div>

            <div class="card">
                <h2 class="card-title">System Health</h2>
                <div class="card-text">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span style="font-size: 0.875rem; color: var(--text-secondary)">Database Health</span>
                            <span style="font-size: 0.875rem; font-weight: 600">34%</span>
                        </div>
                        <div style="height: 8px; background-color: var(--bg-tertiary); border-radius: 4px; overflow: hidden;">
                            <div style="height: 100%; width: 34%; background-color: var(--success); transition: width 0.3s ease;"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span style="font-size: 0.875rem; color: var(--text-secondary)">Network Status</span>
                            <span style="font-size: 0.875rem; font-weight: 600">68%</span>
                        </div>
                        <div style="height: 8px; background-color: var(--bg-tertiary); border-radius: 4px; overflow: hidden;">
                            <div style="height: 100%; width: 68%; background-color: var(--warning); transition: width 0.3s ease;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        setInterval(function() {
            location.reload();
        }, 30000);
    </script>
}