zkt26/Front-end/src/components/Header.jsx

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

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

  const toggleAdminDropdown = () => {
    setShowAdminDropdown((prev) => !prev);
  };

  return (
    <header className="bg-white shadow-md relative">
      <div className="mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center sm:grid sm:grid-cols-3">
        {/* Logo Section */}
        <div className="flex justify-start">
          <Link to="/" className="text-2xl font-bold text-indigo-600">
            VigiMétéo
          </Link>
        </div>

        {/* Navigation Section (Centered on Desktop) */}
        <nav
          className={`${
            isMenuOpen ? "block" : "hidden"
          } absolute z-[1000] top-16 left-0 w-full bg-white shadow-md sm:static sm:flex sm:justify-center sm:shadow-none sm:bg-transparent`}
        >
          <ul className="flex flex-col sm:flex-row gap-4 sm:gap-10 text-gray-600 p-4 sm:p-0 font-medium">
            <li>
              <Link
                to="/"
                onClick={() => setIsMenuOpen(false)}
                className="text-gray-600 hover:text-indigo-600 transition-colors"
              >
                {t('header.home')}
              </Link>
            </li>
            <li>
              <Link
                to="/about"
                onClick={() => setIsMenuOpen(false)}
                className="text-gray-600 hover:text-indigo-600 transition-colors"
              >
                {t('header.about')}
              </Link>
            </li>
            
            {/* Logic for roles */}
            {token && (
              <>
                {user?.role === "user" ? (
                  <li>
                    <Link
                      to="/gestionObjets"
                      onClick={() => setIsMenuOpen(false)}
                      className="text-gray-600 hover:text-indigo-600 transition-colors"
                    >
                      {t('header.visualizer')}
                    </Link>
                  </li>
                ) : (
                  <li>
                    <Link
                      to="/gestion"
                      onClick={() => setIsMenuOpen(false)}
                      className="text-gray-600 hover:text-indigo-600 transition-colors"
                    >
                      {t('header.manage')}
                    </Link>
                  </li>
                )}
                {user?.role === "admin" && (
                  <li className="relative group">
                    <button
                      onClick={toggleAdminDropdown}
                      className="flex items-center text-gray-600 hover:text-indigo-600 focus:outline-none transition-colors"
                    >
                      {t('header.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);setIsMenuOpen(false);}}
                        >
                          {t('header.dashboard')}
                        </Link>
                        <Link
                          to="/user"
                          className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                          onClick={() => {setShowAdminDropdown(false);setIsMenuOpen(false);}}
                        >
                          {t('header.manageUsers')}
                        </Link>
                        <Link
                          to="/adminobjet"
                          className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                          onClick={() => {setShowAdminDropdown(false);setIsMenuOpen(false);}}
                        >
                          {t('header.manageObjects')}
                        </Link>
                      </div>
                    )}
                  </li>
                )}
              </>
            )}

            {/* Mobile-only auth links */}
            {!token ? (
              <>
                <li className="sm:hidden">
                  <Link
                    to="/login"
                    onClick={() => setIsMenuOpen(false)}
                    className="hover:text-indigo-600 flex items-center gap-2"
                  >
                    <LogIn size={20} />
                    {t('header.login')}
                  </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"
                  >
                    <UserPlus size={20} />
                    {t('header.signup')}
                  </Link>
                </li>
              </>
            ) : (
              <>
                <li className="sm:hidden">
                  <Link
                    to="/profil"
                    onClick={() => setIsMenuOpen(false)}
                    className="flex items-center gap-2 text-gray-600 hover:text-indigo-600"
                  >
                    <User size={20} />
                    <span>{t('header.profile')}</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 w-full text-left"
                  >
                    <LogOut size={20} />
                    <span>{t('header.logout')}</span>
                  </button>
                </li>
              </>
            )}
          </ul>
        </nav>

        {/* Auth Section (Right side) */}
        <div className="flex justify-end items-center gap-4">
          {!token ? (
            <div className="hidden sm:flex gap-4 items-center">
              <LanguageSwitcher />
              <Link
                to="/login"
                className="text-gray-600 hover:text-indigo-600 flex items-center gap-2 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                <LogIn size={20} />
                {t('header.login')}
              </Link>
              <Link
                to="/signup"
                className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors shadow-sm"
                onClick={() => setIsMenuOpen(false)}
              >
                <UserPlus size={20} />
                {t('header.signup')}
              </Link>
            </div>
          ) : (
            <div className="hidden sm:flex items-center gap-6">
              <LanguageSwitcher />
              <Link
                to="/profil"
                className="flex items-center gap-2 text-gray-600 hover:text-indigo-600 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                <User size={20} />
              </Link>
              <button
                onClick={logout}
                className="flex items-center gap-2 text-gray-600 hover:text-red-600 transition-colors"
              >
                <LogOut size={20} />
                <span className="font-medium">{t('header.logout')}</span>
              </button>
            </div>
          )}
          
          {/* Mobile Menu Button */}
          <button
            className="sm:hidden text-gray-600 hover:text-indigo-600 focus:outline-none"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>
    </header>
  );
}

export default Header;