@extends('layouts.app')

@section('title', $product->title.' — teeu')
@section('meta_description', \Illuminate\Support\Str::limit(strip_tags($product->displayDescription()), 150))

@php
    $seoCrumbs = [['name' => 'Главная', 'url' => route('home')]];
    foreach ($product->category?->ancestors()->defaultOrder()->get() ?? [] as $a) {
        $seoCrumbs[] = ['name' => $a->name, 'url' => route('catalog.category', $a->path)];
    }
    if ($product->category) {
        $seoCrumbs[] = ['name' => $product->category->name, 'url' => route('catalog.category', $product->category->path)];
    }
    $seoCrumbs[] = ['name' => $product->title, 'url' => $product->url()];
@endphp

@section('seo')
    @include('partials.seo.meta', [
        'canonical' => $product->url(),
        'ogType' => 'product',
        'ogTitle' => $product->title,
        'ogDescription' => \Illuminate\Support\Str::limit(strip_tags($product->displayDescription()), 200),
        'ogImage' => \App\Support\OgImage::from($product->primaryImage()?->largeUrl()),
    ])
    @include('partials.seo.json-ld', ['data' => \App\Support\Seo::productJsonLd($product)])
    @include('partials.seo.json-ld', ['data' => \App\Support\Seo::breadcrumbJsonLd($seoCrumbs)])
@endsection

@section('content')
{{-- Страница товара по макету редизайна («Карточка товара»): три колонки —
     галерея · название, характеристики и описание · панель покупки и продавец.
     На телефоне и планшете — одной колонкой в порядке: фото, название, покупка,
     подробности (grid-areas ниже). --}}
@php($onSale = $product->onSale())
@php($undeliverable = app(\App\Services\Geo\DeliveryScope::class)->blocksProduct($product))
@php($shownPrice = $onSale ? $product->salePrice() : (float) $product->price)
@php($oldPrice = $onSale ? (float) $product->price : ($product->old_price ? (float) $product->old_price : null))
@php($seller = $product->seller)
@php($displayDescription = $product->displayDescription())
@php($visibleChars = $product->visibleCharacteristics())
@php($shortChars = 8)
@php($isPreOrder = $product->availability === \App\Enums\Availability::PreOrder)

<nav class="flex flex-wrap items-center gap-1 text-[12.5px] text-[var(--color-muted)]">
    <a href="{{ route('home') }}" class="text-[var(--color-muted)] hover:text-[var(--color-primary)]">Главная</a>
    @foreach ($product->category?->ancestors()->defaultOrder()->get() ?? [] as $a)
        <span>/</span><a href="{{ route('catalog.category', $a->path) }}" class="text-[var(--color-muted)] hover:text-[var(--color-primary)]">{{ $a->name }}</a>
    @endforeach
    @if ($product->category)
        <span>/</span><a href="{{ route('catalog.category', $product->category->path) }}" class="text-[var(--color-muted)] hover:text-[var(--color-primary)]">{{ $product->category->name }}</a>
    @endif
</nav>

