@extends('layouts.app')

@section('title', $ad->title . ' — Placeo')

@section('content')
<div class="mx-auto max-w-6xl">

    {{-- Хлебные крошки --}}
    <nav class="mb-3 flex flex-wrap items-center gap-1 text-sm text-muted">
        <a href="{{ route('home') }}" class="hover:text-brand-600">Главная</a>
        @foreach ($breadcrumbs as $crumb)
            <span>›</span>
            <a href="{{ category_url($crumb) }}" class="hover:text-brand-600">{{ $crumb->name }}</a>
        @endforeach
    </nav>

    @if (session('status'))
        <div class="mb-4 rounded-lg bg-brand-50 px-4 py-3 text-sm text-brand-800">{{ session('status') }}</div>
    @endif

    @if ($ad->status !== \App\Models\Ad::STATUS_ACTIVE)
        <div class="mb-4 rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800">
            Статус объявления: <b>{{ $ad->statusLabel() }}</b>@if($ad->block_reason) — {{ $ad->block_reason }}@endif (видно только вам/администратору).
        </div>
    @endif

    <div class="mb-4 flex items-start justify-between gap-3">
        <h1 class="text-2xl font-bold text-gray-900">{{ $ad->title }}</h1>
        @auth
            @if (auth()->id() === $ad->user_id)
                <a href="{{ route('cabinet.ads.edit', $ad) }}" class="btn-tonal shrink-0 whitespace-nowrap px-4 text-sm">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125" />
                    </svg>
                    Редактировать
                </a>
            @endif
        @endauth
    </div>

    {{-- Сетка. На мобильном порядок: фотографии → контакты → детали.
         На десктопе: слева фото+детали (2 кол.), справа sticky-контакты (3-я кол.). --}}
    <div class="grid gap-6 lg:grid-cols-3">

        {{-- Галерея (моб. — первая, десктоп — левый верх) --}}
        @if ($ad->photos->isNotEmpty())
            <div x-data="gallery({{ $ad->photos->count() }})"
                 class="order-1 lg:order-none lg:col-span-2 lg:col-start-1 lg:row-start-1">
                <div class="card overflow-hidden">
                    <div class="aspect-[4/3] w-full cursor-zoom-in bg-gray-100" @click="openLightbox()">
                        @foreach ($ad->photos as $i => $photo)
                            <img x-show="active === {{ $i }}" src="{{ $photo->largeUrl() }}" alt="{{ $ad->title }}"
                                 class="h-full w-full object-contain" @if($i) x-cloak @endif>
                        @endforeach
                    </div>
                    @if ($ad->photos->count() > 1)
                        <div class="flex gap-2 overflow-x-auto p-3 no-scrollbar">
                            @foreach ($ad->photos as $i => $photo)
                                <button type="button" @click="go({{ $i }})"
                                        class="h-16 w-16 shrink-0 overflow-hidden rounded-lg border-2"
                                        :class="active === {{ $i }} ? 'border-brand-500' : 'border-transparent'">
                                    <img src="{{ $photo->previewUrl() }}" class="h-full w-full object-cover" alt="">
                                </button>
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- Лайтбокс: полноэкранный просмотр фото --}}
                <div x-show="open" x-cloak
                     class="fixed inset-0 z-[70] flex flex-col bg-black/90"
                     @keydown.escape.window="closeLightbox()"
                     @keydown.arrow-right.window="next()" @keydown.arrow-left.window="prev()"
                     style="display:none">
                    <div class="flex justify-end p-4">
                        <button type="button" @click="closeLightbox()" class="grid h-10 w-10 place-items-center rounded-full bg-white/10 text-white hover:bg-white/20">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                        </button>
                    </div>
                    <div class="relative flex flex-1 items-center justify-center overflow-hidden px-4">
                        @if ($ad->photos->count() > 1)
                            <button type="button" @click="prev()" class="absolute left-4 grid h-11 w-11 place-items-center rounded-full bg-white/10 text-white hover:bg-white/20">
                                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
                            </button>
                        @endif
                        @foreach ($ad->photos as $i => $photo)
                            <img x-show="active === {{ $i }}" src="{{ $photo->largeUrl() }}" alt="{{ $ad->title }}"
                                 class="max-h-full max-w-full object-contain" @if($i) x-cloak @endif>
                        @endforeach
                        @if ($ad->photos->count() > 1)
                            <button type="button" @click="next()" class="absolute right-4 grid h-11 w-11 place-items-center rounded-full bg-white/10 text-white hover:bg-white/20">
                                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
                            </button>
                        @endif
                    </div>
                    @if ($ad->photos->count() > 1)
                        <div class="flex justify-center gap-2 overflow-x-auto p-4 no-scrollbar">
                            @foreach ($ad->photos as $i => $photo)
                                <button type="button" @click="go({{ $i }})"
                                        class="h-14 w-14 shrink-0 overflow-hidden rounded-lg border-2"
                                        :class="active === {{ $i }} ? 'border-white' : 'border-transparent opacity-60'">
                                    <img src="{{ $photo->previewUrl() }}" class="h-full w-full object-cover" alt="">
                                </button>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        @else
            {{-- Нет фото — заглушка, чтобы не было пустого места в сетке --}}
            <div class="order-1 lg:order-none lg:col-span-2 lg:col-start-1 lg:row-start-1">
                <div class="card grid aspect-[4/3] place-items-center bg-gray-50">
                    <div class="text-center text-gray-300">
                        <div class="text-6xl">🗂️</div>
                        <div class="mt-2 text-sm text-muted">Без фотографий</div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Детали (моб. — третья, десктоп — левый низ) --}}
        <div class="order-3 space-y-6 lg:order-none lg:col-span-2 lg:col-start-1 lg:row-start-2">

            {{-- Характеристики --}}
            @if (!empty($ad->attributes) && $attrDefs->isNotEmpty())
                <div class="card p-5">
                    <h2 class="mb-3 text-lg font-bold">Характеристики</h2>
                    <dl class="grid gap-y-2 sm:grid-cols-2 sm:gap-x-12">
                        @foreach ($ad->attributes as $key => $value)
                            @continue(blank($value))
                            <div class="flex justify-between gap-3 border-b border-gray-50 py-1.5">
                                <dt class="text-muted">{{ $attrDefs[$key]->label ?? $key }}</dt>
                                <dd class="text-right font-medium text-gray-800">{{ $value }}{{ isset($attrDefs[$key]) && $attrDefs[$key]->unit ? ' '.$attrDefs[$key]->unit : '' }}</dd>
                            </div>
                        @endforeach
                    </dl>
                </div>
            @endif

            {{-- Описание --}}
            <div class="card p-5">
                <h2 class="mb-3 text-lg font-bold">Описание</h2>
                <div class="whitespace-pre-line leading-relaxed text-gray-800">{{ $ad->description }}</div>
            </div>

            {{-- Карта --}}
            @if ($ad->lat && $ad->lng)
                <div class="card p-5">
                    <h2 class="mb-3 text-lg font-bold">Расположение</h2>
                    @if ($ad->displayAddress())<p class="mb-2 text-sm text-muted">{{ $ad->displayAddress() }}</p>@endif
                    <div x-data="{}"
                         x-init="$nextTick(() => { const m = L.map($refs.vmap, {scrollWheelZoom:false}).setView([{{ $ad->lat }}, {{ $ad->lng }}], 14); L.tileLayer('https://tile2.maps.2gis.com/tiles?x={x}&y={y}&z={z}', {maxZoom:18, attribution:'© 2ГИС'}).addTo(m); L.marker([{{ $ad->lat }}, {{ $ad->lng }}], { icon: window.placeoMapPin() }).addTo(m); m.on('click', () => m.scrollWheelZoom.enable()); m.on('mouseout', () => m.scrollWheelZoom.disable()); setTimeout(() => m.invalidateSize(), 200); })">
                        <div x-ref="vmap" class="h-64 w-full overflow-hidden rounded-lg border border-gray-200"></div>
                    </div>
                </div>
            @endif

            <p class="text-xs text-muted">
                № {{ $ad->id }} · {{ ($ad->published_at ?? $ad->created_at)->isoFormat('D MMMM YYYY') }}
                · {{ trans_choice('{0}нет просмотров|{1}:count просмотр|[2,4]:count просмотра|[5,*]:count просмотров', $ad->views_count, ['count' => $ad->views_count]) }}
            </p>
        </div>

        {{-- Контакты/цена. Моб. — вторая (после фото, до деталей); десктоп — sticky в 3-й колонке. --}}
        <aside class="order-2 space-y-4 lg:order-none lg:col-start-3 lg:row-span-2 lg:row-start-1">
            <div class="card space-y-4 p-5 lg:sticky lg:top-24">
                <div class="flex items-baseline gap-2">
                    <span class="text-3xl font-extrabold tracking-tight text-gray-900">{{ $ad->priceLabel() }}</span>
                </div>

                {{-- Действия --}}
                <div class="space-y-2.5">
                    {{-- Телефон по клику (гостям — модалка авторизации) --}}
                    @php
                        $phoneIcon = 'M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z';
                        // Способ связи: all — звонки и сообщения, calls — только звонки, messages — только сообщения.
                        $canCall = in_array($ad->contact_method ?? 'all', [\App\Models\Ad::CONTACT_ALL, \App\Models\Ad::CONTACT_CALLS], true);
                        $canWrite = in_array($ad->contact_method ?? 'all', [\App\Models\Ad::CONTACT_ALL, \App\Models\Ad::CONTACT_MESSAGES], true);
                    @endphp
                    @if ($canCall)
                        @auth
                            <div x-data="phoneReveal('{{ route('ads.phone', $ad) }}')">
                                <button type="button" @click="reveal()" x-show="!phone" class="btn-brand w-full">
                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $phoneIcon }}" /></svg>
                                    <span x-show="!loading">Показать телефон</span>
                                    <span x-show="loading" x-cloak>Загрузка…</span>
                                </button>
                                <a x-show="phone" x-cloak :href="'tel:' + phone" class="btn-brand w-full" x-text="phone"></a>
                            </div>
                        @else
                            <button type="button" @click="authModalOpen = true" class="btn-brand w-full">
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $phoneIcon }}" /></svg>
                                Показать телефон
                            </button>
                        @endauth
                    @endif

                    {{-- Сообщение + избранное. Если связь «только сообщения» — «Написать» становится основной кнопкой на месте телефона. --}}
                    <div class="flex gap-2.5">
                        @if ($canWrite)
                            @auth
                                @if (auth()->id() !== $ad->user_id)
                                    <form method="POST" action="{{ route('cabinet.chat.start') }}" class="flex-1">
                                        @csrf
                                        <input type="hidden" name="seller_id" value="{{ $ad->user_id }}">
                                        <input type="hidden" name="ad_id" value="{{ $ad->id }}">
                                        <button type="submit" class="{{ $canCall ? 'btn-secondary' : 'btn-brand' }} w-full">
                                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.12 2.99 2.7 3.22 1.21.18 2.43.32 3.66.41l3.3 3.3a.75.75 0 0 0 1.28-.53v-2.7a25.7 25.7 0 0 0 1.8-.18 3.28 3.28 0 0 0 2.7-3.23v-5.5A3.28 3.28 0 0 0 18.7 5.5a25.6 25.6 0 0 0-13.4 0A3.28 3.28 0 0 0 2.6 8.74v5.5Z" /></svg>
                                            Написать
                                        </button>
                                    </form>
                                @endif
                            @else
                                <a href="{{ route('login') }}" class="{{ $canCall ? 'btn-secondary' : 'btn-brand' }} w-full flex-1">
                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.12 2.99 2.7 3.22 1.21.18 2.43.32 3.66.41l3.3 3.3a.75.75 0 0 0 1.28-.53v-2.7a25.7 25.7 0 0 0 1.8-.18 3.28 3.28 0 0 0 2.7-3.23v-5.5A3.28 3.28 0 0 0 18.7 5.5a25.6 25.6 0 0 0-13.4 0A3.28 3.28 0 0 0 2.6 8.74v5.5Z" /></svg>
                                    Написать
                                </a>
                            @endauth
                        @endif

                        {{-- В избранное --}}
                        @auth
                            <button type="button" class="btn-secondary w-full flex-1 whitespace-nowrap"
                                    x-data="favBtn({{ $ad->id }}, {{ in_array($ad->id, $favoriteIds ?? []) ? 'true' : 'false' }})" @click="toggle()"
                                    :class="fav ? '!border-red-200 !bg-red-50 !text-red-600' : ''">
                                <svg class="h-5 w-5" :class="fav ? 'text-red-500' : 'text-gray-500'" :fill="fav ? 'currentColor' : 'none'" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
                                </svg>
                                <span x-text="fav ? 'В избранном' : 'В избранное'"></span>
                            </button>
                        @else
                            <a href="{{ route('login') }}" class="btn-secondary w-full flex-1 whitespace-nowrap">
                                <svg class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
                                В избранное
                            </a>
                        @endauth
                    </div>
                </div>

                {{-- Продавец --}}
                <a href="{{ route('seller.show', $ad->user) }}"
                   class="-mx-2 flex items-center gap-3 rounded-xl border-t border-gray-100 px-2 pt-4 transition hover:bg-gray-50">
                    <div class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-brand-100 font-bold text-brand-700">
                        @if ($ad->user->avatarUrl())
                            <img src="{{ $ad->user->avatarUrl() }}" class="h-full w-full object-cover" alt="">
                        @else
                            {{ $ad->user->initial() }}
                        @endif
                    </div>
                    <div class="min-w-0 flex-1">
                        <div class="truncate font-semibold text-gray-900">{{ $ad->user->displayName() }}</div>
                        <div class="text-xs text-muted">
                            @if ($ad->user->reviews_count > 0)
                                <span class="text-amber-500">★</span> {{ $ad->user->rating_cache }} · {{ $ad->user->reviews_count }} отзывов
                            @else
                                Нет отзывов
                            @endif
                        </div>
                    </div>
                    <svg class="h-4 w-4 shrink-0 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
                </a>

                {{-- Жалоба + поделиться --}}
                <div x-data="{ open: false }" class="border-t border-gray-100 pt-3">
                    <div class="flex items-center justify-between gap-3">
                        <button type="button" @click="open = true" class="text-sm text-muted hover:text-red-600">Пожаловаться</button>
                        {{-- Поделиться: нативное окно share (моб./десктоп) + фолбэк-копирование --}}
                        <button type="button" x-data="shareBtn(@js($ad->title))" @click="share()"
                                class="inline-flex items-center gap-1.5 text-sm text-muted hover:text-brand-600" :title="label">
                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
                            </svg>
                            <span x-text="label">Поделиться</span>
                        </button>
                    </div>

                    <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @keydown.escape.window="open=false">
                        <div class="card w-full max-w-md p-5" @click.outside="open=false">
                            <h3 class="mb-3 text-lg font-bold">Пожаловаться на объявление</h3>
                            <form method="POST" action="{{ route('ads.report', $ad) }}" class="space-y-3">
                                @csrf
                                <select name="reason" required class="input">
                                    <option value="">Причина</option>
                                    <option>Запрещённый товар или услуга</option>
                                    <option>Мошенничество</option>
                                    <option>Неверная категория</option>
                                    <option>Спам или реклама</option>
                                    <option>Дубликат объявления</option>
                                    <option>Другое</option>
                                </select>
                                <textarea name="body" rows="3" class="input" placeholder="Комментарий (необязательно)"></textarea>
                                <div class="flex justify-end gap-2">
                                    <button type="button" @click="open=false" class="btn-ghost">Отмена</button>
                                    <button type="submit" class="btn-brand">Отправить</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
    </div>

    {{-- Другие объявления продавца --}}
    @if ($otherAds->isNotEmpty())
        <section class="mt-10">
            <h2 class="mb-4 text-lg font-bold text-gray-900">Другие объявления продавца</h2>
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
                @foreach ($otherAds as $other)
                    <x-ad-card :ad="$other" />
                @endforeach
            </div>
        </section>
    @endif

    {{-- Рекомендации для вас --}}
    @if ($recommended->isNotEmpty())
        <section class="mt-10">
            <h2 class="mb-4 text-lg font-bold text-gray-900">Рекомендации для вас</h2>
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
                @foreach ($recommended as $rec)
                    <x-ad-card :ad="$rec" />
                @endforeach
            </div>
        </section>
    @endif
</div>
@endsection