import React, { useState, useEffect } 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);

  return (
    <header className="bg-white shadow-md ">
      <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>

        <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>
            {!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></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} />
                    <span>Déconnexion</span>
                  </button>
                </li>
              </>
            )}
            <li></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} />
              <span></span>
            </Link>
            <button
              onClick={logout}
              className="flex items-center gap-2 text-gray-600 hover:text-red-600"
            >
              <LogOut size={20} />
              <span>Déconnexion</span>
            </button>
          </div>
        )}
      </div>
    </header>
  );
}

export default Header;