/* Veridyne Learning Portal — layout: sidebar, mobile nav, shell */
const NAV_ITEMS = [
  { id: "dashboard", label: "Dashboard", icon: "home" },
  { id: "okta", label: "Okta Learning", icon: "shield" },
  { id: "auth0", label: "Auth0 Learning", icon: "key" },
  { id: "protocols", label: "Protocols Lab", icon: "flow" },
  { id: "diagrams", label: "Interactive Diagrams", icon: "diagram" },
  { id: "quizzes", label: "Knowledge Checks", icon: "target" },
  { id: "library", label: "Documentation Library", icon: "library" },
  { id: "progress", label: "Progress & Scores", icon: "award" },
  { id: "glossary", label: "Glossary", icon: "list" },
];

function NavLink({ item, active, onClick }) {
  return (
    <button onClick={onClick} className={"nav-link" + (active ? " active" : "")}>
      <Icon name={item.icon} size={17} />
      <span>{item.label}</span>
    </button>
  );
}

function UserChip() {
  const store = useStore();
  if (!store.session) return null;
  const u = store.session.username;
  const status = store.session.demo
    ? { label: "Demo — local only", color: "var(--warn)" }
    : store.syncState === "offline"
    ? { label: "Changes pending sync", color: "var(--warn)" }
    : store.syncState === "syncing"
    ? { label: "Syncing…", color: "var(--bone-50)" }
    : { label: "Synced to team DB", color: "var(--ok)" };
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderRadius: 14, background: "rgba(16,23,29,0.45)", border: "1px solid rgba(229,221,208,0.07)" }}>
      <div aria-hidden="true" style={{ width: 32, height: 32, borderRadius: "50%", flexShrink: 0, display: "grid", placeItems: "center", background: "var(--ember-soft)", border: "1px solid rgba(180,99,42,0.45)", color: "var(--ember-bright)", fontWeight: 600, fontSize: "0.95em", textTransform: "uppercase" }}>
        {u.slice(0, 1)}
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontWeight: 600, fontSize: "0.88em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{u}</div>
        <div style={{ fontSize: "0.7em", color: status.color, display: "flex", alignItems: "center", gap: 5 }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: status.color, display: "inline-block" }} />
          {status.label}
        </div>
      </div>
    </div>
  );
}

function Sidebar({ page }) {
  const store = useStore();
  return (
    <aside className="sidebar glass">
      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 10px 20px" }}>
        <VeridyneMark size={34} />
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "1.05em", letterSpacing: "0.01em" }}>Veridyne</div>
          <div style={{ fontSize: "0.7em", color: "var(--bone-50)", letterSpacing: "0.08em", textTransform: "uppercase" }}>Learning Portal</div>
        </div>
      </div>
      <nav style={{ display: "flex", flexDirection: "column", gap: 3, flex: 1 }} aria-label="Main navigation">
        {NAV_ITEMS.map((item) => (
          <NavLink key={item.id} item={item} active={page === item.id} onClick={() => navigate(item.id)} />
        ))}
      </nav>
      <UserChip />
      <SidebarXp />
      <button className="nav-link" onClick={store.lock} style={{ marginTop: 10, color: "var(--bone-50)" }}>
        <Icon name="logout" size={17} />
        <span>Sign out</span>
      </button>
    </aside>
  );
}

function MobileHeader({ onMenu }) {
  return (
    <header className="mobile-header glass">
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <VeridyneMark size={28} />
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600 }}>Veridyne</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <MobileXpChip />
        <button className="btn btn-ghost btn-sm" onClick={onMenu} aria-label="Open menu">
          <Icon name="menu" size={20} />
        </button>
      </div>
    </header>
  );
}

function MobileSheet({ open, onClose, page }) {
  const store = useStore();
  if (!open) return null;
  return (
    <div className="sheet-backdrop anim-fade-in" onClick={onClose}>
      <div className="sheet glass-raised anim-fade-up" onClick={(e) => e.stopPropagation()}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
          <span style={{ fontWeight: 600, fontSize: "1.05em" }}>Navigate</span>
          <button className="btn btn-ghost btn-sm" onClick={onClose} aria-label="Close menu"><Icon name="x" size={18} /></button>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <UserChip />
          <div style={{ height: 4 }}></div>
          {NAV_ITEMS.map((item) => (
            <NavLink key={item.id} item={item} active={page === item.id}
              onClick={() => { navigate(item.id); onClose(); }} />
          ))}
          <button className="nav-link" onClick={() => { onClose(); store.lock(); }} style={{ color: "var(--bone-50)" }}>
            <Icon name="logout" size={17} /><span>Sign out</span>
          </button>
        </div>
      </div>
    </div>
  );
}

function BottomNav({ page, onMore }) {
  const items = NAV_ITEMS.slice(0, 4);
  return (
    <nav className="bottom-nav glass-raised" aria-label="Mobile navigation">
      {items.map((item) => (
        <button key={item.id} className={"bottom-nav-item" + (page === item.id ? " active" : "")}
          onClick={() => navigate(item.id)}>
          <Icon name={item.icon} size={20} />
          <span>{item.label.split(" ")[0]}</span>
        </button>
      ))}
      <button className="bottom-nav-item" onClick={onMore}>
        <Icon name="menu" size={20} />
        <span>More</span>
      </button>
    </nav>
  );
}

function Layout({ page, children }) {
  const [sheetOpen, setSheetOpen] = React.useState(false);
  return (
    <div className="app-shell">
      <Sidebar page={page} />
      <div className="main-col">
        <MobileHeader onMenu={() => setSheetOpen(true)} />
        <main className="main-content">{children}</main>
      </div>
      <BottomNav page={page} onMore={() => setSheetOpen(true)} />
      <MobileSheet open={sheetOpen} onClose={() => setSheetOpen(false)} page={page} />
    </div>
  );
}

Object.assign(window, { Layout, NAV_ITEMS });