'use client';

import Link from "next/link";
import { COMPANY_NAME } from "../config/constants";
import { useAuth } from "../../context/AuthContext";
import { usePathname } from "next/navigation";

export default function Navbar() {
  const { user, logoutUser, isAuthenticated, isAdmin } = useAuth();

  const pathname = usePathname();

  const isActive = (path: string) => pathname === path ? "bg-white/20" : "hover:bg-white/15";

  return (
    <nav className="w-full flex justify-between items-center px-8 py-4 bg-gradient-to-r from-[#1f5f4a] to-[#2f7d5f] shadow-md text-white">

      <div className="flex items-center gap-3">
        <div className="font-semibold tracking-wide text-lg">
          {COMPANY_NAME}
        </div>
      </div>

      <div className="flex items-center gap-2 text-sm font-medium">
        <Link href="/" className={`px-4 py-2 rounded-lg transition ${isActive("/")}`}>ACCUEIL</Link>

        {isAuthenticated && (
          <>
            <Link href="/usagers" className={`px-4 py-2 rounded-lg transition ${isActive("/usagers")}`}>
              USAGERS
            </Link>
          </>
        )}

        {isAdmin && (
          <Link href="/admin" className={`px-4 py-2 rounded-lg transition ${isActive("/admin")}`}>
            ESPACE ADMIN
          </Link>
        )}

        <div className="flex items-center gap-3">
          {!isAuthenticated ? (
            <Link href="/login" className={`px-4 py-2 rounded-lg transition ${isActive("/login")}`}>
              CONNEXION
            </Link>
          ) : (
            <>
              <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 text-sm">
                <div className="w-2 h-2 rounded-full bg-green-300 animate-pulse" />
                <span>
                  {user?.prenom} {user?.nom}
                </span>
              </div>

              <button onClick={logoutUser} className="px-4 py-2 rounded-lg bg-white/1 hover:bg-red-500/30 transition text-sm">
                DÉCONNEXION
              </button></>
          )}
        </div>
      </div>
    </nav>
  );
}