"use client";

import React, { useContext, useState, useEffect } from "react";
import Link from "next/link";
import { Menu, ShoppingBag, UserRound } from "lucide-react";
import { IoMdClose } from "react-icons/io";
import Image from "next/image";
import SearchComponent from "../search/searchComponent";
import ProductContext from "@/app/contexts/productContext";
import MainContext from "@/app/contexts/mainContext";
import { useCurrency } from "@/app/contexts/currencyContext";
import CurrencySelect from "../dynamic-navbar/currencySelect";

const Navbar = () => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const { category } = useContext(ProductContext);
  const { token } = useContext(MainContext);
  const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES } =
    useCurrency();

  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 60);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const categoryItems = category
    ? category.map((category) => ({
        label: category.category_name,
        url: `/collections/${category.id}`,
      }))
    : []; // Fallback to an empty array if category is undefined

  const consultation = {
    label: "Rudraksha consultation",
    url: "/products/premium-rudraksha-consultation-astrology",
  };

  const visibleItems = [...categoryItems.slice(0, 4), consultation];

  return (
    <>

      <header className="fixed top-0 left-0 right-0 z-50 bg-white shadow-md">
        <div className="container mx-auto flex justify-between items-center p-4">
          <div className="flex items-center space-x-4">
            <button onClick={toggleSidebar} className="z-50">
              {isSidebarOpen ? (
                <IoMdClose size={28} />
              ) : (
                <Menu size={28} strokeWidth={1} />
              )}
            </button>
            <Link href="/">
              <Image
                src="/logo1.jpg"
                alt="Logo"
                width={56}
                height={56}
                className="object-contain"
              />
            </Link>
          </div>

          <div className="flex items-center space-x-4">
            <SearchComponent isScrolled={isScrolled} />
            <Link href="/pages/shopping-cart">
              <ShoppingBag size={20} className="cursor-pointer" />
            </Link>
            <div className="cursor-pointer">
              {token ? (
                <Link href="/accounts/profile">
                  <UserRound size={20} />
                </Link>
              ) : (
                <Link href="/accounts/login">
                  <button className="bg-[#c19a5b] text-white px-3 py-1 rounded hover:bg-[#b48943] text-sm">
                    Login
                  </button>
                </Link>
              )}
            </div>
            <CurrencySelect
              selectedCurrency={selectedCurrency}
              setSelectedCurrency={setSelectedCurrency}
              SUPPORTED_CURRENCIES={SUPPORTED_CURRENCIES}
            />
          </div>
        </div>

        <div className="py-2 ">
          <div className="container mx-auto flex justify-center items-center">
            <div className="flex space-x-4">
              {visibleItems.map((item) => (
                <Link
                  key={item.label}
                  href={item.url}
                  className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                >
                  {item.label}
                </Link>
              ))}
              <button
                onClick={toggleSidebar}
                className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
              >
                More
              </button>
            </div>
          </div>
        </div>
      </header>

      {isSidebarOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-40">
          <div className="fixed top-0 left-0 w-full h-full bg-white shadow-lg z-50 pt-32">
            <div className="p-4 h-full w-full md:w-1/2">
              <div style={{ justifyContent: "start" }} className="flex md:items-start md:!justify-between h-full flex-col flex-col-reverse md:flex-row" > 
              <div className="mb-6 border-t md:border-0">
                <h2 className="text-lg font-semibold mb-4">Quick Links</h2>
                <ul className="space-y-2">
                  <li>
                    <Link
                      href="/products/premium-rudraksha-consultation-astrology"
                      onClick={toggleSidebar}
                      className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                    >
                      Get a Consultation
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/pages/certification-and-guarantee"
                      onClick={toggleSidebar}
                      className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                    >
                      Certification and Guarantee
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/pages/contact-us"
                      onClick={toggleSidebar}
                      className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                    >
                      Contact Us
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/blogs/blog"
                      onClick={toggleSidebar}
                      className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                    >
                      Blogs
                    </Link>
                  </li>
                </ul>
              </div>

              <div className="mb-6 md:mb-0">
                <h2 className="text-lg font-semibold mb-4">Categories</h2>
                <ul className="space-y-2">
                  {categoryItems.map((item) => (
                    <li key={item.label}>
                      <Link
                        href={item.url}
                        onClick={toggleSidebar}
                        className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                      >
                        {item.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="h-[120px]"></div>
    </>
  );
};

export default Navbar;