import React from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import {
  LayoutDashboard,
  CheckSquare,
  Folder,
  BarChart3,
  FileText,
  Settings,
  Users,
  Calendar,
  MessageSquare,
  ChevronLeft,
  ChevronRight
} from 'lucide-react';
import { useAuth } from '../hooks/useAuth';

const Sidebar = ({ isOpen, onToggle }) => {
  const { user } = useAuth();
  const location = useLocation();

  const menuItems = [
    { 
      path: `/${user?.role}`, 
      label: 'Dashboard', 
      icon: LayoutDashboard,
      roles: ['admin', 'manager', 'employee']
    },
    { 
      path: '/tasks', 
      label: 'Tasks', 
      icon: CheckSquare,
      roles: ['admin', 'manager', 'employee']
    },
    { 
      path: '/documents', 
      label: 'Documents', 
      icon: Folder,
      roles: ['admin', 'manager', 'employee']
    },
    { 
      path: '/analytics', 
      label: 'Analytics', 
      icon: BarChart3,
      roles: ['admin', 'manager']
    },
    { 
      path: '/reports', 
      label: 'Reports', 
      icon: FileText,
      roles: ['admin', 'manager']
    },
    { 
      path: '/users', 
      label: 'Users', 
      icon: Users,
      roles: ['admin']
    },
    { 
      path: '/calendar', 
      label: 'Calendar', 
      icon: Calendar,
      roles: ['admin', 'manager', 'employee']
    },
    { 
      path: '/messages', 
      label: 'Messages', 
      icon: MessageSquare,
      roles: ['admin', 'manager', 'employee']
    },
    { 
      path: '/settings', 
      label: 'Settings', 
      icon: Settings,
      roles: ['admin', 'manager', 'employee']
    },
  ];

  const filteredMenuItems = menuItems.filter(item => 
    item.roles.includes(user?.role)
  );

  return (
    <aside className={`fixed left-0 top-0 h-full bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transition-all duration-300 z-40 ${
      isOpen ? 'w-64' : 'w-16'
    }`}>
      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-center justify-between">
          {isOpen && (
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                <LayoutDashboard className="w-5 h-5 text-white" />
              </div>
              <span className="font-bold text-lg">TaskFlow Pro</span>
            </div>
          )}
          
          <button
            onClick={onToggle}
            className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
          >
            {isOpen ? (
              <ChevronLeft className="w-5 h-5 text-gray-600 dark:text-gray-400" />
            ) : (
              <ChevronRight className="w-5 h-5 text-gray-600 dark:text-gray-400" />
            )}
          </button>
        </div>
      </div>

      <nav className="p-4">
        <ul className="space-y-2">
          {filteredMenuItems.map((item) => {
            const Icon = item.icon;
            const isActive = location.pathname === item.path;
            
            return (
              <li key={item.path}>
                <NavLink
                  to={item.path}
                  className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                    isActive 
                      ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' 
                      : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                  }`}
                >
                  <Icon className="w-5 h-5 flex-shrink-0" />
                  {isOpen && (
                    <span className="text-sm font-medium">{item.label}</span>
                  )}
                </NavLink>
              </li>
            );
          })}
        </ul>
      </nav>

      {isOpen && (
        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-700">
          <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg p-4 text-white">
            <h3 className="font-semibold text-sm mb-1">Pro Tip</h3>
            <p className="text-xs opacity-90">
              Use keyboard shortcuts to navigate faster. Press Ctrl+K to open search.
            </p>
          </div>
        </div>
      )}
    </aside>
  );
};

export default Sidebar;