<div class="min-h-screen grid lg:grid-cols-2">

    {{-- LEFT SIDE (BRANDING) --}}
    <div class="hidden lg:flex flex-col justify-between bg-gradient-to-br from-primary to-primary/80 text-white p-10">

        <div>
            <x-logo mode="!fill-white" class="w-40 h-16"/>
        </div>

        <div class="space-y-6 max-w-md">
            <h1 class="text-3xl font-semibold leading-tight">
                {{ t('auth.verify.hero.title') }}
            </h1>

            <p class="text-sm text-white/80">
                {{ t('auth.verify.hero.subtitle') }}
            </p>

            <div class="space-y-2 text-sm text-white/70">
                <div>✓ {{ t('auth.hero.features.reminders') }}</div>
                <div>✓ {{ t('auth.hero.features.assistant') }}</div>
                <div>✓ {{ t('auth.hero.features.cross_device') }}</div>
            </div>
        </div>

        <div class="text-xs text-white/50">
            © {{ date('Y') }} {{ config('app.name') }}. {{ t('auth.hero.copyright') }}
        </div>

    </div>


    {{-- RIGHT SIDE (VERIFY) --}}
    <div class="relative flex items-center justify-center p-6 overflow-hidden">

        <div class="w-full max-w-md space-y-6 z-10">

            {{-- MOBILE LOGO --}}
            <div class="lg:hidden text-center">
                <x-logo class="w-40 h-16 mx-auto"/>
            </div>

            {{-- CARD --}}
            <div class="bg-surface border border-border rounded-2xl p-6 shadow-card space-y-5">

                {{-- HEADER --}}
                <div class="text-center">
                    <h2 class="text-xl font-semibold text-text">
                        {{ t('auth.verify.title') }}
                    </h2>

                    <p class="text-sm text-text-muted">
                        {{ $this->user->email }}
                    </p>
                </div>

                {{-- CODE INPUTS --}}
                <div class="flex justify-center gap-2">

                    @for ($i = 0; $i < 6; $i++)
                        <input
                            type="text"
                            maxlength="1"
                            wire:model.live="code.{{ $i }}"
                            data-index="{{ $i }}"
                            class="code-input w-12 h-12 text-center text-lg font-semibold border rounded-xl
                            {{ $errors->has('code') ? 'border-danger' : 'border-border' }}
                            focus:ring-2 focus:ring-primary focus:border-primary outline-none transition"
                        >
                    @endfor

                </div>

                {{-- ERROR --}}
                <div class="h-4 text-center">
                    @error('code')
                    <p class="text-xs text-danger">{{ $message }}</p>
                    @enderror
                </div>

                {{-- BUTTON --}}
                <button
                    wire:click="verify"
                    class="w-full bg-primary text-white py-3 rounded-xl transition hover:opacity-90"
                >
                    {{ t('auth.verify.button') }}
                </button>

                {{-- RESEND --}}
                <div
                    @if($cooldown > 0)
                        wire:poll.1s="tick"
                    @endif
                    class="text-center text-sm"
                >

                    @if($cooldown > 0)
                        <span class="text-text-muted">{{ t('auth.verify.resend_wait') }} ({{ $cooldown }}s)</span>
                    @else
                        <button
                            wire:click="resend"
                            class="text-primary hover:underline"
                        >
                            {{ t('auth.verify.resend') }}
                        </button>
                    @endif

                </div>
            </div>

        </div>

    </div>

</div>


<script>
    document.addEventListener('input', (e) => {
        if (!e.target.classList.contains('code-input')) return;

        const input = e.target;
        const index = parseInt(input.dataset.index);

        // 🔥 nur Zahlen erlauben
        input.value = input.value.replace(/[^0-9]/g, '');

        // 🔥 nächste Box
        if (input.value && index < 5) {
            const next = document.querySelector(`[data-index="${index + 1}"]`);
            next?.focus();
        }
    });

    document.addEventListener('keydown', (e) => {
        if (!e.target.classList.contains('code-input')) return;

        const input = e.target;
        const index = parseInt(input.dataset.index);

        // 🔥 BACKSPACE → zurück
        if (e.key === 'Backspace' && !input.value && index > 0) {
            const prev = document.querySelector(`[data-index="${index - 1}"]`);
            prev?.focus();
        }

        // 🔥 Pfeile
        if (e.key === 'ArrowLeft' && index > 0) {
            const prev = document.querySelector(`[data-index="${index - 1}"]`);
            prev?.focus();
        }

        if (e.key === 'ArrowRight' && index < 5) {
            const next = document.querySelector(`[data-index="${index + 1}"]`);
            next?.focus();
        }
    });

    document.addEventListener('paste', (e) => {
        if (!e.target.classList.contains('code-input')) return;

        e.preventDefault();

        let paste = (e.clipboardData || window.clipboardData).getData('text');

        // 🔥 nur Zahlen + max 6 Zeichen
        paste = paste.replace(/[^0-9]/g, '').slice(0, 6);

        const inputs = document.querySelectorAll('.code-input');

        paste.split('').forEach((char, i) => {
            if (inputs[i]) {
                inputs[i].value = char;

                // 🔥 Livewire sync
                inputs[i].dispatchEvent(new Event('input'));
            }
        });

        // 🔥 Fokus auf letztes Feld
        const last = document.querySelector(`[data-index="${paste.length - 1}"]`);
        last?.focus();
    });
</script>
