{{-- Содержимое формы авторизации (телефон — основной, почта — вторичный, Яндекс).
     Требует обёртки x-data="authModal()". Используется в модалке и на /login, /register. --}}

{{-- Ключ капчи публичный (ysc1_…) — он и предназначен для разметки. Пустой
     означает «проверка выключена»: форма тогда ведёт себя как раньше.
     Живёт здесь, а не в лейауте: партиал общий для модалки и обеих страниц,
     а лейаутов два (app и guest). --}}
@php($captchaKey = app(\App\Services\Auth\SmartCaptcha::class)->isEnabled()
    ? app(\App\Services\Auth\SmartCaptcha::class)->clientKey()
    : '')

<div x-show="error" x-cloak class="mb-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700" x-text="error"></div>
<div x-show="notice && !error" x-cloak class="mb-4 rounded-lg bg-brand-50 px-4 py-3 text-sm text-brand-800" x-text="notice"></div>

{{-- ===================== РЕЖИМ: ТЕЛЕФОН (основной) ===================== --}}
<div x-show="mode === 'phone'">
    {{-- Шаг 1: ввод номера --}}
    <form x-show="phoneStep === 'input'" @submit.prevent="startPhone()" class="space-y-4">
        <h2 class="text-lg font-bold">Вход или регистрация</h2>
        <p class="text-sm text-muted">Введите номер телефона — мы позвоним, и вы укажете последние 4 цифры номера, с которого поступит звонок.</p>
        <div>
            <label class="mb-1 block text-sm font-medium text-gray-700">Телефон</label>
            <input type="tel" inputmode="tel" x-model="phone" @input="onPhoneInput($event)" required
                   placeholder="+7 (900) 000-00-00" class="input text-lg tracking-wide">
        </div>
        <button type="submit" class="btn-brand w-full" :disabled="loading || !phoneFilled()"
                :class="(loading || !phoneFilled()) && 'opacity-50 cursor-not-allowed'">
            <span x-show="!loading">Получить код по звонку</span>
            <span x-show="loading" x-cloak>Звоним…</span>
        </button>
        <p class="text-xs text-muted">
            Продолжая, вы соглашаетесь с
            <a href="{{ route('page.show', 'privacy-policy') }}" target="_blank" class="font-medium text-brand-700 underline">политикой конфиденциальности</a>
            и даёте согласие на
            <a href="{{ route('page.show', 'personal-data-consent') }}" target="_blank" class="font-medium text-brand-700 underline">обработку персональных данных</a>.
        </p>

        {{-- Сюда встаёт невидимый виджет SmartCaptcha: проверка всплывает поверх
             страницы после нажатия кнопки, до этого капча даже не загружается. --}}
        <div x-ref="captcha" data-sitekey="{{ $captchaKey }}"></div>
    </form>

    {{-- Шаг 2: ввод 4 цифр из звонка --}}
    <form x-show="phoneStep === 'code'" x-cloak @submit.prevent="verifyPhone()" class="space-y-4">
        <p class="text-sm text-muted">На номер <b x-text="formatPhone(phone)"></b> поступит звонок. Введите <b>последние 4 цифры</b> номера, с которого позвонили.</p>
        <div>
            <label class="mb-1 block text-sm font-medium text-gray-700">Код из звонка</label>
            <input type="text" x-model="phoneCode" inputmode="numeric" autocomplete="one-time-code" maxlength="4" required
                   class="input text-center text-2xl tracking-[0.5em]" placeholder="0000">
        </div>
        <button type="submit" class="btn-brand w-full" :disabled="loading">
            <span x-show="!loading">Подтвердить</span>
            <span x-show="loading" x-cloak>Подождите…</span>
        </button>
        <div class="flex items-center justify-between text-sm">
            <button type="button" @click="startPhone(true)" class="font-medium text-brand-600 hover:underline">Позвонить ещё раз</button>
            <button type="button" @click="backToPhoneInput()" class="text-muted hover:text-gray-700">Изменить номер</button>
        </div>
    </form>

    {{-- Переключатель на вход по почте --}}
    <div x-show="phoneStep === 'input'" class="mt-4 text-center text-sm">
        <button type="button" @click="useEmail()" class="font-medium text-brand-600 hover:underline">Войти по почте</button>
    </div>
