@page
@model EonaCat.LogStack.Status.Pages.Admin.SettingsModel
@{
    ViewData["Title"] = "Settings";
    ViewData["Page"] = "admin-settings";
    var pwParts = (Model.PasswordMessage ?? "").Split(':', 2);
    var pwType = pwParts.Length > 1 ? pwParts[0] : "";
    var pwMsg = pwParts.Length > 1 ? pwParts[1] : pwParts.ElementAtOrDefault(0) ?? "";
}

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

<div class="two-col" style="align-items:start">

<div>
<div class="section-title mb-2">General Settings</div>
<div class="card">
    <div class="card-body">
        <form method="post" asp-page-handler="SaveSettings">
            <div class="form-group">
                <label class="form-label">Site Name</label>
                <input type="text" name="SiteName" value="@Model.SiteName" class="form-control" />
            </div>
            <div class="form-group">
                <label class="form-label">Alert Email</label>
                <input type="email" name="AlertEmail" value="@Model.AlertEmail" class="form-control" placeholder="alerts@example.com" />
            </div>
            <div class="form-group">
                <label class="form-label">Alert Webhook URL</label>
                <input type="url" name="AlertWebhookUrl" value="@Model.AlertWebhookUrl" class="form-control" placeholder="https://hooks.slack.com/..." />
                <div style="font-size:11px;color:var(--text-muted);margin-top:4px">Global fallback for alert rules without a specific webhook.</div>
            </div>
            <div class="form-group">
                <label class="form-label">Log Retention (days)</label>
                <input type="number" name="MaxLogRetentionDays" value="@Model.MaxLogRetentionDays" class="form-control" min="1" max="365" />
            </div>
            <div class="form-group">
                <label class="flex align-center gap-2" style="cursor:pointer;margin-bottom:10px">
                    <label class="toggle">
                        <input type="checkbox" name="ShowUptimePublicly" @(Model.ShowUptimePublicly ? "checked" : "") />
                        <span class="toggle-slider"></span>
                    </label>
                    <span>Show uptime % publicly</span>
                </label>
                <label class="flex align-center gap-2" style="cursor:pointer;margin-bottom:10px">
                    <label class="toggle">
                        <input type="checkbox" name="ShowIncidentsPublicly" @(Model.ShowIncidentsPublicly ? "checked" : "") />
                        <span class="toggle-slider"></span>
                    </label>
                    <span>Show incidents on public page</span>
                </label>
                <label class="flex align-center gap-2" style="cursor:pointer;margin-bottom:10px">
                    <label class="toggle">
                        <input type="checkbox" name="AutoCreateIncidents" @(Model.AutoCreateIncidents ? "checked" : "") />
                        <span class="toggle-slider"></span>
                    </label>
                    <span>Auto-create incidents when monitors go down</span>
                </label>
                <label class="flex align-center gap-2" style="cursor:pointer">
                    <label class="toggle">
                        <input type="checkbox" name="ShowLogsPublicly" @(Model.ShowLogsPublicly ? "checked" : "") />
                        <span class="toggle-slider"></span>
                    </label>
                    <span>Show logs publicly (not recommended)</span>
                </label>
            </div>
            <button type="submit" class="btn btn-primary">Save Settings</button>
        </form>
    </div>
</div>
</div>

<div>
<div class="section-title mb-2">Change Password</div>
<div class="card">
    <div class="card-body">
        @if (!string.IsNullOrEmpty(pwMsg))
        {
            <div class="alert @(pwType == "success" ? "alert-success" : "alert-danger")">@pwMsg</div>
        }
        <form method="post" asp-page-handler="ChangePassword">
            <div class="form-group">
                <label class="form-label">Current Password</label>
                <input type="password" name="CurrentPassword" class="form-control" required />
            </div>
            <div class="form-group">
                <label class="form-label">New Password</label>
                <input type="password" name="NewPassword" class="form-control" required minlength="6" />
            </div>
            <div class="form-group">
                <label class="form-label">Confirm New Password</label>
                <input type="password" name="ConfirmPassword" class="form-control" required />
            </div>
            <button type="submit" class="btn btn-primary">Change Password</button>
        </form>
    </div>
</div>

<div class="section-title mb-2 mt-3">API Endpoints</div>
<div class="card">
    <div class="card-body">
        <p style="font-size:12px;color:var(--text-muted);margin-bottom:12px">Use these endpoints to ingest logs or query status from external applications.</p>
        <div style="font-family:var(--font-mono);font-size:11px;background:var(--bg-base);padding:12px;border-radius:4px;line-height:2">
            <div><span style="color:var(--accent)">POST</span> <span style="color:var(--text-primary)">/api/logs/ingest</span></div>
            <div><span style="color:var(--accent)">POST</span> <span style="color:var(--text-primary)">/api/logs/batch</span></div>
            <div><span style="color:var(--accent)">POST</span> <span style="color:var(--text-primary)">/api/logs/serilog</span></div>
            <div><span style="color:var(--accent)">POST</span> <span style="color:var(--text-primary)">/api/logs/eonacat</span></div>
            <div><span style="color:var(--info)">GET</span> <span style="color:var(--text-primary)">/api/logs</span> <span style="color:var(--text-muted)">?level=&source=&search=&from=&to=&page=&pageSize=</span></div>
            <div><span style="color:var(--info)">GET</span> <span style="color:var(--text-primary)">/api/logs/stats</span> <span style="color:var(--text-muted)">?hours=24</span></div>
            <div><span style="color:var(--info)">GET</span> <span style="color:var(--text-primary)">/api/status/summary</span></div>
            <div><span style="color:var(--info)">GET</span> <span style="color:var(--text-primary)">/api/monitors</span></div>
            <div><span style="color:var(--info)">GET</span> <span style="color:var(--text-primary)">/api/monitors/{id}/check</span></div>
            <div><span style="color:var(--info)">GET</span> <span style="color:var(--text-primary)">/api/monitors/{id}/history</span> <span style="color:var(--text-muted)">?limit=100</span></div>
            <div><span style="color:var(--info)">GET</span> <span style="color:var(--text-primary)">/api/monitors/{id}/uptime</span></div>
            <div><span style="color:var(--accent)">POST</span> <span style="color:var(--text-primary)">/api/monitors/{id}/pause</span></div>
            <div><span style="color:var(--accent)">POST</span> <span style="color:var(--text-primary)">/api/monitors/{id}/resume</span></div>
            <div><span style="color:var(--info)">GET</span> <span style="color:var(--text-primary)">/api/incidents</span> <span style="color:var(--text-muted)">?activeOnly=true</span></div>
            <div><span style="color:var(--accent)">POST</span> <span style="color:var(--text-primary)">/api/incidents</span></div>
            <div><span style="color:var(--warn)">PATCH</span> <span style="color:var(--text-primary)">/api/incidents/{id}</span></div>
        </div>
        <a href="/admin/ingest" class="btn btn-outline btn-sm mt-2">View Ingest Docs →</a>
    </div>
</div>
</div>

</div>