'use client'

import { useEffect, useState } from 'react'
import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation'
import { ThemeToggle } from '@/components/theme-toggle'
import LanguageSwitcher from '@/components/layout/LanguageSwitcher'
import { GlitchButton } from '@/components/effects/glitch-button'

export function Navbar() {
  const t = useTranslations('Navigation')
  const [isVisible, setIsVisible] = useState(true)
  const [lastScrollY, setLastScrollY] = useState(0)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY

      if (currentScrollY < 10) {
        setIsVisible(true)
      } else if (currentScrollY > lastScrollY) {
        setIsVisible(false)
        setIsMobileMenuOpen(false)
      } else {
        setIsVisible(true)
      }

      setLastScrollY(currentScrollY)
    }

    window.addEventListener('scroll', handleScroll, { passive: true })
    return () => window.removeEventListener('scroll', handleScroll)
  }, [lastScrollY])

  return (
    <nav
      className={`border-b-4 border-slate-700 bg-slate-900 dark:bg-zinc-950 sticky top-0 z-50 ${isVisible ? 'navbar-visible' : 'navbar-hidden'}`}
    >
      <div className="max-w-7xl mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-8">
            <Link
              href="/"
              className="font-mono text-sm uppercase tracking-wider transition-colors cursor-pointer"
              style={{ color: 'var(--neon-cyan)' }}
            >
              &lt; {t('home')}
            </Link>
            <span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider hidden md:block">
              // <span style={{ color: 'var(--neon-pink)' }}>{t('blog')}</span> ARCHIVE
            </span>
          </div>

          <div className="hidden md:flex items-center gap-6">
            <Link
              href="/about"
              className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
            >
              [{t('about')}]
            </Link>
            <Link
              href="/blog"
              className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
            >
              [{t('blog')}]
            </Link>
            <ThemeToggle />
            <LanguageSwitcher />
          </div>

          <div className="md:hidden flex items-center gap-4">
            <GlitchButton
              variant="subtle"
              glitchColor="cyan"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="font-mono text-sm uppercase tracking-wider px-4 py-2 border-4 border-slate-700 bg-slate-800 dark:bg-zinc-900 text-zinc-100 dark:text-zinc-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500"
              aria-label="Toggle mobile menu"
              aria-expanded={isMobileMenuOpen}
            >
              // {isMobileMenuOpen ? 'CLOSE' : 'MENU'}
            </GlitchButton>
          </div>
        </div>

        {isMobileMenuOpen && (
          <div className="md:hidden mt-4 pt-4 border-t-4 border-slate-700">
            <div className="flex flex-col gap-4">
              <Link
                href="/about"
                className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer px-4 py-2 border-2 border-slate-700"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                [{t('about')}]
              </Link>
              <Link
                href="/blog"
                className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer px-4 py-2 border-2 border-slate-700"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                [{t('blog')}]
              </Link>
              <div className="flex items-center gap-4 px-4 py-2">
                <ThemeToggle />
                <LanguageSwitcher />
              </div>
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}