{{-- Shared phone-first auth form (ТЗ §5.2). Used by /login and the header modal. --}}
@php($providers = app(\App\Services\Auth\OAuthAdapterManager::class)->availableKeys())
@php($providerLabels = ['yandex' => 'Яндекс ID', 'vk' => 'VK ID', 'sber' => 'Сбер ID', 'apple' => 'Apple'])

{{-- Вход через Apple живёт только внутри мобильного приложения. Он заведён не
     ради удобства, а ради App Store: раз приложение предлагает вход через
     Яндекс и VK, Apple требует и свой (Guideline 4.8). На сайте кнопки нет. --}}
@php($providers = array_values(array_filter(
    $providers,
    fn ($key) => $key !== 'apple' || app(\App\Services\Mobile\MobileAppContext::class)->isApp(),
)))
{{-- Модалка висит в layout на КАЖДОЙ странице, поэтому её заголовок обязан быть
     h2: иначе у карточки товара и категории оказывалось по два H1 (SEO §10).
     На собственной странице /login форма — главный контент, там h1.

     Имя переменной намеренно длинное и «своё». Blade при @extends отдаёт в layout
     ВСЕ локальные переменные вьюхи, в том числе оставшиеся от @foreach, а @include
     наследует область видимости целиком. С коротким $heading карточка товара
     подставляла сюда заголовок своего блока, и в модалке печаталось
     «<Похожие товары class=…>Вход в teeu». --}}
@php($authHeadingTag = $authHeadingTag ?? 'h2')

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

