"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { assetPath } from "../../utils/assetPath";
import AOS from "aos";
import "aos/dist/aos.css";
import { useGeneralSettings } from "@/context/GeneralSettingsContext";
import { API_BASE_IMAGE_URL } from "config";

const Navbar = () => {
  const { settings, loading } = useGeneralSettings();
  const router = useRouter();
  const pathname = usePathname();

  const isActive = (path) => pathname === path;

  const [isExpanded, setIsExpanded] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem("access");
    setIsLoggedIn(!!token);

    if (isExpanded) {
      document.body.classList.add("layout-expanded2");
    } else {
      document.body.classList.remove("layout-expanded2");
    }

    return () => {
      document.body.classList.remove("layout-expanded2");
    };
  }, [isExpanded]);

  // const handleLoginClick = () => {
  //   if (isLoggedIn) {
  //     router.push("/dashboard");
  //   } else {
  //     router.push("/auth/login");
  //   }
  // };

  useEffect(() => {
    AOS.init();
  }, []);

  const logoSrc = settings?.logo
    ? API_BASE_IMAGE_URL + settings.logo
    : assetPath("/assets/images/jury_intel_logo.png");

  return (
    <header className="headercontainer">
      <div
        className="layoutovarlay"
        onClick={() => setIsExpanded(false)}
      ></div>

      <div className="container">
        <div className="headtoprow">

          <div className="logocontainer">
            <Link href="/">
              <img src={logoSrc} alt="Logo" />
            </Link>
          </div>

          <div className="navigation">
            <div
              className="layoutovarlay2"
              onClick={(e) => {
                e.preventDefault();
                setIsExpanded(false);
              }}
            ></div>

            <div className="navigationbox">
              <div className="navuser">
                <Link href="#" className="userimg">
                  <img
                    src={assetPath("/assets/images/user-3.jpg")}
                    alt="User"
                  />
                </Link>

                <div className="w-100">
                  <h3>
                    <Link href="#">Rahul H</Link>
                  </h3>
                </div>
              </div>

              <ul className="sf-menu">
                {/* <li className={isActive("/") ? "active" : ""}>
                  <Link href="/">Home</Link>
                </li> */}

                <li className={isActive("/how-it-works") ? "active" : ""}>
                  <Link href="/how-it-works">How It Works</Link>
                </li>

                <li className={isActive("/features") ? "active" : ""}>
                  <Link href="/features">Features</Link>
                </li>

                <li className={isActive("/pricing") ? "active" : ""}>
                  <Link href="/pricing">Pricing</Link>
                </li>

                <li className={isActive("/about-us") ? "active" : ""}>
                  <Link href="/about-us">About</Link>
                </li>

                <li className={isActive("/faq") ? "active" : ""}>
                  <Link href="/faq">Faqs</Link>
                </li>

                <li className={isActive("/contact") ? "active" : ""}>
                  <Link href="/contact">Contact</Link>
                </li>
              </ul>
            </div>
          </div>

          <div className="userbts">
            <Link href="/contact" className="default-btn">Request Demo</Link>
            <Link
              href={isLoggedIn ? "/dashboard" : "/auth/login"}
              className="theme-btn"
            >
              {isLoggedIn ? <i className="icon icon-user-o d-inline-flex d-md-none"></i> :
                <i className="icon icon-user-o d-inline-flex d-md-none"></i>}

              <span className="d-none d-md-block">
                {isLoggedIn ? "Dashboard" : "Login"}
              </span>
            </Link>



            <a
              className="NavBar"
              onClick={() => setIsExpanded(!isExpanded)}
              href="#"
            >
              <i className="icon icon-segment"></i>
            </a>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Navbar;