@props(['item'])

{{-- Demo data is pre-computed in ProductInventory component for consistency and performance --}}

<div class="group bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg hover:shadow-xl transition-all duration-200 overflow-hidden">
    <div class="flex flex-col lg:flex-row lg:h-72">

        {{-- Product Image with Badges --}}
        <div class="relative w-full lg:w-72 flex-shrink-0 bg-zinc-100 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-md bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm text-green-700 dark:text-green-400 shadow-lg border border-green-200 dark:border-green-800">
                        {{ $item->conditionGrade->name }}
                    </span>
                </div>
            @endif

            {{-- Popular Badge - Top Left --}}
            @if($item->is_popular ?? false)
                <div class="absolute top-3 left-3 z-10">
                    <span class="inline-flex items-center px-2 py-1 text-xs font-bold rounded-md bg-orange-500 text-white shadow-lg">
                        🔥 HOT DEAL
                    </span>
                </div>
            @endif

            {{-- Discount Badge --}}
            @if($item->has_discount ?? false)
                <div class="absolute top-12 left-3 z-10">
                    <span class="inline-flex items-center px-2 py-1 text-xs font-bold rounded-md bg-red-600 text-white shadow-lg">
                        {{ $item->discount_percent }}% OFF
                    </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-64 lg: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-300 group-hover:scale-105 cursor-pointer"
                    />
                </a>
            @else
                <div class="w-full h-64 lg:h-full flex items-center justify-center">
                    <div class="text-center text-zinc-400 dark:text-zinc-600">
                        <svg class="w-16 h-16 mx-auto mb-2" 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>
                        <p class="text-xs font-medium">No Image</p>
                    </div>
                </div>
            @endif

            {{-- CTA Buttons - Under Image --}}
            <div class="absolute bottom-3 left-3 right-3 z-10 flex items-center gap-1.5">
                <button
                    disabled
                    class="flex-1 px-3 py-2 bg-zinc-400 dark:bg-zinc-600 cursor-not-allowed text-white text-xs font-semibold rounded-md shadow-md opacity-60"
                    title="Coming soon">
                    Add to Cart
                </button>
                <a
                    href="{{ $item->detail_url ?? '/?item=' . $item->id }}"
                    class="flex-1 px-3 py-2 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white text-xs font-semibold rounded-md transition-all duration-200 hover:scale-[1.02] active:scale-100 shadow-md hover:shadow-lg text-center inline-block">
                    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-2 py-1.5 text-xs font-medium rounded-md bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm text-zinc-600 dark:text-zinc-400 whitespace-nowrap shadow-md">
                        📷 {{ $imageCount }}
                    </span>
                @endif
            </div>
        </div>

        {{-- Product Information --}}
        <div class="flex-1 p-4 flex flex-col justify-between min-w-0">

            <div>
                {{-- Category Line --}}
                <div class="flex items-center gap-2 text-xs mb-1">
                    @if($item->category)
                        <span class="text-zinc-500 dark:text-zinc-500">
                            {{ $item->category->name }}
                        </span>
                    @endif
                </div>

                {{-- Product Name with Brand --}}
                <h3 class="text-lg font-bold text-zinc-900 dark:text-white mb-2 line-clamp-2 leading-tight group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
                    @if($item->brand)
                        {{ $item->brand->name }}
                    @endif
                    {{ $item->product_name ?? 'Unknown Product' }}
                </h3>

                {{-- Star Rating and Reviews --}}
                <div class="mb-2">
                    <x-star-rating :rating="$item->demo_rating ?? 4.5" :count="$item->demo_reviews ?? 0" size="small" />
                </div>

                {{-- Trust Indicators --}}
                <div class="flex flex-wrap items-center gap-2 mb-3 text-xs">
                    @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-md 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 }}+ bought this month
                        </span>
                    @endif

                    <span class="inline-flex items-center px-2.5 py-1 text-xs font-semibold rounded-md {{ $item->computed_status['class'] }}">
                        {{ $item->computed_status['status'] }}
                    </span>

                    @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-md 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-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
                            </svg>
                            Fast Shipping
                        </span>
                    @endif
                </div>

                {{-- Key Specifications --}}
                @if($item->product_specs)
                    @php
                        $specs = $item->product_specs;
                        $displaySpecs = [];
                        $maxSpecs = 4;

                        // Extract first 4 specs (flatten if nested)
                        if (is_array($specs)) {
                            foreach ($specs as $categoryOrKey => $valueOrSpecs) {
                                if (count($displaySpecs) >= $maxSpecs) break;

                                if (is_array($valueOrSpecs)) {
                                    // Nested structure - take first few items
                                    foreach ($valueOrSpecs as $key => $value) {
                                        if (count($displaySpecs) >= $maxSpecs) break;
                                        if ($value) {
                                            $displaySpecs[$key] = is_array($value) ? implode(', ', $value) : $value;
                                        }
                                    }
                                } else {
                                    // Flat structure
                                    if ($valueOrSpecs) {
                                        $displaySpecs[$categoryOrKey] = is_array($valueOrSpecs) ? implode(', ', $valueOrSpecs) : $valueOrSpecs;
                                    }
                                }
                            }
                        }
                    @endphp

                    @if(!empty($displaySpecs))
                        <div class="mt-3 pt-3 border-t border-zinc-200 dark:border-zinc-700">
                            <div class="grid grid-cols-2 gap-x-4 gap-y-1.5 text-xs">
                                @foreach($displaySpecs as $key => $value)
                                    <div class="flex items-start gap-1.5">
                                        <span class="text-zinc-500 dark:text-zinc-500 font-medium whitespace-nowrap">{{ $key }}:</span>
                                        <span class="text-zinc-700 dark:text-zinc-300 truncate">{{ $value }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endif

            </div>

            {{-- Price & Savings --}}
            <div>
                <div class="flex items-end gap-2">
                    <div>
                        @if(($item->has_discount ?? false) && isset($item->original_price))
                            <div class="text-xs text-zinc-500 dark:text-zinc-500 line-through">
                                ${{ $item->original_price }}
                            </div>
                        @endif
                        <div class="text-xl font-bold text-zinc-900 dark:text-white">
                            {{ $item->computed_price }}
                        </div>
                    </div>
                    @if(($item->has_discount ?? false) && isset($item->savings))
                        <span class="mb-0.5 text-xs font-bold text-red-600 dark:text-red-400">
                            Save ${{ $item->savings }}
                        </span>
                    @endif
                </div>
            </div>
        </div>

        {{-- Media Gallery Column --}}
        @php
            // Resolve images for gallery
            // Always use inventory item images, whether grouped or individual
            $galleryImages = collect();

            // Check if we need to load images for a grouped item
            if (!$item->relationLoaded('images') && isset($item->model_id)) {
                // Grouped item - load images from first available inventory item
                $firstItem = \App\Models\InventoryItem::where('model_id', $item->model_id)
                    ->whereIn('status', ['in_stock', 'listed'])
                    ->with(['images' => function($q) {
                        $q->where('is_visible', true)->orderBy('display_order');
                    }, 'images.productImage'])
                    ->first();

                if ($firstItem) {
                    $item->setRelation('images', $firstItem->images);
                }
            }

            // Now process inventory images (works for both grouped and individual items)
            if ($item->relationLoaded('images')) {
                $primaryImage = $item->getPrimaryImage();

                // Get unique images, grouped by original source to avoid size variant duplicates
                $grouped = $item->images
                    ->where('is_visible', true)
                    ->groupBy(function($img) {
                        if ($img->is_shared && $img->productImage) {
                            // For shared product images, group by timestamp pattern
                            if (preg_match('/(\d+_\d+)(?:\.[^.]+)?$/', $img->productImage->original_filename ?? '', $matches)) {
                                return 'product_'.$matches[1];
                            }
                            return 'product_'.($img->product_image_id ?? 'unknown_'.$img->id);
                        } else {
                            // For inventory-specific images, group by original filename
                            return 'inventory_'.($img->original_filename ?? 'unknown_'.$img->id);
                        }
                    });

                // Select the best variant for each group (prefer 500x500)
                $galleryImages = $grouped->map(function($variants) {
                    $thumb = $variants->first(function($img) {
                        if ($img->is_shared && $img->productImage) {
                            return $img->productImage->width == 500 && $img->productImage->height == 500;
                        } else {
                            return $img->width == 500 && $img->height == 500;
                        }
                    });

                    if (!$thumb) {
                        // Fallback to largest
                        $thumb = $variants->sortByDesc(function($img) {
                            if ($img->is_shared && $img->productImage) {
                                return ($img->productImage->width ?? 0) * ($img->productImage->height ?? 0);
                            } else {
                                return ($img->width ?? 0) * ($img->height ?? 0);
                            }
                        })->first();
                    }

                    return $thumb;
                })->filter();

                // Exclude the primary image from gallery
                if ($primaryImage) {
                    $galleryImages = $galleryImages->filter(function($img) use ($primaryImage) {
                        return $img->id !== $primaryImage->id;
                    });
                }

                // Sort by display order
                $galleryImages = $galleryImages->sortBy('display_order');
            }
        @endphp

        @if($galleryImages->count() > 0)
            <div class="hidden lg:block w-96 border-l border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/30 p-2">
                <div class="grid grid-cols-4 gap-2">
                    @foreach($galleryImages->take(12) as $image)
                        @php
                            $imageUrl = $image->image_url ?? ($image->storage_path ? \Storage::url($image->storage_path) : null);
                            $imageId = $image->id ?? $image->image_id; // Handle different ID keys if needed
                        @endphp
                        @if($imageUrl)
                            <a
                                href="{{ route('home', ['item' => $item->id ?? $item->model_id, 'image' => $imageId]) }}"
                                wire:navigate
                                class="group relative aspect-square bg-zinc-100 dark:bg-zinc-800 rounded-md overflow-hidden cursor-pointer hover:ring-2 hover:ring-indigo-500 transition-all"
                            >
                                <img
                                    src="{{ $imageUrl }}"
                                    alt="{{ $image->alt_text ?? 'Product image' }}"
                                    loading="lazy"
                                    class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                />
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Specifications Column (Enhanced) --}}
        @if($item->product_specs)
            <div class="hidden xl:block w-80 border-l border-zinc-200 dark:border-zinc-700 bg-gradient-to-b from-zinc-50 to-white dark:from-zinc-800/50 dark:to-zinc-900 p-4 overflow-y-auto">
                <div class="flex items-center justify-between mb-3">
                    <h4 class="text-xs font-bold text-zinc-700 dark:text-zinc-300 uppercase tracking-wide">Key Specs</h4>
                    <span class="text-xs text-indigo-600 dark:text-indigo-400 font-medium cursor-pointer hover:underline">View All →</span>
                </div>

                <div class="space-y-3 text-xs">
                    @php
                        $specs = $item->product_specs;
                        $specCount = 0;
                        $maxSpecs = 10;
                    @endphp

                    @if(is_array($specs))
                        @foreach($specs as $categoryOrKey => $valueOrSpecs)
                            @if($specCount >= $maxSpecs) @break @endif

                            @if(is_array($valueOrSpecs))
                                {{-- Nested structure --}}
                                <div class="pb-2 border-b border-zinc-200 dark:border-zinc-700 last:border-0">
                                    <div class="text-xs font-bold text-indigo-600 dark:text-indigo-400 mb-2">
                                        {{ $categoryOrKey }}
                                    </div>
                                    @foreach($valueOrSpecs as $key => $value)
                                        @if($value && $specCount < $maxSpecs)
                                            <div class="flex justify-between gap-2 py-1 hover:bg-zinc-100 dark:hover:bg-zinc-800/50 px-1 -mx-1 rounded">
                                                <span class="font-semibold text-zinc-700 dark:text-zinc-300">{{ $key }}:</span>
                                                <span class="text-right text-zinc-600 dark:text-zinc-400">{{ is_array($value) ? implode(', ', $value) : $value }}</span>
                                            </div>
                                            @php $specCount++; @endphp
                                        @endif
                                    @endforeach
                                </div>
                            @else
                                {{-- Flat structure --}}
                                @if($valueOrSpecs && $specCount < $maxSpecs)
                                    <div class="flex justify-between gap-2 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800/50 px-1 -mx-1 rounded">
                                        <span class="font-semibold text-zinc-700 dark:text-zinc-300">{{ $categoryOrKey }}:</span>
                                        <span class="text-right text-zinc-600 dark:text-zinc-400">{{ is_array($valueOrSpecs) ? implode(', ', $valueOrSpecs) : $valueOrSpecs }}</span>
                                    </div>
                                    @php $specCount++; @endphp
                                @endif
                            @endif
                        @endforeach

                        @if($specCount >= $maxSpecs)
                            <div class="pt-2 text-center">
                                <span class="text-xs text-indigo-600 dark:text-indigo-400 font-medium cursor-pointer hover:underline">+ More Specifications</span>
                            </div>
                        @endif
                    @endif
                </div>

                {{-- Quick Actions --}}
                <div class="mt-4 pt-3 border-t border-zinc-200 dark:border-zinc-700">
                    <div class="space-y-2">
                        <button class="w-full text-left text-xs text-zinc-600 dark:text-zinc-400 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center gap-2 py-1">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m9.032 4.026a9.001 9.001 0 01-7.432 0m9.032-4.026A9.001 9.001 0 0112 3c-4.474 0-8.268 3.12-9.032 7.326m0 4.026A9.001 9.001 0 0012 21c4.474 0 8.268-3.12 9.032-7.326"/>
                            </svg>
                            Compare with similar
                        </button>
                        <button class="w-full text-left text-xs text-zinc-600 dark:text-zinc-400 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center gap-2 py-1">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 8.228a4 4 0 015.656 0M12 21a9 9 0 110-18 9 9 0 010 18z"/>
                            </svg>
                            Ask a question
                        </button>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>