"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { AnimatePresence } from "framer-motion";
import { useCartStore } from "@/stores/cartStore";
import { User, ShoppingBag, Menu } from "lucide-react";
import MobileMenu from "./MobileMenu";
import CartDrawer from "@/components/cart/CartDrawer";

export default function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const { items, toggleCart } = useCartStore();

  const itemCount = items.reduce((count, item) => count + item.quantity, 0);

  return (
    <>
      <header className="sticky top-10 z-40 bg-white border-b border-[#1A1A1A]/[0.06]">
        <div className="max-w-[1400px] mx-auto px-6">
          <div className="flex items-center justify-between h-16">
            {/* Mobile Menu Button */}
            <button
              className="lg:hidden p-2 -ml-2"
              onClick={() => setMobileMenuOpen(true)}
              aria-label="Open menu"
            >
              <Menu className="w-5 h-5" />
            </button>

            {/* Logo */}
            <Link href="/" className="flex-shrink-0">
              <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-8 w-auto object-contain"
              />
            </Link>

            {/* Desktop Navigation */}
            <nav className="hidden lg:flex items-center gap-8">
              <Link
                href="/products"
                className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
              >
                Products
              </Link>
              <Link
                href="/about"
                className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
              >
                About
              </Link>
              <Link
                href="/contact"
                className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
              >
                Contact
              </Link>
            </nav>

            {/* Icons */}
            <div className="flex items-center gap-1">
              <button
                className="p-2 hidden sm:block"
                aria-label="Account"
              >
                <User className="w-5 h-5" />
              </button>

              <button
                className="p-2 relative"
                onClick={toggleCart}
                aria-label="Open cart"
              >
                <ShoppingBag className="w-5 h-5" />
                {itemCount > 0 && (
                  <span className="absolute -top-0.5 -right-0.5 bg-[#1A1A1A] text-white text-[10px] w-4 h-4 rounded-full flex items-center justify-center">
                    {itemCount}
                  </span>
                )}
              </button>
            </div>
          </div>
        </div>
      </header>

      <AnimatePresence>
        {mobileMenuOpen && <MobileMenu onClose={() => setMobileMenuOpen(false)} />}
      </AnimatePresence>

      <CartDrawer />
    </>
  );
}