@extends('layouts.goberdata')

@section('title', 'WhatsApp Global')
@section('page_title', 'WhatsApp Global')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@push('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')
<!-- Sidebar -->
<div class="flex flex-col">
        <!-- Header -->
        <header class="flex justify-between items-center p-6 gd-header shadow-sm">
            <div class="flex items-center space-x-4">
                <a href="{{ url('/superadmin/dashboard') }}" class="text-white hover:text-green-100">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-2xl font-semibold text-white">
                    <i class="fab fa-whatsapp mr-2"></i> WhatsApp Global
                </h1>
            </div>
            <div class="flex items-center space-x-4">
                <span class="text-white">Super Admin</span>
                <i class="fas fa-user-circle text-white text-2xl"></i>
            </div>
        </header>

        <!-- Main Content -->
        <main class="bg-gray-100 p-2">
            <div class="w-full">
                <!-- Estadísticas 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 shadow-lg p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-600 text-sm">Total Campañas</p>
                                <p class="text-3xl font-bold text-green-600" id="totalCampaigns">0</p>
                            </div>
                            <div class="bg-green-100 p-3 rounded-full">
                                <i class="fab fa-whatsapp text-green-600 text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-600 text-sm">Total Mensajes</p>
                                <p class="text-3xl font-bold text-blue-600" id="totalMessages">0</p>
                            </div>
                            <div class="bg-blue-100 p-3 rounded-full">
                                <i class="fas fa-comments text-blue-600 text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-600 text-sm">Mensajes Enviados</p>
                                <p class="text-3xl font-bold text-purple-600" id="sentMessages">0</p>
                            </div>
                            <div class="bg-purple-100 p-3 rounded-full">
                                <i class="fas fa-paper-plane text-purple-600 text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-600 text-sm">Mensajes Entregados</p>
                                <p class="text-3xl font-bold text-indigo-600" id="deliveredMessages">0</p>
                            </div>
                            <div class="bg-indigo-100 p-3 rounded-full">
                                <i class="fas fa-check-circle text-indigo-600 text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Métricas adicionales -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-600 text-sm">Mensajes Leídos</p>
                                <p class="text-2xl font-bold text-emerald-600" id="readMessages">0</p>
                            </div>
                            <div class="bg-emerald-100 p-3 rounded-full">
                                <i class="fas fa-eye text-emerald-600 text-lg"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-600 text-sm">Tasa Entrega</p>
                                <p class="text-2xl font-bold text-orange-600" id="avgDeliveryRate">0%</p>
                            </div>
                            <div class="bg-orange-100 p-3 rounded-full">
                                <i class="fas fa-chart-line text-orange-600 text-lg"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Gráficos -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                    <!-- Campañas por Estado -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-xl font-bold text-gray-800 mb-4">Campañas por Estado</h3>
                        <div style="height: 300px;">
                            <canvas id="campaignsByStatusChart"></canvas>
                        </div>
                    </div>

                    <!-- Mensajes por Estado -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-xl font-bold text-gray-800 mb-4">Mensajes por Estado</h3>
                        <div style="height: 300px;">
                            <canvas id="messagesByStatusChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Métricas de Entrega -->
                <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                    <h3 class="text-xl font-bold text-gray-800 mb-6">Métricas de Entrega</h3>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="text-center">
                            <div class="bg-green-100 p-4 rounded-lg">
                                <i class="fas fa-check text-green-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-green-600" id="deliveryRate">0%</p>
                                <p class="text-sm text-gray-600">Tasa Entrega</p>
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="bg-blue-100 p-4 rounded-lg">
                                <i class="fas fa-eye text-blue-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-blue-600" id="readRate">0%</p>
                                <p class="text-sm text-gray-600">Tasa Lectura</p>
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="bg-red-100 p-4 rounded-lg">
                                <i class="fas fa-times text-red-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-red-600" id="failureRate">0%</p>
                                <p class="text-sm text-gray-600">Tasa Fallo</p>
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="bg-purple-100 p-4 rounded-lg">
                                <i class="fas fa-clock text-purple-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-purple-600" id="avgResponseTime">0m</p>
                                <p class="text-sm text-gray-600">Tiempo Respuesta</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mensajes por Campaña -->
                <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                    <h3 class="text-xl font-bold text-gray-800 mb-6">Mensajes por Campaña</h3>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaña</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Campañas</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Mensajes</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tasa Entrega</th>
                                </tr>
                            </thead>
                            <tbody id="messagesByCampaignTable" class="bg-white divide-y divide-gray-200">
                                <!-- Datos se cargarán dinámicamente -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Campañas Recientes -->
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-6">Campañas Recientes</h3>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaña</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mensajes</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tasa Entrega</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th>
                                </tr>
                            </thead>
                            <tbody id="recentCampaignsTable" class="bg-white divide-y divide-gray-200">
                                <!-- Datos se cargarán dinámicamente -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>
@endsection

