@extends('layouts.account')

@section('title', $otherName.' — Сообщения')

@section('content')
<div class="flex h-[calc(100vh-13rem)] min-h-[420px] flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white md:h-[560px]"
     x-data="chatRoom({ sendUrl: '{{ $sendUrl }}', pollUrl: '{{ $pollUrl }}', lastId: {{ $lastId }}, messages: {{ Illuminate\Support\Js::from($messages) }} })">

    <div class="flex items-center gap-3 border-b border-[var(--color-line)] px-4 py-3 sm:px-[18px]">
        <a href="{{ route('account.chat.index') }}" class="whitespace-nowrap text-[13px] text-[var(--color-muted)] hover:text-[var(--color-primary)]">
            ← <span class="hidden sm:inline">Все чаты</span>
        </a>
        {{-- Имя продавца — ссылка на его страницу (у диалога поддержки продавца нет). --}}
        @if ($conversation->seller)
            <a href="{{ route('seller.card', $conversation->seller->slug) }}" class="flex min-w-0 items-center gap-3 transition hover:opacity-70">
                <div class="grid h-[34px] w-[34px] shrink-0 place-items-center rounded-full bg-[var(--color-primary-soft)] text-sm font-extrabold text-[var(--color-primary)]">{{ mb_strtoupper(mb_substr($otherName, 0, 1)) }}</div>
                <div class="flex min-w-0 items-center gap-1.5 text-sm font-bold text-[var(--color-ink)]">
                    <span class="truncate">{{ $otherName }}</span>
                    <i data-lucide="external-link" class="h-3.5 w-3.5 shrink-0 text-[var(--color-muted)]"></i>
                </div>
            </a>
        @else
            <div class="grid h-[34px] w-[34px] shrink-0 place-items-center rounded-full bg-[var(--color-primary-soft)] text-sm font-extrabold text-[var(--color-primary)]">{{ mb_strtoupper(mb_substr($otherName, 0, 1)) }}</div>
            <div class="truncate text-sm font-bold text-[var(--color-ink)]">{{ $otherName }}</div>
        @endif
    </div>

    <div class="flex-1 space-y-2 overflow-y-auto bg-[#F8F9FB] p-4 sm:p-[18px]" x-ref="log">
        <template x-for="m in messages" :key="m.id">
            <div class="flex" :class="{ 'justify-end': m.mine, 'justify-center': m.kind === 'portal' || m.kind === 'system' }">
                {{-- Пузыри по макету: свои — синие справа со «срезанным» правым нижним
                     углом, чужие — белые с хайрлайном и срезанным левым нижним. --}}
                <div class="max-w-[80%] px-3 py-2 text-[13.5px] sm:max-w-[60%]"
                     :class="{
                        'rounded-[12px_12px_4px_12px] bg-[var(--color-primary)] text-white': m.mine,
                        'rounded-[var(--radius-lg)] bg-[var(--color-warning-soft)] text-[#7A5A12] text-center': m.kind === 'portal',
                        'rounded-[var(--radius-lg)] bg-[var(--color-hover)] text-[var(--color-muted)] text-center text-xs': m.kind === 'system',
                        'rounded-[12px_12px_12px_4px] border border-[var(--color-line)] bg-white text-[var(--color-ink)]': !m.mine && m.kind !== 'portal' && m.kind !== 'system',
                     }">
                    <div x-show="m.kind === 'portal'" class="mb-0.5 text-[11px] font-bold uppercase tracking-wide">Команда teeu</div>
                    <div class="whitespace-pre-wrap break-words" x-text="m.body"></div>
                    <div x-show="m.kind !== 'system'" class="mt-0.5 flex items-center justify-end gap-1.5 text-[10px] opacity-65">
                        <span x-show="statusLabel(m)" x-text="statusLabel(m)"></span>
                        <span x-text="m.time"></span>
                    </div>
                </div>
            </div>
        </template>
    </div>

    <form class="border-t border-[var(--color-line)] px-3.5 py-3" @submit.prevent="send">
        <p x-show="error" x-text="error" class="mb-2 text-sm font-semibold text-[var(--color-sale)]"></p>
        <div class="flex items-end gap-2">
            <textarea x-model="body" rows="1" maxlength="4000" placeholder="Сообщение…"
                      @keydown.enter.prevent="send"
                      class="min-h-10 flex-1 resize-none rounded-[var(--radius-md)] border border-[var(--color-line)] px-3.5 py-2.5 text-[13.5px] leading-[1.3] focus:border-[var(--color-primary)] focus:outline-none"></textarea>
            <button type="submit" :disabled="sending"
                    class="grid h-10 w-10 shrink-0 place-items-center rounded-[var(--radius-md)] bg-[var(--color-primary)] text-white transition hover:bg-[var(--color-primary-dark)] disabled:opacity-45" aria-label="Отправить">
                <i data-lucide="send" class="h-[18px] w-[18px]"></i>
            </button>
        </div>
    </form>
</div>
@endsection