// 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: "Film Competition", href: "https://form.typeform.com/to/hP3aAS4r" },
];
// const Navbar: React.FC
const Navbar: React.FC = () => {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const { data: session } = useSession();
  console.log("session: ", session);
  const {
    language,
    country,
    setLanguage,
    setCountry,
    isLogOutOpen,
    setIsLogOutOpen,
    isSocialOpen,
    setIsSocialOpen,
  } = useSettingsStore();

  const [isLoginOpen, setIsLoginOpen] = useState(false);
  const [isOtpOpen, setIsOtpOpen] = useState(false);
  const [emailForOtp, setEmailForOtp] = useState("");
  const [isMobileMenuOpen, setIsMobileMenuOpen] = 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();
  console.log("session: ", session);

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

  useEffect(() => {
    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]);
    }
  }, [
    languagesLoaded,
    countriesLoaded,
    languages,
    countries,
    language,
    country,
    setLanguage,
    setCountry,
  ]);

  console.log("session: ", session);

  // 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={`absolute top-5 left-0 w-full z-50 md:block ${
        hideOnMobile ? "hidden md:block" : ""
      }`}
    >
      <div className="container mx-auto flex items-center justify-between p-4 backdrop-blur-[21px] rounded-[20px] border border-[rgb(255_255_255/21%)] bg-[linear-gradient(90deg,rgba(0,0,0,0.4)_0%,rgba(0,0,0,0)_100%)]">
        <div className="flex items-center gap-8">
          <Link href="/" className="mr-5">
            <Image src="/logo.png" alt="Logo" width={127} height={50} />
          </Link>
          <nav className="hidden md:flex items-center space-x-6">
            {navLinks?.map((link) => (
              <Link
                key={link.title}
                href={link.href}
                className={
                  pathname === link.href
                    ? "bg-gradient-to-r from-[#ED3A57] to-[#FD521E] bg-clip-text text-transparent font-semibold text-[18px]"
                    : "text-white transition-colors text-[18px] hover:text-[#FD521E]"
                }
              >
                {link.title}
              </Link>
            ))}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button
                  variant="ghost"
                  className="flex items-center gap-2 text-white cursor-pointer hover:bg-transparent hover:text-white p-0 text-[18px]" // Style updated for consistency
                >
                  <Languages className="h-5 w-5" />
                  <span>{language?.name || "..."}</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                align="start"
                className="w-40 bg-[#0A0A0B] text-white border-white/20"
              >
                {languages?.map((lang) => (
                  <DropdownMenuItem
                    key={lang.name}
                    onClick={() => setLanguage(lang)}
                    className={cn(
                      "hover:bg-[#1A1A1C]! hover:text-white! cursor-pointer flex justify-between items-center",
                      language?.name === lang.name && "bg-[#1A1A1C]",
                    )}
                  >
                    {lang.name}
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
          </nav>
        </div>

        {/* Desktop Actions */}
        <div className="hidden md:flex gap-6 items-center">
          {/* Search */}
          <div className="relative flex items-center">
            <>
              <div
                className="flex items-center gap-2 cursor-pointer text-white text-[16px]"
                onClick={() => setShowSearch(true)}
              >
                <Search />
                Search
              </div>
              <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-2 text-white cursor-pointer hover:bg-transparent hover:text-white p-0 text-[16px]"
              >
                <Globe className="h-5 w-5" />
                <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
            className="border border-[#E50914] bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] text-white cursor-pointer"
            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="border border-[#E50914] bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] text-[14px] text-white cursor-pointer"
              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-[80px] rounded-b-[20px] 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"
              >
                <Languages className="h-5 w-5" />
                <span>{language?.name}</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="start"
              className="w-56 bg-[#0A0A0B] text-white border-white/20"
            >
              {languages?.map((lang) => (
                <DropdownMenuItem
                  key={lang.name}
                  onClick={() => {
                    setLanguage(lang);
                    setIsMobileMenuOpen(false);
                  }}
                  className={cn(
                    "hover:bg-[#1A1A1C]! hover:text-white! cursor-pointer flex justify-between items-center",
                    language?.name === lang.name && "bg-[#1A1A1C]",
                  )}
                >
                  {lang.name}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>

          <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;