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

import React from 'react';
import {
  LayoutDashboard,
  Store,
  Layers,
  Settings,
  TrendingUp,
  ShieldAlert,
  Users,
  Truck,
  Box,
  Monitor
} from 'lucide-react';
import { NavLink, useLocation } from 'react-router-dom';
import { MainSection } from '../types';

interface SidebarProps {
  isCoimbatoreView: boolean;
  setIsCoimbatoreView: (val: boolean) => void;
  isOpen: boolean;
  isAdmin?: boolean;
  onClose: () => void;
}

export default function Sidebar({
  isCoimbatoreView,
  setIsCoimbatoreView,
  isOpen,
  isAdmin,
  onClose
}: SidebarProps) {
  const location = useLocation();
  // Navigation elements
  const navItems = [
    { id: 'dashboard' as MainSection, label: 'Dashboard', icon: LayoutDashboard },
    { id: 'inventory' as MainSection, label: 'Products', icon: Layers },
    { id: 'reports' as MainSection, label: 'Reports', icon: TrendingUp },
    { id: 'dispatch' as MainSection, label: 'Console', icon: Truck },
    { id: 'pos' as MainSection, label: 'POS', icon: Monitor },
    { id: 'settings' as MainSection, label: 'Settings', icon: Settings }
  ];

  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] 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">
          {navItems.map((item) => {
            const IconComponent = item.icon;
            return (
              <NavLink
                key={item.id}
                to={`/admin/${item.id}`}
                title={item.label}
                onClick={() => {
                  if (window.innerWidth < 768) {
                    onClose();
                  }
                }}
                className={({ isActive }) => `w-full flex items-center py-3 rounded-lg 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>
    </>
  );
}