"use client";
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import Logo from "@/images/logo.png";
import LogoIcon from "@/images/logo-icon.png"
import Image from "next/image";
import { usePathname } from "next/navigation";
import axiosInstance from "@/lib/axiosInstance";
interface HeaderProps {
  menuOpen: boolean;
  setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
  siteSettings: any;
  student: any;
}

interface MarqueeItem {
  text: string;
  href: string;
  active: boolean;
}

const Header = ({ menuOpen, setMenuOpen, siteSettings, student, }: HeaderProps) => {
  const [isSticky, setIsSticky] = useState(false);
  const marqueeRef = useRef<HTMLDivElement>(null);
  const [marqueeItems, setMarqueeItems] = useState<MarqueeItem[]>([]);
  const [loadingMarquee, setLoadingMarquee] = useState(true);
  const pathname = usePathname();

  useEffect(() => {
    const fetchMarquee = async () => {
      try {
        const response = await axiosInstance.get("/cms/marquee");
        const result = await response.data;

        if (result.success && result.data) {
          const mapped: MarqueeItem[] = result.data.map(
            (item: {
              title: string;
              link: string | null;
              highlight: boolean | null;
            }) => ({
              text: item.title,
              href: item.link || "javascript:void(0);",
              active: item.highlight ?? false,
            })
          );

          setMarqueeItems(mapped);
        }
      } catch (error) {
        console.error(error);
      } finally {
        setLoadingMarquee(false);
      }
    };

    fetchMarquee();
  }, []);

  useEffect(() => {
    const marquee = marqueeRef.current;

    if (!marquee || loadingMarquee || marqueeItems.length === 0) return;

    // Prevent duplication after re-render
    marquee.style.transform = "translateX(0px)";
    marquee.innerHTML += marquee.innerHTML;

    let position = 0;
    const speed = 0.5;
    let animationId: number;

    const animate = () => {
      position -= speed;

      if (Math.abs(position) >= marquee.scrollWidth / 2) {
        position = 0;
      }

      marquee.style.transform = `translateX(${position}px)`;

      animationId = requestAnimationFrame(animate);
    };

    animate();

    return () => cancelAnimationFrame(animationId);
  }, [loadingMarquee, marqueeItems]);

  useEffect(() => {
    const handleScroll = () => {
      const header = document.querySelector(".headercontainer");

      if (!header) return;

      setIsSticky(window.scrollY > header.clientHeight);
    };

    window.addEventListener("scroll", handleScroll);

    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(() => {
    if (menuOpen) {
      document.body.classList.add("layout-expanded");
    } else {
      document.body.classList.remove("layout-expanded");
    }

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

  return (
    // <header className="headercontainer">
    <header className={`headercontainer ${isSticky ? "sticky" : ""}`}>
      <span className="headerblur"></span>

      <div className="headerinner">
        <div className="container container-xxl">
          <div className="headtoprow">
            <div className="logocontainer">
              <Link href="/">
                {siteSettings?.site_logo ? (
                  <Image
                    src={siteSettings.site_logo}
                    width={180}
                    height={70}
                    alt="Logo"
                  />
                ) : (
                  <Image
                    src={Logo}
                    width={180}
                    height={70}
                    alt="Logo"
                  />
                )}
              </Link>
            </div>

            <div className="navigation">
              <div className="marquee-wrapper d-none d-lg-block">
                <div className="margueetext" ref={marqueeRef}>
                  {!loadingMarquee &&
                    marqueeItems.map((item, index) => (
                      <a
                        key={index}
                        href={item.href}
                        className={item.active ? "active" : ""}
                        target={item.href !== "javascript:void(0);" ? "_blank" : undefined}
                        rel={
                          item.href !== "javascript:void(0);"
                            ? "noopener noreferrer"
                            : undefined
                        }
                      >
                        {item.text}
                      </a>
                    ))}
                </div>
              </div>

              <div className="navigationbox">
                <div className="navuser">
                  <a
                    href="javascript:void(0);"
                    className="userimg"
                  >
                    {siteSettings?.site_mobile_logo ? (
                      <Image
                        src={siteSettings.site_mobile_logo}
                        width={35}
                        height={50}
                        alt="Site Logo"
                      />
                    ) : (
                      <Image
                        src={LogoIcon}
                        width={35}
                        height={50}
                        alt="Site Logo"
                      />
                    )}
                  </a>

                  <div className="w-100">
                    <h3>
                      <Link href="/">{siteSettings?.site_name}</Link>
                    </h3>
                  </div>
                </div>

                <ul className="sf-menu">
                  <li className={pathname === "/" ? "active" : ""}>
                    <Link href="/">Home</Link>
                  </li>

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

                  <li className={pathname === "/academy" ? "active" : ""}>
                    <Link href="/academy">The Academy</Link>
                  </li>

                  {/* <li className={pathname === "/calendar" ? "active" : ""}>
                    <Link href="/calendar">Calendar</Link>
                  </li> */}
                  <li
                    className={
                      pathname === "/calendar" || pathname === "/student/schedule"
                        ? "active"
                        : ""
                    }
                  >
                    <Link href={student ? "/student/schedule" : "/calendar"}>
                      Calendar
                    </Link>
                  </li>

                  <li className={pathname === "/history" ? "active" : ""}>
                    <Link href="/history">History</Link>
                  </li>

                  <li className={pathname === "/kuchipudi-exams" ? "active" : ""}>
                    <Link href="/kuchipudi-exams">Kuchipudi Exams</Link>
                  </li>

                  <li className={pathname === "/ways-to-support" ? "active" : ""}>
                    <Link href="/ways-to-support">Help Us Help You</Link>
                  </li>

                  <li className={pathname === "/contact-us" ? "active" : ""}>
                    <Link href="/contact-us">Contact Us</Link>
                  </li>
                </ul>
              </div>
            </div>

            <div className="userbts">
              <div className="socialicons d-none d-lg-flex">
                <a
                  href={siteSettings?.site_whatsapp_link || "#"}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="socialicon whatsapp"
                >
                  <i className="icon icon-whatsapp"></i>
                </a>

                <a
                  href={siteSettings?.site_facebook_link || "#"}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="socialicon facebook"
                >
                  <i className="icon icon-facebook"></i>
                </a>

                <a
                  href={siteSettings?.site_youtube_link || "#"}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="socialicon youtube"
                >
                  <i className="bi bi-youtube"></i>
                </a>

                <a
                  href={siteSettings?.site_instagram_link || "#"}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="socialicon instagram"
                >
                  <i className="icon icon-instagram"></i>
                </a>

                <a
                  href={siteSettings?.site_twitter_link || "#"}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="socialicon twitter"
                >
                  <i className="icon icon-twitter"></i>
                </a>
              </div>
              <Link
                href={student ? "/student/dashboard" : "/student/login"}
                className="theme-btn text-nowrap"
              >
                {student ? "Dashboard" : "Student Login"}
              </Link>
              <a className="NavBar" onClick={(e) => {
                e.preventDefault();
                setMenuOpen(!menuOpen);
              }}><i className="icon icon-segment"></i></a>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;