@model ManageAccountViewModel
@{
    ViewData["Title"] = "Manage Account";
    var subscription = Model.Subscription;
}

<div class="page-heading compact">
    <div>
        <p class="eyebrow">Account</p>
        <h1>Manage Account</h1>
        <p class="lead-text">@Model.User.Email</p>
    </div>
</div>

@if (TempData["AuthMessage"] is string authMessage)
{
    <div class="alert alert-info">@authMessage</div>
}

<section class="edit-panel">
    <h2>Account security</h2>
    <div class="row g-3 mb-3">
        <div class="col-md-4">
            <p class="eyebrow">Email address</p>
            <p>@Model.User.Email</p>
        </div>
        <div class="col-md-4">
            <p class="eyebrow">Email verified</p>
            <p>@(Model.User.EmailConfirmed ? "Yes" : "No")</p>
        </div>
        <div class="col-md-4">
            <p class="eyebrow">Two-factor authentication</p>
            <p>@(Model.User.TwoFactorEnabled ? "Enabled" : "Not enabled")</p>
        </div>
    </div>
    <div class="button-row mb-4">
        <a class="btn btn-outline-primary" asp-action="ChangePassword">Change Password</a>
    </div>

    <h2>Two-Factor Authentication</h2>
    <p class="muted">Use an authenticator app to add an extra sign-in step for your account.</p>
    <div class="button-row">
        @if (Model.User.TwoFactorEnabled)
        {
            <a class="btn btn-outline-primary" asp-action="RecoveryCodes">Recovery Codes</a>
            <a class="btn btn-outline-danger" asp-action="DisableTwoFactor">Disable Two Factor</a>
        }
        else
        {
            <a class="btn btn-primary" asp-action="EnableTwoFactor">Enable Two Factor</a>
        }
    </div>
</section>

<section class="edit-panel">
    <h2>Subscription</h2>
    @if (subscription is null)
    {
        <p class="muted">No active subscription is assigned.</p>
    }
    else
    {
        <div class="row g-3">
            <div class="col-md-4">
                <p class="eyebrow">Current plan</p>
                <p>@subscription.DisplayName</p>
            </div>
            <div class="col-md-4">
                <p class="eyebrow">Books</p>
                <p>@FormatLimit(subscription.MaxBooks)</p>
            </div>
            <div class="col-md-4">
                <p class="eyebrow">Storage</p>
                <p>@FormatStorage(subscription.MaxStorageMB)</p>
            </div>
            <div class="col-md-4">
                <p class="eyebrow">Chapters per book</p>
                <p>@FormatLimit(subscription.MaxChaptersPerBook)</p>
            </div>
            <div class="col-md-4">
                <p class="eyebrow">Scenes per book</p>
                <p>@FormatLimit(subscription.MaxScenesPerBook)</p>
            </div>
            <div class="col-md-4">
                <p class="eyebrow">Characters per project</p>
                <p>@FormatLimit(subscription.MaxCharactersPerProject)</p>
            </div>
            <div class="col-md-4">
                <p class="eyebrow">Collaborators</p>
                <p>@subscription.MaxCollaborators</p>
            </div>
        </div>
    }
    <div class="button-row mt-3">
        <a class="btn btn-outline-primary" asp-action="Subscription">View subscription details</a>
    </div>
</section>

@functions {
    private static string FormatLimit(int value) => value >= 999999 ? "Practical unlimited" : value.ToString("N0");

    private static string FormatStorage(int value) => value >= 1024 ? $"{value / 1024:N0} GB" : $"{value:N0} MB";
}