@php
    $messages = $record->messages()->with('sender')->orderBy('created_at', 'asc')->get();
@endphp

<div class="space-y-4">
    <!-- Información del cliente -->
    <div class="flex items-center justify-between p-3 bg-gray-900/60 rounded-xl border border-gray-800 text-xs">
        <div class="flex items-center gap-2.5">
            <div class="w-8 h-8 rounded-full bg-amber-500/20 text-amber-400 font-bold flex items-center justify-center border border-amber-500/30">
                {{ strtoupper(substr($record->user->name ?? 'U', 0, 1)) }}
            </div>
            <div>
                <span class="font-bold text-white block">{{ $record->user->name ?? 'Usuario' }}</span>
                <span class="text-gray-400 text-[11px]">{{ $record->user->email }} @if($record->user->phone) • {{ $record->user->phone }} @endif</span>
            </div>
        </div>
        <div>
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-semibold {{ $record->status === 'open' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-gray-800 text-gray-400' }}">
                {{ $record->status === 'open' ? '🟢 En Línea' : '⚪ Cerrado' }}
            </span>
        </div>
    </div>

    <!-- Contenedor del Chat en Cascada -->
    <div id="chat-thread-container" class="max-h-[380px] overflow-y-auto p-4 bg-gray-950/80 rounded-2xl border border-gray-800 space-y-3.5">
        @if($messages->isEmpty())
            <div class="py-8 text-center text-gray-500 text-sm">
                💬 No hay mensajes grabados en esta conversación aún.
            </div>
        @else
            @foreach($messages as $msg)
                @php
                    $isUser = $msg->sender_type === 'user';
                    $isBot = $msg->sender_type === 'bot';
                @endphp

                @if($isBot)
                    <!-- Mensaje Bot Sistema -->
                    <div class="flex justify-center my-2">
                        <div class="bg-gray-900 border border-gray-800 text-gray-400 text-xs py-1.5 px-3 rounded-full flex items-center gap-1.5 shadow-sm max-w-[85%] text-center">
                            <span>🤖</span>
                            <span>{{ $msg->message }}</span>
                            <span class="text-[10px] text-gray-500 ml-1">{{ $msg->created_at->format('H:i') }}</span>
                        </div>
                    </div>
                @elseif($isUser)
                    <!-- Mensaje Usuario (Izquierda) -->
                    <div class="flex items-start gap-2.5 max-w-[85%]">
                        <div class="w-7 h-7 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold flex items-center justify-center flex-shrink-0 mt-0.5 border border-blue-500/30">
                            {{ strtoupper(substr($record->user->name ?? 'U', 0, 1)) }}
                        </div>
                        <div class="flex flex-col">
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-xs font-semibold text-gray-300">{{ $record->user->name ?? 'Cliente' }}</span>
                                <span class="text-[10px] text-gray-500">{{ $msg->created_at->format('d/m/Y H:i') }}</span>
                            </div>
                            <div class="bg-gray-800 text-gray-100 p-3 rounded-2xl rounded-tl-sm text-sm border border-gray-700 leading-relaxed shadow-sm">
                                {!! nl2br(e($msg->message)) !!}
                            </div>
                        </div>
                    </div>
                @else
                    <!-- Mensaje Agente (Derecha) -->
                    <div class="flex items-start justify-end gap-2.5 ml-auto max-w-[85%]">
                        <div class="flex flex-col items-end">
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-[10px] text-gray-500">{{ $msg->created_at->format('d/m/Y H:i') }}</span>
                                <span class="text-xs font-semibold text-amber-400">Soporte Wincar 🛡️</span>
                            </div>
                            <div class="bg-gradient-to-r from-amber-600/30 to-yellow-600/30 text-amber-100 p-3 rounded-2xl rounded-tr-sm text-sm border border-amber-500/40 leading-relaxed shadow-sm">
                                {!! nl2br(e($msg->message)) !!}
                            </div>
                            @if($msg->sender)
                                <span class="text-[10px] text-gray-500 mt-0.5">Enviado por {{ $msg->sender->name }}</span>
                            @endif
                        </div>
                        <div class="w-7 h-7 rounded-full bg-amber-500/30 text-amber-300 text-xs font-bold flex items-center justify-center flex-shrink-0 mt-0.5 border border-amber-500/40">
                            🛡️
                        </div>
                    </div>
                @endif
            @endforeach
        @endif
    </div>
</div>

<script>
    setTimeout(function() {
        const container = document.getElementById('chat-thread-container');
        if (container) {
            container.scrollTop = container.scrollHeight;
        }
    }, 150);
</script>
