@props([
    'length'    => 4,
    'name'      => 'otp',
    'disabled'  => 'false',       // Alpine expression evaluated in the host scope
    'error'     => 'false',       // Alpine expression evaluated in the host scope
    'autofocus' => true,
])

{{--
    Self-contained OTP input grid. Bubbles two events to the host scope:

      - `otp-input`  detail = { code: '1234', complete: true|false }
                     Fires on every keystroke / paste so the parent can
                     mirror the assembled code into its local state.

      - `otp-complete` detail = { code: '1234' }
                     Fires once when the user has typed exactly `length`
                     digits — handy for auto-submitting on the last keystroke.

    Hosts can also reset the inputs by dispatching `otp-reset` on the
    window OR on the component element:

        this.$dispatch('otp-reset');     // window-level
        // or:
        document.querySelector('.otp-grid')?.dispatchEvent(
            new CustomEvent('otp-reset')
        );

    Why all the indirection?  The page direction may be RTL (Arabic) while
    a 4-digit numeric code is universally read left-to-right. Without
    `direction: ltr` on the grid container, CSS grid flips the cell order
    on RTL pages and the user ends up typing "1234" but storing "4321"
    because index 0 lands in the visually-rightmost cell. Hard-pinning
    LTR here means the host page's direction can be anything.
--}}

<div
    class="otp-grid"
    x-data="otpInput({{ (int) $length }})"
    :class="{ 'otp-grid--error': ({{ $error }}) }"
    @otp-reset.window="reset()"
    @otp-reset="reset()"
    role="group"
    aria-label="{{ $attributes->get('aria-label', 'OTP code input') }}"
>
    @for ($i = 0; $i < (int) $length; $i++)
        <input
            type="text"
            inputmode="numeric"
            autocomplete="one-time-code"
            maxlength="1"
            data-otp-idx="{{ $i }}"
            x-model="digits[{{ $i }}]"
            @input="onInput($event, {{ $i }})"
            @keydown="onKey($event, {{ $i }})"
            @paste="onPaste($event)"
            :disabled="({{ $disabled }})"
            aria-label="{{ __('admin.brand.name') }} OTP digit {{ $i + 1 }}"
            @if ($autofocus && $i === 0) x-init="$nextTick(() => $el.focus())" @endif
            required
        >
    @endfor
</div>

@once
<style>
    /* `direction: ltr` is the fix that anchors index 0 to the LEFT cell
       on RTL pages — otherwise CSS grid flows right-to-left inside an
       Arabic layout and the digits read backwards.

       Inputs are also pinned LTR so the digit visually stays at the
       caret start position on every browser. */
    .otp-grid {
        display: grid;
        direction: ltr;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        max-width: 320px;
        margin: 0 auto;
    }
    .otp-grid > input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        height: 56px;
        padding: 0;
        text-align: center;
        font: inherit;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: 0;
        direction: ltr;
        background: #fff;
        color: #0f172a;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        outline: none;
        transition: border-color .15s, box-shadow .15s;
    }
    .otp-grid > input:hover    { border-color: #94a3b8; }
    .otp-grid > input:focus    { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
    .otp-grid > input:disabled { background: #f8fafc; color: #64748b; cursor: not-allowed; }
    .otp-grid--error > input   { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(248,113,113,.16); }

    @media (max-width: 420px) {
        .otp-grid { gap: 6px; max-width: 280px; }
        .otp-grid > input { height: 48px; font-size: 19px; }
    }
    @media (max-width: 340px) {
        .otp-grid { gap: 5px; max-width: 100%; }
        .otp-grid > input { height: 44px; font-size: 18px; }
    }
</style>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('otpInput', (length) => ({
        length: Math.max(2, Math.min(10, parseInt(length, 10) || 4)),
        digits: [],

        init() {
            // Pre-fill with empty strings — bound via x-model so Alpine
            // can re-render on .reset() without re-mounting the inputs.
            this.digits = Array(this.length).fill('');
        },

        inputs() {
            return Array.from(this.$el.querySelectorAll('input[data-otp-idx]'));
        },
        focusAt(idx) {
            const el = this.inputs()[idx];
            if (el) { el.focus(); el.select?.(); }
        },

        // Emit `otp-input` on every change so the host's `code` variable
        // stays in sync. Once the input is FULL, also emit `otp-complete`
        // so a host can auto-submit on the last keystroke.
        emit() {
            const code = this.digits.join('');
            const complete = code.length === this.length && /^\d+$/.test(code);
            this.$dispatch('otp-input',    { code, complete });
            if (complete) this.$dispatch('otp-complete', { code });
        },

        onInput(event, idx) {
            const raw = (event.target.value || '').replace(/\D/g, '').slice(0, 1);
            this.digits[idx] = raw;
            event.target.value = raw;
            if (raw && idx < this.length - 1) this.focusAt(idx + 1);
            this.emit();
        },

        onKey(event, idx) {
            if (event.key === 'Backspace' && !event.target.value && idx > 0) {
                this.focusAt(idx - 1);
                return;
            }
            // Visual order is LEFT→RIGHT regardless of page dir, so
            // ArrowLeft always means "previous cell" and ArrowRight
            // means "next cell".
            if (event.key === 'ArrowLeft'  && idx > 0)              this.focusAt(idx - 1);
            if (event.key === 'ArrowRight' && idx < this.length-1)  this.focusAt(idx + 1);
        },

        onPaste(event) {
            const txt = (event.clipboardData || window.clipboardData).getData('text') || '';
            const digits = txt.replace(/\D/g, '').slice(0, this.length).split('');
            if (digits.length === 0) return;
            event.preventDefault();
            for (let i = 0; i < this.length; i++) {
                this.digits[i] = digits[i] || '';
            }
            this.focusAt(Math.min(digits.length, this.length - 1));
            this.emit();
        },

        reset() {
            for (let i = 0; i < this.length; i++) this.digits[i] = '';
            this.focusAt(0);
            this.emit();
        },
    }));
});
</script>
@endonce