document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.pickr').forEach(pickerContainer => {
        const id = pickerContainer.id.replace('aump-color-picker-', '');
        const colorInput = document.getElementById(`aump-color-input-${id}`);
        const pickrButton = pickerContainer.querySelector('.pcr-button');
        
        // Get default color from data-default attribute
        const defaultColor = colorInput.getAttribute('data-default') || '#ff0000';
        
        // Create reset button
        const resetButton = document.createElement("button");
        resetButton.textContent = "Reset";
        resetButton.type = "button";
        resetButton.classList.add("aump-reset-color");
        pickerContainer.appendChild(resetButton);
        
        const pickr = Pickr.create({
            el: `#${pickerContainer.id} .pcr-button`,
            theme: 'classic',
            default: colorInput.value || defaultColor,
            components: {
                preview: true,
                opacity: true,  
                hue: true,
                interaction: {
                    hex: true,
                    rgba: true, 
                    input: true,
                    clear: true    
                }
            }
        });
        
        // Apply initial color on load
        pickr.on('init', instance => {
            const initialColor = colorInput.value || defaultColor;
            instance.setColor(initialColor);
            pickrButton.style.background = initialColor; // Directly update button background
        });
        
        // Real-time color update
        pickr.on('change', (color) => {
            const colorValue = color.toHEXA().toString();
            colorInput.value = colorValue;

            // Update the specific button dynamically
            pickrButton.style.background = colorValue;

            // Also update only its ::after pseudo-element dynamically
            const afterStyle = document.createElement("style");
            afterStyle.innerHTML = `#${pickerContainer.id} .pcr-button::after { background: ${colorValue} !important; }`;
            document.head.appendChild(afterStyle);
        });
        
        // Save color when user stops interacting
        pickr.on('save', (color) => {
            if (color) {
                const colorValue = color.toHEXA().toString();
                colorInput.value = colorValue;

                // Ensure the specific button updates correctly
                pickrButton.style.background = colorValue;

                // Also update only its ::after pseudo-element dynamically
                const afterStyle = document.createElement("style");
                afterStyle.innerHTML = `#${pickerContainer.id} .pcr-button::after { background: ${colorValue} !important; }`;
                document.head.appendChild(afterStyle);
            }
        });
        
        // Reset to default color when button is clicked
        resetButton.addEventListener("click", function () {
            pickr.setColor(defaultColor);
            colorInput.value = defaultColor;
            pickrButton.style.background = defaultColor;

            // Also reset the ::after pseudo-element
            const afterStyle = document.createElement("style");
            afterStyle.innerHTML = `#${pickerContainer.id} .pcr-button::after { background: ${defaultColor} !important; }`;
            document.head.appendChild(afterStyle);
        });
    });
});