import React from 'react';
import { NavLink } from 'react-router-dom';
import { 
  LayoutDashboard, 
  Users, 
  MessageCircle, 
  Settings, 
  FileText,
  Shield
} from 'lucide-react';
import { useAuth } from '../../context/AuthContext';

interface SidebarProps {
  collapsed: boolean;
  onToggle: () => void;
}

const Sidebar: React.FC<SidebarProps> = ({ collapsed, onToggle }) => {
  const { user, hasRole, isSuperAdmin, hasPermission } = useAuth();

  const navItems = [
    { path: '/dashboard', icon: LayoutDashboard, label: 'Dashboard', permission: 'dashboard.view' },
    { path: '/directory', icon: Users, label: 'Directory', permission: 'directory.access' },
    { path: '/conversations', icon: MessageCircle, label: 'Messages', permission: 'conversations.access' },
    { path: '/profile', icon: FileText, label: 'My Profile', permission: 'profile_page.access' },
  ];

  // Filter menu items based on permissions
  const filteredNavItems = navItems.filter(item => {
    // If no permission specified, show to all authenticated users
    if (!item.permission) return true;
    
    // Check if user has the required permission
    return hasPermission(item.permission);
  });

  // Add admin/management items
  if (isSuperAdmin() || hasPermission('admin.access') || hasPermission('management.access')) {
    filteredNavItems.push({ path: '/admin', icon: Shield, label: 'Management', permission: 'admin.access' });
  }

  // Add Settings only for users with settings permission
  if (hasPermission('settings.access')) {
    filteredNavItems.push({ path: '/settings', icon: Settings, label: 'Settings', permission: 'settings.access' });
  }

  return (
    <div className={`bg-gray-800 text-white h-full flex flex-col transition-all duration-300 ${
      collapsed ? 'w-16' : 'w-64'
    }`}>
      <div className="flex-1 overflow-y-auto overflow-x-hidden">
        <div className="p-4">
          {/* Navy Logo - Centered */}
          {/* <div className="flex justify-center mb-6">
            <img 
              src="/Images/navyLogo.svg" 
              alt="Navy Logo" 
              className={`${collapsed ? 'w-8 h-8' : 'w-12 h-12'} object-contain`} style={{ width: '50px' , height: '50px'}}
            />
          </div> */}

          <div className="space-y-2">
            {filteredNavItems.map((item) => (
              <NavLink
                key={item.path}
                to={item.path}
                className={({ isActive }) =>
                  `flex items-center rounded-lg transition-colors ${
                    collapsed ? 'px-3 py-3 justify-center' : 'px-4 py-3'
                  } ${
                    isActive
                      ? 'bg-blue-600 text-white'
                      : 'text-gray-300 hover:bg-gray-700 hover:text-white'
                  }`
                }
                title={collapsed ? item.label : undefined}
              >
                <item.icon className={`${collapsed ? 'h-7 w-7' : 'h-5 w-5'}`} />
                {!collapsed && <span className="ml-3">{item.label}</span>}
              </NavLink>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;