"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import {
  ArrowLeft,
  BadgeHelp,
  BadgeIndianRupee,
  CircleCheckBig,
  LayoutDashboard,
  LogIn,
  Menu,
  Sparkles,
  UserRoundPlus,
  X,
  type LucideIcon,
} from "lucide-react";

import DemoButton from "@/components/demo/DemoButton";
import ProductBrand from "@/components/products/ProductBrand";
import ProductLanguageSwitcher from "@/components/products/ProductLanguageSwitcher";
import ProductSwitcher from "@/components/products/ProductSwitcher";
import { productThemes } from "@/components/products/product-theme";
import type { ProductPageCopy, ProductTone } from "@/data/products.data";
import type { Locale } from "@/lib/locales";
import { localizedPath, type ProductSlug } from "@/lib/routes";

type ProductLinks = {
  productHome: string;
  login: string;
  register: string;
  demo: string;
  contact: string;
};

type ProductNavItem = {
  label: string;
  href: string;
  icon: LucideIcon;
};

const moreLabels: Record<Locale, string> = {
  en: "More",
  hi: "और",
  gu: "વધુ",
};

const platformHomeLabels: Record<Locale, string> = {
  en: "PureSaaS platform home",
  hi: "PureSaaS प्लेटफॉर्म होम",
  gu: "PureSaaS પ્લેટફોર્મ હોમ",
};