</div>

{{-- ===================== РЕЖИМ: ПОЧТА (вторичный) ===================== --}}
<div x-show="mode === 'email'" x-cloak>
    {{-- Вкладки (скрыты на шагах кода/сброса) --}}
    <div class="mb-5 flex border-b border-gray-100" x-show="step === 'form'">
        <button type="button" @click="switchTab('login')"
                class="border-b-2 px-4 py-2 text-sm font-medium transition"
                :class="tab === 'login' ? 'border-brand-500 text-brand-700' : 'border-transparent text-gray-500'">
            Вход
        </button>
        <button type="button" @click="switchTab('register')"
                class="border-b-2 px-4 py-2 text-sm font-medium transition"
                :class="tab === 'register' ? 'border-brand-500 text-brand-700' : 'border-transparent text-gray-500'">
            Регистрация
        </button>
    </div>

    {{-- Шаг 1: форма входа/регистрации по почте --}}
    <form x-show="step === 'form'" @submit.prevent="submit()" class="space-y-4">
        <div x-show="tab === 'register'" x-cloak>
            <label class="mb-1 block text-sm font-medium text-gray-700">Имя</label>
            <input type="text" x-model="form.name" class="input">
        </div>

        <div>
            <label class="mb-1 block text-sm font-medium text-gray-700">Почта</label>
            <input type="email" x-model="form.email" required class="input">
        </div>
        <div>
            <label class="mb-1 block text-sm font-medium text-gray-700">Пароль</label>
            <input type="password" x-model="form.password" required class="input">
        </div>

        <div x-show="tab === 'register'" x-cloak>
            <label class="mb-1 block text-sm font-medium text-gray-700">Повторите пароль</label>
            <input type="password" x-model="form.password_confirmation" class="input">
        </div>

        <div x-show="tab === 'login'" class="flex items-center justify-between">
            <label class="flex items-center gap-2 text-sm text-gray-600">
                <input type="checkbox" x-model="form.remember" class="rounded border-gray-300 text-brand-500 focus:ring-brand-300">
                Запомнить меня
            </label>
            <button type="button" @click="forgotPassword()" class="text-sm font-medium text-brand-600 hover:underline">Забыли пароль?</button>
        </div>

        <div x-show="tab === 'register'" x-cloak class="space-y-2">
            <label class="flex items-start gap-2 text-sm text-gray-600">
                <input type="checkbox" x-model="form.agree_privacy" class="mt-0.5 rounded border-gray-300 text-brand-500 focus:ring-brand-300">
                <span>Отправляя форму, я соглашаюсь с <a href="{{ route('page.show', 'privacy-policy') }}" target="_blank" class="font-medium text-brand-700 underline">политикой конфиденциальности</a></span>
            </label>
            <label class="flex items-start gap-2 text-sm text-gray-600">
                <input type="checkbox" x-model="form.agree_personal_data" class="mt-0.5 rounded border-gray-300 text-brand-500 focus:ring-brand-300">
                <span>Отправляя форму, я даю согласие на <a href="{{ route('page.show', 'personal-data-consent') }}" target="_blank" class="font-medium text-brand-700 underline">обработку персональных данных</a></span>
            </label>
        </div>

        <button type="submit" class="btn-brand w-full"
                :disabled="loading || (tab === 'register' && (!form.agree_privacy || !form.agree_personal_data))"
                :class="(tab === 'register' && (!form.agree_privacy || !form.agree_personal_data)) && 'opacity-50 cursor-not-allowed'">
            <span x-show="!loading" x-text="tab === 'login' ? 'Войти' : 'Создать аккаунт'"></span>
            <span x-show="loading" x-cloak>Подождите…</span>
        </button>

        {{-- Переключатель обратно на телефон --}}
        <div class="text-center text-sm">
            <button type="button" @click="usePhone()" class="font-medium text-brand-600 hover:underline">Войти по телефону</button>
        </div>
    </form>

    {{-- Шаг 2: ввод кода из письма (после регистрации) --}}
    <form x-show="step === 'verify'" x-cloak @submit.prevent="verifyCode()" class="space-y-4">
        <p class="text-sm text-muted">Мы отправили код подтверждения на <b x-text="verifyEmail"></b>. Введите его, чтобы завершить регистрацию.</p>
        <div>
            <label class="mb-1 block text-sm font-medium text-gray-700">Код из письма</label>
            <input type="text" x-model="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" required
                   class="input text-center text-2xl tracking-[0.5em]" placeholder="000000">
        </div>
        <button type="submit" class="btn-brand w-full" :disabled="loading">
            <span x-show="!loading">Подтвердить</span>
            <span x-show="loading" x-cloak>Подождите…</span>
        </button>
        <div class="flex items-center justify-between text-sm">
            <button type="button" @click="resendCode()" class="font-medium text-brand-600 hover:underline">Отправить ещё раз</button>
            <button type="button" @click="step = 'form'; tab = 'register'; error = ''; notice = ''" class="text-muted hover:text-gray-700">Назад</button>
        </div>
    </form>

    {{-- Сброс пароля, шаг 1: ввод почты --}}
    <form x-show="step === 'forgot'" x-cloak @submit.prevent="sendResetCode()" class="space-y-4">
        <p class="text-sm text-muted">Введите почту, привязанную к аккаунту — мы отправим на неё код для смены пароля.</p>
        <div>
            <label class="mb-1 block text-sm font-medium text-gray-700">Почта</label>
            <input type="email" x-model="form.email" required class="input">
        </div>
        <button type="submit" class="btn-brand w-full" :disabled="loading">
            <span x-show="!loading">Отправить код</span>
            <span x-show="loading" x-cloak>Подождите…</span>
        </button>
        <button type="button" @click="backToLogin()" class="w-full text-sm text-muted hover:text-gray-700">Назад ко входу</button>
    </form>

    {{-- Сброс пароля, шаг 2: код из письма + новый пароль --}}
    <form x-show="step === 'reset'" x-cloak @submit.prevent="resetPassword()" class="space-y-4">
        <p class="text-sm text-muted">Мы отправили код на <b x-text="verifyEmail"></b>. Введите его и задайте новый пароль.</p>
        <div>
            <label class="mb-1 block text-sm font-medium text-gray-700">Код из письма</label>
            <input type="text" x-model="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" required
                   class="input text-center text-2xl tracking-[0.5em]" placeholder="000000">
        </div>
        <div>
            <label class="mb-1 block text-sm font-medium text-gray-700">Новый пароль</label>
            <input type="password" x-model="form.password" required class="input">
        </div>
        <div>
            <label class="mb-1 block text-sm font-medium text-gray-700">Повторите пароль</label>
            <input type="password" x-model="form.password_confirmation" required class="input">
        </div>
        <button type="submit" class="btn-brand w-full" :disabled="loading">
            <span x-show="!loading">Сохранить пароль</span>
            <span x-show="loading" x-cloak>Подождите…</span>
        </button>
        <div class="flex items-center justify-between text-sm">
            <button type="button" @click="resendResetCode()" class="font-medium text-brand-600 hover:underline">Отправить ещё раз</button>
            <button type="button" @click="backToLogin()" class="text-muted hover:text-gray-700">Назад</button>
        </div>
    </form>
</div>

{{-- ===================== Соцвход (Яндекс) — на стартовых шагах ===================== --}}
<template x-if="(mode === 'phone' && phoneStep === 'input') || (mode === 'email' && step === 'form')">
    <div>
        <div class="my-5 flex items-center gap-3 text-xs text-muted">
            <span class="h-px flex-1 bg-gray-100"></span>или<span class="h-px flex-1 bg-gray-100"></span>
        </div>

        <a href="{{ route('auth.yandex') }}"
           class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2.5 font-medium text-gray-800 transition hover:bg-gray-50">
            <span class="grid h-5 w-5 place-items-center rounded bg-red-500 text-sm font-bold text-white">Я</span>
            <span>Войти через Яндекс</span>
        </a>
    </div>
</template>