"use client";

import { Link, useRouter, usePathname } from "@/i18n/navigation";
import { useLocale, useTranslations } from "next-intl";
import { LuX } from "react-icons/lu";
import { cn } from "@/lib/utils";
import Logo from "./Logo";

interface MobileMenuProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function MobileMenu({ isOpen, onClose }: MobileMenuProps) {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  const t = useTranslations("Header");

  const toggleLanguage = () => {
    const newLocale = locale === "ar" ? "en" : "ar";
    router.replace(pathname, { locale: newLocale });
    onClose();
  };

  const displayText = locale === "ar" ? "ENG" : "عربي";

  const menuItems = [
    { label: t("aboutUs"), href: "/#about-us" },
    { label: t("ourFeatures"), href: "/#about-us" },
    { label: t("ourPackages"), href: "/#our-packages" },
    { label: t("faq"), href: "/#faq" },
    { label: t("dashboard"), href: process.env.NEXT_PUBLIC_DASHBAORD_URL || "https://app.motakamil.sa", target: "_blank" },
  ];

  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
    if (href.includes("#")) {
      const hash = href.split("#")[1];
      const element = document.querySelector(`#${hash}`);
      if (element) {
        e.preventDefault();
        onClose();
        setTimeout(() => {
          element.scrollIntoView({ behavior: "smooth", block: "start" });
        }, 100);
      }
    } else {
      onClose();
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-9999 lg:hidden">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/20"
        onClick={onClose}
      />

      <div
        className={cn(
          "absolute inset-0 bg-primary-lighter",
          locale === "ar" ? "text-right" : "text-left"
        )}
        dir={locale === "ar" ? "rtl" : "ltr"}
      >
        <div className="h-full flex flex-col p-6">
          <div className="flex items-center justify-between mb-8">
            <Logo
              className="h-[32px] w-[140px]"
              onClick={onClose}
            />
            <button
              onClick={onClose}
              className="p-2 cursor-pointer text-gray-700 hover:text-gray-900 transition-colors"
            >
              <LuX className="size-6" />
            </button>
          </div>

          <nav className="flex-1 flex flex-col gap-2">
            {menuItems.map((item, index) => (
              <Link
                key={index}
                href={item.href}
                onClick={(e) => handleClick(e, item.href)}
                target={item.target}
                rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
                className="text-[14px] font-normal text-text-main hover:text-text-main/80 transition-colors py-2"
              >
                {item.label}
              </Link>
            ))}

            <div className="border-t border-secondary-light my-3" />

            <button
              onClick={toggleLanguage}
              className={cn(
                "text-[14px] font-bold text-text-main hover:text-text-main/80 transition-colors py-2",
                locale === "ar" ? "text-right" : "text-left"
              )}
            >
              {displayText}
            </button>

            <Link
              href="#"
              onClick={onClose}
              className="text-[14px] font-bold text-text-main hover:text-text-main/80 transition-colors py-2"
            >
              {t("login")}
            </Link>
          </nav>
        </div>
      </div>
    </div>
  );
}