@extends('communication.chat.index')

@section('chat_content')
<!-- Chat Header -->
<div class="p-6 bg-white border-b border-gray-100 flex justify-between items-center">
    <div class="flex items-center gap-4">
        @php
            $otherUser = $conversation->user_one_id === Auth::id() ? $conversation->userTwo : $conversation->userOne;
        @endphp
        @if($otherUser)
        <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold shadow-sm">
            {{ substr($otherUser->name, 0, 1) }}
        </div>
        <div>
            <h3 class="font-bold text-gray-900">{{ $otherUser->name }}</h3>
            <span class="text-[10px] text-green-500 font-bold uppercase tracking-widest flex items-center gap-1">
                <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> En ligne
            </span>
        </div>
        @else
        <div class="w-10 h-10 rounded-full bg-gray-400 flex items-center justify-center text-white font-bold shadow-sm">
            ?
        </div>
        <div>
            <h3 class="font-bold text-gray-900">Utilisateur inconnu</h3>
        </div>
        @endif
    </div>
    <div class="flex gap-2">
        <a href="{{ route('communication.jitsi.join', 'Chat-' . $conversation->id) }}" class="w-10 h-10 bg-gray-50 text-gray-600 rounded-xl flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 transition-all">
            <i class="fa-solid fa-video"></i>
        </a>
    </div>
</div>

<!-- Messages Stream -->
<div class="flex-1 overflow-y-auto p-6 space-y-4" id="messages-container">
    @if(session('error'))
        <div class="bg-red-50 text-red-600 p-4 rounded-2xl text-sm font-medium border border-red-100 mb-4">
            {{ session('error') }}
        </div>
    @endif
    @foreach($messages as $msg)
        <div class="flex {{ $msg->sender_id === Auth::id() ? 'justify-end' : 'justify-start' }}">
            <div class="max-w-[70%] {{ $msg->sender_id === Auth::id() ? 'bg-blue-600 text-white rounded-2xl rounded-tr-none' : 'bg-white text-gray-800 border border-gray-100 rounded-2xl rounded-tl-none shadow-sm' }} p-4">
                <p class="text-sm leading-relaxed">{{ $msg->content }}</p>
                <div class="mt-1 flex items-center gap-2 justify-end opacity-60">
                    <span class="text-[9px] font-bold">{{ $msg->created_at->format('H:i') }}</span>
                    @if($msg->sender_id === Auth::id())
                        <i class="fa-solid fa-check-double text-[10px]"></i>
                    @endif
                </div>
            </div>
        </div>
    @endforeach
</div>

<!-- Input Area -->
<div class="p-6 bg-white border-t border-gray-100">
    <form action="{{ route('communication.chat.send') }}" method="POST" class="flex gap-4">
        @csrf
        <input type="hidden" name="conversation_id" value="{{ $conversation->id }}">
        <div class="flex-1 relative">
            <input type="text" name="content" required placeholder="Votre message..." 
                   class="w-full bg-gray-50 border-transparent rounded-2xl py-4 px-6 focus:ring-2 focus:ring-blue-500/20 focus:bg-white focus:border-blue-500 transition-all">
        </div>
        <button type="submit" class="bg-blue-600 text-white px-8 rounded-2xl font-black hover:bg-blue-700 transition-all shadow-lg shadow-blue-500/20 flex items-center gap-3">
            <span>Envoyer</span>
            <i class="fa-solid fa-paper-plane"></i>
        </button>
    </form>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const container = document.getElementById('messages-container');
        container.scrollTop = container.scrollHeight;
    });
</script>
@endsection