@extends('layouts.app')
@section('title', $album->title)
@section('page-title', 'Photo Gallery')

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

    {{-- Back + Album Header --}}
    <div class="flex flex-wrap items-start justify-between gap-3">
        <div class="flex items-start gap-4">
            <a href="{{ route('gallery.index') }}" class="mt-1 w-9 h-9 bg-stone-100 rounded-xl flex items-center justify-center hover:bg-stone-200 transition flex-shrink-0">
                <i class="fas fa-arrow-left text-stone-500 text-sm"></i>
            </a>
            <div>
                <div class="flex items-center gap-2 flex-wrap">
                    @php
                        $catColors = ['sports'=>'bg-green-500','cultural'=>'bg-purple-500','academic'=>'bg-blue-500','celebration'=>'bg-pink-500','trip'=>'bg-cyan-500','graduation'=>'bg-yellow-500','general'=>'bg-stone-500','other'=>'bg-stone-400'];
                    @endphp
                    <span class="{{ $catColors[$album->category] ?? 'bg-stone-500' }} text-white px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider">
                        {{ App\Models\GalleryAlbum::categories()[$album->category] ?? $album->category }}
                    </span>
                    @if(!$album->is_published)
                    <span class="bg-red-100 text-red-600 px-2 py-0.5 rounded-full text-[9px] font-bold">Draft</span>
                    @endif
                </div>
                <h2 class="text-xl font-bold text-stone-800 mt-1">{{ $album->title }}</h2>
                <p class="text-sm text-stone-400 mt-0.5">
                    @if($album->event_date)
                    <i class="far fa-calendar mr-1"></i>{{ $album->event_date->format('d M Y') }} ·
                    @endif
                    {{ $album->photos->count() }} photos
                    · by {{ $album->creator->name ?? 'Admin' }}
                </p>
                @if($album->description)
                <p class="text-sm text-stone-500 mt-2">{{ $album->description }}</p>
                @endif
            </div>
        </div>

        @if(auth()->user()->role === 'admin')
        <div class="flex items-center gap-2 flex-shrink-0">
            <button onclick="document.getElementById('addPhotosModal').classList.remove('hidden')"
                    class="px-4 py-2 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm">
                <i class="fas fa-plus mr-1"></i> Add Photos
            </button>
            <button onclick="document.getElementById('editAlbumModal').classList.remove('hidden')"
                    class="px-3 py-2 bg-stone-100 text-stone-600 rounded-xl text-sm hover:bg-stone-200 transition">
                <i class="fas fa-edit"></i>
            </button>
            <form method="POST" action="{{ route('gallery.toggle-publish', $album) }}">
                @csrf
                <button class="px-3 py-2 {{ $album->is_published ? 'bg-green-50 text-green-600' : 'bg-orange-50 text-orange-600' }} rounded-xl text-sm hover:opacity-80 transition" title="{{ $album->is_published ? 'Unpublish' : 'Publish' }}">
                    <i class="fas {{ $album->is_published ? 'fa-eye' : 'fa-eye-slash' }}"></i>
                </button>
            </form>
            <form method="POST" action="{{ route('gallery.destroy', $album) }}" onsubmit="return confirm('Delete this entire album and all photos?')">
                @csrf @method('DELETE')
                <button class="px-3 py-2 bg-red-50 text-red-500 rounded-xl text-sm hover:bg-red-100 transition">
                    <i class="fas fa-trash"></i>
                </button>
            </form>
        </div>
        @endif
    </div>

    {{-- Photo Grid --}}
    @if($album->photos->isNotEmpty())
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
        @foreach($album->photos as $i => $photo)
        <div class="group relative aspect-square rounded-xl overflow-hidden bg-stone-100 ring-1 ring-stone-200/60 cursor-pointer"
             onclick="openLightbox({{ $i }})">
            <img src="{{ $photo->url }}" alt="{{ $photo->caption ?? $album->title }}"
                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">

            {{-- Hover overlay --}}
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 flex items-center justify-center">
                <i class="fas fa-search-plus text-white opacity-0 group-hover:opacity-100 transition-opacity text-lg"></i>
            </div>

            {{-- Caption --}}
            @if($photo->caption)
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-2 pt-6">
                <p class="text-white text-[10px] truncate">{{ $photo->caption }}</p>
            </div>
            @endif

            {{-- Admin delete --}}
            @if(auth()->user()->role === 'admin')
            <form method="POST" action="{{ route('gallery.photo.delete', $photo) }}"
                  onclick="event.stopPropagation()"
                  onsubmit="return confirm('Delete this photo?')"
                  class="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition">
                @csrf @method('DELETE')
                <button class="w-7 h-7 bg-red-500 text-white rounded-lg flex items-center justify-center hover:bg-red-600 text-xs shadow">
                    <i class="fas fa-trash text-[10px]"></i>
                </button>
            </form>
            @endif
        </div>
        @endforeach
    </div>
    @else
    <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-12 text-center">
        <i class="fas fa-camera text-3xl text-stone-200 mb-3 block"></i>
        <p class="text-stone-400">No photos in this album yet</p>
    </div>
    @endif
</div>

