import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import CourtOfArms from '../assets/Court of Arms.png';
import {
  MenuIcon,
  BellIcon,
  UserIcon,
  LogOutIcon,
  SettingsIcon,
  ChevronDownIcon,
  ShieldCheckIcon
} from 'lucide-react';

export default function AdminNavbar({ onMenuToggle, sidebarOpen }) {
  const [profileDropdownOpen, setProfileDropdownOpen] = useState(false);
  const [notificationsOpen, setNotificationsOpen] = useState(false);
  const storedUser = JSON.parse(localStorage.getItem("user"));
  const usernameOrEmail = storedUser?.username || storedUser?.email || "Guest";
  const navigate = useNavigate();

  // Mock admin user data - replace with actual user context
  // const adminUser = {
  //   name: 'Admin User',
  //   email: 'admin@gov.portal',
  //   role: 'System Administrator',
  //   avatar: null
  // };

  const adminUser = usernameOrEmail
  const notifications = [
    { id: 1, message: 'New complaint submitted', time: '5 mins ago', unread: true },
    { id: 2, message: 'Poll results updated', time: '1 hour ago', unread: true },
    { id: 3, message: 'System maintenance scheduled', time: '2 hours ago', unread: false }
  ];

  const unreadCount = notifications.filter(n => n.unread).length;

  const handleLogout = () => {
    // Add logout logic here
    navigate('/login');
  };

  return (
    <nav className="bg-white shadow-lg border-b border-blue-100 relative z-30">
      <div className="mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Left side - Menu toggle and Logo */}
          <div className="flex items-center space-x-4">
            {/* <button
              onClick={onMenuToggle}
              className="p-2 rounded-md text-blue-700 hover:bg-blue-50 hover:text-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
              aria-label="Toggle menu"
            >
              <MenuIcon className="w-6 h-6" />
            </button> */}
            
            <div className="flex items-center space-x-3">
              <div className="flex items-center justify-center w-8 h-8 rounded-lg">
                <img src={CourtOfArms} alt="Court of Arms" className="w-8 h-8 object-contain" />
              </div>
              <div className="hidden sm:block">
                <h1 className="text-xl font-bold text-blue-900 font-poppins">
                  Admin Portal
                </h1>
                <p className="text-xs text-blue-600 font-inter">
                  Government Citizen Interaction Centre
                </p>
              </div>
            </div>
          </div>

          {/* Right side - Notifications and Profile */}
          <div className="flex items-center space-x-4">
            {/* Notifications */}
            <div className="relative">
              <button
                onClick={() => setNotificationsOpen(!notificationsOpen)}
                className="p-2 rounded-full text-blue-700 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 relative transition-colors"
              >
                <BellIcon className="w-6 h-6" />
                {unreadCount > 0 && (
                  <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                    {unreadCount}
                  </span>
                )}
              </button>

              {/* Notifications Dropdown */}
              {notificationsOpen && (
                <div className="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
                  <div className="px-4 py-2 border-b border-gray-100">
                    <h3 className="text-sm font-semibold text-gray-900 font-poppins">Notifications</h3>
                  </div>
                  <div className="max-h-64 overflow-y-auto">
                    {notifications.map((notification) => (
                      <div
                        key={notification.id}
                        className={`px-4 py-3 hover:bg-gray-50 border-l-4 ${
                          notification.unread ? 'border-blue-500 bg-blue-50/30' : 'border-transparent'
                        }`}
                      >
                        <p className="text-sm text-gray-900 font-inter">{notification.message}</p>
                        <p className="text-xs text-gray-500 mt-1">{notification.time}</p>
                      </div>
                    ))}
                  </div>
                  <div className="border-t border-gray-100 mt-2 pt-2">
                    <Link
                      to="/admin/notifications"
                      className="block px-4 py-2 text-sm text-blue-700 hover:bg-blue-50 font-inter"
                      onClick={() => setNotificationsOpen(false)}
                    >
                      View all notifications
                    </Link>
                  </div>
                </div>
              )}
            </div>
 
            {/* Profile Dropdown */}
            <div className="relative">
              <button
                onClick={() => setProfileDropdownOpen(!profileDropdownOpen)}
                className="flex items-center space-x-3 p-2 rounded-lg text-blue-700 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
              >
                <div className="flex items-center justify-center w-8 h-8 bg-blue-600 rounded-full">
                  <UserIcon className="w-5 h-5 text-white" />
                </div>
                <div className="hidden md:block text-left">
                  <p className="text-sm font-medium text-blue-900 font-poppins">{usernameOrEmail}</p>
                  <p className="text-xs text-blue-600 font-inter">{adminUser.role}</p>
                </div>
                <ChevronDownIcon className="w-4 h-4" />
              </button>

              {/* Profile Dropdown Menu */}
              {profileDropdownOpen && (
                <div className="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
                  <div className="px-4 py-3 border-b border-gray-100">
                    <p className="text-sm font-medium text-gray-900 font-poppins">{usernameOrEmail}</p>
                    <p className="text-sm text-gray-500 font-inter">{adminUser.email}</p>
                  </div>
                  
                  {/* <Link
                    to="/admin/profile"
                    className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 font-inter"
                    onClick={() => setProfileDropdownOpen(false)}
                  >
                    <UserIcon className="w-4 h-4 mr-3 text-gray-500" />
                    Profile Settings
                  </Link> */}
                  
                  <Link
                    to="/admin/settings"
                    className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 font-inter"
                    onClick={() => setProfileDropdownOpen(false)}
                  >
                    <SettingsIcon className="w-4 h-4 mr-3 text-gray-500" />
                    System Settings
                  </Link>
                  
                  <hr className="my-2" />
                  
                  <button
                    onClick={handleLogout}
                    className="flex items-center w-full px-4 py-2 text-sm text-red-700 hover:bg-red-50 font-inter"
                  >
                    <LogOutIcon className="w-4 h-4 mr-3 text-red-500" />
                    Sign Out
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Click outside to close dropdowns */}
      {(profileDropdownOpen || notificationsOpen) && (
        <div
          className="fixed inset-0 z-40"
          onClick={() => {
            setProfileDropdownOpen(false);
            setNotificationsOpen(false);
          }}
        ></div>
      )}
    </nav>
  );
}