{{-- Global login/register bottom-sheet. Opened by window.fmRequireAuth(next). --}}
<style>[x-cloak]{display:none!important;}</style>
<div x-data="fmLoginSheet()" x-on:fm-login.window="open($event.detail && $event.detail.next, $event.detail && $event.detail.mode)" x-show="show" x-cloak
     style="position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:flex-end;">
    <div @click="show=false" style="position:absolute;inset:0;background:rgba(22,39,27,0.45);backdrop-filter:blur(2px);"></div>

    <div @click.stop style="position:relative;background:var(--surface-card);border-top-left-radius:30px;border-top-right-radius:30px;padding:14px 20px 32px;box-shadow:var(--shadow-xl);">
        <div style="width:40px;height:4px;border-radius:2px;background:var(--paper-4);margin:0 auto 16px;"></div>

        <div style="display:flex;gap:6px;background:var(--paper-2);border-radius:999px;padding:4px;margin-bottom:18px;">
            <button type="button" @click="mode='login';error=''"
                    class="fm-authtab" :class="mode==='login' && 'fm-authtab--on'">Entrar</button>
            <button type="button" @click="mode='register';error=''"
                    class="fm-authtab" :class="mode==='register' && 'fm-authtab--on'">Crear cuenta</button>
        </div>

        <form @submit.prevent="submit()" style="display:flex;flex-direction:column;gap:12px;">
            <template x-if="mode==='register'">
                <div>
                    <label style="font:600 13px/1 var(--font-sans);color:var(--text-secondary);display:block;margin-bottom:6px;">Nombre</label>
                    <input x-model="form.name" type="text" autocomplete="name" class="fm-field" placeholder="Tu nombre">
                </div>
            </template>
            <div>
                <label style="font:600 13px/1 var(--font-sans);color:var(--text-secondary);display:block;margin-bottom:6px;">Correo</label>
                <input x-model="form.email" type="email" autocomplete="email" class="fm-field" placeholder="tucorreo@ejemplo.com">
            </div>
            <div>
                <label style="font:600 13px/1 var(--font-sans);color:var(--text-secondary);display:block;margin-bottom:6px;">Contraseña</label>
                <div style="position:relative;">
                    <input x-model="form.password" :type="ver ? 'text' : 'password'" :autocomplete="mode === 'login' ? 'current-password' : 'new-password'" class="fm-field" placeholder="••••••••" style="padding-right:48px;">
                    <button type="button" @click="ver = !ver" :aria-label="ver ? 'Ocultar contraseña' : 'Mostrar contraseña'"
                            style="position:absolute;top:0;right:0;width:44px;height:100%;border:none;background:none;cursor:pointer;color:var(--ink-400);">
                        <i class="fa-solid" :class="ver ? 'fa-eye-slash' : 'fa-eye'"></i>
                    </button>
                </div>
            </div>

            <a x-show="mode === 'login'" href="{{ route('password.request') }}"
               style="align-self:flex-end;margin-top:-4px;color:var(--green-700);text-decoration:none;font:600 13px var(--font-sans);">¿Has olvidado tu contraseña?</a>

            <p x-show="error" x-text="error" x-cloak style="margin:0;font:500 13px/1.4 var(--font-sans);color:var(--rust-500);"></p>

            <button type="submit" :disabled="busy"
                    style="margin-top:4px;background:var(--gold-500);color:var(--green-900);border:none;border-radius:var(--radius-md);padding:13px;font:700 15px/1 var(--font-sans);cursor:pointer;">
                <span x-text="busy ? 'Un momento…' : (mode==='login' ? 'Entrar' : 'Crear cuenta')"></span>
            </button>
        </form>

        <div style="display:flex;align-items:center;gap:12px;margin:14px 0 12px;color:var(--text-muted);font:500 12.5px var(--font-sans);">
            <span style="flex:1;height:1px;background:var(--border-default);"></span> o <span style="flex:1;height:1px;background:var(--border-default);"></span>
        </div>
        @include('mobile.partials._google-btn', ['next' => 'next || ""'])

        <button type="button" @click="show=false"
                style="width:100%;margin-top:12px;background:none;border:none;cursor:pointer;color:var(--text-muted);font:500 13px/1 var(--font-sans);">
            Seguir explorando sin cuenta
        </button>
    </div>
</div>

<style>
    /* 16px mínimo: evita el auto-zoom de iOS al enfocar (ver .fm-input). */
    .fm-field { width:100%; box-sizing:border-box; border:1.5px solid var(--border-default); border-radius:var(--radius-md);
        background:var(--surface-card); padding:11px 14px; font:400 16px/1.2 var(--font-sans); color:var(--text-primary); }
    .fm-field:focus { outline:none; border-color:var(--green-500); box-shadow:var(--ring-accent); }
    .fm-authtab { flex:1; border:none; cursor:pointer; border-radius:999px; padding:9px 0;
        font:600 14px/1 var(--font-sans); background:transparent; color:var(--text-muted); }
    .fm-authtab--on { background:var(--surface-card); color:var(--text-primary); box-shadow:var(--shadow-sm); }
</style>

<script>
function fmLoginSheet() {
    return {
        show: false, mode: 'login', next: null, busy: false, error: '', ver: false,
        form: { name: '', email: '', password: '' },
        open(next, mode) {
            this.next = next || null;
            this.mode = mode === 'register' ? 'register' : 'login';
            this.error = '';
            this.show = true;
        },
        async submit() {
            this.busy = true; this.error = '';
            try {
                const isLogin = this.mode === 'login';
                const body = isLogin
                    ? { email: this.form.email, password: this.form.password, device_name: 'app-sim' }
                    : { name: this.form.name, email: this.form.email, password: this.form.password, device_name: 'app-sim' };
                const data = await window.fmApi.post(isLogin ? '/login' : '/register', body);
                window.fmLogin(data.token, data.user);
                window.location = this.next || window.FM_ROUTES.home;
            } catch (e) {
                this.error = (e.data && (e.data.message || this.firstError(e.data.errors))) || 'No se pudo continuar. Revisa los datos.';
            } finally {
                this.busy = false;
            }
        },
        firstError(errors) {
            if (!errors) return null;
            const k = Object.keys(errors)[0];
            return k ? errors[k][0] : null;
        },
    };
}
</script>