import React, { useCallback, useState } from "react";
import ThemeToggle from "./ThemeToggle.jsx";
import PortalSidebar from "./PortalSidebar.jsx";

const PortalShell = ({
  children,
  activeNav,
  onNavigate,
  userInitials = "AD",
  userRole = "ADMIN",
  onLogout,
  appTitle = "PTW Admin",
  navSections,
  topbarExtra = null
}) => {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const toggleSidebar = useCallback(() => setSidebarCollapsed((c) => !c), []);

  return (
    <div
      className={`portal-root${
        sidebarCollapsed ? " portal-root--sidebar-collapsed" : ""
      }`}
    >
      <header className="portal-topbar">
        <div className="portal-topbar__left">
          <button
            type="button"
            className="portal-icon-btn"
            aria-label={sidebarCollapsed ? "Expand navigation" : "Collapse navigation"}
            onClick={toggleSidebar}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
              <path d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
          <ThemeToggle variant="chrome" />
          <div className="portal-brand" aria-hidden="false">
            <span className="portal-brand__text">{appTitle}</span>
          </div>
        </div>
        <div className="portal-topbar__right">
          {topbarExtra}
          <div className="portal-user">
            <span className="portal-user__avatar" aria-hidden>{userInitials}</span>
            <span className="portal-user__role">{userRole}</span>
          </div>
        </div>
      </header>
      <div className="portal-body">
        <PortalSidebar
          collapsed={sidebarCollapsed}
          activeNav={activeNav}
          onNavigate={onNavigate}
          navSections={navSections}
          onLogout={onLogout}
        />
        <main className="portal-main">{children}</main>
      </div>
    </div>
  );
};

export default PortalShell;
