@extends('layouts.goberdata')

@section('title', 'Monitoreo de Redes Sociales')
@section('page_title', 'Monitoreo de Redes Sociales')
@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">📱 Monitoreo de Redes Sociales</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="refreshData()" class="bg-white text-blue-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                    <i class="fas fa-sync-alt"></i> Actualizar
                </button>
                <button onclick="window.location.href='/admin/dashboard'" class="bg-white bg-opacity-20 px-4 py-2 rounded-lg font-semibold hover:bg-opacity-30">
                    <i class="fas fa-arrow-left"></i> Volver
                </button>
            </div>
        </div>
    </div>

    <!-- Menú de Navegación -->
<div class="container-fluid px-3 py-3">

        <!-- Estadísticas Principales -->
        <div class="grid md: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-500 text-sm font-semibold">Competidores</p>
                        <h3 id="statCompetitors" class="text-3xl font-bold text-blue-600">0</h3>
                    </div>
                    <div class="text-4xl text-blue-600">
                        <i class="fas fa-users"></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-500 text-sm font-semibold">Cuentas Monitoreadas</p>
                        <h3 id="statAccounts" class="text-3xl font-bold text-green-600">0</h3>
                    </div>
                    <div class="text-4xl text-green-600">
                        <i class="fas fa-link"></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-500 text-sm font-semibold">Posts (7 días)</p>
                        <h3 id="statPosts" class="text-3xl font-bold text-purple-600">0</h3>
                    </div>
                    <div class="text-4xl text-purple-600">
                        <i class="fas fa-comment"></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-500 text-sm font-semibold">Alertas Pendientes</p>
                        <h3 id="statAlerts" class="text-3xl font-bold text-red-600">0</h3>
                    </div>
                    <div class="text-4xl text-red-600">
                        <i class="fas fa-bell"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabs -->
        <div class="bg-white rounded-xl shadow-lg mb-6">
            <div class="flex border-b">
                <button onclick="switchTab('posts')" id="tabPosts" class="tab-btn flex-1 px-6 py-4 font-semibold text-blue-600 border-b-2 border-blue-600">
                    <i class="fas fa-stream"></i> Posts Recientes
                </button>
                <button onclick="switchTab('alerts')" id="tabAlerts" class="tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-blue-600">
                    <i class="fas fa-exclamation-triangle"></i> Alertas
                </button>
                <button onclick="switchTab('trends')" id="tabTrends" class="tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-blue-600">
                    <i class="fas fa-chart-line"></i> Tendencias
                </button>
                <button onclick="switchTab('analytics')" id="tabAnalytics" class="tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-blue-600">
                    <i class="fas fa-chart-bar"></i> Análisis
                </button>
            </div>

            <!-- Tab: Posts -->
            <div id="contentPosts" class="p-6">
                <!-- Filtros -->
                <div class="flex gap-4 mb-6">
                    <select id="filterCompetitor" onchange="filterPosts()" class="px-4 py-2 border rounded-lg">
                        <option value="">Todos los competidores</option>
                    </select>
                    <select id="filterPlatform" onchange="filterPosts()" class="px-4 py-2 border rounded-lg">
                        <option value="">Todas las plataformas</option>
                        <option value="facebook">Facebook</option>
                        <option value="twitter">Twitter</option>
                        <option value="instagram">Instagram</option>
                        <option value="tiktok">TikTok</option>
                        <option value="youtube">YouTube</option>
                    </select>
                    <select id="filterSentiment" onchange="filterPosts()" class="px-4 py-2 border rounded-lg">
                        <option value="">Todos los sentimientos</option>
                        <option value="positive">Positivo</option>
                        <option value="neutral">Neutral</option>
                        <option value="negative">Negativo</option>
                    </select>
                </div>

                <!-- Lista de Posts -->
                <div id="postsList" class="space-y-4">
                    <!-- Se llenará dinámicamente -->
                </div>

                <!-- Empty State -->
                <div id="postsEmpty" class="hidden text-center py-16">
                    <div class="text-6xl mb-4">📱</div>
                    <h3 class="text-2xl font-bold text-gray-700 mb-2">No hay posts registrados</h3>
                    <p class="text-gray-500">Los posts de tus competidores aparecerán aquí</p>
                </div>
            </div>

            <!-- Tab: Alertas -->
            <div id="contentAlerts" class="hidden p-6">
                <div id="alertsList" class="space-y-4">
                    <!-- Se llenará dinámicamente -->
                </div>

                <div id="alertsEmpty" class="hidden text-center py-16">
                    <div class="text-6xl mb-4">🔔</div>
                    <h3 class="text-2xl font-bold text-gray-700 mb-2">No hay alertas</h3>
                    <p class="text-gray-500">Las alertas importantes aparecerán aquí</p>
                </div>
            </div>

            <!-- Tab: Tendencias -->
            <div id="contentTrends" class="hidden p-6">
                <div class="grid md:grid-cols-2 gap-6">
                    <!-- Hashtags Trending -->
                    <div class="bg-gradient-to-br from-pink-50 to-pink-100 rounded-xl p-6">
                        <h3 class="text-xl font-bold mb-4 text-pink-800">
                            <i class="fas fa-hashtag"></i> Hashtags Populares
                        </h3>
                        <div id="trendingHashtags" class="space-y-2">
                            <!-- Se llenará dinámicamente -->
                        </div>
                    </div>

                    <!-- Temas en Alza -->
                    <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6">
                        <h3 class="text-xl font-bold mb-4 text-blue-800">
                            <i class="fas fa-fire"></i> Temas en Alza
                        </h3>
                        <div id="trendingTopics" class="space-y-2">
                            <!-- Se llenará dinámicamente -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab: Analytics -->
            <div id="contentAnalytics" class="hidden p-6">
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-white p-4 rounded-lg border">
                        <h3 class="font-bold mb-4">Posts por Plataforma</h3>
                        <canvas id="chartPlatforms"></canvas>
                    </div>
                    <div class="bg-white p-4 rounded-lg border">
                        <h3 class="font-bold mb-4">Distribución de Sentimiento</h3>
                        <canvas id="chartSentiment"></canvas>
                    </div>
                    <div class="bg-white p-4 rounded-lg border md:col-span-2">
                        <h3 class="font-bold mb-4">Engagement por Competidor</h3>
                        <canvas id="chartEngagement"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast Container -->
    <div id="toastContainer" class="fixed top-5 right-5 z-[100] space-y-3"></div>
