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

/**
 * @param {{
 *   children: React.ReactNode,
 *   activeNav: string,
 *   onNavigate: (id: string) => void,
 *   userInitials?: string,
 *   userRole?: string,
 *   onLogout?: () => void,
 *   appTitle?: string,
 *   navSections?: import("./PortalSidebar.jsx").default extends React.ComponentType<infer P> ? P["navSections"] : never,
 *   topbarActions?: React.ReactNode,
 * }} props
 */
const PortalShell = ({
  children,
  activeNav,
  onNavigate,
  userInitials = "AD",
  userRole = "ADMIN",
  onLogout,
  appTitle = "SWI Portal",
  navSections,
  topbarActions = 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__mark">
              <span className="portal-brand__square" />
              <span className="portal-brand__square portal-brand__square--front" />
            </span>
            <span className="portal-brand__text">{appTitle}</span>
          </div>
        </div>
        <div className="portal-topbar__right">
          {topbarActions}
          <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}
        />
        <div className="portal-main">{children}</div>
      </div>
    </div>
  );
};

export default PortalShell;