@push('scripts')
<script>
        let campaignsByStatusChart = null;
        let messagesByStatusChart = null;

        document.addEventListener('DOMContentLoaded', function() {
            loadWhatsAppData();
        });

        async function loadWhatsAppData() {
            try {
                console.log('Loading WhatsApp data...');
                const response = await fetch('/api/test/whatsapp');
                console.log('API Response status:', response.status);

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();
                console.log('API Response data:', result);

                if (result.success && result.data) {
                    const data = result.data;
                    console.log('WhatsApp data loaded from API:', data);

                    // Actualizar estadísticas
                    updateStats(data.stats);

                    // Renderizar gráficos
                    renderCharts(data);

                    // Actualizar tablas
                    updateMessagesByCampaignTable(data.messages_by_campaign);
                    updateRecentCampaignsTable(data.recent_campaigns);

                    // Actualizar métricas de entrega
                    updateDeliveryMetrics(data.delivery_metrics);
                } else {
                    console.error('Error loading WhatsApp data:', result.message);
                    loadFallbackData();
                }
            } catch (error) {
                console.error('Error loading WhatsApp data:', error);
                console.error('Error details:', error.message);
                console.log('Loading fallback data...');
                loadFallbackData();
            }
        }

        function updateStats(stats) {
            const totalCampaigns = document.getElementById('totalCampaigns');
            const totalMessages = document.getElementById('totalMessages');
            const sentMessages = document.getElementById('sentMessages');
            const deliveredMessages = document.getElementById('deliveredMessages');
            const readMessages = document.getElementById('readMessages');
            const avgDeliveryRate = document.getElementById('avgDeliveryRate');

            if (totalCampaigns) totalCampaigns.textContent = stats.total_campaigns.toLocaleString();
            if (totalMessages) totalMessages.textContent = stats.total_messages.toLocaleString();
            if (sentMessages) sentMessages.textContent = stats.sent_messages.toLocaleString();
            if (deliveredMessages) deliveredMessages.textContent = stats.delivered_messages.toLocaleString();
            if (readMessages) readMessages.textContent = stats.read_messages.toLocaleString();
            if (avgDeliveryRate) avgDeliveryRate.textContent = stats.avg_delivery_rate + '%';
        }

        function renderCharts(data) {
            // Gráfico de campañas por estado
            const statusCtx = document.getElementById('campaignsByStatusChart');
            if (statusCtx && data.campaigns_by_status) {
                if (campaignsByStatusChart) {
                    campaignsByStatusChart.destroy();
                }

                campaignsByStatusChart = new Chart(statusCtx, {
                    type: 'doughnut',
                    data: {
                        labels: data.campaigns_by_status.map(item => item.status),
                        datasets: [{
                            data: data.campaigns_by_status.map(item => item.count),
                            backgroundColor: ['#10b981', '#f59e0b', '#ef4444', '#6366f1'],
                            borderWidth: 2,
                            borderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
            }

            // Gráfico de mensajes por estado
            const messagesCtx = document.getElementById('messagesByStatusChart');
            if (messagesCtx && data.chart_data.messages_by_status) {
                if (messagesByStatusChart) {
                    messagesByStatusChart.destroy();
                }

                messagesByStatusChart = new Chart(messagesCtx, {
                    type: 'bar',
                    data: {
                        labels: data.chart_data.messages_by_status.map(item => item.status),
                        datasets: [{
                            label: 'Mensajes',
                            data: data.chart_data.messages_by_status.map(item => item.count),
                            backgroundColor: '#10b981',
                            borderColor: '#059669',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        }

        function updateMessagesByCampaignTable(campaigns) {
            const tbody = document.getElementById('messagesByCampaignTable');
            if (tbody && campaigns) {
                tbody.innerHTML = campaigns.map(campaign => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${campaign.campaign_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.total_campaigns}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.total_messages.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.avg_delivery_rate}%</td>
                    </tr>
                `).join('');
            }
        }

        function updateRecentCampaignsTable(campaigns) {
            const tbody = document.getElementById('recentCampaignsTable');
            if (tbody && campaigns) {
                tbody.innerHTML = campaigns.map(campaign => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 text-sm text-gray-900">${campaign.name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.campaign_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${campaign.status === 'sent' ? 'bg-green-100 text-green-800' : campaign.status === 'scheduled' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800'}">
                                ${campaign.status === 'sent' ? 'Enviada' : campaign.status === 'scheduled' ? 'Programada' : 'Draft'}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.message_count.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.delivery_rate}%</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.created_at}</td>
                    </tr>
                `).join('');
            }
        }

        function updateDeliveryMetrics(metrics) {
            const deliveryRate = document.getElementById('deliveryRate');
            const readRate = document.getElementById('readRate');
            const failureRate = document.getElementById('failureRate');
            const avgResponseTime = document.getElementById('avgResponseTime');

            if (deliveryRate) deliveryRate.textContent = metrics.delivery_rate + '%';
            if (readRate) readRate.textContent = metrics.read_rate + '%';
            if (failureRate) failureRate.textContent = metrics.failure_rate + '%';
            if (avgResponseTime) avgResponseTime.textContent = metrics.avg_response_time + 'm';
        }

        function loadFallbackData() {
            // Mostrar mensaje de error en lugar de datos simulados
            console.error('No se pudieron cargar los datos de WhatsApp');

            // Mostrar mensaje de error en la interfaz
            const errorMessage = document.createElement('div');
            errorMessage.className = 'bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4';
            errorMessage.innerHTML = '<strong>Error:</strong> No se pudieron cargar los datos de WhatsApp. Por favor, intente nuevamente.';

            const mainContent = document.querySelector('main');
            if (mainContent) {
                mainContent.insertBefore(errorMessage, mainContent.firstChild);
            }
        }
    </script>
@endpush