@extends('layouts.shop')

@section('title', $product->name . ' | BasePro Shop')
@section('meta_description', Str::limit($product->description, 160))

@section('content')
<div class="container mx-auto px-4 md:px-8 py-12">
    <!-- Breadcrumbs -->
    <nav class="flex items-center text-sm text-muted-foreground mb-8 overflow-x-auto whitespace-nowrap">
        <a href="{{ route('shop.landing') }}" class="hover:text-primary transition-colors flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
            Inicio
        </a>
        
        @if(!empty($breadcrumbs))
            @foreach($breadcrumbs as $crumb)
                <span class="mx-2 text-muted-foreground/50">/</span>
                <a href="{{ $crumb['url'] }}" class="hover:text-primary transition-colors font-medium text-foreground">
                    {{ $crumb['name'] }}
                </a>
            @endforeach
        @endif
        
        <!-- Categoría final (si no hay breadcrumbs intermedios) o separador extra -->
        @if(isset($product->category) && empty($breadcrumbs))
             <span class="mx-2 text-muted-foreground/50">/</span>
             <a href="{{ route('shop.catalog', ['category' => $product->category->slug]) }}" class="hover:text-primary transition-colors font-medium text-foreground">
                {{ $product->category->name }}
             </a>
        @endif
    </nav>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
        
        <!-- Media Gallery (Alpine.js interaction for lightness) -->
        <div class="space-y-4" x-data="{ activeImage: '{{ $product->image_path }}' }">
            <div class="aspect-square bg-muted rounded-xl overflow-hidden border">
                <img :src="activeImage" alt="{{ $product->name }}" class="w-full h-full object-cover">
            </div>
            
            @if(!empty($product->gallery))
                <div class="flex gap-4 overflow-x-auto pb-2">
                    <!-- Main Thumbnail -->
                    <button 
                        @click="activeImage = '{{ $product->image_path }}'" 
                        class="relative w-24 h-24 flex-shrink-0 cursor-pointer rounded-md overflow-hidden border-2"
                        :class="activeImage === '{{ $product->image_path }}' ? 'border-primary' : 'border-transparent'"
                    >
                        <img src="{{ $product->image_path }}" class="w-full h-full object-cover">
                    </button>

                    <!-- Gallery Thumbnails -->
                    @foreach($product->gallery ?? [] as $img)
                        <button 
                            @click="activeImage = '{{ $img }}'" 
                            class="relative w-24 h-24 flex-shrink-0 cursor-pointer rounded-md overflow-hidden border-2"
                            :class="activeImage === '{{ $img }}' ? 'border-primary' : 'border-transparent'"
                        >
                            <img src="{{ $img }}" class="w-full h-full object-cover">
                        </button>
                    @endforeach
                </div>
            @endif
        </div>

        <!-- Product Info -->
        <div class="space-y-8">
            <div>
                <div class="flex items-center gap-2 text-sm text-muted-foreground mb-2">
                    @if($product->brand)
                        <span class="font-semibold text-foreground">{{ $product->brand->name }}</span>
                    @endif
                    <span>•</span><span>SKU: {{ $product->sku }}</span>
                </div>
                
                <h1 class="text-3xl md:text-4xl font-bold  mb-4 text-foreground">{{ $product->name }}</h1>
                
                <div class="flex items-end gap-4">
                    <span class="text-3xl font-bold text-primary">
                        ${{ number_format($product->price, 2) }}
                    </span>
                    @if($product->compare_price)
                        <span class="text-xl text-muted-foreground line-through mb-1">
                            ${{ number_format($product->compare_price, 2) }}
                        </span>
                        <div class="mb-2 inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80">
                            Oferta
                        </div>
                    @endif
                </div>
            </div>

            <hr class="border-border">

            <div class="space-y-4">
                <p class="text-muted-foreground leading-relaxed">
                    {{ $product->description }}
                </p>
                
                <!-- Colores -->
                @php
                    $colors = $product->attributes->where('type', 'color');
                @endphp
                
                @if($colors->isNotEmpty())
                    <div class="space-y-3">
                        <span class="text-sm font-medium">Colores Disponibles:</span>
                        <div class="flex gap-2">
                            @foreach($colors as $color)
                                <div 
                                    class="w-8 h-8 rounded-full border-2 border-muted shadow-sm ring-1 ring-border"
                                    style="background-color: {{ $color->value['hex'] ?? '#ccc' }}"
                                    title="{{ $color->name }}"
                                ></div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Stock -->
                <div class="px-4 py-3 bg-muted/30 rounded-lg flex items-center gap-3 w-fit">
                    @if($product->stock > 0)
                        <div class="w-2 h-2 rounded-full bg-green-500"></div>
                        <span class="text-sm font-medium text-green-700">Disponibilidad en Stock ({{ $product->stock }})</span>
                    @else
                        <div class="w-2 h-2 rounded-full bg-red-500"></div>
                        <span class="text-sm font-medium text-red-700">Agotado</span>
                    @endif
                </div>
            </div>

            <div class="flex gap-4 pt-4">
                <button 
                    @click="$dispatch('add-to-cart', { 
                        product: { 
                            id: {{ $product->id }}, 
                            name: '{{ addslashes($product->name) }}', 
                            price: {{ $product->price }}, 
                            image: '{{ $product->image_path }}',
                            stock: {{ $product->stock }}
                        } 
                    })"
                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md px-8 flex-1" 
                    {{ $product->stock <= 0 ? 'disabled' : '' }}>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
                    {{ $product->stock > 0 ? 'Agregar al Carrito' : 'Sin Stock' }}
                </button>
            </div>
            
            <!-- Specs Table -->
            @if(!empty($product->specs))
                <div class="pt-8">
                    <h3 class="font-semibold text-lg mb-4">Especificaciones Técnicas</h3>
                    <div class="rounded-lg border overflow-hidden">
                        <table class="w-full text-sm text-left">
                            <tbody>
                                @foreach($product->specs as $key => $value)
                                    <tr class="{{ $loop->even ? 'bg-muted/30' : 'bg-transparent' }}">
                                        <td class="px-4 py-3 font-medium border-r w-1/3 text-muted-foreground">{{ $key }}</td>
                                        <td class="px-4 py-3">{{ $value }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
<!-- Alpine.js CDN for lightweight interactions -->
<script src="//unpkg.com/alpinejs" defer></script>
@endsection