@extends('layouts.goberdata')

@section('title', 'WhatsApp Business')
@section('page_title', 'WhatsApp Business')
@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')
<!-- Top Bar -->
    <div class="gd-header text-white p-4 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <h1 class="text-2xl font-bold">💬 WhatsApp Business</h1>
                <span id="campaignName" class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm"></span>
            </div>
            <div class="flex items-center space-x-4">
                <button onclick="window.location.href='/admin/dashboard'" class="bg-white text-green-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                    <i class="fas fa-arrow-left"></i> Volver
                </button>
            </div>
        </div>
    </div>

    <!-- Menú de Navegación -->
<!-- Contenido Principal -->
    <div class="container mx-auto p-6 max-w-7xl">
        <!-- KPIs -->
        <div id="statsSection" class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
                <p class="text-sm text-gray-600 mb-1">Mensajes Hoy</p>
                <p id="messages_today" class="text-4xl font-bold text-green-600">-</p>
                <p class="text-xs text-gray-500 mt-2">Carga de datos...</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
                <p class="text-sm text-gray-600 mb-1">Tasa de Entrega</p>
                <p id="delivery_rate" class="text-4xl font-bold text-blue-600">-</p>
                <p id="delivery_count" class="text-xs text-gray-500 mt-2">-</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
                <p class="text-sm text-gray-600 mb-1">Tasa de Lectura</p>
                <p id="read_rate" class="text-4xl font-bold text-purple-600">-</p>
                <p id="read_count" class="text-xs text-gray-500 mt-2">-</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
                <p class="text-sm text-gray-600 mb-1">Conversaciones Activas</p>
                <p id="active_conversations" class="text-4xl font-bold text-orange-600">-</p>
                <p class="text-xs text-gray-500 mt-2">Carga de datos...</p>
            </div>
        </div>

        <!-- Gráficos -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-bold text-gray-800 mb-4">📊 Mensajes por Estado</h3>
                <div style="height: 300px; position: relative;">
                    <canvas id="statusChart"></canvas>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-bold text-gray-800 mb-4">📈 Envíos Últimos 7 Días</h3>
                <div style="height: 300px; position: relative;">
                    <canvas id="trendChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Campañas Recientes -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">📢 Campañas Recientes</h3>
            <div id="campaignsTable">
                <p class="text-center text-gray-500 py-8">Cargando campañas...</p>
            </div>
        </div>

        <!-- Conversaciones Recientes -->
        <div class="bg-white p-6 rounded-lg shadow">
            <h3 class="text-xl font-bold text-gray-800 mb-4">💬 Conversaciones Recientes</h3>
            <div id="conversationsList">
                <p class="text-center text-gray-500 py-8">Cargando conversaciones...</p>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        let statusChartRef = null;
        let trendChartRef = null;

        // Verificar autenticación
        const token = localStorage.getItem('auth_token');
        if (!token) {
            window.location.href = '/login';
            throw new Error('No token');
        }

        // Cargar datos del dashboard
        async function loadDashboardData() {
            try {
                const response = await fetch('/api/whatsapp/dashboard', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

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

                const data = await response.json();

                // Actualizar estadísticas
                document.getElementById('messages_today').textContent = data.stats.messages_today || 0;
                document.getElementById('delivery_rate').textContent = (data.stats.delivery_rate || 0) + '%';
                document.getElementById('delivery_count').textContent = `${data.stats.delivered || 0} / ${data.stats.sent || 0}`;
                document.getElementById('read_rate').textContent = (data.stats.read_rate || 0) + '%';
                document.getElementById('read_count').textContent = `${data.stats.read || 0} / ${data.stats.delivered || 0}`;
                document.getElementById('active_conversations').textContent = data.stats.active_conversations || 0;

                // Renderizar gráficos
                renderCharts(data.charts);

                // Renderizar campañas
                renderCampaigns(data.campaigns);

                // Renderizar conversaciones
                renderConversations(data.conversations);

                // Cargar nombre de campaña
                if (data.campaign) {
                    document.getElementById('campaignName').textContent = data.campaign.name;
                }

            } catch (error) {
                console.error('Error loading dashboard data:', error);

                // Mostrar datos de fallback
                loadFallbackData();
            }
        }

        function loadFallbackData() {
            const fallbackData = {
                stats: {
                    messages_today: 0,
                    delivery_rate: 0,
                    delivered: 0,
                    sent: 0,
                    read_rate: 0,
                    read: 0,
                    active_conversations: 0
                },
                charts: {
                    status: [],
                    trend: []
                },
                campaigns: [],
                conversations: []
            };

            updateStats(fallbackData.stats);
            renderCharts(fallbackData.charts);
            renderCampaigns(fallbackData.campaigns);
            renderConversations(fallbackData.conversations);
        }

        function updateStats(stats) {
            document.getElementById('messages_today').textContent = stats.messages_today || 0;
            document.getElementById('delivery_rate').textContent = (stats.delivery_rate || 0) + '%';
            document.getElementById('delivery_count').textContent = `${stats.delivered || 0} / ${stats.sent || 0}`;
            document.getElementById('read_rate').textContent = (stats.read_rate || 0) + '%';
            document.getElementById('read_count').textContent = `${stats.read || 0} / ${stats.delivered || 0}`;
            document.getElementById('active_conversations').textContent = stats.active_conversations || 0;
        }

        function renderCharts(charts) {
            // Destroy existing charts
            if (statusChartRef) statusChartRef.destroy();
            if (trendChartRef) trendChartRef.destroy();

            // Status Chart
            const statusCtx = document.getElementById('statusChart').getContext('2d');
            statusChartRef = new Chart(statusCtx, {
                type: 'doughnut',
                data: {
                    labels: charts.status?.map(s => s.label) || ['Sin datos'],
                    datasets: [{
                        data: charts.status?.map(s => s.value) || [1],
                        backgroundColor: ['#3b82f6', '#22c55e', '#8b5cf6', '#ef4444'],
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                boxWidth: 15,
                                padding: 10
                            }
                        }
                    }
                }
            });

            // Trend Chart
            const trendCtx = document.getElementById('trendChart').getContext('2d');
            trendChartRef = new Chart(trendCtx, {
                type: 'line',
                data: {
                    labels: charts.trend?.map(t => t.date) || ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'],
                    datasets: [{
                        label: 'Mensajes Enviados',
                        data: charts.trend?.map(t => t.count) || [0, 0, 0, 0, 0, 0, 0],
                        borderColor: '#22c55e',
                        backgroundColor: 'rgba(34, 197, 94, 0.1)',
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                padding: 5
                            }
                        },
                        x: {
                            ticks: {
                                padding: 5
                            }
                        }
                    }
                }
            });
        }

        function renderCampaigns(campaigns) {
            if (!campaigns || campaigns.length === 0) {
                document.getElementById('campaignsTable').innerHTML = `
                    <table class="w-full">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Nombre</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Destinatarios</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Enviados</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Leídos</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="5" class="px-4 py-6 text-center text-gray-500">No hay campañas registradas</td>
                            </tr>
                        </tbody>
                    </table>`;
                return;
            }

            const rows = campaigns.map(c => `
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 font-medium">${c.name || 'Sin nombre'}</td>
                    <td class="px-4 py-3">${c.total_recipients || 0}</td>
                    <td class="px-4 py-3">${c.sent || 0}</td>
                    <td class="px-4 py-3">${c.read || 0} <span class="text-xs text-green-600">(${c.read_rate || 0}%)</span></td>
                    <td class="px-4 py-3"><span class="px-2 py-1 rounded text-xs ${c.status === 'sent' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}">${c.status === 'sent' ? 'Enviada' : 'Programada'}</span></td>
                </tr>
            `).join('');

            document.getElementById('campaignsTable').innerHTML = `
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Nombre</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Destinatarios</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Enviados</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Leídos</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Estado</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y">
                        ${rows}
                    </tbody>
                </table>`;
        }

        function renderConversations(conversations) {
            if (!conversations || conversations.length === 0) {
                document.getElementById('conversationsList').innerHTML = `
                    <p class="text-center text-gray-500 py-8">No hay conversaciones recientes</p>`;
                return;
            }

            const items = conversations.map(c => `
                <div class="border-l-4 ${getBorderColor(c.status)} pl-4 py-2 ${getBgColor(c.status)} mb-3">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="font-semibold">${c.contact_name || 'Desconocido'}</p>
                            <p class="text-sm text-gray-600">${c.phone || 'Sin teléfono'}</p>
                            <p class="text-sm text-gray-700 mt-1">"${c.last_message || 'Sin mensajes'}"</p>
                        </div>
                        <div class="text-right">
                            <p class="text-xs text-gray-500">${formatDate(c.last_message_at)}</p>
                            <span class="px-2 py-1 rounded text-xs ${getStatusBadgeClass(c.status)} mt-1 inline-block">${getStatusText(c.status)}</span>
                        </div>
                    </div>
                </div>
            `).join('');

            document.getElementById('conversationsList').innerHTML = items;
        }

        function getBorderColor(status) {
            const colors = {
                'new': 'border-green-500',
                'active': 'border-blue-500',
                'resolved': 'border-gray-300',
                'closed': 'border-gray-300'
            };
            return colors[status] || 'border-gray-300';
        }

        function getBgColor(status) {
            const colors = {
                'new': 'bg-green-50',
                'active': 'bg-blue-50',
                'resolved': '',
                'closed': ''
            };
            return colors[status] || '';
        }

        function getStatusBadgeClass(status) {
            const classes = {
                'new': 'bg-green-100 text-green-800',
                'active': 'bg-blue-100 text-blue-800',
                'resolved': 'bg-gray-100 text-gray-800',
                'closed': 'bg-gray-100 text-gray-800'
            };
            return classes[status] || 'bg-gray-100 text-gray-800';
        }

        function getStatusText(status) {
            const texts = {
                'new': 'Nueva',
                'active': 'Activa',
                'resolved': 'Resuelta',
                'closed': 'Cerrada'
            };
            return texts[status] || status;
        }

        function formatDate(dateString) {
            if (!dateString) return '-';
            const date = new Date(dateString);
            const now = new Date();
            const diffMs = now - date;
            const diffMins = Math.floor(diffMs / 60000);

            if (diffMins < 1) return 'Hace unos segundos';
            if (diffMins < 60) return `Hace ${diffMins} min`;
            if (diffMins < 1440) return `Hace ${Math.floor(diffMins / 60)} horas`;
            return date.toLocaleDateString('es');
        }

        // Inicializar dashboard
        loadDashboardData();
    </script>
@endpush