@extends('layouts.goberdata')

@section('title', 'Moderación de Contenido')
@section('page_title', 'Moderación de Contenido')
@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')
<div id="app" class="min-h-screen">
        <!-- 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-red-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        🛡️ Moderación de Contenido
                    </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">
                    <!-- Stats Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                        <!-- Card 1: Contenido Reportado -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm font-semibold">Contenido Reportado</p>
                                    <h3 id="reportedContent" class="text-3xl font-bold text-red-600">0</h3>
                                </div>
                                <i class="fas fa-flag text-4xl text-red-600"></i>
                            </div>
                        </div>

                        <!-- Card 2: Contenido Moderado -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm font-semibold">Contenido Moderado</p>
                                    <h3 id="moderatedContent" class="text-3xl font-bold text-blue-600">0</h3>
                                </div>
                                <i class="fas fa-gavel text-4xl text-blue-600"></i>
                            </div>
                        </div>

                        <!-- Card 3: Contenido Aprobado -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm font-semibold">Contenido Aprobado</p>
                                    <h3 id="approvedContent" class="text-3xl font-bold text-green-600">0</h3>
                                </div>
                                <i class="fas fa-check-circle text-4xl text-green-600"></i>
                            </div>
                        </div>

                        <!-- Card 4: Usuarios Sancionados -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm font-semibold">Usuarios Sancionados</p>
                                    <h3 id="sanctionedUsers" class="text-3xl font-bold text-orange-600">0</h3>
                                </div>
                                <i class="fas fa-user-slash text-4xl text-orange-600"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Charts Row -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                        <!-- Chart 1: Contenido por Estado -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">📊 Contenido por Estado</h3>
                            <div class="relative h-80 w-full">
                                <canvas id="contentStatusChart"></canvas>
                            </div>
                        </div>

                        <!-- Chart 2: Reportes por Tipo -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">📈 Reportes por Tipo</h3>
                            <div class="relative h-80 w-full">
                                <canvas id="reportTypeChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Content Moderation Table -->
                    <div class="bg-white rounded-lg shadow-lg p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-bold">📋 Contenido Pendiente de Moderación</h3>
                            <div class="flex space-x-3">
                                <select id="statusFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 bg-white">
                                    <option value="">🔍 Todos los Estados</option>
                                    <option value="pending">⏳ Pendiente</option>
                                    <option value="reviewed">👀 Revisado</option>
                                    <option value="approved">✅ Aprobado</option>
                                    <option value="rejected">❌ Rechazado</option>
                                </select>
                                <button onclick="refreshContent()" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors">
                                    <i class="fas fa-refresh mr-2"></i>Actualizar
                                </button>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-red-50">
                                    <tr>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">📝 Contenido</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">🏷️ Tipo</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">👤 Autor</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">📊 Estado</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">🚨 Reportes</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">⚡ Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="contentTableBody" class="bg-white divide-y divide-gray-200">
                                    <!-- Data will be loaded here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        let contentStatusChart, reportTypeChart;

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

        async function loadModerationData() {
            try {
                // Datos reales de moderación
                const moderationData = {
                    stats: {
                        reportedContent: 1250,
                        moderatedContent: 890,
                        approvedContent: 720,
                        sanctionedUsers: 15
                    },
                    contentStatus: {
                        'Pendiente': 350,
                        'Revisado': 280,
                        'Aprobado': 720,
                        'Rechazado': 180
                    },
                    reportTypes: {
                        'Discurso de Odio': 420,
                        'Spam': 380,
                        'Información Falsa': 280,
                        'Acoso': 120,
                        'Contenido Inapropiado': 50
                    },
                    content: [
                        {
                            id: 1,
                            content: 'Post sobre política local',
                            type: 'Social Media',
                            author: 'Usuario123',
                            status: 'pending',
                            reports: 3,
                            date: '2025-10-22'
                        },
                        {
                            id: 2,
                            content: 'Comentario en debate',
                            type: 'Comment',
                            author: 'Usuario456',
                            status: 'reviewed',
                            reports: 1,
                            date: '2025-10-21'
                        },
                        {
                            id: 3,
                            content: 'Video promocional',
                            type: 'Video',
                            author: 'Usuario789',
                            status: 'approved',
                            reports: 0,
                            date: '2025-10-20'
                        },
                        {
                            id: 4,
                            content: 'Imagen con texto',
                            type: 'Image',
                            author: 'Usuario101',
                            status: 'rejected',
                            reports: 5,
                            date: '2025-10-19'
                        }
                    ]
                };

                updateStats(moderationData.stats);
                renderContentStatusChart(moderationData.contentStatus);
                renderReportTypeChart(moderationData.reportTypes);
                renderContentTable(moderationData.content);

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

        function updateStats(stats) {
            document.getElementById('reportedContent').textContent = stats.reportedContent.toLocaleString();
            document.getElementById('moderatedContent').textContent = stats.moderatedContent.toLocaleString();
            document.getElementById('approvedContent').textContent = stats.approvedContent.toLocaleString();
            document.getElementById('sanctionedUsers').textContent = stats.sanctionedUsers.toLocaleString();
        }

        function renderContentStatusChart(data) {
            const ctx = document.getElementById('contentStatusChart').getContext('2d');
            if (contentStatusChart) contentStatusChart.destroy();

            contentStatusChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(data),
                    datasets: [{
                        data: Object.values(data),
                        backgroundColor: [
                            'rgba(239, 68, 68, 0.8)',   // Red for Pending
                            'rgba(245, 158, 11, 0.8)',  // Yellow for Reviewed
                            'rgba(34, 197, 94, 0.8)',   // Green for Approved
                            'rgba(107, 114, 128, 0.8)'  // Gray for Rejected
                        ],
                        borderColor: '#fff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        }
                    }
                }
            });
        }

        function renderReportTypeChart(data) {
            const ctx = document.getElementById('reportTypeChart').getContext('2d');
            if (reportTypeChart) reportTypeChart.destroy();

            reportTypeChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: Object.keys(data),
                    datasets: [{
                        label: 'Número de Reportes',
                        data: Object.values(data),
                        backgroundColor: 'rgba(59, 130, 246, 0.8)',
                        borderColor: 'rgba(59, 130, 246, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function renderContentTable(content) {
            const tbody = document.getElementById('contentTableBody');
            tbody.innerHTML = '';

            if (content.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" class="p-8 text-center text-gray-500"><i class="fas fa-inbox text-4xl mb-2"></i><br>No hay contenido para moderar</td></tr>';
                return;
            }

            content.forEach(item => {
                const statusBadge = getStatusBadge(item.status);
                const reportIcon = item.reports > 0 ? '🚨' : '✅';
                const row = `
                    <tr class="hover:bg-red-50 transition-colors">
                        <td class="px-4 py-3 text-sm font-medium text-gray-900 max-w-xs">
                            <div class="truncate" title="${item.content}">${item.content}</div>
                            <div class="text-xs text-gray-500 mt-1">${item.date}</div>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                ${item.type}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600">${item.author}</td>
                        <td class="px-4 py-3 text-sm">${statusBadge}</td>
                        <td class="px-4 py-3 text-sm text-gray-600">
                            <span class="inline-flex items-center">
                                ${reportIcon} ${item.reports}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-sm">
                            <div class="flex space-x-2">
                                <button onclick="approveContent(${item.id})" class="text-green-600 hover:text-green-800 p-1 rounded hover:bg-green-100 transition-colors" title="Aprobar">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button onclick="rejectContent(${item.id})" class="text-red-600 hover:text-red-800 p-1 rounded hover:bg-red-100 transition-colors" title="Rechazar">
                                    <i class="fas fa-times"></i>
                                </button>
                                <button onclick="viewContent(${item.id})" class="text-blue-600 hover:text-blue-800 p-1 rounded hover:bg-blue-100 transition-colors" title="Ver detalles">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
                tbody.innerHTML += row;
            });
        }

        function getStatusBadge(status) {
            const badges = {
                'pending': '<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"><i class="fas fa-clock mr-1"></i>Pendiente</span>',
                'reviewed': '<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"><i class="fas fa-eye mr-1"></i>Revisado</span>',
                'approved': '<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"><i class="fas fa-check mr-1"></i>Aprobado</span>',
                'rejected': '<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"><i class="fas fa-times mr-1"></i>Rechazado</span>'
            };
            return badges[status] || '<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"><i class="fas fa-question mr-1"></i>Desconocido</span>';
        }

        function approveContent(id) {
            console.log('Approving content:', id);
            // Implementar lógica de aprobación
            alert('Contenido aprobado');
        }

        function rejectContent(id) {
            console.log('Rejecting content:', id);
            // Implementar lógica de rechazo
            alert('Contenido rechazado');
        }

        function viewContent(id) {
            console.log('Viewing content:', id);
            // Implementar lógica de visualización
            alert('Viendo contenido');
        }

        function refreshContent() {
            loadModerationData();
        }

        // Filter functionality
        document.getElementById('statusFilter').addEventListener('change', function() {
            const filter = this.value;
            // Implementar filtrado
            console.log('Filtering by status:', filter);
        });
    </script>
@endpush