@php
    $locale = app()->getLocale();
    $authUser = auth()->user();
    $siteAuth = app(\App\Services\Site\SiteAuthService::class);
    $recaptchaEnabled = (bool) config('site_auth.recaptcha_enabled', false)
        && filled(config('services.recaptcha.site_key'));
    $siteAuthBoot = [
        'authenticated' => auth()->check(),
        'user' => $siteAuth->userPayload($authUser),
        'resendSeconds' => (int) config('site_auth.otp_resend_seconds', 60),
        'passwordLoginEnabled' => site_auth_method_enabled('password'),
        'otpLoginEnabled' => site_auth_method_enabled('otp'),
        'recaptchaEnabled' => $recaptchaEnabled,
        'recaptchaSiteKey' => config('services.recaptcha.site_key'),
        'routes' => [
            'sendOtp' => route('site.auth.otp.send', ['locale' => $locale]),
            'verifyOtp' => route('site.auth.otp.verify', ['locale' => $locale]),
            'passwordLogin' => route('site.auth.password.login', ['locale' => $locale]),
            'profile' => route('site.auth.profile', ['locale' => $locale]),
            'logout' => route('site.auth.logout', ['locale' => $locale]),
            'home' => route('site.home', ['locale' => $locale]),
        ],
        'labels' => [
            'invalid' => __('site.auth_otp_invalid'),
            'sendFailed' => __('site.auth_otp_send_failed'),
            'sending' => __('site.auth_sending'),
            'verifying' => __('site.auth_verifying'),
            'passwordInvalid' => __('site.auth_password_invalid'),
            'captchaRequired' => __('site.auth_captcha_required'),
            'loggingIn' => __('site.auth_logging_in'),
        ],
        'intendedUrl' => session('site.url.intended'),
        'openOnLoad' => session('site_auth_required', false),
    ];
@endphp
<div
    x-show="$store.siteAuth.open"
    x-cloak
    class="eca-auth-modal"
    role="dialog"
    aria-modal="true"
    @keydown.escape.window="$store.siteAuth.close()"
