// Function to initialize number input buttons
function initNumberInputs(container = document) {
    container.querySelectorAll('.number-input-wrapper').forEach(function(wrapper) {
        const input = wrapper.querySelector('input[type="number"]');
        const decreaseBtn = wrapper.querySelector('[data-action="decrease"]');
        const increaseBtn = wrapper.querySelector('[data-action="increase"]');

        if (!input || !decreaseBtn || !increaseBtn) return;

        // Skip if already initialized
        if (decreaseBtn.hasAttribute('data-initialized')) return;

        const step = parseFloat(input.getAttribute('step')) || 1;
        const min = 0;
        const max = input.getAttribute('max') ? parseFloat(input.getAttribute('max')) : null;

        decreaseBtn.addEventListener('click', function() {
            const currentValue = parseFloat(input.value) || 0;
            const newValue = currentValue - step;

            if (min === null || newValue >= min) {
                input.value = newValue;
                input.dispatchEvent(new Event('change', { bubbles: true }));
            }
        });

        increaseBtn.addEventListener('click', function() {
            const currentValue = parseFloat(input.value) || 0;
            const newValue = currentValue + step;

            if (max === null || newValue <= max) {
                input.value = newValue;
                input.dispatchEvent(new Event('change', { bubbles: true }));
            }
        });

        // Validate input on change
        input.addEventListener('input', function() {
            const value = parseFloat(this.value);

            if (min !== null && value < min) {
                this.value = min;
            }
            if (max !== null && value > max) {
                this.value = max;
            }
        });

        // Mark as initialized
        decreaseBtn.setAttribute('data-initialized', 'true');
        increaseBtn.setAttribute('data-initialized', 'true');
    });
}

export { initNumberInputs };