@extends('layouts.goberdata')

@section('title', 'Social Media Monitoring')
@section('page_title', 'Social Media Monitoring')
@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">🔍 Social Media Monitoring</h1>
                <p class="text-sm opacity-90">Análisis de 5 plataformas + Inteligencia Artificial</p>
            </div>
            <a href="javascript:void(0)" onclick="redirectHome()" class="bg-white text-orange-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-5 gap-4 mb-6">
            <div class="bg-white p-6 rounded-lg shadow text-center">
                <p class="text-sm text-gray-600">Competidores</p>
                <p class="text-4xl font-bold text-orange-600">5</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow text-center">
                <p class="text-sm text-gray-600">Posts Hoy</p>
                <p class="text-4xl font-bold text-blue-600">45</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow text-center">
                <p class="text-sm text-gray-600">Engagement</p>
                <p class="text-4xl font-bold text-green-600">21.5K</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow text-center">
                <p class="text-sm text-gray-600">Alertas</p>
                <p class="text-4xl font-bold text-red-600">3</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow text-center">
                <p class="text-sm text-gray-600">Sentimiento</p>
                <p class="text-4xl font-bold text-purple-600">📈</p>
            </div>
        </div>

        <!-- Alertas Críticas -->
        <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
            <h3 class="text-lg font-bold text-red-800 mb-3">⚠️ Alertas Activas</h3>
            <div class="space-y-2">
                <div class="bg-white p-3 rounded">
                    <p class="font-semibold text-red-700">🚨 Pico viral negativo detectado</p>
                    <p class="text-sm text-gray-700">Competidor A publicó video crítico - 15K vistas en 2 horas</p>
                    <p class="text-xs text-gray-500 mt-1">Facebook • Hace 45 min</p>
                </div>
            </div>
        </div>

        <!-- Comparativa de Engagement -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">📊 Engagement por Candidato (Últimos 7 días)</h3>
            <div style="height: 250px;">
                <canvas id="engagementChart"></canvas>
            </div>
        </div>

        <!-- Posts Recientes por Plataforma -->
        <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">📱 Posts por Plataforma</h3>
                <div style="height: 250px;">
                    <canvas id="platformChart"></canvas>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-bold text-gray-800 mb-4">😊 Análisis de Sentimiento (IA)</h3>
                <div style="height: 250px;">
                    <canvas id="sentimentChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Trending Topics -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">🔥 Temas Trending</h3>
            <div class="grid grid-cols-3 gap-4">
                <div class="gd-header p-4 rounded-lg">
                    <p class="text-3xl font-bold text-red-600">#seguridad</p>
                    <p class="text-sm text-gray-700 mt-1">450 menciones</p>
                    <p class="text-xs text-red-600 font-semibold">↑ +35% vs ayer</p>
                </div>
                <div class="gd-header p-4 rounded-lg">
                    <p class="text-3xl font-bold text-blue-600">#educacion</p>
                    <p class="text-sm text-gray-700 mt-1">380 menciones</p>
                    <p class="text-xs text-blue-600 font-semibold">↑ +12% vs ayer</p>
                </div>
                <div class="gd-header p-4 rounded-lg">
                    <p class="text-3xl font-bold text-green-600">#empleo</p>
                    <p class="text-sm text-gray-700 mt-1">320 menciones</p>
                    <p class="text-xs text-green-600 font-semibold">↑ +8% vs ayer</p>
                </div>
            </div>
        </div>

        <!-- Posts Destacados -->
        <div class="bg-white p-6 rounded-lg shadow">
            <h3 class="text-xl font-bold text-gray-800 mb-4">⭐ Posts con Mayor Engagement</h3>
            <div class="space-y-3">
                <div class="border-l-4 border-blue-500 pl-4 py-3 bg-blue-50">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <p class="text-xs text-gray-600 mb-1">TÚ • Facebook • Hace 3 horas</p>
                            <p class="font-medium text-gray-800">"Nuestra propuesta de seguridad para el sector norte incluye..."</p>
                            <div class="flex space-x-4 mt-2 text-sm text-gray-600">
                                <span>❤️ 1,245</span>
                                <span>💬 189</span>
                                <span>🔄 234</span>
                            </div>
                        </div>
                        <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-semibold">Positivo</span>
                    </div>
                </div>
                <div class="border-l-4 border-orange-500 pl-4 py-3 bg-orange-50">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <p class="text-xs text-gray-600 mb-1">Competidor A • Twitter • Hace 5 horas</p>
                            <p class="font-medium text-gray-800">"Video: Recorrido por sectores vulnerables..."</p>
                            <div class="flex space-x-4 mt-2 text-sm text-gray-600">
                                <span>❤️ 892</span>
                                <span>💬 145</span>
                                <span>🔄 178</span>
                            </div>
                        </div>
                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-semibold">Neutral</span>
                    </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>: Datos de ejemplo.
                Configura las APIs de Facebook, Twitter, Instagram, TikTok y YouTube para ver datos reales.
            </p>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        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';
            }
        }
        // Engagement Chart
        const engagementCtx = document.getElementById('engagementChart').getContext('2d');
        new Chart(engagementCtx, {
            type: 'bar',
            data: {
                labels: ['Tú', 'Competidor A', 'Competidor B', 'Competidor C', 'Competidor D'],
                datasets: [{
                    label: 'Engagement Total',
                    data: [21500, 18900, 15420, 12300, 9800],
                    backgroundColor: ['#22c55e', '#f59e0b', '#f59e0b', '#ef4444', '#ef4444'],
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        ticks: { padding: 5 }
                    },
                    y: {
                        ticks: { padding: 5 }
                    }
                }
            }
        });

        // Platform Chart
        const platformCtx = document.getElementById('platformChart').getContext('2d');
        new Chart(platformCtx, {
            type: 'doughnut',
            data: {
                labels: ['Facebook', 'Twitter', 'Instagram', 'TikTok', 'YouTube'],
                datasets: [{
                    data: [120, 150, 72, 45, 28],
                    backgroundColor: ['#1877f2', '#1da1f2', '#e4405f', '#000000', '#ff0000'],
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 15,
                            padding: 8
                        }
                    }
                }
            }
        });

        // Sentiment Chart
        const sentimentCtx = document.getElementById('sentimentChart').getContext('2d');
        new Chart(sentimentCtx, {
            type: 'pie',
            data: {
                labels: ['Positivo', 'Neutral', 'Negativo'],
                datasets: [{
                    data: [180, 120, 42],
                    backgroundColor: ['#22c55e', '#f59e0b', '#ef4444'],
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 15,
                            padding: 8
                        }
                    }
                }
            }
        });
    </script>
@endpush