{{-- DRAWER LATERAL DE AUTENTICAÇÃO — apenas perfil de cliente --}}
<div id="authDrawer" class="hidden fixed inset-0 z-[130]">

    <div id="authDrawerOverlay" onclick="closeAuthDrawer()"
        class="absolute inset-0 bg-black/85 backdrop-blur-sm opacity-0 transition-opacity duration-300"></div>

    <aside id="authDrawerPanel"
        class="absolute top-0 right-0 h-full w-full max-w-md flex flex-col border-l border-white/10 shadow-2xl shadow-black translate-x-full transition-transform duration-300 ease-out"
        style="background:#0a0a0a;">

        {{-- Header --}}
        <div class="flex items-start justify-between gap-3 p-5 border-b border-white/5 shrink-0">
            <div>
                <h3 id="authDrawerTitle" class="font-heading font-bold text-white text-lg m-0">{{ __('Entrar como cliente') }}</h3>
                <p id="authDrawerSubtitle" class="text-brand-green text-xs font-semibold m-0 mt-0.5">{{ __('Necessário para concluir sua reserva') }}</p>
            </div>
            <button type="button" onclick="closeAuthDrawer()"
                class="bg-transparent border-0 text-gray-500 hover:text-white cursor-pointer transition-colors p-1 shrink-0">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
        </div>

        {{-- Tabs --}}
        <div class="px-5 pt-5 shrink-0">
            <div class="grid grid-cols-2 gap-1 p-1 bg-white/5 border border-white/10 rounded-xl">
                <button type="button" id="authTabLogin" onclick="setAuthTab('login')"
                    class="py-2.5 rounded-lg text-sm font-semibold border-0 cursor-pointer transition-all">{{ __('Entrar') }}</button>
                <button type="button" id="authTabRegister" onclick="setAuthTab('register')"
                    class="py-2.5 rounded-lg text-sm font-semibold border-0 cursor-pointer transition-all">{{ __('Criar conta') }}</button>
            </div>
        </div>

        <div class="p-5 overflow-y-auto flex-1">

            {{-- ── ENTRAR ── --}}
            <form id="authLoginForm" onsubmit="submitQuickLogin(event)" class="flex flex-col gap-5">

                <div class="flex flex-col gap-1.5">
                    <label for="authLoginEmail" class="text-sm font-medium text-gray-300">{{ __('E-mail') }}</label>
                    <input id="authLoginEmail" type="email" name="email" placeholder="you@example.com" required autocomplete="username"
                        class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                </div>

                <div class="flex flex-col gap-1.5">
                    <label for="authLoginPassword" class="text-sm font-medium text-gray-300">{{ __('Senha') }}</label>
                    <div class="relative">
                        <input id="authLoginPassword" type="password" name="password" placeholder="••••••••" required autocomplete="current-password"
                            class="w-full px-4 py-3 pr-11 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                        <button type="button" onclick="toggleAuthPassword('authLoginPassword', 'authLoginEye')"
                            class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-gray-300 transition-colors bg-transparent border-0 cursor-pointer">
                            <svg id="authLoginEye" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <div id="authLoginFeedback" class="hidden flex items-start gap-2.5 px-4 py-3 rounded-xl text-xs leading-relaxed"></div>

                <button id="authLoginBtn" type="submit"
                    class="w-full py-3 rounded-xl bg-brand-green text-white font-semibold text-sm hover:bg-brand-green-dark hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand-green/25 transition-all duration-300 cursor-pointer border-0 flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed disabled:translate-y-0">
                    <span id="authLoginBtnText">{{ __('Entrar') }}</span>
                    <svg id="authLoginBtnSpinner" class="hidden animate-spin size-4" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                    </svg>
                </button>

                <div class="flex items-center gap-3">
                    <div class="flex-1 h-px bg-white/10"></div>
                    <span class="text-gray-600 text-xs">{{ __('ou continue com') }}</span>
                    <div class="flex-1 h-px bg-white/10"></div>
                </div>

                <a href="{{ route('auth.google') }}?redirect={{ urlencode(request()->getRequestUri()) }}"
                    class="w-full flex items-center justify-center gap-3 py-3 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 transition-all no-underline text-white text-sm font-medium">
                    <x-google-icon />
                    {{ __('Entrar com Google') }}
                </a>

                <p class="text-center text-gray-500 text-sm m-0">
                    {{ __('Não tem uma conta?') }}
                    <button type="button" onclick="setAuthTab('register')"
                        class="text-brand-green hover:text-brand-green-dark font-medium bg-transparent border-0 cursor-pointer p-0 text-sm">
                        {{ __('Cadastre-se') }}
                    </button>
                </p>
            </form>

            {{-- ── CRIAR CONTA (CLIENTE) ── --}}
            <form id="authRegisterForm" onsubmit="submitQuickRegister(event)" class="hidden flex-col gap-4">

                <div class="flex items-start gap-2.5 px-4 py-3 rounded-xl bg-brand-green/5 border border-brand-green/15">
                    <i class="fa-solid fa-user text-brand-green text-xs mt-0.5 shrink-0"></i>
                    <p class="text-xs text-gray-400 leading-relaxed m-0">
                        {{ __('Crie sua conta de cliente e encontre os melhores profissionais.') }}
                    </p>
                </div>

                {{-- E-mail: busca antes de liberar o formulário --}}
                <div id="authRegEmailSearch" class="flex flex-col gap-1.5">
                    <label for="authRegEmail" class="text-sm font-medium text-gray-300">{{ __('E-mail') }}</label>
                    <div class="relative">
                        <input id="authRegEmail" type="email" name="email" placeholder="you@example.com" required autocomplete="email"
                            class="w-full px-4 py-3 pr-12 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                        <button type="button" onclick="quickCheckEmail()"
                            class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-brand-green transition-colors bg-transparent border-0 cursor-pointer">
                            <svg id="authRegSearchIcon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                            </svg>
                            <svg id="authRegSearchSpinner" class="hidden animate-spin" width="17" height="17" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                            </svg>
                        </button>
                    </div>
                    <span id="authRegEmailFeedback" class="text-xs hidden"></span>
                </div>

                {{-- E-mail confirmado --}}
                <div id="authRegEmailDisplay" class="hidden flex-col items-center gap-1 text-center">
                    <p id="authRegEmailText" class="text-white font-semibold text-base tracking-wide m-0"></p>
                    <span id="authRegEmailDisplayFeedback" class="text-xs hidden"></span>
                    <button type="button" onclick="resetQuickRegisterEmail()"
                        class="text-xs text-gray-500 hover:text-white bg-transparent border-0 cursor-pointer p-0 mt-0.5">
                        {{ __('Usar outro e-mail') }}
                    </button>
                </div>

                {{-- Campos liberados após a busca --}}
                <div id="authRegFields" class="hidden flex-col gap-4">

                    <div class="flex flex-col gap-1.5">
                        <label for="authRegName" class="text-sm font-medium text-gray-300">{{ __('Nome completo') }}</label>
                        <input id="authRegName" type="text" name="name" placeholder="{{ __('Seu nome') }}" required autocomplete="name"
                            class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                    </div>

                    <div class="flex flex-col gap-1.5">
                        <label for="authRegPhone" class="text-sm font-medium text-gray-300">
                            {{ __('Telefone') }}
                            <span class="text-gray-600 font-normal text-xs ml-1">{{ __('(opcional)') }}</span>
                        </label>
                        <x-phone-input id="authRegPhone" name="phone" :required="false" placeholder="(11) 99999-9999"
                            input-class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors" />
                    </div>

                    <div id="authRegPasswordSection" class="flex flex-col gap-1.5">
                        <label for="authRegPassword" class="text-sm font-medium text-gray-300">
                            {{ __('Senha') }} <span class="text-red-400 ml-0.5">*</span>
                        </label>
                        <div class="relative">
                            <input id="authRegPassword" type="password" name="password" placeholder="••••••••" required autocomplete="new-password"
                                oninput="sanitizeAuthPassword(this); checkAuthPasswordRules(this.value)"
                                class="w-full px-4 py-3 pr-11 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                            <button type="button" onclick="toggleAuthPassword('authRegPassword', 'authRegEye')"
                                class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-gray-300 transition-colors bg-transparent border-0 cursor-pointer">
                                <svg id="authRegEye" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                </svg>
                            </button>
                        </div>
                        <div id="authRegPasswordRules" class="hidden grid grid-cols-2 gap-x-4 gap-y-1 mt-1">
                            <span id="authRule-min"     class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> {{ __('Mín. 6 caracteres') }}</span>
                            <span id="authRule-upper"   class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> {{ __('1 letra maiúscula') }}</span>
                            <span id="authRule-number"  class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> {{ __('1 número') }}</span>
                            <span id="authRule-special" class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> {{ __('1 caractere especial') }}</span>
                        </div>
                    </div>

                    <div id="authRegConfirmSection" class="flex flex-col gap-1.5">
                        <label for="authRegPasswordConfirm" class="text-sm font-medium text-gray-300">
                            {{ __('Confirmar senha') }} <span class="text-red-400 ml-0.5">*</span>
                        </label>
                        <div class="relative">
                            <input id="authRegPasswordConfirm" type="password" name="password_confirmation" placeholder="••••••••" required autocomplete="new-password"
                                oninput="sanitizeAuthPassword(this); checkAuthConfirm()"
                                class="w-full px-4 py-3 pr-11 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                            <button type="button" onclick="toggleAuthPassword('authRegPasswordConfirm', 'authRegConfirmEye')"
                                class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-gray-300 transition-colors bg-transparent border-0 cursor-pointer">
                                <svg id="authRegConfirmEye" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                </svg>
                            </button>
                        </div>
                        <span id="authRegConfirmFeedback" class="text-xs hidden"></span>
                    </div>

                    <div id="authRegVerifyNotice" class="flex items-start gap-2.5 px-4 py-3 rounded-xl bg-brand-green/5 border border-brand-green/15">
                        <svg class="shrink-0 mt-0.5" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round">
                            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
                        </svg>
                        <p class="text-xs text-gray-400 leading-relaxed m-0">
                            {{ __('Após criar sua conta você receberá um e-mail de verificação. Confirme para poder entrar.') }}
                        </p>
                    </div>

                    <div id="authRegFeedback" class="hidden flex items-start gap-2.5 px-4 py-3 rounded-xl text-xs leading-relaxed"></div>

                    <button id="authRegBtn" type="submit"
                        class="w-full py-3 rounded-xl bg-brand-green text-white font-semibold text-sm hover:bg-brand-green-dark hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand-green/25 transition-all duration-300 cursor-pointer border-0 flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed disabled:translate-y-0">
                        <span id="authRegBtnText">{{ __('Criar conta') }}</span>
                        <svg id="authRegBtnSpinner" class="hidden animate-spin size-4" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                        </svg>
                    </button>
                </div>

                <div class="flex items-center gap-3">
                    <div class="flex-1 h-px bg-white/10"></div>
                    <span class="text-gray-600 text-xs">{{ __('ou continue com') }}</span>
                    <div class="flex-1 h-px bg-white/10"></div>
                </div>

                <a href="{{ route('auth.google') }}?redirect={{ urlencode(request()->getRequestUri()) }}"
                    class="w-full flex items-center justify-center gap-3 py-3 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 transition-all no-underline text-white text-sm font-medium">
                    <x-google-icon />
                    {{ __('Cadastrar com Google') }}
                </a>

                <p class="text-center text-gray-500 text-sm m-0">
                    {{ __('Já tem uma conta?') }}
                    <button type="button" onclick="setAuthTab('login')"
                        class="text-brand-green hover:text-brand-green-dark font-medium bg-transparent border-0 cursor-pointer p-0 text-sm">
                        {{ __('Entrar') }}
                    </button>
                </p>
            </form>

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

