"use client";

import React, { useState, useEffect, useRef } from "react";
import { usePathname, useRouter } from "next/navigation";
import {
  BarChart3,
  Globe,
  Users,
  Link2,
  MapPin,
  ChevronDown,
  Menu,
  X,
  ArrowUpRight,
  FileText,
  BarChart3Icon,
  Search,
  ShoppingCart,
} from "lucide-react";
import { useAuth } from "@/Context/AuthProvider";
import axios from "axios";
import { STORAGE_KEYS } from "@/Utils/storage";
import { getGuestCartCount } from "@/Utils/cartUtils";

const featuredTools = [
  { name: "Rank Tracker", icon: BarChart3 },
  { name: "On-Page SEO Checker", icon: Search },
  { name: "Website Audit", icon: Globe },
  { name: "Competitor Analysis Tool", icon: Users },
  { name: "Backlink Checker", icon: Link2 },
  { name: "Local Marketing Software", icon: MapPin },
];

const routeMap = {
  "AI Search Toolkit": "/services/ai-search",
  "AI Overviews Tracker": "/services/ai-overviews",
  "AI Mode Tracker": "/services/ai-mode",
  "ChatGPT Tracker": "/services/chatgpt",
  "Gemini Tracker": "/services/gemini",
};

const items = [
  { label: "SERP Tracker", path: "/services/serp-tracker" },
  { label: "Insights", path: "/services/insights" },
  { label: "Keyword Grouper", path: "/services/keyword-grouper" },
  { label: "SEO Dashboard", path: "/services/seo-dashboard" },
];

const items2 = [
  { label: "Agency Pack", path: "/services/agency-pack" },
  { label: "SEO Report Generator", path: "/services/seo-report-generator" },
  { label: "Lead Generator", path: "/services/lead-generator" },
  { label: "White Label", path: "/services/white-label" },
];

