@extends('layouts.app')

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

@section('content')
<div class="mx-auto max-w-6xl" x-data="sellerReviews('{{ route('seller.reviews', $seller) }}')">

    @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

    {{-- Шапка продавца --}}
    <div class="card mb-6 p-5">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-center gap-4">
                <div class="grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-brand-100 text-2xl font-bold text-brand-700">
                    @if ($seller->avatarUrl())
                        <img src="{{ $seller->avatarUrl() }}" class="h-full w-full object-cover" alt="">
                    @else
                        {{ $seller->initial() }}
                    @endif
                </div>
                <div>
                    <h1 class="text-xl font-bold text-gray-900">{{ $seller->displayName() }}</h1>
                    <div class="mt-0.5 text-sm text-muted">
                        @if ($seller->reviews_count > 0)
                            ★ {{ $seller->rating_cache }} ·
                            <button type="button" @click="openModal()" class="font-medium text-brand-600 hover:underline">
                                {{ trans_choice('{1}:count отзыв|[2,4]:count отзыва|[5,*]:count отзывов', $seller->reviews_count, ['count' => $seller->reviews_count]) }}
                            </button>
                        @else
                            Нет отзывов
                        @endif
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-2">
                @if ($seller->publicPhoneNumber())
                    @auth
                        <div x-data="phoneReveal('{{ route('seller.phone', $seller) }}')">
                            <button type="button" @click="reveal()" x-show="!phone" class="btn-ghost px-4 py-2 text-sm">
                                <span x-show="!loading">Показать номер</span><span x-show="loading" x-cloak>…</span>
                            </button>
                            <a x-show="phone" x-cloak :href="'tel:' + phone" class="btn-ghost px-4 py-2 text-sm" x-text="phone"></a>
                        </div>
                    @else
                        <button type="button" @click="authModalOpen = true" class="btn-ghost px-4 py-2 text-sm">Показать номер</button>
                    @endauth
                @endif
                @auth
                    @if (auth()->id() !== $seller->id)
                        <form method="POST" action="{{ route('cabinet.chat.start') }}">
                            @csrf
                            <input type="hidden" name="seller_id" value="{{ $seller->id }}">
                            <button type="submit" class="btn-tonal px-4 py-2 text-sm">Написать</button>
                        </form>
                    @endif
                @else
                    <a href="{{ route('login') }}" class="btn-tonal px-4 py-2 text-sm">Написать</a>
                @endauth

                @auth
                    @if (auth()->id() !== $seller->id)
                        <button type="button" x-data="followBtn({{ $seller->id }}, {{ $isFollowing ? 'true' : 'false' }})"
                                @click="toggle()" :class="following ? 'btn-tonal' : 'btn-brand'" class="px-4 py-2 text-sm">
                            <span x-text="following ? 'Вы подписаны' : 'Подписаться'"></span>
                        </button>
                    @endif
                @else
                    <a href="{{ route('login') }}" class="btn-brand px-4 py-2 text-sm">Подписаться</a>
                @endauth

                {{-- Жалоба на продавца --}}
                @if (! auth()->check() || auth()->id() !== $seller->id)
                    <div x-data="{ open: false }">
                        <button type="button" @click="open = true" class="grid h-10 w-10 place-items-center rounded-full text-gray-400 hover:bg-gray-50 hover:text-red-600" title="Пожаловаться">
                            <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="M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.5 48.5 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5" />
                            </svg>
                        </button>

                        <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" style="display:none">
                            <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('seller.report', $seller) }}" 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>
                @endif
            </div>
        </div>
    </div>

    {{-- Описание продавца --}}
    @if (filled($seller->description))
        <div class="card mb-6 p-5">
            <div class="whitespace-pre-line leading-relaxed text-gray-800">{{ $seller->description }}</div>
        </div>
    @endif

    {{-- Модалка со всеми отзывами (подгружаются постранично) --}}
    @if ($seller->reviews_count > 0)
        <div x-show="open" x-cloak
             class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/40 p-4 pt-16"
             @keydown.escape.window="open = false" style="display:none">
            <div class="card w-full max-w-lg" @click.outside="open = false">
                <div class="flex items-center justify-between border-b border-gray-100 px-5 py-4">
                    <h2 class="text-lg font-bold">Отзывы <span class="text-muted">{{ $seller->reviews_count }}</span></h2>
                    <button type="button" @click="open = false" class="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100">
                        <svg class="h-5 w-5" 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="max-h-[70vh] space-y-3 overflow-y-auto p-5">
                    <template x-for="(r, i) in items" :key="i">
                        <div class="border-b border-gray-50 pb-3 last:border-0">
                            <div class="flex items-center gap-2">
                                <span class="font-medium text-gray-900" x-text="r.author"></span>
                                <span class="text-sm text-amber-500" x-text="stars(r.rating)"></span>
                                <span class="ml-auto text-xs text-muted" x-text="r.date"></span>
                            </div>
                            <p class="mt-1 text-sm text-gray-700" x-show="r.body" x-text="r.body"></p>
                        </div>
                    </template>

                    <div x-show="loading" class="py-4 text-center text-sm text-muted">Загрузка…</div>

                    {{-- Показать ещё --}}
                    <div x-show="next && !loading" class="pt-1 text-center">
                        <button type="button" @click="load()" class="btn-ghost px-5 py-2 text-sm">Показать ещё</button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Вкладки + поиск --}}
    <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div class="flex gap-1 border-b border-gray-100">
            <a href="{{ route('seller.show', ['seller' => $seller, 'status' => 'active', 'q' => request('q')]) }}"
               class="border-b-2 px-4 py-2 text-sm font-medium {{ $tab === 'active' ? 'border-brand-500 text-brand-700' : 'border-transparent text-gray-500 hover:text-gray-700' }}">
                Активные <span class="text-muted">{{ $activeCount }}</span>
            </a>
            <a href="{{ route('seller.show', ['seller' => $seller, 'status' => 'archived', 'q' => request('q')]) }}"
               class="border-b-2 px-4 py-2 text-sm font-medium {{ $tab === 'archived' ? 'border-brand-500 text-brand-700' : 'border-transparent text-gray-500 hover:text-gray-700' }}">
                Завершённые <span class="text-muted">{{ $archivedCount }}</span>
            </a>
        </div>

        <form method="GET" action="{{ route('seller.show', $seller) }}" class="relative w-full sm:w-72">
            <input type="hidden" name="status" value="{{ $tab }}">
            <input type="search" name="q" value="{{ request('q') }}" placeholder="Поиск по объявлениям продавца" class="input py-2 pl-9 text-sm">
            <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.3-4.3m1.8-5.4a7.2 7.2 0 11-14.4 0 7.2 7.2 0 0114.4 0z" />
            </svg>
        </form>
    </div>

    @include('partials.feed', ['ads' => $ads, 'view' => $view, 'nextUrl' => $nextUrl])
</div>
@endsection