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

const navigation = [
  { name: 'Dashboard', href: '/dashboard', icon: Home },
  { name: 'Product Management', href: '/product-management', icon: Package },
  { name: 'Sales Management', href: '/sales-management', icon: ShoppingBag },
  { name: 'Reseller Requests', href: '/resellers', icon: Users },
  { name: 'Approved Resellers', href: '/approved-resellers', icon: Handshake },
  // { name: 'Deals', href: '/deals', icon: Briefcase },
  { name: 'Commissions', href: '/commissions', icon: Wallet },
  { name: 'Training', href: '/training', icon: BookOpen },
  { name: 'Support', href: '/support', icon: Headphones },
  { name: 'Analytics', href: '/analytics', icon: BarChart3 },
  { name: 'Reports', href: '/reports', icon: FileText },
  { name: 'Performance', href: '/performance', icon: TrendingUp },
  { name: 'Marketplace', href: '/marketplace', icon: ShoppingBag },
  { name: 'Certifications', href: '/certifications', icon: Award },
  { name: 'Knowledge Base', href: '/knowledge-base', icon: HelpCircle },
  { name: 'Settings', href: '/settings', icon: Settings },
];

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

  const handleLogout = () => {
    dispatch(logout());
    toast.success('Logged out successfully');
    
    // Wait a bit for Redux state to update, then navigate
    setTimeout(() => {
      navigate('/login');
    }, 100);
  };

  return (
    <div className={cn(
      "flex flex-col h-full bg-white dark:bg-gray-800 border-r border-secondary-200 dark:border-secondary-700 transition-all duration-300",
      isCollapsed ? "w-16" : "w-64"
    )}>
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-secondary-200 dark:border-secondary-700">
        {!isCollapsed && (
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-gradient-to-r from-primary-600 to-primary-400 rounded-lg flex items-center justify-center">
              <Building className="w-5 h-5 text-white" />
            </div>
                          <a 
                href="https://cloudtopiaa.com/" 
                target="_blank" 
                rel="noopener noreferrer"
                className="text-lg font-semibold text-secondary-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
              >
                Cloudtopiaa
              </a>
          </div>
        )}
        <button
          onClick={() => setIsCollapsed(!isCollapsed)}
          className="p-1 rounded-md hover:bg-secondary-100 dark:hover:bg-secondary-800 transition-colors"
        >
          {isCollapsed ? (
            <Menu className="w-6 h-6 text-secondary-600 dark:text-secondary-400" />
          ) : (
            <X className="w-5 h-5 text-secondary-600 dark:text-secondary-400" />
          )}
        </button>
      </div>

      {/* Navigation */}
      <nav className={cn(
        "flex-1 py-4 space-y-1 overflow-y-auto",
        isCollapsed ? "px-3" : "px-2"
      )}>
        {navigation.map((item) => {
          const isActive = location.pathname === item.href;
          return (
            <Link
              key={item.name}
              to={item.href}
              className={cn(
                "flex items-center text-sm font-medium rounded-md transition-colors group",
                isCollapsed ? "px-2 py-3 justify-center" : "px-3 py-2",
                isActive
                  ? "bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300"
                  : "text-secondary-700 hover:bg-secondary-100 hover:text-secondary-900 dark:text-secondary-300 dark:hover:bg-secondary-800 dark:hover:text-white"
              )}
            >
              <item.icon className={cn(
                "flex-shrink-0 transition-colors",
                isCollapsed ? "w-6 h-6" : "w-5 h-5",
                isActive
                  ? "text-primary-600 dark:text-primary-400"
                  : "text-secondary-500 group-hover:text-secondary-700 dark:text-secondary-400 dark:group-hover:text-white"
              )} />
              {!isCollapsed && (
                <span className="ml-3">{item.name}</span>
              )}
            </Link>
          );
        })}
      </nav>

      {/* User Profile & Actions */}
      <div className="border-t border-secondary-200 dark:border-secondary-700 p-4">
        {/* Theme Toggle */}
        <div className="flex items-center justify-between mb-4">
          {!isCollapsed && (
            <span className="text-sm text-secondary-600 dark:text-secondary-400">
              Theme
            </span>
          )}
          <button
            onClick={() => dispatch(toggleTheme())}
            className="p-2 rounded-md hover:bg-secondary-100 dark:hover:bg-secondary-800 transition-colors"
            title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
          >
            {theme === 'dark' ? (
              <Sun className={cn(isCollapsed ? "w-6 h-6" : "w-5 h-5", "text-secondary-600 dark:text-secondary-400")} />
            ) : (
              <Moon className={cn(isCollapsed ? "w-6 h-6" : "w-5 h-5", "text-secondary-600 dark:text-secondary-400")} />
            )}
          </button>
        </div>

        {/* User Profile */}
        {user && (
          <div className="flex items-center space-x-3">
            <div className="flex-shrink-0">
              <div className="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
                <span className="text-xs font-medium text-primary-600 dark:text-primary-400">
                  {`${user.firstName[0]}${user.lastName[0]}`}
                </span>
              </div>
            </div>
            {!isCollapsed && (
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-secondary-900 dark:text-white truncate">
                  {`${user.firstName} ${user.lastName}`}
                </p>
                <p className="text-xs text-secondary-500 dark:text-secondary-400 truncate">
                  {user.email}
                </p>
              </div>
            )}
            <button
              onClick={handleLogout}
              className="p-1 rounded-md hover:bg-secondary-100 dark:hover:bg-secondary-800 transition-colors"
              title="Logout"
            >
              <LogOut className={cn(isCollapsed ? "w-5 h-5" : "w-4 h-4", "text-secondary-600 dark:text-secondary-400")} />
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Sidebar;