@extends('layouts.goberdata')

@section('title', 'Social Global')
@section('page_title', 'Social 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-purple-100">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-2xl font-semibold text-white">
                    <i class="fas fa-hashtag mr-2"></i> Social 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 Posts</p>
                                <p class="text-3xl font-bold text-purple-600" id="totalPosts">0</p>
                            </div>
                            <div class="bg-purple-100 p-3 rounded-full">
                                <i class="fas fa-hashtag 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">Total Cuentas</p>
                                <p class="text-3xl font-bold text-blue-600" id="totalAccounts">0</p>
                            </div>
                            <div class="bg-blue-100 p-3 rounded-full">
                                <i class="fas fa-users 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">Total Engagements</p>
                                <p class="text-3xl font-bold text-green-600" id="totalEngagements">0</p>
                            </div>
                            <div class="bg-green-100 p-3 rounded-full">
                                <i class="fas fa-heart 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">Tasa Engagement</p>
                                <p class="text-3xl font-bold text-orange-600" id="avgEngagementRate">0%</p>
                            </div>
                            <div class="bg-orange-100 p-3 rounded-full">
                                <i class="fas fa-chart-line text-orange-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">Campañas Activas</p>
                                <p class="text-2xl font-bold text-indigo-600" id="activeCampaigns">0</p>
                            </div>
                            <div class="bg-indigo-100 p-3 rounded-full">
                                <i class="fas fa-bullhorn text-indigo-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">Total Seguidores</p>
                                <p class="text-2xl font-bold text-pink-600" id="totalFollowers">0</p>
                            </div>
                            <div class="bg-pink-100 p-3 rounded-full">
                                <i class="fas fa-user-plus text-pink-600 text-lg"></i>
                            </div>
                        </div>
                    </div>
                </div>

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

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

                <!-- Análisis de Sentimientos -->
                <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                    <h3 class="text-xl font-bold text-gray-800 mb-6">Análisis de Sentimientos</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="text-center">
                            <div class="bg-green-100 p-4 rounded-lg">
                                <i class="fas fa-smile text-green-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-green-600" id="positiveSentiment">0%</p>
                                <p class="text-sm text-gray-600">Positivo</p>
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="bg-yellow-100 p-4 rounded-lg">
                                <i class="fas fa-meh text-yellow-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-yellow-600" id="neutralSentiment">0%</p>
                                <p class="text-sm text-gray-600">Neutral</p>
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="bg-red-100 p-4 rounded-lg">
                                <i class="fas fa-frown text-red-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-red-600" id="negativeSentiment">0%</p>
                                <p class="text-sm text-gray-600">Negativo</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Top Posts -->
                <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                    <h3 class="text-xl font-bold text-gray-800 mb-6">Top Posts por Engagement</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">Contenido</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Plataforma</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">Engagement</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="topPostsTable" class="bg-white divide-y divide-gray-200">
                                <!-- Datos se cargarán dinámicamente -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Métricas de Crecimiento -->
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-6">Métricas de Crecimiento</h3>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="text-center">
                            <div class="bg-blue-100 p-4 rounded-lg">
                                <i class="fas fa-calendar-alt text-blue-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-blue-600" id="currentMonthPosts">0</p>
                                <p class="text-sm text-gray-600">Posts Este Mes</p>
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="bg-green-100 p-4 rounded-lg">
                                <i class="fas fa-arrow-up text-green-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-green-600" id="growthRate">0%</p>
                                <p class="text-sm text-gray-600">Crecimiento</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="avgDailyPosts">0</p>
                                <p class="text-sm text-gray-600">Posts/Día</p>
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="bg-orange-100 p-4 rounded-lg">
                                <i class="fas fa-chart-bar text-orange-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-orange-600" id="lastMonthPosts">0</p>
                                <p class="text-sm text-gray-600">Mes Anterior</p>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        </main>
    </div>
@endsection

@push('scripts')
<script>
        let postsByPlatformChart = null;
        let engagementByCampaignChart = null;

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

        async function loadSocialData() {
            try {
                console.log('Loading Social data...');
                const response = await fetch('/api/test/social');
                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('Social data loaded from API:', data);

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

                    // Renderizar gráficos
                    renderCharts(data);

                    // Actualizar tablas
                    updateTopPostsTable(data.top_posts);

                    // Actualizar análisis de sentimientos
                    updateSentimentAnalysis(data.sentiment_analysis);

                    // Actualizar métricas de crecimiento
                    updateGrowthMetrics(data.growth_metrics);
                } else {
                    console.error('Error loading Social data:', result.message);
                    loadFallbackData();
                }
            } catch (error) {
                console.error('Error loading Social data:', error);
                console.error('Error details:', error.message);
                console.log('Loading fallback data...');
                loadFallbackData();
            }
        }

        function updateStats(stats) {
            const totalPosts = document.getElementById('totalPosts');
            const totalAccounts = document.getElementById('totalAccounts');
            const totalEngagements = document.getElementById('totalEngagements');
            const avgEngagementRate = document.getElementById('avgEngagementRate');
            const activeCampaigns = document.getElementById('activeCampaigns');
            const totalFollowers = document.getElementById('totalFollowers');

            if (totalPosts) totalPosts.textContent = stats.total_posts.toLocaleString();
            if (totalAccounts) totalAccounts.textContent = stats.total_accounts.toLocaleString();
            if (totalEngagements) totalEngagements.textContent = stats.total_engagements.toLocaleString();
            if (avgEngagementRate) avgEngagementRate.textContent = stats.avg_engagement_rate + '%';
            if (activeCampaigns) activeCampaigns.textContent = stats.active_campaigns.toLocaleString();
            if (totalFollowers) totalFollowers.textContent = stats.total_followers.toLocaleString();
        }

        function renderCharts(data) {
            // Gráfico de posts por plataforma
            const platformCtx = document.getElementById('postsByPlatformChart');
            if (platformCtx && data.posts_by_platform) {
                if (postsByPlatformChart) {
                    postsByPlatformChart.destroy();
                }

                postsByPlatformChart = new Chart(platformCtx, {
                    type: 'doughnut',
                    data: {
                        labels: data.posts_by_platform.map(item => item.platform),
                        datasets: [{
                            data: data.posts_by_platform.map(item => item.count),
                            backgroundColor: ['#8b5cf6', '#3b82f6', '#10b981', '#f59e0b', '#ef4444'],
                            borderWidth: 2,
                            borderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
            }

            // Gráfico de engagement por campaña
            const campaignCtx = document.getElementById('engagementByCampaignChart');
            if (campaignCtx && data.engagement_by_campaign) {
                if (engagementByCampaignChart) {
                    engagementByCampaignChart.destroy();
                }

                engagementByCampaignChart = new Chart(campaignCtx, {
                    type: 'bar',
                    data: {
                        labels: data.engagement_by_campaign.map(item => item.campaign_name),
                        datasets: [{
                            label: 'Engagement',
                            data: data.engagement_by_campaign.map(item => item.total_engagements),
                            backgroundColor: '#8b5cf6',
                            borderColor: '#7c3aed',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        }

        function updateTopPostsTable(posts) {
            const tbody = document.getElementById('topPostsTable');
            if (tbody && posts) {
                tbody.innerHTML = posts.map(post => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 text-sm text-gray-900">${post.content}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${post.platform}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${post.campaign_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${post.engagement_count.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${post.created_at}</td>
                    </tr>
                `).join('');
            }
        }

        function updateSentimentAnalysis(sentiments) {
            const positiveSentiment = document.getElementById('positiveSentiment');
            const neutralSentiment = document.getElementById('neutralSentiment');
            const negativeSentiment = document.getElementById('negativeSentiment');

            if (sentiments && sentiments.length > 0) {
                const positive = sentiments.find(s => s.sentiment === 'positive');
                const neutral = sentiments.find(s => s.sentiment === 'neutral');
                const negative = sentiments.find(s => s.sentiment === 'negative');

                if (positiveSentiment) positiveSentiment.textContent = (positive?.percentage || 0) + '%';
                if (neutralSentiment) neutralSentiment.textContent = (neutral?.percentage || 0) + '%';
                if (negativeSentiment) negativeSentiment.textContent = (negative?.percentage || 0) + '%';
            }
        }

        function updateGrowthMetrics(metrics) {
            const currentMonthPosts = document.getElementById('currentMonthPosts');
            const growthRate = document.getElementById('growthRate');
            const avgDailyPosts = document.getElementById('avgDailyPosts');
            const lastMonthPosts = document.getElementById('lastMonthPosts');

            if (currentMonthPosts) currentMonthPosts.textContent = metrics.current_month_posts.toLocaleString();
            if (growthRate) growthRate.textContent = metrics.growth_rate + '%';
            if (avgDailyPosts) avgDailyPosts.textContent = metrics.avg_daily_posts;
            if (lastMonthPosts) lastMonthPosts.textContent = metrics.last_month_posts.toLocaleString();
        }

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

            // 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 Social Media. Por favor, intente nuevamente.';

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