/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React from 'react';
import { type LucideIcon } from 'lucide-react';
import { NavLink } from 'react-router-dom';

/** One entry in the super admin sidebar. */
export interface SuperAdminNavItem {
  id: string;
  label: string;
  icon: LucideIcon;
}

interface SuperAdminSidebarProps {
  items: SuperAdminNavItem[];
  /** Collapsed → icon-only rail; expanded → labels visible. */
  isOpen: boolean;
  onClose: () => void;
}

/**
 * The Super Admin page's left rail. Visually identical to the admin `Sidebar`.
 */
export default function SuperAdminSidebar({ items, isOpen, onClose }: SuperAdminSidebarProps) {
  return (
    <>
      {/* Mobile Overlay */}
      {isOpen && (
        <div 
          className="md:hidden fixed inset-0 bg-black/50 z-40 backdrop-blur-sm"
          onClick={onClose}
        />
      )}
      
      <aside
        className={`fixed left-0 top-0 h-screen bg-[#662582] border-r border-[#662582] text-white flex flex-col py-xl pt-16 z-40 transition-all duration-300 ${
          isOpen ? 'translate-x-0 w-64' : '-translate-x-full md:translate-x-0 md:w-16'
        }`}
      >
      {/* Main Navigation Sidebar Links */}
      <nav className="flex-1 space-y-1 overflow-y-auto px-xs">
        {items.map((item) => {
          const IconComponent = item.icon;
          return (
            <NavLink
              key={item.id}
              to={`/superadmin/${item.id}`}
              title={item.label}
              className={({ isActive }) => `w-full flex items-center py-3 rounded-none text-left transition-all duration-200 cursor-pointer ${
                isOpen ? 'gap-md px-md border-l-4' : 'justify-center px-0'
              } ${
                isActive
                  ? 'bg-black/20 text-white font-semibold' + (isOpen ? ' border-white' : '')
                  : 'text-purple-200 hover:bg-white/10 hover:text-white' + (isOpen ? ' border-transparent' : '')
              }`}
            >
              {({ isActive }) => (
                <>
                  <IconComponent size={18} className={isActive ? 'text-white' : 'text-purple-300'} />
                  {isOpen && <span className="font-sans text-sm font-medium">{item.label}</span>}
                </>
              )}
            </NavLink>
          );
        })}
      </nav>
      </aside>
    </>
  );
}
