@extends('layouts.admin')
@section('content')
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <div class="max-w-7xl mx-auto">
        <!-- Stats Overview -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Total Users -->
            <x-ui.layout.card padding="normal">
                <div>
                    <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Total Users</h2>
                    <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-2">{{ $totalUsers ?? 0 }}</div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ $activeUsersCount ?? 0 }} active</p>
                </div>
            </x-ui.layout.card>
            
            <!-- Total Clients -->
            <x-ui.layout.card padding="normal">
                <div>
                    <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Total Clients</h2>
                    <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-2">{{ $totalClients ?? 0 }}</div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ $activeClientsCount ?? 0 }} active</p>
                </div>
            </x-ui.layout.card>
            
            <!-- Total Events -->
            <x-ui.layout.card padding="normal">
                <div>
                    <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Total Events</h2>
                    <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-2">{{ $totalEvents ?? 0 }}</div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ $activeEventsCount ?? 0 }} active</p>
                </div>
            </x-ui.layout.card>
            
            <!-- Completion Rate -->
            <x-ui.layout.card padding="normal">
                <div>
                    <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Avg. Completion Rate</h2>
                    <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-2">{{ number_format($avgCompletionRate ?? 0, 1) }}%</div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Across all tiers</p>
                </div>
            </x-ui.layout.card>
        </div>

        <!-- User-Event Association Statistics -->
        <div class="mb-8">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">User-Event Associations</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Total User-Event Links -->
                <x-ui.layout.card padding="normal">
                    <div>
                        <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Total User-Event Links</h4>
                        <div class="text-3xl font-bold text-green-600 dark:text-green-400 mt-2">{{ $totalUserEventAssociations ?? 0 }}</div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Active associations</p>
                    </div>
                </x-ui.layout.card>
                
                <!-- Users with Events -->
                <x-ui.layout.card padding="normal">
                    <div>
                        <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Users with Events</h4>
                        <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mt-2">{{ ($totalUsers ?? 0) - ($usersWithoutEvents ?? 0) }}</div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Out of {{ $totalUsers ?? 0 }} total</p>
                    </div>
                </x-ui.layout.card>
                
                <!-- Events with Users -->
                <x-ui.layout.card padding="normal">
                    <div>
                        <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Events with Users</h4>
                        <div class="text-3xl font-bold text-orange-600 dark:text-orange-400 mt-2">{{ $eventsWithUsers ?? 0 }}</div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Out of {{ $totalEvents ?? 0 }} total</p>
                    </div>
                </x-ui.layout.card>
                
                <!-- Unassigned Users -->
                <x-ui.layout.card padding="normal">
                    <div>
                        <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Unassigned Users</h4>
                        <div class="text-3xl font-bold text-red-600 dark:text-red-400 mt-2">{{ $usersWithoutEvents ?? 0 }}</div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Need assignment</p>
                    </div>
                </x-ui.layout.card>
            </div>
        </div>

        <!-- Quick Actions for User-Event Management -->
        <div class="mb-8">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Quick Actions</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Manage User-Event Associations -->
                <x-ui.layout.card padding="normal">
                    <div class="text-center">
                        <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-2">Manage User-Event Associations</h4>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Associate users with specific events and manage relationships</p>
                        <a href="{{ route('admin.events.index') }}" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 border border-transparent rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Go to Events
                        </a>
                    </div>
                </x-ui.layout.card>
                
                <!-- Generate Registration Links -->
                <x-ui.layout.card padding="normal">
                    <div class="text-center">
                        <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-2">Generate Registration Links</h4>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Create event-specific registration URLs for new users</p>
                        <a href="{{ route('admin.events.index') }}" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-pink-600 hover:bg-pink-700 border border-transparent rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
                            Manage Links
                        </a>
                    </div>
                </x-ui.layout.card>
                
                <!-- Role & Permission Management -->
                <x-ui.layout.card padding="normal">
                    <div class="text-center">
                        <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-2">Role & Permission Management</h4>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Manage user roles, permissions, and access control</p>
                        <a href="{{ route('admin.roles.index') }}" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 border border-transparent rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                            Manage Roles
                        </a>
                    </div>
                </x-ui.layout.card>
                
                <!-- View Unassigned Users -->
                <!-- Bulk User Management -->
                <x-ui.layout.card padding="normal">
                    <div class="text-center">
                        <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-2">Bulk Import Users</h4>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Import users from CSV files with validation and progress tracking</p>
                        <a href="{{ route('admin.bulk-imports.index') }}" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 border border-transparent rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Manage Imports
                        </a>
                    </div>
                </x-ui.layout.card>
                
                <!-- Bulk Export Data -->
                <x-ui.layout.card padding="normal">
                    <div class="text-center">
                        <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-2">Export Data</h4>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Export user data, progress reports, and analytics for CRM integration</p>
                        <a href="{{ route('admin.bulk-exports.index') }}" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 border border-transparent rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                            Manage Exports
                        </a>
                    </div>
                </x-ui.layout.card>

                <x-ui.layout.card padding="normal">
                    <div class="text-center">
                        <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-2">View Unassigned Users</h4>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Find users who need to be assigned to events</p>
                        <a href="{{ route('admin.users.index') }}?filter=unassigned" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 border border-transparent rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                            View Unassigned
                        </a>
                    </div>
                </x-ui.layout.card>
            </div>
        </div>
        
        <!-- Recent Activity -->
        @if(isset($recentActivity) && count($recentActivity) > 0)
        <div class="mb-8">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Recent Activity</h3>
            <x-ui.layout.card>
                <div class="space-y-3">
                    @foreach($recentActivity as $activity)
                        <div class="flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-700 last:border-b-0">
                            <div>
                                <p class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $activity['description'] }}</p>
                            </div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                {{ $activity['time'] }}
                            </div>
                        </div>
                    @endforeach
                </div>
            </x-ui.layout.card>
        </div>
        @endif
    </div>
</div>
@endsection