@extends('layouts.repository')

@section('title', 'Repository Statistics')

@section('styles')
<style>
    @keyframes count-up {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .stat-card { animation: count-up 0.6s ease forwards; }
    .stat-card:nth-child(2) { animation-delay: 0.1s; }
    .stat-card:nth-child(3) { animation-delay: 0.2s; }
    .bar-fill { transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
</style>
@endsection

@section('content')
<!-- Header -->
<div class="bg-slate-900 text-white py-20 relative overflow-hidden">
    <div class="absolute top-0 right-0 w-96 h-96 bg-primary/20 blur-[120px] rounded-full"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/10 blur-[80px] rounded-full"></div>
    <div class="container mx-auto px-4 relative z-10 text-center">
        <span class="inline-block text-[10px] font-black tracking-[0.4em] uppercase text-primary mb-4 bg-primary/10 px-4 py-2 rounded-full">Repository Health</span>
        <h1 class="text-5xl font-black tracking-tight mb-4">Repository Statistics</h1>
        <p class="text-slate-400 font-medium">Up-to-date metrics and repository growth indicators.</p>
    </div>
</div>

<!-- Summary Stats -->
<div class="bg-white border-b border-slate-100">
    <div class="container mx-auto px-4 py-12">
        <div class="grid grid-cols-2 lg:grid-cols-5 gap-6">
            <div class="stat-card text-center p-6 rounded-3xl bg-primary/5 border border-primary/10">
                <p class="text-4xl font-black text-primary mb-1">{{ $stats['total_items'] }}</p>
                <p class="text-[10px] font-black uppercase tracking-wider text-slate-400">Published Items</p>
                <div class="mt-2 flex items-center justify-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                    <span class="text-[9px] font-bold text-emerald-600 uppercase tracking-wider">Open Access</span>
                </div>
            </div>
            <div class="stat-card text-center p-6 rounded-3xl bg-slate-50 border border-slate-100">
                <p class="text-4xl font-black text-slate-800 mb-1">{{ $stats['total_communities'] }}</p>
                <p class="text-[10px] font-black uppercase tracking-wider text-slate-400">Communities</p>
                <a href="{{ route('communities.index') }}" class="mt-2 inline-flex items-center gap-1 text-[9px] font-bold text-primary uppercase tracking-wider hover:underline">
                    Browse <span class="material-icons text-[10px]">open_in_new</span>
                </a>
            </div>
            <div class="stat-card text-center p-6 rounded-3xl bg-slate-50 border border-slate-100">
                <p class="text-4xl font-black text-slate-800 mb-1">{{ $stats['total_collections'] }}</p>
                <p class="text-[10px] font-black uppercase tracking-wider text-slate-400">Collections</p>
                <p class="mt-2 text-[9px] font-bold text-slate-300 uppercase tracking-wider">Indexed</p>
            </div>
            <div class="stat-card text-center p-6 rounded-3xl bg-slate-50 border border-slate-100">
                <p class="text-4xl font-black text-slate-800 mb-1">{{ $stats['total_files'] }}</p>
                <p class="text-[10px] font-black uppercase tracking-wider text-slate-400">Deposited Files</p>
                <p class="mt-2 text-[9px] font-bold text-slate-300 uppercase tracking-wider">Bitstreams</p>
            </div>
            <div class="stat-card text-center p-6 rounded-3xl bg-slate-50 border border-slate-100">
                <p class="text-4xl font-black text-slate-800 mb-1">{{ $stats['total_downloads'] }}</p>
                <p class="text-[10px] font-black uppercase tracking-wider text-slate-400">Total Downloads</p>
                <p class="mt-2 text-[9px] font-bold text-emerald-500 uppercase tracking-wider">Active</p>
            </div>
        </div>
    </div>
</div>

<div class="container mx-auto px-4 py-16">
    <div class="grid lg:grid-cols-2 gap-16">

        <!-- Items by Subject Category -->
        <div>
            <h2 class="text-xl font-black text-slate-800 mb-8 flex items-center gap-3">
                <div class="w-8 h-8 bg-primary/10 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-primary text-base">category</span>
                </div>
                Items by Subject Category
            </h2>
            
            @php $maxCount = $stats['by_category']->max('count') ?: 1; @endphp
            <div class="space-y-4">
                @forelse($stats['by_category'] as $cat)
                    <div class="bg-white rounded-2xl p-5 shadow-sm border border-slate-100">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-sm font-bold text-slate-700">{{ $cat->text_value }}</span>
                            <span class="text-lg font-black text-primary">{{ $cat->count }}</span>
                        </div>
                        <div class="h-2.5 bg-slate-100 rounded-full overflow-hidden">
                            <div class="h-full bg-primary rounded-full bar-fill" style="width: {{ ($cat->count / $maxCount) * 100 }}%"></div>
                        </div>
                    </div>
                @empty
                    <div class="bg-white p-10 rounded-2xl border border-dashed border-slate-200 text-center">
                        <p class="text-slate-400 text-sm">No category data available yet.</p>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Repository Info Panel -->
        <div>
            <h2 class="text-xl font-black text-slate-800 mb-8 flex items-center gap-3">
                <div class="w-8 h-8 bg-emerald-100 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-emerald-600 text-base">verified</span>
                </div>
                Repository Compliance
            </h2>
            
            <div class="space-y-4">
                @php
                    $compliance = [
                        ['label' => 'Dublin Core Metadata', 'icon' => 'check_circle', 'status' => 'Active', 'color' => 'emerald'],
                        ['label' => 'Open Access Policy', 'icon' => 'lock_open', 'status' => 'Enabled', 'color' => 'emerald'],
                        ['label' => 'OAI-PMH Interoperability', 'icon' => 'sync', 'status' => 'Active', 'color' => 'emerald'],
                        ['label' => 'Google Scholar Indexing', 'icon' => 'travel_explore', 'status' => 'Active', 'color' => 'emerald'],
                        ['label' => 'Persistent Identifier (Handle)', 'icon' => 'link', 'status' => 'Active', 'color' => 'emerald'],
                        ['label' => 'COAR Notify Protocol', 'icon' => 'notifications', 'status' => 'Planned', 'color' => 'amber'],
                    ];
                @endphp
                @foreach($compliance as $item)
                    <div class="bg-white rounded-2xl p-5 shadow-sm border border-slate-100 flex items-center gap-4">
                        <div class="w-10 h-10 bg-{{ $item['color'] }}-50 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="material-icons text-{{ $item['color'] }}-500">{{ $item['icon'] }}</span>
                        </div>
                        <span class="flex-grow text-sm font-bold text-slate-700">{{ $item['label'] }}</span>
                        <span class="px-3 py-1 bg-{{ $item['color'] }}-100 text-{{ $item['color'] }}-700 text-[10px] font-black uppercase tracking-widest rounded-lg">
                            {{ $item['status'] }}
                        </span>
                    </div>
                @endforeach
            </div>

            <!-- Top Downloads -->
            <div class="mt-8 bg-white rounded-3xl border border-slate-100 p-6 shadow-sm">
                <h3 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-4 flex items-center gap-2">
                    <span class="material-icons text-sm text-primary">download</span> Top Downloaded Publications
                </h3>
                <div class="divide-y divide-slate-100">
                    @forelse($stats['top_downloaded'] as $bs)
                        <div class="py-3 flex items-center justify-between text-xs">
                            <div class="truncate pr-4">
                                <p class="font-bold text-slate-800 truncate">{{ $bs->file_name }}</p>
                                <p class="text-[10px] text-slate-400 mt-0.5">Item: {{ $bs->item->title ?? 'Untitled' }}</p>
                            </div>
                            <span class="font-black text-slate-700 bg-slate-50 border border-slate-100 px-2 py-1 rounded-lg shrink-0">{{ $bs->downloads }} downloads</span>
                        </div>
                    @empty
                        <p class="text-xs text-slate-400 font-bold py-2">No file downloads logged yet.</p>
                    @endforelse
                </div>
            </div>

            <!-- OAI Endpoint -->
            <div class="mt-8 bg-slate-900 rounded-2xl p-6 text-white">
                <h4 class="text-[10px] font-black uppercase tracking-widest text-primary mb-2">OAI Base URL</h4>
                <p class="text-xs font-mono text-slate-400">{{ url('/oai') }}?verb=Identify</p>
                <p class="text-[10px] text-emerald-400 mt-2 font-bold">OAI-PMH harvesting endpoint (OAI 2.0 Compliant)</p>
            </div>
        </div>
    </div>

    <!-- Discovery Invitation -->
    <div class="mt-20 bg-primary rounded-3xl p-12 text-white text-center relative overflow-hidden">
        <div class="absolute inset-0 opacity-10" style="background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=800'); background-size: cover;"></div>
        <div class="relative z-10">
            <h2 class="text-3xl font-black mb-4">Explore the Full Repository</h2>
            <p class="text-white/70 mb-8 font-medium max-w-lg mx-auto">Browse all published academic works, theses, and conference papers by MTU researchers.</p>
            <a href="{{ route('items.index') }}" class="inline-flex items-center gap-3 bg-white text-primary font-black px-10 py-4 rounded-2xl shadow-xl hover:scale-105 transition-all text-sm uppercase tracking-widest">
                <span class="material-icons">search</span>
                Start Browsing
            </a>
        </div>
    </div>
</div>
@endsection