@props([
    'id' => 'ranking-' . uniqid(),
    'label' => 'Ranking de Conversión',
    'endpoint'
])

<div {{ $attributes->merge(['class' => 'js-staff-ranking-widget block']) }} 
     data-endpoint="{{ $endpoint }}"
     data-id="{{ $id }}">
    <div id="container-{{ $id }}" class="flex flex-col min-h-[100px]">
        <div id="loader-{{ $id }}" class="flex flex-col items-center justify-center py-10">
            <div class="loader-spinner animate-spin rounded-full h-5 w-5 border-b-2 border-primary"></div>
        </div>

        <div id="error-{{ $id }}" class="hidden flex flex-col items-center justify-center py-10 px-4 text-center">
            <p class="text-size-small text-gray-500 mb-2">No se pudo cargar el ranking</p>
            <button type="button" class="btn-retry text-primary underline font-medium">Reintentar</button>
        </div>

        <div id="list-{{ $id }}" class="hidden divide-y divide-complement100">
        </div>
    </div>
</div>

@once
<script>
    const StaffRankingRenderer = {
        createRowHtml(item) {
            return `
                <div class="flex items-center px-4 md:px-5 py-2 border-t border-t-complement100">
                    <div class="flex flex-col flex-1">
                        <div class="flex gap-x-4">
                            <img class="size-8 rounded-full object-cover shrink-0"
                                src="${item.photo}" alt="Avatar de ${item.full_name}">
                            <h3 class="text-parrafo font-medium text-gray-900 mb-2">${item.full_name}</h3>
                        </div>
                    </div>
                    <div class="text-black text-parrafo font-medium shrink-0 w-[100px] text-right">${item.conversion_rate}</div>
                </div>
            `;
        },

        render(id, response) {
            const listEl = document.getElementById(`list-${id}`);
            const loaderEl = document.getElementById(`loader-${id}`);
            const rankingData = response.data || [];

            if (rankingData.length === 0) {
                listEl.innerHTML = '<div class="py-10 text-center text-gray-400 text-size-small">No hay datos disponibles</div>';
            } else {
                listEl.innerHTML = rankingData.map(item => this.createRowHtml(item)).join('');
            }

            loaderEl.classList.add('hidden');
            listEl.classList.remove('hidden');
        }
    };

    async function loadStaffRankingWidget(widget) {
        const { endpoint, id } = widget.dataset;
        const loaderEl = document.getElementById(`loader-${id}`);
        const errorEl = document.getElementById(`error-${id}`);
        const listEl = document.getElementById(`list-${id}`);

        loaderEl.classList.remove('hidden');
        errorEl.classList.add('hidden');
        listEl.classList.add('hidden');

        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('Network error');
            
            const data = await response.json();
            StaffRankingRenderer.render(id, data);
        } catch (e) {
            console.error("Error cargando ranking:", id, e);
            loaderEl.classList.add('hidden');
            errorEl.classList.remove('hidden');
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.js-staff-ranking-widget').forEach(widget => {
            loadStaffRankingWidget(widget);

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