amayo/src/server/views/pages/dashboard.ejs

<!-- dashboard_nav is rendered by the layout via renderTemplate to avoid unresolved Promise output -->
  <div class="max-w-3xl mx-auto p-6">
  <div class="relative flex justify-center">
  <% if (!selectedGuild) { %>
      <!-- Centered logo + selection card to match mock -->
  <div class="hidden md:flex flex-col items-center justify-start">
        <!-- logo area -->
        <div class="mt-10 mb-6">
          <!-- reuse small logo SVG -->
          <div class="w-12 h-12 mx-auto">
              <img src="/assets/images/logo-amayo.svg" alt="logo" class="mx-auto mb-4 rounded-full" />
          </div>
        </div>

        <!-- Mobile CTA: open server list sheet when no guild selected -->
        <div class="md:hidden text-center mt-8">
          <button id="openMobileGuildList" class="px-4 py-2 rounded-md bg-slate-700 text-white">Seleccionar servidor</button>
        </div>
        <!-- Floating touch CTA for touch devices (visible when no selectedGuild) -->
        <button id="floatingTouchGuildBtn" class="hidden" style="position:fixed;right:16px;bottom:18px;z-index:60;padding:10px 14px;border-radius:10px;background:#374151;color:#fff;border:none;">Servers</button>

        <div class="w-full max-w-lg">
          <div class="mx-auto backdrop-blur-md bg-white/6 rounded-xl p-6 shadow-xl glass-card">
            <!-- user header inside card -->
            <div class="flex items-center justify-center mb-4">
              <div class="text-slate-200 text-sm">Logged in as</div>
              <div class="ml-3 relative">
                <button id="cardUserBtn" class="flex items-center gap-2 px-3 py-1 rounded-md hover:bg-white/5 focus:outline-none" aria-expanded="false">
                  <% if (user && user.id && user.avatar) { %>
                    <img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.webp" class="w-8 h-8 rounded-full" alt="avatar">
                  <% } else { %>
                    <img src="/assets/images/snap1.svg" class="w-8 h-8 rounded-full" alt="avatar">
                  <% } %>
                  <span class="text-white font-medium"><%= user?.username || 'User' %></span>
                  <svg class="w-3 h-3 text-white/80" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
                <div id="cardUserMenu" class="absolute right-0 mt-2 w-36 bg-white/6 backdrop-blur rounded-md p-2 hidden">
                  <!-- Hidden on mobile because the mobile sheet handles user actions -->
                  <a href="/auth/logout" class="block px-3 py-2 text-sm text-rose-300 hover:bg-white/5 rounded">Log out</a>
                </div>
              </div>
            </div>

            <div id="cardList" class="max-h-72 overflow-auto rounded">
              <% if (guilds && guilds.length) { %>
                <% guilds.sort((a,b)=> a.name.localeCompare(b.name)).forEach(g => { %>
                  <div class="p-3 cursor-pointer hover:bg-white/5 flex items-center justify-between text-white" data-id="<%= g.id %>">
                    <div class="flex items-center gap-3">
                      <% if (g.icon) { %>
                        <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-8 h-8 rounded-full" alt="icon">
                      <% } else { %>
                        <div class="w-8 h-8 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
                      <% } %>
                      <div class="text-left">
                        <div class="font-medium"><%= g.name %></div>
                      </div>
                    </div>
                    <div class="flex items-center gap-2">
                      <% if (typeof g.botInGuild === 'boolean' && !g.botInGuild) { %>
                        <a href="https://discord.com/oauth2/authorize?client_id=991062751633883136&permissions=2416176272&integration_type=0&scope=bot&guild_id=<%= g.id %>" class="text-xs text-sky-400 hover:underline mr-2" target="_blank" rel="noopener">Invitar bot</a>
                      <% } %>
                      <div class="text-slate-300">&rsaquo;</div>
                    </div>
                  </div>
                <% }) %>
              <% } else { %>
                <div class="p-4 text-slate-300">No servers available</div>
              <% } %>
            </div>
          </div>

          <div class="text-center text-xs text-slate-400 mt-6">© 2021–2025 ShniCorp •  Terms  •  Privacy </div>
        </div>
      </div>

      <script>
        (function(){
          const card = document.querySelector('[data-id]')?.closest('.mx-auto');
          // user menu toggle inside card
          const userBtn = document.getElementById('cardUserBtn');
          const userMenu = document.getElementById('cardUserMenu');
          if (userBtn && userMenu) {
            userBtn.addEventListener('click',(e)=>{ e.stopPropagation(); const open = userMenu.classList.contains('hidden'); if (open) { userMenu.classList.remove('hidden'); } else { userMenu.classList.add('hidden'); } });
            document.addEventListener('click', ()=> userMenu.classList.add('hidden'));
          }

          // clicking a guild row navigates
          document.getElementById('cardList')?.addEventListener('click', (e)=>{
            let el = e.target;
            while (el && !el.dataset?.id) el = el.parentElement;
            if (el && el.dataset && el.dataset.id) {
              const id = el.dataset.id;
              window.location.href = `/dashboard/${id}/overview`;
            }
          });
        })();
      </script>
    <% } %>

    <div id="dashContent">
    <% if (typeof page !== 'undefined' && page === 'overview' && selectedGuild) { %>
      <div class="w-full max-w-7xl mx-auto mt-6 px-4">
        <div class="flex gap-8">
          <!-- Left sidebar -->
          <aside class="w-64 hidden lg:block">
            <nav class="bg-white/4 border border-white/6 rounded-xl p-4 sticky top-20 h-[80vh] overflow-auto">
              <div class="mb-4 flex items-center gap-2">
                <a href="/dashboard/<%= selectedGuild %>/overview" class="px-3 py-1 rounded-full bg-white/5 text-white text-xs">Home</a>
              </div>
              <ul class="mt-2 space-y-3 text-slate-200">
                <li class="text-sm"><a href="/dashboard/<%= selectedGuild %>/settings" class="flex items-center gap-3"><span class="opacity-80">⚙️</span> General Settings</a></li>
              </ul>
            </nav>
          </aside>

          <!-- Main column -->
          <main class="flex-1">
            <div class="mb-6">
              <h1 class="text-4xl font-bold text-white">Welcome <span class="text-blue-400"><%= user?.username || 'Admin' %></span>,</h1>
            </div>


            </div>
          </main>

        </div>
      </div>
      <!-- background SVGs removed (snap1/snap2) per design) -->
    <% } %>

    <% if (typeof page !== 'undefined' && page === 'settings' && selectedGuild) { %>
      <div class="w-full max-w-3xl mt-6">
        <div class="backdrop-blur-md bg-white/6 border border-white/8 rounded-xl p-6 glass-card">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold">Ajustes del servidor</h2>
            <a href="/dashboard/<%= selectedGuild %>/overview" class="text-sm text-slate-200/80 hover:underline">← Volver al overview</a>
          </div>
          <form id="guildSettingsForm" class="space-y-4">
            <div>
              <label class="block text-sm text-slate-200 mb-1">Prefix del bot</label>
              <input type="text" name="prefix" id="prefixInput" value="<%= (guildConfig && guildConfig.prefix) || '' %>" class="w-full rounded p-2 bg-transparent border border-white/6" placeholder="!" />
            </div>
            <div>
              <label class="block text-sm text-slate-200 mb-1">AI Role Prompt (opcional)</label>
              <textarea name="aiRolePrompt" id="aiRoleInput" rows="4" class="w-full rounded p-2 bg-transparent border border-white/6" placeholder="E.g. Actúa como un moderador amigable..."><%= (guildConfig && guildConfig.aiRolePrompt) || '' %></textarea>
            </div>
            <div>
              <label class="block text-sm text-slate-200 mb-1">Roles de staff</label>
              <% if (typeof guildRoles !== 'undefined' && guildRoles && guildRoles.length) { %>
                <div class="mb-2">
                  <input id="staffFilter" type="search" placeholder="Filtrar roles..." class="w-full rounded p-2 bg-transparent border border-white/6" />
                </div>
                <select id="staffSelect" name="staffSelect" multiple class="w-full rounded p-2 bg-transparent border border-white/6 h-36">
                  <% const selectedStaff = (guildConfig && Array.isArray(guildConfig.staff) ? guildConfig.staff.map(String) : (guildConfig && guildConfig.staff ? String(guildConfig.staff).split(',') : [])) || []; %>
                  <% guildRoles.forEach(r => { %>
                    <option value="<%= r.id %>" <%= selectedStaff.includes(String(r.id)) ? 'selected' : '' %>><%= r.name %> — <%= r.id %></option>
                  <% }) %>
                </select>
              <% } else { %>
                <% const fallbackStaff = (guildConfig && Array.isArray(guildConfig.staff) ? guildConfig.staff.map(String) : (guildConfig && guildConfig.staff ? String(guildConfig.staff).split(',') : [])) || []; %>
                <% if (fallbackStaff.length) { %>
                  <div class="mb-2">
                    <input id="staffFilter" type="search" placeholder="Filtrar roles..." class="w-full rounded p-2 bg-transparent border border-white/6" />
                  </div>
                  <select id="staffSelect" name="staffSelect" multiple class="w-full rounded p-2 bg-transparent border border-white/6 h-36">
                    <% fallbackStaff.forEach(id => { %>
                      <option value="<%= id %>" <%= (Array.isArray(guildConfig.staff) ? guildConfig.staff.map(String).includes(String(id)) : String(guildConfig.staff || '').split(',').map(s=>s.trim()).includes(String(id))) ? 'selected' : '' %>>ID: <%= id %></option>
                    <% }) %>
                  </select>
                <% } else { %>
                  <input type="text" name="staff" id="staffInput" value="<%= (guildConfig && (Array.isArray(guildConfig.staff) ? guildConfig.staff.join(',') : guildConfig.staff)) || '' %>" class="w-full rounded p-2 bg-transparent border border-white/6" placeholder="123... , 456..." />
                  <div class="text-xs text-slate-300 mt-1">No se pudo obtener roles desde la API ni hay roles guardados. Introduce IDs manualmente separadas por coma.</div>
                <% } %>
              <% } %>
            </div>
            <div class="flex items-center gap-3">
              <button type="submit" class="pixel-btn">Guardar</button>
              <span id="saveStatus" class="text-sm text-slate-300"></span>
            </div>
          </form>
        </div>
      </div>
      <script>
        (function(){
          const form = document.getElementById('guildSettingsForm');
          const status = document.getElementById('saveStatus');
                const staffFilter = document.getElementById('staffFilter');
                if (staffFilter) {
                  staffFilter.addEventListener('input', ()=>{
                    const q = staffFilter.value.trim().toLowerCase();
                    const sel = document.getElementById('staffSelect');
                    if (!sel) return;
                    for (const opt of Array.from(sel.options)) {
                      const txt = (opt.textContent || '').toLowerCase();
                      opt.style.display = (!q || txt.indexOf(q) !== -1) ? '' : 'none';
                    }
                  });
                }
            form.addEventListener('submit', async (e)=>{
            e.preventDefault();
            status.textContent = 'Guardando...';
            const prefix = document.getElementById('prefixInput').value.trim();
            const aiRolePrompt = document.getElementById('aiRoleInput').value.trim();
            let staffArr = [];
            const staffSelect = document.getElementById('staffSelect');
            if (staffSelect) {
              for (const o of staffSelect.selectedOptions) staffArr.push(o.value);
            } else {
              const staffRaw = (document.getElementById('staffInput') && document.getElementById('staffInput').value) ? document.getElementById('staffInput').value.trim() : '';
              staffArr = staffRaw ? staffRaw.split(',').map(s=>s.trim()).filter(Boolean) : [];
            }
            const payload = { prefix: prefix, aiRolePrompt: aiRolePrompt.length ? aiRolePrompt : null, staff: staffArr };
            try {
              const res = await fetch(`/api/dashboard/${encodeURIComponent('<%= selectedGuild %>')}/settings`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload),
              });
              const json = await res.json();
              if (res.ok && json.ok) {
                status.textContent = 'Guardado';
                setTimeout(()=> status.textContent = '', 2500);
              } else {
                status.textContent = json.error || 'Error';
              }
            } catch (err) {
              status.textContent = 'Error de red';
            }
          });
        })();
      </script>

    <% } %>
    </div>

    <script>
      // Simple fragment navigation for a SPA-like feel inside /dashboard
      (function(){
        async function loadFragment(href, push=true) {
          try {
            const url = new URL(href, location.origin);
            url.searchParams.set('fragment','1');
            const res = await fetch(url.toString(), { headers: { 'X-Requested-With':'XMLHttpRequest' } });
            if (!res.ok) throw new Error('fetch-failed');
            const html = await res.text();
            const container = document.getElementById('dashContent');
            if (!container) return;
            container.innerHTML = html;
            // execute inline scripts inside fragment
            Array.from(container.querySelectorAll('script')).forEach(s=>{
              try {
                const n = document.createElement('script');
                if (s.src) { n.src = s.src; n.async = false; document.head.appendChild(n); }
                else { n.textContent = s.textContent; document.head.appendChild(n); document.head.removeChild(n); }
              } catch(e){}
            });
            if (push) history.pushState({ href: href }, '', href);
          } catch (err) {
            console.warn('Fragment load failed', err);
            location.href = href; // fallback full navigation
          }
        }

        document.addEventListener('click', (e)=>{
          const a = e.target.closest && e.target.closest('a');
          if (!a) return;
          const href = a.getAttribute('href');
          if (!href) return;
          // intercept internal dashboard links
          if (href.startsWith('/dashboard') || href.indexOf(location.origin + '/dashboard') === 0) {
            e.preventDefault();
            loadFragment(href);
          }
        });

        window.addEventListener('popstate', (e)=>{
          const href = (e.state && e.state.href) || location.pathname + location.search;
          loadFragment(href, false);
        });
      })();
    </script>

  </div>
