"use client";

import { AnimatePresence } from "framer-motion";
import { signOut } from "next-auth/react";
import LocaleLink from "@/components/ui/LocaleLink";
import { usePathname } from "next/navigation";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";

import { useClickOutside } from "@/hooks/useClickOutside";
import { useAppDispatch } from "@/libs/redux/store";
import { ProfileStatItem } from "@/types/profileStat";

import { type ContentMenu } from "@/data/menu";
import { getLocalizedNavigationItems } from "@/data/menu";
import { useTranslation } from "@/hooks/useTranslation";
import { getCookie } from "@/libs/cookies/client";
import { logout } from "@/libs/cookies/isLoggedIn";
import { deleteUser } from "@/libs/cookies/user";
import User from "@/models/user";
import { firstWordCapital } from "@/utils/text";
import Cookies from "js-cookie";
import { ChevronDown, LogIn, Menu, Search } from "lucide-react";
import LanguageToggle from "./LanguageToggle";
import NotificationButton from "./NotificationButton";
import ProfileDropdown from "./ProfileDropdown";
import SearchBar from "./Search";

const SCROLL_THRESHOLD = 50;

export default function ({
  initialUser,
  invalidToken,
  contentMenus = [],
}: {
  initialUser: User;
  invalidToken?: boolean;
  contentMenus?: ContentMenu[];
}) {
  const isLoggedIn = getCookie("isLoggedIn");
  const user = initialUser;
  const dispatch = useAppDispatch();
  const pathname = usePathname();

  const [isScrolled, setIsScrolled] = useState(false);
  const [isProfileOpen, setProfileOpen] = useState(false);
  const [isSearchActive, setIsSearchActive] = useState(false);
  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [openAccordion, setOpenAccordion] = useState<string | null>(null);

  const profileRef = useRef<HTMLDivElement>(null);
  const mobileProfileRef = useRef<HTMLDivElement>(null);
  const searchInputRef = useRef<HTMLInputElement>(null);

  const { t, language, toggleLanguage } = useTranslation();
  const localizedNavItems = getLocalizedNavigationItems(language);

  useClickOutside(profileRef, () => setProfileOpen(false));
  useClickOutside(mobileProfileRef, () => setProfileOpen(false));

  useEffect(() => {
    if (invalidToken) {
      Cookies.remove("token");
      Cookies.remove("user");
      Cookies.remove("isLoggedIn");
    }
  }, [invalidToken]);

  useEffect(() => {
    const onScroll = () => setIsScrolled(window.scrollY > SCROLL_THRESHOLD);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    setProfileOpen(false);
  }, [pathname]);

  useEffect(() => {
    if (!isMobileMenuOpen) setOpenAccordion(null);
  }, [isMobileMenuOpen]);

  const avatarUrl = useMemo((): string => {
    if (user?.avatar) return user.avatar;
    return `https://ui-avatars.com/api/?name=${encodeURIComponent(
      user?.name ?? "User",
    )}&background=0D8ABC&color=fff`;
  }, [user?.avatar, user?.name]);

  const stats: readonly ProfileStatItem[] = useMemo(
    () => [
      { label: "Coin", value: user?.totalTopupCoins ?? 0, icon: "GoldCoin.png" },
      { label: "Point", value: user?.totalPoints ?? 0, icon: "BlueCoin.png" },
      { label: "Goldflea", value: user?.totalGoldflea ?? 0, icon: "GoldFlea.png" },
      { label: "Income", value: user?.totalIncome ?? 0, icon: "GreenCoin.png" },
    ],
    [user?.totalTopupCoins, user?.totalPoints, user?.totalGoldflea, user?.totalIncome],
  );

  const handleLogout = useCallback(async () => {
    setProfileOpen(false);
    await signOut({ redirect: true });
    deleteUser();
    logout();
  }, [dispatch]);

  const normalizePathname = (p: string) => p.replace(/^\/(id|en)(\/|$)/, "/");

  const isPathActive = useCallback(
    (path: string): boolean => {
      const currentPath = normalizePathname(pathname);
      const targetPath = normalizePathname(path);
      return currentPath === targetPath || currentPath.startsWith(`${targetPath}/`);
    },
    [pathname],
  );

  const getLinkClasses = useCallback(
    (path: string): string => {
      return [
        "flex items-center gap-1.5 text-[13.5px] whitespace-nowrap transition-colors",
        isPathActive(path)
          ? "font-semibold text-kb-ink"
          : "font-medium text-kb-ink/72 hover:text-primary-600",
      ].join(" ");
    },
    [isPathActive],
  );

  const isResourceActive = useCallback(
    (resource: string): boolean => {
      return normalizePathname(pathname).startsWith(`/${resource}`);
    },
    [pathname],
  );

  const getSubItemLabel = (item: ContentMenu["items"][number]) =>
    language === "id" ? item.title : item.title_en || item.title;

  return (
    <>
      <header
        className="sticky top-0 z-50 w-full bg-[#FBFAF6]/94 backdrop-blur-md border-b border-kb-line"
      >
        <nav className="max-w-340 mx-auto flex items-center gap-6 w-full h-16 lg:h-18 px-4 lg:px-10 lg:relative">
          <LocaleLink href="/" className="shrink-0 hidden lg:block">
            <img
              src="/assets/Main/Logo/logo kutubuku.png"
              alt="KutuBuku"
              className="h-auto w-18 md:w-24"
            />
          </LocaleLink>

          {/* Desktop nav */}
          <div className="hidden lg:flex flex-1 text-sm">
            {!isSearchActive ? (
              <div className="flex gap-5.5 items-center flex-wrap">
                {localizedNavItems.map((item) => (
                  <LocaleLink
                    key={item.href}
                    href={item.href}
                    className={getLinkClasses(item.href)}
                  >
                    {isPathActive(item.href) && (
                      <span className="w-1.5 h-1.5 rounded-full bg-primary-500 shrink-0" />
                    )}
                    {firstWordCapital(t(item.labelKey))}
                  </LocaleLink>
                ))}

                {contentMenus.map((menu) => (
                  <div key={menu.resource} className="relative group">
                    <div
                      className={[
                        "flex items-center gap-1 text-[13.5px] transition-colors cursor-pointer select-none",
                        isResourceActive(menu.resource)
                          ? "font-semibold text-kb-ink"
                          : "font-medium text-kb-ink/72 hover:text-primary-600",
                      ].join(" ")}
                    >
                      <span>{firstWordCapital(t(menu.labelKey))}</span>
                      <ChevronDown className="w-3.5 h-3.5 transition-transform group-hover:rotate-180" />
                    </div>

                    {/* Dropdown panel */}
                    <div className="absolute top-full left-1/2 -translate-x-1/2 pt-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-150 z-50">
                      <div className="bg-white border border-kb-line rounded-2xl shadow-xl min-w-52 py-2">
                        {menu.items.length === 0 ? (
                          <p className="px-4 py-2.5 text-sm text-kb-muted">
                            Tidak ada data
                          </p>
                        ) : (
                          menu.items.map((sub) => (
                            <LocaleLink
                              key={sub.slug}
                              href={`/${language}/${menu.resource}/${sub.slug}`}
                              className="block px-4 py-2.5 text-sm text-kb-ink hover:bg-kb-paper-alt hover:text-primary-600 transition-colors"
                            >
                              {getSubItemLabel(sub)}
                            </LocaleLink>
                          ))
                        )}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <SearchBar
                ref={searchInputRef}
                placeholder={t("search novels")}
                onBlur={() => setIsSearchActive(false)}
              />
            )}
          </div>

          <div className="hidden lg:flex items-center gap-3.5 shrink-0">
            <LanguageToggle />
            {!isSearchActive && (
              <button
                onClick={() => {
                  setIsSearchActive(true);
                  requestAnimationFrame(() => searchInputRef.current?.focus());
                }}
                className="cursor-pointer w-9 h-9 rounded-full border border-kb-line flex items-center justify-center text-kb-ink hover:bg-kb-paper-alt"
              >
                <Search size={16} />
              </button>
            )}

            {isLoggedIn && user ? (
              <div className="flex items-center gap-1">
                <NotificationButton />
                <div ref={profileRef} className="relative">
                  <button
                    onClick={() => setProfileOpen((prev) => !prev)}
                    aria-expanded={isProfileOpen}
                    className="flex items-center gap-2 p-1"
                  >
                    <img
                      src={avatarUrl}
                      alt={user.name}
                      className="w-9 h-9 rounded-full cursor-pointer border-2 border-transparent hover:border-primary-300"
                    />
                    <span className="text-[13px] font-semibold text-kb-ink">{user.name}</span>
                  </button>

                  <AnimatePresence>
                    {isProfileOpen && (
                      <ProfileDropdown
                        stats={stats}
                        onClose={() => setProfileOpen(false)}
                        onLogout={handleLogout}
                      />
                    )}
                  </AnimatePresence>
                </div>
              </div>
            ) : (
              <div className="flex items-center gap-2.5">
                <LocaleLink
                  href="/auth/login"
                  className="text-[13.5px] font-semibold text-kb-ink px-1 py-2 hover:text-primary-600"
                >
                  {firstWordCapital(t("masuk"))}
                </LocaleLink>
                <LocaleLink
                  href="/auth/register"
                  className="bg-primary-600 text-white px-5 py-2.5 rounded-3xl text-[13.5px] font-bold hover:brightness-110"
                >
                  {firstWordCapital(t("daftar"))}
                </LocaleLink>
              </div>
            )}
          </div>

          {/* Mobile header row */}
          <div className="lg:hidden flex items-center justify-between w-full gap-4">
            <button
              onClick={() => setMobileMenuOpen((prev) => !prev)}
              className="text-kb-ink"
              aria-label="Open menu"
            >
              <Menu className="w-6 h-6" />
            </button>

            <LocaleLink href="/" className="shrink-0">
              <img
                src="/assets/Main/Logo/logo kutubuku.png"
                alt="KutuBuku"
                className="w-20 h-auto"
              />
            </LocaleLink>

            <div className="flex-1" />

            {isLoggedIn && user ? (
              <div className="flex items-center gap-1">
                <NotificationButton />
                <div ref={mobileProfileRef} className="relative">
                  <button
                    onClick={() => setProfileOpen((prev) => !prev)}
                    aria-expanded={isProfileOpen}
                  >
                    <img
                      src={avatarUrl}
                      alt={user.name}
                      className="w-9 h-9 rounded-full"
                    />
                  </button>

                  <AnimatePresence>
                    {isProfileOpen && (
                      <ProfileDropdown
                        stats={stats}
                        onClose={() => setProfileOpen(false)}
                        onLogout={handleLogout}
                      />
                    )}
                  </AnimatePresence>
                </div>
              </div>
            ) : (
              <LocaleLink
                href="/auth/login"
                onClick={() => setMobileMenuOpen(false)}
                className="bg-primary-600 text-white px-3 py-2 rounded-xl text-sm flex items-center gap-1"
              >
                <LogIn size={18} />
              </LocaleLink>
            )}
          </div>

          {/* Mobile menu drawer */}
          {isMobileMenuOpen && (
            <div className="lg:hidden absolute top-full left-0 w-full bg-white border-t border-kb-line shadow-lg rounded-b-xl p-4 z-50">
              <div className="flex flex-col gap-3">
                {localizedNavItems.map((item) => (
                  <LocaleLink
                    key={item.href}
                    href={item.href}
                    onClick={() => setMobileMenuOpen(false)}
                    className="text-sm font-medium text-kb-ink hover:text-primary-600"
                  >
                    {firstWordCapital(t(item.labelKey))}
                  </LocaleLink>
                ))}

                {contentMenus.map((menu) => (
                  <div key={menu.resource}>
                    <button
                      onClick={() =>
                        setOpenAccordion(
                          openAccordion === menu.resource ? null : menu.resource,
                        )
                      }
                      className="w-full flex items-center justify-between text-sm font-medium text-kb-ink hover:text-primary-600"
                    >
                      <span>{firstWordCapital(t(menu.labelKey))}</span>
                      <ChevronDown
                        className={`w-4 h-4 transition-transform ${
                          openAccordion === menu.resource ? "rotate-180" : ""
                        }`}
                      />
                    </button>

                    {openAccordion === menu.resource && (
                      <div className="mt-2 pl-3 flex flex-col gap-2 border-l-2 border-kb-line">
                        {menu.items.length === 0 ? (
                          <p className="text-sm text-kb-muted">Tidak ada data</p>
                        ) : (
                          menu.items.map((sub) => (
                            <LocaleLink
                              key={sub.slug}
                              href={`/${language}/${menu.resource}/${sub.slug}`}
                              onClick={() => setMobileMenuOpen(false)}
                              className="text-sm text-kb-muted hover:text-primary-600"
                            >
                              {getSubItemLabel(sub)}
                            </LocaleLink>
                          ))
                        )}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}
        </nav>
      </header>
    </>
  );
}