<%- include('partials/head', { title: selected ? selected.name : 'Dashboard', basePath }) %>
<div class="app-shell">
  <aside class="sidebar">
    <div class="brand-lockup compact">
      <div class="brand-mark">VX</div>
      <div><span>VX GAMES</span><strong>VX BOT</strong></div>
    </div>
    <nav>
      <a href="#overview" class="nav-item active" data-section-link="overview"><span>◫</span> Vue générale</a>
      <a href="#welcome" class="nav-item" data-section-link="welcome"><span>✦</span> Accueil & autorôle</a>
      <a href="#embeds" class="nav-item" data-section-link="embeds"><span>▤</span> Embed Studio</a>
      <a href="#roles" class="nav-item" data-section-link="roles"><span>◉</span> Rôles interactifs</a>
      <a href="#games" class="nav-item" data-section-link="games"><span>◇</span> Connexion jeux <i>BIENTÔT</i></a>
    </nav>
    <div class="sidebar-footer">
      <div class="bot-health"><span class="live-dot"></span><div><small>BOT STATUS</small><strong>OPÉRATIONNEL</strong></div></div>
      <form action="<%= basePath %>/logout" method="post"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="ghost-button" type="submit">Déconnexion</button></form>
    </div>
  </aside>

  <main class="dashboard-main">
    <header class="topbar">
      <div>
        <div class="eyebrow">VX GAMES / COMMAND CENTER</div>
        <h1><%= selected ? selected.name : 'Aucun serveur connecté' %></h1>
      </div>
      <div class="topbar-actions">
        <% if (guilds.length) { %>
          <select class="server-select" onchange="location.href='<%= basePath %>/dashboard?guild='+this.value">
            <% guilds.forEach(guild => { %>
              <option value="<%= guild.id %>" <%= selected?.id === guild.id ? 'selected' : '' %>><%= guild.name %></option>
            <% }) %>
          </select>
        <% } %>
        <div class="user-chip">
          <% if (user.avatar) { %><img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.png?size=64" alt=""><% } else { %><span><%= user.username.slice(0, 1).toUpperCase() %></span><% } %>
          <div><small>ADMINISTRATEUR</small><strong><%= user.globalName || user.username %></strong></div>
        </div>
      </div>
    </header>

    <% if (flash) { %><div class="flash <%= flash.type %>"><%= flash.message %></div><% } %>

    <% if (!selected) { %>
      <section class="empty-state glass">
        <div class="brand-mark">VX</div>
        <div class="eyebrow">NO GUILD DETECTED</div>
        <h2>Ajoute VX BOT à ton serveur.</h2>
        <p>Le panneau affichera uniquement les serveurs que tu peux gérer et sur lesquels VX BOT est installé.</p>
        <a class="primary-button" href="<%= inviteUrl %>" target="_blank" rel="noreferrer">Installer VX BOT</a>
      </section>
    <% } else { %>
      <section id="overview" class="panel-section active" data-section="overview">
        <div class="hero-panel glass">
          <div>
            <div class="eyebrow">SERVER CONTROL / ONLINE</div>
            <h2>Bienvenue dans le centre de contrôle.</h2>
            <p>VX BOT centralise les outils communautaires de <strong><%= selected.name %></strong> et prépare la passerelle avec les futurs jeux VX GAMES.</p>
          </div>
          <div class="hero-signal"><span>VX</span><i></i><b>ONLINE</b></div>
        </div>
        <div class="stats-grid">
          <article class="stat-card glass"><small>MEMBRES</small><strong><%= selected.live.memberCount %></strong><span>Population Discord</span></article>
          <article class="stat-card glass"><small>SALONS</small><strong><%= selected.live.channels.cache.size %></strong><span>Canaux détectés</span></article>
          <article class="stat-card glass"><small>RÔLES</small><strong><%= selected.live.roles.cache.size %></strong><span>Hiérarchie active</span></article>
          <article class="stat-card glass"><small>MODULES</small><strong>04</strong><span>Fonctions disponibles</span></article>
        </div>
        <div class="two-column">
          <article class="content-card glass">
            <div class="card-heading"><div><small>ACTIVITÉ RÉCENTE</small><h3>Journal administratif</h3></div><span class="badge">LIVE</span></div>
            <div class="activity-list">
              <% if (!auditLogs.length) { %><p class="muted">Aucune action enregistrée pour le moment.</p><% } %>
              <% auditLogs.forEach(log => { %>
                <div class="activity-row"><span class="activity-icon">↗</span><div><strong><%= log.action %></strong><p><%= log.details || 'Action système' %></p></div><time><%= new Date(log.createdAt + 'Z').toLocaleString('fr-FR', { dateStyle: 'short', timeStyle: 'short' }) %></time></div>
              <% }) %>
            </div>
          </article>
          <article class="content-card glass roadmap-card">
            <div class="card-heading"><div><small>ARCHITECTURE</small><h3>Évolution VX GAMES</h3></div></div>
            <div class="roadmap-step done"><b>01</b><div><strong>Socle communautaire</strong><p>Accueil, autorôle, embeds et rôles.</p></div></div>
            <div class="roadmap-step"><b>02</b><div><strong>Modération & tickets</strong><p>Automod, sanctions, support et reports.</p></div></div>
            <div class="roadmap-step"><b>03</b><div><strong>Game Bridge</strong><p>Comptes joueurs, succès et annonces live.</p></div></div>
          </article>
        </div>
      </section>

      <section id="welcome" class="panel-section" data-section="welcome">
        <div class="section-heading"><div><div class="eyebrow">AUTOMATION MODULE</div><h2>Accueil & autorôle</h2><p>Définis l’expérience d’arrivée des nouveaux membres.</p></div><span class="module-number">01</span></div>
        <form class="settings-grid" action="<%= basePath %>/guild/<%= selected.id %>/settings" method="post">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>">
          <article class="content-card glass form-card">
            <label class="switch-line"><div><strong>Message d’accueil</strong><span>Publier automatiquement un embed lors d’une arrivée.</span></div><input type="checkbox" name="welcomeEnabled" <%= settings.welcomeEnabled ? 'checked' : '' %>><i></i></label>
            <label>Salon d’accueil<select name="welcomeChannelId"><option value="">Aucun salon</option><% channels.forEach(channel => { %><option value="<%= channel.id %>" <%= settings.welcomeChannelId === channel.id ? 'selected' : '' %>># <%= channel.name %></option><% }) %></select></label>
            <label>Message<textarea name="welcomeMessage" rows="6"><%= settings.welcomeMessage %></textarea><small>Variables : {user}, {server}, {count}</small></label>
          </article>
          <article class="content-card glass form-card">
            <label>Rôle automatique<select name="autoRoleId"><option value="">Aucun rôle</option><% roles.forEach(role => { %><option value="<%= role.id %>" <%= settings.autoRoleId === role.id ? 'selected' : '' %>><%= role.name %></option><% }) %></select><small>VX BOT doit être placé au-dessus du rôle choisi.</small></label>
            <label>Salon de logs<select name="logChannelId"><option value="">Aucun salon</option><% channels.forEach(channel => { %><option value="<%= channel.id %>" <%= settings.logChannelId === channel.id ? 'selected' : '' %>># <%= channel.name %></option><% }) %></select></label>
            <div class="preview-welcome"><div class="preview-avatar">VX</div><div><strong>VX GAMES • Nouveau membre</strong><p id="welcomePreview"><%= settings.welcomeMessage.replace('{user}', '@NouveauMembre').replace('{server}', selected.name).replace('{count}', selected.live.memberCount) %></p></div></div>
            <button class="primary-button" type="submit">Enregistrer la configuration</button>
          </article>
        </form>
      </section>

      <section id="embeds" class="panel-section" data-section="embeds">
        <div class="section-heading"><div><div class="eyebrow">COMMUNICATION MODULE</div><h2>Embed Studio</h2><p>Crée et publie des annonces premium sans commande Discord.</p></div><span class="module-number">02</span></div>
        <div class="embed-workspace">
          <form class="content-card glass form-card" action="<%= basePath %>/guild/<%= selected.id %>/embed" method="post" id="embedForm">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <label>Salon<select name="channelId" required><% channels.forEach(channel => { %><option value="<%= channel.id %>"># <%= channel.name %></option><% }) %></select></label>
            <div class="input-pair"><label>Titre<input name="title" value="Annonce VX GAMES" maxlength="256" required></label><label>Couleur<input name="color" type="color" value="#7c5cff"></label></div>
            <label>Description<textarea name="description" rows="8" required>Une nouvelle communication officielle est disponible.</textarea></label>
            <label>Pied de page<input name="footer" value="VX GAMES • Communication officielle"></label>
            <div class="input-pair"><label>Image (URL)<input name="imageUrl" type="url" placeholder="https://..."></label><label>Miniature (URL)<input name="thumbnailUrl" type="url" placeholder="https://..."></label></div>
            <div class="input-pair"><label>Bouton<input name="buttonLabel" placeholder="Voir l’annonce"></label><label>Lien du bouton<input name="buttonUrl" type="url" placeholder="https://..."></label></div>
            <button class="primary-button" type="submit">Publier l’embed</button>
          </form>
          <article class="content-card glass preview-stage">
            <div class="stage-label">LIVE PREVIEW</div>
            <div class="discord-preview" id="embedPreview">
              <div class="discord-avatar">VX</div>
              <div class="discord-message"><strong>VX BOT <span>APP</span></strong><small>Aujourd’hui à 04:00</small>
                <div class="embed-preview-card">
                  <h3 data-preview="title">Annonce VX GAMES</h3>
                  <p data-preview="description">Une nouvelle communication officielle est disponible.</p>
                  <img data-preview="image" hidden alt="Aperçu">
                  <footer data-preview="footer">VX GAMES • Communication officielle</footer>
                </div>
              </div>
            </div>
          </article>
        </div>
      </section>

      <section id="roles" class="panel-section" data-section="roles">
        <div class="section-heading"><div><div class="eyebrow">IDENTITY MODULE</div><h2>Rôles interactifs</h2><p>Publie un panneau permettant aux membres de choisir leurs rôles.</p></div><span class="module-number">03</span></div>
        <div class="two-column">
          <form class="content-card glass form-card" action="<%= basePath %>/guild/<%= selected.id %>/role-panel" method="post">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <label>Salon<select name="channelId" required><% channels.forEach(channel => { %><option value="<%= channel.id %>"># <%= channel.name %></option><% }) %></select></label>
            <label>Titre<input name="title" value="Choisis tes rôles" required></label>
            <label>Description<textarea name="description" rows="4" required>Sélectionne les jeux et notifications que tu souhaites suivre.</textarea></label>
            <label>Rôles<textarea name="roles" rows="8" required placeholder="ID_DU_ROLE|SIGNAL LOST|📡&#10;ID_DU_ROLE|NIGHT LINE|🚔"></textarea><small>Une ligne par bouton : ID du rôle | libellé | emoji optionnel. Maximum 5.</small></label>
            <button class="primary-button" type="submit">Publier le panneau</button>
          </form>
          <article class="content-card glass role-helper">
            <small>RÔLES DISPONIBLES</small><h3>Copie les identifiants nécessaires</h3>
            <div class="role-list"><% roles.forEach(role => { %><button type="button" class="role-copy" data-copy="<%= role.id %>"><span style="--role-color:<%= role.color %>"></span><%= role.name %><code><%= role.id %></code></button><% }) %></div>
          </article>
        </div>
      </section>

      <section id="games" class="panel-section" data-section="games">
        <div class="section-heading"><div><div class="eyebrow">GAME BRIDGE / ROADMAP</div><h2>Connexion aux jeux</h2><p>La fondation est prête pour relier Discord à l’écosystème VX GAMES.</p></div><span class="module-number">04</span></div>
        <div class="games-grid">
          <article class="game-card glass"><div class="game-icon">📡</div><small>PROJECT</small><h3>SIGNAL LOST</h3><p>Statut des serveurs, rôles joueurs, annonces de sessions et événements.</p><span>EN PRÉPARATION</span></article>
          <article class="game-card glass"><div class="game-icon">🚔</div><small>PROJECT</small><h3>NIGHT LINE</h3><p>Actualités, progression communautaire, bêta-test et signalements.</p><span>EN PRÉPARATION</span></article>
          <article class="game-card glass"><div class="game-icon">▣</div><small>CORE SERVICE</small><h3>VX IDENTITY</h3><p>Liaison sécurisée entre compte Discord et profil joueur VX GAMES.</p><span>ARCHITECTURE PRÊTE</span></article>
        </div>
      </section>
    <% } %>
  </main>
</div>
<%- include('partials/end', { basePath }) %>
