"use client";

import React, { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useApp, CurrencyCode } from "@/context/AppContext";
import { ShoppingBag, Heart, User, MessageCircle, Menu, X } from "lucide-react";

export const Navbar: React.FC = () => {
  const pathname = usePathname();
  const { cart, wishlist, currency, setCurrency, t, user, setIsAiOpen, logout } = useApp();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [showCurrencyDrop, setShowCurrencyDrop] = useState(false);

  const navLinks = [
    { name: t("nav.shop"), href: "/shop" },
    { name: t("nav.essentials"), href: "/shop?category=Essentials" },
    { name: "BLOG", href: "/blog" },
  ];

  const currencies: CurrencyCode[] = ["PKR", "USD", "EUR", "GBP"];

  const handleCurrencyChange = (code: CurrencyCode) => {
    setCurrency(code);
    setShowCurrencyDrop(false);
  };

  return (
    <header className="sticky top-0 z-40 w-full bg-[#F8F7F2]/95 backdrop-blur-md border-b border-[#1A1A1A]/5 shadow-xs">
      <div className="mx-auto flex h-[83px] max-w-7xl items-center justify-between px-4 sm:px-6 md:px-12">
        
        {/* Left Links - Desktop */}
        <nav className="hidden items-center space-x-8 text-[12.5px] font-bold tracking-widest md:flex">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={`relative pb-1 transition-colors duration-300 group ${
                pathname === link.href ? "text-[#0A0A0A]" : "text-neutral-500 hover:text-black"
              }`}
            >
              {link.name}
              <span className={`absolute bottom-0 left-0 w-full h-[1px] bg-[#0A0A0A] transform origin-left transition-transform duration-300 ${
                pathname === link.href ? "scale-x-100" : "scale-x-0 group-hover:scale-x-100"
              }`} />
            </Link>
          ))}
        </nav>

        {/* Mobile Menu Icon */}
        <div className="flex md:hidden flex-1 justify-start">
          <button
            className="text-[#1A1A1A] cursor-pointer outline-none"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            {mobileMenuOpen ? <X strokeWidth={1.25} className="h-[28px] w-[28px]" /> : <Menu strokeWidth={1.25} className="h-[28px] w-[28px]" />}
          </button>
        </div>

        {/* Brand Logo - Center */}
        <div className="relative md:absolute md:left-1/2 md:-translate-x-1/2 z-10 flex-initial">
          <Link href="/" className="font-serif text-[15px] sm:text-[30px] font-bold tracking-[0.2em] sm:tracking-[0.3em] text-[#0A0A0A] hover:opacity-85 transition-all whitespace-nowrap">
            STARBOY
          </Link>
        </div>

        {/* Right Menu Controls */}
        <div className="flex items-center space-x-3 sm:space-x-6 text-xs font-semibold flex-1 md:flex-initial justify-end">
          
          {/* Currency Selector */}
          <div className="flex items-center">
            <div className="relative">
              <button
                onClick={() => setShowCurrencyDrop(!showCurrencyDrop)}
                className="hover:text-[#D4AF37] cursor-pointer tracking-[0.15em] sm:tracking-[0.2em] text-[10px] sm:text-[11.5px] font-bold border border-[#1A1A1A]/10 px-2 sm:px-3.5 py-1.5 sm:py-2 uppercase bg-white/50 hover:bg-white transition-all flex items-center gap-1"
              >
                {currency} <span className="text-[6px] sm:text-[7px] opacity-60">▼</span>
              </button>
              {showCurrencyDrop && (
                <div className="absolute right-0 mt-1.5 w-24 sm:w-28 border border-[#1A1A1A]/10 bg-white/95 backdrop-blur-md py-1 shadow-lg text-center z-50">
                  {currencies.map((curr) => (
                    <button
                      key={curr}
                      onClick={() => handleCurrencyChange(curr)}
                      className={`block w-full px-2 sm:px-3.5 py-1.5 sm:py-2 text-[10px] sm:text-[11.5px] font-bold tracking-widest hover:bg-[#0A0A0A] hover:text-[#F8F7F2] transition-colors uppercase cursor-pointer ${
                        currency === curr ? "text-[#D4AF37]" : "text-[#1A1A1A]"
                      }`}
                    >
                      {curr}
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* Icons Menu */}
          <div className="flex items-center space-x-2.5 sm:space-x-4">
            
            {/* Wishlist Link - Hidden on mobile */}
            <Link href="/account?tab=wishlist" className="hidden sm:block relative text-[#1A1A1A] hover:text-[#D4AF37] transition-colors">
              <Heart strokeWidth={1.25} className="h-[20px] w-[20px] sm:h-[23px] sm:w-[23px]" />
              {wishlist.length > 0 && (
                <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[#D4AF37] text-[9px] font-bold text-black">
                  {wishlist.length}
                </span>
              )}
            </Link>

            {/* Cart Link */}
            <Link href="/cart" className="relative text-[#1A1A1A] hover:text-[#D4AF37] transition-colors">
              <ShoppingBag strokeWidth={1.25} className="h-[20px] w-[20px] sm:h-[23px] sm:w-[23px]" />
              {cart.length > 0 && (
                <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[#0A0A0A] text-[9px] font-bold text-white">
                  {cart.reduce((acc, item) => acc + item.quantity, 0)}
                </span>
              )}
            </Link>

            {/* AI Assistant Toggle */}
            <button
              onClick={() => setIsAiOpen(true)}
              className="text-[#1A1A1A] hover:text-[#D4AF37] cursor-pointer transition-colors outline-none"
            >
              <MessageCircle strokeWidth={1.25} className="h-[20px] w-[20px] sm:h-[23px] sm:w-[23px] text-[#D4AF37]" />
            </button>

            {/* User Account Link - Hidden on mobile */}
            {user ? (
              <div className="hidden sm:flex items-center gap-2">
                <Link href="/account" className="text-[#1A1A1A] hover:text-[#D4AF37] transition-colors">
                  <User strokeWidth={1.25} className="h-[23px] w-[23px]" />
                </Link>
                <button onClick={logout} className="text-[10.5px] hover:underline opacity-60 cursor-pointer font-bold tracking-wider">
                  OUT
                </button>
              </div>
            ) : (
              <Link href="/account" className="hidden sm:block text-[#1A1A1A] hover:text-[#D4AF37] transition-colors">
                <User strokeWidth={1.25} className="h-[23px] w-[23px]" />
              </Link>
            )}

          </div>

        </div>

      </div>

      {/* Mobile Menu Slide */}
      {mobileMenuOpen && (
        <div className="absolute top-[83px] left-0 w-full border-b border-[#1A1A1A]/10 bg-[#F8F7F2] py-7 px-9 md:hidden z-50">
          <nav className="flex flex-col space-y-5 text-[14px] font-semibold tracking-widest">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                onClick={() => setMobileMenuOpen(false)}
                className="hover:text-[#D4AF37] transition-colors"
              >
                {link.name}
              </Link>
            ))}
            <Link
              href="/account"
              onClick={() => setMobileMenuOpen(false)}
              className="hover:text-[#D4AF37] transition-colors"
            >
              {t("nav.account")}
            </Link>

            {/* Mobile Currency Selector */}
            <div className="pt-7 border-t border-[#1A1A1A]/10 flex flex-col gap-5">
              <div className="flex items-center justify-between">
                <span className="text-[10.5px] font-bold text-neutral-400 uppercase tracking-widest">Select Currency:</span>
                <div className="flex gap-1.5">
                  {currencies.map((curr) => (
                    <button
                      key={curr}
                      onClick={() => handleCurrencyChange(curr)}
                      className={`text-[10.5px] border px-3 py-1.5 font-bold cursor-pointer ${
                        currency === curr
                          ? "bg-[#0A0A0A] text-[#F8F7F2] border-black"
                          : "bg-white border-[#1A1A1A]/20 text-neutral-600"
                      }`}
                    >
                      {curr}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
};