@php
    /**
     * Reuzywalny widget segmentowych pol kodu (TOTP / recovery).
     * Nie ingeruje w globalny CSS aplikacji - wszystkie klasy sa prefiksowane `twofa-code-*`.
     */
    $fieldName = $fieldName ?? 'code';
    $fieldId = $fieldId ?? 'code';
    $oldValue = $oldValue ?? old($fieldName, '');
    $length = isset($length) ? (int) $length : 6;
    $mode = $mode ?? 'numeric'; // numeric | alnum
    $separatorEvery = isset($separatorEvery) ? (int) $separatorEvery : 0;
    $inactive = isset($inactive) ? (bool) $inactive : false;
    $placeholder = $placeholder ?? ($mode === 'numeric' ? 'np. 123456' : 'np. AAAA-BBBB-CCCC');
    $inputMode = $mode === 'numeric' ? 'numeric' : 'text';
    $pattern = $mode === 'numeric' ? '[0-9]*' : '[A-Za-z0-9]*';
@endphp

<div
    class="twofa-code-widget"
    data-twofa-code-widget
    data-twofa-mode="{{ $mode }}"
    data-twofa-separator-every="{{ $separatorEvery }}"
    data-twofa-inactive="{{ $inactive ? 1 : 0 }}"
>
    <div class="twofa-code-inputs" data-twofa-code-inputs>
        @for ($i = 0; $i < $length; $i++)
            <input
                type="text"
                class="twofa-code-digit"
                inputmode="{{ $inputMode }}"
                pattern="{{ $pattern }}"
                maxlength="1"
                autocomplete="{{ $i === 0 ? 'one-time-code' : 'off' }}"
                aria-label="Znak kodu {{ $i + 1 }}"
            >
        @endfor
    </div>

    {{-- Fallback bez JS: klasyczne pojedyncze pole z kodem --}}
    <input
        id="{{ $fieldId }}"
        type="text"
        class="form-control twofa-code-fallback"
        name="{{ $fieldName }}"
        value="{{ $oldValue }}"
        placeholder="{{ $placeholder }}"
        autocomplete="one-time-code"
        @if($inactive) disabled @endif
    >
</div>

