@extends('layouts.nova')

@php
    $galleryItems = collect($artworks->items())->map(fn ($art) => [
        'id' => $art->id ?? null,
        'name' => $art->name ?? $art->title ?? null,
        'title' => $art->title ?? $art->name ?? null,
        'thumb' => $art->thumb ?? $art->thumb_url ?? null,
        'thumb_url' => $art->thumb_url ?? $art->thumb ?? null,
        'slug' => $art->slug ?? '',
        'author' => $art->author ?? '',
        'uname' => $art->uname ?? $art->author ?? '',
        'username' => $art->username ?? '',
        'avatar_url' => $art->avatar_url ?? null,
        'category_name' => $art->category_name ?? '',
        'category_slug' => $art->category_slug ?? '',
        'width' => $art->width ?? null,
        'height' => $art->height ?? null,
        'likes' => $art->likes ?? 0,
        'comments_count' => $art->comments_count ?? 0,
    ])->values();
@endphp

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

@section('content')
    <div class="container-fluid legacy-page">
        <div class="pt-0">
            <div class="mx-auto w-full">
                <div class="relative min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
                    <main class="w-full">
                        <x-nova-page-header
                            section="Dashboard"
                            title="My Favourites"
                            icon="fa-heart"
                            :breadcrumbs="collect([
                                (object) ['name' => 'Dashboard', 'url' => '/dashboard'],
                                (object) ['name' => 'Favourites', 'url' => route('dashboard.favorites')],
                            ])"
                            description="Artworks you saved, displayed in the same gallery layout as Browse."
                            actionsClass="lg:pt-8"
                        >
                            <x-slot name="actions">
                                @if($artworks->total() > 0)
                                    <div class="inline-flex items-center gap-1.5 rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 py-1.5 text-sm text-white/60">
                                        <i class="fa-solid fa-images text-xs text-sky-300"></i>
                                        <span>{{ number_format($artworks->total()) }} artworks</span>
                                    </div>
                                @endif
                            </x-slot>
                        </x-nova-page-header>

                        <section class="px-6 pb-10 pt-8 md:px-10">
                            @if($artworks->isEmpty())
                                <div class="rounded-xl border border-white/10 bg-white/5 p-8 text-center text-white/60">
                                    You have no favourites yet.
                                </div>
                            @else
                                <div
                                    data-react-masonry-gallery
                                    data-artworks='@json($galleryItems)'
                                    data-gallery-type="dashboard-favorites"
                                    @if($artworks->nextPageUrl()) data-next-page-url="{{ $artworks->nextPageUrl() }}" @endif
                                    data-limit="20"
                                    class="min-h-32"
                                ></div>
                            @endif
                        </section>
                    </main>
                </div>
            </div>
        </div>
    </div>
@endsection