// App shell — top bar with user menu + role switcher for demo + sub-nav per role

const AppNav = ({ session, route, go, logout }) => {
  const role = session.role || "parent";
  const sub = {
    student: [["/app/student","Home"],["/app/student/courses","Courses"],["/app/student/quiz","Quiz"],["/app/student/homework","Homework"],["/app/student/certificates","Certs"],["/app/student/forum","Forum"]],
    teacher: [["/app/teacher","Classes"],["/app/teacher/live","Live"],["/app/teacher/schedule","Schedule"],["/app/teacher/attendance","Attendance"],["/app/teacher/content","Content"],["/app/teacher/quizzes","Quizzes"],["/app/teacher/homework","Homework"],["/app/teacher/analytics","Analytics"],["/app/teacher/messages","Messages"]],
    parent: [["/app/parent","Home"],["/app/parent/schedule","Schedule"],["/app/parent/shop","Shop"]],
    admin: [["/app/admin","Dashboard"],["/app/admin/students","Students"],["/app/admin/schedule","Schedule"],["/app/admin/attendance","Attendance"],["/app/admin/broadcast","Broadcast"],["/app/admin/billing","Billing"],["/app/admin/kits","Kits"]],
  }[role] || [];

  const accent = {
    student: "var(--coral)", parent: "var(--moss)",
    teacher: "var(--sky)", admin: "var(--plum)",
  }[role];

  return (
    <div className="codeland" style={{
      display: "flex", alignItems: "center", gap: 12,
      padding: "10px 22px", background: "var(--paper-card)",
      borderBottom: "var(--border-thin)",
    }}>
      <a href="https://epiqminds.com" className="display" style={{
        fontSize: 18, letterSpacing: "-0.03em", textDecoration: "none", color: "var(--ink)",
      }}>
        <span style={{ color: "var(--coral)" }}>Epiq</span>Minds
      </a>
      <span className="chip" style={{ background: accent, color: "white", padding: "3px 10px", fontSize: 10 }}>
        {role.toUpperCase()}
      </span>

      <div style={{ flex: 1 }}/>

      {sub.length > 1 && (
        <div style={{
          display: "inline-flex", padding: 3, background: "var(--paper-deep)",
          borderRadius: 999, border: "var(--border-thin)", overflowX: "auto", maxWidth: 500, flexShrink: 1,
        }}>
          {sub.map(([path, label]) => (
            <button key={path} onClick={() => go(path)} style={{
              padding: "5px 10px", borderRadius: 999, border: "none", whiteSpace: "nowrap",
              background: route === path ? "var(--ink)" : "transparent",
              color: route === path ? "var(--paper-card)" : "var(--ink-soft)",
              fontWeight: 700, fontSize: 11, fontFamily: "var(--font-ui)", cursor: "pointer",
            }}>{label}</button>
          ))}
        </div>
      )}

      <div style={{ flex: 1 }}/>


      <button onClick={logout} className="btn btn-ghost" style={{ padding: "6px 12px", fontSize: 12 }}>
        Sign out
      </button>
    </div>
  );
};

window.AppNav = AppNav;