<div>
    @if(! auth()->user()->hasTwoFactorEnabled() && ! $showingQrCode)
        {{-- State 1: Not enabled --}}
        <p class="mb-4">{{ __('daylight::auth.two_factor.setup_instructions') }}</p>

        <button
            wire:click="enableTwoFactor"
            type="button"
            class="button button--primary"
        >
            {{ __('daylight::auth.two_factor.enable') }}
        </button>
    @elseif($showingQrCode)
        {{-- State 2: QR code setup --}}
        <p class="mb-4">{{ __('daylight::auth.two_factor.setup_instructions') }}</p>

        <div class="two-factor-qr mb-4">
            {!! auth()->user()->twoFactorQrCodeSvg() !!}
        </div>

        <div class="mb-4">
            <p class="mb-2">{{ __('daylight::auth.two_factor.manual_entry_key') }}</p>
            <code class="two-factor-secret">
                {{ auth()->user()->twoFactorSecret() }}
            </code>
        </div>

        @if($showingConfirmation)
            <form wire:submit="confirmTwoFactor" class="mt-4">
                <div
                    x-data="{
                        digits: ['', '', '', '', '', ''],
                        focusNext(index) {
                            if (index < 5) {
                                this.$refs['cdigit' + (index + 1)].focus()
                            }
                        },
                        focusPrev(index) {
                            if (index > 0) {
                                this.$refs['cdigit' + (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['cdigit' + i]) {
                                    this.$refs['cdigit' + i].value = this.digits[i]
                                }
                            }

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

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

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

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

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

                <button type="submit" class="button button--primary">
                    {{ __('daylight::auth.two_factor.verify') }}
                </button>
            </form>
        @endif
    @elseif(auth()->user()->hasTwoFactorEnabled())
        {{-- State 3: Enabled --}}
        <div class="alert alert--success mb-4">
            <p>{{ __('daylight::auth.two_factor.enabled') }}</p>
        </div>

        @if($showingRecoveryCodes)
            <div class="mb-4">
                <h3 class="mb-2">{{ __('daylight::auth.two_factor.recovery_codes_title') }}</h3>
                <p class="mb-4">{{ __('daylight::auth.two_factor.recovery_codes_instructions') }}</p>

                <div class="two-factor-recovery-codes mb-4">
                    @foreach(auth()->user()->recoveryCodes() as $code)
                        <div>{{ $code }}</div>
                    @endforeach
                </div>
            </div>
        @endif

        @if($showingDisableConfirmation)
            <form wire:submit="confirmDisableTwoFactor" class="mt-4">
                <div
                    x-data="{
                        digits: ['', '', '', '', '', ''],
                        focusNext(index) {
                            if (index < 5) {
                                this.$refs['ddigit' + (index + 1)].focus()
                            }
                        },
                        focusPrev(index) {
                            if (index > 0) {
                                this.$refs['ddigit' + (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['ddigit' + i]) {
                                    this.$refs['ddigit' + i].value = this.digits[i]
                                }
                            }

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

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

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

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

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

                <div class="buttons">
                    <button type="submit" class="button button--danger">
                        {{ __('daylight::auth.two_factor.disable') }}
                    </button>

                    <button
                        wire:click.prevent="cancelDisable"
                        type="button"
                        class="button button--secondary"
                    >
                        {{ __('daylight::auth.two_factor.cancel') }}
                    </button>
                </div>
            </form>
        @else
            <div class="buttons">
                @if(! $showingRecoveryCodes)
                    <button
                        wire:click="showRecoveryCodes"
                        type="button"
                        class="button button--secondary"
                    >
                        {{ __('daylight::auth.two_factor.show_recovery_codes') }}
                    </button>
                @endif

                <button
                    wire:click="regenerateRecoveryCodes"
                    wire:confirm="{{ __('daylight::general.are_you_sure') }}"
                    type="button"
                    class="button button--secondary"
                >
                    {{ __('daylight::auth.two_factor.regenerate_recovery_codes') }}
                </button>

                <button
                    wire:click="disableTwoFactor"
                    type="button"
                    class="button button--danger"
                >
                    {{ __('daylight::auth.two_factor.disable') }}
                </button>
            </div>
        @endif
    @endif
</div>
