@props(['item'])

{{-- Modern Product Card - Vertical Layout --}}
<div class="group bg-white dark:bg-zinc-900 rounded-2xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-zinc-100 dark:border-zinc-800 hover:border-indigo-200 dark:hover:border-indigo-800">

    {{-- Product Image with Badges --}}
    <div class="relative w-full aspect-square overflow-hidden bg-zinc-50 dark:bg-zinc-800">
        @php
            $primaryImage = $item->getPrimaryImage();
        @endphp

        {{-- Condition Badge - Top Right --}}
        @if($item->conditionGrade)
            <div class="absolute top-3 right-3 z-10">
                <span class="inline-flex items-center px-2.5 py-1 text-xs font-bold rounded-lg bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm text-emerald-600 dark:text-emerald-400 shadow-lg border border-emerald-100 dark:border-emerald-800">
                    {{ $item->conditionGrade->name }}
                </span>
            </div>
        @endif

        {{-- Hot Deal Badge --}}
        @if($item->is_popular ?? false)
            <div class="absolute top-3 left-3 z-10">
                <span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-bold rounded-lg bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-lg">
                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"/>
                    </svg>
                    HOT
                </span>
            </div>
        @endif

        {{-- Discount Badge --}}
        @if($item->has_discount ?? false)
            <div class="absolute bottom-3 left-3 z-10">
                <span class="inline-flex items-center px-2.5 py-1 text-xs font-bold rounded-lg bg-red-600 text-white shadow-lg">
                    -{{ $item->discount_percent }}%
                </span>
            </div>
        @endif

        @if($item->display_image_url || ($primaryImage && $primaryImage->image_url))
            <a href="{{ $item->detail_url ?? '/?item=' . $item->id }}" class="block w-full h-full">
                <img
                    src="{{ $item->display_image_url ?? $primaryImage->image_url }}"
                    alt="{{ $primaryImage->alt_text ?? ($item->product_name ?? 'Product') }}"
                    loading="lazy"
                    class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                />
            </a>
        @else
            <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-800 dark:to-zinc-700">
                <div class="text-center text-zinc-400 dark:text-zinc-500">
                    <svg class="w-16 h-16 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </div>
            </div>
        @endif

        {{-- Quick Actions - Hidden by default, shown on hover --}}
        <div class="absolute inset-x-3 bottom-3 z-10 flex items-center gap-2 opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all duration-300">
            <a
                href="{{ $item->detail_url ?? '/?item=' . $item->id }}"
                class="flex-1 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white text-sm font-semibold rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl text-center"
            >
                View Details
            </a>
            @php
                $imageCount = method_exists($item, 'getGroupedVisibleImages') ? $item->getGroupedVisibleImages()->count() : 0;
            @endphp
            @if($imageCount > 1)
                <span class="inline-flex items-center gap-1 px-3 py-2.5 text-sm font-medium rounded-xl bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm text-zinc-600 dark:text-zinc-400 shadow-lg whitespace-nowrap">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    {{ $imageCount }}
                </span>
            @endif
        </div>
    </div>

    {{-- Card Content --}}
    <div class="p-4">

        {{-- Category --}}
        @if($item->subcategory)
            <div class="mb-2">
                <span class="text-xs font-medium text-indigo-600 dark:text-indigo-400">
                    {{ $item->subcategory->name }}
                </span>
            </div>
        @endif

        {{-- Product Name with Brand --}}
        <h3 class="text-sm font-semibold text-zinc-900 dark:text-white mb-2 line-clamp-2 leading-snug group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors min-h-[2.5rem]">
            @if($item->brand)
                <span class="font-bold">{{ $item->brand->name }}</span>
            @endif
            {{ $item->product_name ?? 'Unknown Product' }}
        </h3>

        {{-- Star Rating --}}
        <div class="flex items-center gap-2 mb-3">
            <div class="flex items-center">
                @php
                    $rating = $item->demo_rating ?? 4.5;
                    $fullStars = floor($rating);
                    $hasHalf = ($rating - $fullStars) >= 0.5;
                @endphp
                @for($i = 0; $i < 5; $i++)
                    @if($i < $fullStars)
                        <svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                    @elseif($i == $fullStars && $hasHalf)
                        <svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
                            <defs>
                                <linearGradient id="halfGrad{{ $item->id ?? rand() }}">
                                    <stop offset="50%" stop-color="currentColor"/>
                                    <stop offset="50%" stop-color="#d4d4d8"/>
                                </linearGradient>
                            </defs>
                            <path fill="url(#halfGrad{{ $item->id ?? rand() }})" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                    @else
                        <svg class="w-4 h-4 text-zinc-300 dark:text-zinc-600" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                    @endif
                @endfor
            </div>
            @if(($item->demo_reviews ?? 0) > 0)
                <span class="text-xs text-zinc-500 dark:text-zinc-400">({{ $item->demo_reviews }})</span>
            @endif
        </div>

        {{-- Trust Indicators --}}
        <div class="flex flex-wrap items-center gap-2 mb-3">
            @if(($item->demo_sold ?? 0) > 0)
                <span class="inline-flex items-center gap-1 px-2 py-1 bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 rounded-lg text-xs font-medium">
                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3z"/>
                    </svg>
                    {{ $item->demo_sold }}+ sold
                </span>
            @endif

            @if($item->has_fast_shipping ?? false)
                <span class="inline-flex items-center gap-1 px-2 py-1 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 rounded-lg text-xs font-medium">
                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
                        <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3z"/>
                    </svg>
                    Fast
                </span>
            @endif
        </div>

        {{-- Price Section --}}
        <div class="pt-3 border-t border-zinc-100 dark:border-zinc-800">
            <div class="flex items-end justify-between gap-2 mb-3">
                <div>
                    @if(($item->has_discount ?? false) && isset($item->original_price))
                        <div class="flex items-center gap-2">
                            <span class="text-lg font-bold text-zinc-900 dark:text-white">
                                {{ $item->computed_price }}
                            </span>
                            <span class="text-xs text-zinc-500 dark:text-zinc-500 line-through">
                                ${{ $item->original_price }}
                            </span>
                        </div>
                    @else
                        <span class="text-lg font-bold text-zinc-900 dark:text-white">
                            {{ $item->computed_price }}
                        </span>
                    @endif
                </div>

                {{-- Availability Status --}}
                <span class="text-xs font-medium {{ $item->computed_status['class'] }}">
                    {{ $item->computed_status['status'] }}
                </span>
            </div>

            {{-- Add to Cart Button --}}
            @php
                $availableCount = $item->available_count ?? 1;
                $firstInventoryId = $item->first_inventory_id ?? $item->id ?? null;
            @endphp
            
            @if($availableCount == 1 && $firstInventoryId)
                {{-- Single item - Add directly to cart --}}
                <button 
                    wire:click="addToCart({{ $firstInventoryId }})"
                    wire:loading.attr="disabled"
                    wire:loading.class="opacity-50 cursor-not-allowed"
                    class="w-full px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-xl transition-all shadow-sm hover:shadow-md disabled:opacity-50"
                >
                    <span wire:loading.remove wire:target="addToCart({{ $firstInventoryId }})">
                        <span class="flex items-center justify-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                            </svg>
                            Add to Cart
                        </span>
                    </span>
                    <span wire:loading wire:target="addToCart({{ $firstInventoryId }})">Adding...</span>
                </button>
            @else
                {{-- Multiple items - Link to detail page to choose --}}
                <a 
                    href="{{ $item->detail_url ?? '/?item=' . $item->model_id }}"
                    class="block w-full px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-xl transition-all shadow-sm hover:shadow-md text-center"
                >
                    <span class="flex items-center justify-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                        View Options ({{ $availableCount }})
                    </span>
                </a>
            @endif
        </div>
    </div>
</div>