@extends('layouts.merchant')

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

@section('content')
<div class="mx-auto flex h-[calc(100vh-9rem)] max-w-2xl flex-col overflow-hidden rounded-[var(--radius-lg)] bg-white shadow-[var(--shadow-card)]"
     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-5 py-3">
        <a href="{{ route('merchant.chat.index') }}" class="text-[var(--color-muted)] hover:text-[var(--color-primary)]">
            <i data-lucide="arrow-left" class="h-5 w-5"></i>
        </a>
        <div class="grid h-9 w-9 place-items-center rounded-full bg-[var(--color-primary-soft)] font-extrabold text-[var(--color-primary)]">{{ mb_substr($otherName, 0, 1) }}</div>
        <div class="font-bold text-[var(--color-ink)]">{{ $otherName }}</div>
    </div>

    <div class="flex-1 space-y-2 overflow-y-auto bg-[var(--color-canvas)] px-4 py-4" 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%] rounded-[var(--radius-lg)] px-3.5 py-2 text-sm"
                     :class="{
                        'bg-[var(--color-primary)] text-white': m.mine,
                        'bg-[#FFF6E5] text-[#7A5A12] text-center': m.kind === 'portal',
                        'bg-[#EEF1F5] text-[var(--color-muted)] text-center text-xs': m.kind === 'system',
                        'bg-white text-[var(--color-ink)] shadow-[var(--shadow-card)]': !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-1 flex items-center justify-end gap-1.5 text-[11px] opacity-70">
                        <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)] p-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-[2.75rem] flex-1 resize-none rounded-[var(--radius-md)] border border-[var(--color-line)] px-3 py-2.5 text-sm focus:border-[var(--color-primary)] focus:outline-none"></textarea>
            <button type="submit" :disabled="sending"
                    class="grid h-11 w-11 shrink-0 place-items-center rounded-[var(--radius-md)] bg-[var(--color-primary)] text-white disabled:opacity-50">
                <i data-lucide="send" class="h-5 w-5"></i>
            </button>
        </div>
    </form>
</div>
@endsection