
import React from 'react';
import { NavLink } from 'react-router-dom';
import { Activity, Grid3x3, LayoutDashboard, PenTool, RotateCcw, UserCheck } from "lucide-react";
import { X, Users, UserPlus, Package, Building2, FileText, ShoppingCart, Truck, Receipt, CreditCard, Target, BarChart3, Calendar, CheckSquare, Ticket, LayoutDashboard as LayoutDashboardIcon, FolderOpen, Settings, Shield, Clock, Building, Layers, Tag } from 'lucide-react';
import { cn } from '@/lib/utils';
import logo from '../../assets/logo/logo.png'
import CompanySelector from '../common/CompanySelector';
import ProductLogo from '../common/ProductLogo';
import { useModule } from '@/context/ModuleContext';
import { getMenuForModule } from '@/config/moduleConfig';

const SidebarItem = ({ to, icon: Icon, label, onClick, end = false }) => (
  <NavLink
    to={to}
    end={end}
    onClick={onClick}
    className={({ isActive }) =>
      cn(
        "flex items-center gap-3 px-4 py-2.5 mx-2 rounded-lg text-sm font-medium transition-all duration-200 group relative",
        isActive
          ? "bg-[#338660] text-white shadow-md shadow-[#338660]/20"
          : "text-gray-400 hover:bg-[#1F1F1F] hover:text-white"
      )
    }
  >
    <Icon className={cn("w-4 h-4 shrink-0 transition-colors opacity-90 group-hover:opacity-100")} />
    <span className="truncate">{label}</span>
  </NavLink>
);

const SidebarSection = ({ title, children }) => (
  <div className="mb-6">
    <h3 className="px-6 mb-2 text-[10px] font-bold text-[#525252] uppercase tracking-wider">
      {title}
    </h3>
    <div className="space-y-0.5">
      {children}
    </div>
  </div>
);


const Sidebar = ({ isOpen, onClose, onSystemStatusClick }) => {

  const { currentModule } = useModule();
  const menuStructure = getMenuForModule(currentModule);

  return (
     <>
        {/* Mobile overlay - Only visible on small screens when open */}
        <div
          className={cn(
            "fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden transition-opacity duration-300",
            isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
          )}
          onClick={onClose}
        />

        {/* Sidebar Container */}
        
        <aside
        className={cn(
           "fixed top-0 left-0 z-50 h-screen w-64 bg-[#0F0F0F] border-r border-[#1F1F1F] transition-transform duration-300 lg:translate-x-0 flex flex-col shadow-2xl",
          isOpen ? "translate-x-0" : "-translate-x-full"
        )}
      >
          {/* Line 1: Static Logo Branding */}
          <ProductLogo />

          {/* Line 2: Company Selector Dropdown */}
          <div className="pt-2 pb-2">
            <CompanySelector />
          </div>

          {/* Separator before navigation */}
          <div className="h-px bg-[#1F1F1F] mx-4 mb-4" />

          {/* Close button for mobile */}
          <button
            onClick={onClose}
            className="absolute top-4 right-4 lg:hidden p-2 hover:bg-[#1F1F1F] rounded-lg text-white/70 hover:text-white transition-colors"
          >
            <X className="w-5 h-5" />
          </button>

          {/* Navigation - Scrollable Area */}
          <nav className="flex-1 overflow-y-auto py-2 custom-scrollbar scroll-smooth">
            {menuStructure.map((section, index) => (
              <SidebarSection key={index} title={section.title}>
                {section.items.map((item, itemIndex) => (
                  <SidebarItem 
                    key={itemIndex}
                    to={item.to}
                    icon={item.icon}
                    label={item.label}
                    end={item.end || false}
                    onClick={() => window.innerWidth < 1024 && onClose()}
                  />
                ))}
              </SidebarSection>
            ))}
          </nav>

          <div className="p-4 border-t border-[#1F1F1F] bg-[#0A0A0A] shrink-0">
            <button 
              onClick={onSystemStatusClick}
              className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg bg-[#1F1F1F] border border-[#2A2A2A] hover:bg-[#2A2A2A] hover:border-[#338660]/50 hover:shadow-lg hover:shadow-[#338660]/10 transition-all duration-300 group cursor-pointer text-left"
            >
              <div className="relative">
                <div className="w-2.5 h-2.5 rounded-full bg-green-500 animate-pulse" />
                <div className="absolute inset-0 w-2.5 h-2.5 rounded-full bg-green-500 blur-[2px] opacity-50" />
              </div>
              <span className="text-xs font-semibold text-gray-300 group-hover:text-white transition-colors">Système opérationnel</span>
            </button>
            <div className="text-[10px] text-center text-[#555555] mt-3 font-medium">
              v3.1.0 • Dataven Corp
            </div>
          </div>
        </aside>
      </>

  );
};

export default Sidebar;
