'use client'

import { Link, usePathname, useRouter } from '@/i18n/routing'
import { useTranslations, useLocale } from 'next-intl'
import { useState } from 'react'

export function Header() {
  const t = useTranslations('nav')
  const locale = useLocale()
  const pathname = usePathname()
  const router = useRouter()
  const [isOpen, setIsOpen] = useState(false)

  const toggleLanguage = () => {
    const nextLang = locale === 'tr' ? 'en' : 'tr'
    router.replace(pathname, { locale: nextLang })
  }

  return (
    <header className="bg-surface/90 backdrop-blur-md w-full top-0 sticky z-50 border-b border-outline-variant/30 shadow-sm">
      <nav className="flex justify-between items-center w-full px-[var(--spacing-gutter)] py-4 max-w-[var(--spacing-container-max)] mx-auto">
        <Link href="/" className="font-headline-md text-headline-md text-on-surface tracking-tighter hover:text-tertiary transition-colors">
          Teras
        </Link>
        
        <div className="hidden md:flex items-center gap-8">
          <Link href="/" className={`font-label-caps text-label-caps uppercase ${pathname === '/' ? 'text-secondary font-bold border-b-2 border-secondary pb-1' : 'text-on-surface-variant hover:text-secondary transition-colors duration-300'}`}>
            {t('home')}
          </Link>
          <Link href="/menu" className={`font-label-caps text-label-caps uppercase ${pathname === '/menu' ? 'text-secondary font-bold border-b-2 border-secondary pb-1' : 'text-on-surface-variant hover:text-secondary transition-colors duration-300'}`}>
            {t('menu')}
          </Link>
          <Link href="/galeri" className={`font-label-caps text-label-caps uppercase ${pathname === '/galeri' ? 'text-secondary font-bold border-b-2 border-secondary pb-1' : 'text-on-surface-variant hover:text-secondary transition-colors duration-300'}`}>
            {t('gallery')}
          </Link>
          <button onClick={toggleLanguage} className="font-label-caps text-label-caps text-on-surface-variant hover:text-tertiary transition-colors uppercase">
            {locale}
          </button>
        </div>

        <div className="flex items-center gap-4">
          <Link href="/rezervasyon" className="bg-secondary-container text-on-secondary-container px-6 py-2 font-label-caps text-label-caps uppercase tracking-widest hover:scale-95 transition-all duration-200 hidden md:inline-block">
            {t('reservation')}
          </Link>
          
          {/* Mobile menu button */}
          <div className="md:hidden flex items-center gap-4">
            <button onClick={toggleLanguage} className="font-label-caps text-label-caps text-on-surface-variant uppercase">
              {locale}
            </button>
            <button
              onClick={() => setIsOpen(!isOpen)}
              className="text-on-surface-variant hover:text-secondary"
            >
              <span className="material-symbols-outlined">{isOpen ? 'close' : 'menu'}</span>
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile Menu */}
      {isOpen && (
        <div className="md:hidden bg-surface border-b border-outline-variant/30">
          <div className="px-4 pt-2 pb-4 space-y-2 flex flex-col">
            <Link href="/" onClick={() => setIsOpen(false)} className="font-label-caps text-label-caps text-on-surface hover:text-secondary py-2 uppercase">{t('home')}</Link>
            <Link href="/menu" onClick={() => setIsOpen(false)} className="font-label-caps text-label-caps text-on-surface hover:text-secondary py-2 uppercase">{t('menu')}</Link>
            <Link href="/galeri" onClick={() => setIsOpen(false)} className="font-label-caps text-label-caps text-on-surface hover:text-secondary py-2 uppercase">{t('gallery')}</Link>
            <Link href="/rezervasyon" onClick={() => setIsOpen(false)} className="bg-secondary-container text-on-secondary-container px-6 py-2 font-label-caps text-label-caps uppercase tracking-widest text-center mt-2">{t('reservation')}</Link>

          </div>
        </div>
      )}
    </header>
  )
}