import React, { useState } from 'react';
import { User, Notification } from '../types';
import { isManagerialRole, isExecutiveOfficerRole, isTopManagementRole } from '../utils/roleUtils';
import { 
  Building2, 
  Briefcase, 
  UserCircle, 
  Bell, 
  LogOut, 
  ClipboardList, 
  LayoutDashboard,
  Check,
  Users,
  UserCheck,
  ClipboardCheck,
  Video
} from 'lucide-react';

interface NavbarProps {
  user: User | null;
  activeTab: string;
  setActiveTab: (tab: string) => void;
  notifications: Notification[];
  onMarkNotificationsRead: () => void;
  onLogout: () => void;
}

export default function Navbar({ 
  user, 
  activeTab, 
  setActiveTab, 
  notifications, 
  onMarkNotificationsRead, 
  onLogout 
}: NavbarProps) {
  const [showNotifDropdown, setShowNotifDropdown] = useState(false);
  const unreadCount = notifications.filter(n => !n.isRead).length;

  const isManagerial = isManagerialRole(user);
  const isExecutiveOfficer = isExecutiveOfficerRole(user);

  const isAdmin = !isExecutiveOfficer && !isManagerial && (
                  user?.role === 'Admin' ||
                  user?.designation === 'Marketplace Admin' || 
                  user?.designation === 'Sub Admin' ||
                  !!user?.email?.toLowerCase().includes('admin')
  );

  const tabs = isManagerial ? [
    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
    { id: 'employees', label: 'Employee', icon: UserCheck },
    { id: 'order-analysis', label: 'Order Analysis', icon: ClipboardList },
    { id: 'my-proceed', label: 'Follow-up', icon: ClipboardCheck },
    { id: 'profile', label: 'Profile Settings', icon: UserCircle },
  ] : isExecutiveOfficer ? [
    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
    { id: 'all-unified-orders', label: 'All Unified Orders', icon: ClipboardList },
    { id: 'my-proceed', label: 'My Proceed', icon: ClipboardCheck },
    { id: 'profile', label: 'Profile Settings', icon: UserCircle },
  ] : (isAdmin ? [
    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
    { id: 'users', label: 'User', icon: Users },
    { id: 'employees', label: 'Employee', icon: UserCheck },
    { id: 'factories', label: 'My Factories', icon: Building2 },
    { id: 'order-analysis', label: 'Order Analysis', icon: ClipboardList },
    { id: 'aci', label: 'Aci', icon: Video },
    { id: 'profile', label: 'Profile Settings', icon: UserCircle },
  ] : [
    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
    { id: 'factories', label: 'My Factories', icon: Building2 },
    { id: 'jobs', label: 'Order', icon: ClipboardList },
    { id: 'applications', label: 'Received Offers', icon: Briefcase },
    { id: 'profile', label: 'Profile Settings', icon: UserCircle },
  ]);

  return (
    <nav className="bg-slate-900 text-white border-b border-slate-800 sticky top-0 z-50 shadow-md">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          {/* Logo Section */}
          <div className="flex items-center space-x-2">
            <div className="bg-blue-600 p-2 rounded-lg">
              <Building2 className="w-6 h-6 text-white" />
            </div>
            <div>
              <span className="font-sans font-bold text-lg tracking-tight bg-gradient-to-r from-white to-blue-400 bg-clip-text text-transparent">
                Garments B2B
              </span>
              <span className="text-[10px] block font-mono text-slate-400 tracking-wider uppercase -mt-1">
                Unified Marketplace
              </span>
            </div>
          </div>

          {/* Center Tabs */}
          {user && (
            <div className="hidden md:flex space-x-1 items-center">
              {tabs.map(tab => {
                const Icon = tab.icon;
                const isActive = activeTab === tab.id;
                return (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
                      isActive 
                        ? 'bg-blue-600 text-white shadow-sm shadow-blue-500/20' 
                        : 'text-slate-300 hover:bg-slate-800 hover:text-white'
                    }`}
                  >
                    <Icon className="w-4 h-4" />
                    <span>{tab.label}</span>
                  </button>
                );
              })}
            </div>
          )}

          {/* Right Actions */}
          <div className="flex items-center space-x-4">
            {user ? (
              <>
                {/* Notifications Center */}
                <div className="relative">
                  <button 
                    onClick={() => {
                      setShowNotifDropdown(!showNotifDropdown);
                      if (!showNotifDropdown && unreadCount > 0) {
                        onMarkNotificationsRead();
                      }
                    }}
                    className="p-2 rounded-full text-slate-300 hover:text-white hover:bg-slate-800 focus:outline-none transition relative cursor-pointer"
                  >
                    <Bell className="w-5 h-5" />
                    {unreadCount > 0 && (
                      <span className="absolute top-1 right-1 inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-bold leading-none text-white bg-red-500 rounded-full">
                        {unreadCount}
                      </span>
                    )}
                  </button>

                  {/* Notifications Dropdown */}
                  {showNotifDropdown && (
                    <div className="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-xl border border-slate-200 text-slate-800 py-2 z-50">
                      <div className="px-4 py-2 border-b border-slate-100 flex justify-between items-center bg-slate-50">
                        <span className="font-semibold text-xs text-slate-700">Notifications</span>
                        <span className="text-[10px] text-slate-500 font-mono">Recent Updates</span>
                      </div>
                      <div className="max-h-64 overflow-y-auto">
                        {notifications.length === 0 ? (
                          <div className="p-4 text-center text-xs text-slate-400">
                            No notifications yet
                          </div>
                        ) : (
                          notifications.map(notif => (
                            <div 
                              key={notif.id} 
                              className={`p-3 border-b border-slate-50 text-xs transition-colors hover:bg-slate-50 ${
                                !notif.isRead ? 'bg-blue-50/50' : ''
                              }`}
                            >
                              <div className="flex items-start space-x-2">
                                <div className="mt-0.5 bg-blue-100 text-blue-600 rounded-full p-1 shrink-0">
                                  <Check className="w-3 h-3" />
                                </div>
                                <div className="flex-1">
                                  <p className="text-slate-700 leading-tight">{notif.text}</p>
                                  <span className="text-[9px] text-slate-400 font-mono mt-1 block">
                                    {new Date(notif.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                  </span>
                                </div>
                              </div>
                            </div>
                          ))
                        )}
                      </div>
                    </div>
                  )}
                </div>

                {/* User Avatar Info */}
                <div className="flex items-center space-x-3 pl-2 border-l border-slate-800">
                  <div className="hidden lg:block text-right">
                    <p className="text-xs font-semibold text-white leading-tight">{user.name}</p>
                    <p className="text-[10px] font-mono text-slate-400">{user.designation}</p>
                  </div>
                  <img 
                    src={user.avatar} 
                    alt={user.name} 
                    className="w-9 h-9 rounded-full object-cover border border-slate-700" 
                  />
                  <button 
                    onClick={onLogout}
                    title="Sign Out"
                    className="p-1.5 rounded text-slate-400 hover:text-red-400 hover:bg-slate-800 transition cursor-pointer"
                  >
                    <LogOut className="w-4 h-4" />
                  </button>
                </div>
              </>
            ) : (
              <span className="text-xs font-mono text-slate-400">Not signed in</span>
            )}
          </div>
        </div>
      </div>
    </nav>
  );
}
