@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')
<!-- Header -->
    <div class="gd-header text-white p-6 shadow-lg">
        <div class="container mx-auto max-w-7xl flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold">💬 WhatsApp Business</h1>
                <p class="text-sm opacity-90">Comunicación masiva con tus leads</p>
            </div>
            <a href="javascript:void(0)" onclick="redirectHome()" class="bg-white text-green-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                ← Volver
            </a>
        </div>
    </div>

    <div class="container mx-auto max-w-7xl p-6">

        <!-- KPIs -->
        <div class="grid grid-cols-4 gap-4 mb-6">
            <div class="bg-white p-6 rounded-lg shadow">
                <p class="text-sm text-gray-600">Mensajes Hoy</p>
                <p class="text-4xl font-bold text-green-600">156</p>
                <p class="text-xs text-green-600 mt-1">↑ +12% vs ayer</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <p class="text-sm text-gray-600">Tasa de Entrega</p>
                <p class="text-4xl font-bold text-blue-600">95.8%</p>
                <p class="text-xs text-gray-500 mt-1">1,150 / 1,200</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <p class="text-sm text-gray-600">Tasa de Lectura</p>
                <p class="text-4xl font-bold text-purple-600">85.2%</p>
                <p class="text-xs text-gray-500 mt-1">980 / 1,150</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <p class="text-sm text-gray-600">Conversaciones Activas</p>
                <p class="text-4xl font-bold text-orange-600">23</p>
                <p class="text-xs text-orange-600 mt-1">5 sin asignar</p>
            </div>
        </div>

        <!-- Gráficos -->
        <div class="grid 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: 250px;">
                    <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: 250px;">
                    <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>
            <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">
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 font-medium">Bienvenida Nuevos Leads</td>
                        <td class="px-4 py-3">200</td>
                        <td class="px-4 py-3">200</td>
                        <td class="px-4 py-3">170 <span class="text-xs text-green-600">(85%)</span></td>
                        <td class="px-4 py-3"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">Enviada</span></td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 font-medium">Recordatorio Evento</td>
                        <td class="px-4 py-3">120</td>
                        <td class="px-4 py-3">120</td>
                        <td class="px-4 py-3">95 <span class="text-xs text-green-600">(79%)</span></td>
                        <td class="px-4 py-3"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">Enviada</span></td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 font-medium">Invitación Voluntariado</td>
                        <td class="px-4 py-3">85</td>
                        <td class="px-4 py-3">85</td>
                        <td class="px-4 py-3">72 <span class="text-xs text-green-600">(84%)</span></td>
                        <td class="px-4 py-3"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">Enviada</span></td>
                    </tr>
                </tbody>
            </table>
        </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 class="space-y-3">
                <div class="border-l-4 border-green-500 pl-4 py-2 bg-green-50">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="font-semibold">María García</p>
                            <p class="text-sm text-gray-600">+57 300 123 4567</p>
                            <p class="text-sm text-gray-700 mt-1">"¡Me interesa ser voluntaria! ¿Cuándo es el próximo evento?"</p>
                        </div>
                        <div class="text-right">
                            <p class="text-xs text-gray-500">Hace 5 min</p>
                            <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs mt-1 inline-block">Nueva</span>
                        </div>
                    </div>
                </div>
                <div class="border-l-4 border-blue-500 pl-4 py-2 bg-blue-50">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="font-semibold">Carlos Ruiz</p>
                            <p class="text-sm text-gray-600">+57 301 987 6543</p>
                            <p class="text-sm text-gray-700 mt-1">"Confirmo asistencia al evento del sábado"</p>
                        </div>
                        <div class="text-right">
                            <p class="text-xs text-gray-500">Hace 15 min</p>
                            <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs mt-1 inline-block">Respondida</span>
                        </div>
                    </div>
                </div>
                <div class="border-l-4 border-gray-300 pl-4 py-2">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="font-semibold">Ana Martínez</p>
                            <p class="text-sm text-gray-600">+57 310 555 7788</p>
                            <p class="text-sm text-gray-700 mt-1">"Gracias por la información"</p>
                        </div>
                        <div class="text-right">
                            <p class="text-xs text-gray-500">Hace 1 hora</p>
                            <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs mt-1 inline-block">Cerrada</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Info -->
        <div class="mt-6 bg-blue-50 border-l-4 border-blue-500 p-4">
            <p class="text-sm text-blue-800">
                <strong>💡 Nota DEMO</strong>: Estos son datos de ejemplo.
                En producción verías tus mensajes reales, conversaciones y métricas actualizadas en tiempo real.
            </p>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        // Gráfico de estados
        const statusCtx = document.getElementById('statusChart').getContext('2d');
        new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: ['Enviados', 'Entregados', 'Leídos', 'Fallidos'],
                datasets: [{
                    data: [1200, 1150, 980, 12],
                    backgroundColor: ['#3b82f6', '#22c55e', '#8b5cf6', '#ef4444'],
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 15,
                            padding: 10
                        }
                    }
                }
            }
        });

        // Gráfico de tendencia
        const trendCtx = document.getElementById('trendChart').getContext('2d');
        new Chart(trendCtx, {
            type: 'line',
            data: {
                labels: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'],
                datasets: [{
                    label: 'Mensajes Enviados',
                    data: [145, 180, 165, 190, 210, 156, 178],
                    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 redirectHome() {
            try {
                const user = JSON.parse(localStorage.getItem('user') || '{}');
                const roles = user.roles || (user.role ? [user.role] : []);
                if (roles.includes('admin') || roles.includes('candidate')) {
                    window.location.href = '/admin/dashboard';
                } else if (roles.includes('coordinator')) {
                    window.location.href = '/dashboard';
                } else {
                    window.location.href = '/volunteer/dashboard';
                }
            } catch (_) {
                window.location.href = '/login';
            }
        }
    </script>
@endpush