manoon-headless/src/components/layout/Header.tsx

"use client";

import { useState, useEffect, useRef } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { AnimatePresence, motion } from "framer-motion";
import { useTranslations } from "next-intl";
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
import { User, ShoppingBag, Menu, X, Globe } from "lucide-react";
import CartDrawer from "@/components/cart/CartDrawer";
import { SUPPORTED_LOCALES, LOCALE_COOKIE, LOCALE_CONFIG, isValidLocale, getPathWithoutLocale, buildLocalePath } from "@/lib/i18n/locales";
import type { Locale } from "@/lib/i18n/locales";

interface HeaderProps {
  locale?: string;
}

export default function Header({ locale = "sr" }: HeaderProps) {
  const t = useTranslations("Header");
  const pathname = usePathname();
  const dropdownRef = useRef<HTMLDivElement>(null);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [langDropdownOpen, setLangDropdownOpen] = useState(false);
  const { getLineCount, toggleCart, initCheckout } = useSaleorCheckoutStore();

  const itemCount = getLineCount();
  const currentLocale = isValidLocale(locale) ? LOCALE_CONFIG[locale] : LOCALE_CONFIG.sr;

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setLangDropdownOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const switchLocale = (newLocale: string) => {
    if (newLocale === locale) {
      setLangDropdownOpen(false);
      return;
    }
    if (!isValidLocale(newLocale)) {
      setLangDropdownOpen(false);
      return;
    }
    document.cookie = `${LOCALE_COOKIE}=${newLocale}; path=/; max-age=31536000`;
    const pathWithoutLocale = getPathWithoutLocale(pathname);
    const newPath = buildLocalePath(newLocale as Locale, pathWithoutLocale);
    window.location.replace(newPath);
    setLangDropdownOpen(false);
  };

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

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(() => {
    if (mobileMenuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [mobileMenuOpen]);

  const navLinks = [
    { href: `/${locale}/products`, label: t("products") },
    { href: `/${locale}/about`, label: t("about") },
    { href: `/${locale}/contact`, label: t("contact") },
  ];

  return (
    <>
      <header
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
          scrolled
            ? "bg-white/95 backdrop-blur-md shadow-sm"
            : "bg-white/80 backdrop-blur-sm"
        }`}
      >
        <div className="relative flex items-center justify-between h-[72px] px-4 lg:px-6">
          <button
            className="lg:hidden p-2 -ml-2 hover:bg-black/5 rounded-full transition-colors"
            onClick={() => setMobileMenuOpen(true)}
            aria-label={t("openMenu")}
          >
            <Menu className="w-5 h-5" />
          </button>

          <nav className="hidden lg:flex items-center gap-10">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="text-[13px] uppercase tracking-[0.05em] text-[#1a1a1a] hover:text-[#666666] transition-colors relative group"
              >
                {link.label}
                <span className="absolute -bottom-1 left-0 w-0 h-[1px] bg-current transition-all duration-300 group-hover:w-full" />
              </Link>
            ))}
          </nav>

          <Link href={`/${locale}`} className="flex-shrink-0 lg:absolute lg:left-1/2 lg:-translate-x-1/2">
            <Image
              src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
              alt="ManoonOils"
              width={150}
              height={40}
              className="h-7 w-auto object-contain"
              priority
            />
          </Link>

          <div className="flex items-center gap-1">
            <div ref={dropdownRef} className="relative">
              <button
                className="p-2 hover:bg-black/5 rounded-full transition-colors flex items-center gap-1"
                onClick={() => setLangDropdownOpen(!langDropdownOpen)}
                aria-label="Select language"
              >
                <Globe className="w-5 h-5" strokeWidth={1.5} />
                <span className="text-sm">{currentLocale.flag}</span>
              </button>
              <AnimatePresence>
                {langDropdownOpen && (
                  <motion.div
                    initial={{ opacity: 0, y: -10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -10 }}
                    className="absolute right-0 top-full mt-1 bg-white border border-[#e5e5e5] shadow-lg rounded-md overflow-hidden z-50"
                  >
                    {SUPPORTED_LOCALES.map((loc) => (
                      <button
                        key={loc}
                        onClick={() => switchLocale(loc)}
                        className={`flex items-center gap-2 px-4 py-2 text-sm hover:bg-black/5 transition-colors w-full text-left ${
                          loc === locale ? "bg-black/5 font-medium" : ""
                        }`}
                      >
                        <span>{LOCALE_CONFIG[loc].flag}</span>
                        <span>{LOCALE_CONFIG[loc].label}</span>
                      </button>
                    ))}
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

            <button
              className="p-2 hover:bg-black/5 rounded-full transition-colors hidden sm:block"
              aria-label={t("account")}
            >
              <User className="w-5 h-5" strokeWidth={1.5} />
            </button>

            <button
              className="p-2 hover:bg-black/5 rounded-full transition-colors relative"
              onClick={toggleCart}
              aria-label={t("openCart")}
            >
              <ShoppingBag className="w-5 h-5" strokeWidth={1.5} />
              {itemCount > 0 && (
                <span className="absolute -top-0.5 -right-0.5 bg-black text-white text-[10px] w-[18px] h-[18px] rounded-full flex items-center justify-center font-medium">
                  {itemCount > 99 ? "99+" : itemCount}
                </span>
              )}
            </button>
          </div>
        </div>
      </header>

      <AnimatePresence>
        {mobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="fixed inset-0 z-[60] bg-white"
          >
            <div className="container h-full flex flex-col">
              <div className="flex items-center justify-between h-[72px]">
                <Link href={`/${locale}`} onClick={() => setMobileMenuOpen(false)}>
                  <Image
                    src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
                    alt="ManoonOils"
                    width={150}
                    height={40}
                    className="h-7 w-auto object-contain"
                  />
                </Link>
                <button
                  className="p-2 -mr-2 hover:bg-black/5 rounded-full transition-colors"
                  onClick={() => setMobileMenuOpen(false)}
                  aria-label={t("closeMenu")}
                >
                  <X className="w-6 h-6" />
                </button>
              </div>

              <nav className="flex-1 flex flex-col justify-center gap-8">
                {navLinks.map((link, index) => (
                  <motion.div
                    key={link.href}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 + 0.1 }}
                  >
                    <Link
                      href={link.href}
                      onClick={() => setMobileMenuOpen(false)}
                      className="text-3xl font-medium tracking-tight hover:text-[#666666] transition-colors"
                    >
                      {link.label}
                    </Link>
                  </motion.div>
                ))}
              </nav>

              <div className="py-8 border-t border-[#e5e5e5]">
                <div className="flex items-center justify-between">
                  <button
                    className="flex items-center gap-2 text-sm text-[#666666] hover:text-black transition-colors"
                    onClick={() => {
                      setMobileMenuOpen(false);
                      toggleCart();
                    }}
                  >
                    <ShoppingBag className="w-5 h-5" strokeWidth={1.5} />
                    {t("cart")} ({itemCount})
                  </button>
                  <button
                    className="flex items-center gap-2 text-sm text-[#666666] hover:text-black transition-colors"
                  >
                    <User className="w-5 h-5" strokeWidth={1.5} />
                    {t("account")}
                  </button>
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <CartDrawer />
    </>
  );
}