@props([
    'id' => 'chart-' . uniqid(), 
    'endpoint',
])

<div {{ $attributes->merge(['class' => 'js-distribution-widget']) }} 
     data-endpoint="{{ $endpoint }}" 
     data-id="{{ $id }}">
    
    <div class="relative h-48 w-full flex items-center justify-center">
        <div id="status-{{ $id }}" class="absolute inset-0 flex flex-col items-center justify-center bg-white z-10">
            <div class="loader-spinner animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            <div class="error-message hidden text-center p-2">
                <p class="text-size-small-heading text-red-500 mb-2 font-medium"></p>
                <x-buttons.button type="button" variant="text-blue" class="btn-retry-distribution">
                    Reintentar
                </x-buttons.button>
            </div>
        </div>
        
        <canvas id="{{ $id }}" class="hidden"></canvas>
    </div>
</div>

@once
<script>
    const DistributionDataProvider = {
        async get(url) {
            const params = new URLSearchParams(window.location.search);
            const response = await fetch(`${url}?${params.toString()}`);

            if (response.status === 429) throw new Error('Demasiadas peticiones. Espera un momento.');
            if (!response.ok) throw new Error('Error al conectar con el servidor.');

            return await response.json();
        }
    };

    const DistributionChartRenderer = {
        instances: {},

        init(canvasId, data) {
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');
            
            if (this.instances[canvasId]) {
                this.instances[canvasId].destroy();
            }

            canvas.classList.remove('hidden');
            
            this.instances[canvasId] = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: data.datasets.map(ds => ({
                        label: ds.label,
                        data: ds.values,
                        backgroundColor: ds.color,
                        barPercentage: 0.5,
                        categoryPercentage: 0.8,
                        borderRadius: 4
                    }))
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom',
                            labels: { usePointStyle: true, font: { size: 11 } }
                        },
                        tooltip: { mode: 'index', intersect: false }
                    },
                    scales: {
                        x: { 
                            grid: { display: false },
                            ticks: { color: '#6b7280', font: { size: 10 } }
                        },
                        y: { 
                            beginAtZero: true,
                            grid: { color: '#f3f4f6' },
                            ticks: { color: '#6b7280', font: { size: 10 } }
                        }
                    }
                }
            });
        }
    };


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

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

        try {
            const data = await DistributionDataProvider.get(endpoint);
            
            // Ocultamos el overlay y renderizamos
            statusDiv.classList.add('hidden');
            DistributionChartRenderer.init(id, data);
            
        } catch (e) {
            spinner.classList.add('hidden');
            errorDiv.classList.remove('hidden');
            errorText.innerText = e.message;
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.js-distribution-widget').forEach(widget => {
            loadDistributionWidget(widget);
            const retryBtn = widget.querySelector('.btn-retry-distribution');
            if (retryBtn) {
                retryBtn.addEventListener('click', () => loadDistributionWidget(widget));
            }
        });
    });
</script>
@endonce