@props([
    'id' => 'global-conv-' . uniqid(),
    'label' => 'Porcentaje de conversión',
    'endpoint'
])

<div {{ $attributes->merge(['class' => 'js-global-conversion-widget border border-complement100 bg-white rounded-lg p-4 md:p-5']) }} 
     data-endpoint="{{ $endpoint }}"
     data-id="{{ $id }}">
    
    <div class="flex flex-col md:flex-row items-start md:items-center">
        <div class="md:flex-1 mb-2 md:mb-0">
            <p class="text-parrafo text-black">{{ $label }}</p>
        </div>
        <div id="status-{{ $id }}" class="md:min-w-[100px] shrink-0 flex justify-end">
            <h2 class="text-black font-medium text-size-title hidden" id="value-{{ $id }}">0%</h2>
            <div class="loader-spinner animate-spin rounded-full h-5 w-5 border-b-2 border-primary"></div>
        </div>
    </div>

    <div class="flex items-end space-x-4 mt-4">
        <div class="px-4 py-2 rounded-md border border-primary shrink-0">
            <span class="text-size-small-heading font-medium text-primary" id="period-{{ $id }}">...</span>
        </div>
        <div class="flex-1">
            <p class="text-size-small-heading font-medium text-accent mb-1">Conversión total</p>
            <progress id="progress-{{ $id }}" 
                      class="w-full h-1 rounded-full appearance-none overflow-hidden
                             [&::-webkit-progress-bar]:bg-surface 
                             [&::-webkit-progress-value]:bg-primary200 
                             [&::-moz-progress-bar]:bg-primary200" 
                      max="100" value="0">
            </progress>
        </div>
    </div>
</div>

@once
<script>
    const GlobalConversionRenderer = {
        render(id, data) {
            const valueEl = document.getElementById(`value-${id}`);
            const periodEl = document.getElementById(`period-${id}`);
            const progressEl = document.getElementById(`progress-${id}`);
            const statusDiv = document.getElementById(`status-${id}`);
            const spinner = statusDiv.querySelector('.loader-spinner');

            if (spinner) spinner.classList.add('hidden');
            
            if (valueEl) {
                valueEl.innerText = `${data.value}%`;
                valueEl.classList.remove('hidden');
            }
            if (periodEl) periodEl.innerText = data.label_period;
            if (progressEl) progressEl.value = data.value;
        }
    };

    async function loadGlobalConversionWidget(widget) {
        const { endpoint, id } = widget.dataset;

        try {
            const params = new URLSearchParams(window.location.search);
            const separator = endpoint.includes('?') ? '&' : '?';
            const response = await fetch(`${endpoint}${separator}${params.toString()}`);
            
            if (!response.ok) throw new Error('Error');
            const data = await response.json();
            
            GlobalConversionRenderer.render(id, data);
        } catch (e) {
            console.error("Error cargando conversión global:", e);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.js-global-conversion-widget').forEach(loadGlobalConversionWidget);
    });
</script>
@endonce