<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau de bord | RJLResaka</title>
    <meta name="description" content="Tableau de bord RJLResaka avec liste des utilisateurs disponibles pour chatter.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
</head>
<body class="dashboard-body">
    <main class="dashboard-shell">
        <section class="sidebar glass">
            <div class="sidebar-top">
                <span class="hero-badge">Connecté</span>
                <a class="ghost-link" href="${pageContext.request.contextPath}/logout">Déconnexion</a>
            </div>
            <div class="profile-card">
                <div class="avatar" style="background:${sessionScope.authUser.avatarColor}">${sessionScope.authUser.initials}</div>
                <div>
                    <h1>${sessionScope.authUser.fullName}</h1>
                    <p>@${sessionScope.authUser.username}</p>
                    <small>${sessionScope.authUser.email}</small>
                </div>
            </div>
            <div class="panel-note">
                <strong>Étape livrée :</strong>
                Authentification complète + liste des utilisateurs.<br>
                La prochaine étape branchera les conversations privées, l'upload d'images/fichiers et les réactions.
            </div>
        </section>

        <section class="content-panel glass">
            <div class="content-head">
                <div>
                    <span class="section-kicker">Utilisateurs</span>
                    <h2>Choisissez une personne à qui parler</h2>
                </div>
                <span class="pill">${fn:length(users)} compte(s)</span>
            </div>

            <c:if test="${not empty error}">
                <div class="alert error">${error}</div>
            </c:if>

            <div class="user-grid">
                <c:forEach items="${users}" var="item">
                    <article class="user-card">
                        <div class="avatar large" style="background:${item.avatarColor}">${item.initials}</div>
                        <h3>${item.fullName}</h3>
                        <p>@${item.username}</p>
                        <small>${item.email}</small>
                        <button class="button secondary" type="button" disabled>Chat disponible à l'étape suivante</button>
                    </article>
                </c:forEach>

                <c:if test="${empty users}">
                    <article class="empty-card">
                        <h3>Aucun autre utilisateur pour le moment</h3>
                        <p>Créez un deuxième compte pour tester le chat privé ensuite.</p>
                    </article>
                </c:if>
            </div>

            <c:if test="${not empty debugMessage}">
                <p class="debug-note">Détail technique: ${debugMessage}</p>
            </c:if>
        </section>
    </main>
    <script src="${pageContext.request.contextPath}/assets/js/app.js"></script>
</body>
</html>