const Navbar = () => {
  const pathname = usePathname();
  const { authUser, loading } = useAuth();
  const router = useRouter();
  const [openMenu, setOpenMenu] = useState(null);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [cartCount, setCartCount] = useState(0);
  const menuRef = useRef(null);

  const fetchCartCount = async () => {
    try {
      if (authUser?._id) {
        const res = await axios.get(
          `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/cart/${authUser._id}`,
          { withCredentials: true },
        );

        const count = res?.data?.services?.length || 0;

        setCartCount(count);

        localStorage.setItem(STORAGE_KEYS.USER_COUNT, count.toString());
      } else {
        setCartCount(getGuestCartCount());
      }
    } catch (err) {
      console.error("Error fetching cart count:", err);
      setCartCount(0);
    }
  };

  useEffect(() => {
    fetchCartCount();
  }, [authUser]);

  useEffect(() => {
    const updateCart = () => {
      if (authUser?._id) {
        const localCount = Number(
          localStorage.getItem(STORAGE_KEYS.USER_COUNT) || 0,
        );

        setCartCount(localCount);

        fetchCartCount();
      } else {
        setCartCount(getGuestCartCount());
      }
    };

    window.addEventListener(STORAGE_KEYS.CART_EVENT, updateCart);

    return () => {
      window.removeEventListener(STORAGE_KEYS.CART_EVENT, updateCart);
    };
  }, [authUser]);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setOpenMenu(null);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  const NavItem = ({ label, path }) => {
    const isActive = pathname === path;

    return (
      <div className="group cursor-pointer" onClick={() => router.push(path)}>
        <span className="relative">
          {label}

          <span
            className={`
            absolute left-0 -bottom-1 h-0.5 bg-white transition-all duration-300
            ${isActive ? "w-full" : "w-0 group-hover:w-full"}
          `}
          />
        </span>
      </div>
    );
  };

  const isServicesActive =
    openMenu === "services" || pathname.startsWith("/services");

  const isResourcesActive =
    openMenu === "resources" ||
    pathname.startsWith("/blogs") ||
    pathname.startsWith("/case-studies");

  return (
    <header className="fixed top-0 left-0 w-full z-9999 bg-[#794AFF] text-white">
      <div className="mx-auto flex items-center justify-between px-6 py-4">
        <div
          className="flex items-center gap-1 cursor-pointer"
          onClick={() => router.push("/")}
        >
          <img src="/logo.png" alt="logo" className="w-7" />
          <span className="text-xl font-semibold tracking-wide">AURRGANIC</span>
        </div>

        <nav className="hidden lg:flex items-center gap-8 text-md">
          <NavItem label="Home" path="/" />

          <NavItem label="About" path="/about" />

          <div ref={menuRef} className="relative">
            <div
              className="relative flex items-center gap-1"
              onClick={(e) => {
                e.stopPropagation();
                setOpenMenu(openMenu === "services" ? null : "services");
              }}
            >
              <span className="relative cursor-pointer group">
                Services
                <span
                  className={`absolute left-0 -bottom-1 h-0.5 bg-white transition-all duration-300 ${
                    isServicesActive ? "w-full" : "w-0 group-hover:w-full"
                  }`}
                ></span>
              </span>
              <ChevronDown
                size={16}
                className={`group cursor-pointer transition-transform duration-300 ${
                  openMenu === "services" ? "rotate-180" : ""
                }`}
              />

              <div
                className={`z-999 absolute left-22 top-12 -translate-x-1/2 
                  w-240 max-h-[86vh] overflow-y-auto 
                  bg-white text-black rounded-2xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] 
                  p-6 transition-all duration-300 custom-scrollbar ${
                    openMenu === "services"
                      ? "opacity-100 visible translate-y-0"
                      : "opacity-0 invisible translate-y-4"
                  }`}
              >
                <div className="grid grid-cols-3 gap-6 text-sm">
                  <div className="bg-gray-50 rounded-xl p-5">
                    <h4 className="font-bold mb-4 text-[#111111] text-xs tracking-wide">
                      FEATURED TOOLS
                    </h4>

                    <ul className="space-y-2">
                      {featuredTools.map((item, i) => {
                        const Icon = item.icon;

                        const routeMap = {
                          "Rank Tracker": "/services/rank-tracker",
                          "On-Page SEO Checker":
                            "/services/on-page-seo-checker",
                          "Website Audit": "/services/website-audit",
                          "Competitor Analysis Tool":
                            "/services/competitor-analysis",
                          "Backlink Checker": "/services/backlink-checker",
                          "Local Marketing Software":
                            "/services/local-marketing",
                        };

                        return (
                          <li
                            key={i}
                            onClick={(e) => {
                              e.stopPropagation();
                              setOpenMenu(null);
                              router.push(routeMap[item.name]);
                            }}
                            className="w-fit flex items-center gap-4 cursor-pointer group"
                          >
                            <div className="w-9 h-9 flex items-center justify-center rounded-lg bg-[#794AFF]/10 group-hover:bg-[#794AFF]/20 transition">
                              <Icon
                                size={18}
                                className="text-[#794AFF] group-hover:scale-110 transition"
                              />
                            </div>

                            <span className="text-[#212121] group-hover:text-[#794AFF] transition">
                              {item.name}
                            </span>
                          </li>
                        );
                      })}
                    </ul>
                  </div>

                  <div>
                    <h4 className="font-bold mb-4 text-[#111111] text-xs tracking-wide">
                      AI TOOLKIT
                    </h4>

                    <ul className="space-y-3">
                      {[
                        "AI Search Toolkit",
                        "AI Overviews Tracker",
                        "AI Mode Tracker",
                        "ChatGPT Tracker",
                        "Gemini Tracker",
                      ].map((item, i) => (
                        <li
                          key={i}
                          onClick={(e) => {
                            e.stopPropagation();
                            setOpenMenu(null);
                            router.push(routeMap[item]);
                          }}
                          className="w-fit text-[#212121] hover:text-[#794AFF] cursor-pointer transition hover:translate-x-1"
                        >
                          {item}
                        </li>
                      ))}
                    </ul>

                    <h4 className="font-bold mt-6 mb-4 text-[#111111] text-xs tracking-wide">
                      KEYWORD RESEARCH
                    </h4>

                    <ul className="space-y-2">
                      <li
                        onClick={(e) => {
                          e.stopPropagation();
                          setOpenMenu(null);
                          router.push("/services/keyword-tool");
                        }}
                        className="w-fit hover:text-[#794AFF] cursor-pointer transition hover:translate-x-1"
                      >
                        Keyword Tool
                      </li>
                    </ul>

                    <h4 className="font-bold mt-6 mb-4 text-[#111111] text-xs tracking-wide">
                      CONTENT MARKETING
                    </h4>

                    <ul className="space-y-2">
                      {[
                        {
                          label: "Content Marketing Tool",
                          path: "/services/content-marketing",
                        },
                        {
                          label: "Content Editor",
                          path: "/services/content-editor",
                        },
                        { label: "AI Writer", path: "/services/ai-writer" },
                      ].map((item, i) => (
                        <li
                          key={i}
                          onClick={(e) => {
                            e.stopPropagation();
                            setOpenMenu(null);
                            router.push(item.path);
                          }}
                          className="w-fit text-[#212121] hover:text-[#794AFF] cursor-pointer transition-all duration-200 hover:translate-x-1"
                        >
                          {item.label}
                        </li>
                      ))}
                    </ul>
                  </div>

                  <div>
                    <h4 className="font-bold mb-4 text-[#111111] text-xs tracking-wide">
                      OTHER SEO TOOLS
                    </h4>

                    <ul className="space-y-3">
                      {items.map((item, i) => (
                        <li
                          key={i}
                          onClick={(e) => {
                            e.stopPropagation();
                            setOpenMenu(null);
                            router.push(item.path);
                          }}
                          className="w-fit text-[#212121] hover:text-[#794AFF] cursor-pointer transition-all duration-200 hover:translate-x-1"
                        >
                          {item.label}
                        </li>
                      ))}
                    </ul>

                    <h4 className="font-bold mt-6 mb-4 text-[#111111] text-xs tracking-wide">
                      TOOLS FOR AGENCIES
                    </h4>

                    <ul className="space-y-2">
                      {items2.map((item, i) => (
                        <li
                          key={i}
                          onClick={(e) => {
                            e.stopPropagation();
                            setOpenMenu(null);
                            router.push(item.path);
                          }}
                          className="w-fit text-[#212121] hover:text-[#794AFF] cursor-pointer transition-all duration-200 hover:translate-x-1"
                        >
                          {item.label}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>

                <div className="mt-6 border-t border-[#676767]/10 pt-4 text-center">
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      setOpenMenu(null);
                      router.push("/services");
                    }}
                    className="text-[#794AFF] font-medium hover:underline flex items-center justify-center gap-1 mx-auto"
                  >
                    All services →
                  </button>
                </div>
              </div>
            </div>
          </div>

          <NavItem label="Pricing" path="/pricing" />

          <div ref={menuRef} className="relative">
            <div
              className="relative flex items-center gap-1 cursor-pointer"
              onClick={(e) => {
                e.stopPropagation();
                setOpenMenu(openMenu === "resources" ? null : "resources");
              }}
            >
              <span className="relative group">
                Resources
                <span
                  className={`absolute left-0 -bottom-1 h-0.5 bg-white transition-all duration-300 ${
                    isResourcesActive ? "w-full" : "w-0 group-hover:w-full"
                  }`}
                ></span>
              </span>

              <ChevronDown
                size={16}
                className={`transition-transform duration-300 ${
                  openMenu === "resources" ? "rotate-180" : ""
                }`}
              />

              <div
                className={`z-999 absolute left-1/2 -translate-x-1/2 top-12 w-175 bg-white rounded-2xl shadow-[0_20px_60px_rgba(0,0,0,0.15)] p-6 transition-all duration-300 ${
                  openMenu === "resources"
                    ? "opacity-100 visible translate-y-0"
                    : "opacity-0 invisible translate-y-4"
                }`}
              >
                <div className="grid grid-cols-2 gap-10 text-sm">
                  <div>
                    <h4 className="text-xs font-semibold tracking-wide text-[#111111] mb-4">
                      EDUCATION
                    </h4>

                    <div className="space-y-3">
                      <div
                        onClick={(e) => {
                          e.stopPropagation();
                          setOpenMenu(null);
                          setTimeout(() => {
                            router.push("/blogs");
                          }, 100);
                        }}
                        className="flex items-start gap-3 group cursor-pointer p-3 rounded-xl hover:bg-gray-50 transition"
                      >
                        <div className="w-9 h-9 rounded-lg bg-[#794AFF]/10 flex items-center justify-center shrink-0">
                          <FileText size={16} className="text-[#794AFF]" />
                        </div>

                        <div className="leading-tight">
                          <p className="font-medium text-[#212121] group-hover:text-[#794AFF] transition">
                            Blogs
                          </p>
                          <p className="text-xs text-[#676767] mt-1">
                            Thorough SEO guides and insights
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div>
                    <h4 className="text-xs font-semibold tracking-wide text-[#111111] mb-4">
                      USER RESOURCES
                    </h4>

                    <div className="space-y-3">
                      <div
                        onClick={(e) => {
                          e.stopPropagation();
                          setOpenMenu(null);
                          setTimeout(() => {
                            router.push("/case-studies");
                          }, 100);
                        }}
                        className="flex items-start gap-3 group cursor-pointer p-3 rounded-xl hover:bg-gray-50 transition"
                      >
                        <div className="w-9 h-9 rounded-lg bg-[#794AFF]/10 flex items-center justify-center shrink-0">
                          <BarChart3Icon size={16} className="text-[#794AFF]" />
                        </div>

                        <div className="leading-tight">
                          <p className="font-medium text-[#212121] group-hover:text-[#794AFF] transition">
                            Case Studies
                          </p>
                          <p className="text-xs text-[#676767] mt-1">
                            Real success stories and growth strategies
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <NavItem label="Contact" path="/contact" />
        </nav>

        <div className="hidden lg:flex items-center gap-6">
          <div
            onClick={() => router.push("/cart")}
            className="relative cursor-pointer group"
          >
            <div className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition">
              <ShoppingCart size={20} className="text-white" />
            </div>

            {cartCount > 0 && (
              <span className="absolute -top-2 -right-2 bg-white text-[#794AFF] text-[10px] w-5 h-5 flex items-center justify-center rounded-full">
                {cartCount}
              </span>
            )}
          </div>

          {loading ? (
            <div className="w-28 h-10 bg-white/20 rounded-full animate-pulse" />
          ) : !authUser ? (
            <button
              onClick={() => router.push("/login")}
              className="group items-center gap-2 bg-white text-[#794AFF] text-sm px-5 py-2 rounded-full transition-all duration-300 hover:opacity-90 flex"
            >
              Sign in
              <ArrowUpRight className="transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1" />
            </button>
          ) : (
            <button
              onClick={() =>
                router.push(
                  authUser.role === "Admin"
                    ? "/admin/dashboard"
                    : "/user/dashboard",
                )
              }
              className="group items-center gap-2 bg-white text-[#794AFF] text-sm px-5 py-2 rounded-full transition-all duration-300 hover:opacity-90 flex"
            >
              Dashboard
              <ArrowUpRight className="transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1" />
            </button>
          )}
        </div>

        <div className="lg:hidden">
          {mobileOpen ? (
            <X
              size={24}
              className="cursor-pointer"
              onClick={() => setMobileOpen(false)}
            />
          ) : (
            <Menu
              size={24}
              className="cursor-pointer"
              onClick={() => setMobileOpen(true)}
            />
          )}
        </div>
      </div>

      {mobileOpen && (
        <div className="lg:hidden px-6 py-6 space-y-4 bg-[#794AFF]">
          <div
            className="cursor-pointer"
            onClick={() => {
              setMobileOpen(false);
              router.push("/");
            }}
          >
            Home
          </div>

          <div
            className="cursor-pointer"
            onClick={() => {
              setMobileOpen(false);
              router.push("/about");
            }}
          >
            About
          </div>

          <div
            className="cursor-pointer"
            onClick={() => {
              setMobileOpen(false);
              router.push("/services");
            }}
          >
            Services
          </div>

          <div
            className="cursor-pointer"
            onClick={() => {
              setMobileOpen(false);
              router.push("/pricing");
            }}
          >
            Pricing
          </div>

          <div className="cursor-pointer">Resources</div>

          <div
            className="cursor-pointer"
            onClick={() => {
              setMobileOpen(false);
              router.push("/contact");
            }}
          >
            Contact
          </div>

          <div
            className="flex items-center justify-between cursor-pointer"
            onClick={() => {
              setMobileOpen(false);
              router.push("/cart");
            }}
          >
            <div className="flex items-center gap-3">
              <div className="relative">
                <div className="p-2 rounded-full bg-white/10">
                  <ShoppingCart size={18} className="text-white" />
                </div>

                {cartCount > 0 && (
                  <span className="absolute -top-2 -right-2 bg-white text-[#794AFF] text-[10px] w-5 h-5 flex items-center justify-center rounded-full">
                    {cartCount}
                  </span>
                )}
              </div>

              <span className="text-white">Cart</span>
            </div>
          </div>

          {loading ? (
            <div className="w-full h-12 bg-white/20 rounded-full animate-pulse mt-4" />
          ) : !authUser ? (
            <button
              onClick={() => {
                setMobileOpen(false);
                router.push("/login");
              }}
              className="flex items-center justify-center gap-2 w-full bg-white text-[#794AFF] px-5 py-3 rounded-full mt-4"
            >
              Sign in
              <ArrowUpRight className="transition-transform duration-300 hover:translate-x-1 hover:-translate-y-1" />
            </button>
          ) : (
            <button
              onClick={() => {
                setMobileOpen(false);
                router.push(
                  authUser.role === "Admin"
                    ? "/admin/dashboard"
                    : "/user/dashboard",
                );
              }}
              className="flex items-center justify-center gap-2 w-full bg-white text-[#794AFF] px-5 py-3 rounded-full mt-4"
            >
              Dashboard
              <ArrowUpRight className="transition-transform duration-300 hover:translate-x-1 hover:-translate-y-1" />
            </button>
          )}
        </div>
      )}
    </header>
  );
};

export default Navbar;