@model WebhookSyncApp.Models.DashboardViewModel

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

<div class="container mt-4">
    <h2 class="mb-4">Transparency Dashboard</h2>

    <div class="card mb-4 shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">Active User Configurations</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>User ID / Email</th>
                            <th>Subscription ID</th>
                            <th>Expiration (UTC)</th>
                            <th>Last Delta Link</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach(var user in Model.UserConfigs)
                        {
                            <tr>
                                <td>
                                    <strong>@user.Email</strong><br />
                                    <small class="text-muted">@user.UserId</small>
                                </td>
                                <td><small>@user.SubscriptionId</small></td>
                                <td>@(user.Expiration?.ToString("yyyy-MM-dd HH:mm:ss") ?? "N/A")</td>
                                <td class="text-truncate" style="max-width: 200px;" title="@user.LastDeltaLink">
                                    @(string.IsNullOrEmpty(user.LastDeltaLink) ? "None" : user.LastDeltaLink)
                                </td>
                            </tr>
                        }
                        @if(!Model.UserConfigs.Any())
                        {
                            <tr>
                                <td colspan="4" class="text-center text-muted py-3">No active users found.</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Recent Webhook Logs (Last 50)</h5>
            <button class="btn btn-sm btn-outline-light" onclick="location.reload()">Refresh</button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-sm mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 15%">Received At (UTC)</th>
                            <th style="width: 15%">Endpoint Type</th>
                            <th style="width: 70%">Raw Payload</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach(var log in Model.WebhookLogs)
                        {
                            <tr>
                                <td>@log.ReceivedAt.ToString("yyyy-MM-dd HH:mm:ss")</td>
                                <td><span class="badge bg-secondary">@log.EndpointType</span></td>
                                <td>
                                    <pre class="m-0 p-2 bg-light rounded text-wrap" style="max-height: 100px; overflow-y: auto; font-size: 0.8em;">@log.RawPayload</pre>
                                </td>
                            </tr>
                        }
                        @if(!Model.WebhookLogs.Any())
                        {
                            <tr>
                                <td colspan="3" class="text-center text-muted py-3">No webhook hits recorded yet.</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>