@extends('layouts.app')

@php
    // Breadcrumbs shared 1:1 by the visible nav and the BreadcrumbList JSON-LD.
    $sellerCrumbs = [
        ['name' => 'Главная', 'url' => route('home')],
        ['name' => $seller->public_name, 'url' => route('seller.card', $seller)],
    ];
    if ($currentCategory) {
        $sellerCrumbs[] = ['name' => $currentCategory->name, 'url' => route('seller.card.category', [$seller, $currentCategory->slug])];
    }
    // Non-empty, unique description reused across meta, OG and JSON-LD.
    $sellerSeoDescription = $seller->seoDescription($products->total());
@endphp

@section('title', ($currentCategory ? $currentCategory->name.' — ' : '').$seller->public_name.' — teeu')
@section('meta_description', $sellerSeoDescription)

@section('seo')
    @include('partials.seo.meta', [
        'canonical' => $currentCategory ? route('seller.card.category', [$seller, $currentCategory->slug]) : route('seller.card', $seller),
        'ogType' => 'profile',
        'ogTitle' => ($currentCategory ? $currentCategory->name.' — ' : '').$seller->public_name,
        'ogDescription' => $sellerSeoDescription,
        'ogImage' => \App\Support\OgImage::from($seller->logoUrl()),
    ])
    @include('partials.seo.json-ld', ['data' => \App\Support\Seo::storeJsonLd($seller, $products->total())])
    @include('partials.seo.json-ld', ['data' => \App\Support\Seo::breadcrumbJsonLd($sellerCrumbs)])
@endsection

@section('content')
{{-- Витрина продавца по макету редизайна («Страница продавца»): шапка-панель с
     контактами пилюлями и «Написать продавцу» справа, «О продавце», товары с
     колонкой категорий магазина слева, отзывы. --}}
