@php $c = app(\App\Support\ContentManager::class)->resolved('auth'); @endphp
<x-guest-layout title="Sign in">
    <div class="auth-ico"><i class="fa-light fa-right-to-bracket"></i></div>

    {{-- Errors from the password POST (Fortify) or a code/link request land back here. --}}
    @if (session('status'))<div class="auth-status">{{ session('status') }}</div>@endif
    @error('login')<div class="auth-status err" style="text-align:center;">{{ $message }}</div>@enderror

    {{-- ───────────── Step 1: email ───────────── --}}
    <div id="lf-step1">
        <span class="auth-eyebrow"><i class="fa-light fa-user"></i> {{ $c['login.eyebrow'] ?? 'Sign in' }}</span>
        <h2>{{ $c['login.heading'] ?? 'Welcome back' }}</h2>
        <p class="lede">{{ $c['login.lede'] ?? 'Enter your email to continue.' }}</p>

        <form id="lf-email-form">
            <div class="form-field">
                <label class="form-label" for="lf-email">Email</label>
                <div class="input-group"><span class="input-group-text"><i class="fa-light fa-envelope"></i></span>
                    <input class="form-control" id="lf-email" type="email" value="{{ old('login', old('email', '')) }}"
                        required autofocus autocomplete="username webauthn"></div>
            </div>
            <button type="submit" class="auth-btn auth-btn-primary">Continue <i class="fa-light fa-arrow-right"></i></button>
        </form>

        <p class="auth-alt">{{ $c['login.alt'] ?? 'New here?' }} <a href="{{ route('register') }}">{{ $c['login.alt_link'] ?? 'Create an account' }}</a></p>
    </div>

    {{-- ───────────── Step 2: choose a method ───────────── --}}
    <div id="lf-step2" hidden>
        <h2>Sign in</h2>
        <p class="lede" style="margin-bottom:1rem;">
            <i class="fa-light fa-envelope"></i> <span id="lf-email-display"></span>
            · <a href="#" id="lf-change" class="auth-link">change</a>
        </p>

        {{-- 1) Passkey — discoverable (no account hint leaked) and gated to devices
             with a built-in biometric authenticator (D81), so desktops without one
             don't get the confusing WebAuthn dialog. Hidden until that check passes. --}}
        <div id="lf-passkey-wrap" hidden>
            <button type="button" id="lf-passkey" class="auth-btn auth-btn-primary">
                <i class="fa-light fa-fingerprint"></i> Sign in with a passkey
            </button>
            <div class="auth-divider">or with your password</div>
        </div>

        {{-- 2) Password (Fortify owns this POST + 2FA challenge + throttle). --}}
        <form method="POST" action="{{ route('login') }}">
            @csrf
            <input type="hidden" name="login" id="lf-login">
            <div class="form-field">
                <div class="form-row">
                    <label class="form-label" for="password" style="margin:0;">Password</label>
                    @if (Route::has('password.request'))
                        <a class="auth-link" href="{{ route('password.request') }}">Forgot password?</a>
                    @endif
                </div>
                <div class="input-group"><span class="input-group-text"><i class="fa-light fa-lock"></i></span>
                    <input class="form-control" id="password" name="password" type="password" required autocomplete="current-password"></div>
                @error('password')<div class="match-status no-match">{{ $message }}</div>@enderror
            </div>
            <label class="auth-remember" style="margin-bottom:1rem;"><input type="checkbox" name="remember"> Keep me signed in</label>
            <button type="submit" class="auth-btn auth-btn-primary"><i class="fa-light fa-right-to-bracket"></i> Sign in</button>
        </form>

        <div class="auth-divider">or get a one-time link / code</div>

        {{-- 3) Passwordless — each is enumeration-safe (send-or-silently-noop). --}}
        <div style="display:flex;flex-direction:column;gap:.5rem;">
            <form method="POST" action="{{ route('otp.email') }}">
                @csrf<input type="hidden" name="email" class="lf-email-hidden">
                <button type="submit" class="auth-btn auth-btn-ghost" style="width:100%;"><i class="fa-light fa-hashtag"></i> Email me a 6-digit code</button>
            </form>
            <form method="POST" action="{{ route('magic.email') }}">
                @csrf<input type="hidden" name="email" class="lf-email-hidden">
                <button type="submit" class="auth-btn auth-btn-ghost" style="width:100%;"><i class="fa-light fa-wand-magic-sparkles"></i> Email me a sign-in link</button>
            </form>
            <form method="POST" action="{{ route('otp.sms') }}">
                @csrf<input type="hidden" name="email" class="lf-email-hidden">
                <button type="submit" class="auth-btn auth-btn-ghost" style="width:100%;"><i class="fa-light fa-comment-sms"></i> Text me a code</button>
            </form>
        </div>
    </div>

    @vite('resources/js/passkeys.js')
    <script>
        (function () {
            var s1 = document.getElementById('lf-step1'), s2 = document.getElementById('lf-step2');
            var email = document.getElementById('lf-email');
            if (!s1 || !s2 || !email) return;

            function toStep2() {
                if (!email.checkValidity()) { email.reportValidity(); return; }
                var v = email.value.trim();
                document.getElementById('lf-email-display').textContent = v;
                document.getElementById('lf-login').value = v;
                document.querySelectorAll('.lf-email-hidden').forEach(function (i) { i.value = v; });
                s1.hidden = true; s2.hidden = false;
                var pw = document.getElementById('password'); if (pw) pw.focus();
            }
            document.getElementById('lf-email-form').addEventListener('submit', function (e) { e.preventDefault(); toStep2(); });
            document.getElementById('lf-change').addEventListener('click', function (e) {
                e.preventDefault(); s2.hidden = true; s1.hidden = false; email.focus();
            });

            // Only reveal the passkey option on a device with a built-in biometric
            // authenticator (Option A) — desktops without one keep password/code/link.
            var pkWrap = document.getElementById('lf-passkey-wrap');
            if (pkWrap && window.PublicKeyCredential && window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable) {
                window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
                    .then(function (ok) { if (ok) pkWrap.hidden = false; })
                    .catch(function () {});
            }

            var pk = document.getElementById('lf-passkey');
            if (pk) pk.addEventListener('click', async function () {
                if (!window.SflPasskeys || !window.SflPasskeys.isSupported()) { return; }
                pk.disabled = true;
                try {
                    var r = await window.SflPasskeys.verify();
                    window.location = (r && r.redirect) ? r.redirect : '{{ route('dashboard') }}';
                } catch (e) { pk.disabled = false; }
            });

            // Server bounced back (e.g. wrong password) with the email remembered → reopen step 2.
            @if ($errors->any() || old('login') || old('email'))
                if (email.value) { toStep2(); }
            @endif
        })();
    </script>
</x-guest-layout>