@extends('layouts.admin')

@section('header', 'Analytics Dashboard')

@section('content')
<div class="space-y-6">
    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total Users Card -->
        <x-ui.layout.card padding="normal" class="bg-gradient-to-r from-blue-500 to-blue-600 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-medium">Total Users</p>
                    <p class="text-3xl font-bold" id="total-users">Loading...</p>
                </div>
                <div class="p-3 bg-blue-400 bg-opacity-30 rounded-full">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                    </svg>
                </div>
            </div>
        </x-ui.layout.card>

        <!-- Active Events Card -->
        <x-ui.layout.card padding="normal" class="bg-gradient-to-r from-green-500 to-green-600 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm font-medium">Active Events</p>
                    <p class="text-3xl font-bold" id="active-events">Loading...</p>
                </div>
                <div class="p-3 bg-green-400 bg-opacity-30 rounded-full">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
            </div>
        </x-ui.layout.card>

        <!-- Total Clients Card -->
        <x-ui.layout.card padding="normal" class="bg-gradient-to-r from-purple-500 to-purple-600 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-100 text-sm font-medium">Total Clients</p>
                    <p class="text-3xl font-bold" id="total-clients">Loading...</p>
                </div>
                <div class="p-3 bg-purple-400 bg-opacity-30 rounded-full">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                </div>
            </div>
        </x-ui.layout.card>

        <!-- Completion Rate Card -->
        <x-ui.layout.card padding="normal" class="bg-gradient-to-r from-orange-500 to-orange-600 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-orange-100 text-sm font-medium">Completion Rate</p>
                    <p class="text-3xl font-bold" id="completion-rate">Loading...</p>
                </div>
                <div class="p-3 bg-orange-400 bg-opacity-30 rounded-full">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
        </x-ui.layout.card>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- User Registration Trends -->
        <x-ui.layout.card>
            <x-slot name="header">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">User Registration Trends</h3>
                    <button id="export-user-trends" class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        Export
                    </button>
                </div>
            </x-slot>
            <div class="h-80">
                <canvas id="userTrendsChart"></canvas>
            </div>
        </x-ui.layout.card>

        <!-- Event Performance -->
        <x-ui.layout.card>
            <x-slot name="header">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Event Performance</h3>
                    <button id="export-event-performance" class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        Export
                    </button>
                </div>
            </x-slot>
            <div class="h-80">
                <canvas id="eventPerformanceChart"></canvas>
            </div>
        </x-ui.layout.card>
    </div>

    <!-- Recent Activity Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Recent Events -->
        <x-ui.layout.card>
            <x-slot name="header">Recent Events</x-slot>
            <div id="recent-events" class="space-y-3">
                <div class="animate-pulse">
                    <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                </div>
            </div>
        </x-ui.layout.card>

        <!-- Recent Clients -->
        <x-ui.layout.card>
            <x-slot name="header">Recent Clients</x-slot>
            <div id="recent-clients" class="space-y-3">
                <div class="animate-pulse">
                    <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                </div>
            </div>
        </x-ui.layout.card>

        <!-- Recent Activity -->
        <x-ui.layout.card>
            <x-slot name="header">Recent Activity</x-slot>
            <div id="recent-activity" class="space-y-3">
                <div class="animate-pulse">
                    <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                </div>
            </div>
        </x-ui.layout.card>
    </div>

    <!-- Loading Overlay -->
    <div id="loading-overlay" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg p-6 flex items-center space-x-3">
            <svg class="animate-spin h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span class="text-gray-700">Loading analytics data...</span>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize charts
    let userTrendsChart, eventPerformanceChart;
    
    // Load initial data
    loadAnalyticsData();
    
    async function loadAnalyticsData() {
        try {
            // Load summary data
            await loadSummaryData();
            
            // Load chart data
            await loadChartData();
            
            // Load recent data
            await loadRecentData();
            
            // Hide loading overlay
            document.getElementById('loading-overlay').style.display = 'none';
        } catch (error) {
            console.error('Error loading analytics data:', error);
            showError('Failed to load analytics data');
        }
    }
    
    async function loadSummaryData() {
        const response = await fetch('/analytics/global/summary');
        const data = await response.json();
        
        if (data.success) {
            document.getElementById('total-users').textContent = data.data.total_users.toLocaleString();
            document.getElementById('active-events').textContent = data.data.active_events.toLocaleString();
            document.getElementById('total-clients').textContent = data.data.total_clients.toLocaleString();
            document.getElementById('completion-rate').textContent = data.data.completion_rate + '%';
        }
    }
    
    async function loadChartData() {
        // User trends chart
        const userTrendsCtx = document.getElementById('userTrendsChart').getContext('2d');
        userTrendsChart = new Chart(userTrendsCtx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'New Users',
                    data: [],
                    borderColor: 'rgb(59, 130, 246)',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.1,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    x: {
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    }
                }
            }
        });
        
        // Event performance chart
        const eventPerformanceCtx = document.getElementById('eventPerformanceChart').getContext('2d');
        eventPerformanceChart = new Chart(eventPerformanceCtx, {
            type: 'doughnut',
            data: {
                labels: [],
                datasets: [{
                    data: [],
                    backgroundColor: [
                        '#3B82F6',
                        '#10B981',
                        '#F59E0B',
                        '#EF4444',
                        '#8B5CF6',
                        '#F97316'
                    ],
                    borderWidth: 2,
                    borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
        
        // Load actual chart data (mock data for now)
        updateUserTrendsChart();
        updateEventPerformanceChart();
    }
    
    function updateUserTrendsChart() {
        // Mock data - replace with actual API call
        const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
        const data = [12, 19, 15, 25, 22, 30];
        
        userTrendsChart.data.labels = labels;
        userTrendsChart.data.datasets[0].data = data;
        userTrendsChart.update();
    }
    
    function updateEventPerformanceChart() {
        // Mock data - replace with actual API call
        const labels = ['Completed', 'In Progress', 'Not Started'];
        const data = [65, 25, 10];
        
        eventPerformanceChart.data.labels = labels;
        eventPerformanceChart.data.datasets[0].data = data;
        eventPerformanceChart.update();
    }
    
    async function loadRecentData() {
        // Load recent events
        const eventsResponse = await fetch('/analytics/global/recent-events');
        const eventsData = await eventsResponse.json();
        
        if (eventsData.success) {
            renderRecentEvents(eventsData.data);
        }
        
        // Load recent clients
        const clientsResponse = await fetch('/analytics/global/recent-clients');
        const clientsData = await clientsResponse.json();
        
        if (clientsData.success) {
            renderRecentClients(clientsData.data);
        }
        
        // Load recent activity
        const activityResponse = await fetch('/analytics/global/recent-activity');
        const activityData = await activityResponse.json();
        
        if (activityData.success) {
            renderRecentActivity(activityData.data);
        }
    }
    
    function renderRecentEvents(events) {
        const container = document.getElementById('recent-events');
        container.innerHTML = '';
        
        if (events.length === 0) {
            container.innerHTML = '<p class="text-gray-500 text-sm">No recent events</p>';
            return;
        }
        
        events.forEach(event => {
            const eventElement = document.createElement('div');
            eventElement.className = 'flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg';
            eventElement.innerHTML = `
                <div>
                    <p class="font-medium text-gray-900 dark:text-gray-100">${event.name}</p>
                    <p class="text-sm text-gray-500">${event.users_count} users • ${event.created_at}</p>
                </div>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                    Active
                </span>
            `;
            container.appendChild(eventElement);
        });
    }
    
    function renderRecentClients(clients) {
        const container = document.getElementById('recent-clients');
        container.innerHTML = '';
        
        if (clients.length === 0) {
            container.innerHTML = '<p class="text-gray-500 text-sm">No recent clients</p>';
            return;
        }
        
        clients.forEach(client => {
            const clientElement = document.createElement('div');
            clientElement.className = 'flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg';
            clientElement.innerHTML = `
                <div>
                    <p class="font-medium text-gray-900 dark:text-gray-100">${client.name}</p>
                    <p class="text-sm text-gray-500">${client.total_users} users • ${client.active_events} events</p>
                </div>
                <span class="text-xs text-gray-500">${client.created_at}</span>
            `;
            container.appendChild(clientElement);
        });
    }
    
    function renderRecentActivity(activities) {
        const container = document.getElementById('recent-activity');
        container.innerHTML = '';
        
        if (activities.length === 0) {
            container.innerHTML = '<p class="text-gray-500 text-sm">No recent activity</p>';
            return;
        }
        
        activities.forEach(activity => {
            const activityElement = document.createElement('div');
            activityElement.className = 'flex items-center space-x-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg';
            
            const iconClass = activity.type === 'completion' ? 'text-green-600' : 'text-blue-600';
            const icon = activity.type === 'completion' ? 
                '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>' :
                '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>';
            
            activityElement.innerHTML = `
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                        <svg class="w-4 h-4 ${iconClass}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            ${icon}
                        </svg>
                    </div>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-900 dark:text-gray-100">${activity.user}</p>
                    <p class="text-sm text-gray-500">${activity.event} • ${activity.time}</p>
                </div>
            `;
            container.appendChild(activityElement);
        });
    }
    
    // Export functionality
    document.getElementById('export-user-trends').addEventListener('click', function() {
        // Implement export functionality
        showSuccess('User trends export started');
    });
    
    document.getElementById('export-event-performance').addEventListener('click', function() {
        // Implement export functionality
        showSuccess('Event performance export started');
    });
    
    function showSuccess(message) {
        // Simple toast notification
        const toast = document.createElement('div');
        toast.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
        toast.textContent = message;
        document.body.appendChild(toast);
        
        setTimeout(() => {
            toast.remove();
        }, 3000);
    }
    
    function showError(message) {
        // Simple error notification
        const toast = document.createElement('div');
        toast.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
        toast.textContent = message;
        document.body.appendChild(toast);
        
        setTimeout(() => {
            toast.remove();
        }, 5000);
    }
});
</script>
@endpush

@endsection