@php
    $layout = Auth::check() && Auth::user()->role === 'company'
        ? 'layouts.entreprise_base'
        : 'layouts.home';
@endphp

@extends($layout)

@section('content')
<div class="container mx-auto p-4 flex space-x-4">
    <!-- Liste des conversations -->
    <div class="w-1/3 bg-white shadow-lg rounded-lg p-4">
        <h2 class="text-2xl font-bold mb-4">Messagerie</h2>

        <input type="text" id="searchInput" placeholder="Rechercher une conversation..." class="border p-2 w-full mb-4 rounded">

        @foreach($conversations as $conversation)
            @php
                $lastMessage = $conversation->messages->last();
            @endphp
            <div class="cursor-pointer flex justify-between items-center p-3 border-b hover:bg-gray-100 conversation-item"
                onclick="loadMessages({{ $conversation->id }})"
                data-conversation-id="{{ $conversation->id }}">

                <div>
                    <p class="font-semibold">
                        @if(auth()->user()->role == 'candidate')
                            {{ $conversation->postulation->offre->entreprise->nom }}
                        @else
                            {{ $conversation->postulation->candidate->first_name }}
                        @endif
                    </p>
                    <p class="text-gray-600 text-sm">
                        {{ $lastMessage ? Str::limit($lastMessage->content, 50) : 'Aucun message' }}
                    </p>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Messages -->
    <div class="w-2/3 bg-white shadow-lg rounded-lg p-4" id="messageContent">
        <p class="text-gray-500 text-center">Sélectionnez une conversation pour voir les messages.</p>
    </div>
</div>

<!-- Laravel Echo + Pusher -->

<script>
    document.addEventListener("DOMContentLoaded", function () {
        let savedConversationId = localStorage.getItem("openConversation");
        if (savedConversationId) {
            loadMessages(savedConversationId);
        }
    });

    function loadMessages(conversationId) {
        fetch(`${BASE_URL}/messages/${conversationId}`)
            .then(response => response.text())
            .then(html => {
                document.getElementById("messageContent").innerHTML = html;
                localStorage.setItem("openConversation", conversationId);
            })
            .catch(error => console.error("Erreur de chargement:", error));
    }

    function sendMessage(event, conversationId) {
        event.preventDefault();

        let form = event.target;
        let formData = new FormData(form);

        fetch(`${BASE_URL}/messages/store`, {
            method: "POST",
            body: formData,
            headers: {
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content"),
            },
        })
        .then(response => response.json())
        .then(message => {
            displayMessage(message);
            form.reset();
        })
        .catch(error => console.error("Erreur d'envoi:", error));
    }

    function displayMessage(message) {
        let messageContainer = document.getElementById("messages-container");
        let newMessage = `<div class="message">${message.content}</div>`;
        messageContainer.innerHTML += newMessage;
    }
</script>
@endsection