@props(['product'])

@php
    $activeVariants = $product->variants->where('is_active', true);
    $firstVariant = $activeVariants->first(fn ($v) => $v->stock_status !== 'out_of_stock') ?? $activeVariants->first();
    $isOutOfStock = $activeVariants->isEmpty() || $activeVariants->every(fn ($v) => $v->stock_status === 'out_of_stock');
    $isLowStock = ! $isOutOfStock && $firstVariant?->stock_status === 'low_stock';
    $optionCount = $activeVariants->count();
    $isWishlisted = ($wishlistedIds ?? collect())->contains($product->id);
@endphp

<div class="product-card{{ $isOutOfStock ? ' product-card--oos' : '' }}">
    <div class="product-card__image-wrap">
        <div class="product-card__badge-stack">
            @if ($isOutOfStock)
                <span class="badge-oos">Sold Out</span>
            @elseif ($product->compare_at_price && $product->compare_at_price > $product->price)
                @php $percentOff = round((1 - $product->price / $product->compare_at_price) * 100); @endphp
                <span class="badge-sale">{{ $percentOff }}% OFF</span>
            @endif
        </div>
        @auth
            <form action="{{ $isWishlisted ? route('wishlist.destroy', $product) : route('wishlist.store') }}" method="POST">
                @csrf
                @if ($isWishlisted) @method('DELETE') @endif
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                <button type="submit" class="product-card__wishlist" title="{{ $isWishlisted ? 'Remove from wishlist' : 'Add to wishlist' }}">
                    <i class="bi {{ $isWishlisted ? 'bi-heart-fill text-danger' : 'bi-heart' }}"></i>
                </button>
            </form>
        @else
            <a href="{{ route('login') }}" class="product-card__wishlist" title="Sign in to save to wishlist"><i class="bi bi-heart"></i></a>
        @endauth
        <a href="{{ route('products.show', $product) }}">
            @if (! empty($product->images[0]))
                <img src="{{ $product->images[0] }}" alt="{{ $product->title }}" style="width:100%;height:100%;object-fit:cover">
            @else
                <div class="ph-icon-wrap" role="img" aria-label="{{ $product->title }}"><i class="bi bi-box-seam"></i></div>
            @endif
        </a>
    </div>
    <div class="product-card__body">
        <a href="{{ route('products.show', $product) }}" class="text-decoration-none text-dark">
            <div class="product-card__title">{{ $product->title }}</div>
        </a>
        <div class="mt-1">
            <span class="product-card__price-current">${{ number_format($product->price, 2) }}</span>
            @if ($product->compare_at_price && $product->compare_at_price > $product->price)
                <span class="product-card__price-original">${{ number_format($product->compare_at_price, 2) }}</span>
            @endif
        </div>
        @if ($isLowStock)
            <div class="product-card__stock-hint"><i class="bi bi-exclamation-circle-fill"></i> Only a few left</div>
        @elseif ($optionCount > 1)
            <div class="product-card__options-hint">{{ $optionCount }} options available</div>
        @endif
        @if ($firstVariant && ! $isOutOfStock)
            <form action="{{ route('cart.store') }}" method="POST">
                @csrf
                <input type="hidden" name="product_variant_id" value="{{ $firstVariant->id }}">
                <button type="submit" class="btn btn-accent w-100 mt-2 btn-sm"><i class="bi bi-cart-plus"></i> Add to Cart</button>
            </form>
        @else
            <button type="button" class="btn btn-accent w-100 mt-2 btn-sm" disabled>Out of Stock</button>
        @endif
    </div>
</div>