<div class="mt-4 grid items-start gap-x-6 gap-y-5 [grid-template-areas:'gallery'_'head'_'buy'_'details'] lg:grid-cols-[minmax(260px,440px)_minmax(0,1fr)_minmax(270px,340px)] lg:grid-rows-[auto_1fr] lg:[grid-template-areas:'gallery_head_buy'_'gallery_details_buy']">
    {{-- Gallery with click-to-zoom lightbox (#18) --}}
    <div class="[grid-area:gallery] lg:sticky lg:top-[116px]"
         x-data="{ active: 0, open: false, count: {{ $product->images->count() }},
                   next() { this.active = (this.active + 1) % this.count; },
                   prev() { this.active = (this.active - 1 + this.count) % this.count; } }"
         @keydown.window.escape="open = false"
         @keydown.window.arrow-right="if (open) next()" @keydown.window.arrow-left="if (open) prev()">
        {{-- Как и в карточке: фото целиком, без кропа по квадрату. --}}
        <div class="relative aspect-square overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white">
            @if ($product->images->isNotEmpty())
                @foreach ($product->images as $i => $image)
                    <img x-show="active === {{ $i }}" @click="open = true" src="{{ $image->largeUrl() }}" alt="{{ $product->title }}" class="h-full w-full cursor-zoom-in object-contain p-4">
                @endforeach
            @else
                <x-photo-placeholder :seed="$product->id" icon="h-10 w-10" />
            @endif
            @if ($onSale)
                <span class="absolute left-3 top-3 rounded-[var(--radius-sm)] bg-[var(--color-sale)] px-2 py-1 text-[13px] font-bold text-white">−{{ $product->discount_percent }}%</span>
            @endif
        </div>
        @if ($product->images->count() > 1)
            <div class="mt-2.5 flex gap-2 overflow-x-auto pb-1">
                @foreach ($product->images as $i => $image)
                    <button type="button" @click="active = {{ $i }}" aria-label="Фото {{ $i + 1 }}"
                            class="h-16 w-16 shrink-0 overflow-hidden rounded-[var(--radius-md)] bg-white transition"
                            :class="active === {{ $i }} ? 'border-2 border-[var(--color-primary)]' : 'border border-[var(--color-line)] opacity-70 hover:opacity-100'">
                        <img src="{{ $image->previewUrl() }}" class="h-full w-full object-contain p-1" alt="">
                    </button>
                @endforeach
            </div>
        @endif

        {{-- Lightbox overlay. Телепортируется в <body>: колонка галереи липкая
             (sticky), а липкий элемент создаёт свой контекст наложения — внутри
             него fixed-оверлей с любым z-index оказывался под панелью покупки и
             карточками ниже. --}}
        @if ($product->images->isNotEmpty())
            <template x-teleport="body">
            <div x-show="open" x-cloak @click="open = false"
                 class="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 p-4" x-transition.opacity>
                <button type="button" @click="open = false" class="absolute right-5 top-5 grid h-11 w-11 place-items-center rounded-full bg-white/10 text-white hover:bg-white/20" aria-label="Закрыть"><i data-lucide="x" class="h-6 w-6"></i></button>
                @if ($product->images->count() > 1)
                    <button type="button" @click.stop="prev()" class="absolute left-4 grid h-11 w-11 place-items-center rounded-full bg-white/10 text-white hover:bg-white/20" aria-label="Предыдущее фото"><i data-lucide="chevron-left" class="h-6 w-6"></i></button>
                    <button type="button" @click.stop="next()" class="absolute right-4 grid h-11 w-11 place-items-center rounded-full bg-white/10 text-white hover:bg-white/20" aria-label="Следующее фото"><i data-lucide="chevron-right" class="h-6 w-6"></i></button>
                @endif
                @foreach ($product->images as $i => $image)
                    <img x-show="active === {{ $i }}" @click.stop src="{{ $image->largeUrl() }}" alt="" class="max-h-[90vh] max-w-[90vw] rounded-[var(--radius-lg)] object-contain">
                @endforeach
            </div>
            </template>
        @endif
    </div>

    {{-- Название и строка «рейтинг · артикул · наличие». Рейтинг — продавца по
         отзывам на заказы; пока отзывов нет, звезды нет. --}}
    <div class="[grid-area:head]">
        <h1 class="break-words text-[19px] font-bold leading-[1.3] tracking-[-0.3px] text-[var(--color-ink)] sm:text-[21px]">{{ $product->title }}</h1>
        <div class="mt-2.5 flex flex-wrap items-center gap-x-3.5 gap-y-1.5 text-[13px] text-[var(--color-muted)]">
            @if ($seller->reviews_count > 0)
                <a href="{{ route('seller.card', $seller) }}#reviews" class="text-[var(--color-muted)] hover:text-[var(--color-primary)]">
                    <span class="text-[var(--color-rating)]">★</span>
                    <span class="font-semibold text-[var(--color-ink)]">{{ number_format($seller->rating_avg, 1) }}</span>
                    · {{ $seller->reviews_count }} {{ \App\Support\Ru::plural($seller->reviews_count, ['отзыв', 'отзыва', 'отзывов']) }} о продавце
                </a>
            @endif
            @if (filled($product->vendor_code))
                <span>арт. {{ $product->vendor_code }}</span>
            @endif
            {{-- Цвета наличия — по UI-kit: «В наличии» синим, «Под заказ» зелёным. --}}
            <span class="rounded-[var(--radius-sm)] px-2 py-0.5 font-semibold {{ $isPreOrder ? 'bg-[var(--color-success-soft)] text-[var(--color-success)]' : 'bg-[var(--color-primary-soft)] text-[var(--color-primary)]' }}">{{ $product->availability->label() }}</span>
        </div>
    </div>

    {{-- Панель покупки — всё, что нужно для решения о покупке.

         Порядок отражает важность: цена и её свежесть, под ними одно основное
         действие (синяя кнопка здесь ровно одна — та, ради которой человек сюда
         пришёл), рядом избранное; ниже — доставка и условия продавца, затем тихие
         ссылки. Продавец — отдельной карточкой: это про доверие, а не про покупку. --}}
    <div class="space-y-3 [grid-area:buy] lg:sticky lg:top-[116px]">
        <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-[18px] shadow-[var(--shadow-sticky)]">
            <div class="flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
                <span class="text-[28px] font-extrabold tracking-[-0.6px] text-[var(--color-ink)]">{{ number_format($shownPrice, 0, '.', ' ') }} ₽</span>
                @if ($oldPrice)
                    <s class="text-sm text-[var(--color-disabled)]">{{ number_format($oldPrice, 0, '.', ' ') }} ₽</s>
                @endif
            </div>

            {{-- Данные из выгрузки продавца актуальны на дату последней успешной
                 синхронизации фида (товар присутствовал в ней — source_missing_at пуст). --}}
            @if ($product->source_missing_at === null && $product->ymlFeed?->last_success_at)
                <div class="mt-1 text-[12.5px] text-[var(--color-muted)]" title="Данные обновляются из выгрузки продавца по расписанию">
                    Актуально на {{ $product->ymlFeed->last_success_at->isoFormat('D MMMM YYYY') }}
                </div>
            @endif

            @if ($onSale && $product->sale_ends_at && ! $undeliverable)
                <div x-data="dealCountdown('{{ $product->sale_ends_at->toIso8601String() }}')" x-show="text" x-cloak
                     class="mt-2 inline-flex items-center gap-1.5 rounded-[var(--radius-sm)] bg-[var(--color-sale-soft)] px-2.5 py-1 text-[12.5px] font-bold text-[var(--color-sale)]">
                    <i data-lucide="clock" class="h-3.5 w-3.5"></i> До конца акции: <span x-text="text"></span>
                </div>
            @endif

            {{-- Город ставим отдельно, а не в предлог: склонять названия мы не
                 умеем, и «Доставка в Уфа» бросается в глаза каждому, кто это
                 читает. Так падеж не нужен вовсе. --}}
            @if ($undeliverable)
                <p class="mt-3.5 flex items-start gap-1.5 rounded-[var(--radius-md)] bg-[var(--color-warning-soft)] px-3 py-2 text-[13px] font-semibold text-[var(--color-warning)]">
                    <i data-lucide="truck" class="mt-0.5 h-4 w-4 shrink-0"></i>
                    <span>Продавец не доставляет этот товар в выбранный город <span class="font-normal">({{ $city->name }})</span>.</span>
                </p>
            @endif

            <div class="mt-3.5 flex gap-2">
                @unless ($undeliverable)
                    <button type="button" x-data="{ done: false }"
                            @click="teeuAddToCart({{ $product->id }}).then(ok => { if (ok) { done = true; setTimeout(() => done = false, 1400) } })"
                            class="h-11 flex-1 rounded-[var(--radius-md)] text-sm font-bold text-white transition"
                            :class="done ? 'bg-[var(--color-success)]' : 'bg-[var(--color-primary)] hover:bg-[var(--color-primary-dark)]'">
                        <span x-text="done ? '✓ В корзине' : 'В корзину'">В корзину</span>
                    </button>
                @endunless
                <button type="button" x-data="{ on: {{ $isFavorite ? 'true' : 'false' }} }"
                        @click="teeuToggleFavorite({{ $product->id }}).then(a => { if (a !== null) on = a })"
                        class="grid h-11 shrink-0 place-items-center rounded-[var(--radius-md)] border bg-white transition {{ $undeliverable ? 'w-full' : 'w-11' }}"
                        :class="on ? 'border-[var(--color-sale)] text-[var(--color-sale)]' : 'border-[var(--color-line)] text-[var(--color-slate)] hover:border-[var(--color-sale)]'"
                        :aria-pressed="on" :aria-label="on ? 'Убрать из избранного' : 'В избранное'" :title="on ? 'В избранном' : 'В избранное'">
                    <i data-lucide="heart" class="h-[18px] w-[18px]" :class="on ? 'fill-current' : ''"></i>
                </button>
            </div>

            <div class="mt-3.5 flex flex-col gap-[7px] border-t border-[var(--color-divider)] pt-3 text-[13px]">
                @if (! $undeliverable && $deliveryDays)
                    <div class="flex justify-between gap-3">
                        <span class="text-[var(--color-muted)]">Доставка · {{ $city->name }}</span>
                        <span class="text-right font-semibold text-[var(--color-ink)]">{{ \App\Services\Delivery\DeliveryEstimator::label($deliveryDays) }}</span>
                    </div>
                @endif
                {{-- Порог продавца — здесь, а не только в корзине: узнать о нём после
                     того, как набрал товар на 800 ₽ у оптовика «от 5 000», обиднее,
                     чем до. --}}
                @if ($minimumOrder = $seller->minimumOrderAmount())
                    <div class="flex justify-between gap-3">
                        <span class="text-[var(--color-muted)]">Минимальный заказ у продавца</span>
                        <span class="whitespace-nowrap text-right font-semibold text-[var(--color-ink)]">{{ \App\Services\Commerce\MinimumOrderService::money($minimumOrder) }} ₽</span>
                    </div>
                @endif
                <div class="flex justify-between gap-3">
                    <span class="text-[var(--color-muted)]">Оплата</span>
                    <span class="text-right font-semibold text-[var(--color-ink)]">продавцу напрямую</span>
                </div>
            </div>

            {{-- Вторичные — тихими ссылками, не кнопками. Уход на чужой сайт — не
                 шаг покупки, а выход из неё: внешняя ссылка, новая вкладка,
                 неиндексируемая, без утечки реферера; только если фид разрешил. --}}
            <div class="mt-2.5 flex flex-col items-start gap-1.5">
                @unless ($undeliverable)
                    <button type="button" x-data="{ on: {{ $isPriceDropOn ? 'true' : 'false' }} }"
                            @click="teeuTogglePriceDrop({{ $product->id }}).then(a => { if (a !== null) on = a })"
                            class="inline-flex items-center gap-1.5 text-[12.5px] font-medium text-[var(--color-primary)] transition hover:text-[var(--color-primary-dark)]">
                        <i data-lucide="bell" class="h-3.5 w-3.5" :class="on ? 'fill-current' : ''"></i>
                        <span x-text="on ? 'Следим за ценой — отменить' : 'Уведомить о снижении цены'">Уведомить о снижении цены</span>
                    </button>
                @endunless
                @if ($product->ymlFeed?->showsSourceUrl() && $product->source_url)
                    <a href="{{ $product->source_url }}" target="_blank" rel="nofollow noopener noreferrer"
                       class="inline-flex items-center gap-1.5 text-[12.5px] font-medium text-[var(--color-secondary)] transition hover:text-[var(--color-primary)]">
                        <i data-lucide="external-link" class="h-3.5 w-3.5"></i>
                        Смотреть на сайте продавца
                    </a>
                @endif
            </div>
        </div>

        <a href="{{ route('seller.card', $seller) }}"
           class="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white px-4 py-3.5 transition hover:border-[var(--color-line-strong)]">
            @if ($seller->logoUrl())
                {{-- Лого может быть прямоугольным — object-contain вписывает целиком, не обрезая. --}}
                <img src="{{ $seller->logoUrl() }}" class="h-[38px] w-[38px] shrink-0 rounded-full border border-[var(--color-line)] bg-white object-contain p-0.5" alt="">
            @else
                <span class="grid h-[38px] w-[38px] shrink-0 place-items-center rounded-full bg-[var(--color-primary-soft)] text-[15px] font-extrabold text-[var(--color-primary)]">{{ mb_strtoupper(mb_substr($seller->public_name, 0, 1)) }}</span>
            @endif
            <span class="min-w-0 flex-1">
                <span class="block truncate text-[13.5px] font-bold text-[var(--color-ink)]">{{ $seller->public_name }}</span>
                <span class="block text-xs text-[var(--color-muted)]">
                    @if ($seller->reviews_count > 0)
                        <span class="text-[var(--color-rating)]">★</span> {{ number_format($seller->rating_avg, 1) }} · {{ $seller->reviews_count }} {{ \App\Support\Ru::plural($seller->reviews_count, ['отзыв', 'отзыва', 'отзывов']) }} ·
                    @endif
                    на teeu с {{ $seller->created_at?->year }}
                </span>
            </span>
            <i data-lucide="chevron-right" class="h-4 w-4 shrink-0 text-[var(--color-disabled)]"></i>
        </a>

        <x-chat-start :seller="$seller" :product="$product" />
    </div>

    {{-- Характеристики (первые несколько) и описание. Полный список — ниже,
         отдельным блоком, если характеристик больше. Prefer the unique AI
         description when present (ТЗ §16). --}}
    <div class="min-w-0 space-y-3.5 [grid-area:details]">
        @if ($visibleChars->isNotEmpty())
            <div class="border-t border-[var(--color-line)] pt-3.5">
                <h2 class="mb-2.5 text-[17px] font-extrabold tracking-[-0.2px] text-[var(--color-ink)]">Характеристики</h2>
                @include('product.partials.characteristics', ['chars' => $visibleChars->take($shortChars)])
                @if ($visibleChars->count() > $shortChars)
                    <a href="#specs" class="mt-2.5 inline-block text-[13px] font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)]">Все характеристики ({{ $visibleChars->count() }}) ↓</a>
                @endif
            </div>
        @endif

        @if ($displayDescription)
            <div class="border-t border-[var(--color-line)] pt-3.5"
                 x-data="{ long: false, expanded: false }" x-init="$nextTick(() => long = $refs.text.scrollHeight > $refs.text.clientHeight + 4)">
                <h2 class="mb-2 text-[17px] font-extrabold tracking-[-0.2px] text-[var(--color-ink)]">Описание</h2>
                <p x-ref="text" class="text-[13.5px] leading-[1.55] text-[var(--color-slate)]" :class="expanded ? '' : 'line-clamp-[10]'">{!! nl2br(e($displayDescription)) !!}</p>
                <button type="button" x-show="long" x-cloak @click="expanded = !expanded"
                        class="mt-1.5 text-[13px] font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)]">
                    <span x-text="expanded ? 'Свернуть' : 'Показать полностью'"></span>
                </button>
            </div>
        @endif
    </div>
</div>

@if ($visibleChars->count() > $shortChars)
    <section id="specs" class="mt-10 scroll-mt-[120px]">
        <h2 class="mb-3.5 text-xl font-extrabold tracking-[-0.4px] text-[var(--color-ink)]">Все характеристики</h2>
        <div class="max-w-[880px] rounded-[var(--radius-lg)] border border-[var(--color-line)] px-5 py-3">
            @include('product.partials.characteristics', ['chars' => $visibleChars, 'divided' => true])
        </div>
    </section>
@endif

{{-- Имя переменной цикла — «своё», не общеупотребительное: после @foreach она
     остаётся в области видимости и уезжает в layout, а оттуда в его партиалы
     (см. partials/auth-form). Короткий $heading там уже ломал заголовок модалки. --}}
@foreach (['Другие товары продавца' => $otherProducts, 'Похожие товары' => $similar] as $blockTitle => $list)
    @if ($list->isNotEmpty())
        <section class="mt-10">
            <h2 class="mb-3.5 text-xl font-extrabold tracking-[-0.4px] text-[var(--color-ink)]">{{ $blockTitle }}</h2>
            {{-- 12 товаров — ровно два ряда при 2, 3, 4 и 6 колонках (5 колонок не берём). --}}
            <div class="grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3 md:grid-cols-4 xl:grid-cols-6">
                @foreach ($list as $item)
                    <x-product-card :product="$item" />
                @endforeach
            </div>
        </section>
    @endif
@endforeach
@endsection