@extends('layouts.nova')

@php
    $featuredBreadcrumbs = collect([
        (object) ['name' => 'Featured', 'url' => request()->path()],
        (object) ['name' => $page_title ?? 'Featured Artworks', 'url' => request()->fullUrl()],
    ]);

    $galleryArtworks = collect($artworks->items())->map(fn ($art) => [
        'id'            => $art->id,
        'name'          => $art->name ?? null,
        'slug'          => $art->slug ?? null,
        'url'           => $art->url ?? null,
        'thumb'         => $art->thumb_url ?? null,
        'thumb_url'     => $art->thumb_url ?? null,
        'thumb_srcset'  => $art->thumb_srcset ?? null,
        'uname'         => $art->uname ?? '',
        'username'      => $art->username ?? $art->uname ?? '',
        'avatar_url'    => $art->avatar_url ?? null,
        'category_name' => $art->category_name ?? '',
        'category_slug' => $art->category_slug ?? '',
        'width'         => $art->width ?? null,
        'height'        => $art->height ?? null,
    ])->values();

    $galleryNextPageUrl = $artworks->nextPageUrl();
@endphp

@section('content')
<x-nova-page-header
    section="Featured"
    :title="$page_title ?? 'Featured Artworks'"
    icon="fa-star"
    :breadcrumbs="$featuredBreadcrumbs"
    description="Browse staff-picked and community-highlighted artwork in the shared gallery feed."
    headerClass="pb-6"
    actionsClass="lg:pt-8"
>
    <x-slot name="actions">
        <div class="flex flex-wrap items-center gap-2 text-sm">
            @foreach($artworkTypes as $k => $label)
                <a
                    href="{{ url()->current() }}?type={{ (int) $k }}"
                    class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {{ (int) $k === (int) $type ? 'bg-amber-500/20 text-amber-200 ring-1 ring-amber-400/30' : 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white' }}"
                >
                    {{ $label }}
                </a>
            @endforeach
        </div>
    </x-slot>
</x-nova-page-header>

<section class="px-6 pt-8 md:px-10">
    <div
        data-react-masonry-gallery
        data-artworks="{{ json_encode($galleryArtworks) }}"
        data-gallery-type="featured"
        @if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
        data-limit="39"
        class="min-h-32"
    ></div>
</section>
@endsection

@push('styles')
<style>
    @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)); }
    }
    @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)); }
    }
    @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)); }
    }
</style>
@endpush

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