// src/components/layout/Navbar.tsx

"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Search, X, Menu, Globe, Languages } from "lucide-react";
import { LoginModal } from "../src/components/auth/LoginModal";
import { OtpModal } from "../src/components/auth/OtpModal";
import SocialLoginModal from "@/components/auth/SocialLogin";
import { useSession } from "next-auth/react";
import { ImageConstant } from "../constant/ImageConstant";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useQueryClient } from "@tanstack/react-query";
import { useCountryList, useLanguageList } from "@/state/home/home.action";
import { NavLink } from "@/components/home/home.type";
import { useSettingsStore } from "@/state/store/settings.store";
import { cn } from "@/lib/utils";
import SearchBox from "@/components/search-box/search-box";
import { LogoutConfirmationDialog } from "@/components/CommonComponents/logout-confirmation";
import RegisterModal from "@/components/auth/Register";
import { toast } from "sonner";

const navLinks: NavLink[] = [
  { title: "Home", href: "/" },
  { title: "Categories", href: "/#categories" },
  { title: "Top 10", href: "/#top10" },
  { title: "Competition", href: "/#competition" },
  { title: "Interactives", href: "/#interactive" },
  // { title: "Pricing", href: "/#pricing" },
  { title: "FAQ", href: "/#faq" },
];
// const Navbar: React.FC
const Navbar: React.FC = () => {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const { data: session } = useSession();
  const {
    language,
    country,
    setLanguage,
    setCountry,
    isLogOutOpen,
    setIsLogOutOpen,
    isSocialOpen,
    setIsSocialOpen,
    hasHydrated,
  } = useSettingsStore();

  const [isLoginOpen, setIsLoginOpen] = useState(false);
  const [isOtpOpen, setIsOtpOpen] = useState(false);
  const [emailForOtp, setEmailForOtp] = useState("");
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [isRegisterOpen, setIsRegisterOpen] = useState(false);

  const queryClient = useQueryClient();
  const router = useRouter();
  const [showSearch, setShowSearch] = useState(false);
  const { data: languages = [], isSuccess: languagesLoaded } =
    useLanguageList();
  const { data: countries = [], isSuccess: countriesLoaded } = useCountryList();

  const hideOnMobile =
    pathname === "/terms-and-conditions" ||
    pathname === "/privacy-policy" ||
    pathname === "/eula";

  useEffect(() => {
    // Wait for the persisted settings to load, otherwise the defaults below
    // would overwrite the user's stored language/country on every reload.
    if (!hasHydrated) return;

    if (languagesLoaded && languages.length > 0 && !language) {
      const defaultLanguage = languages.find(
        (lang) => lang.name.toLowerCase() === "english",
      );
      setLanguage(defaultLanguage || languages[0]);
    }
    if (countriesLoaded && countries.length > 0 && !country) {
      const defaultCountry = countries.find(
        (c) => c.name.toLowerCase() === "global",
      );
      setCountry(defaultCountry || countries[0]);
    }
  }, [
    hasHydrated,
    languagesLoaded,
    countriesLoaded,
    languages,
    countries,
    language,
    country,
    setLanguage,
    setCountry,
  ]);

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

  // Close all login modals when user successfully logs in (OAuth or credentials)
  useEffect(() => {
    if (session?.user?.id) {
      setIsSocialOpen(false);
      setIsLoginOpen(false);
      setIsOtpOpen(false);
    }
  }, [session?.user?.id, setIsSocialOpen]);

  return (
    <header
      className={`fixed inset-x-0 top-0 z-50 transition-all duration-300 md:block ${
        isScrolled
          ? "border-b border-white/10 bg-[#0c090b]/90 backdrop-blur-md"
          : "border-b border-transparent bg-transparent"
      } ${hideOnMobile ? "hidden md:block" : ""}`}
    >
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
        <div className="flex items-center gap-6">
          <Link href="/" className="shrink-0">
            <Image src="/logo.png" alt="Logo" width={110} height={44} />
          </Link>
          <nav aria-label="Primary" className="hidden md:flex items-center gap-1">
            {navLinks?.map((link) => (
              <Link
                key={link.title}
                href={link.href}
                className={`whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium transition-colors ${
                  pathname === link.href
                    ? "bg-white/5 text-white"
                    : "text-gray-400 hover:bg-white/5 hover:text-white"
                }`}
              >
                {link.title}
              </Link>
            ))}
          </nav>
        </div>

        {/* Desktop Actions */}
        <div className="hidden md:flex gap-2 items-center">
          {/* Search */}
          <div className="relative flex items-center">
            <>
              <button
                type="button"
                className="flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-white/5 hover:text-white"
                onClick={() => setShowSearch(true)}
              >
                <Search className="h-4 w-4" />
                Search
              </button>
              <SearchBox isOpen={showSearch} setIsOpen={setShowSearch} />
            </>
          </div>
          {/* <AnimatedSearch /> */}
          {/* Language Dropdown REMOVED from here */}
          {/* Country Dropdown */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                className="flex items-center gap-1.5 rounded-md px-2 text-sm font-medium text-gray-400 cursor-pointer hover:bg-white/5 hover:text-white"
              >
                <Globe className="h-4 w-4" />
                <span>{country?.name}</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="end"
              className="w-40 bg-[#0A0A0B] text-white border-white/20 "
            >
              {countries?.map((c) => (
                <DropdownMenuItem
                  key={c.name}
                  onClick={() => setCountry(c)}
                  className={cn(
                    "hover:bg-[#1A1A1C]! hover:text-white! cursor-pointer flex justify-between items-center  ",
                    country?.name === c.name && "bg-[#1A1A1C]",
                  )}
                >
                  <span>{c.name}</span>
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
          {session?.user?.id && (
            <div
              className="flex gap-2 items-center text-white cursor-pointer"
              onClick={() => router.push("/profile")}
            >
              <Image src={ImageConstant.gift} alt="" width={30} />
            </div>
          )}
          <Button
            variant="ghost"
            className="h-9 cursor-pointer rounded-md border border-white/15 bg-transparent px-3 text-sm font-medium text-white hover:bg-white/10 hover:text-white"
            onClick={() => setIsRegisterOpen(true)}
          >
            Become a Partner
          </Button>
          {session?.user?.id ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Image
                  src={session?.user?.profile_pic || ImageConstant.Profile}
                  alt="user-profile"
                  width={40}
                  height={40}
                  className="rounded-full cursor-pointer object-cover"
                />
              </DropdownMenuTrigger>
              <DropdownMenuContent
                align="end"
                className="w-40 bg-[#0A0A0B] text-white border-white/20"
              >
                <DropdownMenuItem
                  onClick={() => router.push("/profile")}
                  className="hover:bg-[#1A1A1C]! hover:text-white! cursor-pointer"
                >
                  Profile
                </DropdownMenuItem>
                <DropdownMenuItem
                  onClick={() => router.push("/delete-account")}
                  className="hover:bg-[#1A1A1C]! hover:text-white! cursor-pointer"
                >
                  Delete Account
                </DropdownMenuItem>
                <DropdownMenuItem
                  onClick={() => {
                    setIsLogOutOpen(true);
                  }}
                  className="hover:bg-[#1A1A1C]! hover:text-white! cursor-pointer"
                >
                  Logout
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
            <Button
              className="h-9 cursor-pointer rounded-md border border-[#E50914] bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] px-4 text-sm font-semibold text-white hover:from-[#c72a40] hover:via-[#c72a40] hover:to-[#e03d1a]"
              onClick={() => setIsSocialOpen(true)}
            >
              Login
            </Button>
          )}
        </div>
        <div className="md:hidden flex items-center">
          <button
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            className="text-white focus:outline-none"
          >
            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>
      {isMobileMenuOpen && (
        <div className="md:hidden bg-[rgba(0,0,0,0.8)] backdrop-blur-lg text-white px-4 py-6 space-y-4 absolute w-full left-0 top-16 z-40">
          <nav className="flex flex-col space-y-3">
            {navLinks?.map((link) => (
              <Link
                key={link.title}
                href={link.href}
                className={
                  pathname === link.href
                    ? "font-semibold text-lg text-[#ED3A57]"
                    : "text-lg hover:text-[#ED3A57]"
                }
                onClick={() => setIsMobileMenuOpen(false)}
              >
                {link.title}
              </Link>
            ))}
          </nav>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                className="w-full justify-start flex items-center gap-2 text-white text-[18px] cursor-pointer hover:bg-transparent hover:text-white p-0"
              >
                <Globe className="h-5 w-5" />
                <span>{country?.name}</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="start"
              className="w-56 bg-[#0A0A0B] text-white border-white/20"
            >
              {countries?.map((c) => (
                <DropdownMenuItem
                  key={c.name}
                  onClick={() => {
                    setCountry(c);
                    setIsMobileMenuOpen(false);
                  }}
                  className={cn(
                    "hover:bg-[#1A1A1C]! hover:text-white! cursor-pointer flex justify-between items-center",
                    country?.name === c.name && "bg-[#1A1A1C]",
                  )}
                >
                  <span>{c.name}</span>
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>

          <div className="flex flex-col gap-3 mt-4">
            <Button
              className="border border-[#E50914] bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] text-white"
              onClick={() => setIsRegisterOpen(true)}
            >
              Become a Partner
            </Button>
            {session?.user?.id ? (
              <div>
                <div className="flex items-center gap-4">
                  <Image
                    src={session?.user?.profile_pic || ImageConstant.Profile}
                    alt="user-profile"
                    width={40}
                    height={40}
                    className="rounded-full object-cover cursor-pointer"
                    onClick={() => {
                      router.push("/profile");
                      setIsMobileMenuOpen(false);
                    }}
                  />
                  <div>
                    <p className="font-semibold">{session.user.name}</p>
                    <button
                      onClick={() => {
                        setIsLogOutOpen(true);
                      }}
                      className="text-red-500 text-sm"
                    >
                      Logout
                    </button>
                  </div>
                </div>
              </div>
            ) : (
              <Button
                className="border border-[#E50914] bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] text-white"
                onClick={() => {
                  setIsSocialOpen(true);
                  setIsMobileMenuOpen(false);
                }}
              >
                Login
              </Button>
            )}
          </div>
        </div>
      )}

      <SocialLoginModal
        isOpen={isSocialOpen}
        setIsOpen={setIsSocialOpen}
        onContinueGuest={() => setIsLoginOpen(true)}
      />
      <LoginModal
        isOpen={isLoginOpen}
        setIsOpen={setIsLoginOpen}
        onOtpRequestSuccess={(email) => {
          setEmailForOtp(email);
          setIsLoginOpen(false);
          setIsOtpOpen(true);
        }}
      />
      <OtpModal
        isOpen={isOtpOpen}
        setIsOpen={setIsOtpOpen}
        email={emailForOtp}
        onVerifyOtp={() => {
          setEmailForOtp("");
          setIsLoginOpen(false);
          setIsOtpOpen(false);
          setIsSocialOpen(false);
        }}
      />
      <LogoutConfirmationDialog
        isOpen={isLogOutOpen}
        onOpenChange={setIsLogOutOpen}
      />
      <RegisterModal
        isOpen={isRegisterOpen}
        setIsOpen={setIsRegisterOpen}
        onRegisterSuccess={() => {
          console.log("User registered successfully!");
        }}
      />
    </header>
  );
};

export default Navbar;