@extends('layouts.app')

{{-- Карточка заведения (ТЗ §8.4, §9), разметка по макету `design/new design and ui`. --}}

@php
    $rating = $venue->rating;
    $hasRating = $rating !== null && $rating->reviews_count > 0;
    $cuisines = $venue->cuisines->pluck('name')->implode(', ');

    $photos = $venue->photos;
    $gallery = $photos->take(3);
    $rest = max(0, $photos->count() - 3);

    $today = collect($week)->firstWhere('is_today', true);
    $isOpen = app(\App\Domain\Catalog\Services\VenueScheduleService::class)->isOpenAt($venue);

    $meta = collect([
        $hasRating
            ? trans_choice(':count отзыв|:count отзыва|:count отзывов', $rating->reviews_count, ['count' => $rating->reviews_count])
            : null,
        $cuisines ?: null,
        $venue->profile?->average_bill ? $venue->profile->averageBillForHumans() : null,
    ])->filter()->implode(' · ');
@endphp

{{-- Title и Description собирает SeoResolver: шаблон типа страницы плюс
     индивидуальное переопределение из админки (ТЗ §18.3). --}}
@section('title', $seo->title ?? $venue->name.' в '.$city->inCity())
@section('description', $seo->description ?? trim($venue->name.': '.$cuisines.($cuisines ? ', ' : '').$venue->address))

@push('meta')
    <link rel="canonical" href="{{ $seo->canonical ?? url($venue->publicPath()) }}">

    @if ($seo->noindex)
        <meta name="robots" content="noindex, follow">
    @endif

    <meta property="og:type" content="restaurant">
    <meta property="og:title" content="{{ $seo->ogTitleOrTitle() }}">
    @if ($ogDescription = $seo->ogDescriptionOrDescription())
        <meta property="og:description" content="{{ $ogDescription }}">
    @endif
    <meta property="og:url" content="{{ url($venue->publicPath()) }}">
    @if ($photo = $seo->ogImage ?? $venue->profile?->primaryPhoto?->largeUrl())
        <meta property="og:image" content="{{ $photo }}">
    @endif

    @include('partials.schema-venue')
@endpush

