// App shell: top bar, sidebar, role switcher
const { useState: useStateShell } = React;
const UIS = window.UI;
const AS = UIS.A;

const NAV = {
  admin: [
    { id: "overview", label: "Visão Geral", icon: "dashboard" },
    { id: "students", label: "Alunos", icon: "users" },
    { id: "teachers", label: "Professores", icon: "teacher" },
    { id: "classes", label: "Turmas", icon: "classes" },
    { id: "analytics", label: "Analytics Geral", icon: "chart" },
  ],
  teacher: [
    { id: "overview", label: "Visão Geral", icon: "dashboard" },
    { id: "classes", label: "Minhas Turmas", icon: "classes" },
    { id: "analytics", label: "Analytics", icon: "chart" },
  ],
  // teacher tab "students" was removed — teachers only see students through their classes
  student: [
    { id: "overview", label: "Meu Painel", icon: "dashboard" },
    { id: "classes", label: "Minhas Turmas", icon: "classes" },
    { id: "sessions", label: "Minhas Sessões", icon: "session" },
  ],
};

const RoleLabel = {
  admin: "Administrador",
  teacher: "Professor(a)",
  student: "Aluno(a)",
};

const AppShell = ({
  role,
  user,
  view,
  onView,
  onLogout,
  children,
}) => {
  const nav = NAV[role];
  const [mobileOpen, setMobileOpen] = useStateShell(false);
  const closeMobile = () => setMobileOpen(false);
  const handleViewMobile = (v) => {
    onView(v);
    closeMobile();
  };
  return (
    <div
      style={{
        display: "flex",
        minHeight: "100vh",
        position: "relative",
        overflow: "hidden",
        background: "#ffffff",
      }}
    >

      {/* Mobile top bar */}
      <div
        className="mobile-topbar"
        style={{
          display: "none",
          position: "fixed",
          top: 0,
          left: 0,
          right: 0,
          zIndex: 5,
          padding: "12px 16px",
          alignItems: "center",
          justifyContent: "space-between",
          background: "#0a3a26",
          borderBottom: "1px solid rgba(0,0,0,0.08)",
          color: "#fff",
          height: 56,
        }}
      >
        <button
          onClick={() => setMobileOpen(true)}
          aria-label="Abrir menu"
          style={{
            background: "transparent",
            border: "1px solid rgba(255,255,255,0.18)",
            borderRadius: 8,
            width: 40,
            height: 40,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            color: "#fff",
            cursor: "pointer",
          }}
        >
          <svg
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
          >
            <path d="M3 6h18M3 12h18M3 18h18" />
          </svg>
        </button>
        <UIS.AbendiBrandCard height={16} padding="6px 10px" />
        <UIS.Avatar name={user.name} role={role} size={32} />
      </div>

      {/* Mobile drawer backdrop */}
      {mobileOpen && (
        <div
          onClick={closeMobile}
          style={{
            display: "none",
            position: "fixed",
            inset: 0,
            background: "rgba(0,0,0,0.55)",
            zIndex: 8,
          }}
          className="mobile-backdrop"
        />
      )}

      {/* Sidebar */}
      <aside
        style={{
          position: "relative",
          zIndex: 9,
          width: 240,
          padding: "20px 14px",
          flexShrink: 0,
          background: "linear-gradient(180deg, #0a3a26 0%, #082218 100%)",
          borderRight: "1px solid rgba(0,0,0,0.08)",
          display: "flex",
          flexDirection: "column",
          color: "#fff",
          transform: mobileOpen ? "translateX(0)" : undefined,
        }}
        className={`sidebar ${mobileOpen ? "sidebar-open" : ""}`}
      >
        {/* Mobile close button */}
        <button
          onClick={closeMobile}
          aria-label="Fechar menu"
          className="mobile-close"
          style={{
            display: "none",
            position: "absolute",
            top: 14,
            right: 14,
            background: "transparent",
            border: "1px solid rgba(255,255,255,0.18)",
            borderRadius: 8,
            width: 32,
            height: 32,
            alignItems: "center",
            justifyContent: "center",
            color: "#fff",
            cursor: "pointer",
          }}
        >
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
          >
            <path d="M6 6l12 12M18 6L6 18" />
          </svg>
        </button>
        <div style={{ padding: "4px 8px 22px", display: "flex", justifyContent: "center" }}>
          <UIS.AbendiBrandCard height={20} padding="9px 14px" />
        </div>

        <div
          style={{
            padding: "10px 12px 14px",
            borderTop: "1px solid rgba(255,255,255,0.08)",
            borderBottom: "1px solid rgba(255,255,255,0.08)",
            marginBottom: 14,
            display: "flex",
            gap: 10,
            alignItems: "center",
          }}
        >
          <UIS.Avatar name={user.name} role={role} size={36} />
          <div style={{ minWidth: 0, flex: 1 }}>
            <div
              style={{
                fontSize: 13,
                fontWeight: 600,
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis",
              }}
            >
              {user.name}
            </div>
            <div
              style={{
                fontSize: 11,
                color: "rgba(255,255,255,0.55)",
                display: "flex",
                alignItems: "center",
                gap: 6,
              }}
            >
              <span
                style={{
                  width: 6,
                  height: 6,
                  borderRadius: "50%",
                  background:
                    role === "admin"
                      ? AS.gold
                      : role === "teacher"
                        ? "#7ec896"
                        : "#5fb583",
                }}
              />
              {RoleLabel[role]} · {user.id}
            </div>
          </div>
        </div>

        <nav
          style={{ display: "flex", flexDirection: "column", gap: 2, flex: 1 }}
        >
          {nav.map((item) => {
            const active = view === item.id;
            return (
              <button
                key={item.id}
                onClick={() => handleViewMobile(item.id)}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 10,
                  padding: "10px 12px",
                  background: active ? "rgba(255,255,255,0.14)" : "transparent",
                  border: "none",
                  borderLeft: active
                    ? `3px solid ${AS.gold}`
                    : "3px solid transparent",
                  borderRadius: 8,
                  color: active ? "#fff" : "rgba(255,255,255,0.7)",
                  fontSize: 14,
                  fontWeight: active ? 600 : 500,
                  cursor: "pointer",
                  textAlign: "left",
                  fontFamily: "inherit",
                  transition: "all 120ms",
                }}
                onMouseEnter={(e) =>
                  !active &&
                  (e.currentTarget.style.background = "rgba(255,255,255,0.06)")
                }
                onMouseLeave={(e) =>
                  !active && (e.currentTarget.style.background = "transparent")
                }
              >
                <UIS.Icon name={item.icon} size={17} />
                {item.label}
              </button>
            );
          })}
        </nav>

        {/* Footer: logout */}
        <div
          style={{
            padding: "14px 8px 6px",
            borderTop: "1px solid rgba(255,255,255,0.08)",
          }}
        >
          <button
            onClick={onLogout}
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              padding: "9px 12px",
              marginTop: 0,
              width: "100%",
              background: "transparent",
              border: "none",
              color: "rgba(255,255,255,0.55)",
              fontSize: 13,
              cursor: "pointer",
              fontFamily: "inherit",
              borderRadius: 8,
            }}
          >
            <UIS.Icon name="logout" size={16} />
            Sair
          </button>
        </div>

        {/* Developer credit — discreet bottom signature */}
        <div
          style={{
            padding: "12px 12px 4px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: 8,
            opacity: 0.55,
          }}
        >
          <span
            style={{
              fontSize: 10,
              color: "rgba(255,255,255,0.7)",
              letterSpacing: "0.04em",
              textTransform: "uppercase",
            }}
          >
            Desenvolvido por
          </span>
          <UIS.RysaxMark size={14} tone="mono" />
        </div>
      </aside>

      {/* Main */}
      <main
        style={{
          position: "relative",
          zIndex: 2,
          flex: 1,
          padding: 28,
          overflowY: "auto",
          maxHeight: "100vh",
        }}
        className="main-area"
      >
        {children}
      </main>
    </div>
  );
};

