@page
@model Status.Pages.MonitorsModel
@{
    ViewData["Title"] = "Monitors";
    ViewData["Page"] = "monitors";
    var groups = Model.Monitors.GroupBy(m => m.GroupName ?? "General");
}

<div class="section-header">
    <span class="section-title">All Monitors</span>
    <span class="mono" style="font-size:11px;color:var(--text-muted)">@Model.Monitors.Count services</span>
</div>

@foreach (var group in groups)
{
<div class="card mb-2">
    <div class="card-header">
        <span class="card-title">@group.Key</span>
        <span style="font-size:11px;color:var(--text-muted)">
            @group.Count(m => m.LastStatus == MonitorStatus.Up) / @group.Count() up
        </span>
    </div>
    <table class="data-table">
        <thead><tr>
            <th>Monitor</th>
            <th>Type</th>
            <th>Endpoint</th>
            <th>Response</th>
            <th>30d Uptime</th>
            <th>Last Checked</th>
            <th>Status</th>
        </tr></thead>
        <tbody>
        @foreach (var monitor in group)
        {
            var badgeClass = monitor.LastStatus switch 
            {
                MonitorStatus.Up => "badge-up",
                MonitorStatus.Down => "badge-down",
                MonitorStatus.Warning or MonitorStatus.Degraded => "badge-warn",
                _ => "badge-unknown"
            };

            var uptime = Model.UptimePercent.ContainsKey(monitor.Id) ? Model.UptimePercent[monitor.Id] : 0;
            var uptimeColor = uptime >= 99 ? "var(--up)" : uptime >= 95 ? "var(--warn)" : "var(--down)";
            <tr>
                <td>
                    <div style="font-weight:500;color:var(--text-primary)">@monitor.Name</div>
                    @if (!string.IsNullOrEmpty(monitor.Description)) { <div style="font-size:11px;color:var(--text-muted)">@monitor.Description</div> }
                </td>
                <td><span class="badge badge-info" style="font-size:9px">@monitor.Type</span></td>
                <td class="mono" style="font-size:11px;color:var(--text-muted)">
                    @(monitor.Type is MonitorType.HTTP or MonitorType.HTTPS ? monitor.Url : $"{monitor.Host}{(monitor.Port.HasValue ? ":" + monitor.Port : "")}")
                </td>
                <td class="mono" style="font-size:11px">
                    @if (monitor.LastResponseMs.HasValue) { <span>@((int)monitor.LastResponseMs.Value)ms</span> }
                    else { <span style="color:var(--text-muted)">—</span> }
                </td>
                <td>
                    <span style="font-family:var(--font-mono);font-size:12px;color:@uptimeColor">@uptime.ToString("F1")%</span>
                </td>
                <td style="font-size:11px;color:var(--text-muted)">
                    @(monitor.LastChecked.HasValue ? monitor.LastChecked.Value.ToString("HH:mm:ss") + " UTC" : "Never")
                </td>
                <td><span class="badge @badgeClass">@monitor.LastStatus</span></td>
            </tr>
        }
        </tbody>
    </table>
</div>
}

@if (!Model.Monitors.Any())
{
    <div class="empty-state">
        <div class="empty-state-icon">◎</div>
        <div class="empty-state-text">No monitors configured</div>
    </div>
}