@page
@model Status.Pages.Admin.IncidentsModel
@{
    ViewData["Title"] = "Manage Incidents";
    ViewData["Page"] = "admin-incidents";
}

@if (!string.IsNullOrEmpty(Model.Message))
{
    <div class="alert alert-success">✓ @Model.Message</div>
}

<div class="section-header">
    <span class="section-title">Incidents</span>
    <button class="btn btn-primary" onclick="openModal('add-incident-modal')">+ New Incident</button>
</div>

<div class="card">
    <table class="data-table">
        <thead><tr>
            <th>Title</th>
            <th>Severity</th>
            <th>Status</th>
            <th>Monitor</th>
            <th>Created</th>
            <th>Resolved</th>
            <th>Visibility</th>
            <th>Actions</th>
        </tr></thead>
        <tbody>
        @foreach (var i in Model.Incidents)
        {
            var severityBadge = i.Severity switch {
                IncidentSeverity.Critical => "badge-down",
                IncidentSeverity.Major => "badge-warn",
                _ => "badge-info"
            };
            var statusBadge = i.Status == IncidentStatus.Resolved ? "badge-up" : "badge-warn";
            <tr>
                <td style="color:var(--text-primary);font-weight:500">@i.Title</td>
                <td><span class="badge @severityBadge">@i.Severity</span></td>
                <td><span class="badge @statusBadge">@i.Status</span></td>
                <td style="font-size:12px">@(i.Monitor?.Name ?? "-")</td>
                <td class="mono" style="font-size:11px">@i.CreatedAt.ToString("yyyy-MM-dd HH:mm")</td>
                <td class="mono" style="font-size:11px">@(i.ResolvedAt?.ToString("yyyy-MM-dd HH:mm") ?? "-")</td>
                <td>@(i.IsPublic ? "🌐 Public" : "🔒 Private")</td>
                <td>
                    <div class="flex gap-2">
                        <button class="btn btn-outline btn-sm" onclick="openUpdate(@i.Id,'@i.Status')">Update</button>
                        @if (i.Status != IncidentStatus.Resolved)
                        {
                            <form method="post" asp-page-handler="Resolve" style="display:inline">
                                <input type="hidden" name="id" value="@i.Id" />
                                <button type="submit" class="btn btn-outline btn-sm">Resolve</button>
                            </form>
                        }
                        <form method="post" asp-page-handler="Delete" style="display:inline" onsubmit="return confirm('Delete incident?')">
                            <input type="hidden" name="id" value="@i.Id" />
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </div>
                </td>
            </tr>
        }
        @if (!Model.Incidents.Any())
        {
            <tr><td colspan="8" style="text-align:center;padding:32px;color:var(--text-muted)">No incidents recorded.</td></tr>
        }
        </tbody>
    </table>
</div>

<!-- New Incident Modal -->
<div class="modal-overlay" id="add-incident-modal">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title">New Incident</span>
            <button class="modal-close" onclick="closeModal('add-incident-modal')">✕</button>
        </div>
        <form method="post" asp-page-handler="Create">
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Title *</label>
                    <input type="text" name="NewIncident.Title" class="form-control" required />
                </div>
                <div class="two-col">
                    <div class="form-group">
                        <label class="form-label">Severity</label>
                        <select name="NewIncident.Severity" class="form-control">
                            @foreach (var s in Enum.GetValues<IncidentSeverity>())
                            { <option value="@s">@s</option> }
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Status</label>
                        <select name="NewIncident.Status" class="form-control">
                            @foreach (var s in Enum.GetValues<IncidentStatus>())
                            { <option value="@s">@s</option> }
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Related Monitor</label>
                    <select name="NewIncident.MonitorId" class="form-control">
                        <option value="">None</option>
                        @foreach (var m in Model.Monitors)
                        { <option value="@m.Id">@m.Name</option> }
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea name="NewIncident.Body" class="form-control" rows="3"></textarea>
                </div>
                <div class="flex gap-2 align-center">
                    <label class="toggle"><input type="checkbox" name="NewIncident.IsPublic" checked /><span class="toggle-slider"></span></label>
                    <span style="font-size:13px">Visible on public status page</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="closeModal('add-incident-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Incident</button>
            </div>
        </form>
    </div>
</div>

<!-- Post Update Modal -->
<div class="modal-overlay" id="update-incident-modal">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title">Post Update</span>
            <button class="modal-close" onclick="closeModal('update-incident-modal')">✕</button>
        </div>
        <form method="post" asp-page-handler="PostUpdate">
            <div class="modal-body">
                <input type="hidden" name="UpdateDto.IncidentId" id="update-incident-id" />
                <div class="form-group">
                    <label class="form-label">New Status</label>
                    <select name="UpdateDto.Status" id="update-status" class="form-control">
                        @foreach (var s in Enum.GetValues<IncidentStatus>())
                        { <option value="@s">@s</option> }
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Update Message *</label>
                    <textarea name="UpdateDto.Message" class="form-control" rows="3" required></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="closeModal('update-incident-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Post Update</button>
            </div>
        </form>
    </div>
</div>

@section Scripts {
<script>
function openUpdate(id, status) {
    document.getElementById('update-incident-id').value = id;
    document.getElementById('update-status').value = status;
    openModal('update-incident-modal');
}
</script>
}