// Page header
const PageHeader = ({ title, subtitle, actions, breadcrumb }) => (
  <div
    style={{
      marginBottom: 24,
      display: "flex",
      alignItems: "flex-end",
      justifyContent: "space-between",
      gap: 24,
      flexWrap: "wrap",
      rowGap: 14,
    }}
  >
    <div style={{ flex: "1 1 360px", minWidth: 0 }}>
      {breadcrumb && (
        <div
          style={{
            display: "flex",
            gap: 6,
            alignItems: "center",
            fontSize: 12,
            color: A.inkMute,
            marginBottom: 6,
          }}
        >
          {breadcrumb.map((b, i) => (
            <React.Fragment key={i}>
              {i > 0 && <UIS.Icon name="chevron" size={11} />}
              <span
                style={{
                  color:
                    i === breadcrumb.length - 1
                      ? A.ink
                      : A.inkSoft,
                  cursor: b.onClick ? "pointer" : "default",
                  textDecoration: b.onClick ? "underline" : "none",
                  textDecorationColor: "rgba(0,78,45,0.2)",
                  textUnderlineOffset: 2,
                }}
                onClick={b.onClick}
              >
                {b.label}
              </span>
            </React.Fragment>
          ))}
        </div>
      )}
      <h1
        style={{
          margin: 0,
          fontSize: 28,
          fontWeight: 700,
          color: A.green,
          letterSpacing: "-0.02em",
          fontFamily: '"Plus Jakarta Sans", sans-serif',
        }}
      >
        {title}
      </h1>
      {subtitle && (
        <p
          style={{
            margin: "6px 0 0",
            fontSize: 14,
            color: A.inkSoft,
            maxWidth: 680,
          }}
        >
          {subtitle}
        </p>
      )}
    </div>
    {actions && (
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
        {actions}
      </div>
    )}
  </div>
);

window.Shell = { AppShell, PageHeader, NAV };