@model backend_AG.Models.UserSyncState
@{
    ViewData["Title"] = "Sync Status";
}

<div class="text-center">
    <h1 class="display-4">Calendar Sync Status</h1>
    
    <div class="card mt-4 shadow-sm" style="max-width: 600px; margin: 0 auto;">
        <div class="card-body">
            <h5 class="card-title">@Model.UserEmail</h5>
            <hr />
            
            <dl class="row text-start">
                <dt class="col-sm-5">Status:</dt>
                <dd class="col-sm-7">
                    <span class="badge @(Model.LastSyncStatus == "Success" ? "bg-success" : "bg-warning")">
                        @Model.LastSyncStatus
                    </span>
                </dd>

                <dt class="col-sm-5">Last Sync:</dt>
                <dd class="col-sm-7">@(Model.LastSyncTime?.ToLocalTime().ToString("g") ?? "Never")</dd>

                <dt class="col-sm-5">Next Sync:</dt>
                <dd class="col-sm-7">@(Model.LastSyncTime?.AddHours(1).ToLocalTime().ToString("g") ?? "Soon")</dd>

                <dt class="col-sm-5">Events Synced:</dt>
                <dd class="col-sm-7">@Model.EventsSyncedRecently</dd>
            </dl>

            <div class="d-flex justify-content-center gap-2 mt-3">
                <form asp-action="SyncNow" method="post">
                    <button type="submit" class="btn btn-primary btn-lg px-4">Sync Now</button>
                </form>
                <form asp-action="WriteTestRecord" method="post">
                    <button type="submit" class="btn btn-outline-secondary btn-lg px-4">Write Test Record</button>
                </form>
            </div>
        </div>
    </div>

    @if (!string.IsNullOrEmpty(Model.DebugInfo))
    {
        <div class="card mt-4 shadow-sm border-info" style="max-width: 600px; margin: 0 auto; background-color: #f8f9fa;">
            <div class="card-header bg-info text-white">Debug Information</div>
            <div class="card-body text-start">
                <pre style="white-space: pre-wrap; word-wrap: break-word; font-size: 0.85rem;">@Model.DebugInfo</pre>
            </div>
        </div>
    }

    <div class="mt-4 text-muted">
        <p>Your calendar changes are synced to <strong>CalendarSync.xlsx</strong> in your OneDrive root.</p>
    </div>
</div>