@php
    $seoDescription = trim(strip_tags($product->product_description ?? ($product->name . ' — wholesale ordering')));
    $seoCanonical = url()->current();
    $seoImage = $product->image_url ?? ($settings->storefront_banner_image_url ?? null);
    $currency = config('constants.currency_symbol', '₹');
@endphp
@extends('b2bportal::storefront.layouts.app', [
    'seoDescription' => $seoDescription,
    'seoCanonical' => $seoCanonical,
    'seoImage' => $seoImage,
])

@section('title', $product->name . ' — ' . ($business->name ?? 'B2B Portal'))

@push('head')
<script type="application/ld+json">
@php
    $offers = collect($productView['cells'] ?? [])
        ->flatMap(fn ($sizes) => collect($sizes)->values())
        ->filter(fn ($c) => ($c['is_active'] ?? false));
    $prices = $offers->pluck('price')->filter(fn ($p) => $p > 0)->all();
    $ld = [
        '@context' => 'https://schema.org/',
        '@type' => 'Product',
        'name' => $product->name,
        'sku' => $product->sku,
        'description' => \Illuminate\Support\Str::limit($seoDescription, 300),
    ];
    if ($seoImage) $ld['image'] = $seoImage;
    if (! empty($prices)) {
        $ld['offers'] = [
            '@type' => 'AggregateOffer',
            'priceCurrency' => 'INR',
            'lowPrice' => (float) min($prices),
            'highPrice' => (float) max($prices),
            'offerCount' => count($prices),
            'availability' => $offers->contains(fn ($c) => ($c['stock'] ?? 0) > 0)
                ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock',
        ];
    }
@endphp
{!! json_encode($ld, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
</script>
@endpush

@section('content')
    <div x-init="$dispatch('b2b:product-viewed', { product_id: {{ $product->id }}, sku: @js($product->sku) })"></div>
    <nav class="text-sm text-ink-500 mb-4">
        <a href="{{ url('/b2bportal/shop/'.$apiToken) }}" class="hover:text-brand-700">All</a>
        @if($product->category)
            <span class="mx-1">/</span>
            <a href="{{ url('/b2bportal/shop/'.$apiToken.'/category/'.($product->category->slug ?? $product->category->id)) }}"
               class="hover:text-brand-700">{{ $product->category->name }}</a>
        @endif
        <span class="mx-1">/</span>
        <span class="text-ink-800">{{ $product->name }}</span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div x-data="{ current: @js($productView['gallery'][0] ?? ($product->image_url ?? '')) }">
            <template x-if="current">
                <img :src="current" alt="{{ $product->name }}"
                     class="w-full rounded-lg border border-ink-100 cursor-zoom-in"
                     x-on:click="$dispatch('b2b:zoom', { src: current, label: @js($product->name) })">
            </template>
            <template x-if="!current">
                <div class="aspect-square rounded-lg bg-ink-50 flex items-center justify-center text-6xl">👕</div>
            </template>

            @if(count($productView['gallery'] ?? []) > 1)
                <div class="mt-3 flex flex-wrap gap-2">
                    @foreach($productView['gallery'] as $img)
                        <button type="button"
                                x-on:click="current = @js($img)"
                                class="w-16 h-16 rounded border overflow-hidden focus:outline-none"
                                :class="current === @js($img) ? 'border-brand-500 ring-2 ring-brand-200' : 'border-ink-200 hover:border-brand-300'">
                            <img src="{{ $img }}" class="w-full h-full object-cover">
                        </button>
                    @endforeach
                </div>
            @endif

            @if(!empty($productView['colorImages']))
                <div class="mt-4">
                    <div class="text-xs uppercase tracking-wide text-ink-500 mb-2">Available colours</div>
                    <div class="flex flex-wrap gap-2">
                        @foreach($productView['colorImages'] as $colorName => $img)
                            <button type="button"
                                    title="{{ $colorName }}"
                                    x-on:click="current = @js($img)"
                                    class="group flex flex-col items-center gap-1">
                                <img src="{{ $img }}" alt="{{ $colorName }}"
                                     class="w-10 h-10 rounded-full object-cover border-2"
                                     :class="current === @js($img) ? 'border-brand-500' : 'border-ink-200 group-hover:border-brand-300'">
                                <span class="text-[10px] text-ink-500">{{ $colorName }}</span>
                            </button>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
        <div>
            <h1 class="text-2xl font-bold text-ink-900">{{ $product->name }}</h1>
            <p class="text-sm text-ink-500 mt-1">SKU: {{ $product->sku }}</p>
            @if(!empty($product->product_description))
                <div class="mt-4 text-ink-700 leading-relaxed">
                    {!! nl2br(e(strip_tags($product->product_description))) !!}
                </div>
            @endif
        </div>
    </div>

    <hr class="my-8 border-ink-100">

    @include('b2bportal::storefront.components.product-matrix', $productView + ['tiers' => $tiers])
@endsection