// panelbot/assets/js/index.js
import { requireSession, apiFetch, brandDisplayName, getQueryParam } from "../app.js";

// STATE dasar
const activeBrand = (getQueryParam("brand") || "tiara").toLowerCase();

// Fallback RBAC scopes utk admin bila server tidak mengembalikan
// ✅ tambah notifikasi:false supaya bisa diatur aksesnya
const DEFAULT_SCOPES = { brand: true, proses: true, laporan: true, autowd: false, notifikasi: false };

// Logo per brand
const brandLogoMap = {
  tiara: "assets/img/tiaratoto.png",
  tts: "assets/img/totosakti.png",
  ttm: "assets/img/totomantap.png", // pastikan file ini ada
};

// card jam & tanggal (WIB) di atas menu
function sidebarClockCard(prefix){
  return `
    <div class="mb-4">
      <div class="rounded-lg border border-slate-300 dark:border-[#3f3f46] bg-slate-50 dark:bg-[#2a2a2a] text-[12px] leading-tight p-3">
        <div class="grid grid-cols-[max-content_1ch_1fr] items-baseline gap-x-2 gap-y-1">
          <div class="text-slate-500 dark:text-slate-400 font-medium">Tanggal</div><div class="text-slate-500 dark:text-slate-400">:</div><div id="sidebarDate${prefix}" class="font-semibold">-</div>
          <div class="text-slate-500 dark:text-slate-400 font-medium">Waktu</div><div class="text-slate-500 dark:text-slate-400">:</div><div id="sidebarTime${prefix}" class="font-semibold">-</div>
        </div>
      </div>
    </div>
  `;
}

