"use client";

import { useState, useEffect, useCallback, useMemo } from "react";
import { Link, useLocale, usePathname, useRouter, useTranslation } from "@/i18n/navigation";
import { getStoredUserEmail, pbLogout } from "@/app/lib/pocketbase";
import { resolveAuthUser } from "@/app/lib/api-client";
import { getAllNavLinks } from "@/config";
import { getNavLabelDebugFeatureId } from "@/config/debug-features";
import { useDevDebug } from "@/app/context/DevDebugContext";
import AuthModal from "./AuthModal";
import ThemeToggle from "./ThemeToggle";
import SiteMenu from "./SiteMenu";
import UserAvatar from "./UserAvatar";
import NotificationBell from "./NotificationBell";
import ChatNavLink from "./ChatNavLink";

export default function NavbarComponent() {
  const { t } = useTranslation("common");
  const { t: tNav } = useTranslation("nav");
  const locale = useLocale();
  const pathname = usePathname();
  const router = useRouter();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [authOpen, setAuthOpen] = useState(false);
  const [userEmail, setUserEmail] = useState<string | null>(null);
  const [userVip, setUserVip] = useState(false);

  const { isFeatureVisible } = useDevDebug();
  const showTopMenuButton = isFeatureVisible("nav.menu");
  const openSiteMenu = useCallback(() => setMenuOpen(true), []);
  const navLinks = useMemo(
    () =>
      getAllNavLinks().filter((link) => {
        if (!link.hidden) return true;
        const featureId = getNavLabelDebugFeatureId(link.labelKey);
        return featureId ? isFeatureVisible(featureId) : true;
      }),
    [isFeatureVisible]
  );

  const fetchAuth = useCallback(async () => {
    const session = await resolveAuthUser();
    if (session) {
      const { pbSaveAuth } = await import("@/app/lib/pocketbase");
      pbSaveAuth(session.token, { id: session.user.id, email: session.user.email });
      setUserEmail(session.user.email);
      setUserVip(!!session.user.vip);
      return;
    }
    setUserEmail(getStoredUserEmail());
    setUserVip(false);
  }, []);

  useEffect(() => {
    fetchAuth();
  }, [fetchAuth]);

  useEffect(() => {
    const onAuthUpdated = () => fetchAuth();
    const onVipUpdated = () => fetchAuth();
    window.addEventListener("auth:updated", onAuthUpdated);
    window.addEventListener("vip:updated", onVipUpdated);
    return () => {
      window.removeEventListener("auth:updated", onAuthUpdated);
      window.removeEventListener("vip:updated", onVipUpdated);
    };
  }, [fetchAuth]);

  const handleLogout = useCallback(async () => {
    await pbLogout();
    setUserEmail(null);
    setUserVip(false);
    router.replace("/");
  }, [router]);

  const isActive = useCallback((href: string) => {
    if (href.startsWith("/#")) return false;
    if (href === "/") return pathname === "/";
    if (href === "/digital") {
      return /^\/(zh|en)\/digital(?:\/|$)/.test(pathname);
    }
    return pathname.startsWith(href);
  }, [pathname]);

  return (
    <nav className="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b border-gray-100 dark:border-gray-800">
      <div className="max-w-[1600px] mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
        <Link href="/" className="flex items-center gap-2 shrink-0">
          <span className="text-2xl">🌏</span>
          <span className="text-lg font-bold text-gray-900 dark:text-gray-100 tracking-tight">
            {t("siteName")}
          </span>
        </Link>

        {(navLinks.length > 0 || showTopMenuButton) && (
          <div className="hidden lg:flex items-center gap-2 overflow-x-auto max-w-[calc(100vw-400px)] hide-scrollbar">
            {navLinks.slice(0, 5).map((link) => (
              <Link
                key={link.labelKey}
                href={link.href}
                className={`flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap shrink-0 ${
                  isActive(link.href)
                    ? "text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800"
                    : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800"
                }`}
              >
                <span>{link.icon}</span>
                <span className="hidden 2xl:inline">{tNav(link.labelKey)}</span>
              </Link>
            ))}
            {navLinks.length > 0 && showTopMenuButton && (
              <span className="w-px h-5 bg-gray-200 dark:bg-gray-700 shrink-0" aria-hidden />
            )}
            {showTopMenuButton && (
              <button
                onClick={openSiteMenu}
                className={`flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap shrink-0 ${
                  menuOpen
                    ? "text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800"
                    : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800"
                }`}
              >
                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <rect x="3" y="3" width="7" height="7" rx="1" />
                  <rect x="14" y="3" width="7" height="7" rx="1" />
                  <rect x="3" y="14" width="7" height="7" rx="1" />
                  <rect x="14" y="14" width="7" height="7" rx="1" />
                </svg>
                <span className="hidden xl:inline">{tNav("menu")}</span>
              </button>
            )}
          </div>
        )}

        <div className="flex items-center gap-1 sm:gap-2">
          {showTopMenuButton && (
            <button
              className="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
              onClick={openSiteMenu}
              aria-label={tNav("menu")}
            >
              <svg className="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <rect x="3" y="3" width="7" height="7" rx="1" />
                <rect x="14" y="3" width="7" height="7" rx="1" />
                <rect x="3" y="14" width="7" height="7" rx="1" />
                <rect x="14" y="14" width="7" height="7" rx="1" />
              </svg>
            </button>
          )}
          {userEmail ? (
            <div className="flex items-center gap-2">
              <span className="hidden sm:block max-w-[120px] truncate text-sm text-gray-600 dark:text-gray-400">
                {userEmail}
              </span>
              <UserAvatar
                email={userEmail}
                isVip={userVip}
                onLogout={handleLogout}
                onOpenMenu={openSiteMenu}
              />
            </div>
          ) : (
            <>
              <button
                type="button"
                onClick={openSiteMenu}
                className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gray-200 text-sm text-gray-600 shadow-sm ring-2 ring-white transition hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:ring-gray-900 dark:hover:bg-gray-600"
                aria-label={tNav("menu")}
                title={tNav("menu")}
              >
                👤
              </button>
              <button
                type="button"
                onClick={() => setAuthOpen(true)}
                className="hidden sm:inline-flex shrink-0 items-center justify-center rounded-full border border-gray-200 dark:border-gray-700 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
              >
                {t("loginRegister")}
              </button>
            </>
          )}
          <ChatNavLink />
          <NotificationBell />
          <button
            type="button"
            onClick={() => router.replace(pathname, { locale: locale === "zh" ? "en" : "zh" })}
            className="inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            aria-label={locale === "zh" ? "Switch to English" : "切换到中文"}
            title={locale === "zh" ? "EN" : "中文"}
          >
            {locale === "zh" ? "EN" : "中文"}
          </button>
          <ThemeToggle />

          <button
            className="md:hidden ml-1 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
            onClick={() => setMobileOpen(!mobileOpen)}
          >
            {mobileOpen ? (
              <svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                <path d="M6 18L18 6M6 6l12 12" />
              </svg>
            ) : (
              <svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                <path d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            )}
          </button>
        </div>
      </div>

      {mobileOpen && (
        <div className="md:hidden border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 px-4 py-3 space-y-1">
          {navLinks.map((link) => (
            <Link
              key={link.labelKey}
              href={link.href}
              className={`flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium ${
                isActive(link.href)
                  ? "text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-800"
                  : "text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800"
              }`}
              onClick={() => setMobileOpen(false)}
            >
              <span className="text-lg">{link.icon}</span>
              <span>{tNav(link.labelKey)}</span>
            </Link>
          ))}
          <Link
            href="/messages"
            className={`flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium ${
              isActive("/messages")
                ? "text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-800"
                : "text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800"
            }`}
            onClick={() => setMobileOpen(false)}
          >
            <span className="text-lg">🔔</span>
            <span>{tNav("messages")}</span>
          </Link>
          <button
            type="button"
            onClick={() => router.replace(pathname, { locale: locale === "zh" ? "en" : "zh" })}
            className="block w-full text-left px-4 py-3 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
          >
            {locale === "zh" ? "EN" : "中文"}
          </button>
          {userEmail ? (
            <div className="pt-2 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between px-4 py-2.5 rounded-lg bg-gray-50 dark:bg-gray-800">
              <UserAvatar
                email={userEmail}
                isVip={userVip}
                onLogout={() => { handleLogout(); setMobileOpen(false); }}
                onOpenMenu={() => { setMobileOpen(false); openSiteMenu(); }}
              />
              <span className="truncate text-sm text-gray-600 dark:text-gray-400">{userEmail}</span>
            </div>
          ) : null}
        </div>
      )}

      <AuthModal
        isOpen={authOpen}
        onClose={() => setAuthOpen(false)}
        onSuccess={(email) => setUserEmail(email)}
      />
      <SiteMenu
        isOpen={menuOpen}
        onClose={() => setMenuOpen(false)}
        onLoginClick={() => { setMenuOpen(false); setAuthOpen(true); }}
      />
    </nav>
  );
}
