@props(['product', 'wishlistPage' => false])
@if ($product)
@php
    $image = $product->primaryImage?->image_path ?? $product->images->first()?->image_path ?? null;
    // A second angle, when the product has one, gets crossfaded in on hover
    // instead of the plain zoom below — a restrained "let the product speak"
    // treatment rather than another motion effect layered on top.
    $secondaryImage = $product->images->firstWhere('image_path', '!=', $image)?->image_path ?? null;
    $productRoute = Route::has('shop.product') ? route('shop.product', $product) : '#';

    // Memoized once per request (not per card) via Laravel's once() helper —
    // this closure's call site is the same compiled line every time this
    // component renders, so a grid of 20 cards still costs a single query.
    $wishlistedIds = auth()->check() ? once(fn () => auth()->user()->wishlists()->pluck('product_id')->all()) : [];
    $isWishlisted = in_array($product->id, $wishlistedIds, true);
@endphp

<div class="tilt-card group relative">
    <div class="relative aspect-[3/4] overflow-hidden rounded-xl bg-cream shadow-[var(--shadow-soft)]">
        {{-- A <button> nested inside an <a> is invalid HTML and made the
             wishlist heart un-clickable on its own — it's a sibling now,
             layered on top via z-index instead. --}}
        <a href="{{ $productRoute }}" class="absolute inset-0 z-0 block" aria-label="{{ $product->name }}">
            @if ($image)
                <img
                    src="{{ Storage::url($image) }}" alt="{{ $product->name }}"
                    class="h-full w-full object-cover {{ $secondaryImage ? 'transition-opacity duration-500 ease-out group-hover:opacity-0' : 'transition-transform duration-500 ease-out group-hover:scale-110' }}"
                    loading="lazy" decoding="async"
                >
                @if ($secondaryImage)
                    <img
                        src="{{ Storage::url($secondaryImage) }}" alt="" aria-hidden="true"
                        class="absolute inset-0 h-full w-full object-cover opacity-0 transition-opacity duration-500 ease-out group-hover:opacity-100"
                        loading="lazy" decoding="async"
                    >
                @endif
            @else
                <div class="flex h-full w-full items-center justify-center">
                    <x-icon name="shirt" class="h-10 w-10 text-ink/10" :stroke-width="1.5" />
                </div>
            @endif
        </a>

        <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-ink/25 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"></div>

        @if ($product->is_on_sale)
            <span class="absolute left-3 top-3 rounded-full bg-maroon px-2.5 py-1 text-[0.65rem] font-semibold uppercase tracking-wide text-ivory shadow-sm">
                -{{ $product->discount_percentage }}%
            </span>
        @endif

        @if (! $product->is_in_stock)
            <div class="absolute inset-0 flex items-center justify-center bg-ink/50 backdrop-blur-[2px]">
                <span class="rounded-full bg-ivory px-3 py-1 text-xs font-semibold uppercase tracking-wide text-ink">Out of Stock</span>
            </div>
        @endif

        @auth
            <form
                method="POST" action="{{ route('wishlist.toggle', $product) }}" data-ajax="wishlist"
                @if ($wishlistPage) data-remove-on-success @endif
                class="absolute right-3 top-3 z-10"
            >
                @csrf
                <x-icon-button
                    type="submit" name="heart" variant="chip-light"
                    icon-class="h-3.5 w-3.5"
                    :label="$isWishlisted ? 'Remove from wishlist' : 'Add to wishlist'"
                    class="icon-heart h-8! w-8! min-h-8! min-w-8! bg-ivory/90! text-ink/60 hover:text-maroon! {{ $isWishlisted ? 'is-active' : '' }}"
                />
            </form>
        @else
            <a
                href="{{ route('login') }}"
                class="icon-btn icon-chip icon-chip--on-light absolute right-3 top-3 z-10 h-8! w-8! min-h-8! min-w-8! bg-ivory/90! text-ink/60 hover:text-maroon!"
                aria-label="Sign in to save to wishlist"
            >
                <x-icon name="heart" class="h-3.5 w-3.5" />
            </a>
        @endauth
    </div>

    <div class="mt-3">
        @if ($product->category)
            <p class="text-[0.7rem] uppercase tracking-wide text-ink/40">{{ $product->category->name }}</p>
        @endif
        <a href="{{ $productRoute }}" class="mt-0.5 block truncate text-sm font-medium text-ink transition-colors duration-200 hover:text-champagne-light">
            {{ $product->name }}
        </a>
        @if (($product->reviews_count ?? 0) > 0)
            <div class="mt-1 flex items-center gap-1.5">
                <span class="flex items-center gap-0.5 text-champagne-light">
                    @for ($i = 1; $i <= 5; $i++)
                        <i class="fa-{{ $i <= round($product->reviews_avg_rating) ? 'solid' : 'regular' }} fa-star text-[0.6rem]"></i>
                    @endfor
                </span>
                <span class="text-xs text-ink/40">({{ $product->reviews_count }})</span>
            </div>
        @endif
        <div class="mt-1.5 flex items-center gap-2">
            <span class="text-sm font-semibold text-ink">{{ config('niyarasa.currency.symbol') }} {{ number_format((float) $product->current_price) }}</span>
            @if ($product->is_on_sale)
                <span class="text-xs text-ink/35 line-through">{{ config('niyarasa.currency.symbol') }} {{ number_format((float) $product->original_price) }}</span>
            @endif
        </div>
    </div>
</div>
@endif