{{-- Lightbox --}}
<div id="lightbox" class="hidden fixed inset-0 bg-black/95 z-50 flex items-center justify-center" onclick="closeLightbox(event)">
    <button onclick="closeLightbox()" class="absolute top-4 right-4 text-white/70 hover:text-white z-10 text-2xl">
        <i class="fas fa-times"></i>
    </button>
    <button onclick="prevPhoto(event)" class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/10 hover:bg-white/20 rounded-full flex items-center justify-center text-white transition z-10">
        <i class="fas fa-chevron-left"></i>
    </button>
    <button onclick="nextPhoto(event)" class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/10 hover:bg-white/20 rounded-full flex items-center justify-center text-white transition z-10">
        <i class="fas fa-chevron-right"></i>
    </button>

    <div class="max-w-5xl max-h-[85vh] px-16">
        <img id="lightboxImg" src="" alt="" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-2xl">
        <p id="lightboxCaption" class="text-center text-white/70 text-sm mt-3"></p>
        <p id="lightboxCounter" class="text-center text-white/40 text-xs mt-1"></p>
    </div>
</div>

{{-- Add Photos Modal --}}
@if(auth()->user()->role === 'admin')
<div id="addPhotosModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-md">
        <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between">
            <h3 class="font-bold text-stone-800"><i class="fas fa-upload text-amber-500 mr-2"></i>Add Photos</h3>
            <button onclick="document.getElementById('addPhotosModal').classList.add('hidden')" class="text-stone-400 hover:text-stone-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('gallery.add-photos', $album) }}" enctype="multipart/form-data" class="p-6 space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Select Photos <span class="text-stone-400">(max 5MB each)</span></label>
                <input type="file" name="photos[]" required multiple accept="image/*"
                       class="w-full border border-stone-300 rounded-xl px-3 py-2 text-sm file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:bg-amber-50 file:text-amber-700 file:text-xs file:font-semibold">
            </div>
            <div class="flex justify-end gap-3">
                <button type="button" onclick="document.getElementById('addPhotosModal').classList.add('hidden')"
                        class="px-4 py-2 text-sm text-stone-600">Cancel</button>
                <button type="submit" class="px-5 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition">
                    <i class="fas fa-upload mr-1.5"></i> Upload
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Edit Album Modal --}}
<div id="editAlbumModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-md">
        <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between">
            <h3 class="font-bold text-stone-800"><i class="fas fa-edit text-amber-500 mr-2"></i>Edit Album</h3>
            <button onclick="document.getElementById('editAlbumModal').classList.add('hidden')" class="text-stone-400 hover:text-stone-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('gallery.update', $album) }}" enctype="multipart/form-data" class="p-6 space-y-4">
            @csrf @method('PUT')
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Title</label>
                <input type="text" name="title" value="{{ $album->title }}" required
                       class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Category</label>
                    <select name="category" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                        @foreach(App\Models\GalleryAlbum::categories() as $key => $label)
                        <option value="{{ $key }}" {{ $album->category === $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Event Date</label>
                    <input type="date" name="event_date" value="{{ $album->event_date?->format('Y-m-d') }}"
                           class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Description</label>
                <textarea name="description" rows="2" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm resize-none">{{ $album->description }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Replace Cover <span class="text-stone-400">(optional)</span></label>
                <input type="file" name="cover_image" accept="image/*"
                       class="w-full border border-stone-300 rounded-xl px-3 py-2 text-sm file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:bg-amber-50 file:text-amber-700 file:text-xs file:font-semibold">
            </div>
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="is_published" value="1" {{ $album->is_published ? 'checked' : '' }} class="rounded border-stone-300 text-amber-500">
                <span class="text-sm text-stone-600">Published</span>
            </label>
            <div class="flex justify-end gap-3">
                <button type="button" onclick="document.getElementById('editAlbumModal').classList.add('hidden')"
                        class="px-4 py-2 text-sm text-stone-600">Cancel</button>
                <button type="submit" class="px-5 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition">
                    <i class="fas fa-save mr-1.5"></i> Save
                </button>
            </div>
        </form>
    </div>
</div>
@endif

<script>
const photos = @json($album->photos->map(fn($p) => ['url' => $p->url, 'caption' => $p->caption]));
let currentIndex = 0;

function openLightbox(index) {
    currentIndex = index;
    updateLightbox();
    document.getElementById('lightbox').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeLightbox(e) {
    if (e && e.target !== e.currentTarget) return;
    document.getElementById('lightbox').classList.add('hidden');
    document.body.style.overflow = '';
}

function nextPhoto(e) {
    e && e.stopPropagation();
    currentIndex = (currentIndex + 1) % photos.length;
    updateLightbox();
}

function prevPhoto(e) {
    e && e.stopPropagation();
    currentIndex = (currentIndex - 1 + photos.length) % photos.length;
    updateLightbox();
}

function updateLightbox() {
    document.getElementById('lightboxImg').src = photos[currentIndex].url;
    document.getElementById('lightboxCaption').textContent = photos[currentIndex].caption || '';
    document.getElementById('lightboxCounter').textContent = (currentIndex + 1) + ' / ' + photos.length;
}

document.addEventListener('keydown', function(e) {
    if (document.getElementById('lightbox').classList.contains('hidden')) return;
    if (e.key === 'Escape') closeLightbox();
    if (e.key === 'ArrowRight') nextPhoto();
    if (e.key === 'ArrowLeft') prevPhoto();
});
</script>
@endsection