@php
    $hasActiveConversation = isset($activeConversation);

    $currentId = $currentUserId ?? auth()->id();

    $chatTitle = 'Wybierz rozmowę';

    if ($hasActiveConversation) {
        if ($activeConversation->type === 'group') {
            $chatTitle = $activeConversation->name ?: 'Grupa #' . $activeConversation->id;
        } else {
            $other = $activeConversation->participantsUsers
                ->firstWhere('id', '!=', $currentId);
            $chatTitle = $other->name ?? 'Rozmowa #' . $activeConversation->id;
        }
    }

    // ostatnie ID wiadomości (albo 0 gdy brak)
    $lastMessageId = ($messages ?? collect())->last()->id ?? 0;
@endphp

<div class="card h-100 border-0 erp-soft-box w-100">
    <div class="card-body d-flex flex-column p-0">

        {{-- NAGŁÓWEK --}}
        <div class="px-3 py-2 border-bottom d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <div class="me-2">
                    <span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-primary"
                          style="width: 40px; height: 40px;">
                        @if($hasActiveConversation && $activeConversation->type === 'group')
                            <i class="bi bi-people-fill"></i>
                        @else
                            <i class="bi bi-person-fill"></i>
                        @endif
                    </span>
                </div>
                <div>
                    <div class="fw-semibold">
                        {{ $chatTitle }}
                    </div>
                    <div class="text-muted small">
                        @if($hasActiveConversation)
                            {{ $activeConversation->participants_label ?? 'Uczestnicy rozmowy' }}
                        @else
                            Aby rozpocząć, wybierz rozmowę z listy po lewej stronie lub utwórz nową.
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- WIADOMOŚCI – scrolluje się tylko ta sekcja --}}
        <div
            class="erp-messages-chat flex-grow-1 overflow-auto px-3 py-3"
            id="chat-messages"
            data-conversation-id="{{ $hasActiveConversation ? $activeConversation->id : '' }}"
            data-last-message-id="{{ $lastMessageId }}"
        >
            @if($hasActiveConversation)
                @forelse(($messages ?? []) as $message)
                    @include('modules.wiadomosci._message_bubble', [
                        'message' => $message,
                        'own' => ($message->sender_id == $currentId),
                    ])
                @empty
                    <div class="text-center text-muted small my-4">
                        Brak wiadomości w tej rozmowie. Napisz pierwszą wiadomość poniżej.
                    </div>
                @endforelse
            @else
                <div class="d-flex flex-column align-items-center justify-content-center text-muted py-5">
                    <div class="mb-3">
                        <span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-secondary-subtle text-secondary"
                              style="width: 64px; height: 64px;">
                            <i class="bi bi-chat-dots fs-3"></i>
                        </span>
                    </div>
                    <p class="mb-1 fw-semibold">Wybierz rozmowę lub utwórz nową</p>
                    <p class="mb-0 small">
                        Użyj panelu po lewej stronie, aby rozpocząć rozmowę z użytkownikiem lub grupą.
                    </p>
                </div>
            @endif
        </div>

        {{-- FORMULARZ WYSYŁANIA --}}
        <div class="border-top px-3 py-2">
            <form method="post"
                  action="{{ $hasActiveConversation ? route('wiadomosci.messages.store', $activeConversation->id) : '#' }}"
                  id="chat-send-form">
                @csrf
                <div class="d-flex align-items-end gap-2">
                    <div class="flex-grow-1">
                        <textarea
                            name="body"
                            class="form-control form-control-sm @if(!$hasActiveConversation) disabled @endif"
                            rows="2"
                            placeholder="{{ $hasActiveConversation ? 'Napisz wiadomość...' : 'Najpierw wybierz rozmowę...' }}"
                            @if(!$hasActiveConversation) disabled @endif
                        ></textarea>
                    </div>
                    <div class="d-flex flex-column gap-2">
                        <button type="submit"
                                class="btn btn-primary btn-sm"
                                @if(!$hasActiveConversation) disabled @endif>
                            <i class="bi bi-send-fill me-1"></i> Wyślij
                        </button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>