"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import {
  BarChart3,
  Building2,
  ChevronDown,
  Construction,
  Contact,
  Globe2,
  Home,
  Info,
  LayoutGrid,
  LogIn,
  Menu,
  Newspaper,
  Package,
  UserRoundPlus,
  Users,
  Wrench,
  X,
  type LucideIcon,
} from "lucide-react";

import DemoButton from "@/components/demo/DemoButton";
import { Brand } from "@/components/home/Brand";
import type { NavigationIcon, NavigationItem } from "@/data/navigation.data";
import { locales, type Locale } from "@/lib/locales";
import { localizedPath, replaceLocale } from "@/lib/routes";

type NavbarClientProps = {
  bookDemoLabel: string;
  languageLabel: string;
  locale: Locale;
  navItems: NavigationItem[];
};

const iconMap: Record<NavigationIcon, LucideIcon> = {
  products: Package,
  solutions: LayoutGrid,
  about: Info,
  blogs: Newspaper,
  contact: Contact,
  estate: Building2,
  builder: Construction,
  society: Home,
  leads: Users,
  reports: BarChart3,
  billing: Wrench,
};

const languageLabels: Record<Locale, string> = {
  en: "EN",
  hi: "HI",
  gu: "GU",
};

const mobileCopy: Record<Locale, { home: string; login: string; more: string; register: string }> = {
  en: { home: "Home", login: "Login", more: "More", register: "Register" },
  hi: { home: "होम", login: "लॉगिन", more: "और", register: "रजिस्टर" },
  gu: { home: "હોમ", login: "લૉગિન", more: "વધુ", register: "રજિસ્ટર" },
};

export default function NavbarClient({
  bookDemoLabel,
  languageLabel,
  locale,
  navItems,
}: NavbarClientProps) {
  const pathname = usePathname();
  const isProductDetailRoute =
    /^\/(?:en|hi|gu)\/products\/(?:pureestate|buildpro|societypro)(?:\/|$)/.test(pathname);
  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
  const [moreOpen, setMoreOpen] = useState(false);
  const [languageOpen, setLanguageOpen] = useState(false);
  const headerRef = useRef<HTMLElement | null>(null);

  function closeAllMenus() {
    setOpenDropdown(null);
    setLanguageOpen(false);
    setMoreOpen(false);
  }

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

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

  if (isProductDetailRoute) return null;

  return (
    <>
      <header ref={headerRef} className="sticky top-0 z-50 border-b border-[#e9edf8] bg-white/90 backdrop-blur-xl">
        <div className="mx-auto flex h-18 max-w-340 items-center justify-between px-6 xl:px-8">
          <Link href={localizedPath(locale)} aria-label="PureSaaS home" onClick={closeAllMenus}>
            <Brand />
          </Link>
          <DesktopNav navItems={navItems} openDropdown={openDropdown} setOpenDropdown={setOpenDropdown} closeAllMenus={closeAllMenus} />
          <DesktopActions locale={locale} pathname={pathname} bookDemoLabel={bookDemoLabel} languageOpen={languageOpen} setLanguageOpen={setLanguageOpen} closeAllMenus={closeAllMenus} />
          <DemoButton locale={locale} label={bookDemoLabel} className="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-[#5264ee] to-[#6555e9] px-4 py-2.5 text-[11px] font-bold text-white shadow-[0_8px_18px_rgba(93,91,238,0.24)] lg:hidden" />
        </div>
      </header>
      <MarketingMobileNav
        bookDemoLabel={bookDemoLabel}
        closeAllMenus={closeAllMenus}
        languageLabel={languageLabel}
        locale={locale}
        moreOpen={moreOpen}
        navItems={navItems}
        pathname={pathname}
        setMoreOpen={setMoreOpen}
      />
    </>
  );
}

