@extends('layouts.admin')

@section('title', 'Messagerie Interne')

@section('content')
<div class="p-8 h-[calc(100vh-80px)]">
    <div class="max-w-6xl mx-auto h-full flex bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100">
        <!-- Sidebar: Conversations -->
        <div class="w-80 border-r border-gray-100 flex flex-col">
            <div class="p-6 border-b border-gray-50 flex justify-between items-center">
                <h2 class="font-black text-xl text-gray-900">Messages</h2>
                <button class="w-10 h-10 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center hover:bg-blue-600 hover:text-white transition-all">
                    <i class="fa-solid fa-edit"></i>
                </button>
            </div>
            
            <div class="flex-1 overflow-y-auto p-4 space-y-2">
                @forelse($conversations as $conv)
                    @php
                        $otherUser = $conv->user_one_id === Auth::id() ? $conv->userTwo : $conv->userOne;
                        $isCurrentConversation = request()->routeIs('communication.chat.show') && isset($conversation) && $conversation->id === $conv->id;
                    @endphp
                    <a href="{{ route('communication.chat.show', $conv->id) }}" 
                       class="flex items-center gap-4 p-3 rounded-2xl hover:bg-gray-50 transition-all {{ $isCurrentConversation ? 'bg-blue-50 border-blue-100' : '' }}">
                        @if($otherUser)
                        <div class="w-12 h-12 rounded-full royal-gradient flex items-center justify-center text-white font-bold text-lg shadow-sm">
                            {{ substr($otherUser->name, 0, 1) }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex justify-between items-baseline">
                                <h4 class="font-bold text-gray-900 truncate">{{ $otherUser->name }}</h4>
                                <span class="text-[10px] text-gray-400">{{ $conv->last_message_at ? $conv->last_message_at->format('H:i') : '' }}</span>
                            </div>
                            <p class="text-xs text-gray-500 truncate">
                                {{ $conv->lastMessage?->content ?? 'Nouvelle conversation' }}
                            </p>
                        </div>
                        @else
                        <div class="flex-1 min-w-0">
                            <p class="text-xs text-gray-400">Conversation avec un utilisateur supprimé</p>
                        </div>
                        @endif
                    </a>
                @empty
                    <div class="text-center py-10">
                        <p class="text-gray-400 text-sm">Aucune conversation</p>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Chat Area -->
        <div class="flex-1 flex flex-col bg-gray-50/30">
            @if(isset($conversation))
                @yield('chat_content')
            @else
                <div class="flex-1 flex flex-col items-center justify-center text-center p-20">
                    <div class="w-24 h-24 bg-blue-100 text-blue-600 rounded-3xl flex items-center justify-center mb-6 shadow-lg shadow-blue-50">
                        <i class="fa-solid fa-comments text-4xl"></i>
                    </div>
                    <h3 class="text-2xl font-black text-gray-900 mb-2">Votre Messagerie</h3>
                    <p class="text-gray-500 max-w-sm">Sélectionnez une conversation pour commencer à discuter avec vos collègues ou professeurs.</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection