@extends('layouts.app')

@section('content')

    <main class="px-6 py-8 bg-white transition-colors duration-200">
        <!-- KPIs Principales -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl p-6 border-2 border-secondary hover:shadow-lg transition-shadow">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-lg bg-primary flex items-center justify-center">
                        <svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                    </div>
                </div>
                <p class="text-sm text-gray-600 mb-1">Total Solicitudes</p>
                <p class="text-3xl font-bold text-secondary">{{ $totalRequests ?? 0 }}</p>
                <p class="text-sm text-secondary mt-2">Sistema completo</p>
            </div>

            <div class="bg-white rounded-xl p-6 border-2 border-secondary hover:shadow-lg transition-shadow">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-lg bg-primary flex items-center justify-center">
                        <svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
                <p class="text-sm text-gray-600 mb-1">Pendientes</p>
                <p class="text-3xl font-bold text-secondary">{{ $pendingRequests ?? 0 }}</p>
                <p class="text-sm text-secondary mt-2">Requieren atención</p>
            </div>

            <div class="bg-white rounded-xl p-6 border-2 border-secondary hover:shadow-lg transition-shadow">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-lg bg-primary flex items-center justify-center">
                        <svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                </div>
                <p class="text-sm text-gray-600 mb-1">En Proceso</p>
                <p class="text-3xl font-bold text-secondary">{{ $inProgressRequests ?? 0 }}</p>
                <p class="text-sm text-secondary mt-2">En progreso activo</p>
            </div>

            <div class="bg-white rounded-xl p-6 border-2 border-secondary hover:shadow-lg transition-shadow">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-lg bg-primary flex items-center justify-center">
                        <svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
                <p class="text-sm text-gray-600 mb-1">Finalizadas</p>
                <p class="text-3xl font-bold text-secondary">{{ $completedRequests ?? 0 }}</p>
                <p class="text-sm text-secondary mt-2">{{ $totalRequests > 0 ? round(($completedRequests / $totalRequests) * 100) : 0 }}% completadas</p>
            </div>
        </div>

        <!-- Solicitudes Recientes y Próximas Entregas -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <!-- Solicitudes Recientes -->
            <div class="bg-white rounded-xl border-2 border-secondary">
                <div class="p-6 border-b-2 border-secondary">
                    <h2 class="text-lg font-semibold text-secondary">Solicitudes Recientes</h2>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        @forelse($recentRequests ?? [] as $request)
                            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-primary/10 transition-colors border border-gray-200">
                                <div class="flex-1">
                                    <p class="font-medium text-secondary">#{{ $request->id }} - {{ $request->title }}</p>
                                    <p class="text-sm text-gray-600">{{ $request->requesterUser->name ?? 'N/A' }} - {{ $request->requesterUser->department->name ?? 'Sin departamento' }}</p>
                                </div>
                                @php
                                    $statusColors = [
                                        'pending' => 'bg-primary/20 text-secondary border border-secondary',
                                        'in_management' => 'bg-info/20 text-secondary border border-info',
                                        'in_review' => 'bg-purple-100 text-secondary border border-purple-400',
                                        'completed' => 'bg-success/20 text-secondary border border-success',
                                        'in_internal_iteration' => 'bg-warning/20 text-secondary border border-warning',
                                        'in_external_iteration' => 'bg-danger/20 text-secondary border border-danger',
                                    ];
                                    $statusColor = $statusColors[$request->status->code ?? 'pending'] ?? 'bg-gray-100 text-secondary border border-gray-400';
                                @endphp
                                <span class="px-3 py-1 text-xs font-medium rounded-full {{ $statusColor }}">
                                    {{ $request->status->name ?? 'Sin estado' }}
                                </span>
                            </div>
                        @empty
                            <div class="p-4 text-center text-gray-500">
                                No hay solicitudes recientes
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Próximas Entregas -->
            <div class="bg-white rounded-xl border-2 border-secondary">
                <div class="p-6 border-b-2 border-secondary">
                    <h2 class="text-lg font-semibold text-secondary">Próximas Entregas</h2>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        @forelse($upcomingDeliveries ?? [] as $delivery)
                            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
                                <div class="flex-1">
                                    <p class="font-medium text-secondary">#{{ $delivery->id }} - {{ $delivery->title }}</p>
                                    <p class="text-sm text-gray-600">{{ Str::limit($delivery->description, 50) }}</p>
                                </div>
                                <div class="text-right">
                                    @php
                                        $daysUntil = now()->diffInDays($delivery->desired_date, false);
                                        $colorClass = $daysUntil <= 3 ? 'text-danger' : ($daysUntil <= 7 ? 'text-warning' : 'text-success');
                                    @endphp
                                    <p class="text-sm font-medium {{ $colorClass }}">
                                        @if($daysUntil < 0)
                                            Vencida
                                        @elseif($daysUntil == 0)
                                            Hoy
                                        @elseif($daysUntil == 1)
                                            Mañana
                                        @else
                                            En {{ $daysUntil }} días
                                        @endif
                                    </p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $delivery->desired_date->format('d M Y') }}</p>
                                </div>
                            </div>
                        @empty
                            <div class="p-4 text-center text-gray-500">
                                No hay entregas próximas
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <!-- Resumen por Estado -->
        <div class="bg-white rounded-xl border-2 border-secondary mb-8">
            <div class="p-6 border-b-2 border-secondary">
                <h2 class="text-lg font-semibold text-secondary">Resumen por Estado</h2>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    @php
                        $percentPending = $totalRequests > 0 ? round(($pendingRequests / $totalRequests) * 100, 1) : 0;
                        $percentInProgress = $totalRequests > 0 ? round(($inProgressRequests / $totalRequests) * 100, 1) : 0;
                        $percentCompleted = $totalRequests > 0 ? round(($completedRequests / $totalRequests) * 100, 1) : 0;
                    @endphp

                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-secondary">Pendientes</span>
                            <span class="text-sm font-semibold text-secondary">{{ $pendingRequests }} ({{ $percentPending }}%)</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2 border border-gray-300">
                            <div class="bg-primary h-2 rounded-full" style="width: {{ $percentPending }}%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-secondary">En Proceso</span>
                            <span class="text-sm font-semibold text-secondary">{{ $inProgressRequests }} ({{ $percentInProgress }}%)</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2 border border-gray-300">
                            <div class="bg-primary h-2 rounded-full" style="width: {{ $percentInProgress }}%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-secondary">Finalizadas</span>
                            <span class="text-sm font-semibold text-secondary">{{ $completedRequests }} ({{ $percentCompleted }}%)</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2 border border-gray-300">
                            <div class="bg-primary h-2 rounded-full" style="width: {{ $percentCompleted }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Gráfico de Histórico de Estados -->
        <div class="bg-white rounded-xl border-2 border-secondary mb-8">
            <div class="p-6 border-b-2 border-secondary">
                <h2 class="text-lg font-semibold text-secondary">Histórico de Estados por Mes</h2>
            </div>
            <div class="p-6">
                <canvas id="estadosChart" class="w-full" style="max-height: 400px;"></canvas>
            </div>
        </div>

        <!-- Gráfico de Histórico por Tipo de Solicitud -->
        <div class="bg-white rounded-xl border-2 border-secondary mb-8">
            <div class="p-6 border-b-2 border-secondary">
                <div class="flex items-center justify-between flex-wrap gap-4">
                    <h2 class="text-lg font-semibold text-secondary">Histórico por Tipo de Solicitud</h2>
                    <button id="toggleFilters" class="px-4 py-2 bg-primary hover:bg-primary/80 text-secondary rounded-lg transition-colors text-sm font-medium border-2 border-secondary">
                        Mostrar Filtros
                    </button>
                </div>

                <!-- Filtros -->
                <div id="filtersSection" class="hidden mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Rango de Fechas</label>
                        <input type="text" id="dateRange" class="w-full px-4 py-2 bg-white border-2 border-secondary rounded-lg text-secondary focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Seleccionar rango">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Área</label>
                        <select class="w-full px-4 py-2 bg-white border-2 border-secondary rounded-lg text-secondary focus:ring-2 focus:ring-primary focus:border-primary">
                            <option value="">Todas las áreas</option>
                            @foreach($departments ?? [] as $department)
                                <option value="{{ $department->id }}">{{ $department->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Responsable</label>
                        <select class="w-full px-4 py-2 bg-white border-2 border-secondary rounded-lg text-secondary focus:ring-2 focus:ring-primary focus:border-primary">
                            <option value="">Todos</option>
                            @foreach($users ?? [] as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Estado</label>
                        <select class="w-full px-4 py-2 bg-white border-2 border-secondary rounded-lg text-secondary focus:ring-2 focus:ring-primary focus:border-primary">
                            <option value="">Todos</option>
                            @foreach($statuses ?? [] as $status)
                                <option value="{{ $status->id }}">{{ $status->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Solicitante</label>
                        <input type="text" class="w-full px-4 py-2 bg-white border-2 border-secondary rounded-lg text-secondary focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Buscar solicitante">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Título</label>
                        <input type="text" class="w-full px-4 py-2 bg-white border-2 border-secondary rounded-lg text-secondary focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Buscar por título">
                    </div>
                </div>
            </div>
            <div class="p-6">
                <canvas id="tipoSolicitudChart" class="w-full" style="max-height: 400px;"></canvas>
            </div>
        </div>

        <!-- Gráfico de Comportamiento Semanal por Área -->
        <div class="bg-white rounded-xl border-2 border-secondary mb-8">
            <div class="p-6 border-b-2 border-secondary">
                <div class="flex items-center justify-between flex-wrap gap-4">
                    <h2 class="text-lg font-semibold text-secondary">Comportamiento Semanal por Área</h2>
                    <button id="toggleFilters2" class="px-4 py-2 bg-primary hover:bg-primary/80 text-secondary rounded-lg transition-colors text-sm font-medium border-2 border-secondary">
                        Mostrar Filtros
                    </button>
                </div>

                <!-- Filtros -->
                <div id="filtersSection2" class="hidden mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Rango de Fechas</label>
                        <input type="text" id="dateRange2" class="w-full px-4 py-2 bg-white border-2 border-secondary rounded-lg text-secondary focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Seleccionar rango">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Área</label>
                        <select class="w-full px-4 py-2 bg-white border-2 border-secondary rounded-lg text-secondary focus:ring-2 focus:ring-primary focus:border-primary">
                            <option value="">Todas las áreas</option>
                            @foreach($departments ?? [] as $department)
                                <option value="{{ $department->id }}">{{ $department->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-2">Responsable</label>
                        <select class="w-full px-4 py-2 bg-white border-2 border-secondary rounded-lg text-secondary focus:ring-2 focus:ring-primary focus:border-primary">
                            <option value="">Todos</option>
                            @foreach($users ?? [] as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <canvas id="comportamientoChart" class="w-full" style="max-height: 400px;"></canvas>
            </div>
        </div>

        <!-- Tabla de Detalle Mensual -->
        <div class="bg-white rounded-xl border-2 border-secondary mb-8">
            <div class="p-6 border-b-2 border-secondary">
                <h2 class="text-lg font-semibold text-secondary">Detalle Mensual</h2>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-secondary uppercase tracking-wider border-b-2 border-secondary">Mes</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-secondary uppercase tracking-wider border-b-2 border-secondary">Total</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-secondary uppercase tracking-wider border-b-2 border-secondary">Pendientes</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-secondary uppercase tracking-wider border-b-2 border-secondary">En Proceso</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-secondary uppercase tracking-wider border-b-2 border-secondary">Cerradas</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-secondary uppercase tracking-wider border-b-2 border-secondary">% Eficiencia</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($detalleMensual ?? [] as $mes)
                            @php
                                $eficiencia = $mes['total_solicitudes'] > 0
                                    ? round(($mes['solicitudes_cerradas'] / $mes['total_solicitudes']) * 100, 1)
                                    : 0;
                                $eficienciaColor = $eficiencia >= 70
                                    ? 'bg-success/20 text-success border border-success'
                                    : ($eficiencia >= 50
                                        ? 'bg-warning/20 text-warning border border-warning'
                                        : 'bg-danger/20 text-danger border border-danger');
                            @endphp
                            <tr class="hover:bg-primary/10 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-secondary">{{ $mes['mes'] }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ $mes['total_solicitudes'] }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ $mes['sin_asignar'] }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ $mes['solicitudes_abiertas'] }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ $mes['solicitudes_cerradas'] }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-3 py-1 text-xs font-medium rounded-full {{ $eficienciaColor }}">{{ $eficiencia }}%</span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-4 text-center text-gray-500">
                                    No hay datos disponibles
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Acciones Rápidas -->
        <div class="bg-white rounded-xl border-2 border-secondary">
            <div class="p-6 border-b-2 border-secondary">
                <h2 class="text-lg font-semibold text-secondary">Acciones Rápidas</h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <a href="{{ route('public.create') }}" class="px-6 py-3 bg-primary hover:bg-primary/80 text-secondary rounded-lg transition-colors font-medium text-center border-2 border-secondary">
                        Nueva Solicitud
                    </a>
                    <a href="{{ route('request.index') }}" class="px-6 py-3 bg-secondary hover:bg-secondary/80 text-white rounded-lg transition-colors font-medium text-center border-2 border-secondary">
                        Ver Todas las Solicitudes
                    </a>
                </div>
            </div>
        </div>
    </main>

    <!-- Flatpickr CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <!-- Chart.js DataLabels Plugin -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
    <!-- Flatpickr -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/es.js"></script>
    
    <script>
        // Registrar plugin datalabels y configurar por defecto como deshabilitado
        Chart.register(ChartDataLabels);
        Chart.defaults.set('plugins.datalabels', {
            display: false
        });

        // Dark Mode Toggle (opcional, solo si existe el botón)
        const darkModeToggle = document.getElementById('darkModeToggle');
        const html = document.documentElement;

        // Check for saved theme preference or default to light mode
        const currentTheme = localStorage.getItem('theme') || 'light';
        if (currentTheme === 'dark') {
            html.classList.add('dark');
        }

        if (darkModeToggle) {
            darkModeToggle.addEventListener('click', () => {
                html.classList.toggle('dark');
                const theme = html.classList.contains('dark') ? 'dark' : 'light';
                localStorage.setItem('theme', theme);

                // Update charts
                updateChartsTheme();
            });
        }

        // Toggle Filters
        document.getElementById('toggleFilters').addEventListener('click', function() {
            const filters = document.getElementById('filtersSection');
            filters.classList.toggle('hidden');
            this.textContent = filters.classList.contains('hidden') ? 'Mostrar Filtros' : 'Ocultar Filtros';
        });

        document.getElementById('toggleFilters2').addEventListener('click', function() {
            const filters = document.getElementById('filtersSection2');
            filters.classList.toggle('hidden');
            this.textContent = filters.classList.contains('hidden') ? 'Mostrar Filtros' : 'Ocultar Filtros';
        });

        // Initialize Flatpickr
        flatpickr("#dateRange", {
            mode: "range",
            dateFormat: "Y-m-d",
            locale: "es"
        });

        flatpickr("#dateRange2", {
            mode: "range",
            dateFormat: "Y-m-d",
            locale: "es"
        });

        // Chart colors based on theme
        function getChartColors() {
            return {
                textColor: '#000000', // Negro para todos los textos
                gridColor: '#e5e7eb',
                backgroundColor: '#ffffff',
            };
        }

        // Chart.js - Histórico de Estados (Barras Apiladas con Totales) - Datos reales
        const estadosMeses = {!! json_encode($historicoMensualEstados['meses'] ?? []) !!};
        const estadosDatos = {!! json_encode($historicoMensualEstados['datos'] ?? []) !!};

        // Colores para cada estado
        const estadosColores = {
            'Pendiente': '#FFC107',
            'En Gestión': '#2196F3',
            'En Revisión': '#9C27B0',
            'En Iteración Interna': '#FF9800',
            'En Iteración Externa': '#F44336',
            'Finalizado': '#4CAF50'
        };

        // Crear datasets dinámicamente
        const estadosDatasets = [];
        for (const estado in estadosDatos) {
            estadosDatasets.push({
                label: estado,
                data: estadosDatos[estado],
                backgroundColor: estadosColores[estado] || '#9ca3af',
                borderWidth: 0
            });
        }

        const estadosCtx = document.getElementById('estadosChart').getContext('2d');
        let estadosChart = new Chart(estadosCtx, {
            type: 'bar',
            data: {
                labels: estadosMeses,
                datasets: estadosDatasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        stacked: true,
                        ticks: {
                            font: { weight: '600', size: 11 },
                            color: getChartColors().textColor
                        },
                        grid: { display: false }
                    },
                    y: {
                        stacked: true,
                        beginAtZero: true,
                        ticks: {
                            stepSize: 10,
                            font: { weight: '600' },
                            color: getChartColors().textColor
                        },
                        grid: {
                            color: getChartColors().gridColor,
                            drawBorder: false
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                        align: 'end',
                        labels: {
                            padding: 15,
                            font: { size: 12, weight: '600' },
                            usePointStyle: true,
                            pointStyle: 'rect',
                            color: getChartColors().textColor
                        }
                    },
                    datalabels: {
                        display: true,
                        color: '#FFFFFF',
                        font: {
                            weight: 'bold',
                            size: 10
                        },
                        formatter: function(value, context) {
                            return value > 0 ? value : '';
                        },
                        anchor: 'center',
                        align: 'center'
                    },
                    tooltip: {
                        callbacks: {
                            footer: function(tooltipItems) {
                                let total = 0;
                                tooltipItems.forEach(function(tooltipItem) {
                                    const dataIndex = tooltipItem.dataIndex;
                                    estadosChart.data.datasets.forEach(function(dataset) {
                                        total += dataset.data[dataIndex];
                                    });
                                });
                                return 'Total: ' + total;
                            }
                        }
                    }
                }
            },
            plugins: [{
                afterDatasetsDraw: function(chart) {
                    const ctx = chart.ctx;
                    chart.data.datasets.forEach(function(dataset, i) {
                        const meta = chart.getDatasetMeta(i);
                        if (!meta.hidden && i === chart.data.datasets.length - 1) {
                            meta.data.forEach(function(element, index) {
                                let total = 0;
                                chart.data.datasets.forEach(function(ds) {
                                    total += ds.data[index];
                                });

                                if (total > 0) {
                                    ctx.fillStyle = getChartColors().textColor;
                                    ctx.font = 'bold 11px Arial';
                                    ctx.textAlign = 'center';
                                    ctx.textBaseline = 'bottom';
                                    ctx.fillText(total, element.x, element.y - 5);
                                }
                            });
                        }
                    });
                }
            }]
        });

        // Chart.js - Tipo de Solicitud (Barras Apiladas con Datos Dinámicos)
        let tipoSolicitudChartInstance = null;

        function inicializarHistoricoTipos(meses, datos, tipos) {
            const ctx = document.getElementById('tipoSolicitudChart');

            if (tipoSolicitudChartInstance) {
                tipoSolicitudChartInstance.destroy();
            }

            const coloresBarras = ['#3b82f6', '#a855f7', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#84cc16'];
            const datasets = [];
            let i = 0;
            for (const tipo in datos) {
                datasets.push({
                    label: tipo,
                    data: datos[tipo],
                    backgroundColor: coloresBarras[i % coloresBarras.length],
                    borderWidth: 0
                });
                i++;
            }

            tipoSolicitudChartInstance = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: meses,
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            stacked: true,
                            ticks: {
                                font: { weight: '600', size: 11 },
                                color: getChartColors().textColor
                            },
                            grid: { display: false }
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true,
                            ticks: {
                                stepSize: 10,
                                font: { weight: '600' },
                                color: getChartColors().textColor
                            },
                            grid: {
                                color: getChartColors().gridColor,
                                drawBorder: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                            align: 'end',
                            labels: {
                                padding: 10,
                                font: { size: 11, weight: '600' },
                                usePointStyle: true,
                                pointStyle: 'rect',
                                color: getChartColors().textColor
                            }
                        },
                        datalabels: {
                            display: true,
                            color: '#FFFFFF',
                            font: {
                                weight: 'bold',
                                size: 10
                            },
                            formatter: function(value, context) {
                                return value > 0 ? value : '';
                            },
                            anchor: 'center',
                            align: 'center'
                        },
                        tooltip: {
                            callbacks: {
                                footer: function(tooltipItems) {
                                    let total = 0;
                                    const dataIndex = tooltipItems[0].dataIndex;
                                    tipoSolicitudChartInstance.data.datasets.forEach(function(dataset) {
                                        total += dataset.data[dataIndex];
                                    });
                                    return 'Total: ' + total;
                                }
                            }
                        }
                    }
                },
                plugins: [{
                    afterDatasetsDraw: function(chart) {
                        const ctx = chart.ctx;
                        const datasets = chart.data.datasets;
                        const meta = chart.getDatasetMeta(datasets.length - 1);

                        if (!meta.hidden) {
                            meta.data.forEach(function(element, index) {
                                let total = 0;
                                chart.data.datasets.forEach(function(ds) {
                                    total += ds.data[index];
                                });

                                if (total > 0) {
                                    ctx.fillStyle = getChartColors().textColor;
                                    ctx.font = 'bold 11px Arial';
                                    ctx.textAlign = 'center';
                                    ctx.textBaseline = 'bottom';
                                    ctx.fillText(total, element.x, element.y - 5);
                                }
                            });
                        }
                    }
                }]
            });
        }

        // Inicializar con datos reales del backend
        const tiposMeses = {!! json_encode($historicoMensualTipos['meses'] ?? []) !!};
        const tiposDatos = {!! json_encode($historicoMensualTipos['datos'] ?? []) !!};
        const tiposSolicitud = {!! json_encode($historicoMensualTipos['tiposSolicitud'] ?? []) !!};
        inicializarHistoricoTipos(tiposMeses, tiposDatos, tiposSolicitud);

        // Chart.js - Comportamiento Semanal (Barras Apiladas por Área)
        let comportamientoSemanalChartInstance = null;

        function inicializarComportamientoSemanal(semanas, datos, areas) {
            const ctx = document.getElementById('comportamientoChart');

            if (comportamientoSemanalChartInstance) {
                comportamientoSemanalChartInstance.destroy();
            }

            const coloresAreas = ['#3b82f6', '#a855f7', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#84cc16'];
            const datasets = [];
            let colorIndex = 0;

            for (const area in datos) {
                datasets.push({
                    label: area,
                    data: datos[area],
                    backgroundColor: coloresAreas[colorIndex % coloresAreas.length],
                    borderWidth: 0,
                    borderRadius: 2
                });
                colorIndex++;
            }

            comportamientoSemanalChartInstance = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: semanas,
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            stacked: true,
                            ticks: {
                                font: { weight: '600', size: 10 },
                                maxRotation: 45,
                                minRotation: 45,
                                color: getChartColors().textColor
                            },
                            grid: { display: false }
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true,
                            ticks: {
                                stepSize: 10,
                                font: { weight: '600' },
                                color: getChartColors().textColor
                            },
                            grid: {
                                color: getChartColors().gridColor,
                                drawBorder: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                color: getChartColors().textColor,
                                padding: 10,
                                font: { size: 11, weight: '600' },
                                usePointStyle: true,
                                pointStyle: 'rect'
                            }
                        },
                        datalabels: {
                            display: true,
                            color: '#FFFFFF',
                            font: {
                                weight: 'bold',
                                size: 9
                            },
                            formatter: function(value, context) {
                                return value > 0 ? value : '';
                            },
                            anchor: 'center',
                            align: 'center'
                        },
                        tooltip: {
                            callbacks: {
                                footer: function(tooltipItems) {
                                    let total = 0;
                                    const dataIndex = tooltipItems[0].dataIndex;
                                    comportamientoSemanalChartInstance.data.datasets.forEach(function(dataset) {
                                        total += dataset.data[dataIndex];
                                    });
                                    return 'Total: ' + total;
                                }
                            }
                        }
                    }
                },
                plugins: [{
                    afterDatasetsDraw: function(chart) {
                        const ctx = chart.ctx;
                        const datasets = chart.data.datasets;
                        const meta = chart.getDatasetMeta(datasets.length - 1);

                        if (!meta.hidden) {
                            meta.data.forEach(function(element, index) {
                                let total = 0;
                                chart.data.datasets.forEach(function(ds) {
                                    total += ds.data[index];
                                });

                                if (total > 0) {
                                    ctx.fillStyle = getChartColors().textColor;
                                    ctx.font = 'bold 10px Arial';
                                    ctx.textAlign = 'center';
                                    ctx.textBaseline = 'bottom';
                                    ctx.fillText(total, element.x, element.y - 5);
                                }
                            });
                        }
                    }
                }]
            });
        }

        // Inicializar con datos reales del backend
        const semanasLabels = {!! json_encode($comportamientoSemanalAreas['semanas'] ?? []) !!};
        const semanasDatos = {!! json_encode($comportamientoSemanalAreas['datos'] ?? []) !!};
        const semanasAreas = {!! json_encode($comportamientoSemanalAreas['areas'] ?? []) !!};
        inicializarComportamientoSemanal(semanasLabels, semanasDatos, semanasAreas);

        // Update charts theme
        function updateChartsTheme() {
            const colors = getChartColors();

            [estadosChart, tipoSolicitudChartInstance, comportamientoSemanalChartInstance].forEach(chart => {
                if (chart) {
                    chart.options.scales.x.grid.color = colors.gridColor;
                    chart.options.scales.x.ticks.color = colors.textColor;
                    chart.options.scales.y.grid.color = colors.gridColor;
                    chart.options.scales.y.ticks.color = colors.textColor;
                    chart.options.plugins.legend.labels.color = colors.textColor;
                    chart.update();
                }
            });
        }
    </script>

@endsection