<div x-data="authForm({ sitekey: @js($captchaKey) })" class="w-full max-w-sm">
    <{{ $authHeadingTag }} class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Вход в teeu</{{ $authHeadingTag }}>
    <p class="mt-1 text-sm text-[var(--color-slate)]">Быстрый вход по номеру телефона — звонок вместо SMS.</p>

    {{-- Error --}}
    <template x-if="error">
        <div class="mt-4 rounded-[var(--radius-md)] bg-[#FDECEE] px-4 py-3 text-sm font-semibold text-[var(--color-sale)]" x-text="error"></div>
    </template>

    @error('oauth')
        <div class="mt-4 rounded-[var(--radius-md)] bg-[#FDECEE] px-4 py-3 text-sm font-semibold text-[var(--color-sale)]">{{ $message }}</div>
    @enderror

    {{-- Step 1: phone --}}
    <form x-show="step === 'phone'" @submit.prevent="start()" class="mt-5 space-y-3">
        <label class="block">
            <span class="mb-1.5 block text-sm font-semibold text-[var(--color-ink)]">Номер телефона</span>
            <input :value="phone" @input="onPhoneInput($event)" type="tel" inputmode="tel" autocomplete="tel"
                   maxlength="18" placeholder="+7 (900) 000-00-00"
                   class="w-full rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-3 text-[15px] outline-none transition focus:border-[var(--color-primary)] focus:shadow-[0_0_0_4px_rgba(24,119,255,0.12)]">
        </label>

        {{-- Обязательное согласие перед входом --}}
        <div class="space-y-2 pt-1">
            <label class="flex items-start gap-2.5 text-[13px] leading-snug text-[var(--color-slate)]">
                <input type="checkbox" x-model="agreePrivacy"
                       class="mt-0.5 h-4 w-4 shrink-0 accent-[var(--color-primary)]">
                <span>Я соглашаюсь с <a href="{{ route('privacy') }}" target="_blank" class="font-semibold text-[var(--color-primary)] hover:underline">Политикой конфиденциальности</a></span>
            </label>
            <label class="flex items-start gap-2.5 text-[13px] leading-snug text-[var(--color-slate)]">
                <input type="checkbox" x-model="agreeConsent"
                       class="mt-0.5 h-4 w-4 shrink-0 accent-[var(--color-primary)]">
                <span>Я даю <a href="{{ route('consent') }}" target="_blank" class="font-semibold text-[var(--color-primary)] hover:underline">согласие на обработку персональных данных</a></span>
            </label>
        </div>

        <button type="submit" :disabled="loading || !consented"
                class="flex w-full items-center justify-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-primary)] px-6 py-3.5 text-[15px] font-bold text-white shadow-[var(--shadow-primary)] transition hover:bg-[var(--color-primary-dark)] disabled:cursor-not-allowed disabled:opacity-60">
            <span x-show="!loading">Получить звонок</span>
            <span x-show="loading">Отправляем…</span>
        </button>

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

    {{-- Step 2: code --}}
    <form x-show="step === 'code'" x-cloak @submit.prevent="verify()" class="mt-5 space-y-3">
        <p class="text-sm text-[var(--color-slate)]">
            Мы звоним на <span class="font-bold text-[var(--color-ink)]" x-text="formattedPhone"></span>.
            Введите <b>последние 4 цифры</b> входящего номера.
        </p>
        {{-- maxlength = 8, хотя код дозвона четырёхзначный: столько же занимает код
             демо-входа для модераторов сторов (App\Services\Auth\DemoAccount). Обычный
             пользователь вводит 4 цифры по подсказке выше — запас ему не мешает. --}}
        <input x-model="code" inputmode="numeric" maxlength="8" placeholder="0000"
               class="w-full rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-3 text-center font-mono text-2xl tracking-[0.5em] outline-none transition focus:border-[var(--color-primary)] focus:shadow-[0_0_0_4px_rgba(24,119,255,0.12)]">
        <button type="submit" :disabled="loading"
                class="flex w-full items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-primary)] px-6 py-3.5 text-[15px] font-bold text-white shadow-[var(--shadow-primary)] transition hover:bg-[var(--color-primary-dark)] disabled:opacity-60">
            <span x-show="!loading">Войти</span>
            <span x-show="loading">Проверяем…</span>
        </button>
        <button type="button" @click="back()" class="w-full text-sm font-semibold text-[var(--color-muted)] hover:text-[var(--color-primary)]">
            Изменить номер
        </button>
    </form>

    {{-- OAuth providers --}}
    @if (count($providers))
        <div class="my-5 flex items-center gap-3 text-xs font-semibold uppercase tracking-wide text-[var(--color-muted)]">
            <span class="h-px flex-1 bg-[var(--color-line)]"></span>или<span class="h-px flex-1 bg-[var(--color-line)]"></span>
        </div>
        <div class="space-y-2">
            @foreach ($providers as $key)
                <a href="{{ route('auth.redirect', $key) }}"
                   :href="'{{ route('auth.redirect', $key) }}' + ($store.authModal?.next ? '?next=' + $store.authModal.next : '')"
                   @click="if (!consented) { $event.preventDefault(); error = 'Отметьте согласие с политикой и обработкой персональных данных, чтобы продолжить.' }"
                   :aria-disabled="!consented ? 'true' : 'false'"
                   :class="!consented && 'opacity-50'"
                   @class([
                       'flex w-full items-center justify-center gap-2 rounded-[var(--radius-md)] px-4 py-3 text-sm font-bold transition',
                       // Apple проверяет оформление своей кнопки на ревью: чёрный
                       // фон, белый текст, свой логотип рядом.
                       'bg-black text-white hover:bg-[#1a1a1a]' => $key === 'apple',
                       'border-[1.5px] border-[#E1E4EA] bg-white text-[var(--color-ink)] hover:border-[var(--color-primary)]' => $key !== 'apple',
                   ])>
                    @if ($key === 'apple')
                        <svg viewBox="0 0 16 20" class="h-[18px] w-[18px]" fill="currentColor" aria-hidden="true">
                            <path d="M13.3 10.6c0-2.2 1.8-3.3 1.9-3.3-1-1.5-2.6-1.7-3.2-1.7-1.4-.1-2.7.8-3.3.8-.7 0-1.7-.8-2.8-.8-1.5 0-2.8.8-3.6 2.1-1.5 2.6-.4 6.5 1.1 8.6.7 1 1.6 2.2 2.7 2.2 1.1 0 1.5-.7 2.8-.7 1.3 0 1.6.7 2.8.7 1.2 0 1.9-1 2.6-2.1.8-1.2 1.2-2.4 1.2-2.4s-2.2-.9-2.2-3.4ZM11.1 4.2c.6-.7 1-1.7.9-2.7-.9 0-2 .6-2.6 1.3-.6.6-1.1 1.7-.9 2.6 1 .1 2-.5 2.6-1.2Z"/>
                        </svg>
                        Войти через Apple
                    @else
                        Войти через {{ $providerLabels[$key] ?? $key }}
                    @endif
                </a>
            @endforeach
        </div>
    @endif
</div>