"use client";

import {
  Calendar,
  ChevronDown,
  FileText,
  Home,
  Lightbulb,
  Menu,
  ShieldCheck,
  Tag,
  User,
  X,
} from "lucide-react";
import Link from "next/link";
import SolutionsNavigation from "./SolutionsNavigation";
import { useState, useRef, useEffect } from "react";
import { useRouter, usePathname } from "next/navigation";

export default function Header() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isSolutionsOpen, setIsSolutionsOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [isDesktopDropdownOpen, setIsDesktopDropdownOpen] = useState(false);
  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const router = useRouter();
  const pathname = usePathname();
  const solutionPaths = [
    "/lodging-system-v2",
    "/lodging-system-core",
    "/channel-manager",
    "/booking-engine",
    "/payments",
  ];

  const isSolutionsActive = solutionPaths.includes(pathname);

  const navLinks = [
    {
      name: "Home",
      href: "/",
      icon: <Home className="w-4.5 h-4.5 text-[#F58220]" />,
    },
    {
      name: "Solutions",
      href: "#",
      icon: <Lightbulb className="w-4.5 h-4.5 text-[#F58220]" />,
    },
    {
      name: "Pricing",
      href: "/pricing",
      icon: <Tag className="w-4.5 h-4.5 text-[#F58220]" />,
    },
    {
      name: "About us",
      href: "/about-us",
      icon: <User className="w-4.5 h-4.5 text-[#F58220]" />,
    },
    {
      name: "Contact us",
      href: "/contact-us",
      icon: <User className="w-4.5 h-4.5 text-[#F58220]" />,
    },
  ];

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };

    handleScroll();

    window.addEventListener("scroll", handleScroll);

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

  useEffect(() => {
    if (isMobileMenuOpen) {
      document.body.style.overflow = "hidden";
      document.body.style.position = "fixed";
      document.body.style.width = "100%";
    } else {
      document.body.style.overflow = "";
      document.body.style.position = "";
      document.body.style.width = "";
    }

    return () => {
      document.body.style.overflow = "";
      document.body.style.position = "";
      document.body.style.width = "";
    };
  }, [isMobileMenuOpen]);

  const handleMouseEnterSolutions = () => {
    if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
    setIsDesktopDropdownOpen(true);
  };

  const handleMouseLeaveSolutions = () => {
    hoverTimeoutRef.current = setTimeout(() => {
      setIsDesktopDropdownOpen(false);
    }, 100);
  };

  const handleDropdownClose = () => {
    setIsDesktopDropdownOpen(false);
  };

  return (
    <header
      className={`fixed top-0 left-0 w-full py-[15px] z-50 border-b max-w-[1920px] mx-auto right-0 transition-all duration-300 ${
        isScrolled
          ? "bg-[#FFFFFF99] shadow-sm backdrop-blur-[120px] border-[#EBEBEB]"
          : "bg-transparent border-transparent"
      }`}
    >
      <div className="flex justify-between px-[20px] xs:px-[20px] sm:px-[30px] md:px-[60px] lg:px-[110px] xl:px-[135px] items-center">
        <div
          className="relative z-50 cursor-pointer shrink-0 w-[105px] h-[34px]"
          onClick={() => router.push("/")}
        >
          <img
            src="/images/common/lodging-system-logo-dark.png"
            alt="Logo"
            className="object-contain"
          />
        </div>

        {/* Mobile Menu Toggle */}
        <button
          className="lg:hidden relative z-30 cursor-pointer text-black p-2"
          onClick={() => setIsMobileMenuOpen(true)}
        >
          <Menu className="w-5.5 h-5.5" />
        </button>

        {/* Desktop Navigation */}
        <nav className="hidden lg:flex gap-4 items-center">
          {navLinks.map((link) => {
            if (link.name === "Solutions") {
              return (
                <div
                  key={link.name}
                  className="flex"
                  onMouseEnter={handleMouseEnterSolutions}
                  onMouseLeave={handleMouseLeaveSolutions}
                >
                  {/* Trigger */}
                  <div
                    className={`flex items-center gap-1 px-2 py-1.5 aeonik cursor-pointer relative after:content-[''] after:absolute after:w-full after:h-[25px] after:bottom-[-25px] after:left-0 transition-colors ${
                      isSolutionsActive
                        ? "text-[#F58220] font-bold"
                        : "text-[#444444] hover:text-[#F58220]"
                    }`}
                  >
                    <span>Solutions</span>
                    <ChevronDown
                      className={`w-4.5 h-4.5 transition-transform duration-500 ${
                        isDesktopDropdownOpen ? "rotate-180" : ""
                      }`}
                    />
                  </div>

                  {/* Dropdown Desktop */}
                  <div
                    className={`absolute -z-10 top-full left-0 w-full transition-all duration-500 ease-out ${
                      isDesktopDropdownOpen
                        ? "opacity-100 translate-y-0 pointer-events-auto"
                        : "opacity-0 -translate-y-5 pointer-events-none"
                    }`}
                  >
                    <SolutionsNavigation onClose={handleDropdownClose} />
                  </div>
                </div>
              );
            }

            return (
              <Link
                className={`px-2 py-1.5 leading-[20px] aeonik transition-colors ${pathname === link.href ? "text-[#F58220] font-bold" : "hover:text-[#F58220] text-[#444444]"}`}
                key={link.name}
                href={link.href}
              >
                {link.name}
              </Link>
            );
          })}
          <Link
            href={"/demo"}
            className={`relative overflow-hidden py-2.5 px-3.5 flex flex-row gap-2 items-center bg-[#2C2C2C]  text-white rounded-[26px] text-sm font-medium leading-none outfit group cursor-pointer transition-all duration-300 ${pathname === "/demo" ? "bg-[#F58220]" : "hover:bg-[#F58220]"}`}
          >
            {/* Content */}
            <span className="relative z-10 flex items-center gap-2">
              <svg
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M12 0.75C12.4142 0.75 12.75 1.08579 12.75 1.5V2.25122C13.1066 2.25367 13.4182 2.26104 13.6888 2.28314C14.1104 2.31759 14.4979 2.39151 14.862 2.57698C15.4264 2.8646 15.8854 3.32354 16.173 3.88803C16.3585 4.25203 16.4324 4.63956 16.4668 5.06113C16.5 5.46702 16.5 5.96529 16.5 6.56901V12.931C16.5 13.5347 16.5 14.033 16.4668 14.4389C16.4324 14.8604 16.3585 15.248 16.173 15.612C15.8854 16.1765 15.4264 16.6354 14.862 16.923C14.4979 17.1085 14.1104 17.1824 13.6888 17.2169C13.2829 17.25 12.7847 17.25 12.181 17.25H5.81901C5.21529 17.25 4.71703 17.25 4.31113 17.2169C3.88956 17.1824 3.50203 17.1085 3.13803 16.923C2.57354 16.6354 2.1146 16.1765 1.82699 15.612C1.64151 15.248 1.56759 14.8604 1.53314 14.4389C1.49999 14.033 1.49999 13.5347 1.5 12.931V6.56903C1.49999 5.96531 1.49999 5.46703 1.53314 5.06113C1.56759 4.63956 1.64151 4.25203 1.82699 3.88803C2.1146 3.32354 2.57354 2.8646 3.13803 2.57698C3.50203 2.39151 3.88956 2.31759 4.31113 2.28314C4.58173 2.26104 4.8934 2.25367 5.25 2.25122V1.5C5.25 1.08579 5.58579 0.75 6 0.75C6.41422 0.75 6.75 1.08579 6.75 1.5V2.25H11.25V1.5C11.25 1.08579 11.5858 0.75 12 0.75ZM5.25 3.75132V4.5C5.25 4.91421 5.58579 5.25 6 5.25C6.41422 5.25 6.75 4.91421 6.75 4.5V3.75H11.25V4.5C11.25 4.91421 11.5858 5.25 12 5.25C12.4142 5.25 12.75 4.91421 12.75 4.5V3.75132C13.0841 3.75367 13.3465 3.76018 13.5667 3.77816C13.8955 3.80503 14.0637 3.85373 14.181 3.91349C14.4632 4.0573 14.6927 4.28678 14.8365 4.56902C14.8963 4.68632 14.9449 4.85447 14.9718 5.18328C14.9994 5.52085 15 5.95757 15 6.6V6.75H3V6.6C3 5.95757 3.00058 5.52085 3.02816 5.18328C3.05503 4.85447 3.10372 4.68632 3.16349 4.56902C3.3073 4.28678 3.53677 4.0573 3.81901 3.91349C3.93631 3.85373 4.10446 3.80503 4.43328 3.77816C4.65347 3.76018 4.91585 3.75367 5.25 3.75132Z"
                  fill="white"
                />
              </svg>

              <span>Schedule A Demo</span>
            </span>

            {/* Shine effect */}
            <span className="pointer-events-none absolute top-[-20%] left-[-30%] h-[160%] w-[24px] bg-white/70 blur-md rotate-20 transition-all duration-700 ease-in-out group-hover:left-[95%]" />
          </Link>
        </nav>
      </div>
      {/* Backdrop */}
      {isMobileMenuOpen && (
        <div
          className="fixed inset-0 bg-black/80 z-30 lg:hidden h-dvh"
          onClick={() => setIsMobileMenuOpen(false)}
        />
      )}
      {/* Mobile Menu Panel */}
      <div
        className={`fixed top-0 right-0 w-full max-w-[567px] h-dvh bg-white border-l border-[#EBEBEB] shadow-[-8px_0_24px_rgba(0,0,0,0.06)] z-50 flex flex-col lg:hidden transition-transform duration-300 ease-in-out overflow-y-auto ${
          isMobileMenuOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <div className="flex flex-col w-full px-5 py-6 pt-2 gap-2">
          <div className="flex justify-between items-center">
            <div className="flex flex-col gap-1">
              <div className="text-2xl font-semibold aeonik leading-[28px]">
                Menu
              </div>
              <div className="text-sm font-medium outfit text-[#444444]">
                Navigate quickly to explore more
              </div>
            </div>
            <button
              className="lg:hidden relative z-50 cursor-pointer text-black rounded-full bg-black/5 h-fit p-1.5"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              <X className="w-4.5 h-4.5" />
            </button>
          </div>
          <div className="w-full bg-black/15 h-px" />
          <div className="flex flex-col w-full gap-3">
            {navLinks.map((link) => {
              if (link.name === "Solutions") {
                return (
                  <div
                    key={link.name}
                    className="flex flex-col border-b border-gray-100"
                  >
                    <div
                      className={`flex justify-between items-center py-2 text-base font-medium aeonik cursor-pointer transition-colors ${
                        isSolutionsActive
                          ? "text-[#F58220] font-bold"
                          : "text-[#444444]"
                      }`}
                      onClick={() => setIsSolutionsOpen(!isSolutionsOpen)}
                    >
                      <div className="flex items-center gap-4">
                        <span className="rounded-full p-2 h-fit bg-[#F58220]/20">
                          {link.icon}
                        </span>
                        {link.name}
                      </div>
                      <ChevronDown
                        className={`w-5 h-5 transition-transform duration-300 ${
                          isSolutionsOpen ? "rotate-180" : ""
                        } ${isSolutionsActive ? "text-[#F58220]" : "text-current"}`}
                      />
                    </div>

                    {/* Mobile Solutions Accordion Content */}
                    <div
                      className={`overflow-hidden transition-all duration-300 ease-in-out ${isSolutionsOpen ? "max-h-[1000px] opacity-100 mt-2" : "max-h-0 opacity-0"}`}
                    >
                      <SolutionsNavigation
                        isMobile={true}
                        setIsMobileMenuOpen={setIsMobileMenuOpen}
                      />
                    </div>
                  </div>
                );
              }

              return (
                <Link
                  key={link.name}
                  href={link.href}
                  className={`py-2 text-base font-medium aeonik border-b border-gray-100 transition-colors ${pathname === link.href ? "text-[#F58220] font-bold" : "hover:text-[#F58220] text-[#444444]"}`}
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  <div className="flex items-center gap-4">
                    <span className="rounded-full p-2 h-fit bg-[#F58220]/20">
                      {link.icon}
                    </span>
                    {link.name}
                  </div>
                </Link>
              );
            })}
            {/* Mobile Only Legal Links */}
            <div className="flex flex-col gap-3 pt-2 md:hidden">
              <Link
                href="/terms-conditions"
                className={`py-2 text-base font-medium aeonik border-b border-gray-100 transition-colors ${
                  pathname === "/terms-conditions"
                    ? "text-[#F58220] font-bold"
                    : "hover:text-[#F58220] text-[#444444]"
                }`}
                onClick={() => setIsMobileMenuOpen(false)}
              >
                <div className="flex items-center gap-4">
                  <span className="rounded-full p-2 h-fit bg-[#F58220]/20">
                    <FileText className="w-4.5 h-4.5 text-[#F58220]" />
                  </span>
                  Terms and Conditions
                </div>
              </Link>

              <Link
                href="/privacy-policy"
                className={`py-2 text-base font-medium aeonik border-b border-gray-100 transition-colors ${
                  pathname === "/privacy-policy"
                    ? "text-[#F58220] font-bold"
                    : "hover:text-[#F58220] text-[#444444]"
                }`}
                onClick={() => setIsMobileMenuOpen(false)}
              >
                <div className="flex items-center gap-4">
                  <span className="rounded-full p-2 h-fit bg-[#F58220]/20">
                    <ShieldCheck className="w-4.5 h-4.5 text-[#F58220]" />
                  </span>
                  Privacy Policy
                </div>
              </Link>
            </div>
            <div className="rounded-[18px] px-5 py-5 flex flex-col gap-4 bg-[#F58220]/10">
              <div className="flex flex-col gap-2 items-center justify-center">
                <span className="rounded-full p-3 bg-[#F58220]/20">
                  <Calendar className="w-5 h-5 text-[#F58220]" />
                </span>
                <div className="text-lg font-semibold aeonik text-center">
                  Ready to see it in action?
                </div>
                <div className="text-center text-[#444444] figtree text-sm font-normal">
                  Schedule a personalized demo and see how lodging system can
                  work for you.
                </div>
              </div>

              <Link
                href={"/demo"}
                onClick={() => setIsMobileMenuOpen(false)}
                className="relative overflow-hidden py-3 px-6 flex flex-row gap-2 justify-center items-center bg-[#F58220] text-white rounded-[26px] text-base font-medium leading-none outfit group cursor-pointer w-full"
              >
                <span className="relative z-10 flex items-center gap-2">
                  <span>Schedule A Demo</span>
                </span>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}