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

<div class="js-line-chart-widget {{ $class }}" 
     data-endpoint="{{ $endpoint }}" 
     data-id="{{ $id }}">
    
    <div class="relative h-48 w-full">
        <div id="status-{{ $id }}" class="absolute inset-0 flex flex-col items-center justify-center bg-white/80 z-10 rounded-lg">
            <div class="loader-spinner animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            <div class="error-message hidden text-center p-4">
                <p class="text-sm text-red-600 mb-2 font-medium">Error al cargar datos.</p>
                <button type="button" class="btn-retry-line px-3 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition">
                    Reintentar
                </button>
            </div>
        </div>
        <canvas id="{{ $id }}"></canvas>
    </div>
</div>

@once
<script>
    const LineChartRenderer = {
        instances: {},

        init(canvasId, data) {
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');
            
            if (this.instances[canvasId]) {
                this.instances[canvasId].destroy();
            }
            
            this.instances[canvasId] = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.labels,
                    datasets: data.datasets.map(ds => ({
                        ...ds,
                        tension: 0.3,
                        fill: false,
                        pointRadius: 3,
                        borderWidth: 2
                    }))
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: { intersect: false, mode: 'index' },
                    plugins: {
                        legend: { position: 'top', labels: { usePointStyle: true } },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.dataset.label || '';
                                    const value = context.parsed.y;
                                    const unit = label.toLowerCase().includes('cierre') ? 'días' : 'horas';
                                    return `${label}: ${value} ${unit}`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: { beginAtZero: true, grid: { color: '#f3f4f6' } },
                        x: { grid: { display: false } }
                    }
                }
            });
        }
    };

    async function loadLineChartWidget(widget) {
        const { endpoint, id } = widget.dataset;
        const statusDiv = document.getElementById(`status-${id}`);
        const spinner = statusDiv.querySelector('.loader-spinner');
        const errorDiv = statusDiv.querySelector('.error-message');
        
        spinner.classList.remove('hidden');
        errorDiv.classList.add('hidden');

        try {
            const response = await fetch(endpoint);
            if (!response.ok) throw new Error('No se pudieron obtener los datos');
            const data = await response.json();
            
            statusDiv.classList.add('hidden'); // Ocultar spinner
            LineChartRenderer.init(id, data);
        } catch (e) {
            spinner.classList.add('hidden');
            errorDiv.classList.remove('hidden');
            console.error(e);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.js-line-chart-widget').forEach(widget => {
            loadLineChartWidget(widget);
            widget.querySelector('.btn-retry-line')?.addEventListener('click', () => loadLineChartWidget(widget));
        });
    });
</script>
@endonce