</div>

  

  <script>
    // Drawer toggle logic - attach after DOM is loaded so elements exist
    document.addEventListener('DOMContentLoaded', function () {
      const drawerToggle = document.getElementById('drawerToggle');
      const mobileDrawer = document.getElementById('mobileDrawer');
      const drawerBackdrop = document.getElementById('drawerBackdrop');
      function openDrawer() {
        if (!mobileDrawer || !drawerBackdrop) return;
        mobileDrawer.classList.remove('-translate-x-full');
        drawerBackdrop.classList.remove('hidden');
        // move focus to drawer for accessibility
        mobileDrawer.setAttribute('tabindex', '-1');
        mobileDrawer.focus();
      }
      function closeDrawer() {
        if (!mobileDrawer || !drawerBackdrop) return;
        mobileDrawer.classList.add('-translate-x-full');
        drawerBackdrop.classList.add('hidden');
        drawerToggle?.focus();
      }
      drawerToggle?.addEventListener('click', openDrawer);
      drawerBackdrop?.addEventListener('click', closeDrawer);
      // support close button inside the drawer
      const drawerClose = document.getElementById('drawerClose');
      drawerClose?.addEventListener('click', closeDrawer);
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closeDrawer();
      });
    });
  </script>

  <!-- Mobile drawer & backdrop (used by hamburger) -->
  <div id="drawerBackdrop" class="fixed inset-0 bg-black/60 hidden z-40"></div>
  <nav id="mobileDrawer" class="fixed top-0 left-0 bottom-0 w-72 max-w-xs bg-[#0f1720] -translate-x-full transform transition-transform duration-200 z-50">
    <div class="p-4 border-b border-white/6 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <% if (user && user.id && user.avatar) { %>
          <img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.webp" class="w-8 h-8 rounded-full" alt="avatar">
        <% } %>
        <div class="text-white font-medium"><%= user?.username || '' %></div>
      </div>
      <button id="drawerClose" class="text-white/70">Cerrar</button>
    </div>
    <div class="p-4 space-y-2">
      <a href="/dashboard/<%= selectedGuild || '' %>/overview" class="block py-2 text-white">Home</a>
      <a href="/dashboard/<%= selectedGuild || '' %>/settings" class="block py-2 text-white">General Settings</a>
    </div>
  </nav>