{{--
    Карточка заведения в выдаче каталога (ТЗ §8.4), разметка по макету
    `design/new design and ui`: фото — описание — колонка со слотами.

    Правая колонка отделена границей слева; на узких экранах она уходит вниз
    во всю ширину — за это отвечают классы у самой карточки, а не медиазапросы
    в CSS.
--}}
@props([
    'venue',
    'availability' => null,
    'isOpen' => null,
    'distance' => null,
    'isFavorite' => null,
])

@php
    $rating = $venue->rating;
    $hasRating = $rating !== null && $rating->reviews_count > 0;
    $photo = $venue->profile?->primaryPhoto?->previewUrl();
    $status = $availability?->status;
    $favorite = $isFavorite ?? (($favorites ?? null)?->has($venue->id) ?? false);

    $meta = collect([
        $venue->cuisines->first()?->name,
        $venue->profile?->average_bill ? $venue->profile->averageBillForHumans() : null,
        $venue->address,
        $distance === null
            ? null
            : ($distance < 1 ? round($distance * 1000).' м' : number_format($distance, 1, ',', '').' км'),
    ])->filter()->implode(' · ');

    $slots = $availability?->nearestSlotsForHumans($venue->timezone) ?? [];
@endphp

<article class="card card-hover grid gap-[18px] p-3.5 sm:grid-cols-[160px_minmax(0,1fr)] lg:grid-cols-[200px_minmax(0,1fr)_220px]">
    <a href="{{ $venue->publicPath() }}" class="block h-[140px] overflow-hidden rounded-control">
        @if ($photo)
            <img src="{{ $photo }}" alt="{{ $venue->name }} — {{ $venue->address }}"
                 width="400" height="280" loading="lazy" decoding="async"
                 class="h-full w-full object-cover">
        @else
            <span class="photo-placeholder flex h-full w-full">
                <span class="font-mono text-[11px] text-ink-40">{{ $venue->name }}</span>
            </span>
        @endif
    </a>

    <div class="flex flex-col">
        <div class="flex flex-wrap items-center gap-2.5">
            <h3 class="text-[19px] font-bold leading-tight">
                <a href="{{ $venue->publicPath() }}" class="text-ink no-underline hover:text-primary-hover hover:no-underline">
                    {{ $venue->name }}
                </a>
            </h3>

            @if ($hasRating)
                <span class="inline-flex items-center gap-1 font-mono text-[13px]">
                    <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 ($status && $status !== \App\Domain\Availability\Enums\AvailabilityStatus::Unknown)
                <span @class([
                    'badge',
                    'badge-success' => $status->isBookable() && $status !== \App\Domain\Availability\Enums\AvailabilityStatus::FewLeft,
                    'badge-accent' => $status === \App\Domain\Availability\Enums\AvailabilityStatus::FewLeft,
                    'badge-danger' => ! $status->isBookable(),
                ])>{{ $status->label() }}</span>
            @elseif ($isOpen !== null)
                <span class="badge {{ $isOpen ? 'badge-success' : '' }}">{{ $isOpen ? 'Открыто' : 'Закрыто' }}</span>
            @endif
        </div>

        <div class="mt-1.5 text-sm text-ink-60">{{ $meta }}</div>

        @if ($venue->profile?->short_description)
            <p class="mt-2.5 max-w-[420px] text-sm text-ink-70">{{ $venue->profile->short_description }}</p>
        @endif

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

    <div class="flex flex-col gap-2.5 border-t border-border-soft pt-3.5 lg:border-l lg:border-t-0 lg:pl-[18px] lg:pt-0">
        <div class="mono-label">
            @if ($slots !== [])Сегодня@else Бронирование @endif
        </div>

        @if ($slots !== [])
            <div class="flex flex-wrap gap-1.5">
                @foreach ($slots as $slot)
                    <a href="{{ $venue->publicPath() }}" class="slot no-underline hover:no-underline">{{ $slot }}</a>
                @endforeach
            </div>
        @endif

        <div class="mt-auto flex items-center gap-2 pt-2">
            <a href="{{ $venue->publicPath() }}"
               @class([
                   'btn flex-1 no-underline hover:no-underline',
                   'btn-primary' => $status?->isBookable() ?? true,
                   'btn-secondary' => ($status?->isBookable() ?? true) === false,
               ])>
                {{ ($status?->isBookable() ?? true) ? 'Забронировать' : 'Смотреть' }}
            </a>

            <x-favorite-button :venue="$venue" :is-favorite="$favorite" overlay class="shrink-0 border border-border" />
        </div>
    </div>
</article>