<script>
    const AUTH_LOGIN_URL     = "{{ route('auth.quick-login') }}";
    const AUTH_REGISTER_URL  = "{{ route('auth.quick-register') }}";
    const AUTH_CHECK_EMAIL   = "{{ route('check-email') }}";
    const AUTH_RESEND_URL    = "{{ route('resend-verification-email') }}";
    const AUTH_CSRF          = "{{ csrf_token() }}";

    const AUTH_TAB_ON  = 'py-2.5 rounded-lg text-sm font-semibold border-0 cursor-pointer transition-all bg-brand-green text-[#0a0a0a]';
    const AUTH_TAB_OFF = 'py-2.5 rounded-lg text-sm font-semibold border-0 cursor-pointer transition-all bg-transparent text-gray-400 hover:text-white';

    let authRegEmailVerified = false;
    let authRegIsExisting    = false;
    // Conta existente pode não ter senha (criada pelo Google): nesse caso
    // ela é pedida mesmo com authRegIsExisting = true.
    let authRegNeedsPassword = true;

    function openAuthDrawer(tab = 'login') {
        const drawer = document.getElementById('authDrawer');
        drawer.classList.remove('hidden');
        document.body.style.overflow = 'hidden';

        setAuthTab(tab);

        requestAnimationFrame(() => requestAnimationFrame(() => {
            document.getElementById('authDrawerOverlay').classList.replace('opacity-0', 'opacity-100');
            document.getElementById('authDrawerPanel').classList.remove('translate-x-full');
        }));
    }

    function closeAuthDrawer() {
        document.getElementById('authDrawerOverlay').classList.replace('opacity-100', 'opacity-0');
        document.getElementById('authDrawerPanel').classList.add('translate-x-full');
        document.body.style.overflow = 'auto';
        setTimeout(() => document.getElementById('authDrawer').classList.add('hidden'), 300);
    }

    function setAuthTab(tab) {
        const isLogin = tab !== 'register';

        document.getElementById('authTabLogin').className    = isLogin ? AUTH_TAB_ON : AUTH_TAB_OFF;
        document.getElementById('authTabRegister').className  = isLogin ? AUTH_TAB_OFF : AUTH_TAB_ON;

        const loginForm = document.getElementById('authLoginForm');
        const regForm   = document.getElementById('authRegisterForm');

        loginForm.classList.toggle('hidden', !isLogin);
        loginForm.classList.toggle('flex', isLogin);
        regForm.classList.toggle('hidden', isLogin);
        regForm.classList.toggle('flex', !isLogin);

        document.getElementById('authDrawerTitle').textContent = isLogin
            ? "{{ __('Entrar como cliente') }}"
            : "{{ __('Criar conta de cliente') }}";
        document.getElementById('authDrawerSubtitle').textContent = isLogin
            ? "{{ __('Necessário para concluir sua reserva') }}"
            : "{{ __('Leva menos de um minuto') }}";
    }

    function toggleAuthPassword(inputId, eyeId) {
        const input = document.getElementById(inputId);
        const eye   = document.getElementById(eyeId);
        if (input.type === 'password') {
            input.type = 'text';
            eye.innerHTML = '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>';
        } else {
            input.type = 'password';
            eye.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
        }
    }

    function setAuthFeedback(id, html, tone) {
        const el = document.getElementById(id);
        if (!el) return;

        if (!html) {
            el.className = 'hidden';
            el.innerHTML = '';
            return;
        }

        const tones = {
            error:   'bg-red-500/8 border border-red-500/25 text-red-300',
            warning: 'bg-amber-400/8 border border-amber-400/25 text-amber-200',
            success: 'bg-brand-green/8 border border-brand-green/25 text-brand-green',
        };

        el.className = 'flex items-start gap-2.5 px-4 py-3 rounded-xl text-xs leading-relaxed ' + (tones[tone] ?? tones.error);
        el.innerHTML = html;
    }

    async function submitQuickLogin(e) {
        e.preventDefault();

        const btn     = document.getElementById('authLoginBtn');
        const text    = document.getElementById('authLoginBtnText');
        const spinner = document.getElementById('authLoginBtnSpinner');
        const email   = document.getElementById('authLoginEmail').value.trim();

        setAuthFeedback('authLoginFeedback', '', 'error');
        btn.disabled = true;
        text.textContent = "{{ __('Entrando...') }}";
        spinner.classList.remove('hidden');

        try {
            const res = await fetch(AUTH_LOGIN_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': AUTH_CSRF,
                },
                body: JSON.stringify({ email: email, password: document.getElementById('authLoginPassword').value }),
            });
            const data = await res.json().catch(() => ({}));

            if (res.ok && data.status === 'ok') {
                text.textContent = "{{ __('Pronto!') }}";
                window.location.reload();
                return;
            }

            if (data.status === 'no_customer_role') {
                setAuthFeedback(
                    'authLoginFeedback',
                    `<i class="fa-solid fa-circle-exclamation mt-0.5 shrink-0"></i>
                     <span>{{ __('Esta conta não possui o perfil de cliente. Cadastre-se como cliente para poder reservar.') }}
                        <button type="button" onclick="setAuthTab('register')" class="underline font-semibold bg-transparent border-0 cursor-pointer p-0 text-inherit text-xs">{{ __('Criar conta de cliente') }}</button>
                     </span>`,
                    'warning'
                );
            } else if (data.status === 'unverified') {
                setAuthFeedback(
                    'authLoginFeedback',
                    `<i class="fa-solid fa-envelope mt-0.5 shrink-0"></i>
                     <span>{{ __('Sua conta ainda não foi verificada.') }}
                        <button type="button" id="authResendBtn" onclick="resendQuickVerification()" class="underline font-semibold bg-transparent border-0 cursor-pointer p-0 text-inherit text-xs">{{ __('Reenviar e-mail') }}</button>
                     </span>`,
                    'warning'
                );
            } else {
                setAuthFeedback(
                    'authLoginFeedback',
                    `<i class="fa-solid fa-circle-xmark mt-0.5 shrink-0"></i><span>${data.message || "{{ __('Credenciais inválidas.') }}"}</span>`,
                    'error'
                );
            }
        } catch (_) {
            setAuthFeedback('authLoginFeedback', `<i class="fa-solid fa-plug-circle-xmark mt-0.5 shrink-0"></i><span>{{ __('Erro de conexão. Tente novamente.') }}</span>`, 'error');
        }

        btn.disabled = false;
        text.textContent = "{{ __('Entrar') }}";
        spinner.classList.add('hidden');
    }

    async function resendQuickVerification() {
        const btn = document.getElementById('authResendBtn');
        if (!btn) return;

        btn.disabled = true;
        btn.textContent = "{{ __('Enviando...') }}";

        try {
            const res = await fetch(AUTH_RESEND_URL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': AUTH_CSRF },
                body: JSON.stringify({ email: document.getElementById('authLoginEmail').value.trim() }),
            });
            const data = await res.json().catch(() => ({}));

            btn.textContent = data.status === 'already_verified'
                ? "{{ __('E-mail já verificado.') }}"
                : "{{ __('E-mail enviado!') }}";
        } catch (_) {
            btn.textContent = "{{ __('Erro ao enviar.') }}";
            btn.disabled = false;
        }
    }

    async function quickCheckEmail() {
        const input    = document.getElementById('authRegEmail');
        const feedback = document.getElementById('authRegEmailFeedback');
        const icon     = document.getElementById('authRegSearchIcon');
        const spinner  = document.getElementById('authRegSearchSpinner');
        const value    = input.value.trim();

        if (!value || !value.includes('@')) {
            feedback.textContent = "{{ __('Informe um e-mail válido.') }}";
            feedback.className   = 'text-xs text-red-400';
            return;
        }

        icon.classList.add('hidden');
        spinner.classList.remove('hidden');
        feedback.className = 'text-xs hidden';

        try {
            const res = await fetch(AUTH_CHECK_EMAIL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': AUTH_CSRF },
                body: JSON.stringify({ email: value, idrole: 3 }),
            });
            const data = await res.json().catch(() => ({}));

            if (data.status === 'already_registered') {
                feedback.textContent = "{{ __('Este e-mail já está cadastrado como cliente. Entre para continuar.') }}";
                feedback.className   = 'text-xs text-red-400';
                authRegEmailVerified = false;
                document.getElementById('authRegFields').classList.add('hidden');
                document.getElementById('authRegFields').classList.remove('flex');
                return;
            }

            if (data.status === 'user_exists' && data.user) {
                document.getElementById('authRegName').value = data.user.name ?? '';
                if (data.user.phone && window.PhoneInput) window.PhoneInput.setNumber('authRegPhone', data.user.phone);

                // Conta criada pelo Google não tem senha: aqui ela escolhe uma.
                const hasPassword = data.has_password !== false;

                showQuickRegisterFields(
                    hasPassword
                        ? "{{ __('Conta encontrada. Confirme os dados para criar seu perfil de cliente.') }}"
                        : "{{ __('Conta encontrada, mas ainda sem senha. Defina uma senha para acessar sua conta.') }}",
                    'text-yellow-400',
                    true,
                    hasPassword
                );
            } else {
                showQuickRegisterFields("{{ __('E-mail disponível. Preencha os dados para criar sua conta.') }}", 'text-brand-green', false, false);
            }
        } catch (_) {
            feedback.textContent = "{{ __('Erro ao verificar e-mail. Tente novamente.') }}";
            feedback.className   = 'text-xs text-red-400';
        } finally {
            icon.classList.remove('hidden');
            spinner.classList.add('hidden');
        }
    }

    function showQuickRegisterFields(message, messageClass, isExisting, hasPassword = false) {
        authRegIsExisting = isExisting;
        // Só some com os campos de senha quando a conta já tem uma.
        authRegNeedsPassword = !isExisting || !hasPassword;

        document.getElementById('authRegEmailSearch').classList.add('hidden');
        document.getElementById('authRegEmailSearch').classList.remove('flex');

        const display = document.getElementById('authRegEmailDisplay');
        display.classList.remove('hidden');
        display.classList.add('flex');
        document.getElementById('authRegEmailText').textContent = document.getElementById('authRegEmail').value.trim();

        const displayFeedback = document.getElementById('authRegEmailDisplayFeedback');
        displayFeedback.textContent = message;
        displayFeedback.className   = 'text-xs ' + messageClass;
        displayFeedback.classList.remove('hidden');

        const passwordSection = document.getElementById('authRegPasswordSection');
        const confirmSection  = document.getElementById('authRegConfirmSection');
        const verifyNotice    = document.getElementById('authRegVerifyNotice');
        const password        = document.getElementById('authRegPassword');
        const confirm         = document.getElementById('authRegPasswordConfirm');

        if (authRegNeedsPassword) {
            passwordSection.classList.remove('hidden');
            confirmSection.classList.remove('hidden');
            verifyNotice.classList.remove('hidden');
            password.setAttribute('required', '');
            confirm.setAttribute('required', '');
        } else {
            passwordSection.classList.add('hidden');
            confirmSection.classList.add('hidden');
            verifyNotice.classList.add('hidden');
            password.removeAttribute('required');
            confirm.removeAttribute('required');
        }

        const fields = document.getElementById('authRegFields');
        fields.classList.remove('hidden');
        fields.classList.add('flex');
        authRegEmailVerified = true;
    }

    function resetQuickRegisterEmail() {
        authRegEmailVerified = false;
        authRegIsExisting    = false;
        authRegNeedsPassword = true;

        const search = document.getElementById('authRegEmailSearch');
        search.classList.remove('hidden');
        search.classList.add('flex');

        const display = document.getElementById('authRegEmailDisplay');
        display.classList.add('hidden');
        display.classList.remove('flex');

        const fields = document.getElementById('authRegFields');
        fields.classList.add('hidden');
        fields.classList.remove('flex');

        document.getElementById('authRegEmailFeedback').className = 'text-xs hidden';
        setAuthFeedback('authRegFeedback', '', 'error');
        document.getElementById('authRegEmail').focus();
    }

    function sanitizeAuthPassword(input) {
        input.value = input.value.replace(/['"<>]/g, '');
    }

    function checkAuthPasswordRules(value) {
        document.getElementById('authRegPasswordRules').classList.remove('hidden');
        setAuthRule('authRule-min',     value.length >= 6);
        setAuthRule('authRule-upper',   /[A-Z]/.test(value));
        setAuthRule('authRule-number',  /[0-9]/.test(value));
        setAuthRule('authRule-special', /[^a-zA-Z0-9]/.test(value));
    }

    function setAuthRule(id, ok) {
        const el = document.getElementById(id);
        if (!el) return;
        el.className = 'text-xs flex items-center gap-1 ' + (ok ? 'text-brand-green' : 'text-gray-600');
        el.querySelector('.rule-dot').textContent = ok ? '✓' : '·';
    }

    function checkAuthConfirm() {
        const password = document.getElementById('authRegPassword').value;
        const confirm  = document.getElementById('authRegPasswordConfirm').value;
        const feedback = document.getElementById('authRegConfirmFeedback');

        if (!confirm) {
            feedback.className = 'text-xs hidden';
            return;
        }

        if (password === confirm) {
            feedback.textContent = "✓ {{ __('Senhas coincidem') }}";
            feedback.className   = 'text-xs text-brand-green';
        } else {
            feedback.textContent = "{{ __('As senhas não coincidem') }}";
            feedback.className   = 'text-xs text-red-400';
        }
    }

    async function submitQuickRegister(e) {
        e.preventDefault();

        if (!authRegEmailVerified) {
            resetQuickRegisterEmail();
            return;
        }

        const password = document.getElementById('authRegPassword').value;
        const confirm  = document.getElementById('authRegPasswordConfirm').value;

        if (authRegNeedsPassword && password !== confirm) {
            checkAuthConfirm();
            document.getElementById('authRegPasswordConfirm').focus();
            return;
        }

        const btn     = document.getElementById('authRegBtn');
        const text    = document.getElementById('authRegBtnText');
        const spinner = document.getElementById('authRegBtnSpinner');

        setAuthFeedback('authRegFeedback', '', 'error');
        btn.disabled = true;
        text.textContent = "{{ __('Criando conta...') }}";
        spinner.classList.remove('hidden');

        const payload = {
            name:                  document.getElementById('authRegName').value.trim(),
            email:                 document.getElementById('authRegEmail').value.trim(),
            password:              authRegNeedsPassword ? password : null,
            password_confirmation: authRegNeedsPassword ? confirm  : null,
            phone:                 window.PhoneInput ? window.PhoneInput.digits('authRegPhone') : '',
            has_existing_account:  authRegIsExisting    ? '1' : '0',
            needs_password:        authRegNeedsPassword ? '1' : '0',
        };

        try {
            const res = await fetch(AUTH_REGISTER_URL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': AUTH_CSRF },
                body: JSON.stringify(payload),
            });
            const data = await res.json().catch(() => ({}));

            if (res.ok && data.status === 'ok') {
                showToast(data.message, 'success', 8000);

                if (data.password_sent) {
                    showToast("{{ __('Sua conta foi criada com o Google e não tinha senha. Enviamos uma senha de acesso para o seu e-mail.') }}", 'info', 8000);
                }

                document.getElementById('authLoginEmail').value = payload.email;
                resetQuickRegisterEmail();
                setAuthTab('login');

                if (!data.needs_verification) {
                    document.getElementById('authLoginPassword').focus();
                } else {
                    setAuthFeedback(
                        'authLoginFeedback',
                        `<i class="fa-solid fa-envelope mt-0.5 shrink-0"></i><span>${data.message}</span>`,
                        'success'
                    );
                }
            } else {
                setAuthFeedback(
                    'authRegFeedback',
                    `<i class="fa-solid fa-circle-xmark mt-0.5 shrink-0"></i><span>${data.message || "{{ __('Erro ao criar conta.') }}"}</span>`,
                    'error'
                );
            }
        } catch (_) {
            setAuthFeedback('authRegFeedback', `<i class="fa-solid fa-plug-circle-xmark mt-0.5 shrink-0"></i><span>{{ __('Erro de conexão. Tente novamente.') }}</span>`, 'error');
        }

        btn.disabled = false;
        text.textContent = "{{ __('Criar conta') }}";
        spinner.classList.add('hidden');
    }

    document.getElementById('authRegEmail').addEventListener('keydown', (e) => {
        if (e.key === 'Enter') { e.preventDefault(); quickCheckEmail(); }
    });

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !document.getElementById('authDrawer').classList.contains('hidden')) {
            closeAuthDrawer();
        }
    });
</script>