@section('content')
    <article class="container-page pb-[72px] pt-6">
        <nav aria-label="Хлебные крошки" class="mb-[18px] text-[13px] text-ink-40">
            <ol class="flex flex-wrap items-center gap-1.5">
                <li><a href="{{ route('home') }}" class="text-ink-40 no-underline hover:text-ink hover:no-underline">Главная</a></li>
                <li aria-hidden="true">/</li>
                <li><a href="{{ route('catalog.city', $city->slug) }}" class="text-ink-40 no-underline hover:text-ink hover:no-underline">{{ $city->name }}</a></li>
                <li aria-hidden="true">/</li>
                <li class="text-ink" aria-current="page">{{ $venue->name }}</li>
            </ol>
        </nav>

        <div class="grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_380px]">
            <div>
                {{-- Галерея: главное фото на две строки, два снимка рядом --}}
                <div class="mb-6 grid gap-2.5 sm:grid-cols-[2fr_1fr] sm:grid-rows-[130px_130px]">
                    @forelse ($gallery as $index => $photo)
                        <div @class([
                            'relative overflow-hidden rounded-card',
                            'row-span-2 h-[180px] sm:h-auto' => $index === 0,
                            'hidden sm:block' => $index > 0,
                        ])>
                            @if ($url = $photo->previewUrl())
                                <img src="{{ $url }}" alt="{{ $photo->alt ?: $venue->name }}"
                                     width="800" height="600" loading="{{ $index === 0 ? 'eager' : 'lazy' }}"
                                     class="h-full w-full object-cover">
                            @endif

                            @if ($index === 2 && $rest > 0)
                                <span class="absolute bottom-2.5 right-2.5 rounded-[7px] bg-ink px-2.5 py-[5px] text-xs font-semibold text-white">
                                    Ещё {{ $rest }}
                                </span>
                            @endif
                        </div>
                    @empty
                        <div class="photo-placeholder row-span-2 h-[180px] rounded-card sm:h-auto">
                            <span class="font-mono text-[11px] text-ink-40">{{ $venue->name }}</span>
                        </div>
                    @endforelse
                </div>

                <div class="flex flex-wrap items-start justify-between gap-5">
                    <div>
                        <h1 class="text-[30px] font-extrabold tracking-[-0.03em] sm:text-[38px]">{{ $seo->h1 ?? $venue->name }}</h1>

                        <div class="mt-2.5 flex flex-wrap items-center gap-3">
                            @if ($hasRating)
                                <span class="inline-flex items-center gap-1.5 rounded-[7px] bg-ink px-2.5 py-[5px] text-xs font-semibold text-white">
                                    <svg width="11" height="11" viewBox="0 0 12 12" fill="#FF5A1F" aria-hidden="true">
                                        <path d="M6 0.5l1.6 3.4 3.6.5-2.6 2.6.6 3.7L6 9l-3.2 1.7.6-3.7L.8 4.4l3.6-.5z" />
                                    </svg>
                                    {{ number_format((float) $rating->average_rating, 1, ',', '') }}
                                </span>
                            @endif

                            @if ($meta !== '')
                                <span class="text-sm text-ink-60">{{ $meta }}</span>
                            @endif

                            <span class="badge {{ $isOpen ? 'badge-success' : '' }}">
                                @if ($isOpen && $today && $today['intervals'] !== [])
                                    Открыто до {{ \Illuminate\Support\Str::afterLast($today['intervals'][array_key_last($today['intervals'])], '–') }}
                                @else
                                    {{ $isOpen ? 'Открыто' : 'Закрыто' }}
                                @endif
                            </span>
                        </div>
                    </div>

                    <x-favorite-button :venue="$venue"
                                       :is-favorite="($favorites ?? null)?->has($venue->id) ?? false"
                                       :label="true" />
                </div>

                {{-- Адрес, часы, телефон, сайт --}}
                <div class="card mt-6 grid gap-3.5 p-5 sm:grid-cols-2">
                    <div class="flex items-start gap-2.5">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="#FF5A1F" stroke-width="1.5"
                             class="mt-0.5 shrink-0" aria-hidden="true">
                            <path d="M9 16s5.5-4.8 5.5-9A5.5 5.5 0 0 0 3.5 7c0 4.2 5.5 9 5.5 9Z" />
                            <circle cx="9" cy="7" r="2" />
                        </svg>
                        <div>
                            <div class="text-[15px]">{{ $venue->address }}</div>
                            <div class="mt-0.5 text-[13px] text-ink-40">{{ $city->name }}</div>
                        </div>
                    </div>

                    <div class="flex items-start gap-2.5">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="#FF5A1F" stroke-width="1.5"
                             class="mt-0.5 shrink-0" aria-hidden="true">
                            <circle cx="9" cy="9" r="7" />
                            <path d="M9 4.6V9l3 1.8" />
                        </svg>
                        <div>
                            <div class="text-[15px]">
                                {{ $today ? $today['label'].' '.($today['intervals'] === [] ? 'выходной' : implode(', ', $today['intervals'])) : 'Часы уточняются' }}
                            </div>
                            <div class="mt-0.5 text-[13px] text-ink-40">Время местное</div>
                        </div>
                    </div>

                    @if ($phone = $venue->publicPhone())
                        <div class="flex items-center gap-2.5 text-[15px]">
                            <a href="tel:{{ preg_replace('/[^0-9+]/', '', $phone) }}"
                               class="text-ink no-underline hover:text-primary-hover">{{ $phone }}</a>
                        </div>
                    @endif

                    @if ($site = $venue->publicWebsite())
                        <div class="flex items-center gap-2.5 text-[15px]">
                            <a href="{{ $site }}" rel="nofollow noopener" target="_blank">Сайт заведения</a>
                        </div>
                    @endif
                </div>

                @if ($venue->profile?->description || $venue->profile?->short_description)
                    <section>
                        <h2 class="mb-3.5 mt-9 text-2xl font-bold">О заведении</h2>
                        <p class="max-w-[680px] text-base leading-[1.6] text-ink-70">
                            {{ $venue->profile->description ?: $venue->profile->short_description }}
                        </p>
                    </section>
                @endif

                @if ($venue->features->isNotEmpty())
                    <div class="mt-4 flex flex-wrap gap-2">
                        @foreach ($venue->features as $feature)
                            <span class="rounded-[7px] bg-surface-alt px-3 py-1.5 text-[13px]">{{ $feature->name }}</span>
                        @endforeach
                    </div>
                @endif

                @if ($venue->contact && $venue->contact->socialLinks() !== [])
                    <div class="mt-4 flex flex-wrap gap-2">
                        @foreach ($venue->contact->socialLinks() as $network => $url)
                            <a href="{{ $url }}" rel="nofollow noopener" target="_blank"
                               class="pill no-underline hover:no-underline">{{ ucfirst($network) }}</a>
                        @endforeach
                    </div>
                @endif

                <section>
                    <h2 class="mb-3.5 mt-9 text-2xl font-bold">Часы работы</h2>
                    <dl class="card divide-y divide-border-soft overflow-hidden">
                        @foreach ($week as $day)
                            <div @class([
                                'flex items-center justify-between px-4 py-2.5 text-sm',
                                'bg-surface-alt font-semibold' => $day['is_today'],
                                'text-ink-60' => ! $day['is_today'],
                            ])>
                                <dt>{{ $day['label'] }}</dt>
                                <dd class="font-mono">{{ $day['intervals'] === [] ? 'выходной' : implode(', ', $day['intervals']) }}</dd>
                            </div>
                        @endforeach
                    </dl>
                </section>

                {{-- Отзывы (ТЗ §13.6). Показываются только опубликованные. --}}
                <section id="reviews">
                    <div class="mb-3.5 mt-9 flex flex-wrap items-baseline justify-between gap-3">
                        <h2 class="text-2xl font-bold">Отзывы гостей</h2>

                        @if ($hasRating)
                            <p class="text-sm text-ink-60">
                                <span class="font-mono font-bold text-ink">{{ number_format((float) $rating->average_rating, 1, ',', '') }}</span>
                                из 5 ·
                                {{ trans_choice(':count отзыв|:count отзыва|:count отзывов', $rating->reviews_count, ['count' => $rating->reviews_count]) }}
                            </p>
                        @endif
                    </div>

                    @if ($reviews->isEmpty())
                        <p class="card p-6 text-center text-sm text-ink-60">
                            Отзывов пока нет. Забронируйте стол — после визита сможете оставить первый.
                        </p>
                    @else
                        {{-- Гистограмма помогает понять разброс оценок, а не только среднее --}}
                        @if ($hasRating)
                            <ul class="mb-5 space-y-1.5">
                                @foreach ($rating->distribution() as $stars => $count)
                                    <li class="flex items-center gap-3 text-xs text-ink-40">
                                        <span class="w-10 shrink-0 font-mono">{{ $stars }} ★</span>
                                        <span class="h-1.5 flex-1 overflow-hidden rounded-pill bg-surface-alt">
                                            <span class="block h-full rounded-pill bg-primary"
                                                  style="width: {{ $rating->reviews_count > 0 ? round($count / $rating->reviews_count * 100) : 0 }}%"></span>
                                        </span>
                                        <span class="w-8 shrink-0 text-right font-mono">{{ $count }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        @endif

                        <div class="grid gap-3">
                            @foreach ($reviews as $review)
                                <x-review-card :review="$review" />
                            @endforeach
                        </div>

                        <div class="mt-6">{{ $reviews->withQueryString()->links() }}</div>
                    @endif
                </section>
            </div>

            <aside class="grid gap-3.5 lg:sticky lg:top-6 lg:self-start">
                {{-- Плашка доступности: статус и когда он проверен (ТЗ §9.1) --}}
                <div class="rounded-card border border-primary-line bg-primary-bg p-4 text-center">
                    <div class="text-[13px] text-ink-60">Доступность на сегодня</div>
                    <div class="mt-1 text-[18px] font-bold text-primary-hover">{{ $availability->status->label() }}</div>

                    @if ($availability->calculatedAt)
                        <div class="mt-1.5 text-xs text-ink-40">
                            Проверено в {{ $availability->calculatedAt->setTimezone($venue->timezone)->format('H:i') }}
                        </div>
                    @endif
                </div>

                <x-booking-form :venue="$venue" :city="$city" :slots="$slots" :default-from="$defaultFrom" />
            </aside>
        </div>

        @if ($similar->isNotEmpty())
            <section class="mt-12">
                <h2 class="text-2xl font-bold">Похожие заведения</h2>
                <div class="mt-5 grid gap-5 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
                    @foreach ($similar as $item)
                        <x-venue-card :venue="$item" />
                    @endforeach
                </div>
            </section>
        @endif
    </article>
@endsection