<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Admin Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <!-- Admin Alert -->
            <div class="bg-gray-50 border border-gray-200 text-gray-700 px-4 py-3 rounded mb-6">
                <strong>Admin Mode:</strong> You have administrative privileges.
            </div>

            <!-- Stats Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-600">Total Users</p>
                                <p class="text-3xl font-bold text-gray-900">{{ $stats['total_users'] }}</p>
                            </div>
                            <div class="p-3 rounded-full bg-gray-100">
                                <span class="text-2xl">👥</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-600">Total Items</p>
                                <p class="text-3xl font-bold text-gray-900">{{ $stats['total_items'] }}</p>
                                <p class="text-xs text-gray-500">{{ $stats['active_items'] }} active</p>
                            </div>
                            <div class="p-3 rounded-full bg-gray-100">
                                <span class="text-2xl">🎵</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-600">Pending Sales</p>
                                <p class="text-3xl font-bold text-gray-900">{{ $stats['pending_sales'] }}</p>
                            </div>
                            <div class="p-3 rounded-full bg-gray-100">
                                <span class="text-2xl">⏳</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-600">Completed Sales</p>
                                <p class="text-3xl font-bold text-gray-900">{{ $stats['completed_transactions'] }}</p>
                            </div>
                            <div class="p-3 rounded-full bg-gray-100">
                                <span class="text-2xl">✅</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                <a href="{{ route('admin.items.index') }}" class="bg-white hover:bg-gray-50 border border-gray-200 p-6 rounded-lg transition-colors">
                    <div class="text-3xl mb-2">🎸</div>
                    <h3 class="font-semibold mb-1 text-gray-900">Manage Items</h3>
                    <p class="text-sm text-gray-600">View, edit, ban, or delete items</p>
                </a>

                <a href="{{ route('admin.users.index') }}" class="bg-white hover:bg-gray-50 border border-gray-200 p-6 rounded-lg transition-colors">
                    <div class="text-3xl mb-2">👤</div>
                    <h3 class="font-semibold mb-1 text-gray-900">Manage Users</h3>
                    <p class="text-sm text-gray-600">View, ban, or promote users</p>
                </a>

                <a href="{{ route('admin.reports.index') }}" class="bg-white hover:bg-gray-50 border border-gray-200 p-6 rounded-lg transition-colors">
                    <div class="text-3xl mb-2">⚠️</div>
                    <h3 class="font-semibold mb-1 text-gray-900">Report Queue</h3>
                    <p class="text-sm text-gray-600">Review user and item reports</p>
                </a>

                <a href="{{ route('admin.analytics.index') }}" class="bg-white hover:bg-gray-50 border border-gray-200 p-6 rounded-lg transition-colors">
                    <div class="text-3xl mb-2">📊</div>
                    <h3 class="font-semibold mb-1 text-gray-900">Analytics</h3>
                    <p class="text-sm text-gray-600">User behavior and trends</p>
                </a>

                <a href="{{ route('admin.audit-log.index') }}" class="bg-white hover:bg-gray-50 border border-gray-200 p-6 rounded-lg transition-colors">
                    <div class="text-3xl mb-2">🔍</div>
                    <h3 class="font-semibold mb-1 text-gray-900">Audit Log</h3>
                    <p class="text-sm text-gray-600">Admin action history</p>
                </a>

                <a href="{{ route('admin.announcements.index') }}" class="bg-white hover:bg-gray-50 border border-gray-200 p-6 rounded-lg transition-colors">
                    <div class="text-3xl mb-2">📣</div>
                    <h3 class="font-semibold mb-1 text-gray-900">Announcements</h3>
                    <p class="text-sm text-gray-600">Manage pop-ups and banners</p>
                </a>

                <a href="{{ route('admin.trust-services.index') }}" class="bg-white hover:bg-gray-50 border border-gray-200 p-6 rounded-lg transition-colors">
                    <div class="text-3xl mb-2">🔗</div>
                    <h3 class="font-semibold mb-1 text-gray-900">Trust Services</h3>
                    <p class="text-sm text-gray-600">Manage verification platforms</p>
                </a>
            </div>

            <!-- Recent Activity -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Recent Users -->
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-lg font-semibold text-gray-900">Recent Users</h2>
                            <a href="{{ route('admin.users.index') }}" class="text-gray-600 hover:opacity-60 transition-opacity text-sm">View All</a>
                        </div>
                        <div class="space-y-3">
                            @forelse($stats['recent_users'] as $user)
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div>
                                        <p class="font-medium">{{ $user->name }}</p>
                                        <p class="text-sm text-gray-600">{{ $user->email }}</p>
                                        <p class="text-xs text-gray-500">{{ $user->created_at->diffForHumans() }}</p>
                                    </div>
                                    <div class="flex space-x-1">
                                        @if($user->is_admin)
                                            <span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded">Admin</span>
                                        @endif
                                        @if(!$user->is_active)
                                            <span class="bg-red-50 text-red-600 text-xs px-2 py-1 rounded">Banned</span>
                                        @endif
                                    </div>
                                </div>
                            @empty
                                <p class="text-gray-500 text-sm">No recent users</p>
                            @endforelse
                        </div>
                    </div>
                </div>

                <!-- Recent Items -->
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-lg font-semibold text-gray-900">Recent Items</h2>
                            <a href="{{ route('admin.items.index') }}" class="text-gray-600 hover:opacity-60 transition-opacity text-sm">View All</a>
                        </div>
                        <div class="space-y-3">
                            @forelse($stats['recent_items'] as $item)
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div class="flex-1">
                                        <p class="font-medium text-sm">{{ Str::limit($item->title, 40) }}</p>
                                        <p class="text-xs text-gray-600">{{ $item->user->name }} • {{ $item->category ? $item->category->name : 'No Category' }}</p>
                                        <p class="text-xs text-gray-500">{{ $item->created_at->diffForHumans() }}</p>
                                    </div>
                                    <div class="flex flex-col items-end space-y-1">
                                        @if($item->price)
                                            <span class="text-sm font-medium">${{ number_format($item->price, 2) }}</span>
                                        @endif
                                        <span class="bg-{{ $item->status === 'active' ? 'green' : ($item->status === 'removed' ? 'red' : 'gray') }}-100 text-{{ $item->status === 'active' ? 'green' : ($item->status === 'removed' ? 'red' : 'gray') }}-800 text-xs px-2 py-1 rounded">
                                            {{ ucfirst($item->status) }}
                                        </span>
                                    </div>
                                </div>
                            @empty
                                <p class="text-gray-500 text-sm">No recent items</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Audit Activity -->
            <div class="mt-8 bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-semibold text-gray-900">Recent Admin Activity</h2>
                        <a href="{{ route('admin.audit-log.index') }}" class="text-gray-600 hover:opacity-60 transition-opacity text-sm">View All</a>
                    </div>
                    <div class="space-y-2">
                        @forelse(\App\Models\AdminAuditLog::with('admin')->latest()->take(8)->get() as $log)
                            @php
                                $actionColors = [
                                    'ban_user' => 'bg-red-50 text-red-600',
                                    'ban_item' => 'bg-red-50 text-red-600',
                                    'remove_item' => 'bg-red-50 text-red-600',
                                    'delete_item' => 'bg-red-50 text-red-600',
                                    'grant_admin' => 'bg-gray-100 text-gray-600',
                                    'revoke_admin' => 'bg-gray-100 text-gray-600',
                                    'impersonate_start' => 'bg-gray-100 text-gray-600',
                                    'impersonate_stop' => 'bg-gray-100 text-gray-600',
                                    'unban_user' => 'bg-gray-100 text-gray-600',
                                    'approve_item' => 'bg-gray-100 text-gray-600',
                                    'update_user' => 'bg-gray-100 text-gray-600',
                                    'update_item' => 'bg-gray-100 text-gray-600',
                                ];
                                $color = $actionColors[$log->action] ?? 'bg-gray-100 text-gray-600';
                            @endphp
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <div class="flex items-center gap-3">
                                    <span class="inline-flex px-2 py-1 rounded text-xs font-medium {{ $color }}">
                                        {{ str_replace('_', ' ', $log->action) }}
                                    </span>
                                    <span class="text-sm text-gray-700">
                                        {{ $log->admin?->name ?? 'Unknown' }}
                                        @if($log->meta)
                                            &mdash;
                                            {{ $log->meta['user_name'] ?? $log->meta['target_name'] ?? $log->meta['item_title'] ?? ($log->target_type . ' #' . $log->target_id) }}
                                        @endif
                                    </span>
                                </div>
                                <span class="text-xs text-gray-400 whitespace-nowrap ml-4">{{ $log->created_at->diffForHumans() }}</span>
                            </div>
                        @empty
                            <p class="text-gray-400 text-sm">No admin actions recorded yet.</p>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="mt-8 bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">Quick Links</h2>
                    <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                        <a href="{{ route('admin.reports.index') }}" class="flex items-center p-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
                            <span class="text-2xl mr-3">📋</span>
                            <span>Reports Queue</span>
                        </a>
                        <a href="{{ route('admin.settings.index') }}" class="flex items-center p-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
                            <span class="text-2xl mr-3">⚙️</span>
                            <span>Settings</span>
                        </a>
                        <a href="{{ route('admin.users.index', ['status' => 'inactive']) }}" class="flex items-center p-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
                            <span class="text-2xl mr-3">🚫</span>
                            <span>Banned Users</span>
                        </a>
                        <a href="{{ route('admin.items.index', ['status' => 'sale_pending']) }}" class="flex items-center p-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
                            <span class="text-2xl mr-3">💰</span>
                            <span>Pending Sales</span>
                        </a>
                        <a href="{{ route('items.index') }}" class="flex items-center p-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
                            <span class="text-2xl mr-3">🏠</span>
                            <span>View Main Site</span>
                        </a>
                    </div>
                </div>

                @if(config('app.multi_site'))
                <!-- Site Management -->
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">Site Management</h2>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <a href="{{ route('sites.music.index') }}" class="flex items-center p-4 border border-gray-200 bg-white hover:bg-gray-50 rounded-lg transition-colors group">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <span class="text-2xl mr-3">🎵</span>
                                        <h3 class="font-medium text-gray-900">Music Marketplace</h3>
                                    </div>
                                    <p class="text-sm text-gray-600">{{ \App\Models\Item::whereHas('category', function($q) { $q->where('site_group', 'music'); })->count() }} items</p>
                                </div>
                                <svg class="w-5 h-5 text-gray-400 group-hover:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                </svg>
                            </a>

                            <a href="{{ route('sites.art.index') }}" class="flex items-center p-4 border border-gray-200 bg-white hover:bg-gray-50 rounded-lg transition-colors group">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <span class="text-2xl mr-3">🎨</span>
                                        <h3 class="font-medium text-gray-900">Art Marketplace</h3>
                                    </div>
                                    <p class="text-sm text-gray-600">{{ \App\Models\Item::whereHas('category', function($q) { $q->where('site_group', 'art'); })->count() }} items</p>
                                </div>
                                <svg class="w-5 h-5 text-gray-400 group-hover:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                </svg>
                            </a>

                            <a href="{{ route('sites.tools.index') }}" class="flex items-center p-4 border border-gray-200 bg-white hover:bg-gray-50 rounded-lg transition-colors group">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <span class="text-2xl mr-3">🔧</span>
                                        <h3 class="font-medium text-gray-900">Tools Marketplace</h3>
                                    </div>
                                    <p class="text-sm text-gray-600">{{ \App\Models\Item::whereHas('category', function($q) { $q->where('site_group', 'tools'); })->count() }} items</p>
                                </div>
                                <svg class="w-5 h-5 text-gray-400 group-hover:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>