"use client";

import { useState, useEffect } from "react";
import { Menu, X, Search, ShoppingCart, User, Globe, Sun, Moon, ChevronDown } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";
import { useCartStore } from "@/store/cart";
// import { useSession, signOut } from "next-auth/react"; // Will add once NextAuth is configured

export default function Navbar({ dict, lang }: { dict: any, lang: string }) {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const pathname = usePathname();
  const { theme, setTheme, resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  
  // Cart state
  const totalItems = useCartStore((state) => state.getTotalItems());
  // Hydration fix for Zustand
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setMounted(true);
    setIsClient(true);
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const switchLang = lang === 'fr' ? 'ar' : 'fr';
  const switchLangPath = pathname.replace(`/${lang}`, `/${switchLang}`);

  return (
    <header
      className={`fixed top-0 w-full z-50 transition-all duration-300 ${
        isScrolled 
          ? "bg-white shadow-md border-b border-gray-200" 
          : "bg-white border-b border-gray-100"
      }`}
    >
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col md:flex-row justify-between items-center py-3 gap-4">
          
          {/* Logo & Mobile Menu */}
          <div className="flex justify-between w-full md:w-auto items-center flex-shrink-0">
            <Link href="/" className="flex items-center">
              <img src="/uploads/logo-dark.png" alt="K CREATION" className="h-8 md:h-12 w-auto max-w-[180px] md:max-w-[250px] object-contain" />
            </Link>

            <div className="md:hidden flex items-center gap-4">
              <Link href="/cart" className="relative text-black p-2">
                <ShoppingCart className="w-6 h-6" />
                {isClient && totalItems > 0 && (
                  <span className="absolute top-0 right-0 bg-brand-accent text-black text-[10px] font-bold w-5 h-5 flex items-center justify-center rounded-full">
                    {totalItems}
                  </span>
                )}
              </Link>
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="text-black"
              >
                {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>
          </div>

          {/* Search Bar */}
          <div className="flex-grow w-full md:w-auto max-w-2xl md:px-8 order-3 md:order-2">
            <div className="flex w-full relative shadow-sm rounded-md overflow-hidden border border-gray-300 focus-within:border-brand-accent transition-colors">
              <input 
                type="text" 
                placeholder={dict.nav?.searchPlaceholder || 'Rechercher'} 
                className="w-full py-2.5 px-4 bg-gray-50 text-black focus:outline-none"
              />
              <button className="bg-brand-accent hover:bg-red-700 text-white px-6 py-2.5 transition-colors flex items-center justify-center">
                <Search className="w-5 h-5" />
              </button>
            </div>
          </div>

          {/* User Actions & Cart */}
          <div className="hidden md:flex items-center gap-6 flex-shrink-0 order-2 md:order-3">
            
            <Link href={switchLangPath} className="flex items-center gap-1 text-sm font-bold text-gray-700 hover:text-brand-accent transition-colors">
              <Globe className="w-4 h-4" />
              <span className="uppercase font-semibold">{lang === 'fr' ? 'العربية' : 'Français'}</span>
            </Link>

            <Link href="/login" className="flex items-center gap-2 text-gray-700 hover:text-brand-accent transition-colors group">
              <User className="w-5 h-5" />
              <div className="flex flex-col items-start leading-tight">
                <span className="text-xs text-gray-500 group-hover:text-brand-accent">{dict.nav?.account || 'Compte'}</span>
                <span className="text-sm font-bold">{dict.nav?.login || 'Connexion'}</span>
              </div>
            </Link>

            <Link href="/cart" className="relative flex items-center gap-2 text-gray-700 hover:text-brand-accent transition-colors group bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">
              <div className="relative">
                <ShoppingCart className="w-6 h-6" />
                {isClient && totalItems > 0 && (
                  <span className="absolute -top-2 -right-2 bg-brand-accent text-black text-[10px] font-bold w-5 h-5 flex items-center justify-center rounded-full shadow-sm">
                    {totalItems}
                  </span>
                )}
              </div>
              <span className="text-sm font-bold ml-1">{dict.nav?.cart || 'Panier'}</span>
            </Link>

          </div>
        </div>

        {/* Secondary Navigation Bar */}
        <div className="hidden md:flex items-center justify-between py-3 border-t border-gray-100 overflow-visible w-full">
          {/* Shredder By Application */}
          <div className="relative group">
            <button className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-brand-accent transition-colors whitespace-nowrap pb-2">
              Shredder By Application <ChevronDown className="w-4 h-4 text-brand-accent" />
            </button>
            <div className="absolute top-full left-0 mt-0 w-64 bg-white border border-gray-100 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
              <div className="absolute -top-2 left-6 w-4 h-4 bg-white border-t border-l border-gray-100 transform rotate-45"></div>
              <div className="relative bg-white py-2 z-10">
                {[
                  "Autofeed Shredders",
                  "Personal & Small Office Shredders",
                  "Medium Office Shredders",
                  "Large Office Shredders",
                  "Heavy Duty Shredders",
                  "Industrial Shredders",
                  "High Security Shredders",
                  "Cardboard Shredders",
                  "Digital Media Shredders",
                  "Casino Shredders"
                ].map((item, i) => (
                  <Link key={i} href="#" className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-brand-accent transition-colors">
                    {item}
                  </Link>
                ))}
              </div>
            </div>
          </div>

          {/* Shredder Line */}
          <div className="relative group">
            <button className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-brand-accent transition-colors whitespace-nowrap pb-2">
              Shredder Line <ChevronDown className="w-4 h-4" />
            </button>
            <div className="absolute top-full left-0 mt-0 w-56 bg-white border border-gray-100 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
              <div className="absolute -top-2 left-6 w-4 h-4 bg-white border-t border-l border-gray-100 transform rotate-45"></div>
              <div className="relative bg-white py-2 z-10">
                {[
                  "Kobra Classic Line",
                  "Kobra Touch Screen Line",
                  "Kobra Industrial Line",
                  "Kobra FlexPack"
                ].map((item, i) => (
                  <Link key={i} href="#" className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-brand-accent transition-colors">
                    {item}
                  </Link>
                ))}
              </div>
            </div>
          </div>

          {/* By Cut Type */}
          <div className="relative group">
            <button className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-brand-accent transition-colors whitespace-nowrap pb-2">
              By Cut Type <ChevronDown className="w-4 h-4" />
            </button>
            <div className="absolute top-full left-0 mt-0 w-56 bg-white border border-gray-100 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
              <div className="absolute -top-2 left-6 w-4 h-4 bg-white border-t border-l border-gray-100 transform rotate-45"></div>
              <div className="relative bg-white py-2 z-10">
                {[
                  "Straight Cut",
                  "Cross Cut",
                  "High Security Cross Cut"
                ].map((item, i) => (
                  <Link key={i} href="#" className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-brand-accent transition-colors">
                    {item}
                  </Link>
                ))}
              </div>
            </div>
          </div>

          {/* By Security Level */}
          <div className="relative group">
            <button className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-brand-accent transition-colors whitespace-nowrap pb-2">
              By Security Level <ChevronDown className="w-4 h-4" />
            </button>
            <div className="absolute top-full left-0 mt-0 w-48 bg-white border border-gray-100 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
              <div className="absolute -top-2 left-6 w-4 h-4 bg-white border-t border-l border-gray-100 transform rotate-45"></div>
              <div className="relative bg-white py-2 z-10">
                {[
                  "Security Level P-1",
                  "Security Level P-2",
                  "Security Level P-3",
                  "Security Level P-4",
                  "Security Level P-5",
                  "Security Level P-6",
                  "Security Level P-7"
                ].map((item, i) => (
                  <Link key={i} href="#" className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-brand-accent transition-colors">
                    {item}
                  </Link>
                ))}
              </div>
            </div>
          </div>

          {/* Supplies & Accessories */}
          <div className="relative group">
            <button className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-brand-accent transition-colors whitespace-nowrap pb-2">
              Supplies & Accessories <ChevronDown className="w-4 h-4" />
            </button>
            <div className="absolute top-full left-0 mt-0 w-56 bg-white border border-gray-100 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
              <div className="absolute -top-2 left-6 w-4 h-4 bg-white border-t border-l border-gray-100 transform rotate-45"></div>
              <div className="relative bg-white py-2 z-10">
                <Link href="#" className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-brand-accent transition-colors">Shredder Oil</Link>
                <Link href="#" className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-brand-accent transition-colors">Waste Bags</Link>
              </div>
            </div>
          </div>

          {/* Website Exclusive Sale */}
          <Link href="#" className="text-sm font-bold text-red-500 hover:text-red-700 transition-colors whitespace-nowrap pb-2">
            Website Exclusive Sale
          </Link>

          {/* Resources */}
          <div className="relative group">
            <button className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-brand-accent transition-colors whitespace-nowrap pb-2">
              Resources <ChevronDown className="w-4 h-4" />
            </button>
            <div className="absolute top-full left-0 mt-0 w-48 bg-white border border-gray-100 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
              <div className="absolute -top-2 left-6 w-4 h-4 bg-white border-t border-l border-gray-100 transform rotate-45"></div>
              <div className="relative bg-white py-2 z-10">
                <Link href="/blog" className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-brand-accent transition-colors">Blog</Link>
                <Link href="#" className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-brand-accent transition-colors">Manuals</Link>
              </div>
            </div>
          </div>

          {/* Contact Us */}
          <Link href="/contact" className="text-sm font-medium text-gray-700 hover:text-brand-accent transition-colors whitespace-nowrap pb-2">
            Contact Us
          </Link>
        </div>
      </div>

      {/* Mobile Navigation */}
      <AnimatePresence>
        {mobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="md:hidden bg-background border-t border-border overflow-hidden"
          >
            <div className="px-4 pt-2 pb-6 space-y-1">
              <Link href="/login" className="block px-3 py-3 text-base font-bold text-foreground border-b border-border mb-2 flex items-center gap-2">
                <User className="w-5 h-5" /> {dict.nav?.login || 'Connexion / Inscription'}
              </Link>
              <Link href={switchLangPath} className="block px-3 py-2 text-base font-bold text-brand-accent border-b border-border mb-2 flex items-center gap-2">
                <Globe className="w-5 h-5" /> Traduire vers {lang === 'fr' ? 'العربية' : 'Français'}
              </Link>
              <Link href="#products" className="block px-3 py-2 text-base font-medium text-gray-500 hover:text-brand-accent">{dict.nav?.allCategories || 'Toutes les catégories'}</Link>
              <Link href="#" className="block px-3 py-2 text-base font-medium text-gray-500 hover:text-brand-accent">{dict.nav?.highSecurity || 'Haute Sécurité'}</Link>
              <Link href="/blog" className="block px-3 py-2 text-base font-medium text-gray-500 hover:text-brand-accent">{dict.nav?.blog || 'Blog'}</Link>
              <Link href="#" className="block px-3 py-2 text-base font-medium text-gray-500 hover:text-brand-accent">{dict.nav?.customerService || 'Service Client'}</Link>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  );
}
