@extends('layouts.app')

@section('title', 'Диалог — Placeo')

@section('content')
<div class="mx-auto max-w-3xl"
     x-data="chat({
        initial: {{ Illuminate\Support\Js::from($messages) }},
        lastId: {{ $lastId }},
        sendUrl: '{{ route('cabinet.chat.send', $thread) }}',
        pollUrl: '{{ route('cabinet.chat.poll', $thread) }}'
     })">

    {{-- Шапка диалога --}}
    <div class="card mb-3 flex items-center gap-3 p-3">
        <a href="{{ route('cabinet.chat.index') }}" class="grid h-9 w-9 place-items-center rounded-full text-gray-500 hover:bg-gray-50">‹</a>
        <div class="grid h-10 w-10 place-items-center overflow-hidden rounded-full bg-brand-100 font-bold text-brand-700">
            @if ($thread->is_support) 🛟
            @elseif ($other->avatarUrl()) <img src="{{ $other->avatarUrl() }}" class="h-full w-full object-cover" alt="">
            @else {{ $other->initial() }} @endif
        </div>
        <div class="min-w-0">
            <a href="{{ $thread->is_support ? '#' : route('seller.show', $other) }}" class="block truncate font-semibold text-gray-900 hover:text-brand-600">
                {{ $thread->is_support ? 'Поддержка Placeo' : $other->displayName() }}
            </a>
            @if ($thread->ad)
                <a href="{{ route('ads.show', $thread->ad) }}" class="truncate text-xs text-brand-600">{{ $thread->ad->title }} · {{ $thread->ad->priceLabel() }}</a>
            @endif
        </div>

        @auth
            @if (! $thread->is_support && $canReview)
                {{-- Оставить отзыв собеседнику (доступно только после его ответа) --}}
                <button type="button" @click="$dispatch('open-review')" class="btn-ghost ml-auto px-3 py-1.5 text-sm">Отзыв</button>
            @endif
        @endauth
    </div>

    {{-- Сообщения --}}
    <div x-ref="scroll" class="card mb-3 h-[60vh] space-y-2 overflow-y-auto p-4">
        <template x-for="m in messages" :key="m.id">
            <div class="flex" :class="m.mine ? 'justify-end' : 'justify-start'">
                <div class="min-w-0 max-w-[75%] rounded-2xl px-3 py-2 text-sm"
                     :class="m.mine ? 'bg-brand-500 text-white' : (m.support ? 'bg-amber-100 text-amber-900' : 'bg-gray-100 text-gray-800')">
                    <div x-text="m.body" class="whitespace-pre-line break-words"></div>
                    <div class="mt-0.5 text-right text-[10px] opacity-70" x-text="m.time"></div>
                </div>
            </div>
        </template>
        <div x-show="!messages.length" class="py-10 text-center text-sm text-muted">Начните диалог — напишите первое сообщение.</div>
    </div>

    {{-- Ошибка модерации --}}
    <div x-show="error" x-cloak class="mb-2 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700" x-text="error"></div>

    {{-- Ввод --}}
    <form @submit.prevent="send()" class="flex items-end gap-2">
        <textarea x-model="body" @keydown.enter.prevent="send()" rows="1" placeholder="Сообщение…"
                  class="input max-h-32 flex-1 resize-none py-2.5"></textarea>
        <button type="submit" class="btn-brand h-11 w-11 shrink-0 !px-0" :disabled="sending" aria-label="Отправить">➤</button>
    </form>

    @auth
        @if (! $thread->is_support && $canReview)
            <x-review-modal :target="$other" :thread="$thread" />
        @endif
    @endauth
</div>
@endsection