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

<div class="js-chart-widget bg-white p-4 rounded-lg border border-complement100" 
     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-accent"></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">Reintentar</x-buttons.button>
            </div>
        </div>
        
        <canvas id="{{ $id }}" class="hidden"></canvas>
    </div>

    <div id="legend-{{ $id }}" class="grid grid-cols-1 md:grid-cols-2 gap-2 mt-6"></div>
</div>

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

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

            return await response.json();
        }
    };

    const ChartRenderer = {
        instances: {},

        init(canvasId, data) {
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');
            
            // Si ya existe una gráfica en ese canvas (por un reintento), la destruimos
            if (this.instances[canvasId]) {
                this.instances[canvasId].destroy();
            }

            canvas.classList.remove('hidden');
            
            this.instances[canvasId] = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: data.labels,
                    datasets: [{
                        data: data.values,
                        backgroundColor: data.colors,
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '70%',
                    plugins: { legend: { display: false } }
                },
                plugins: [{
                    id: 'centerText',
                    beforeDraw(chart) {
                        const { ctx, width, height } = chart;
                        ctx.restore();
                        ctx.font = "bold 1.2rem sans-serif";
                        ctx.textBaseline = 'middle';
                        ctx.fillStyle = '#1f2937';
                        const text = data.totalSum;
                        const textX = Math.round((width - ctx.measureText(text).width) / 2);
                        const textY = height / 2;
                        ctx.fillText(text, textX, textY);
                        ctx.save();
                    }
                }]
            });
        },
        
        hydrateLegend(id, data) {
            const container = document.getElementById(`legend-${id}`);
            container.innerHTML = ''; // Limpiar antes de llenar
            data.labels.forEach((label, i) => {
                const valK = (data.values[i] / 1000).toFixed(1);
                container.innerHTML += `
                    <div class="flex items-center justify-between border-b border-gray-50 pb-1">
                        <div class="flex items-center gap-1.5">
                            <span class="w-2 h-2 rounded-full" style="background-color: ${data.colors[i]}"></span>
                            <span class="text-[10px] text-gray-600 truncate max-w-[80px]">${label}</span>
                        </div>
                        <span class="font-bold text-[10px] text-gray-800">$${valK}k</span>
                    </div>`;
            });
        }
    };

    // 3. ORCHESTRATOR: Gestiona el ciclo de vida del widget
    async function loadWidget(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');

        // Reset de interfaz
        spinner.classList.remove('hidden');
        errorDiv.classList.add('hidden');

        try {
            const data = await DataProvider.get(endpoint);
            statusDiv.classList.add('hidden'); // Ocultar todo el overlay de carga
            
            ChartRenderer.init(id, data);
            ChartRenderer.hydrateLegend(id, data);
        } catch (e) {
            spinner.classList.add('hidden');
            errorDiv.classList.remove('hidden');
            errorText.innerText = e.message;
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.js-chart-widget').forEach(widget => {
            // Carga inicial
            loadWidget(widget);

            // Escuchar el botón de reintento
            widget.querySelector('.btn-retry').addEventListener('click', () => {
                loadWidget(widget);
            });
        });
    });
</script>
@endonce