@extends('layouts.admin')

@section('title', 'Admin Dashboard')
@section('subtitle', 'Welcome back, ' . auth()->user()->name . '. Here is an overview of the repository.')

@section('content')
<div class="space-y-8">

    <!-- Top Hero / Welcome Banner -->
    <div class="relative overflow-hidden bg-gradient-to-r from-slate-900 via-primary to-slate-900 rounded-3xl p-8 text-white shadow-xl">
        <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div class="space-y-2">
                <div class="inline-flex items-center gap-2 px-3 py-1 bg-white/10 backdrop-blur-md rounded-full text-xs font-bold text-blue-200 uppercase tracking-widest border border-white/15">
                    <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                    <span>System Online & Operational</span>
                </div>
                <h1 class="text-2xl md:text-3xl font-black tracking-tight text-white">
                    Mountain Top University Repository
                </h1>
                <p class="text-sm text-slate-200/90 max-w-xl font-medium">
                    Managing institutional intellectual output, academic research, student theses, and digital scholarly assets.
                </p>
            </div>
            
            <div class="flex flex-wrap items-center gap-3">
                <a href="{{ route('admin.items.create') }}" class="flex items-center gap-2 px-4 py-2.5 bg-white text-primary font-black rounded-xl text-xs uppercase tracking-widest hover:scale-105 transition-all shadow-md">
                    <span class="material-icons text-base">add_circle</span> New Item
                </a>
                <a href="{{ route('admin.collections.create') }}" class="flex items-center gap-2 px-4 py-2.5 bg-white/15 hover:bg-white/25 text-white font-black rounded-xl text-xs uppercase tracking-widest backdrop-blur-md transition-all border border-white/20">
                    <span class="material-icons text-base">create_new_folder</span> New Collection
                </a>
                <a href="{{ route('admin.communities.create') }}" class="flex items-center gap-2 px-4 py-2.5 bg-white/15 hover:bg-white/25 text-white font-black rounded-xl text-xs uppercase tracking-widest backdrop-blur-md transition-all border border-white/20">
                    <span class="material-icons text-base">account_balance</span> New Community
                </a>
            </div>
        </div>

        <!-- Decorative background elements -->
        <div class="absolute -right-10 -bottom-10 w-64 h-64 bg-primary/30 rounded-full blur-3xl pointer-events-none"></div>
        <div class="absolute right-1/3 -top-10 w-48 h-48 bg-blue-400/20 rounded-full blur-2xl pointer-events-none"></div>
    </div>

    <!-- Core Metric Cards (Grid) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-5">

        <!-- Total Items Card -->
        <a href="{{ route('admin.items.index') }}" class="group relative bg-white p-5 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200 flex flex-col justify-between">
            <div class="flex items-center justify-between mb-3">
                <div class="w-11 h-11 rounded-2xl bg-blue-50 group-hover:bg-blue-600 text-primary group-hover:text-white flex items-center justify-center transition-colors shadow-sm">
                    <span class="material-icons text-xl">article</span>
                </div>
                <span class="px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider bg-emerald-50 text-emerald-700 border border-emerald-100">
                    {{ $publishedItems }} live
                </span>
            </div>
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Items</p>
                <div class="flex items-baseline justify-between mt-1">
                    <h3 class="text-2xl font-black text-slate-800 tracking-tight">{{ number_format($totalItems) }}</h3>
                    <span class="text-xs font-bold text-primary group-hover:translate-x-0.5 transition-transform flex items-center">
                        <span class="material-icons text-base">chevron_right</span>
                    </span>
                </div>
                <p class="text-[11px] text-slate-400 mt-1 font-medium">{{ $draftItems }} in drafts</p>
            </div>
        </a>

        <!-- Communities Card -->
        <a href="{{ route('admin.communities.index') }}" class="group relative bg-white p-5 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200 flex flex-col justify-between">
            <div class="flex items-center justify-between mb-3">
                <div class="w-11 h-11 rounded-2xl bg-indigo-50 group-hover:bg-indigo-600 text-indigo-600 group-hover:text-white flex items-center justify-center transition-colors shadow-sm">
                    <span class="material-icons text-xl">account_balance</span>
                </div>
                <span class="px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider bg-indigo-50 text-indigo-700 border border-indigo-100">
                    Faculties
                </span>
            </div>
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Communities</p>
                <div class="flex items-baseline justify-between mt-1">
                    <h3 class="text-2xl font-black text-slate-800 tracking-tight">{{ number_format($totalCommunities) }}</h3>
                    <span class="text-xs font-bold text-indigo-600 group-hover:translate-x-0.5 transition-transform flex items-center">
                        <span class="material-icons text-base">chevron_right</span>
                    </span>
                </div>
                <p class="text-[11px] text-slate-400 mt-1 font-medium">Top level nodes</p>
            </div>
        </a>

        <!-- Collections Card -->
        <a href="{{ route('admin.collections.index') }}" class="group relative bg-white p-5 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200 flex flex-col justify-between">
            <div class="flex items-center justify-between mb-3">
                <div class="w-11 h-11 rounded-2xl bg-amber-50 group-hover:bg-amber-500 text-amber-600 group-hover:text-white flex items-center justify-center transition-colors shadow-sm">
                    <span class="material-icons text-xl">folder_special</span>
                </div>
                <span class="px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider bg-amber-50 text-amber-700 border border-amber-100">
                    Departments
                </span>
            </div>
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Collections</p>
                <div class="flex items-baseline justify-between mt-1">
                    <h3 class="text-2xl font-black text-slate-800 tracking-tight">{{ number_format($totalCollections) }}</h3>
                    <span class="text-xs font-bold text-amber-600 group-hover:translate-x-0.5 transition-transform flex items-center">
                        <span class="material-icons text-base">chevron_right</span>
                    </span>
                </div>
                <p class="text-[11px] text-slate-400 mt-1 font-medium">Categorized series</p>
            </div>
        </a>

        <!-- Users Card -->
        <a href="{{ route('admin.users.index') }}" class="group relative bg-white p-5 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200 flex flex-col justify-between">
            <div class="flex items-center justify-between mb-3">
                <div class="w-11 h-11 rounded-2xl bg-purple-50 group-hover:bg-purple-600 text-purple-600 group-hover:text-white flex items-center justify-center transition-colors shadow-sm">
                    <span class="material-icons text-xl">group</span>
                </div>
                <span class="px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider bg-purple-50 text-purple-700 border border-purple-100">
                    {{ $activeUsers }} Active
                </span>
            </div>
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Accounts</p>
                <div class="flex items-baseline justify-between mt-1">
                    <h3 class="text-2xl font-black text-slate-800 tracking-tight">{{ number_format($totalUsers) }}</h3>
                    <span class="text-xs font-bold text-purple-600 group-hover:translate-x-0.5 transition-transform flex items-center">
                        <span class="material-icons text-base">chevron_right</span>
                    </span>
                </div>
                <p class="text-[11px] text-slate-400 mt-1 font-medium">{{ $adminUsers }} Admin/Managers</p>
            </div>
        </a>

        <!-- Storage & Files Card -->
        <a href="{{ route('statistics') }}" class="group relative bg-white p-5 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200 flex flex-col justify-between">
            <div class="flex items-center justify-between mb-3">
                <div class="w-11 h-11 rounded-2xl bg-emerald-50 group-hover:bg-emerald-600 text-emerald-600 group-hover:text-white flex items-center justify-center transition-colors shadow-sm">
                    <span class="material-icons text-xl">cloud_queue</span>
                </div>
                <span class="px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider bg-emerald-50 text-emerald-700 border border-emerald-100">
                    {{ $totalFiles }} Bitstreams
                </span>
            </div>
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Vault Storage</p>
                <div class="flex items-baseline justify-between mt-1">
                    <h3 class="text-xl font-black text-slate-800 tracking-tight">{{ $formattedStorage }}</h3>
                    <span class="text-xs font-bold text-emerald-600 group-hover:translate-x-0.5 transition-transform flex items-center">
                        <span class="material-icons text-base">chevron_right</span>
                    </span>
                </div>
                <p class="text-[11px] text-slate-400 mt-1 font-medium">{{ number_format($totalDownloads) }} total downloads</p>
            </div>
        </a>

        <!-- Dublin Core Registry Card -->
        <a href="{{ route('admin.metadata.index') }}" class="group relative bg-white p-5 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200 flex flex-col justify-between">
            <div class="flex items-center justify-between mb-3">
                <div class="w-11 h-11 rounded-2xl bg-rose-50 group-hover:bg-rose-600 text-rose-600 group-hover:text-white flex items-center justify-center transition-colors shadow-sm">
                    <span class="material-icons text-xl">dataset</span>
                </div>
                <span class="px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider bg-rose-50 text-rose-700 border border-rose-100">
                    Dublin Core
                </span>
            </div>
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Metadata Fields</p>
                <div class="flex items-baseline justify-between mt-1">
                    <h3 class="text-2xl font-black text-slate-800 tracking-tight">{{ number_format($totalMetadataFields) }}</h3>
                    <span class="text-xs font-bold text-rose-600 group-hover:translate-x-0.5 transition-transform flex items-center">
                        <span class="material-icons text-base">chevron_right</span>
                    </span>
                </div>
                <p class="text-[11px] text-slate-400 mt-1 font-medium">Registered schema tags</p>
            </div>
    </div>

    <!-- Internal Site Analytics & Download Telemetry Section -->
    <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm space-y-6">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-100 pb-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-2xl bg-primary/10 text-primary flex items-center justify-center">
                    <span class="material-icons text-xl">insights</span>
                </div>
                <div>
                    <h2 class="text-lg font-black text-slate-800 tracking-tight">Website Traffic &amp; Download Telemetry</h2>
                    <p class="text-xs text-slate-400 font-medium">Real-time public visits, daily unique visitors, inbound referrers, and rate-limited bitstream downloads.</p>
                </div>
            </div>
            <a href="{{ route('admin.analytics') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary hover:bg-primary hover:text-white rounded-xl text-xs font-black uppercase tracking-wider transition-all">
                Full Analytics Console <span class="material-icons text-sm">arrow_forward</span>
            </a>
        </div>

        <!-- 4 Quick Telemetry KPI Pills -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="p-4 bg-slate-50 rounded-2xl">
                <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block">Total Page Views</span>
                <span class="text-2xl font-black text-slate-800 tracking-tight">{{ number_format($analyticsMetrics['total_views']) }}</span>
                <span class="text-[10px] text-blue-600 font-bold block mt-0.5">+{{ number_format($analyticsMetrics['views_today']) }} today</span>
            </div>
            <div class="p-4 bg-slate-50 rounded-2xl">
                <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block">Unique Visitors Today</span>
                <span class="text-2xl font-black text-slate-800 tracking-tight">{{ number_format($analyticsMetrics['unique_visitors_today']) }}</span>
                <span class="text-[10px] text-emerald-600 font-bold block mt-0.5">{{ number_format($analyticsMetrics['total_unique_visitors']) }} lifetime</span>
            </div>
            <div class="p-4 bg-slate-50 rounded-2xl">
                <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block">Human Traffic Ratio</span>
                <span class="text-2xl font-black text-slate-800 tracking-tight">{{ $analyticsMetrics['human_percentage'] }}%</span>
                <span class="text-[10px] text-amber-600 font-bold block mt-0.5">{{ number_format($analyticsMetrics['bot_views']) }} crawler hits</span>
            </div>
            <div class="p-4 bg-slate-50 rounded-2xl">
                <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block">File Downloads</span>
                <span class="text-2xl font-black text-slate-800 tracking-tight">{{ number_format($analyticsMetrics['total_downloads']) }}</span>
                <span class="text-[10px] text-indigo-600 font-bold block mt-0.5">1-hr time limit cooldown</span>
            </div>
        </div>

        <!-- Top Pages & Inbound Referrers Split -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 pt-2">
            <!-- Top Public Pages -->
            <div class="lg:col-span-2">
                <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-3 flex items-center gap-1.5">
                    <span class="material-icons text-sm text-primary">trending_up</span> Top Visited Public Pages
                </h3>
                <div class="divide-y divide-slate-100">
                    @forelse($analyticsTopPages as $page)
                        <div class="py-2.5 flex items-center justify-between gap-4">
                            <div class="min-w-0 flex-1">
                                <a href="{{ url($page->path) }}" target="_blank" class="text-xs font-bold text-slate-700 hover:text-primary transition-colors truncate block">
                                    {{ $page->path }}
                                </a>
                                <span class="text-[10px] text-slate-400">{{ number_format($page->uniques) }} unique</span>
                            </div>
                            <span class="text-xs font-black text-slate-800">{{ number_format($page->views) }} <span class="text-[10px] text-slate-400 font-normal">views</span></span>
                        </div>
                    @empty
                        <p class="text-xs text-slate-400 py-3">No page visits logged yet.</p>
                    @endforelse
                </div>
            </div>

            <!-- Inbound Referrers -->
            <div>
                <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-3 flex items-center gap-1.5">
                    <span class="material-icons text-sm text-emerald-600">share</span> Top Inbound Referrers
                </h3>
                <div class="space-y-2">
                    @forelse($analyticsTopReferrers as $ref)
                        <div class="flex items-center justify-between p-2 bg-slate-50 rounded-xl text-xs">
                            <span class="font-bold text-slate-700 truncate max-w-[150px]">{{ $ref->referrer_host }}</span>
                            <span class="px-2 py-0.5 bg-white rounded-lg text-slate-800 font-black shadow-xs">{{ number_format($ref->count) }}</span>
                        </div>
                    @empty
                        <p class="text-xs text-slate-400 py-3">Direct navigation dominant.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- Middle Split: Recent Items + Repository Structure Analytics -->
    <div class="grid lg:grid-cols-3 gap-8">

        <!-- Recent Submissions Table (2 Columns) -->
        <div class="lg:col-span-2 space-y-4">
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
                <div class="p-6 border-b border-slate-100 flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
                            <span class="material-icons text-base">history</span>
                        </div>
                        <div>
                            <h2 class="font-black text-slate-800 text-base">Recent Submissions</h2>
                            <p class="text-xs text-slate-400 font-medium">Latest items added to the repository</p>
                        </div>
                    </div>
                    <a href="{{ route('admin.items.index') }}" class="text-xs font-black text-primary hover:underline flex items-center gap-1">
                        View All Items <span class="material-icons text-sm">arrow_forward</span>
                    </a>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="bg-slate-50 border-b border-slate-100">
                                <th class="text-left px-6 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Item Title</th>
                                <th class="text-left px-6 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest hidden sm:table-cell">Collection</th>
                                <th class="text-left px-6 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Status</th>
                                <th class="text-right px-6 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            @forelse($recentItems as $item)
                                <tr class="hover:bg-slate-50/70 transition-colors">
                                    <td class="px-6 py-4">
                                        <div class="max-w-xs md:max-w-sm">
                                            <a href="{{ route('items.show', $item->uuid) }}" target="_blank" class="font-bold text-slate-800 hover:text-primary line-clamp-1">
                                                {{ $item->title ?: 'Untitled Submission' }}
                                            </a>
                                            <p class="text-[11px] text-slate-400 font-medium line-clamp-1 mt-0.5">
                                                {{ $item->author ?: 'Unknown author' }}
                                            </p>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 hidden sm:table-cell">
                                        <span class="text-xs font-semibold text-slate-600 line-clamp-1">
                                            {{ $item->collection->name ?? '—' }}
                                        </span>
                                        <span class="text-[10px] text-slate-400 font-medium">
                                            {{ $item->collection->community->name ?? '' }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest {{ $item->is_published ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                                            {{ $item->status }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <div class="flex items-center justify-end gap-1.5">
                                            <a href="{{ route('items.show', $item->uuid) }}" target="_blank" title="View Public Page" class="p-1.5 rounded-lg bg-slate-50 hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-all">
                                                <span class="material-icons text-xs">open_in_new</span>
                                            </a>
                                            <a href="{{ route('admin.items.edit', $item) }}" title="Edit Item" class="p-1.5 rounded-lg bg-slate-50 hover:bg-primary hover:text-white text-slate-400 transition-all">
                                                <span class="material-icons text-xs">edit</span>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-6 py-12 text-center text-slate-400 font-bold">
                                        No submissions recorded yet.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Quick Management Shortcuts Card -->
            <div class="bg-gradient-to-br from-slate-50 to-white rounded-3xl p-6 border border-slate-200/70 shadow-sm">
                <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-4">Quick Repository Tools</h3>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                    <a href="{{ route('admin.items.create') }}" class="p-4 bg-white hover:bg-primary/5 rounded-2xl border border-slate-100 hover:border-primary/20 transition-all flex flex-col items-center text-center gap-2 group">
                        <div class="w-10 h-10 rounded-xl bg-blue-50 group-hover:bg-primary group-hover:text-white text-primary flex items-center justify-center transition-colors">
                            <span class="material-icons text-lg">post_add</span>
                        </div>
                        <span class="text-xs font-black text-slate-700 group-hover:text-primary">Add Item</span>
                    </a>

                    <a href="{{ route('admin.collections.create') }}" class="p-4 bg-white hover:bg-primary/5 rounded-2xl border border-slate-100 hover:border-primary/20 transition-all flex flex-col items-center text-center gap-2 group">
                        <div class="w-10 h-10 rounded-xl bg-amber-50 group-hover:bg-amber-500 group-hover:text-white text-amber-600 flex items-center justify-center transition-colors">
                            <span class="material-icons text-lg">create_new_folder</span>
                        </div>
                        <span class="text-xs font-black text-slate-700 group-hover:text-primary">New Collection</span>
                    </a>

                    <a href="{{ route('admin.users.index') }}" class="p-4 bg-white hover:bg-primary/5 rounded-2xl border border-slate-100 hover:border-primary/20 transition-all flex flex-col items-center text-center gap-2 group">
                        <div class="w-10 h-10 rounded-xl bg-purple-50 group-hover:bg-purple-600 group-hover:text-white text-purple-600 flex items-center justify-center transition-colors">
                            <span class="material-icons text-lg">person_add</span>
                        </div>
                        <span class="text-xs font-black text-slate-700 group-hover:text-primary">Manage Users</span>
                    </a>

                    <a href="{{ route('statistics') }}" class="p-4 bg-white hover:bg-primary/5 rounded-2xl border border-slate-100 hover:border-primary/20 transition-all flex flex-col items-center text-center gap-2 group">
                        <div class="w-10 h-10 rounded-xl bg-emerald-50 group-hover:bg-emerald-600 group-hover:text-white text-emerald-600 flex items-center justify-center transition-colors">
                            <span class="material-icons text-lg">insights</span>
                        </div>
                        <span class="text-xs font-black text-slate-700 group-hover:text-primary">Analytics</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Right Side: Distribution & Top Communities/Collections (1 Column) -->
        <div class="space-y-6">

            <!-- Top Communities Widget -->
            <div class="bg-white rounded-3xl p-6 border border-slate-100 shadow-sm">
                <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100">
                    <div class="flex items-center gap-2">
                        <span class="material-icons text-indigo-500 text-lg">account_balance</span>
                        <h3 class="font-black text-slate-800 text-sm">Top Communities</h3>
                    </div>
                    <a href="{{ route('admin.communities.index') }}" class="text-[11px] font-bold text-primary hover:underline">Manage</a>
                </div>

                <div class="space-y-3">
                    @forelse($topCommunities as $comm)
                        <div class="flex items-center justify-between p-3 rounded-2xl bg-slate-50 hover:bg-indigo-50/50 transition-colors">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-xl bg-white border border-slate-100 flex items-center justify-center text-indigo-600 font-black text-xs">
                                    {{ substr($comm->name, 0, 1) }}
                                </div>
                                <div>
                                    <p class="font-bold text-slate-800 text-xs line-clamp-1">{{ $comm->name }}</p>
                                    <p class="text-[10px] text-slate-400 font-medium">{{ $comm->collections_count }} collections</p>
                                </div>
                            </div>
                            <span class="text-xs font-black text-slate-700 bg-white px-2.5 py-1 rounded-xl border border-slate-100">
                                {{ $comm->items_count }} items
                            </span>
                        </div>
                    @empty
                        <p class="text-xs text-slate-400 text-center py-4">No communities yet.</p>
                    @endforelse
                </div>
            </div>

            <!-- Top Collections Widget -->
            <div class="bg-white rounded-3xl p-6 border border-slate-100 shadow-sm">
                <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100">
                    <div class="flex items-center gap-2">
                        <span class="material-icons text-amber-500 text-lg">folder</span>
                        <h3 class="font-black text-slate-800 text-sm">Top Collections</h3>
                    </div>
                    <a href="{{ route('admin.collections.index') }}" class="text-[11px] font-bold text-primary hover:underline">Manage</a>
                </div>

                <div class="space-y-3">
                    @forelse($topCollections as $col)
                        <div class="flex items-center justify-between p-3 rounded-2xl bg-slate-50 hover:bg-amber-50/50 transition-colors">
                            <div class="max-w-[70%]">
                                <p class="font-bold text-slate-800 text-xs line-clamp-1">{{ $col->name }}</p>
                                <p class="text-[10px] text-slate-400 font-medium line-clamp-1">{{ $col->community->name ?? 'No parent' }}</p>
                            </div>
                            <span class="text-xs font-black text-slate-700 bg-white px-2.5 py-1 rounded-xl border border-slate-100">
                                {{ $col->items_count }} items
                            </span>
                        </div>
                    @empty
                        <p class="text-xs text-slate-400 text-center py-4">No collections yet.</p>
                    @endforelse
                </div>
            </div>

            <!-- User Accounts Summary -->
            <div class="bg-white rounded-3xl p-6 border border-slate-100 shadow-sm">
                <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100">
                    <div class="flex items-center gap-2">
                        <span class="material-icons text-purple-500 text-lg">people</span>
                        <h3 class="font-black text-slate-800 text-sm">Users & Staff</h3>
                    </div>
                    <a href="{{ route('admin.users.index') }}" class="text-[11px] font-bold text-primary hover:underline">View All</a>
                </div>

                <div class="space-y-2.5">
                    @foreach($recentUsers as $u)
                        <div class="flex items-center justify-between p-2.5 rounded-xl hover:bg-slate-50 transition-colors">
                            <div class="flex items-center gap-2.5">
                                <div class="w-7 h-7 rounded-full bg-purple-100 text-purple-700 flex items-center justify-center font-black text-[11px]">
                                    {{ strtoupper(substr($u->name, 0, 1)) }}
                                </div>
                                <div>
                                    <p class="font-bold text-slate-800 text-xs">{{ $u->name }}</p>
                                    <p class="text-[10px] text-slate-400">{{ $u->email }}</p>
                                </div>
                            </div>
                            <span class="px-2 py-0.5 rounded-md text-[9px] font-black uppercase tracking-wider bg-slate-100 text-slate-600">
                                {{ $u->role }}
                            </span>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>

    </div>

</div>
@endsection