@extends('layouts.nova')

@php
    $discoverBreadcrumbs = collect([
        (object) ['name' => 'Discover', 'url' => '/discover/trending'],
        (object) ['name' => 'For You', 'url' => '/discover/for-you'],
    ]);
@endphp

@section('content')

<x-nova-page-header
    section="Discover"
    title="For You"
    icon="fa-wand-magic-sparkles"
    :breadcrumbs="$discoverBreadcrumbs"
    description="Artworks picked for you based on your taste."
    headerClass="pb-6"
    actionsClass="lg:pt-8"
    iconClass="text-yellow-400"
>
    <x-slot name="actions">
        @include('web.discover._nav', ['section' => 'for-you'])
    </x-slot>
</x-nova-page-header>

@php
    $cacheTone = match ($feed_meta['cache_status'] ?? null) {
        'hit' => 'text-emerald-200 ring-emerald-400/30 bg-emerald-500/12',
        'stale' => 'text-amber-200 ring-amber-400/30 bg-amber-500/12',
        default => 'text-sky-100 ring-sky-300/30 bg-sky-500/12',
    };
    $generatedAt = !empty($feed_meta['generated_at']) ? \Illuminate\Support\Carbon::parse($feed_meta['generated_at'])->diffForHumans() : null;
@endphp

<section class="px-6 md:px-10">
    <div class="grid gap-3 rounded-[1.6rem] border border-white/8 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.14),_transparent_42%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.88))] p-5 shadow-[0_18px_60px_rgba(2,6,23,0.38)] md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
        <div class="space-y-2">
            <p class="text-[0.7rem] font-semibold uppercase tracking-[0.28em] text-sky-200/70">Personalized discovery</p>
            <p class="max-w-3xl text-sm leading-6 text-slate-300">
                This feed now runs on the same recommendation engine as the API, so your views and clicks on this page can refine what shows up next.
            </p>
        </div>

        <div class="flex flex-wrap items-center gap-2 text-xs text-slate-200/85">
            <span class="inline-flex items-center gap-2 rounded-full ring-1 ring-white/12 bg-white/6 px-3 py-1.5">
                <span class="text-slate-400">Model</span>
                <span>{{ $feed_meta['algo_version'] ?? 'n/a' }}</span>
            </span>
            <span class="inline-flex items-center gap-2 rounded-full ring-1 px-3 py-1.5 {{ $cacheTone }}">
                <span class="text-slate-300/70">Cache</span>
                <span>{{ str_replace(['-', '_'], ' ', $feed_meta['cache_status'] ?? 'unknown') }}</span>
            </span>
            @if (!empty($feed_meta['total_candidates']))
                <span class="inline-flex items-center gap-2 rounded-full ring-1 ring-white/12 bg-white/6 px-3 py-1.5">
                    <span class="text-slate-400">Candidates</span>
                    <span>{{ number_format((int) $feed_meta['total_candidates']) }}</span>
                </span>
            @endif
            @if ($generatedAt)
                <span class="inline-flex items-center gap-2 rounded-full ring-1 ring-white/12 bg-white/6 px-3 py-1.5">
                    <span class="text-slate-400">Refreshed</span>
                    <span>{{ $generatedAt }}</span>
                </span>
            @endif
        </div>
    </div>
</section>

{{-- ── Artwork grid (React MasonryGallery) ── --}}
@php
    $galleryArtworks = $artworks->map(fn ($art) => [
        'id'            => $art->id,
        'name'          => $art->name ?? null,
        'thumb'         => $art->thumb_url ?? null,
        'thumb_srcset'  => $art->thumb_srcset ?? null,
        'uname'         => $art->uname ?? '',
        'username'      => $art->username ?? '',
        'avatar_url'    => $art->avatar_url ?? null,
        'published_at'  => $art->published_at ?? null,
        'content_type_name' => $art->content_type_name ?? '',
        'category_name' => $art->category_name ?? '',
        'category_slug' => $art->category_slug ?? '',
        'slug'          => $art->slug ?? '',
        'url'           => $art->url ?? null,
        'width'         => $art->width  ?? null,
        'height'        => $art->height ?? null,
        'recommendation_source' => $art->recommendation_source ?? 'mixed',
        'recommendation_reason' => $art->recommendation_reason ?? 'Picked for you',
        'recommendation_score' => $art->recommendation_score,
        'recommendation_algo_version' => $art->recommendation_algo_version ?? ($feed_meta['algo_version'] ?? null),
    ])->values();
@endphp
<section class="px-6 pt-8 md:px-10">
    <div
        data-react-masonry-gallery
        data-artworks="{{ json_encode($galleryArtworks) }}"
        data-gallery-type="for-you"
        data-cursor-endpoint="{{ route('discover.for-you') }}"
        data-discovery-endpoint="{{ route('api.discovery.events.store') }}"
        data-algo-version="{{ $feed_meta['algo_version'] ?? '' }}"
        @if (!empty($next_cursor)) data-next-cursor="{{ $next_cursor }}" @endif
        data-limit="40"
        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-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