export default function ProductNavbarClient({
  bookDemoLabel,
  copy,
  links,
  locale,
  localePaths,
  productName,
  productSlug,
  tone,
}: {
  bookDemoLabel: string;
  copy: ProductPageCopy;
  links: ProductLinks;
  locale: Locale;
  localePaths: Record<Locale, string>;
  productName: string;
  productSlug: ProductSlug;
  tone: ProductTone;
}) {
  const headerRef = useRef<HTMLElement | null>(null);
  const [languageOpen, setLanguageOpen] = useState(false);
  const [moreOpen, setMoreOpen] = useState(false);
  const theme = productThemes[tone];
  const navItems: ProductNavItem[] = [
    { label: copy.navbar.overview, href: `${links.productHome}#overview`, icon: LayoutDashboard },
    { label: copy.navbar.features, href: `${links.productHome}#features`, icon: Sparkles },
    { label: copy.navbar.benefits, href: `${links.productHome}#benefits`, icon: CircleCheckBig },
    { label: copy.navbar.pricing, href: `${links.productHome}#pricing`, icon: BadgeIndianRupee },
    { label: copy.navbar.faq, href: `${links.productHome}#faq`, icon: BadgeHelp },
  ];
  const mobileItems = [navItems[0], navItems[1], navItems[3], navItems[4]] as ProductNavItem[];

  function closeMenus() {
    setLanguageOpen(false);
    setMoreOpen(false);
  }

  useEffect(() => {
    function handleOutsideClick(event: MouseEvent) {
      if (!headerRef.current?.contains(event.target as Node)) setLanguageOpen(false);
    }
    function handleEscape(event: KeyboardEvent) {
      if (event.key === "Escape") closeMenus();
    }
    document.addEventListener("mousedown", handleOutsideClick);
    document.addEventListener("keydown", handleEscape);
    return () => {
      document.removeEventListener("mousedown", handleOutsideClick);
      document.removeEventListener("keydown", handleEscape);
    };
  }, []);

  useEffect(() => {
    document.body.style.overflow = moreOpen ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [moreOpen]);

  return (
    <>
      <header ref={headerRef} className="sticky top-0 z-50 border-b border-[#e6eaf4] bg-white/94 backdrop-blur-xl">
        <div className="mx-auto flex h-[68px] max-w-[1360px] items-center justify-between gap-4 px-5 xl:px-8">
          <div className="flex min-w-0 items-center gap-2.5">
            <Link href={localizedPath(locale)} aria-label={platformHomeLabels[locale]} onClick={closeMenus} className="grid h-8 w-8 shrink-0 place-items-center rounded-lg border border-[#e5e9f4] text-[#66718a] transition hover:bg-[#f5f7fc]">
              <ArrowLeft size={15} />
            </Link>
            <span className="hidden h-5 w-px bg-[#dfe4ef] sm:block" />
            <Link href={links.productHome} aria-label={`${productName} ${copy.navbar.productHome}`} onClick={closeMenus} className="min-w-0">
              <ProductBrand compact slug={productSlug} />
            </Link>
          </div>

          <nav aria-label={`${productName} navigation`} className="hidden items-center gap-4 lg:flex">
            <ProductSwitcher currentProduct={productSlug} locale={locale} />
            {navItems.map((item) => (
              <Link key={item.href} href={item.href} className="text-[12px] font-bold text-[#57637b] transition hover:text-[#26366c]">
                {item.label}
              </Link>
            ))}
          </nav>

          <div className="hidden items-center gap-2 lg:flex">
            <ProductLanguageSwitcher closeMenus={closeMenus} locale={locale} localePaths={localePaths} open={languageOpen} toggle={() => setLanguageOpen((current) => !current)} />
            <Link href={links.login} className="rounded-lg px-3 py-2 text-[12px] font-bold text-[#536078] transition hover:bg-[#f5f7fc]">{copy.navbar.login}</Link>
            <Link href={links.register} className={`rounded-lg border px-3 py-2 text-[12px] font-bold ${theme.badge}`}>{copy.navbar.register}</Link>
            {/* <DemoButton locale={locale} productSlug={productSlug} label={bookDemoLabel} className={`inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-[12px] font-extrabold text-white shadow-[0_8px_18px_rgba(55,71,145,0.2)] transition hover:-translate-y-0.5 ${theme.button}`} /> */}
          </div>

          <DemoButton locale={locale} productSlug={productSlug} label={bookDemoLabel} className={`inline-flex items-center gap-2 rounded-lg px-3 py-2 text-[11px] font-extrabold text-white shadow-[0_8px_18px_rgba(55,71,145,0.2)] lg:hidden ${theme.button}`} />
        </div>
      </header>

      <nav aria-label={`${productName} mobile navigation`} className="fixed inset-x-0 bottom-0 z-[60] grid h-[68px] grid-cols-5 border-t border-[#e5e9f4] bg-white/96 px-1 shadow-[0_-8px_24px_rgba(26,38,78,0.09)] backdrop-blur-xl lg:hidden">
        {mobileItems.map((item) => {
          const Icon = item.icon;
          return (
            <Link key={item.href} href={item.href} onClick={closeMenus} className="flex flex-col items-center justify-center gap-1 text-[10px] font-bold text-[#66718a] transition hover:text-[#26366c]">
              <Icon size={18} className={theme.accentText} />
              {item.label}
            </Link>
          );
        })}
        <button type="button" aria-expanded={moreOpen} aria-label={moreOpen ? copy.navbar.closeMenu : copy.navbar.openMenu} onClick={() => setMoreOpen(true)} className="flex flex-col items-center justify-center gap-1 text-[10px] font-bold text-[#66718a]">
          <Menu size={18} className={theme.accentText} />
          {moreLabels[locale]}
        </button>
      </nav>

      {moreOpen ? (
        <div className="fixed inset-0 z-[70] lg:hidden" role="dialog" aria-modal="true" aria-label={`${productName} more navigation`}>
          <button type="button" aria-label={copy.navbar.closeMenu} onClick={closeMenus} className="absolute inset-0 bg-slate-950/35 backdrop-blur-[2px]" />
          <div className="absolute inset-x-0 bottom-0 max-h-[84dvh] overflow-y-auto rounded-t-[28px] border-t border-[#e5e9f4] bg-white px-5 pb-6 pt-4 shadow-[0_-24px_70px_rgba(26,38,78,0.18)]">
            <div className="mx-auto mb-4 h-1.5 w-12 rounded-full bg-[#dfe4ef]" />
            <div className="flex items-center justify-between">
              <h2 className="text-lg font-extrabold text-[#17214d]">{productName}</h2>
              <button type="button" aria-label={copy.navbar.closeMenu} onClick={closeMenus} className="grid h-9 w-9 place-items-center rounded-xl border border-[#e2e7f1] text-[#64708a]">
                <X size={18} />
              </button>
            </div>
            <div className="mt-4 grid grid-cols-2 gap-2">
              {navItems.slice(2, 3).map((item) => {
                const Icon = item.icon;
                return (
                  <Link key={item.href} href={item.href} onClick={closeMenus} className="flex min-h-[72px] flex-col justify-between rounded-2xl border border-[#e5e9f4] bg-[#fbfcff] p-3 text-[13px] font-extrabold text-[#34415f]">
                    <Icon size={18} className={theme.accentText} />
                    {item.label}
                  </Link>
                );
              })}
              <Link href={links.login} onClick={closeMenus} className="flex min-h-[72px] flex-col justify-between rounded-2xl border border-[#e5e9f4] bg-[#fbfcff] p-3 text-[13px] font-extrabold text-[#34415f]">
                <LogIn size={18} className={theme.accentText} />
                {copy.navbar.login}
              </Link>
              <Link href={links.register} onClick={closeMenus} className="flex min-h-[72px] flex-col justify-between rounded-2xl border border-[#e5e9f4] bg-[#fbfcff] p-3 text-[13px] font-extrabold text-[#34415f]">
                <UserRoundPlus size={18} className={theme.accentText} />
                {copy.navbar.register}
              </Link>
            </div>
            <ProductSwitcher currentProduct={productSlug} locale={locale} mobile />
            <div className="mt-3">
              <ProductLanguageSwitcher closeMenus={closeMenus} locale={locale} localePaths={localePaths} mobile open={false} toggle={() => undefined} />
            </div>
            {/* <DemoButton locale={locale} productSlug={productSlug} label={bookDemoLabel} icon="handshake" onOpen={closeMenus} className={`mt-3 flex h-12 w-full items-center justify-center gap-2 rounded-xl text-[13px] font-extrabold text-white shadow-[0_10px_22px_rgba(55,71,145,0.2)] ${theme.button}`} /> */}
            {/* <Link href={links.productHome} onClick={closeMenus} className="mt-3 flex items-center justify-center gap-2 py-2 text-[12px] font-bold text-[#72809a]">
              <BookOpenCheck size={15} />
              {copy.navbar.productHome}
            </Link> */}
            <Link href={localizedPath(locale)} onClick={closeMenus} className="flex items-center justify-center gap-2 py-2 text-[12px] font-bold text-[#72809a]">
              <ArrowLeft size={15} />
              {platformHomeLabels[locale]}
            </Link>
          </div>
        </div>
      ) : null}
    </>
  );
}