<div class="container py-4">
    <div class="row g-4">
        <!-- Sidebar: Conversations List -->
        <div class="col-md-4">
            <div class="card border-0 shadow-sm overflow-hidden" style="height: 600px; display: flex; flex-direction: column;">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="fw-bold font-outfit text-dark m-0"><i class="fa-regular fa-comments text-primary me-2"></i>My Chats</h5>
                </div>
                <div class="list-group list-group-flush flex-grow-1 overflow-y-auto" id="conversations-sidebar-list">
                    <?php if (!empty($conversations)): ?>
                        <?php foreach ($conversations as $conv): ?>
                            <?php
                            $cName = Auth::isStudent()
                                ? $conv['mentor_first'] . ' ' . $conv['mentor_last']
                                : $conv['student_first'] . ' ' . $conv['student_last'];
                            $cAvatar = Auth::isStudent() ? $conv['mentor_avatar'] : $conv['student_avatar'];
                            ?>
                            <a href="<?= APP_URL ?>/messages/<?= $conv['id'] ?>" class="list-group-item list-group-item-action border-0 py-3 px-3 d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <img src="<?= avatarUrl($cAvatar, $cName) ?>" alt="Avatar" class="avatar-sm rounded-circle me-3">
                                    <div>
                                        <h6 class="fw-bold text-dark mb-1 text-truncate" style="max-width: 150px;"><?= htmlspecialchars($cName) ?></h6>
                                        <small class="text-muted text-xs d-block text-truncate" style="max-width: 180px;"><?= htmlspecialchars($conv['last_message'] ?: 'No messages yet') ?></small>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <?php if ($conv['unread_count'] > 0): ?>
                                        <span class="badge bg-danger rounded-pill px-2 text-2xs mb-1"><?= $conv['unread_count'] ?></span>
                                    <?php endif; ?>
                                    <small class="text-muted text-3xs d-block"><?= $conv['last_message_at'] ? timeAgo($conv['last_message_at']) : '' ?></small>
                                </div>
                            </a>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="text-center py-5 text-muted">
                            <i class="fa-regular fa-message display-6 mb-3"></i>
                            <p class="text-xs">No active chat sessions.</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Main Chat Box Placeholder -->
        <div class="col-md-8">
            <div class="card border-0 shadow-sm d-flex align-items-center justify-content-center text-center p-5 bg-glass" style="height: 600px;">
                <div>
                    <div class="badge-icon-box bg-primary-subtle text-primary rounded-circle mx-auto mb-4" style="width: 80px; height: 80px;"><i class="fa-regular fa-comment-dots fs-2"></i></div>
                    <h4 class="fw-bold font-outfit text-dark">No Conversation Selected</h4>
                    <p class="text-muted text-sm mx-auto mb-0" style="max-width: 320px;">Select a contact from your sidebar inbox or request mentorship from the directory to start a live messaging session.</p>
                </div>
            </div>
        </div>
    </div>
</div>
