@props([
    'id' => 'status-metric-' . uniqid(),
    'label' => '',
    'endpoint',
    'percentage' => null
])

<div {{ $attributes->merge(['class' => 'js-metric-status-widget border border-complement100 bg-white rounded-lg p-4 md:p-5 flex flex-col md:flex-row']) }} 
     data-endpoint="{{ $endpoint }}"
     data-id="{{ $id }}">
    
    <div class="md:flex-1 mb-4 md:mb-0">
        <h3 class="text-accent text-parrafo">{{ $label }}</h3>
        
        <div id="status-{{ $id }}" class="flex items-center mt-1">
            <div class="loader-spinner animate-spin rounded-full h-5 w-5 border-b-2 border-primary"></div>
            <div class="error-message hidden">
                <button type="button" class="btn-retry text-size-small text-primary underline">Reintentar</button>
            </div>
        </div>

        <h2 class="hidden text-size-subtitle text-black font-medium" id="value-{{ $id }}">0</h2>
    </div>

    @if($percentage)
    <div class="md:self-end md:min-w-[100px] shrink-0 pl-4 flex justify-end">
        <span class="bg-success100 rounded-full text-complement200 py-1 px-2 text-center text-size-small">
            {{ $percentage }}
        </span>
    </div>
    @endif
</div>

@once
<script>
    const StatusMetricDataProvider = {
        async get(url) {
            const params = new URLSearchParams(window.location.search);
            // Agregamos un cache breaker o nos aseguramos de que la URL esté bien formada
            const separator = url.includes('?') ? '&' : '?';
            const response = await fetch(`${url}${separator}${params.toString()}`);
            
            if (response.status === 429) throw new Error('429');
            if (!response.ok) throw new Error('Error');
            return await response.json();
        }
    };

    const StatusMetricRenderer = {
        render(id, data) {
            const valueEl = document.getElementById(`value-${id}`);
            const statusDiv = document.getElementById(`status-${id}`);
            
            if (statusDiv) {
                statusDiv.classList.add('hidden'); // Oculta el spinner/error
            }
            if (valueEl) {
                valueEl.innerText = data.value;
                valueEl.classList.remove('hidden'); // Muestra el número
                valueEl.style.display = 'block'; // Refuerzo por si Tailwind tiene conflictos
            }
        }
    };

    async function loadStatusMetricWidget(widget) {
        const { endpoint, id } = widget.dataset;
        const statusDiv = document.getElementById(`status-${id}`);
        const valueEl = document.getElementById(`value-${id}`);
        
        if (!statusDiv || !valueEl) return;

        const spinner = statusDiv.querySelector('.loader-spinner');
        const errorDiv = statusDiv.querySelector('.error-message');

        // Estado inicial de carga
        spinner.classList.remove('hidden');
        errorDiv.classList.add('hidden');
        valueEl.classList.add('hidden');
        statusDiv.classList.remove('hidden');

        try {
            const data = await StatusMetricDataProvider.get(endpoint);
            StatusMetricRenderer.render(id, data);
        } catch (e) {
            console.error("Error cargando widget:", id, e);
            spinner.classList.add('hidden');
            errorDiv.classList.remove('hidden');
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.js-metric-status-widget').forEach(widget => {
            loadStatusMetricWidget(widget);

            widget.querySelector('.btn-retry')?.addEventListener('click', (e) => {
                e.preventDefault();
                loadStatusMetricWidget(widget);
            });
        });
    });
</script>
@endonce