@{
    ViewData["Title"] = "Delete Account";
    ViewData["PageIcon"] = "bi-trash3-fill";
    var companyName   = ViewBag.CompanyName as string ?? "your company";
    var userCount     = (int)(ViewBag.UserCount     ?? 0);
    var jobCount      = (int)(ViewBag.JobCount      ?? 0);
    var quoteCount    = (int)(ViewBag.QuoteCount    ?? 0);
    var customerCount = (int)(ViewBag.CustomerCount ?? 0);
    var invoiceCount  = (int)(ViewBag.InvoiceCount  ?? 0);
}

<div class="container" style="max-width:720px;">

    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a asp-controller="CompanySettings" asp-action="Index">Company Settings</a>
            </li>
            <li class="breadcrumb-item active">Delete Account</li>
        </ol>
    </nav>

    <!-- Error alert -->
    @if (TempData["Error"] != null)
    {
        <div class="alert alert-danger alert-permanent" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>@TempData["Error"]
        </div>
    }

    <!-- Header -->
    <div class="d-flex align-items-center gap-3 mb-4">
        <div class="bg-danger bg-opacity-10 rounded-circle p-3">
            <i class="bi bi-trash3-fill text-danger fs-3"></i>
        </div>
        <div>
            <p class="text-muted mb-0">This action is permanent and cannot be undone.</p>
        </div>
    </div>

    <!-- What happens card -->
    <div class="card border-danger mb-4">
        <div class="card-header bg-danger text-white fw-semibold">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>What happens when you delete your account
        </div>
        <div class="card-body">
            <p class="mb-3">
                Deleting your account will permanently deactivate access to
                <strong>@companyName</strong> and mark the following data for removal:
            </p>

            <ul class="list-unstyled mb-3">
                <li class="mb-2">
                    <i class="bi bi-person-x-fill text-danger me-2"></i>
                    <strong>@userCount user account@(userCount != 1 ? "s" : "")</strong> will be deactivated &mdash; no one will be able to log in.
                </li>
                <li class="mb-2">
                    <i class="bi bi-briefcase-fill text-danger me-2"></i>
                    <strong>@jobCount job@(jobCount != 1 ? "s" : "")</strong>,
                    <strong>@quoteCount quote@(quoteCount != 1 ? "s" : "")</strong>, and
                    <strong>@invoiceCount invoice@(invoiceCount != 1 ? "s" : "")</strong> will be marked deleted.
                </li>
                <li class="mb-2">
                    <i class="bi bi-people-fill text-danger me-2"></i>
                    <strong>@customerCount customer record@(customerCount != 1 ? "s" : "")</strong> will be marked deleted.
                </li>
                <li class="mb-2">
                    <i class="bi bi-cloud-slash-fill text-danger me-2"></i>
                    All inventory, equipment, maintenance, and other company data will be marked deleted.
                </li>
            </ul>

            <div class="alert alert-warning alert-permanent mb-0">
                <i class="bi bi-lock-fill me-2"></i>
                <strong>You will lose access to your data immediately.</strong>
                Once your account is deleted you will no longer be able to export, download,
                or access any of your data. All records are subject to purge and
                <strong>cannot be recovered</strong> after deletion.
                If you need a data export, please do so <em>before</em> deleting your account.
            </div>
        </div>
    </div>

    <!-- Alternatives card -->
    <div class="card mb-4">
        <div class="card-header fw-semibold">
            <i class="bi bi-lightbulb me-2 text-warning"></i>Consider these alternatives first
        </div>
        <div class="card-body">
            <ul class="mb-0">
                <li class="mb-1">
                    <strong>Pause instead of delete</strong> &mdash; Contact support to temporarily suspend your account.
                </li>
                <li class="mb-1">
                    <strong>Cancel your subscription</strong> &mdash; Stop future billing without deleting your data.
                </li>
                <li>
                    <strong>Export your data first</strong> &mdash; Go to
                    <a asp-controller="Reports" asp-action="Index">Reports</a>
                    to export jobs, customers, invoices, and more before proceeding.
                </li>
            </ul>
        </div>
    </div>

    <!-- Confirmation form -->
    <div class="card border-danger">
        <div class="card-header bg-danger bg-opacity-10 fw-semibold text-danger">
            <i class="bi bi-shield-exclamation me-2"></i>Confirm account deletion
        </div>
        <div class="card-body">
            <form asp-action="DeleteAccount" asp-controller="CompanySettings" method="post" id="deleteAccountForm">
                @Html.AntiForgeryToken()

                <!-- Acknowledgement checkbox -->
                <div class="mb-4">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="acknowledged" name="acknowledged" value="true" required />
                        <label class="form-check-label" for="acknowledged">
                            I understand that deleting my account is <strong>permanent</strong>.
                            I will no longer be able to export any data, and all records will be
                            purged. I accept that this action cannot be undone.
                        </label>
                    </div>
                </div>

                <!-- Type DELETE -->
                <div class="mb-4">
                    <label for="confirmationWord" class="form-label fw-semibold">
                        To confirm, type <code class="text-danger fs-6">DELETE</code> in the box below:
                    </label>
                    <input type="text"
                           class="form-control form-control-lg"
                           id="confirmationWord"
                           name="confirmationWord"
                           placeholder="Type DELETE here"
                           autocomplete="off"
                           spellcheck="false" />
                    <div class="form-text text-muted">This field is case-sensitive. You must type it in all capitals.</div>
                </div>

                <!-- Action buttons -->
                <div class="d-flex gap-2 flex-wrap">
                    <button type="submit" class="btn btn-danger px-4" id="deleteBtn" disabled>
                        <i class="bi bi-trash3 me-1"></i>Delete My Account Permanently
                    </button>
                    <a asp-controller="CompanySettings" asp-action="Index" class="btn btn-outline-secondary px-4">
                        Cancel &mdash; Keep My Account
                    </a>
                </div>
            </form>
        </div>
    </div>

</div>

@section Scripts {
    <script>
        (function () {
            const ackCheckbox    = document.getElementById('acknowledged');
            const confirmInput   = document.getElementById('confirmationWord');
            const deleteBtn      = document.getElementById('deleteBtn');

            /// Re-evaluates whether the submit button should be enabled.
            /// Both the checkbox AND the exact word "DELETE" must be present.
            function updateButton() {
                const wordOk = confirmInput.value.trim() === 'DELETE';
                const ackOk  = ackCheckbox.checked;
                deleteBtn.disabled = !(wordOk && ackOk);
            }

            confirmInput.addEventListener('input', updateButton);
            ackCheckbox.addEventListener('change', updateButton);

            // Extra guard: prevent accidental double-submit after the form is submitted.
            document.getElementById('deleteAccountForm').addEventListener('submit', function () {
                deleteBtn.disabled = true;
                deleteBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Deleting&hellip;';
            });
        })();
    </script>
}