@extends('layouts.guest')

@section('content')
    <!-- Hero Section -->
    <div
        class="relative bg-gradient-to-br from-blue-900 via-indigo-800 to-blue-900 py-12 sm:py-24 overflow-hidden shadow-2xl mb-8 sm:mb-12">
        <!-- Decorative background elements -->
        <div
            class="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] mix-blend-overlay">
        </div>
        <div
            class="absolute top-0 right-0 -mr-20 -mt-20 w-72 h-72 rounded-full bg-blue-400 mix-blend-multiply filter blur-3xl opacity-30 animate-blob">
        </div>
        <div
            class="absolute bottom-0 left-0 -ml-20 -mb-20 w-72 h-72 rounded-full bg-indigo-300 mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000">
        </div>

        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center max-w-3xl mx-auto">
                <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white mb-4 sm:mb-6 tracking-tight leading-tight">
                    Eksplorasi <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-200 to-cyan-200">Katalog
                        Perpustakaan</span>
                </h1>
                <p class="text-blue-100 text-sm sm:text-lg md:text-xl mb-8 sm:mb-10 font-light px-2 sm:px-0">
                    Temukan ribuan koleksi buku, jurnal, dan referensi akademik untuk menginspirasi perjalanan literasi
                    Anda.
                </p>

                <!-- Search Bar -->
                <form action="{{ route('katalog.index') }}" method="GET" class="relative group max-w-2xl mx-auto px-2 sm:px-0">
                    <div class="absolute inset-y-0 left-2 sm:left-0 pl-4 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-gray-400 group-focus-within:text-blue-500 transition-colors"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </div>
                    <input type="text" name="search" value="{{ $search }}"
                        placeholder="Cari judul buku, pengarang..."
                        class="block w-full pl-10 pr-24 sm:pl-12 sm:pr-32 py-3.5 sm:py-4 bg-white/95 backdrop-blur-sm border-0 rounded-xl sm:rounded-2xl shadow-xl focus:ring-4 focus:ring-blue-500/30 text-gray-800 text-sm sm:text-lg transition-all placeholder-gray-400">
                    <button type="submit"
                        class="absolute right-3.5 sm:right-2 top-1.5 bottom-1.5 sm:top-2 sm:bottom-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold px-5 sm:px-6 lg:px-8 rounded-lg sm:rounded-xl shadow-md transition-all transform hover:scale-[1.02] active:scale-[0.98] text-sm sm:text-base">
                        Cari
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4 pb-16">
        <!-- Results Info -->
        @if (isset($search) && $search != '')
            <div class="mb-8 flex justify-between items-center text-gray-600">
                <p>Menampilkan hasil pencarian untuk: <span class="font-semibold text-gray-900">"{{ $search }}"</span>
                </p>
            </div>
        @endif

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
            @forelse($buku as $item)
                @php
                    $habis = $item->eksemplar <= 0;
                @endphp
                <div
                    class="group bg-white rounded-2xl shadow-sm hover:shadow-2xl border border-gray-100 overflow-hidden transition-all duration-300 transform {{ $habis ? 'grayscale opacity-75 cursor-not-allowed' : 'hover:-translate-y-1' }} flex flex-col h-full">
                    <!-- Book Cover -->
                    <div class="relative w-full pt-[140%] overflow-hidden bg-gray-50 flex-shrink-0">
                        @if ($item->cover)
                            <img src="{{ asset('storage/' . $item->cover) }}" alt="{{ $item->judul }}"
                                class="absolute inset-0 w-full h-full object-cover {{ !$habis ? 'group-hover:scale-110' : '' }} transition-transform duration-700 ease-in-out"
                                onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                            <div
                                class="hidden absolute inset-0 flex flex-col items-center justify-center text-gray-300 bg-gray-100 {{ !$habis ? 'group-hover:bg-gray-200' : '' }} transition-colors duration-300">
                                <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                        d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
                                    </path>
                                </svg>
                                <span class="text-xs font-medium">Cover Tidak Tersedia</span>
                            </div>
                        @else
                            <div
                                class="absolute inset-0 flex flex-col items-center justify-center text-gray-300 bg-gray-100 {{ !$habis ? 'group-hover:bg-gray-200' : '' }} transition-colors duration-300">
                                <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                        d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
                                    </path>
                                </svg>
                                <span class="text-xs font-medium">Cover Tidak Tersedia</span>
                            </div>
                        @endif

                        @if ($habis)
                            <!-- Overlay Dipinjam Semua -->
                            <div
                                class="absolute inset-0 bg-red-900/30 backdrop-blur-[1px] flex items-center justify-center z-10">
                                <div
                                    class="bg-red-600/90 text-white font-black text-sm md:text-base px-6 py-2 border-y-2 border-white transform -rotate-12 shadow-2xl tracking-widest uppercase pointer-events-none">
                                    TIDAK TERSEDIA
                                </div>
                            </div>
                        @endif

                        <!-- Badge BUKU BARU Dinamis (Buku terbit/masuk dalam 1 tahun terakhir) -->
                        @php
                            $isBaru = false;
                            $tahunSekarang = date('Y');

                            if (isset($item->tahun_terbit) && intval($item->tahun_terbit) >= $tahunSekarang - 1) {
                                $isBaru = true;
                            } elseif (isset($item->created_at)) {
                                $tanggalMasuk = \Carbon\Carbon::parse($item->created_at);
                                if ($tanggalMasuk->diffInDays(now()) <= 30) {
                                    $isBaru = true;
                                }
                            }
                        @endphp

                        @if ($isBaru && !$habis)
                            <div class="absolute top-0 right-0 z-20">
                                <div
                                    class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-[9px] sm:text-[10px] font-extrabold px-3 py-1.5 shadow-lg rounded-bl-xl origin-top-right transform">
                                    <i class="fas fa-sparkles mr-1"></i> BUKU BARU
                                </div>
                            </div>
                        @endif

                        <!-- Overlay Badges -->
                        <div class="absolute top-2 inset-x-2 flex justify-between items-start z-20">
                            <span
                                class="bg-white/90 backdrop-blur-md text-gray-800 text-[10px] sm:text-xs font-bold px-2 py-1 rounded shadow-sm">
                                {{ $item->nomor_panggil }}
                            </span>
                            @if (isset($item->similarity_score))
                                <span
                                    class="bg-blue-600/90 backdrop-blur-md text-white text-[10px] sm:text-xs font-semibold px-2 py-1 rounded shadow-sm">
                                    {{ $item->similarity_score >= 1 ? 'Exact' : 'Rel: ' . number_format($item->similarity_score, 1) }}
                                </span>
                            @endif
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="p-4 flex-grow flex flex-col">
                        <h2 class="text-sm sm:text-base font-bold text-gray-900 mb-1 line-clamp-2 md:leading-snug {{ !$habis ? 'group-hover:text-blue-600 transition-colors' : '' }}"
                            title="{{ $item->judul }}">
                            {{ $item->judul }}
                        </h2>
                        <p class="text-blue-600 font-medium text-xs sm:text-sm mb-2 line-clamp-1">
                            {{ $item->pengarang }}
                        </p>
                        <div class="mt-auto pt-3 flex flex-col gap-2 border-t border-gray-50">
                            <div class="flex justify-between items-center text-[10px] sm:text-xs text-gray-500">
                                <span class="truncate pr-1">{{ $item->penerbit }}</span>
                                <span
                                    class="font-medium bg-gray-100 px-1.5 py-0.5 rounded">{{ $item->tahun_terbit ?? '-' }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Action Area -->
                    <div class="px-4 pb-4 pt-0 mt-auto relative z-30">
                        @if ($habis)
                            <button disabled
                                class="w-full text-center bg-gray-100 text-gray-500 text-sm font-semibold py-2 px-3 rounded-xl border border-gray-200 cursor-not-allowed opacity-80 backdrop-blur-sm">
                                Habis Dipinjam
                            </button>
                        @else
                            <a href="{{ route('katalog.show', $item->id_buku) }}"
                                class="block w-full text-center bg-gray-50 hover:bg-blue-600 text-gray-700 hover:text-white text-sm font-semibold py-2 px-3 rounded-xl border border-gray-200 hover:border-transparent transition-all duration-300">
                                Lihat Detail
                            </a>
                        @endif
                    </div>
                </div>
            @empty
                <div
                    class="col-span-full py-20 bg-white rounded-3xl shadow-sm border border-gray-100 flex flex-col items-center justify-center text-center px-4">
                    <div class="w-20 h-20 sm:w-24 sm:h-24 bg-gray-50 rounded-full flex items-center justify-center mb-6">
                        <svg class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                        </svg>
                    </div>
                    <h3 class="text-xl sm:text-2xl font-bold text-gray-900 mb-2">Tidak Ada Koleksi</h3>
                    <p class="text-gray-500 max-w-md text-sm sm:text-base">Koleksi buku yang Anda cari belum tersedia saat
                        ini. Silakan coba dengan kata kunci lain.</p>
                </div>
            @endforelse
        </div>

        <!-- Pagination -->
        <div class="mt-12 flex justify-center">
            {{ $buku->links() }}
        </div>

        <!-- Widget Buku Terpopuler -->
        @if (isset($bukuPopuler) && $bukuPopuler->count() > 0)
            <div class="mt-20 max-w-5xl mx-auto bg-white rounded-[2rem] shadow-sm border border-gray-100 p-6 sm:p-10">
                <div class="flex items-center gap-3 mb-6 border-b border-gray-100 pb-4">
                    <div
                        class="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center text-white shadow-lg shadow-orange-200">
                        <i class="fas fa-fire text-lg"></i>
                    </div>
                    <h3 class="text-2xl font-black text-gray-900 tracking-tight">Top 5 Buku Terpopuler</h3>
                </div>

                <ul class="divide-y divide-gray-50">
                    @foreach ($bukuPopuler as $top)
                        <li
                            class="py-4 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 hover:bg-gray-50/80 -mx-4 px-4 rounded-2xl transition-colors group">
                            <div>
                                <a href="{{ route('katalog.show', $top->id_buku) }}"
                                    class="font-bold text-gray-900 text-base md:text-lg group-hover:text-blue-600 transition-colors block mb-1">
                                    {{ $top->judul }}
                                </a>
                                <p class="text-sm text-gray-500">{{ $top->pengarang }}</p>
                            </div>
                            <div class="self-start sm:self-auto">
                                <span
                                    class="inline-flex items-center gap-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-blue-700 border border-blue-100 text-xs font-bold px-4 py-2 rounded-full whitespace-nowrap shadow-sm transition-all group-hover:shadow-md">
                                    <i class="fas fa-chart-line text-blue-500"></i> {{ $top->peminjaman_count }}
                                    Peminjaman
                                </span>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
@endsection