@endsection

@push('scripts')
<script>
        let currentTab = 'posts';
        let dashboardData = null;
        let postsData = [];
        let alertsData = [];
        let trendsData = [];

        const token = localStorage.getItem('auth_token');
        if (!token) {
            window.location.href = '/login';
        }

        // Cargar datos iniciales
        (async () => {
            await loadCampaignInfo();
            await loadDashboard();
            await loadPosts();
            await loadAlerts();
            await loadTrends();
        })();

        async function loadCampaignInfo() {
            try {
                const response = await fetch('/api/campaigns', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });
                if (response.ok) {
                    const data = await response.json();
                    const currentCampaign = data.current_campaign;
                    if (currentCampaign) {
                        document.getElementById('campaignName').textContent = currentCampaign.name;
                    }
                }
            } catch (err) {
                console.error('Error loading campaign:', err);
            }
        }

        async function loadDashboard() {
            try {
                const response = await fetch('/api/social-monitoring/dashboard?days=7', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (response.ok) {
                    dashboardData = await response.json();
                    updateStats();
                    renderCharts();
                }
            } catch (err) {
                console.error('Error loading dashboard:', err);
            }
        }

        function updateStats() {
            if (!dashboardData) return;

            document.getElementById('statCompetitors').textContent = dashboardData.competitors_monitored || 0;
            document.getElementById('statAccounts').textContent = dashboardData.accounts_tracked || 0;
            document.getElementById('statPosts').textContent = dashboardData.posts_collected || 0;
            document.getElementById('statAlerts').textContent = dashboardData.alerts_pending || 0;
        }

        async function loadPosts() {
            try {
                const response = await fetch('/api/social-monitoring/posts?per_page=20', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (response.ok) {
                    const data = await response.json();
                    postsData = data.data || [];
                    renderPosts();
                    populateCompetitorFilter();
                }
            } catch (err) {
                console.error('Error loading posts:', err);
            }
        }

        function renderPosts() {
            const container = document.getElementById('postsList');
            const empty = document.getElementById('postsEmpty');

            if (postsData.length === 0) {
                container.classList.add('hidden');
                empty.classList.remove('hidden');
                return;
            }

            container.classList.remove('hidden');
            empty.classList.add('hidden');

            container.innerHTML = postsData.map(post => {
                const sentimentColor = {
                    positive: 'green',
                    neutral: 'yellow',
                    negative: 'red'
                }[post.ai_sentiment] || 'gray';

                const platformIcon = {
                    facebook: 'fab fa-facebook text-blue-600',
                    twitter: 'fab fa-twitter text-blue-400',
                    instagram: 'fab fa-instagram text-pink-600',
                    tiktok: 'fab fa-tiktok',
                    youtube: 'fab fa-youtube text-red-600'
                }[post.platform] || 'fas fa-share-alt';

                return `
                    <div class="bg-white rounded-lg shadow p-6 hover:shadow-lg transition">
                        <div class="flex items-start justify-between mb-3">
                            <div class="flex items-center gap-3">
                                <i class="${platformIcon} text-2xl"></i>
                                <div>
                                    <h4 class="font-bold">${post.competitor?.name || 'Desconocido'}</h4>
                                    <p class="text-sm text-gray-500">${new Date(post.posted_at).toLocaleString('es-ES')}</p>
                                </div>
                            </div>
                            <span class="px-3 py-1 bg-${sentimentColor}-100 text-${sentimentColor}-700 rounded-full text-xs font-semibold capitalize">
                                ${post.ai_sentiment || 'neutral'}
                            </span>
                        </div>

                        <p class="text-gray-700 mb-4">${post.content || 'Sin contenido'}</p>

                        <div class="flex items-center gap-4 text-sm text-gray-500">
                            <span><i class="fas fa-heart"></i> ${post.likes_count || 0}</span>
                            <span><i class="fas fa-comment"></i> ${post.comments_count || 0}</span>
                            <span><i class="fas fa-share"></i> ${post.shares_count || 0}</span>
                            ${post.requires_response ? '<span class="text-orange-600 font-semibold"><i class="fas fa-exclamation-circle"></i> Requiere respuesta</span>' : ''}
                        </div>

                        ${post.post_url ? `<a href="${post.post_url}" target="_blank" class="mt-3 inline-block text-blue-600 hover:underline text-sm">Ver publicación original →</a>` : ''}
                    </div>
                `;
            }).join('');
        }

        async function loadAlerts() {
            try {
                const response = await fetch('/api/social-monitoring/alerts?status=pending', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (response.ok) {
                    const data = await response.json();
                    alertsData = data.data || [];
                    renderAlerts();
                }
            } catch (err) {
                console.error('Error loading alerts:', err);
            }
        }

        function renderAlerts() {
            const container = document.getElementById('alertsList');
            const empty = document.getElementById('alertsEmpty');

            if (alertsData.length === 0) {
                container.classList.add('hidden');
                empty.classList.remove('hidden');
                return;
            }

            container.classList.remove('hidden');
            empty.classList.add('hidden');

            container.innerHTML = alertsData.map(alert => {
                const severityColor = {
                    critical: 'red',
                    high: 'orange',
                    medium: 'yellow',
                    low: 'blue'
                }[alert.severity] || 'gray';

                return `
                    <div class="bg-${severityColor}-50 border-l-4 border-${severityColor}-500 rounded-lg p-6">
                        <div class="flex items-start justify-between mb-2">
                            <div class="flex items-center gap-2">
                                <i class="fas fa-exclamation-triangle text-${severityColor}-600 text-xl"></i>
                                <h4 class="font-bold text-${severityColor}-800">${alert.alert_type || 'Alerta'}</h4>
                            </div>
                            <span class="text-sm text-gray-500">${new Date(alert.created_at).toLocaleString('es-ES')}</span>
                        </div>
                        <p class="text-gray-700 mb-3">${alert.message}</p>
                        <div class="flex gap-2">
                            <button onclick="resolveAlert(${alert.id})" class="px-4 py-2 bg-${severityColor}-600 text-white rounded-lg text-sm hover:bg-${severityColor}-700">
                                Marcar como resuelta
                            </button>
                            ${alert.social_post_id ? `<button onclick="viewPost(${alert.social_post_id})" class="px-4 py-2 bg-gray-200 rounded-lg text-sm hover:bg-gray-300">Ver post</button>` : ''}
                        </div>
                    </div>
                `;
            }).join('');
        }

        async function loadTrends() {
            try {
                const response = await fetch('/api/social-monitoring/trends?days=7', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (response.ok) {
                    const data = await response.json();
                    trendsData = data.data || [];
                    renderTrends();
                }
            } catch (err) {
                console.error('Error loading trends:', err);
            }
        }

        function renderTrends() {
            const hashtagsContainer = document.getElementById('trendingHashtags');
            const topicsContainer = document.getElementById('trendingTopics');

            const hashtags = trendsData.filter(t => t.type === 'hashtag').slice(0, 10);
            const topics = trendsData.filter(t => t.type === 'topic' || t.type === 'keyword').slice(0, 10);

            hashtagsContainer.innerHTML = hashtags.length > 0
                ? hashtags.map((h, i) => `
                    <div class="flex items-center justify-between bg-white rounded-lg p-3">
                        <div class="flex items-center gap-3">
                            <span class="text-2xl font-bold text-pink-300">#${i + 1}</span>
                            <span class="font-semibold">${h.keyword}</span>
                        </div>
                        <span class="text-sm text-gray-500">${h.mentions_count} menciones</span>
                    </div>
                `).join('')
                : '<p class="text-gray-500 text-center">Sin datos</p>';

            topicsContainer.innerHTML = topics.length > 0
                ? topics.map((t, i) => `
                    <div class="flex items-center justify-between bg-white rounded-lg p-3">
                        <div class="flex items-center gap-3">
                            <span class="text-2xl">🔥</span>
                            <span class="font-semibold">${t.keyword}</span>
                        </div>
                        <span class="text-sm text-gray-500">${t.engagement_total} engagement</span>
                    </div>
                `).join('')
                : '<p class="text-gray-500 text-center">Sin datos</p>';
        }

        function renderCharts() {
            if (!dashboardData) return;

            // Chart: Posts por Plataforma
            const platformsCtx = document.getElementById('chartPlatforms');
            if (platformsCtx && dashboardData.posts_by_platform) {
                new Chart(platformsCtx, {
                    type: 'doughnut',
                    data: {
                        labels: dashboardData.posts_by_platform.map(p => p.platform),
                        datasets: [{
                            data: dashboardData.posts_by_platform.map(p => p.count),
                            backgroundColor: ['#3b82f6', '#60a5fa', '#ec4899', '#000000', '#ef4444']
                        }]
                    }
                });
            }

            // Chart: Sentimiento
            const sentimentCtx = document.getElementById('chartSentiment');
            if (sentimentCtx && dashboardData.sentiment_distribution) {
                new Chart(sentimentCtx, {
                    type: 'pie',
                    data: {
                        labels: dashboardData.sentiment_distribution.map(s => s.ai_sentiment),
                        datasets: [{
                            data: dashboardData.sentiment_distribution.map(s => s.count),
                            backgroundColor: ['#10b981', '#fbbf24', '#ef4444']
                        }]
                    }
                });
            }

            // Chart: Engagement
            const engagementCtx = document.getElementById('chartEngagement');
            if (engagementCtx && dashboardData.engagement_by_competitor) {
                new Chart(engagementCtx, {
                    type: 'bar',
                    data: {
                        labels: dashboardData.engagement_by_competitor.map(e => e.competitor?.name || 'N/A'),
                        datasets: [{
                            label: 'Total Engagement',
                            data: dashboardData.engagement_by_competitor.map(e => e.total_engagement),
                            backgroundColor: '#8b5cf6'
                        }]
                    }
                });
            }
        }

        function switchTab(tab) {
            currentTab = tab;

            // Update tab buttons
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.className = 'tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-blue-600';
            });
            document.getElementById(`tab${tab.charAt(0).toUpperCase() + tab.slice(1)}`).className = 'tab-btn flex-1 px-6 py-4 font-semibold text-blue-600 border-b-2 border-blue-600';

            // Update content
            document.getElementById('contentPosts').classList.add('hidden');
            document.getElementById('contentAlerts').classList.add('hidden');
            document.getElementById('contentTrends').classList.add('hidden');
            document.getElementById('contentAnalytics').classList.add('hidden');
            document.getElementById(`content${tab.charAt(0).toUpperCase() + tab.slice(1)}`).classList.remove('hidden');
        }

        function populateCompetitorFilter() {
            const select = document.getElementById('filterCompetitor');
            const competitors = [...new Set(postsData.map(p => p.competitor?.name).filter(Boolean))];

            select.innerHTML = '<option value="">Todos los competidores</option>' +
                competitors.map(c => `<option value="${c}">${c}</option>`).join('');
        }

        function filterPosts() {
            const competitor = document.getElementById('filterCompetitor').value;
            const platform = document.getElementById('filterPlatform').value;
            const sentiment = document.getElementById('filterSentiment').value;

            let filtered = postsData;

            if (competitor) filtered = filtered.filter(p => p.competitor?.name === competitor);
            if (platform) filtered = filtered.filter(p => p.platform === platform);
            if (sentiment) filtered = filtered.filter(p => p.ai_sentiment === sentiment);

            const originalData = postsData;
            postsData = filtered;
            renderPosts();
            postsData = originalData;
        }

        async function resolveAlert(id) {
            try {
                const response = await fetch(`/api/social-monitoring/alerts/${id}/resolve`, {
                    method: 'POST',
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (response.ok) {
                    showToast('Alerta resuelta', 'success');
                    await loadAlerts();
                    await loadDashboard();
                }
            } catch (err) {
                showToast('Error al resolver alerta', 'error');
            }
        }

        async function refreshData() {
            showToast('🔄 Actualizando datos desde redes sociales...', 'info');

            try {
                // Primero, hacer scraping de las redes sociales
                const scrapeResponse = await fetch('/api/social-monitoring/scrape/campaign', {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                });

                if (scrapeResponse.ok) {
                    const scrapeResult = await scrapeResponse.json();
                    console.log('✅ Scraping completado:', scrapeResult);

                    showToast(`✅ Actualización completada: ${scrapeResult.results.new_posts} nuevos posts, ${scrapeResult.results.alerts} alertas`, 'success');
                } else {
                    console.warn('⚠️ Scraping falló, mostrando datos existentes');
                    showToast('⚠️ No se pudo conectar con las redes sociales. Mostrando datos existentes.', 'warning');
                }
            } catch (err) {
                console.error('❌ Error en scraping:', err);
                showToast('⚠️ Error al actualizar desde redes sociales. Mostrando datos existentes.', 'warning');
            }

            // Recargar los datos del dashboard
            await loadDashboard();
            await loadPosts();
            await loadAlerts();
            await loadTrends();
        }

        function showToast(message, type = 'info') {
            const container = document.getElementById('toastContainer');
            const colors = {
                success: 'bg-green-600',
                error: 'bg-red-600',
                warning: 'bg-yellow-600',
                info: 'bg-blue-600',
            };
            const icons = {
                success: 'fa-check-circle',
                error: 'fa-times-circle',
                warning: 'fa-exclamation-triangle',
                info: 'fa-info-circle',
            };

            const toast = document.createElement('div');
            toast.className = `${colors[type]} text-white shadow-xl rounded-xl px-4 py-3 flex items-center gap-3 transform transition-all duration-300 translate-x-full opacity-0`;
            toast.innerHTML = `
                <i class="fas ${icons[type]} text-xl"></i>
                <div class="text-sm">${message}</div>
            `;
            container.appendChild(toast);

            setTimeout(() => {
                toast.classList.remove('translate-x-full', 'opacity-0');
            }, 100);

            setTimeout(() => {
                toast.classList.add('translate-x-full', 'opacity-0');
                setTimeout(() => toast.remove(), 300);
            }, 3500);
        }
    </script>
@endpush