@{
    ViewData["Title"] = "Enable Biometric Login";
    Layout = "/Views/Shared/_AuthLayout.cshtml";
    var returnUrl = ViewBag.ReturnUrl as string ?? "/";
}

@section Styles {
<style>
    .auth-brand-panel {
        background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3rem 2.5rem;
        color: white;
    }

    .auth-brand-panel h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        text-align: center;
    }

    .auth-brand-panel .tagline {
        font-size: 1rem;
        color: rgba(255,255,255,0.65);
        margin-bottom: 2.5rem;
        text-align: center;
    }

    .feature-list {
        list-style: none;
        padding: 0;
        width: 100%;
        max-width: 280px;
    }

    .feature-list li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 0;
        font-size: 0.95rem;
        color: rgba(255,255,255,0.82);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .feature-list li:last-child { border-bottom: none; }

    .feature-list li i {
        color: #4fc3f7;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .auth-form-panel {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2.5rem 1.5rem;
        background-color: #ffffff;
        min-height: 100vh;
    }

    .auth-form-container {
        width: 100%;
        max-width: 420px;
    }

    .auth-form-container h2 {
        font-size: 1.75rem;
        font-weight: 700;
        color: #0f172a;
    }

    .auth-form-container .subtext {
        color: #64748b;
        font-size: 0.95rem;
    }
</style>
}

<div class="d-flex" style="min-height:100vh;">
    <!-- Left brand panel — hidden on mobile, same as login page -->
    <div class="col-lg-5 d-none d-lg-flex auth-brand-panel">
        <img src="/images/pcl-logo.png" alt="Powder Coating Logix" style="max-width:220px; margin-bottom:1.5rem;" />
        <h1>Powder Coating Logix</h1>
        <p class="tagline">The complete management platform for powder coating businesses</p>
        <ul class="feature-list">
            <li><i class="bi bi-fingerprint"></i> Fast biometric login</li>
            <li><i class="bi bi-shield-check-fill"></i> Secure — your biometrics never leave your device</li>
            <li><i class="bi bi-phone-fill"></i> Works with Face ID, Touch ID &amp; Windows Hello</li>
            <li><i class="bi bi-trash3-fill"></i> Remove any device at any time</li>
        </ul>
    </div>

    <!-- Right prompt panel -->
    <div class="auth-form-panel col-lg-7">
        <div class="auth-form-container text-center">

            <div id="prompt-step">
                <div class="mb-4" style="font-size:4rem; color:#0284c7; line-height:1;">
                    <i class="bi bi-fingerprint"></i>
                </div>
                <h2 class="mb-2">Speed up future logins</h2>
                <p class="subtext mb-4">
                    Enable biometric login so next time you can sign in with a single tap —
                    no password needed.
                </p>

                <p id="pk-status" class="small mb-3" style="min-height:1.25em;"></p>

                <div class="d-grid gap-2" style="max-width:320px; margin:0 auto;">
                    <button id="pk-enable-btn" type="button" class="btn btn-primary btn-lg">
                        <i class="bi bi-fingerprint me-2"></i><span id="pk-btn-label">Enable Biometric Login</span>
                    </button>
                    <a id="pk-skip-link" href="@returnUrl" class="btn btn-outline-secondary btn-lg">
                        Maybe later
                    </a>
                    <form method="post" action="/Passkey/DismissPrompt">
                        @Html.AntiForgeryToken()
                        <input type="hidden" name="returnUrl" value="@returnUrl" />
                        <button type="submit" class="btn btn-link text-muted w-100" style="font-size:0.85rem;">
                            Don't ask me again
                        </button>
                    </form>
                </div>
            </div>

            <div id="success-step" class="d-none">
                <div class="mb-4" style="font-size:4rem; color:#16a34a; line-height:1;">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
                <h2 class="mb-2">All set!</h2>
                <p class="subtext mb-4">Biometric login is enabled for this device.</p>
                <a href="@returnUrl" class="btn btn-primary btn-lg px-5">Continue</a>
            </div>

        </div>
    </div>
</div>

@section Scripts {
    <script src="~/js/passkey.js"></script>
    <script src="~/js/passkey-enroll.js"></script>
}