@extends('layouts.nova')

@php
    $discoverBreadcrumbs = collect([
        (object) ['name' => 'Discover', 'url' => '/discover/trending'],
        (object) ['name' => $page_title ?? 'Discover', 'url' => request()->path()],
    ]);
@endphp

@section('content')

<x-nova-page-header
    section="Discover"
    :title="$page_title ?? 'Discover'"
    :icon="$icon ?? 'fa-compass'"
    :breadcrumbs="$discoverBreadcrumbs"
    :description="$description ?? null"
    headerClass="pb-6"
    actionsClass="lg:pt-8"
>
    <x-slot name="actions">
        @include('web.discover._nav', ['section' => $section ?? ''])
    </x-slot>
</x-nova-page-header>

{{-- ── Artwork grid (React MasonryGallery) ── --}}
@php
    $galleryArtworks = collect($artworks->items())->map(fn ($art) => [
        'id'            => $art->id,
        'name'          => $art->name ?? null,
        'thumb'         => $art->thumb_url ?? $art->thumb ?? null,
        'thumb_srcset'  => $art->thumb_srcset ?? null,
        'uname'         => $art->uname ?? '',
        'username'      => $art->uname ?? '',
        'avatar_url'    => $art->avatar_url ?? null,
        'category_name' => $art->category_name ?? '',
        'category_slug' => $art->category_slug ?? '',
        'slug'          => $art->slug ?? '',
        'width'         => $art->width  ?? null,
        'height'        => $art->height ?? null,
    ])->values();
    $galleryNextPageUrl = method_exists($artworks, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
@endphp
<section class="px-6 pt-8 md:px-10">
    <div
        data-react-masonry-gallery
        data-artworks="{{ json_encode($galleryArtworks) }}"
        data-gallery-type="{{ $section ?? 'discover' }}"
        @if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
        data-limit="24"
        class="min-h-32"
    ></div>
</section>

@endsection

@push('styles')
<style>
    [data-nova-gallery].is-enhanced [data-gallery-grid] {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-auto-rows: 8px;
        gap: 1rem;
    }
    @media (min-width: 768px) {
        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1024px) {
        [data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        [data-gallery-grid].force-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    }
    @media (min-width: 1600px) {
        [data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        [data-gallery-grid].force-5 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    }
    @media (min-width: 2600px) {
        [data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
        [data-gallery-grid].force-5 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    }
    [data-nova-gallery].is-enhanced [data-gallery-grid] > .nova-card { margin: 0 !important; }
    [data-nova-gallery].is-enhanced [data-gallery-pagination] {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
    }
    [data-nova-gallery].is-enhanced [data-gallery-pagination] ul {
        display: inline-flex;
        gap: 0.25rem;
        align-items: center;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    [data-nova-gallery].is-enhanced [data-gallery-pagination] li a,
    [data-nova-gallery].is-enhanced [data-gallery-pagination] li span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.5rem;
        padding: 0 0.5rem;
        background: rgba(255,255,255,0.03);
        color: #e6eef8;
        border: 1px solid rgba(255,255,255,0.04);
        text-decoration: none;
        font-size: 0.875rem;
    }
    [data-gallery-skeleton].is-loading { display: grid !important; grid-template-columns: inherit; gap: 1rem; }
    .nova-skeleton-card {
        border-radius: 1rem;
        min-height: 180px;
        background: linear-gradient(110deg, rgba(255,255,255,.06) 8%, rgba(255,255,255,.12) 18%, rgba(255,255,255,.06) 33%);
        background-size: 200% 100%;
        animation: novaShimmer 1.2s linear infinite;
    }
    @keyframes novaShimmer {
        to { background-position-x: -200%; }
    }
</style>
@endpush

@push('scripts')
@vite('resources/js/entry-masonry-gallery.jsx')
@endpush