// ikon kecil
function iconSVG(name, highlight=false){
  const base = highlight ? "text-blue-500 dark:text-blue-400" : "text-slate-500 dark:text-slate-400";
  const wrap = (svg)=>`<span class="${base}">${svg}</span>`;
  if(name==="home")   return wrap(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M3 12L12 3l9 9"/><path d="M9 21V12h6v9"/></svg>`);
  if(name==="sheets") return wrap(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="9" y1="4" x2="9" y2="22"/></svg>`);
  if(name==="brand")  return wrap(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><circle cx="19" cy="12" r="3"/><circle cx="5" cy="12" r="3"/></svg>`);
  if(name==="profile")return wrap(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`);
  if(name==="chat")   return wrap(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>`);
  if(name==="users")  return wrap(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`);
  if(name==="report") return wrap(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M9 3h6a2 2 0 0 1 2 2v16l-5-3-5 3V5a2 2 0 0 1 2-2z"/></svg>`);
  if(name==="zap")    return wrap(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>`);

  // ✅ NEW: icon khusus Notifikasi
  if(name==="bank")   return wrap(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M3 10h18"/><path d="M5 10v10"/><path d="M9 10v10"/><path d="M15 10v10"/><path d="M19 10v10"/><path d="M4 20h16"/><path d="M12 3l9 5H3l9-5z"/></svg>`);
  if(name==="wallet") return wrap(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3"/><path d="M21 12h-7a2 2 0 0 0 0 4h7v-4z"/><circle cx="16" cy="14" r="1"/></svg>`);

  return "";
}

// brandMap untuk sidebar (RBAC)
const brandMap = {
  tiara: {
    badge: "TIARATOTO",
    sections: [
      {
        label: "Dashboard",
        items: [
          { text: "Dashboard", href: `index.html?brand=tiara`, icon: "home", active: true },
        ]
      },
      {
        label: null,
        scope: "brand",
        items: [
          { text: "Global Sheets", href: `global.html?brand=tiara`, icon: "sheets", active: false },
          { text: "Brand Meta",   href: `brand.html?brand=tiara`,  icon: "brand",  active: false },
          {
            text: "Profiles",
            href: null,
            icon: "profile",
            active: false,
            submenu: [
              { text: "Edit Bank",    channel: "bank" },
              { text: "Edit Ewallet", channel: "ewallet" },
              { text: "Edit Pulsa",   channel: "pulsa" },
              { text: "Edit Withdraw",channel: "wd" },
            ],
          },
        ]
      },
      {
        label: "Proses",
        scope: "proses",
        items: [
          { text: "Catat Bank",    href: `bank.html?brand=tiara`,    icon: "chat", active: false },
          { text: "Catat Ewallet", href: `ewallet.html?brand=tiara`, icon: "chat", active: false },
          { text: "Catat Pulsa",   href: `pulsa.html?brand=tiara`,   icon: "chat", active: false },
          { text: "Catat Withdraw",href: `wd.html?brand=tiara`,      icon: "chat", active: false },
        ]
      },

      // ✅ NEW: NOTIFIKASI
      {
        label: "Notifikasi",
        scope: "notifikasi",
        items: [
          { text: "Bank",    href: `notifbank.html?brand=tiara`,    icon: "bank",   active: false },
          { text: "Ewallet", href: `notifewallet.html?brand=tiara`, icon: "wallet", active: false },
        ]
      },

      {
        label: "Laporan",
        scope: "laporan",
        items: [
          { text: "Pendingan", href: `pendingan.html?brand=tiara`, icon: "report", active: false },
          { text: "Mistake",   href: `mistake.html?brand=tiara`,   icon: "report", active: false },
        ]
      },
      {
        label: "Auto Withdraw",
        scope: "autowd",
        items: [
          { text: "Withdraw", href: `withdraw-awd.html?brand=tiara`, icon: "zap", active: false },
        ]
      },
      {
        label: "Admin",
        items: [
          { text: "Users", href: `users.html?brand=tiara`, icon: "users", active: false, requireSuperadmin: true },
        ]
      },
    ],
  },
  tts: {
    badge: "TOTOSAKTI",
    sections: [
      {
        label: "Dashboard",
        items: [
          { text: "Dashboard", href: `index.html?brand=tts`, icon: "home", active: true },
        ]
      },
      {
        label: null,
        scope: "brand",
        items: [
          { text: "Global Sheets", href: `global.html?brand=tts`, icon: "sheets", active: false },
          { text: "Brand Meta",   href: `brand.html?brand=tts`,  icon: "brand",  active: false },
          {
            text: "Profiles",
            href: null,
            icon: "profile",
            active: false,
            submenu: [
              { text: "Edit Bank",    channel: "bank" },
              { text: "Edit Ewallet", channel: "ewallet" },
              { text: "Edit Pulsa",   channel: "pulsa" },
              { text: "Edit Withdraw",channel: "wd" },
            ],
          },
        ]
      },
      {
        label: "Proses",
        scope: "proses",
        items: [
          { text: "Catat Bank",    href: `bank.html?brand=tts`,    icon: "chat", active: false },
          { text: "Catat Ewallet", href: `ewallet.html?brand=tts`, icon: "chat", active: false },
          { text: "Catat Pulsa",   href: `pulsa.html?brand=tts`,   icon: "chat", active: false },
          { text: "Catat Withdraw",href: `wd.html?brand=tts`,      icon: "chat", active: false },
        ]
      },

      // ✅ NEW: NOTIFIKASI
      {
        label: "Notifikasi",
        scope: "notifikasi",
        items: [
          { text: "Bank",    href: `notifbank.html?brand=tts`,    icon: "bank",   active: false },
          { text: "Ewallet", href: `notifewallet.html?brand=tts`, icon: "wallet", active: false },
        ]
      },

      {
        label: "Laporan",
        scope: "laporan",
        items: [
          { text: "Pendingan", href: `pendingan.html?brand=tts`, icon: "report", active: false },
          { text: "Mistake",   href: `mistake.html?brand=tts`,   icon: "report", active: false },
        ]
      },
      {
        label: "Auto Withdraw",
        scope: "autowd",
        items: [
          { text: "Withdraw", href: `withdraw-awd.html?brand=tts`, icon: "zap", active: false },
        ]
      },
      {
        label: "Admin",
        items: [
          { text: "Users", href: `users.html?brand=tts`, icon: "users", active: false, requireSuperadmin: true },
        ]
      },
    ],
  },
  ttm: {
    badge: "TOTOMANTAP",
    sections: [
      {
        label: "Dashboard",
        items: [
          { text: "Dashboard", href: `index.html?brand=ttm`, icon: "home", active: true },
        ]
      },
      {
        label: null,
        scope: "brand",
        items: [
          { text: "Global Sheets", href: `global.html?brand=ttm`, icon: "sheets", active: false },
          { text: "Brand Meta",   href: `brand.html?brand=ttm`,  icon: "brand",  active: false },
          {
            text: "Profiles",
            href: null,
            icon: "profile",
            active: false,
            submenu: [
              { text: "Edit Bank",    channel: "bank" },
              { text: "Edit Ewallet", channel: "ewallet" },
              { text: "Edit Pulsa",   channel: "pulsa" },
              { text: "Edit Withdraw",channel: "wd" },
            ],
          },
        ]
      },
      {
        label: "Proses",
        scope: "proses",
        items: [
          { text: "Catat Bank",     href: `bank.html?brand=ttm`,    icon: "chat", active: false },
          { text: "Catat Ewallet",  href: `ewallet.html?brand=ttm`, icon: "chat", active: false },
          { text: "Catat Pulsa",    href: `pulsa.html?brand=ttm`,   icon: "chat", active: false },
          { text: "Catat Withdraw", href: `wd.html?brand=ttm`,      icon: "chat", active: false },
        ]
      },

      // ✅ NEW: NOTIFIKASI
      {
        label: "Notifikasi",
        scope: "notifikasi",
        items: [
          { text: "Bank",    href: `notifbank.html?brand=ttm`,    icon: "bank",   active: false },
          { text: "Ewallet", href: `notifewallet.html?brand=ttm`, icon: "wallet", active: false },
        ]
      },

      {
        label: "Laporan",
        scope: "laporan",
        items: [
          { text: "Pendingan", href: `pendingan.html?brand=ttm`, icon: "report", active: false },
          { text: "Mistake",   href: `mistake.html?brand=ttm`,   icon: "report", active: false },
        ]
      },
      {
        label: "Auto Withdraw",
        scope: "autowd",
        items: [
          { text: "Withdraw", href: `withdraw-awd.html?brand=ttm`, icon: "zap", active: false },
        ]
      },
      {
        label: "Admin",
        items: [
          { text: "Users", href: `users.html?brand=ttm`, icon: "users", active: false, requireSuperadmin: true },
        ]
      },
    ],
  },
};

// Render sidebar sesuai RBAC
function renderSidebar(brandKey, prefix, isSuperadmin, scopes){
  const cfg = brandMap[brandKey] || brandMap["tiara"];
  const parentActiveCls = "bg-blue-50 text-blue-600 border-blue-200 dark:bg-blue-950/40 dark:text-blue-400 dark:border-blue-800";
  const parentNormalCls = "hover:bg-slate-100 hover:text-blue-600 border-transparent text-slate-700 dark:text-slate-200 dark:hover:bg-[#2a2a2a] dark:hover:text-blue-400";

  let html = sidebarClockCard(prefix);

  cfg.sections.forEach(section => {
    const allowByScope = isSuperadmin || !section.scope || (scopes && scopes[section.scope]);
    if (!allowByScope) return;

    let itemsHTML = "";
    section.items.forEach(item => {
      if (item.requireSuperadmin && !isSuperadmin) return;

      if (item.icon === "profile") {
        // parent dropdown
        itemsHTML += `
          <li>
            <button id="profilesToggle${prefix}" class="w-full flex items-center justify-between px-3 py-2 rounded-md font-medium border ${parentNormalCls}">
              <span class="flex items-center gap-2">${iconSVG("profile", false)}<span>${item.text}</span></span>
              <span class="text-slate-500 dark:text-slate-400">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" class="transition-transform" data-chevron>
                  <polyline points="6 9 12 15 18 9"/>
                </svg>
              </span>
            </button>
            <ul id="profilesSub${prefix}" class="mt-1 ml-6 space-y-1 hidden">
              <li><a href="profile-edit.html?brand=${brandKey}&channel=bank" class="flex items-center gap-2 px-3 py-2 rounded-md font-medium border text-[12px] leading-tight ${parentNormalCls}"><span class="w-2 h-2 rounded-full bg-current"></span><span>Edit Bank</span></a></li>
              <li><a href="profile-edit.html?brand=${brandKey}&channel=ewallet" class="flex items-center gap-2 px-3 py-2 rounded-md font-medium border text-[12px] leading-tight ${parentNormalCls}"><span class="w-2 h-2 rounded-full bg-current"></span><span>Edit Ewallet</span></a></li>
              <li><a href="profile-edit.html?brand=${brandKey}&channel=pulsa" class="flex items-center gap-2 px-3 py-2 rounded-md font-medium border text-[12px] leading-tight ${parentNormalCls}"><span class="w-2 h-2 rounded-full bg-current"></span><span>Edit Pulsa</span></a></li>
              <li><a href="profile-edit.html?brand=${brandKey}&channel=wd" class="flex items-center gap-2 px-3 py-2 rounded-md font-medium border text-[12px] leading-tight ${parentNormalCls}"><span class="w-2 h-2 rounded-full bg-current"></span><span>Edit Withdraw</span></a></li>
            </ul>
          </li>
        `;
      } else {
        const linkCls = item.active ? parentActiveCls : parentNormalCls;
        itemsHTML += `<li><a href="${item.href}" class="flex items-center gap-2 px-3 py-2 rounded-md font-medium border ${linkCls}">${iconSVG(item.icon, !!item.active)}<span>${item.text}</span></a></li>`;
      }
    });

    if (!itemsHTML) return; // jangan render header kosong
    const sectionTitle = section.label ? section.label.toUpperCase() : cfg.badge;
    html += `
      <div class="mb-4">
        <div class="text-[11px] uppercase font-semibold text-slate-400 dark:text-slate-500 tracking-wide mb-2">${sectionTitle}</div>
        <ul class="space-y-1">${itemsHTML}</ul>
      </div>
    `;
  });

  return html;
}

// toggle submenu Profiles
function attachSidebarToggle(prefix){
  const btn = document.getElementById("profilesToggle"+prefix);
  const sub = document.getElementById("profilesSub"+prefix);
  if(!btn || !sub) return;
  btn.addEventListener("click", ()=>{
    sub.classList.toggle("hidden");
    const chev = btn.querySelector("[data-chevron]");
    if (chev) chev.classList.toggle("rotate-180");
  });
}

// WIB Clock updater
function updateSidebarClock(){
  const now = new Date();
  const weekdayId = new Intl.DateTimeFormat('id-ID',{timeZone:'Asia/Jakarta',weekday:'long'}).format(now);
  const parts = new Intl.DateTimeFormat('en-US',{
    timeZone:'Asia/Jakarta',year:'numeric',month:'numeric',day:'2-digit',hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:false
  }).formatToParts(now);
  const m=Object.fromEntries(parts.map(p=>[p.type,p.value]));
  const bulanShort=["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agu","Sep","Okt","Nov","Des"];
  const tanggalStr=`${weekdayId}, ${m.day} ${bulanShort[parseInt(m.month,10)-1]} ${m.year}`;
  const waktuStr=`${m.hour}:${m.minute}:${m.second}`;
  ["Desktop","Mobile"].forEach(pref=>{
    const d=document.getElementById("sidebarDate"+pref), t=document.getElementById("sidebarTime"+pref);
    if(d) d.textContent=tanggalStr; if(t) t.textContent=waktuStr;
  });
}

// kartu welcome sederhana
function renderMainCards(username){
  return `
    <div class="bg-white dark:bg-[#1e1e1e] border border-slate-200 dark:border-[#2a2a2a] rounded-xl shadow-xl p-5">
      <div class="flex items-center gap-2 text-[14px] font-semibold text-slate-900 dark:text-slate-100 mb-3">
        <span class="text-slate-700 dark:text-slate-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
            <path d="M3 12L12 3l9 9"/><path d="M9 21V12h6v9"/>
          </svg>
        </span>
        <span>Selamat datang, <span>${username}</span></span>
      </div>
      <div class="text-[13px] leading-relaxed text-slate-500 dark:text-slate-400">
        <div>Panel ini dipakai buat:</div>
        <ul class="list-disc ml-5 mt-2 space-y-1">
          <li>mapping sheet bank / dana / pulsa</li>
          <li>edit meta brand (sheet pendingan & mistake)</li>
          <li>edit profile bot (per channel WD / bank / pulsa / ewallet)</li>
        </ul>
      </div>
    </div>
  `;
}

// DOM refs
const brandBtn        = document.getElementById("brandBtn");
const brandDropdown   = document.getElementById("brandDropdown");
const menuBtn         = document.getElementById("userMenuBtn");
const userDropdown    = document.getElementById("userDropdown");
const themeToggleBtn  = document.getElementById("themeToggleBtn");
const hamburgerBtn    = document.getElementById("hamburgerBtn");
const mobileSidebar   = document.getElementById("mobileSidebar");
const closeSidebarBtn = document.getElementById("closeSidebarBtn");
const sidebarOverlay  = document.getElementById("sidebarOverlay");
const logoutBtn       = document.getElementById("logoutBtn");

// THEME
if (themeToggleBtn) themeToggleBtn.addEventListener("click",(e)=>{
  e.stopPropagation();
  const root = document.documentElement;
  const isDarkNow = root.classList.toggle("dark");
  localStorage.setItem("theme", isDarkNow ? "dark" : "light");
});

// DROPDOWNS
if (brandBtn) brandBtn.addEventListener("click",(e)=>{
  e.stopPropagation();
  brandDropdown.classList.toggle("hidden");
  if(!userDropdown.classList.contains("hidden")){ userDropdown.classList.add("hidden"); }
});
if (menuBtn) menuBtn.addEventListener("click",(e)=>{
  e.stopPropagation();
  userDropdown.classList.toggle("hidden");
  if(!brandDropdown.classList.contains("hidden")) brandDropdown.classList.add("hidden");
});
document.addEventListener("click",(e)=>{
  if (!brandDropdown.classList.contains("hidden")) {
    const wrap = document.getElementById("brandPickerWrap");
    if (!wrap.contains(e.target)) brandDropdown.classList.add("hidden");
  }
  if (!userDropdown.classList.contains("hidden")) {
    if (!menuBtn.contains(e.target) && !userDropdown.contains(e.target)) { userDropdown.classList.add("hidden"); }
  }
});

// SIDEBAR mobile
function openMobileSidebar(){ mobileSidebar.classList.remove("-translate-x-full"); sidebarOverlay.classList.remove("hidden"); }
function closeMobileSidebar(){ mobileSidebar.classList.add("-translate-x-full"); sidebarOverlay.classList.add("hidden"); }
if (hamburgerBtn) hamburgerBtn.addEventListener("click",(e)=>{ e.stopPropagation(); openMobileSidebar(); });
if (closeSidebarBtn) closeSidebarBtn.addEventListener("click", closeMobileSidebar);
if (sidebarOverlay) sidebarOverlay.addEventListener("click", closeMobileSidebar);

// LOGOUT
if (logoutBtn) logoutBtn.addEventListener("click", async (e)=>{ e.preventDefault(); await apiFetch("/api/logout",{method:"POST"}); window.location="login.html"; });

// apply static texts
function applyStaticTexts(){
  const themeEl = document.getElementById("ddThemeText");
  if (themeEl) themeEl.textContent = "Tema";

  const logoutEl = document.getElementById("ddLogoutText");
  if (logoutEl) logoutEl.textContent = "Keluar";

  const pageTitleEl = document.getElementById("pageTitle");
  if (pageTitleEl) pageTitleEl.textContent = "Dashboard";

  const descEl = document.getElementById("pageDesc");
  if (descEl) descEl.textContent = "Kelola konfigurasi untuk brand " + brandDisplayName(activeBrand) + ".";
}

// Init
async function init(){
  const session = await requireSession();
  const usernameText = session.username || "admin";
  const isSuperadmin = (session.role === "superadmin");

  // ✅ superadmin dapat semua scope + notifikasi
  const userScopes = isSuperadmin
    ? { brand:true, proses:true, laporan:true, autowd:true, notifikasi:true }
    : (session.scopes || DEFAULT_SCOPES);

  document.getElementById("topUser").textContent = usernameText;

  // brand visuals
  const badgeText = (brandMap[activeBrand] || brandMap["tiara"]).badge;
  document.getElementById("brandLabel").textContent = badgeText;
  document.getElementById("brandBadge").textContent = badgeText;

  const logoSrc = brandLogoMap[activeBrand] || brandLogoMap.tiara;
  const desktopLogo = document.getElementById("desktopBrandLogo");
  const mobileLogo  = document.getElementById("mobileBrandLogo");
  if (desktopLogo) { desktopLogo.src = logoSrc; desktopLogo.alt = badgeText; }
  if (mobileLogo)  { mobileLogo.src  = logoSrc;  mobileLogo.alt  = badgeText; }

  // teks statis
  applyStaticTexts();

  // sidebar sesuai RBAC
  document.getElementById("sideMenuDesktop").innerHTML = renderSidebar(activeBrand, "Desktop", isSuperadmin, userScopes);
  document.getElementById("sideMenuMobile").innerHTML  = renderSidebar(activeBrand, "Mobile",  isSuperadmin, userScopes);
  attachSidebarToggle("Desktop");
  attachSidebarToggle("Mobile");

  // cards
  document.getElementById("mainGrid").innerHTML = renderMainCards(usernameText);

  // clock
  updateSidebarClock();
  setInterval(updateSidebarClock, 1000);
}

init();