@php
    $messages = $record->messages()->oldest()->get();
@endphp

<div class="rounded-3xl border border-gray-200 bg-gray-950 p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
    <div class="mb-4 flex flex-wrap items-center justify-between gap-3 border-b border-white/10 pb-4">
        <div>
            <p class="text-sm font-semibold text-white">Live conversation</p>
            <p class="mt-1 text-xs text-white/50">{{ $record->subject_service }}</p>
        </div>

        <div class="flex flex-wrap items-center gap-2 text-xs font-semibold">
            <span class="inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-1.5 text-white/70">
                <span class="h-2 w-2 rounded-full {{ $record->is_customer_active ? 'bg-emerald-400' : 'bg-gray-500' }}"></span>
                {{ $record->is_customer_active ? 'Customer active' : 'Customer away' }}
            </span>

            <span class="rounded-full px-3 py-1.5 {{ $record->is_waiting_for_staff ? 'bg-amber-400 text-gray-950' : 'bg-emerald-500 text-white' }}">
                {{ $record->is_waiting_for_staff ? 'Waiting for admin reply' : 'Answered' }}
            </span>
        </div>
    </div>

    <div class="max-h-[520px] space-y-3 overflow-y-auto pr-1" style="scrollbar-width: thin;">
        @forelse ($messages as $message)
            @php
                $isCustomer = $message->sender_type === 'customer';
            @endphp

            <div class="flex {{ $isCustomer ? 'justify-start' : 'justify-end' }}">
                <div class="max-w-[82%] rounded-3xl px-4 py-3 {{ $isCustomer ? 'rounded-tl-md bg-white text-gray-950' : 'rounded-tr-md bg-primary-600 text-white' }}">
                    <div class="mb-1 text-[10px] font-black uppercase tracking-[0.18em] {{ $isCustomer ? 'text-gray-400' : 'text-white/60' }}">
                        {{ $isCustomer ? 'Customer' : 'Admin' }}
                    </div>
                    <p class="whitespace-pre-wrap text-sm leading-relaxed">{{ $message->message }}</p>
                    <div class="mt-2 text-[11px] {{ $isCustomer ? 'text-gray-400' : 'text-white/50' }}">
                        {{ $message->created_at?->format('M j, Y H:i') }}
                    </div>
                </div>
            </div>
        @empty
            <div class="rounded-2xl border border-dashed border-white/15 p-8 text-center text-sm text-white/50">
                No messages yet.
            </div>
        @endforelse
    </div>

    <form method="POST" action="{{ route('admin.support-conversations.reply-inline', $record) }}" class="mt-4 flex gap-3 border-t border-white/10 pt-4">
        @csrf
        <textarea
            name="message"
            rows="2"
            required
            placeholder="Write a reply to the customer..."
            class="min-h-[54px] flex-1 resize-none rounded-2xl border border-white/10 bg-white px-4 py-3 text-sm text-gray-950 outline-none transition focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30"
        ></textarea>
        <button
            type="submit"
            class="shrink-0 rounded-2xl bg-primary-600 px-5 py-3 text-xs font-black uppercase tracking-widest text-white transition hover:bg-primary-500"
        >
            Send
        </button>
    </form>
</div>