'use client'

import { useTranslations } from 'next-intl'
import Link from 'next/link'
import { Menu } from 'lucide-react'
import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function Navbar({ locale }: { locale: string }) {
  const t = useTranslations('nav')
  const [scrolled, setScrolled] = useState(false)
  const [mobileOpen, setMobileOpen] = useState(false)

  useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 50)
    window.addEventListener('scroll', handler, { passive: true })
    return () => window.removeEventListener('scroll', handler)
  }, [])

  return (
    <>
      <motion.nav
        initial={{ y: -20, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
        className={cn(
          'fixed top-0 inset-x-0 z-50 transition-all duration-500',
          scrolled ? 'bg-background/80 backdrop-blur-xl border-b border-border/40 shadow-sm'
                   : 'bg-transparent border-b border-transparent'
        )}
      >
        <div className="container mx-auto px-6 h-20 flex items-center justify-between">
          <Link href="/" className="font-heading text-xl md:text-2xl tracking-[0.2em] uppercase flex items-center gap-2">
            <span className="font-bold text-foreground">PIONEER</span>
            <span className="font-light text-primary">TRAVEL</span>
          </Link>
          
          <div className="hidden md:flex items-center space-x-10">
            {['home', 'about', 'tours', 'blog', 'contact'].map((item) => (
              <Link 
                key={item}
                href={item === 'home' ? '/' : `/${item}`} 
                className="text-xs font-medium tracking-[0.15em] uppercase text-foreground/80 hover:text-primary transition-colors duration-300 relative group"
              >
                {t(item)}
                <span className="absolute -bottom-2 left-0 w-0 h-[2px] bg-primary transition-all duration-300 group-hover:w-full rounded-full" />
              </Link>
            ))}
          </div>

          <div className="flex items-center space-x-6">
            <div className="hidden md:flex bg-card/50 backdrop-blur-md rounded-full p-1 border border-border/50">
              <Link href="/tr" className={cn("px-4 py-1.5 rounded-full text-xs tracking-wider font-bold transition-all duration-300", locale === 'tr' ? 'bg-primary text-primary-foreground shadow-md' : 'text-muted-foreground hover:text-foreground')}>TR</Link>
              <Link href="/en" className={cn("px-4 py-1.5 rounded-full text-xs tracking-wider font-bold transition-all duration-300", locale === 'en' ? 'bg-primary text-primary-foreground shadow-md' : 'text-muted-foreground hover:text-foreground')}>EN</Link>
            </div>
            
            <button 
              className="md:hidden text-foreground hover:text-primary transition"
              onClick={() => setMobileOpen(true)}
            >
              <Menu className="w-6 h-6" />
            </button>
          </div>
        </div>
      </motion.nav>

      <AnimatePresence>
        {mobileOpen && (
          <motion.div 
            initial={{ opacity: 0, x: '100%' }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: '100%' }}
            transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
            className="fixed inset-0 z-[60] bg-background/95 backdrop-blur-2xl flex flex-col justify-center items-center"
          >
            <button 
              className="absolute top-6 right-6 text-foreground text-sm tracking-widest uppercase font-bold hover:text-primary"
              onClick={() => setMobileOpen(false)}
            >
              Close
            </button>
            <div className="flex flex-col space-y-8 text-center">
              {['home', 'about', 'tours', 'blog', 'contact'].map((item) => (
                <Link 
                  key={item}
                  href={item === 'home' ? '/' : `/${item}`} 
                  onClick={() => setMobileOpen(false)}
                  className="font-heading text-3xl font-light text-foreground hover:text-primary hover:scale-105 transition-all"
                >
                  {t(item)}
                </Link>
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}