@extends('layouts.nova')

@php
    $latestBreadcrumbs = collect([
        (object) ['name' => 'Uploads', 'url' => route('uploads.latest')],
        (object) ['name' => $page_title ?? 'Latest Artworks', 'url' => route('uploads.latest')],
    ]);
    $cursorStateLabel = request()->filled('cursor') ? 'Browsing archive' : 'Latest slice';
    $cursorStateCopy = request()->filled('cursor')
        ? 'You are viewing an older slice of the cursor-based feed.'
        : 'You are viewing the newest public uploads first.';
    $galleryArtworks = collect($artworks->items())->map(fn ($art) => [
        'id' => $art->id,
        'name' => $art->name ?? 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 ?? '',
        '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 ?? '',
        'slug' => $art->slug ?? '',
        'width' => $art->width ?? null,
        'height' => $art->height ?? null,
        'published_at' => optional($art->published_at)?->toIsoString() ?? null,
        'url' => isset($art->id) ? '/art/' . $art->id . '/' . ($art->slug ?: \Illuminate\Support\Str::slug($art->name ?? 'artwork')) : '#',
    ])->values();
    $galleryNextPageUrl = method_exists($artworks, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
@endphp

@section('content')

<x-nova-page-header
    section="Uploads"
    :title="$page_title ?? 'Latest Artworks'"
    icon="fa-sparkles"
    :breadcrumbs="$latestBreadcrumbs"
    description="Fresh public uploads across skins, photography, wallpapers, and the rest of the Skinbase catalog."
    headerClass="pb-6"
    actionsClass="lg:pt-8"
>
    <x-slot name="actions">
        <div class="flex flex-wrap items-center gap-3">
            <a
                href="{{ route('uploads.daily') }}"
                class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors"
            >
                <i class="fa-solid fa-calendar-day text-sky-300"></i>
                Daily Uploads
            </a>
            <a
                href="{{ route('discover.fresh') }}"
                class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-sky-400/20 bg-sky-400/10 text-sky-100 hover:bg-sky-400/15 transition-colors"
            >
                <i class="fa-solid fa-compass text-sky-300"></i>
                Discover Fresh
            </a>
        </div>
    </x-slot>
</x-nova-page-header>

<section class="px-6 pt-8 md:px-10">
    <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
        <div class="overflow-hidden rounded-[1.5rem] border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_34%),linear-gradient(135deg,rgba(11,17,27,0.96),rgba(10,16,24,0.88))] p-5 shadow-[0_20px_70px_rgba(3,7,18,0.24)] md:p-6">
            <div class="flex flex-wrap items-center gap-3 text-sm text-white/58">
                <span class="inline-flex items-center gap-2 rounded-full border border-sky-400/20 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200">
                    <span class="h-2 w-2 rounded-full bg-sky-300"></span>
                    Live feed
                </span>
                <span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-3 py-1 text-xs font-medium text-white/60">
                    Ordered by newest first
                </span>
            </div>

            <div class="mt-5 grid gap-4 md:grid-cols-3">
                <div class="rounded-2xl border border-white/10 bg-white/[0.05] p-4 backdrop-blur-sm">
                    <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/40">This page</p>
                    <p class="mt-3 text-3xl font-semibold text-white">{{ number_format($artworks->count()) }}</p>
                    <p class="mt-2 text-sm text-white/45">Artworks loaded in the current slice.</p>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/[0.05] p-4 backdrop-blur-sm">
                    <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/40">Position</p>
                    <p class="mt-3 text-3xl font-semibold text-white">{{ $cursorStateLabel }}</p>
                    <p class="mt-2 text-sm text-white/45">{{ $cursorStateCopy }}</p>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/[0.05] p-4 backdrop-blur-sm">
                    <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/40">Per page</p>
                    <p class="mt-3 text-3xl font-semibold text-white">{{ number_format($artworks->perPage()) }}</p>
                    <p class="mt-2 text-sm text-white/45">Balanced for a fast modern gallery load.</p>
                </div>
            </div>
        </div>

        <aside class="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
            <div class="rounded-[1.5rem] border border-white/[0.08] bg-white/[0.03] p-5 backdrop-blur-sm">
                <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/38">Gallery mode</p>
                <h2 class="mt-3 text-lg font-semibold text-white">Nova Gallery</h2>
                <p class="mt-2 text-sm leading-6 text-white/52">A denser card wall with the same Skinbase artwork cards used across discover and browse surfaces.</p>
            </div>
            <div class="rounded-[1.5rem] border border-white/[0.08] bg-white/[0.03] p-5 backdrop-blur-sm">
                <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/38">Content mix</p>
                <h2 class="mt-3 text-lg font-semibold text-white">All public uploads</h2>
                <p class="mt-2 text-sm leading-6 text-white/52">Skins, photography, wallpapers, and everything else released publicly, sorted strictly by recency.</p>
            </div>
        </aside>
    </div>
</section>

<section class="px-6 pb-16 pt-8 md:px-10">
    <div
        data-react-masonry-gallery
        data-artworks='@json($galleryArtworks)'
        data-gallery-type="latest-uploads"
        @if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
        data-limit="{{ $artworks->perPage() }}"
        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)); }
    }
    @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)); }
    }
    [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.75rem;
        padding: 0 0.75rem;
        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; }
</style>
@endpush

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