"use client";
import React, { useEffect, useRef, useState } from "react";

import Link from "next/link";
import { GrClose } from "react-icons/gr";
import { FaShoppingCart, FaBars, FaSun, FaMoon, FaHeart } from "react-icons/fa";
import Image from "next/image";
import { useGlobalContext } from "../context/GlobalContext";
import { GoSun } from "react-icons/go";
import { HiOutlineMoon } from "react-icons/hi2";
import { MdKeyboardArrowDown } from "react-icons/md";
import { usePathname } from "next/navigation";
import { LuSunDim } from "react-icons/lu";
import { RxHamburgerMenu } from "react-icons/rx";
import AnimatedB from "./card/toggle/ToggleSwitch";
import { useLanguage } from "@/context/LanguageContext";
import { RiGlobalFill } from "react-icons/ri";

const Header = () => {
  const { darkMode, toggleTheme } = useGlobalContext();
  const [menuOpen, setMenuOpen] = useState(false);
  const { language, switchLanguage, t } = useLanguage();
  const menuRef = useRef(null);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const pathname = usePathname();


  
  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };
  const handleCloseMenu = () => {
    setMenuOpen(false);
  };
  const NavBarLink = ({ title, isActive, href }) => {
    const activeClass = isActive
      ? "font-medium dark:text-[#0D7D3F] text-[14.5px] text-[#0D7D3F]"
      : "font-normal dark:text-[#ABABAB] text-[14.5px] text-[#666666]";
    return (
      <a
        href={href}
        className={`block text-[14.5px] ${activeClass} hover:opacity-80`}
      >
        {title}
      </a>
    );
  };
  const handleLanguageChange = (newLanguage) => {
    switchLanguage(newLanguage);
    setIsOpen(false);
  };

  const dropdownRef = useRef(null);
  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  const toggleDropdown = () => {
    setIsDropdownOpen(!isDropdownOpen);
  };
  const [isPopupOpen, setIsPopupOpen] = useState(false);

  const handleRequestInfo = () => {
    setIsPopupOpen(true);
  };

  const handleClosePopup = () => {
    setIsPopupOpen(false);
  };

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setMenuOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  return (
    <header
      className={`w-full md:fixed md:right-0  md:top-0 md:left-0 z-50  mx-auto  pt-4 flex items-center justify-between transition-all duration-300 ${
        darkMode ? " text-white" : "  text-gray-900"
      }`}
      style={{ maxWidth: "100%" }}
    >
      <div className="md:max-w-screen-2xl mx-auto md:px-[8rem] px-[1rem]  w-full ">
        <div className={` relative z-20  rounded-full bg-opacity-80  backdrop-blur-md dark:border-[#20988E] dark:bg-opacity-80  dark:backdrop-blur-md border-[1px] border-[#20988E]  bg-[#ffffff]  dark:bg-[#141414]     px-4 flex items-center justify-between transition-all duration-300 ${language === "en" ? "flex-row" : "flex-row-reverse"}`}>
          <div className="flex items-center">
            <Link href="/" className="flex items-center text-xl font-semibold">
              {darkMode ? (
                <Image
                  src="/logo2.png"
                  alt="Dist Ba Dist"
                  width={120}
                  height={50}
                />
              ) : (
                <Image
                  src="/logo.png"
                  alt="Dist Ba Dist"
                  width={120}
                  height={50}
                />
              )}
            </Link>
          </div>
          <nav
            className={` top-16  left-0 right-0  mx-auto ${
              darkMode ? "  text-white" : "  text-gray-900"
            } p-6`}
          >
            <div className="w-max hidden md:flex mx-auto">
              <ul
                className={`flex  justify-center  text-[16px] gap-11 ${
                  language === "en" ? "flex-row" : "flex-row-reverse"
                }`}
              >
                <li>
                  <NavBarLink
                    title={t("Home")}
                    isActive={pathname.endsWith("/")}
                    href="/"
                  />
                </li>
                <li>
                  <NavBarLink
                    title={t("About Us")}
                    isActive={pathname.endsWith("/About")}
                    href="/About"
                  />
                </li>
                <li>
                  <NavBarLink
                    title={t("Services")}
                    isActive={pathname.endsWith("/Services")}
                    href="/Services"
                  />
                </li>
                <li>
                  <NavBarLink
                    title={t("Our App")}
                    isActive={pathname.endsWith("/App")}
                    href="/App"
                  />
                </li>
                <li>
                  <NavBarLink
                    title={t("Career")}
                    isActive={pathname.endsWith("/Careers")}
                    href="/Careers"
                  />
                </li>
              </ul>
            </div>
          </nav>
          <div
            className={`flex gap-8 items-center ${
              language === "en" ? "flex-row" : "flex-row-reverse"
            }`}
          >
             <div
      className="relative md:block cursor-pointer"
      ref={dropdownRef}
      onClick={() => setIsOpen((prev) => !prev)}
    >
      <div className="rounded-md flex items-center gap-2 w-[100px] justify-center p-2 md:border border-[#1F998E] text-[#1F998E]">
        <RiGlobalFill />
        {language === "en"
          ? "English"
          : language === "fa"
          ? "فارسی"
          : "پښتو"}
      </div>

      {isOpen && (
        <div className="absolute top-full left-0 right-0 bg-white dark:bg-[#333333] dark:border-[#1F998E] border border-gray-300 rounded-md shadow-md mt-1 z-10">
          <div
            className={`p-2 dark:hover:bg-[#777777] hover:bg-gray-200 text-center cursor-pointer ${
              language === "en" ? "font-medium" : ""
            }`}
            onClick={(e) => {
              e.stopPropagation();
              handleLanguageChange("en");
              setIsOpen(false);
            }}
          >
            English
          </div>
          <div
            className={`p-2 dark:hover:bg-[#777777] hover:bg-gray-200 text-center cursor-pointer ${
              language === "fa" ? "font-medium" : ""
            }`}
            onClick={(e) => {
              e.stopPropagation();
              handleLanguageChange("fa");
              setIsOpen(false);
            }}
          >
            فارسی
          </div>
          <div
            className={`p-2 dark:hover:bg-[#777777] hover:bg-gray-200 text-center cursor-pointer ${
              language === "ps" ? "font-medium" : ""
            }`}
            onClick={(e) => {
              e.stopPropagation();
              handleLanguageChange("ps");
              setIsOpen(false);
            }}
          >
            پښتو
          </div>
        </div>
      )}
    </div>

            <div className="relative sm:flex min-[320px]:hidden">
              <button
                type="button"
                onClick={toggleDropdown}
                className="text-white z-40 bg-[#1F998E] hover:opacity-85 focus:ring-4 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 lg:mr-0 flex items-center gap-x-1"
              >
                <span>{t("Connect")}</span>
                <MdKeyboardArrowDown />
              </button>

              {isDropdownOpen && (
                <div
                  className={`absolute  mt-12 w-[400px] dark:bg-[#222222] bg-white shadow-lg rounded-lg z-40 p-4 ${
                    language === "en" ? "right-0" : "left-0"
                  } `}
                >
                  <div className="border-b py-3 px-3 flex items-center justify-between   transition-colors">
                    <div className="w-[220px]">
                      <a href="/contact" className="block">
                        <p
                          className={`font-medium dark:text-[#F8F8F8] text-[#1B2430] hover:text-[#1F998E] ${
                            language === "en" ? "text-left" : "text-right"
                          } `}
                        >
                          {t("Contact us")}
                        </p>
                        <p
                          className={`text-[#666666] dark:text-[#F8F8F8] text-[12px] ${
                            language === "en" ? "text-left" : "text-right"
                          }`}
                        >
                          {t("Process")}
                        </p>
                      </a>
                    </div>
                    <a href="/contact">
                      <AnimatedB text={t("Contact us")} />
                    </a>
                  </div>
                </div>
              )}
            </div>

            <div
              className={`w-14 h-8 md:flex items-center hidden  rounded-full pl-1 pt-1 pr-1 pb-1 cursor-pointer transition-colors duration-300 ${
                darkMode
                  ? "bg-[#24272C] shadow-none"
                  : "bg-[#FBFBFB] shadow-[0_6px_6px_0px_rgba(0,0,0,0.12)]"
              }`}
              onClick={toggleTheme}
            >
              <div
                className={`w-6 h-6 rounded-full shadow-md transform duration-300 ${
                  darkMode
                    ? "translate-x-6 bg-[#FFFFFF]"
                    : "translate-x-0 bg-[#1B2430]"
                } flex items-center justify-center`}
              >
                {darkMode ? (
                  <HiOutlineMoon className="text-[#292D32]" />
                ) : (
                  <GoSun className="text-[#FFFFFF]" />
                )}
              </div>
            </div>
          </div>
          <div className="flex flex-row-reverse md:hidden items-center gap-4">
            <button onClick={toggleMenu} className="text-2xl">
              {menuOpen ? <GrClose /> : <RxHamburgerMenu />}
            </button>
            <button onClick={toggleTheme} className="text-2xl">
              {darkMode ? (
                <FaMoon className="w-[24px] h-[24px] rounded-full p-1 hover:bg-[#0D7D3F] bg-[#191B1F] text-[#F1FEF7]" />
              ) : (
                <LuSunDim className="w-[24px] h-[24px] rounded-full p-1 hover:bg-[#0D7D3F] bg-black text-white" />
              )}
            </button>
          </div>

          {menuOpen && (
            <nav
              ref={menuRef}
              className={`absolute top-12 z-50   left-0 right-0 mx-auto ${
                darkMode ? "text-white" : "text-gray-900"
              } pt-4`}
            >
              <div className="lg:w-max w-full lg:mx-auto">
                <ul className="flex flex-col items-center lg:flex-row gap-9 lg:gap-0 border py-14 lg:py-5 dark:bg-[#222222] bg-white shadow-lg rounded-[4px]  justify-center text-[14.5px]">
                  <li>
                    <NavBarLink
                      title="Home"
                      isActive={pathname.endsWith("/")}
                      href="/"
                    />
                  </li>
                  <li>
                    <NavBarLink
                      title="About Us"
                      isActive={pathname.endsWith("/About")}
                      href="/About"
                    />
                  </li>
                  <li>
                    <NavBarLink
                      title="Services"
                      isActive={pathname.endsWith("/Services")}
                      href="/Services"
                    />
                  </li>
                  <li>
                    <NavBarLink
                      title="Our App"
                      isActive={pathname.endsWith("/App")}
                      href="/App"
                    />
                  </li>
                  <li>
                    <NavBarLink
                      title="Career"
                      isActive={pathname.endsWith("/Careers")}
                      href="/Careers"
                    />
                  </li>
                  <li>
                    <Link href="/contact" onClick={handleCloseMenu}>
                      Contact us
                    </Link>
                  </li>
                </ul>
              </div>
            </nav>
          )}
        </div>
      </div>
    </header>
  );
};

export default Header;