'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { usePathname } from 'next/navigation'
import { motion, AnimatePresence } from 'framer-motion'
import { cn } from '@/lib/utils'

interface NavItem {
  label: string
  href: string
  children?: NavItem[]
}

interface NavigationProps {
  items: NavItem[]
  logo?: string
  transparent?: boolean
}

export function Navigation({ items, logo, transparent = false }: NavigationProps) {
  const [scrolled, setScrolled] = useState(false)
  const [mobileOpen, setMobileOpen] = useState(false)
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null)
  const pathname = usePathname()

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

  const isTransparent = transparent && !scrolled

  return (
    <nav
      className={cn(
        'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
        isTransparent
          ? 'bg-transparent border-b-0'
          : 'bg-white border-b border-light',
        scrolled ? 'min-h-[50px]' : 'min-h-[75px]'
      )}
    >
      <div className="max-w-[1200px] mx-auto px-4 flex items-center justify-between h-full">
        {/* Logo */}
        <Link href="/" className="py-[15px] border-none">
          {logo ? (
            <Image
              src={logo}
              alt="Logo"
              width={150}
              height={40}
              className={cn(
                'h-auto transition-all duration-300',
                scrolled ? 'max-h-[30px]' : 'max-h-[40px]'
              )}
            />
          ) : (
            <span
              className={cn(
                'font-heading font-bold text-[1.2em] tracking-[3px] uppercase',
                isTransparent ? 'text-white' : 'text-dark'
              )}
            >
              PORWOLL
            </span>
          )}
        </Link>

        {/* Desktop Navigation */}
        <div className="hidden lg:flex items-center gap-8">
          {items.map((item) => (
            <div
              key={item.href}
              className="relative"
              onMouseEnter={() => item.children && setActiveDropdown(item.href)}
              onMouseLeave={() => setActiveDropdown(null)}
            >
              <Link
                href={item.href}
                className={cn(
                  'font-heading uppercase text-[0.8em] tracking-[2px] transition-colors duration-500 border-none',
                  isTransparent
                    ? 'text-gray hover:text-white'
                    : 'text-gray-light hover:text-dark',
                  pathname === item.href && (isTransparent ? 'text-white' : 'text-dark')
                )}
              >
                {item.label}
              </Link>

              {/* Dropdown */}
              <AnimatePresence>
                {item.children && activeDropdown === item.href && (
                  <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: 10 }}
                    transition={{ duration: 0.2 }}
                    className="absolute top-full left-0 mt-3 py-5 pb-2.5 min-w-[200px] bg-white/95 border border-light"
                  >
                    {item.children.map((child) => (
                      <Link
                        key={child.href}
                        href={child.href}
                        className={cn(
                          'block px-[25px] py-[11px] pr-[40px]',
                          'font-body text-[0.9em] tracking-[0.5px] leading-[0.8em]',
                          'border-l-[3px] border-transparent',
                          'transition-all duration-300',
                          'hover:pl-[35px] hover:pr-[30px] hover:bg-dark/5 hover:border-l-dark',
                          'text-gray hover:text-dark border-b-0'
                        )}
                      >
                        {child.label}
                      </Link>
                    ))}
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          ))}
        </div>

        {/* Mobile Menu Button */}
        <button
          className="lg:hidden p-2"
          onClick={() => setMobileOpen(!mobileOpen)}
          aria-label="Toggle menu"
        >
          <div className={cn('w-6 h-0.5 mb-1.5 transition-all', isTransparent ? 'bg-white' : 'bg-dark')} />
          <div className={cn('w-6 h-0.5 mb-1.5 transition-all', isTransparent ? 'bg-white' : 'bg-dark')} />
          <div className={cn('w-6 h-0.5 transition-all', isTransparent ? 'bg-white' : 'bg-dark')} />
        </button>
      </div>

      {/* Mobile Menu */}
      <AnimatePresence>
        {mobileOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            className="lg:hidden bg-white border-t border-light"
          >
            <div className="py-4">
              {items.map((item) => (
                <div key={item.href}>
                  <Link
                    href={item.href}
                    className="block px-4 py-3 font-heading uppercase text-[0.85em] tracking-[2px] text-gray-light hover:text-dark border-none"
                    onClick={() => setMobileOpen(false)}
                  >
                    {item.label}
                  </Link>
                  {item.children?.map((child) => (
                    <Link
                      key={child.href}
                      href={child.href}
                      className="block px-8 py-2 text-[0.85em] text-gray hover:text-dark border-none"
                      onClick={() => setMobileOpen(false)}
                    >
                      {child.label}
                    </Link>
                  ))}
                </div>
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  )
}