function DesktopNav({
  navItems,
  openDropdown,
  setOpenDropdown,
  closeAllMenus,
}: {
  navItems: NavigationItem[];
  openDropdown: string | null;
  setOpenDropdown: React.Dispatch<React.SetStateAction<string | null>>;
  closeAllMenus: () => void;
}) {
  return (
    <nav aria-label="Primary navigation" className="hidden items-center gap-7 lg:flex">
      {navItems.map((item) => {
        const hasDropdown = Boolean(item.dropdown?.length);
        const isOpen = openDropdown === item.label;
        if (!hasDropdown) {
          return <Link key={item.label} href={item.href} className="text-[13px] font-semibold text-[#253052] transition-colors hover:text-[#5865ff]">{item.label}</Link>;
        }
        return (
          <div key={item.label} className="relative">
            <button type="button" aria-expanded={isOpen} onClick={() => setOpenDropdown(isOpen ? null : item.label)} onMouseEnter={() => setOpenDropdown(item.label)} className="flex items-center gap-1.5 text-[13px] font-semibold text-[#253052] transition-colors hover:text-[#5865ff]">
              {item.label}<ChevronDown size={13} className={`transition-transform ${isOpen ? "rotate-180" : ""}`} />
            </button>
            {isOpen ? (
              <div onMouseLeave={() => setOpenDropdown(null)} className="absolute left-1/2 top-9 w-[370px] -translate-x-1/2 rounded-2xl border border-[#e7ebf7] bg-white p-3 shadow-[0_24px_70px_rgba(20,30,70,0.12)]">
                {item.dropdown?.map((dropdownItem) => {
                  const Icon = iconMap[dropdownItem.icon];
                  return (
                    <Link key={dropdownItem.title} href={dropdownItem.href} onClick={closeAllMenus} className="group flex gap-3 rounded-xl p-3 transition hover:bg-[#f7f8ff]">
                      <span className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-[#eef1ff] text-[#5865ff] transition group-hover:bg-[#5865ff] group-hover:text-white"><Icon size={18} /></span>
                      <span><span className="block text-[14px] font-bold text-[#111936]">{dropdownItem.title}</span><span className="mt-1 block text-[12px] leading-5 text-[#66708f]">{dropdownItem.description}</span></span>
                    </Link>
                  );
                })}
              </div>
            ) : null}
          </div>
        );
      })}
    </nav>
  );
}

function DesktopActions({
  locale,
  pathname,
  bookDemoLabel,
  languageOpen,
  setLanguageOpen,
  closeAllMenus,
}: {
  locale: Locale;
  pathname: string;
  bookDemoLabel: string;
  languageOpen: boolean;
  setLanguageOpen: React.Dispatch<React.SetStateAction<boolean>>;
  closeAllMenus: () => void;
}) {
  return (
    <div className="hidden items-center gap-5 lg:flex">
      <div className="relative">
        <button type="button" aria-expanded={languageOpen} onClick={() => setLanguageOpen((current) => !current)} className="flex items-center gap-2 text-[13px] font-semibold text-[#253052]">
          <Globe2 size={16} />{languageLabels[locale]}<ChevronDown size={12} className={`transition-transform ${languageOpen ? "rotate-180" : ""}`} />
        </button>
        {languageOpen ? (
          <div className="absolute right-0 top-8 w-32 rounded-xl border border-[#e7ebf7] bg-white p-1 shadow-[0_18px_50px_rgba(20,30,70,0.12)]">
            {locales.map((supportedLocale) => (
              <Link key={supportedLocale} href={replaceLocale(pathname, supportedLocale)} onClick={closeAllMenus} className={`block rounded-lg px-3 py-2 text-[13px] font-bold transition ${locale === supportedLocale ? "bg-[#eef1ff] text-[#5865ff]" : "text-[#253052] hover:bg-[#f7f8ff]"}`}>
                {languageLabels[supportedLocale]}
              </Link>
            ))}
          </div>
        ) : null}
      </div>
      <DemoButton locale={locale} label={bookDemoLabel} className="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-[#5264ee] to-[#6555e9] px-5 py-3 text-[12px] font-bold text-white shadow-[0_8px_18px_rgba(93,91,238,0.24)] transition hover:-translate-y-0.5" />
    </div>
  );
}

function MarketingMobileNav({
  bookDemoLabel,
  closeAllMenus,
  languageLabel,
  locale,
  moreOpen,
  navItems,
  pathname,
  setMoreOpen,
}: {
  bookDemoLabel: string;
  closeAllMenus: () => void;
  languageLabel: string;
  locale: Locale;
  moreOpen: boolean;
  navItems: NavigationItem[];
  pathname: string;
  setMoreOpen: React.Dispatch<React.SetStateAction<boolean>>;
}) {
  const products = navItems.find((item) => item.icon === "products");
  const solutions = navItems.find((item) => item.icon === "solutions");
  const blogs = navItems.find((item) => item.icon === "blogs");
  const about = navItems.find((item) => item.icon === "about");
  const contact = navItems.find((item) => item.icon === "contact");
  const bottomItems = [
    { href: localizedPath(locale), icon: Home, label: mobileCopy[locale].home },
    { href: products?.href ?? localizedPath(locale, "/products"), icon: Package, label: products?.label ?? "Products" },
    { href: solutions?.href ?? localizedPath(locale, "/solutions"), icon: LayoutGrid, label: solutions?.label ?? "Solutions" },
    { href: blogs?.href ?? localizedPath(locale, "/blogs"), icon: Newspaper, label: blogs?.label ?? "Blogs" },
  ];

  return (
    <>
      <nav aria-label="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">
        {bottomItems.map((item) => {
          const Icon = item.icon;
          return <Link key={item.href} href={item.href} onClick={closeAllMenus} className="flex flex-col items-center justify-center gap-1 text-[10px] font-bold text-[#66718a] transition hover:text-[#5865ff]"><Icon size={18} className="text-[#5865ff]" />{item.label}</Link>;
        })}
        <button type="button" aria-expanded={moreOpen} aria-label={moreOpen ? "Close navigation" : "Open navigation"} onClick={() => setMoreOpen(true)} className="flex flex-col items-center justify-center gap-1 text-[10px] font-bold text-[#66718a]"><Menu size={18} className="text-[#5865ff]" />{mobileCopy[locale].more}</button>
      </nav>

      {moreOpen ? (
        <div className="fixed inset-0 z-[70] lg:hidden" role="dialog" aria-label="More navigation" aria-modal="true">
          <button type="button" aria-label="Close navigation" onClick={closeAllMenus} 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"><Brand compact /><button type="button" aria-label="Close navigation" onClick={closeAllMenus} 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">
              {[
                { href: about?.href ?? localizedPath(locale, "/about"), icon: Info, label: about?.label ?? "About" },
                { href: contact?.href ?? localizedPath(locale, "/contact"), icon: Contact, label: contact?.label ?? "Contact" },
                { href: localizedPath(locale, "/login"), icon: LogIn, label: mobileCopy[locale].login },
                { href: localizedPath(locale, "/register"), icon: UserRoundPlus, label: mobileCopy[locale].register },
              ].map((item) => {
                const Icon = item.icon;
                return <Link key={item.href} href={item.href} onClick={closeAllMenus} 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="text-[#5865ff]" />{item.label}</Link>;
              })}
            </div>
            {products?.dropdown?.length ? (
              <div className="mt-3 grid gap-2">
                {products.dropdown.map((item) => {
                  const Icon = iconMap[item.icon];
                  return <Link key={item.href} href={item.href} onClick={closeAllMenus} className="flex items-center gap-3 rounded-2xl border border-[#e5e9f4] bg-white p-3"><span className="grid h-9 w-9 place-items-center rounded-xl bg-[#eef1ff] text-[#5865ff]"><Icon size={17} /></span><span className="text-[13px] font-extrabold text-[#34415f]">{item.title}</span></Link>;
                })}
              </div>
            ) : null}
            <div className="mt-3 rounded-2xl border border-[#e5e9f4] bg-[#fbfcff] p-3">
              <p className="mb-2.5 flex items-center gap-2 text-[12px] font-extrabold uppercase tracking-[0.12em] text-[#65708a]"><Globe2 size={15} />{languageLabel}</p>
              <div className="grid grid-cols-3 gap-2">
                {locales.map((supportedLocale) => (
                  <Link key={supportedLocale} href={replaceLocale(pathname, supportedLocale)} onClick={closeAllMenus} className={`rounded-xl px-3 py-2.5 text-center text-[12px] font-extrabold ${supportedLocale === locale ? "bg-[#5865ff] text-white" : "border border-[#e5e9f4] bg-white text-[#4c5874]"}`}>{languageLabels[supportedLocale]}</Link>
                ))}
              </div>
            </div>
            <DemoButton locale={locale} label={bookDemoLabel} icon="handshake" onOpen={closeAllMenus} className="mt-3 flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#5264ee] to-[#6555e9] text-[13px] font-extrabold text-white shadow-[0_10px_22px_rgba(55,71,145,0.2)]" />
          </div>
        </div>
      ) : null}
    </>
  );
}