Cloudtopiaa_Reseller_Frontend/src/components/Layout/ResellerSidebar.tsx

import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useAppSelector, useAppDispatch } from '../../store/hooks';
import { 
  Home, 
  Users, 
  Cloud, 
  Headphones, 
  BarChart3, 
  BookOpen, 
  ShoppingBag, 
  Award, 
  HelpCircle, 
  Settings, 
  Menu,
  X,
  Sun,
  Moon,
  LogOut,
  Building,
  Target,
  TrendingUp,
  Package,
  FileText,
  User,
  ChevronRight
} from 'lucide-react';
import { RootState } from '../../store';
import { toggleTheme } from '../../store/slices/themeSlice';
import { logout } from '../../store/slices/authSlice';
import { cn } from '../../utils/cn';

const resellerNavigation = [
  { name: 'Dashboard', href: '/reseller-dashboard', icon: Home },
  { name: 'Customers', href: '/reseller-dashboard/customers', icon: Users },
  { name: 'Products', href: '/reseller-dashboard/products', icon: Package },
  { name: 'Receipts & Sales', href: '/reseller-dashboard/receipts', icon: FileText },
  { name: 'Support', href: '/reseller-dashboard/support', icon: Headphones },
  { name: 'Training', href: '/reseller-dashboard/training', icon: BookOpen },
  { name: 'Certifications', href: '/reseller-dashboard/certifications', icon: Award },
  { name: 'Knowledge Base', href: '/reseller-dashboard/knowledge-base', icon: HelpCircle },
  { name: 'Reports', href: '/reseller-dashboard/reports', icon: BarChart3 },
  { name: 'Marketplace', href: '/reseller-dashboard/marketplace', icon: ShoppingBag },
  { name: 'Settings', href: '/reseller-dashboard/settings', icon: Settings },
];

const ResellerSidebar: React.FC = () => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const location = useLocation();
  const dispatch = useAppDispatch();
  const { theme } = useAppSelector((state: RootState) => state.theme);
  const { user } = useAppSelector((state: RootState) => state.auth);

  const handleLogout = () => {
    dispatch(logout());
  };

  return (
    <div className={cn(
      "flex flex-col h-full bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 border-r border-slate-700/50 transition-all duration-300",
      isCollapsed ? "w-16" : "w-64"
    )}>
      {/* Navigation */}
      <nav className={cn(
        "flex-1 py-4 space-y-1 overflow-y-auto",
        isCollapsed ? "px-3" : "px-2"
      )}>
        {/* Collapse/Expand Button */}
        <div className={cn(
          "flex mb-4",
          isCollapsed ? "justify-center" : "justify-end"
        )}>
          <button
            onClick={() => setIsCollapsed(!isCollapsed)}
            className={cn(
              "p-2 rounded-md hover:bg-slate-700/50 transition-colors text-slate-400 hover:text-white",
              isCollapsed ? "w-full justify-center" : ""
            )}
            title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
          >
            {isCollapsed ? (
              <div className="flex items-center justify-center">
                <Menu className="w-5 h-5" />
                <ChevronRight className="w-4 h-4 ml-1" />
              </div>
            ) : (
              <X className="w-5 h-5" />
            )}
          </button>
        </div>

        {resellerNavigation.map((item) => {
          const isActive = location.pathname === item.href;
          return (
            <Link
              key={item.name}
              to={item.href}
              className={cn(
                "flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-200",
                isActive
                  ? "bg-emerald-600 text-white shadow-lg"
                  : "text-slate-300 hover:bg-slate-700/50 hover:text-white"
              )}
            >
              <item.icon className={cn(
                "flex-shrink-0 w-5 h-5",
                isCollapsed ? "" : "mr-3",
                isActive ? "text-white" : "text-slate-400"
              )} />
              {!isCollapsed && <span>{item.name}</span>}
            </Link>
          );
        })}
      </nav>

      {/* Footer */}
      <div className="p-4 border-t border-slate-700/50">
        <div className="flex items-center justify-between">
          {!isCollapsed && (
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-lg flex items-center justify-center">
                <User className="w-5 h-5 text-white" />
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-white truncate">
                  {user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : user?.email || 'User'}
                </p>
                <p className="text-xs text-slate-400 truncate">
                  {user?.email || 'reseller@example.com'}
                </p>
              </div>
            </div>
          )}
          
          <div className="flex items-center space-x-2">
            <button
              onClick={() => dispatch(toggleTheme())}
              className="p-2 rounded-md hover:bg-slate-700/50 transition-colors"
              title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
            >
              {theme === 'dark' ? (
                <Sun className="w-4 h-4 text-slate-400" />
              ) : (
                <Moon className="w-4 h-4 text-slate-400" />
              )}
            </button>
            
            <button
              onClick={handleLogout}
              className="p-2 rounded-md hover:bg-slate-700/50 transition-colors"
              title="Logout"
            >
              <LogOut className="w-4 h-4 text-slate-400" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ResellerSidebar;