import React, { useState } from "react";
import { X, Menu, LogIn, UserPlus, LogOut, Settings } from "lucide-react";
import { Link } from "react-router-dom";
import { useAuth } from "../AuthContext";

function Header() {
  const { token, logout } = useAuth();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [showAdminDropdown, setShowAdminDropdown] = useState(false);

  // La fonction toggleAdminDropdown permet d'ouvrir/fermer le menu déroulant
  const toggleAdminDropdown = () => {
    setShowAdminDropdown((prev) => !prev);
  };

  // Pour l'instant, le menu "Admin" est toujours affiché.
  // TODO: Par la suite, ajoutez une vérification du rôle utilisateur (ex: token && user.role === "admin") 
  // afin d'afficher ce menu uniquement aux administrateurs.
  return (
    <header className="bg-white shadow-md sticky top-0 z-50">
      <div className="mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
        <Link to="/" className="text-2xl font-bold text-indigo-600">
          VigiMétéo
        </Link>
        <button
          className="sm:hidden text-gray-600 hover:text-indigo-600"
          onClick={() => setIsMenuOpen(!isMenuOpen)}
        >
          {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
        </button>

        {/* Navigation */}
        <nav
          className={`${
            isMenuOpen ? "block" : "hidden"
          } absolute  z-[1000] top-16 left-0 w-full bg-white shadow-md sm:static sm:w-auto sm:z-auto sm:flex sm:gap-6 sm:shadow-none`}
        >
          <ul className="flex flex-col sm:flex-row gap-4 sm:gap-6 text-gray-600 p-4 sm:p-0">
            <li>
              <Link
                to="/"
                onClick={() => setIsMenuOpen(false)}
                className="text-gray-600 hover:text-indigo-600"
              >
                Accueil
              </Link>
            </li>
            <li>
              <Link
                to="/about"
                onClick={() => setIsMenuOpen(false)}
                className="text-gray-600 hover:text-indigo-600"
              >
                À propos
              </Link>
            </li>
            <li>
              <Link
                to="/gestion"
                onClick={() => setIsMenuOpen(false)}
                className="text-gray-600 hover:text-indigo-600"
              >
                Gestion
              </Link>
            </li>
            {/* Menu déroulant Admin toujours affiché */}
            <li className="relative">
              <button
                onClick={toggleAdminDropdown}
                className="flex items-center text-gray-600 hover:text-indigo-600 focus:outline-none"
              >
                Admin
                <svg
                  className="ml-1 h-4 w-4 fill-current"
                  viewBox="0 0 20 20"
                >
                  <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
                </svg>
              </button>
              {showAdminDropdown && (
                <div className="absolute top-full left-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-50">
                  <Link
                    to="/dashboard"
                    className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                    onClick={() => setShowAdminDropdown(false)}
                  >
                    Dashboard
                  </Link>
                  <Link
                    to="/user"
                    className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                    onClick={() => setShowAdminDropdown(false)}
                  >
                    Gestion des Utilisateurs
                  </Link>
                  <Link
                    to="/adminobjet"
                    className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                    onClick={() => setShowAdminDropdown(false)}
                  >
                    Gestion des Objets Connectés
                  </Link>
                </div>
              )}
            </li>
            {!token ? (
              <>
                <li className="sm:hidden">
                  <Link
                    to="/login"
                    onClick={() => setIsMenuOpen(false)}
                    className="hover:text-indigo-600 flex items-center gap-2"
                  >
                    <LogIn size={20} />
                    Connexion
                  </Link>
                </li>
                <li className="sm:hidden">
                  <Link
                    to="/signup"
                    onClick={() => setIsMenuOpen(false)}
                    className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"
                  >
                    <UserPlus size={20} />
                    Inscription
                  </Link>
                </li>
              </>
            ) : (
              <>
                <li className="sm:hidden">
                  <Link
                    to="/settings"
                    onClick={()=>setIsMenuOpen(false)}
                    className="flex items-center gap-2 text-gray-600 hover:text-indigo-600"
                  >
                    <Settings size={20} />
                    <span>Paramètres</span>
                    <span></span>
                  </Link>
                </li>
                <li className="sm:hidden">
                  <button
                    onClick={()=>{
                      logout();
                      setIsMenuOpen(false)}}
                    className="flex items-center gap-2 text-gray-600 hover:text-red-600"
                  >
                    <LogOut size={20} />
                    Déconnexion
                  </button>
                </li>
              </>
            )}
          </ul>
        </nav>
        {!token ? (
          <div className="hidden sm:flex gap-4 ">
            <Link
              to="/login"
              onClick={()=>setIsMenuOpen(false)}
              className="hover:text-indigo-600 flex items-center gap-2"
            >
              <LogIn size={20} />
              Connexion
            </Link>
            <Link
              to="/signup"
              onClick={()=>setIsMenuOpen(false)}
              className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"
            >
              <UserPlus size={20} />
              Inscription
            </Link>
          </div>
        ) : (
          <div className="hidden sm:flex gap-4">
            <Link
              to="/settings"
              onClick={()=>setIsMenuOpen(false)}
              className="flex items-center gap-2 text-gray-600 hover:text-indigo-600"
            >
              <Settings size={20} />
            </Link>
            <button
              onClick={logout}
              className="flex items-center gap-2 text-gray-600 hover:text-red-600"
            >
              <LogOut size={20} />
              Déconnexion
            </button>
            {/* Menu déroulant Admin visible sur sm+ */}
            <div className="relative">
              <button onClick={toggleAdminDropdown} className="flex items-center text-gray-600 hover:text-indigo-600 focus:outline-none">
                Admin
                <svg className="ml-1 h-4 w-4 fill-current" viewBox="0 0 20 20">
                  <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
                </svg>
              </button>
              {showAdminDropdown && (
                <div className="absolute top-full left-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-50">
                  <Link
                    to="/dashboard"
                    className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                    onClick={() => setShowAdminDropdown(false)}
                  >
                    Dashboard
                  </Link>
                  <Link
                    to="/user"
                    className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                    onClick={() => setShowAdminDropdown(false)}
                  >
                    Gestion des Utilisateurs
                  </Link>
                  <Link
                    to="/adminobjet"
                    className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                    onClick={() => setShowAdminDropdown(false)}
                  >
                    Gestion des Objets Connectés
                  </Link>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </header>
  );
}

export default Header;