<div class="w-full">
    {{-- Breadcrumbs (ТЗ §19.1) — mirror of the BreadcrumbList JSON-LD above. --}}
    <nav class="mb-3.5 flex flex-wrap items-center gap-1 text-[12.5px] text-[var(--color-muted)]">
        @foreach ($sellerCrumbs as $crumb)
            @if (! $loop->last)
                <a href="{{ $crumb['url'] }}" class="text-[var(--color-muted)] hover:text-[var(--color-primary)]">{{ $crumb['name'] }}</a>
                <span>/</span>
            @else
                <span class="text-[var(--color-secondary)]">{{ $crumb['name'] }}</span>
            @endif
        @endforeach
    </nav>

    {{-- Шапка магазина. На телефоне логотип и название стоят в ряд, контакты и
         «Написать продавцу» уходят строками ниже; на широком экране кнопка
         чата — справа. --}}
    @php($hasContacts = $seller->website || $seller->vk || $seller->telegram || $seller->contact_public_phone)
    <div class="grid grid-cols-[auto_1fr] items-start gap-x-4 gap-y-3.5 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-4 sm:grid-cols-[auto_1fr_auto] sm:px-[22px] sm:py-5">
        @if ($seller->logoUrl())
            {{-- object-contain + поля: логотипы у продавцов разной формы (квадрат,
                 широкий прямоугольник) — object-cover обрезал бы их, поэтому вписываем
                 целиком на белую подложку. --}}
            <img src="{{ $seller->logoUrl() }}" alt="{{ $seller->public_name }}" class="col-start-1 row-start-1 h-14 w-14 shrink-0 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white object-contain p-1.5 sm:row-span-2 sm:h-16 sm:w-16">
        @else
            <div class="col-start-1 row-start-1 grid h-14 w-14 place-items-center rounded-[var(--radius-lg)] bg-[var(--color-primary-soft)] text-2xl font-extrabold text-[var(--color-primary)] sm:row-span-2 sm:h-16 sm:w-16">{{ mb_strtoupper(mb_substr($seller->public_name, 0, 1)) }}</div>
        @endif
        <div class="col-start-2 row-start-1 min-w-0">
            <h1 class="break-words text-[19px] font-extrabold tracking-[-0.3px] text-[var(--color-ink)] sm:text-[21px]">{{ $seller->public_name }}</h1>
            <div class="mt-[3px] flex flex-wrap items-center gap-x-1.5 gap-y-1 text-[13px] text-[var(--color-muted)]">
                @if ($seller->reviews_count > 0)
                    <span class="text-[var(--color-rating)]">★</span>
                    <span class="font-semibold text-[var(--color-ink)]">{{ number_format($seller->rating_avg, 1) }}</span>
                    <span>·</span>
                    <a href="#reviews" @click.prevent="document.getElementById('reviews')?.scrollIntoView({ behavior: 'smooth' })"
                       class="text-[var(--color-muted)] underline-offset-2 hover:text-[var(--color-primary)] hover:underline">{{ $seller->reviews_count }} {{ \App\Support\Ru::plural($seller->reviews_count, ['отзыв', 'отзыва', 'отзывов']) }}</a>
                @else
                    <span>Отзывов пока нет</span>
                @endif
                @if ($seller->created_at)
                    <span>· на teeu с {{ $seller->created_at->year }}</span>
                @endif
                @if ($minimumOrder = $seller->minimumOrderAmount())
                    <span>·</span>
                    <span class="text-[var(--color-slate)]">Заказ от <span class="font-semibold text-[var(--color-ink)]">{{ \App\Services\Commerce\MinimumOrderService::money($minimumOrder) }} ₽</span></span>
                @endif
            </div>
        </div>
        @if ($hasContacts)
            {{-- Structured contacts as pill links (ТЗ §7.2) --}}
            @php($cbtn = 'inline-flex items-center gap-1.5 rounded-[20px] border border-[var(--color-line)] bg-white px-[13px] py-1.5 text-[12.5px] font-semibold text-[var(--color-slate)] transition hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]')
            {{-- track(type) fires a fire-and-forget beacon for lead stats; the link still opens. --}}
            <div class="col-span-2 col-start-1 row-start-2 flex flex-wrap gap-2 sm:col-span-1 sm:col-start-2"
                 x-data="{ track(type) { fetch('{{ route('seller.contact-click', $seller) }}', { method: 'POST', keepalive: true, headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content, 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ type }) }).catch(() => {}); } }">
                @if ($seller->website)
                    <a href="{{ $seller->website }}" target="_blank" rel="nofollow noopener noreferrer" @click="track('website')" class="{{ $cbtn }}">
                        <i data-lucide="globe" class="h-3.5 w-3.5"></i> Сайт
                    </a>
                @endif
                @if ($seller->vk)
                    <a href="{{ $seller->vk }}" target="_blank" rel="nofollow noopener noreferrer" @click="track('vk')" class="{{ $cbtn }}">
                        <i data-lucide="link" class="h-3.5 w-3.5"></i> ВКонтакте
                    </a>
                @endif
                @if ($seller->telegram)
                    <a href="{{ $seller->telegram }}" target="_blank" rel="nofollow noopener noreferrer" @click="track('telegram')" class="{{ $cbtn }}">
                        <i data-lucide="send" class="h-3.5 w-3.5"></i> Telegram
                    </a>
                @endif
                @if ($seller->contact_public_phone)
                    {{-- Reveal-on-click: shows the number and records the click for lead stats. --}}
                    <div x-data="{ shown: false, phone: '', loading: false,
                        async reveal() {
                            if (this.shown || this.loading) return;
                            this.loading = true;
                            try {
                                const r = await fetch('{{ route('seller.phone', $seller) }}', { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content, 'Accept': 'application/json' } });
                                const d = await r.json();
                                this.phone = d.phone || '';
                                this.shown = !!this.phone;
                            } catch (e) {}
                            this.loading = false;
                        } }">
                        <button type="button" x-show="!shown" @click="reveal()" class="{{ $cbtn }}">
                            <i data-lucide="phone" class="h-3.5 w-3.5"></i>
                            <span x-text="loading ? 'Загрузка…' : 'Показать телефон'"></span>
                        </button>
                        <a x-show="shown" x-cloak :href="'tel:' + phone.replace(/\s/g, '')" class="{{ $cbtn }}">
                            <i data-lucide="phone" class="h-3.5 w-3.5"></i> <span x-text="phone"></span>
                        </a>
                    </div>
                @endif
            </div>
        @endif
        <x-chat-start :seller="$seller" class="col-span-2 col-start-1 w-full sm:col-span-1 sm:col-start-3 sm:row-span-2 sm:row-start-1 sm:w-auto sm:self-center" />
    </div>

    {{-- Approved description (ТЗ §7.1). Shown only on the main storefront page — not on
         category subsections or paginated pages. Collapsed to ~a paragraph with a toggle. --}}
    @if ($seller->description && ! $currentCategory && $products->onFirstPage())
        <div class="mt-3 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white px-4 py-4 sm:px-[22px] sm:py-[18px]"
             x-data="{ open: false, clamped: false }"
             x-init="$nextTick(() => clamped = $refs.body.scrollHeight > $refs.body.clientHeight + 4)">
            <h2 class="mb-2 text-[17px] font-extrabold tracking-[-0.2px] text-[var(--color-ink)]">О продавце</h2>
            <p x-ref="body" :class="!open && 'line-clamp-4'" class="max-w-[880px] text-[13.5px] leading-[1.6] text-[var(--color-slate)]">{!! nl2br(e($seller->description)) !!}</p>
            <button type="button" x-show="clamped || open" x-cloak @click="open = !open"
                    class="mt-2 inline-flex items-center gap-1 text-[13px] font-semibold text-[var(--color-primary)] transition hover:text-[var(--color-primary-dark)]">
                <span x-text="open ? 'Свернуть' : 'Показать полностью'"></span>
                <i data-lucide="chevron-down" class="h-4 w-4 transition-transform" :class="open && 'rotate-180'"></i>
            </button>
        </div>
    @endif

    {{-- Storefront (#13): products + browse by the seller's categories. Категории —
         в левой колонке, как в каталоге площадки; товары справа. --}}
    @php($hasCatNav = $categories->isNotEmpty())
    <div class="mt-7">
        <h2 class="mb-3.5 text-xl font-extrabold tracking-[-0.4px] text-[var(--color-ink)]">
            {{ $currentCategory ? $currentCategory->name : 'Товары магазина' }}
            <span class="ml-1 text-sm font-normal tracking-normal text-[var(--color-muted)]">{{ number_format($products->total(), 0, '.', ' ') }}</span>
        </h2>

        <div class="@if ($hasCatNav) grid gap-5 lg:grid-cols-[220px_1fr] lg:items-start @endif">
            @if ($hasCatNav)
                <aside>
                    {{-- Телефон: кнопка раскрывает список; ПК: постоянная колонка. --}}
                    <div class="lg:hidden" x-data="{ open: false }">
                        <button type="button" @click="open = !open"
                                class="flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] border text-[13.5px] font-semibold transition"
                                :class="open ? 'border-[var(--color-primary)] bg-[var(--color-primary-soft)] text-[var(--color-primary)]' : 'border-[var(--color-line)] text-[var(--color-ink)]'">
                            <i data-lucide="list" class="h-4 w-4"></i>Категории магазина
                        </button>
                        <div x-show="open" x-cloak class="mt-2">@include('partials.seller.category-nav')</div>
                    </div>
                    <div class="hidden lg:block">@include('partials.seller.category-nav')</div>
                </aside>
            @endif

            <div class="min-w-0">
                @if ($products->isEmpty())
                    <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] p-9 text-center text-[13.5px] text-[var(--color-muted)]">В этом разделе пока нет товаров.</div>
                @else
                    <div class="grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3 @if ($hasCatNav) lg:grid-cols-3 xl:grid-cols-4 @else md:grid-cols-4 xl:grid-cols-6 @endif">
                        @foreach ($products as $product)
                            <x-product-card :product="$product" />
                        @endforeach
                    </div>
                    <div class="mt-5">{{ $products->links() }}</div>
                @endif
            </div>
        </div>
    </div>

    {{-- Reviews — only approved ones are shown (ТЗ §40.3) --}}
    <div id="reviews" class="mt-7 scroll-mt-[120px]">
        <h2 class="mb-3.5 text-xl font-extrabold tracking-[-0.4px] text-[var(--color-ink)]">
            Отзывы @if ($seller->reviews_count)<span class="text-sm font-normal tracking-normal text-[var(--color-muted)]">{{ $seller->reviews_count }}</span>@endif
        </h2>
        @forelse ($reviews as $review)
            <div class="mb-2.5 max-w-[880px] rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white px-[18px] py-4">
                <div class="flex items-center justify-between gap-3">
                    <div class="flex items-center gap-2.5">
                        <span class="text-sm font-bold text-[var(--color-ink)]">{{ $review->user?->displayName() ?? 'Покупатель' }}</span>
                        <span class="text-[13px] tracking-[1px] text-[var(--color-rating)]" aria-label="Оценка {{ $review->rating }} из 5">{{ str_repeat('★', $review->rating) }}<span class="text-[var(--color-line)]">{{ str_repeat('★', 5 - $review->rating) }}</span></span>
                    </div>
                    <span class="shrink-0 text-xs text-[var(--color-disabled)]">{{ $review->published_at?->format('d.m.Y') }}</span>
                </div>
                @if ($review->text)
                    <p class="mt-1.5 text-[13.5px] leading-[1.55] text-[var(--color-slate)]">{{ $review->text }}</p>
                @endif
                @if ($review->seller_reply)
                    <div class="mt-3 rounded-[var(--radius-md)] bg-[var(--color-canvas)] px-3 py-2.5">
                        <div class="text-xs font-semibold text-[var(--color-primary)]">Ответ магазина</div>
                        <p class="mt-0.5 text-[13px] text-[var(--color-slate)]">{{ $review->seller_reply }}</p>
                    </div>
                @endif
            </div>
        @empty
            <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] p-9 text-center text-[13.5px] text-[var(--color-muted)]">
                У продавца пока нет отзывов
            </div>
        @endforelse
    </div>
</div>
@endsection