@once
    <style>
        .twofa-code-widget {
            display: block;
        }

        .twofa-code-inputs {
            display: none;
            gap: 10px;
            flex-wrap: wrap;
        }

        .twofa-code-widget.is-js .twofa-code-inputs {
            display: flex;
        }

        .twofa-code-widget.is-js .twofa-code-fallback {
            display: none;
        }

        .twofa-code-widget.is-inactive .twofa-code-inputs {
            pointer-events: none;
            opacity: .45;
        }

        .twofa-code-digit {
            width: 46px;
            height: 64px;
            border: 1px solid #cfcfcf;
            border-radius: 8px;
            background: #f3f3f3;
            font-size: 30px;
            line-height: 1;
            text-align: center;
            outline: none;
            padding: 0;
            box-sizing: border-box;
        }

        .twofa-code-digit:focus {
            border-color: #111;
            box-shadow: none;
            background: #fff;
        }

        .twofa-code-separator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 8px;
            font-size: 22px;
            color: #777;
            font-weight: 700;
            user-select: none;
        }
    </style>

    <script>
        (function () {
            function initCodeWidget(widget) {
                var fallbackInput = widget.querySelector('.twofa-code-fallback');
                var digitInputs = Array.prototype.slice.call(widget.querySelectorAll('.twofa-code-digit'));
                if (!fallbackInput || !digitInputs.length) {
                    return;
                }

                var mode = (widget.getAttribute('data-twofa-mode') || 'numeric').toLowerCase();
                var separatorEvery = parseInt(widget.getAttribute('data-twofa-separator-every') || '0', 10);

                widget.classList.add('is-js');

                function sanitize(value) {
                    var text = (value || '').toString();
                    if (mode === 'alnum') {
                        return text.replace(/[^a-z0-9]/gi, '').toUpperCase();
                    }

                    return text.replace(/\D/g, '');
                }

                function formatWithSeparator(value) {
                    if (!separatorEvery || separatorEvery < 1) {
                        return value;
                    }

                    var chunks = [];
                    for (var i = 0; i < value.length; i += separatorEvery) {
                        chunks.push(value.slice(i, i + separatorEvery));
                    }
                    return chunks.join('-');
                }

                function syncFromDigits() {
                    var raw = digitInputs.map(function (input) {
                        return input.value || '';
                    }).join('');
                    fallbackInput.value = formatWithSeparator(raw);
                }

                function fillDigitsFromValue(rawValue) {
                    var value = sanitize(rawValue).slice(0, digitInputs.length);
                    digitInputs.forEach(function (input, index) {
                        input.value = value[index] || '';
                    });
                    syncFromDigits();
                }

                function setActive(active) {
                    widget.classList.toggle('is-inactive', !active);
                    fallbackInput.disabled = !active;
                    digitInputs.forEach(function (input) {
                        input.disabled = !active;
                    });
                }

                function insertVisualSeparators() {
                    if (!separatorEvery || separatorEvery < 1) {
                        return;
                    }

                    var container = widget.querySelector('[data-twofa-code-inputs]');
                    if (!container) {
                        return;
                    }

                    var currentInputs = Array.prototype.slice.call(container.querySelectorAll('.twofa-code-digit'));
                    currentInputs.forEach(function (input, index) {
                        if (index > 0 && index % separatorEvery === 0) {
                            var sep = document.createElement('span');
                            sep.className = 'twofa-code-separator';
                            sep.textContent = '-';
                            container.insertBefore(sep, input);
                        }
                    });
                }

                insertVisualSeparators();
                fillDigitsFromValue(fallbackInput.value);
                setActive(widget.getAttribute('data-twofa-inactive') !== '1');

                digitInputs.forEach(function (input, index) {
                    input.addEventListener('input', function () {
                        var digit = sanitize(input.value).slice(-1);
                        input.value = digit;

                        if (digit && index < digitInputs.length - 1) {
                            digitInputs[index + 1].focus();
                            digitInputs[index + 1].select();
                        }

                        syncFromDigits();
                    });

                    input.addEventListener('keydown', function (event) {
                        if (event.key === 'Backspace' && !input.value && index > 0) {
                            digitInputs[index - 1].focus();
                            digitInputs[index - 1].value = '';
                            syncFromDigits();
                            event.preventDefault();
                        }

                        if (event.key === 'ArrowLeft' && index > 0) {
                            digitInputs[index - 1].focus();
                            event.preventDefault();
                        }

                        if (event.key === 'ArrowRight' && index < digitInputs.length - 1) {
                            digitInputs[index + 1].focus();
                            event.preventDefault();
                        }
                    });

                    input.addEventListener('paste', function (event) {
                        var pasted = '';
                        if (event.clipboardData && event.clipboardData.getData) {
                            pasted = event.clipboardData.getData('text');
                        }
                        fillDigitsFromValue(pasted);

                        var firstEmpty = digitInputs.find(function (field) {
                            return !field.value;
                        });
                        (firstEmpty || digitInputs[digitInputs.length - 1]).focus();
                        event.preventDefault();
                    });
                });

                var form = fallbackInput.closest('form');
                if (form) {
                    form.addEventListener('submit', function () {
                        syncFromDigits();
                    });
                }

                widget.addEventListener('twofa-widget-toggle', function (event) {
                    var isActive = !!(event && event.detail && event.detail.active);
                    widget.setAttribute('data-twofa-inactive', isActive ? '0' : '1');
                    setActive(isActive);
                    if (!isActive) {
                        digitInputs.forEach(function (input) {
                            input.value = '';
                        });
                        fallbackInput.value = '';
                    }
                });
            }

            document.addEventListener('DOMContentLoaded', function () {
                var widgets = document.querySelectorAll('[data-twofa-code-widget]');
                widgets.forEach(function (widget) {
                    initCodeWidget(widget);
                });
            });
        })();
    </script>
@endonce