'use client';

import { useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import Image from 'next/image';
import { ChevronDown, Cpu, Zap, Activity, Gauge, Settings, Menu, X } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { products } from '@/lib/products';
import styles from './Navbar.module.css';

const icons = {
  'kpro': <Cpu size={16} />,
  'canflash': <Zap size={16} />,
  'precan': <Activity size={16} />,
  's300': <Gauge size={16} />,
  'map-sensor': <Settings size={16} />
};

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false);
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
  const pathname = usePathname();

  // Close menu when clicking a link
  const closeMenu = () => setIsOpen(false);

  // Helper to determine if link is active
  const isActive = (path: string) => pathname.startsWith(path);

  // Prevent scrolling when menu is open
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [isOpen]);

  return (
    <nav className={styles.nav}>
      <div className={styles.container}>
        <div className={styles.logo}>
          <Link href="/">
            <Image src="/hondavert_logo.png" alt="HondaVert" width={140} height={40} className={styles.logoImg} priority />
          </Link>
        </div>
        
        {/* Desktop Links */}
        <div className={styles.links}>
          <Link href="/about" className={isActive('/about') ? styles.active : ''}>ABOUT</Link>
          <div className={styles.navItemDropdown}>
            <Link href="/products" className={isActive('/products') ? styles.active : ''}>
              PRODUCTS <ChevronDown size={14} className={styles.chevron} />
            </Link>
            <div className={styles.submenu}>
              <div className={styles.submenuGrid}>
                {products.map((product) => (
                  <Link key={product.id} href={`/products/${product.id}`} className={styles.submenuItem}>
                    <div className={styles.submenuIcon}>
                      {icons[product.id as keyof typeof icons] || <Cpu size={16}/>}
                    </div>
                    <div className={styles.submenuContent}>
                      <span className={styles.submenuTitle}>{product.name}</span>
                      <span className={styles.submenuSubtitle}>{product.subtitle}</span>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          </div>
          <Link href="/blog" className={isActive('/blog') ? styles.active : ''}>BLOG</Link>
          <Link href="/contact" className={pathname === '/contact' ? styles.active : ''}>CONTACT</Link>
        </div>

        <div className={styles.actions}>
          <button className={styles.tuningBtn}>TUNING CONSOLE</button>
          
          <button 
            className={styles.mobileMenuBtn} 
            onClick={() => setIsOpen(!isOpen)}
            aria-label="Toggle Menu"
          >
            {isOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>

      {/* Mobile Menu Overlay */}
      <AnimatePresence>
        {isOpen && (
          <motion.div 
            className={styles.mobileOverlay}
            initial={{ opacity: 0, x: '100%' }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: '100%' }}
            transition={{ type: 'spring', damping: 25, stiffness: 200 }}
          >
            <div className={styles.mobileMenuHeader}>
               <Image src="/hondavert_logo.png" alt="HondaVert" width={120} height={35} priority />
               <button onClick={closeMenu} className={styles.closeBtn}><X size={24} /></button>
            </div>
            
            <div className={styles.mobileNavLinks}>
              <Link href="/about" onClick={closeMenu}>ABOUT</Link>
              
              <div className={styles.mobileDropdown}>
                <button 
                  onClick={() => setActiveDropdown(activeDropdown === 'products' ? null : 'products')}
                  className={styles.mobileDropdownBtn}
                >
                  PRODUCTS <ChevronDown size={14} style={{ transform: activeDropdown === 'products' ? 'rotate(180deg)' : 'none' }} />
                </button>
                
                <AnimatePresence>
                  {activeDropdown === 'products' && (
                    <motion.div 
                      className={styles.mobileSubmenu}
                      initial={{ height: 0, opacity: 0 }}
                      animate={{ height: 'auto', opacity: 1 }}
                      exit={{ height: 0, opacity: 0 }}
                    >
                      {products.map((product) => (
                        <Link 
                          key={product.id} 
                          href={`/products/${product.id}`} 
                          onClick={closeMenu}
                          className={styles.mobileSubmenuItem}
                        >
                          <div className={styles.mobileSubmenuIcon}>
                            {icons[product.id as keyof typeof icons] || <Cpu size={14}/>}
                          </div>
                          <span>{product.name}</span>
                        </Link>
                      ))}
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
              
              <Link href="/blog" onClick={closeMenu}>BLOG</Link>
              <Link href="/contact" onClick={closeMenu}>CONTACT</Link>
            </div>

            <div className={styles.mobileFooter}>
              <button className={styles.mobileTuningBtn}>TUNING CONSOLE</button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}
