"use client";

import NavbarLogo from "@/assets/logo/navbar/navbar-logo.svg";
import { Input } from "@/components/ui/input";
import SearchIcon from "@/shared/icons/navbar/searchIcon.svg";
import LogoutIcon from "@/shared/icons/navbar/logoutIcon.svg";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import { logout } from "@/store/auth/authSlice";
import { useRouter } from "next/navigation";
import { authUtils } from "@/lib/auth-utils";
import Link from "next/link";

const Navbar = () => {
  const dispatch = useDispatch();
  const router = useRouter();

  const { isAuthenticated } = useSelector((state: RootState) => state.auth);

  const handleLogout = () => {
    dispatch(logout())
    authUtils.clearTokens();
    router.replace('/login')
  }

  return (
    <div className="z-2 relative w-full bg-[linear-gradient(89.86deg,_#C7C7E4_-158.26%,_#5356A6_-68.52%,_#0D0E2B_39.97%)] shadow-[0px_4px_4px_0px_#0D0E2BCC]">
      <div className="container mx-auto py-6 flex items-center justify-between">
        <div className="flex items-center gap-4">
          {/* Logo or brand name can go here */}
          <Link href="/home" className="text-white text-xl font-semibold"><NavbarLogo /></Link>
        </div>
        <div className="text-white bg-[#EDEDF914] basis-7/12 h-[48px] justify-between py-[8px] pr-[8px] pl-[20.71px] rounded-[8px] flex">
          <div className="flex items-center gap-3 w-full">
            <SearchIcon />
            <Input type="text" className="border-none focus-visible:outline-none focus-visible:ring-0 focus-visible:border-none w-full" />
          </div>
        </div>
        <nav className="hidden md:flex items-center gap-6 justify-end">
          {/* Navigation items can go here */}
          <a href="#" className="text-white hover:text-gray-300 transition-colors text-[18px] leading-[140%] underline decoration-solid decoration-skip-ink-auto">Support</a>
          <a href="/login" className="text-white hover:text-gray-300 transition-colors text-[18px] leading-[140%] underline decoration-solid decoration-skip-ink-auto">Change Password</a>
          {isAuthenticated &&<span className="text-white hover:text-gray-300 transition-colors text-[18px] leading-[140%] decoration-solid decoration-skip-ink-auto cursor-pointer" onClick={handleLogout}>
            <span className="flex items-center gap-1.5">
              <LogoutIcon />
              Logout
            </span>
          </span>}
        </nav>
      </div>
    </div>
  )
}

export default Navbar