@model GraphCalendarSync.Controllers.DashboardViewModel
@{
    ViewData["Title"] = "Sync Dashboard";
}

<div class="container mt-4">
    <h1>Sync Dashboard</h1>

    <div class="row mt-4">
        <div class="col-12">
            <h3>User Configurations</h3>
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>UserId</th>
                        <th>Email</th>
                        <th>SubscriptionId</th>
                        <th>Expiration</th>
                        <th>Last Delta Token</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var user in Model.UserConfigs)
                    {
                        <tr>
                            <td>@user.UserId</td>
                            <td>@user.Email</td>
                            <td>@user.SubscriptionId</td>
                            <td>@user.Expiration</td>
                            <td style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="@user.LastDeltaToken">
                                @user.LastDeltaToken
                            </td>
                            <td>
                                <form asp-action="SyncNow" asp-controller="Sync" method="post">
                                    <input type="hidden" name="userId" value="@user.UserId" />
                                    <button type="submit" class="btn btn-primary btn-sm">Sync Now</button>
                                </form>
                            </td>
                        </tr>
                    }
                    @if (!Model.UserConfigs.Any())
                    {
                        <tr>
                            <td colspan="6" class="text-center">No users configured.</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-12">
            <h3>Webhook Logs (Last 20)</h3>
            <table class="table table-sm table-hover">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Received At (UTC)</th>
                        <th>Type</th>
                        <th>Payload</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var log in Model.WebhookLogs)
                    {
                        <tr>
                            <td>@log.Id</td>
                            <td>@log.ReceivedAt</td>
                            <td>@log.Type</td>
                            <td style="font-family: monospace; font-size: 0.85em;">
                                @log.Payload
                            </td>
                        </tr>
                    }
                     @if (!Model.WebhookLogs.Any())
                    {
                        <tr>
                            <td colspan="4" class="text-center">No logs yet.</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>