@using Microsoft.IdentityModel.Tokens
@model Watcher.ViewModels.DashboardViewModel

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

<head>
    <link rel="stylesheet" href="~/css/main.css" />
    <link rel="stylesheet" href="~/css/dashboardstats.css" />
</head>

<body>
    <div class="row g-4 mb-4">
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="card shadow-sm border-0 rounded-3 text-center h-100">
                <div class="card-body">
                    <i class="bi bi-hdd-network text-success fs-2 mb-2"></i>
                    <h6 class="text-text">Server Online</h6>
                    <h3 class="fw-bold">@Model.ActiveServers</h3>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="card shadow-sm border-0 rounded-3 text-center h-100">
                <div class="card-body">
                    <i class="bi bi-hdd-network-fill text-danger fs-2 mb-2"></i>
                    <h6 class="text-text">Server Offline</h6>
                    <h3 class="fw-bold">@Model.OfflineServers</h3>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="card shadow-sm border-0 rounded-3 text-center h-100">
                <div class="card-body">
                    <i class="bi bi-box-seam text-primary fs-2 mb-2"></i>
                    <h6 class="text-text">Services Running</h6>
                    <h3 class="fw-bold">@Model.RunningContainers</h3>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="card shadow-sm border-0 rounded-3 text-center h-100">
                <div class="card-body">
                    <i class="bi bi-exclamation-triangle text-warning fs-2 mb-2"></i>
                    <h6 class="text-text">Service Warnungen</h6>
                    <h3 class="fw-bold">@Model.FailedContainers</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- System Overview & Recent Events -->
    <div class="row g-4">
        <!-- System Health -->
        <div class="col-12 col-lg-6">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-body">
                    <h5 class="fw-bold mb-3"><i class="bi bi-heart-pulse me-2 text-danger"></i>Systemstatus</h5>

                    @if (!Model.NetworkStatus.IsNullOrEmpty())
                    {
                        @if (Model.NetworkStatus == "online")
                        {
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span>Netzwerk</span>
                                <span class="badge bg-success">@Model.NetworkStatus</span>
                            </div>
                            <div class="progress mb-3" style="height: 6px;">
                                <div class="progress-bar bg-success w-100"></div>
                            </div>
                        } else if (Model.NetworkStatus == "offline")
                        {
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span>Netzwerk</span>
                                <span class="badge bg-danger">@Model.NetworkStatus</span>
                            </div>
                            <div class="progress mb-3" style="height: 6px;">
                                <div class="progress-bar bg-danger w-100"></div>
                            </div>
                        }
                    }

                    @if (!Model.DatabaseStatus.IsNullOrEmpty())
                    {
                        @if (Model.DatabaseStatus == "ok")
                        {
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span>Datenbank</span>
                                <span class="badge bg-success">healthy</span>
                            </div>
                        } else
                        {
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span>Datenbank</span>
                                <span class="badge bg-danger">unhealthy</span>
                            </div>
                        }
                    } else
                    {
                        <div class="d-flex justify-content-between align-items-center mb-2">
                                <span>Datenbank</span>
                                
                                <span class="badge bg-primary">Missing Data</span>
                            </div>
                    }

                    
                    <div class="progress mb-3" style="height: 6px;">
                        <div class="progress-bar bg-success w-100"></div>
                    </div>

                </div>
            </div>
        </div>

        <!-- Recent Events -->
        <div class="col-12 col-lg-6">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-body">
                    <h5 class="fw-bold mb-3"><i class="bi bi-activity me-2 text-primary"></i>Letzte Ereignisse</h5>
                    <ul class="list-group list-group-flush small">
                        @foreach (var log in Model.RecentEvents.Take(1))
                        {
                            <li class="list-group-item d-flex align-items-center">
                                <i class="bi bi-dot fs-4 text-muted me-1"></i>
                                <span class="text-muted me-2">@log.Timestamp.ToString("HH:mm:ss")</span>
                                <span>@log</span>
                            </li>
                        }
                    </ul>
                </div>
            </div>
        </div>

        <!-- Services -->
        <!-- TODO
        <div class="col-12 col-lg-6">
            <div class="card shadow rounded-3 p-4 h-100">
                <h2 class="h5 fw-semibold mb-3">Services</h2>
                <ul class="list-group list-group-flush serverlist">
                    @foreach (var container in Model.Containers)
                    {
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>@container.Name</span>
                            <span class="badge @(container.Name == "Running" ? "bg-success" : "bg-warning")">
                                @container.Name
                            </span>
                        </li>
                    }
                </ul>
            </div>
        </div>
        -->

        <!-- Server Liste -->
        <!-- TODO
        <div class="col-12 col-lg-6">
            <div class="card shadow rounded-3 p-4 h-100">
                <h2 class="h5 fw-semibold mb-3">Server</h2>
                <ul class="list-group list-group-flush">
                    @foreach (Server server in Model.Servers)
                    {
                        <li class="list-group-item d-flex justify-content-between align-items-center serverlist">
                            <span>@server.Name</span>
                            <span class="badge bg-info" )">
                                CPU: 
                            </span>
                            <span class="badge bg-info" )">
                                RAM: 65.09%
                            </span>
                            <span class="badge @(server.IsOnline ? "bg-success" : "bg-danger")">
                                @(server.IsOnline ? "Online" : "Offline")
                            </span>
                        </li>
                    }
                </ul>
            </div>
            -->
        </div>



</body>