<div>
    <p class="mb-4">
        @if($usingRecoveryCode)
            {{ __('daylight::auth.two_factor.recovery_code_instructions') }}
        @else
            {{ __('daylight::auth.two_factor.code_instructions') }}
        @endif
    </p>

    <form wire:submit="verify">
        @if($usingRecoveryCode)
            <x-input.group
                for="recoveryCode"
                :label="__('daylight::auth.two_factor.recovery_code')"
                :error="$errors->first('recoveryCode')"
            >
                <x-input.text
                    wire:model="recoveryCode"
                    id="recoveryCode"
                    type="text"
                    autocomplete="one-time-code"
                    autofocus
                />
            </x-input.group>
        @else
            <div
                x-data="{
                    digits: ['', '', '', '', '', ''],
                    focusNext(index) {
                        if (index < 5) {
                            this.$refs['digit' + (index + 1)].focus()
                        }
                    },
                    focusPrev(index) {
                        if (index > 0) {
                            this.$refs['digit' + (index - 1)].focus()
                        }
                    },
                    handleInput(index, event) {
                        const value = event.target.value.replace(/\D/g, '')
                        this.digits[index] = value.charAt(0) || ''
                        event.target.value = this.digits[index]

                        if (this.digits[index]) {
                            this.focusNext(index)
                        }

                        this.syncCode()
                    },
                    handleKeydown(index, event) {
                        if (event.key === 'Backspace') {
                            if (!this.digits[index] && index > 0) {
                                this.focusPrev(index)
                            }
                            this.digits[index] = ''
                            event.target.value = ''
                            this.syncCode()
                        }
                    },
                    handlePaste(event) {
                        event.preventDefault()
                        const paste = (event.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '').substring(0, 6)

                        for (let i = 0; i < 6; i++) {
                            this.digits[i] = paste[i] || ''
                            if (this.$refs['digit' + i]) {
                                this.$refs['digit' + i].value = this.digits[i]
                            }
                        }

                        const lastIndex = Math.min(paste.length, 6) - 1
                        if (lastIndex >= 0 && this.$refs['digit' + lastIndex]) {
                            this.$refs['digit' + lastIndex].focus()
                        }

                        this.syncCode()
                    },
                    syncCode() {
                        const code = this.digits.join('')
                        $wire.set('code', code)

                        if (code.length === 6) {
                            $wire.verify()
                        }
                    }
                }"
                class="mb-4"
            >
                <label class="input-group__label mb-2" style="display: block;">
                    {{ __('daylight::auth.two_factor.code') }}
                </label>

                <div class="otp-input" x-on:paste="handlePaste">
                    @for($i = 0; $i < 6; $i++)
                        <input
                            x-ref="digit{{ $i }}"
                            type="text"
                            inputmode="numeric"
                            pattern="[0-9]*"
                            maxlength="1"
                            autocomplete="one-time-code"
                            class="otp-input__field {{ $errors->has('code') ? 'otp-input__field--error' : '' }}"
                            x-on:input="handleInput({{ $i }}, $event)"
                            x-on:keydown="handleKeydown({{ $i }}, $event)"
                            @if($i === 0) autofocus @endif
                        />
                    @endfor
                </div>

                @error('code')
                    <div class="input-group__error mt-2">{{ $message }}</div>
                @enderror
            </div>
        @endif

        <div class="row align-items-center mt-4">
            <div class="col-6">
                <a href="#" wire:click.prevent="toggleRecoveryCode">
                    @if($usingRecoveryCode)
                        {{ __('daylight::auth.two_factor.use_code') }}
                    @else
                        {{ __('daylight::auth.two_factor.use_recovery_code') }}
                    @endif
                </a>
            </div>

            <div class="col-6 text-right">
                <button type="submit" class="button button--secondary">
                    {{ __('daylight::auth.two_factor.verify') }}
                </button>
            </div>
        </div>
    </form>
</div>
