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

<div {{ $attributes->merge(['class' => 'js-metric-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">
        <p class="text-parrafo text-black">{{ $label }}</p>
    </div>

    <div class="md:min-w-[100px] shrink-0 pl-4 flex justify-end items-center relative min-h-[40px]">
        <div id="status-{{ $id }}" class="flex items-center justify-center">
            <div class="loader-spinner animate-spin rounded-full h-5 w-5 border-b-2 border-primary"></div>
            
            <div class="error-message hidden text-center">
                <x-buttons.button type="button" variant="text-blue" class="btn-retry">Reintentar</x-buttons.button>
            </div>
        </div>
        <h2 id="value-{{ $id }}" class="hidden text-black font-medium text-size-title leading-none">0</h2>
    </div>
</div>

@once
<script>
    const MetricDataProvider = {
        async get(url) {
            const params = new URLSearchParams(window.location.search);
            const response = await fetch(`${url}?${params.toString()}`);
            if (response.status === 429) throw new Error('429');
            if (!response.ok) throw new Error('Error');

            return await response.json();
        }
    };

    const MetricRenderer = {
        render(id, data) {
            const valueEl = document.getElementById(`value-${id}`);
            const statusDiv = document.getElementById(`status-${id}`);
            
            statusDiv.classList.add('hidden');
            valueEl.innerText = data.value;
            valueEl.classList.remove('hidden');
        }
    };

    async function loadMetricWidget(widget) {
        const { endpoint, id } = widget.dataset;
        const statusDiv = document.getElementById(`status-${id}`);
        const valueEl = document.getElementById(`value-${id}`);
        const spinner = statusDiv.querySelector('.loader-spinner');
        const errorDiv = statusDiv.querySelector('.error-message');

        spinner.classList.remove('hidden');
        errorDiv.classList.add('hidden');
        valueEl.classList.add('hidden');
        statusDiv.classList.remove('hidden');

        try {
            const data = await MetricDataProvider.get(endpoint);
            MetricRenderer.render(id, data);
        } catch (e) {
            spinner.classList.add('hidden');
            errorDiv.classList.remove('hidden');
        }
    }

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

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