@extends('layouts.nova')

@php
    $headerBreadcrumbs = collect([
        (object) ['name' => $page_title, 'url' => route('legacy.top_favourites')],
    ]);

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

    $galleryNextPageUrl = method_exists($artworks, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
@endphp

@section('content')
<x-nova-page-header
    section="Favourites"
    :title="$page_title"
    icon="fa-heart"
    :breadcrumbs="$headerBreadcrumbs"
    description="Most popular artworks which users added in their favourites."
    headerClass="pb-6"
/>

<section class="px-6 pt-8 md:px-10">
    @if ($artworks && $artworks->count())
        <div
            data-react-masonry-gallery
            data-artworks="{{ json_encode($galleryArtworks) }}"
            data-gallery-type="top-favourites"
            @if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
            data-limit="21"
            class="min-h-32"
        ></div>
    @else
        <div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
            <p class="text-white/40 text-sm">No artworks have been favourited yet.</p>
            <p class="text-white/25 text-xs mt-1">Once members start saving artworks, they will appear here.</p>
        </div>
    @endif
</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