@extends('layouts.goberdata')

@section('title', 'Call Center Global')
@section('page_title', 'Call Center Global')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@push('styles')
<style>
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
    </style>
<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-purple-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        📞 Call Center 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">
                    <!-- Global Stats Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        <div class="bg-gradient-to-br from-blue-500 to-blue-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Total Llamadas</p>
                                <i class="fas fa-phone text-3xl opacity-50"></i>
                            </div>
                            <p id="totalCalls" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Todas las campañas</p>
                        </div>
                        <div class="bg-gradient-to-br from-green-500 to-green-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Completadas</p>
                                <i class="fas fa-check-circle text-3xl opacity-50"></i>
                            </div>
                            <p id="completedCalls" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Exitosas</p>
                        </div>
                        <div class="bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Campañas Activas</p>
                                <i class="fas fa-flag text-3xl opacity-50"></i>
                            </div>
                            <p id="activeCampaigns" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Con call center</p>
                        </div>
                        <div class="bg-gradient-to-br from-orange-500 to-orange-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Duración Promedio</p>
                                <i class="fas fa-stopwatch text-3xl opacity-50"></i>
                            </div>
                            <p id="avgDuration" class="text-4xl font-bold">0m</p>
                            <p class="text-xs opacity-75 mt-1">Por llamada</p>
                        </div>
                    </div>

                    <!-- Charts Section -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Llamadas por Campaña</h3>
                            <div class="chart-container">
                                <canvas id="campaignChart"></canvas>
                            </div>
                        </div>
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Llamadas por Estado</h3>
                            <div class="chart-container">
                                <canvas id="statusChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Campaign Comparison -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Comparación por Campaña</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">Campaña</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Llamadas</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completadas</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pendientes</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tasa Éxito</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duración Promedio</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="campaignsTableBody" class="bg-white divide-y divide-gray-200">
                                    <!-- Data will be loaded here -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Top Agents -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Top Agentes Globales</h3>
                        <div class="space-y-4" id="topAgentsContainer">
                            <!-- Top agents will be loaded here -->
                        </div>
                    </div>

                    <!-- Recent Activity -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-bold mb-4">Actividad Reciente</h3>
                        <div class="space-y-4" id="recentActivityContainer">
                            <!-- Recent activity will be loaded here -->
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        const token = localStorage.getItem('auth_token');
        if (!token) {
            window.location.href = '/login';
        }

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

        async function loadGlobalData() {
            try {
                // Simular datos globales ya que no tenemos endpoint específico
                const mockData = {
                    stats: {
                        total_calls: 28,
                        completed_calls: 20,
                        active_campaigns: 23,
                        avg_duration: 4.5
                    },
                    campaigns: [
                        { name: 'Campaña Bogotá', total: 8, completed: 6, pending: 2, success_rate: 75, avg_duration: 5.2 },
                        { name: 'Campaña Medellín', total: 6, completed: 5, pending: 1, success_rate: 83, avg_duration: 4.8 },
                        { name: 'Campaña Cali', total: 5, completed: 4, pending: 1, success_rate: 80, avg_duration: 4.5 },
                        { name: 'Campaña Barranquilla', total: 4, completed: 3, pending: 1, success_rate: 75, avg_duration: 4.2 },
                        { name: 'Campaña Cartagena', total: 5, completed: 2, pending: 3, success_rate: 40, avg_duration: 3.8 }
                    ],
                    statuses: [
                        { status: 'completed', count: 20 },
                        { status: 'pending', count: 5 },
                        { status: 'failed', count: 2 },
                        { status: 'no_answer', count: 1 }
                    ],
                    top_agents: [
                        { name: 'María González', campaign: 'Campaña Bogotá', calls: 15, success_rate: 87, avg_duration: 5.5 },
                        { name: 'Carlos Rodríguez', campaign: 'Campaña Medellín', calls: 12, success_rate: 83, avg_duration: 4.8 },
                        { name: 'Ana Martínez', campaign: 'Campaña Cali', calls: 10, success_rate: 80, avg_duration: 4.5 },
                        { name: 'Pedro López', campaign: 'Campaña Barranquilla', calls: 8, success_rate: 75, avg_duration: 4.2 },
                        { name: 'Laura Sánchez', campaign: 'Campaña Cartagena', calls: 6, success_rate: 67, avg_duration: 3.8 }
                    ],
                    recent_activity: [
                        { campaign: 'Campaña Bogotá', action: 'Nueva llamada completada', agent: 'María González', time: '1 hora' },
                        { campaign: 'Campaña Medellín', action: 'Llamada programada', agent: 'Carlos Rodríguez', time: '2 horas' },
                        { campaign: 'Campaña Cali', action: 'Llamada fallida', agent: 'Ana Martínez', time: '3 horas' },
                        { campaign: 'Campaña Barranquilla', action: 'Nueva llamada completada', agent: 'Pedro López', time: '4 horas' },
                        { campaign: 'Campaña Cartagena', action: 'Sin respuesta', agent: 'Laura Sánchez', time: '5 horas' }
                    ]
                };

                // Update stats cards
                document.getElementById('totalCalls').textContent = mockData.stats.total_calls.toLocaleString();
                document.getElementById('completedCalls').textContent = mockData.stats.completed_calls.toLocaleString();
                document.getElementById('activeCampaigns').textContent = mockData.stats.active_campaigns.toLocaleString();
                document.getElementById('avgDuration').textContent = mockData.stats.avg_duration + 'm';

                // Render charts
                renderCampaignChart(mockData.campaigns);
                renderStatusChart(mockData.statuses);

                // Load campaign comparison
                loadCampaignComparison(mockData.campaigns);

                // Load top agents
                loadTopAgents(mockData.top_agents);

                // Load recent activity
                loadRecentActivity(mockData.recent_activity);

            } catch (error) {
                console.error('Error loading global call center data:', error);
                alert('Error al cargar los datos globales del call center. Por favor, intente de nuevo.');
            }
        }

        function renderCampaignChart(campaigns) {
            const ctx = document.getElementById('campaignChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: campaigns.map(c => c.name),
                    datasets: [{
                        label: 'Total Llamadas',
                        data: campaigns.map(c => c.total),
                        backgroundColor: '#6366F1',
                        borderColor: '#4F46E5',
                        borderWidth: 1
                    }, {
                        label: 'Completadas',
                        data: campaigns.map(c => c.completed),
                        backgroundColor: '#10B981',
                        borderColor: '#059669',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function renderStatusChart(statuses) {
            const ctx = document.getElementById('statusChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: statuses.map(s => s.status),
                    datasets: [{
                        data: statuses.map(s => s.count),
                        backgroundColor: ['#10B981', '#F59E0B', '#EF4444', '#6B7280'],
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
        }

        function loadCampaignComparison(campaigns) {
            const tbody = document.getElementById('campaignsTableBody');
            tbody.innerHTML = '';

            campaigns.forEach(campaign => {
                const row = `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${campaign.name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.total}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                ${campaign.completed}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                ${campaign.pending}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full ${getSuccessRateBadge(campaign.success_rate)}">
                                ${campaign.success_rate}%
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.avg_duration}m</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button onclick="viewCampaignCalls('${campaign.name}')" class="text-blue-600 hover:text-blue-900 mr-2">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="exportCampaignCalls('${campaign.name}')" class="text-green-600 hover:text-green-900">
                                <i class="fas fa-download"></i>
                            </button>
                        </td>
                    </tr>
                `;
                tbody.innerHTML += row;
            });
        }

        function loadTopAgents(agents) {
            const container = document.getElementById('topAgentsContainer');
            container.innerHTML = '';

            agents.forEach((agent, index) => {
                const agentCard = `
                    <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">
                                ${index + 1}
                            </div>
                            <div>
                                <span class="font-semibold text-gray-800">${agent.name}</span>
                                <span class="text-gray-600 ml-2">- ${agent.campaign}</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm">
                                <span class="font-semibold text-blue-600">${agent.calls} llamadas</span>
                                <span class="text-gray-500 ml-2">${agent.success_rate}% éxito</span>
                            </div>
                            <div class="text-xs text-gray-500">${agent.avg_duration}m promedio</div>
                        </div>
                    </div>
                `;
                container.innerHTML += agentCard;
            });
        }

        function loadRecentActivity(activities) {
            const container = document.getElementById('recentActivityContainer');
            container.innerHTML = '';

            activities.forEach(activity => {
                const activityItem = `
                    <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                        <div>
                            <span class="font-semibold text-gray-800">${activity.campaign}</span>
                            <span class="text-gray-600 ml-2">${activity.action}</span>
                            <span class="text-gray-600 ml-2">- ${activity.agent}</span>
                        </div>
                        <span class="text-xs text-gray-500">${activity.time}</span>
                    </div>
                `;
                container.innerHTML += activityItem;
            });
        }

        function getSuccessRateBadge(rate) {
            if (rate >= 80) return 'bg-green-100 text-green-800';
            if (rate >= 60) return 'bg-yellow-100 text-yellow-800';
            return 'bg-red-100 text-red-800';
        }

        function viewCampaignCalls(campaignName) {
            alert(`Ver llamadas de ${campaignName} - Funcionalidad pendiente`);
        }

        function exportCampaignCalls(campaignName) {
            alert(`Exportar llamadas de ${campaignName} - Funcionalidad pendiente`);
        }
    </script>
@endpush