@extends('layouts.repository')

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

@section('content')
<div class="bg-primary/5 border-b border-primary/10 py-12">
    <div class="container mx-auto px-4">
        <h1 class="text-3xl font-black tracking-tight text-slate-800 mb-2">Browse & Search</h1>
        <p class="text-slate-500 font-medium">Discover research and academic output across various criteria.</p>
    </div>
</div>

<div class="container mx-auto px-4 py-12">
    <div class="grid lg:grid-cols-4 gap-12">
        <!-- Sidebar Filters -->
        <aside class="lg:col-span-1 space-y-6">
            <!-- Active Filters -->
            @if(request()->filled('collection') || request()->filled('author') || request()->filled('category'))
                <div class="bg-primary/5 p-6 rounded-3xl border border-primary/10">
                    <div class="flex items-center justify-between mb-4">
                        <h4 class="text-[10px] font-black uppercase tracking-widest text-primary">Active Filters</h4>
                        <a href="{{ route('items.index') }}" class="text-[10px] font-black uppercase tracking-widest text-slate-400 hover:text-red-500 transition-colors">Clear All</a>
                    </div>
                    <div class="space-y-2">
                        @if(request()->filled('collection'))
                            <div class="flex items-center justify-between bg-white px-3 py-1.5 rounded-xl border border-slate-100 text-xs font-bold text-slate-600">
                                <span class="truncate">Col: {{ $collectionsFacet->where('id', request('collection'))->first()->name ?? 'Selected' }}</span>
                                <a href="{{ request()->fullUrlWithQuery(['collection' => null]) }}" class="text-slate-300 hover:text-red-500"><span class="material-icons text-xs">close</span></a>
                            </div>
                        @endif
                        @if(request()->filled('author'))
                            <div class="flex items-center justify-between bg-white px-3 py-1.5 rounded-xl border border-slate-100 text-xs font-bold text-slate-600">
                                <span class="truncate">Author: {{ request('author') }}</span>
                                <a href="{{ request()->fullUrlWithQuery(['author' => null]) }}" class="text-slate-300 hover:text-red-500"><span class="material-icons text-xs">close</span></a>
                            </div>
                        @endif
                        @if(request()->filled('category'))
                            <div class="flex items-center justify-between bg-white px-3 py-1.5 rounded-xl border border-slate-100 text-xs font-bold text-slate-600">
                                <span class="truncate">Cat: {{ request('category') }}</span>
                                <a href="{{ request()->fullUrlWithQuery(['category' => null]) }}" class="text-slate-300 hover:text-red-500"><span class="material-icons text-xs">close</span></a>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            <!-- Sort By Criteria -->
            <div class="bg-white p-6 rounded-3xl shadow-sm border border-slate-100">
                <h3 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-6">Sort Criteria</h3>
                <nav class="space-y-1">
                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'id']) }}" class="flex items-center gap-3 px-4 py-3 rounded-xl {{ Request::get('sort') == 'id' || !Request::get('sort') ? 'bg-primary text-white shadow-lg shadow-primary/25' : 'text-slate-600 hover:bg-slate-50 transition-colors font-bold' }}">
                        <span class="material-icons text-sm">tag</span>
                        <span class="text-[10px] font-black uppercase tracking-wider">ID</span>
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'date']) }}" class="flex items-center gap-3 px-4 py-3 rounded-xl {{ Request::get('sort') == 'date' ? 'bg-primary text-white shadow-lg shadow-primary/25' : 'text-slate-600 hover:bg-slate-50 transition-colors font-bold' }}">
                        <span class="material-icons text-sm">calendar_today</span>
                        <span class="text-[10px] font-black uppercase tracking-wider">Issue Date</span>
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'author']) }}" class="flex items-center gap-3 px-4 py-3 rounded-xl {{ Request::get('sort') == 'author' ? 'bg-primary text-white shadow-lg shadow-primary/25' : 'text-slate-600 hover:bg-slate-50 transition-colors font-bold' }}">
                        <span class="material-icons text-sm">person</span>
                        <span class="text-[10px] font-black uppercase tracking-wider">Author</span>
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'title']) }}" class="flex items-center gap-3 px-4 py-3 rounded-xl {{ Request::get('sort') == 'title' ? 'bg-primary text-white shadow-lg shadow-primary/25' : 'text-slate-600 hover:bg-slate-50 transition-colors font-bold' }}">
                        <span class="material-icons text-sm">title</span>
                        <span class="text-[10px] font-black uppercase tracking-wider">Title</span>
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'subject']) }}" class="flex items-center gap-3 px-4 py-3 rounded-xl {{ Request::get('sort') == 'subject' ? 'bg-primary text-white shadow-lg shadow-primary/25' : 'text-slate-600 hover:bg-slate-50 transition-colors font-bold' }}">
                        <span class="material-icons text-sm">label</span>
                        <span class="text-[10px] font-black uppercase tracking-wider">Subject</span>
                    </a>
                </nav>
            </div>

            <!-- Collections Facet -->
            <div class="bg-white p-6 rounded-3xl shadow-sm border border-slate-100">
                <h3 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-4">Collections</h3>
                <div class="space-y-2 max-h-48 overflow-y-auto pr-1">
                    @foreach($collectionsFacet as $col)
                        <a href="{{ request()->fullUrlWithQuery(['collection' => $col->id]) }}" class="flex items-center justify-between text-xs font-bold text-slate-600 hover:text-primary transition-all py-1 {{ request('collection') == $col->id ? 'text-primary' : '' }}">
                            <span class="truncate pr-4">{{ $col->name }}</span>
                            <span class="bg-slate-50 text-[10px] text-slate-400 px-2 py-0.5 rounded-full font-black border border-slate-100">{{ $col->items_count }}</span>
                        </a>
                    @endforeach
                </div>
            </div>

            <!-- Authors Facet -->
            <div class="bg-white p-6 rounded-3xl shadow-sm border border-slate-100">
                <h3 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-4">Top Authors</h3>
                <div class="space-y-2 max-h-48 overflow-y-auto pr-1">
                    @foreach($authorsFacet as $af)
                        <a href="{{ request()->fullUrlWithQuery(['author' => $af->author]) }}" class="flex items-center justify-between text-xs font-bold text-slate-600 hover:text-primary transition-all py-1 {{ request('author') == $af->author ? 'text-primary' : '' }}">
                            <span class="truncate pr-4">{{ $af->author }}</span>
                            <span class="bg-slate-50 text-[10px] text-slate-400 px-2 py-0.5 rounded-full font-black border border-slate-100">{{ $af->count }}</span>
                        </a>
                    @endforeach
                </div>
            </div>

            <!-- Categories Facet -->
            <div class="bg-white p-6 rounded-3xl shadow-sm border border-slate-100">
                <h3 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-4 font-black">Categories</h3>
                <div class="space-y-2 max-h-48 overflow-y-auto pr-1">
                    @foreach($categoriesFacet as $cf)
                        <a href="{{ request()->fullUrlWithQuery(['category' => $cf->category]) }}" class="flex items-center justify-between text-xs font-bold text-slate-600 hover:text-primary transition-all py-1 {{ request('category') == $cf->category ? 'text-primary' : '' }}">
                            <span class="truncate pr-4">{{ $cf->category }}</span>
                            <span class="bg-slate-50 text-[10px] text-slate-400 px-2 py-0.5 rounded-full font-black border border-slate-100">{{ $cf->count }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </aside>

        <!-- Search & Results -->
        <main class="lg:col-span-3">
            <div class="mb-10">
                <form action="{{ route('items.index') }}" method="GET" class="relative group">
                    <input type="hidden" name="sort" value="{{ Request::get('sort', 'id') }}">
                    <input type="hidden" name="collection" value="{{ Request::get('collection') }}">
                    <input type="hidden" name="author" value="{{ Request::get('author') }}">
                    <input type="hidden" name="category" value="{{ Request::get('category') }}">
                    <input name="query" value="{{ Request::get('query') }}" class="w-full pl-6 pr-40 py-5 bg-white rounded-2xl border-2 border-slate-100 focus:border-primary focus:ring-0 text-slate-800 shadow-sm transition-all text-base font-medium" placeholder="Search by keywords, title, or researcher name...">
                    <div class="absolute right-3 top-2 bottom-2 flex gap-2">
                        @if(Request::get('query'))
                            <a href="{{ route('items.index', ['sort' => Request::get('sort')]) }}" class="bg-slate-100 hover:bg-slate-200 px-4 rounded-xl flex items-center justify-center text-slate-500 transition-colors">
                                <span class="material-icons text-sm">close</span>
                            </a>
                        @endif
                        <button type="submit" class="bg-primary px-6 rounded-xl flex items-center justify-center shadow-lg hover:scale-105 active:scale-95 transition-all">
                            <span class="material-icons text-white">search</span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="flex items-center justify-between mb-8">
                <p class="text-[11px] font-black uppercase tracking-widest text-slate-400">
                    Showing {{ $items->firstItem() ?? 0 }}-{{ $items->lastItem() ?? 0 }} of {{ $items->total() }} Results
                </p>
                
                <div class="flex gap-2">
                    <a href="{{ request()->fullUrlWithQuery(['order' => 'asc']) }}" class="p-2 rounded-lg {{ Request::get('order') == 'asc' || !Request::get('order') ? 'bg-primary text-white' : 'bg-white text-slate-400 border border-slate-100' }}">
                        <span class="material-icons text-sm">arrow_upward</span>
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['order' => 'desc']) }}" class="p-2 rounded-lg {{ Request::get('order') == 'desc' ? 'bg-primary text-white' : 'bg-white text-slate-400 border border-slate-100' }}">
                        <span class="material-icons text-sm">arrow_downward</span>
                    </a>
                </div>
            </div>

            <div class="space-y-6">
                @forelse($items as $item)
                    <div class="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl hover:shadow-primary/5 transition-all group">
                        <div class="flex flex-col md:flex-row gap-6">
                            <div class="w-full md:w-28 h-40 bg-slate-50 rounded-2xl flex flex-col items-center justify-center text-center p-2 border border-slate-100 flex-shrink-0 overflow-hidden">
                                @php $thumb = $item->bitstreams->where('bundle', 'THUMBNAIL')->first(); @endphp
                                @if($thumb)
                                    <img src="{{ Storage::disk('public')->url($thumb->file_path) }}" class="h-full w-full object-cover rounded-xl shadow" alt="Cover Image">
                                @else
                                    <span class="material-icons text-slate-300 text-4xl mb-2">article</span>
                                    <span class="text-[9px] text-slate-400 font-bold uppercase tracking-tighter">ITEM DETAILS</span>
                                @endif
                            </div>
                            <div class="flex-grow">
                                <div class="flex items-center gap-3 mb-2">
                                    <span class="bg-blue-100 text-blue-600 text-[9px] font-black uppercase tracking-widest px-2 py-0.5 rounded">
                                        {{ $item->category ?: 'Research' }}
                                    </span>
                                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                                        Issued {{ optional($item->issued_at)->format('d M Y') ?: 'N/A' }}
                                    </span>
                                </div>
                                <h3 class="text-slate-800 font-black text-xl mb-2 group-hover:text-primary transition-colors leading-tight">
                                    <a href="{{ route('items.show', $item->uuid) }}">{{ $item->title }}</a>
                                </h3>
                                <p class="text-xs text-slate-500 font-bold mb-3 flex items-center gap-1">
                                    <span class="material-icons text-sm text-primary/50">school</span>
                                    {{ $item->author }}
                                </p>
                                <p class="text-[13px] text-slate-400 font-medium leading-relaxed italic line-clamp-2">
                                    {{ $item->abstract }}
                                </p>
                                
                                <div class="mt-4 flex flex-wrap gap-2">
                                    @php $subjects = explode(',', $item->subject); @endphp
                                    @foreach(array_slice($subjects, 0, 3) as $s)
                                        @if(!empty(trim($s)))
                                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-wider bg-slate-50 px-2 py-1 rounded-md border border-slate-100">#{{ trim($s) }}</span>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="bg-white p-20 rounded-3xl border-2 border-dashed border-slate-100 text-center">
                        <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-6">
                            <span class="material-icons text-slate-200 text-4xl">search_off</span>
                        </div>
                        <h3 class="font-bold text-slate-800 mb-2">No matching items found</h3>
                        <p class="text-sm text-slate-400">Try adjusting your filters or search terms.</p>
                    </div>
                @endforelse
            </div>

            <div class="mt-12">
                {{ $items->links() }}
            </div>
        </main>
    </div>
</div>
@endsection