>
    <div class="eca-auth-modal__backdrop" @click="$store.siteAuth.close()"></div>
    <div class="eca-auth-modal__panel eca-glass-panel max-h-[min(90dvh,36rem)] overflow-y-auto overscroll-contain">
        <header class="mb-4 flex items-center justify-between gap-3">
            <h2 class="text-lg font-bold eca-theme-text">{{ __('site.auth_modal_title') }}</h2>
            <button type="button" class="site-pressable text-sm eca-theme-text-muted" @click="$store.siteAuth.close()">{{ __('site.close') }}</button>
        </header>

        <div
            class="eca-auth-modal__tabs"
            x-show="$store.siteAuth.step !== 'profile' && $store.siteAuth.step !== 'code' && ($store.siteAuth.otpLoginEnabled || $store.siteAuth.passwordLoginEnabled)"
            :class="{ 'eca-auth-modal__tabs--single': !($store.siteAuth.otpLoginEnabled && $store.siteAuth.passwordLoginEnabled) }"
            x-cloak
        >
            <button
                type="button"
                class="eca-auth-modal__tab"
                :class="{ 'is-active': $store.siteAuth.mode === 'otp' }"
                @click="$store.siteAuth.setMode('otp')"
                x-show="$store.siteAuth.otpLoginEnabled"
            >{{ __('site.auth_tab_otp') }}</button>
            <button
                type="button"
                class="eca-auth-modal__tab"
                :class="{ 'is-active': $store.siteAuth.mode === 'password' }"
                @click="$store.siteAuth.setMode('password')"
                x-show="$store.siteAuth.passwordLoginEnabled"
            >{{ __('site.auth_tab_password') }}</button>
        </div>

        <p x-show="$store.siteAuth.error" x-text="$store.siteAuth.error" class="mb-3 rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-600"></p>

        <div x-show="$store.siteAuth.otpLoginEnabled && $store.siteAuth.mode === 'otp' && $store.siteAuth.step === 'mobile'" class="space-y-4">
            <label class="block text-sm font-medium eca-theme-text">{{ __('site.auth_mobile_label') }}</label>
            <input type="tel" x-model="$store.siteAuth.mobile" class="eca-auth-modal__input" dir="ltr" autocomplete="tel" inputmode="tel" />
            <button type="button" class="site-btn-primary w-full" :disabled="$store.siteAuth.loading || !$store.siteAuth.mobile" @click="$store.siteAuth.sendOtp()">
                <span x-show="!$store.siteAuth.loading">{{ __('site.auth_send_otp') }}</span>
                <span x-show="$store.siteAuth.loading" x-cloak>{{ __('site.auth_sending') }}</span>
            </button>
            <p class="eca-auth-modal__switch" x-show="$store.siteAuth.passwordLoginEnabled">
                {{ __('site.auth_prefer_password') }}
                <button type="button" @click="$store.siteAuth.setMode('password')">{{ __('site.auth_tab_password') }}</button>
            </p>
        </div>

        <div x-show="$store.siteAuth.otpLoginEnabled && $store.siteAuth.mode === 'otp' && $store.siteAuth.step === 'code'" class="space-y-4">
            <label class="block text-sm font-medium eca-theme-text">{{ __('site.auth_otp_label') }}</label>
            <input
                type="text"
                x-model="$store.siteAuth.code"
                maxlength="6"
                class="eca-auth-modal__input text-center tracking-widest"
                dir="ltr"
                inputmode="numeric"
                pattern="[0-9]*"
                autocomplete="one-time-code"
                @input="$store.siteAuth.onCodeInput()"
            />
            <button type="button" class="site-btn-primary w-full" :disabled="$store.siteAuth.loading || $store.siteAuth.code.length !== 6" @click="$store.siteAuth.verify()">
                <span x-show="!$store.siteAuth.loading">{{ __('site.auth_verify') }}</span>
                <span x-show="$store.siteAuth.loading" x-cloak>{{ __('site.auth_verifying') }}</span>
            </button>
            <button
                type="button"
                class="site-btn-outline w-full text-sm"
                :disabled="$store.siteAuth.loading || $store.siteAuth.resendSeconds > 0"
                @click="$store.siteAuth.sendOtp()"
            >
                <span x-show="$store.siteAuth.resendSeconds > 0" x-text="'{{ __('site.auth_resend_in') }}'.replace(':seconds', $store.siteAuth.resendSeconds)"></span>
                <span x-show="$store.siteAuth.resendSeconds <= 0">{{ __('site.auth_resend') }}</span>
            </button>
            <button type="button" class="site-pressable w-full text-sm eca-theme-text-muted" @click="$store.siteAuth.step = 'mobile'">{{ __('site.auth_change_mobile') }}</button>
        </div>

        <div x-show="$store.siteAuth.passwordLoginEnabled && $store.siteAuth.mode === 'password' && $store.siteAuth.step !== 'profile'" class="space-y-4" x-cloak>
            <div>
                <label class="block text-sm font-medium eca-theme-text">{{ __('site.auth_mobile_label') }}</label>
                <input type="tel" x-model="$store.siteAuth.mobile" class="eca-auth-modal__input mt-1.5" dir="ltr" autocomplete="tel" inputmode="tel" />
            </div>
            <div>
                <label class="block text-sm font-medium eca-theme-text">{{ __('site.auth_password_label') }}</label>
                <x-site.password-input
                    class="eca-auth-modal__input"
                    wrapper-class="mt-1.5"
                    autocomplete="current-password"
                    x-model="$store.siteAuth.password"
                />
            </div>
            <label class="eca-auth-modal__remember">
                <input type="checkbox" x-model="$store.siteAuth.remember" class="rounded border-slate-400" />
                <span>{{ __('site.auth_remember') }}</span>
            </label>
            <div
                class="eca-auth-modal__captcha"
                x-show="$store.siteAuth.recaptchaEnabled"
                x-ref="recaptchaHost"
                id="site-auth-recaptcha"
            ></div>
            <button
                type="button"
                class="site-btn-primary w-full"
                :disabled="$store.siteAuth.loading || !$store.siteAuth.mobile || !$store.siteAuth.password"
                @click="$store.siteAuth.loginWithPassword()"
            >
                <span x-show="!$store.siteAuth.loading">{{ __('site.auth_login_password') }}</span>
                <span x-show="$store.siteAuth.loading" x-cloak>{{ __('site.auth_logging_in') }}</span>
            </button>
            <p class="eca-auth-modal__switch" x-show="$store.siteAuth.otpLoginEnabled">
                {{ __('site.auth_no_password_hint') }}
                <button type="button" @click="$store.siteAuth.setMode('otp')">{{ __('site.auth_tab_otp') }}</button>
            </p>
        </div>

        <div x-show="$store.siteAuth.step === 'profile'" class="space-y-4">
            <label class="block text-sm font-medium eca-theme-text">{{ __('site.auth_name_label') }}</label>
            <input type="text" x-model="$store.siteAuth.name" class="eca-auth-modal__input" autocomplete="name" />
            <button type="button" class="site-btn-primary w-full" :disabled="$store.siteAuth.loading" @click="$store.siteAuth.saveProfile()">
                <span x-show="!$store.siteAuth.loading">{{ __('site.auth_save_profile') }}</span>
                <span x-show="$store.siteAuth.loading" x-cloak>{{ __('site.auth_verifying') }}</span>
            </button>
        </div>
    </div>
</div>

<script id="site-auth-boot" type="application/json">@json($siteAuthBoot)</script>
<script>
    document.addEventListener('alpine:init', () => {
        const el = document.getElementById('site-auth-boot');
        const config = el ? JSON.parse(el.textContent) : {};
        Alpine.store('siteAuth').init(config);
        if (config.openOnLoad && !config.authenticated) {
            Alpine.store('siteAuth').show();
        }
    });
</script>