'use client'

import { useState, useEffect } from 'react'
import { useTranslations } from 'next-intl'
import Link from 'next/link'
import Image from 'next/image'
import { Menu, X, Phone } from 'lucide-react'
import { cn } from '@/lib/utils'
import { SITE } from '@/lib/constants'

interface NavigationProps {
  locale: string
}

export default function Navigation({ locale }: NavigationProps) {
  const t = useTranslations('nav')
  const [menuOpen, setMenuOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      // Hero section 500vh — navbar scroll bittikten sonra görünür
      const heroEnd = window.innerHeight * 4.5
      setVisible(window.scrollY > heroEnd)
      setScrolled(window.scrollY > heroEnd + 80)
    }
    window.addEventListener('scroll', handleScroll, { passive: true })
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  const otherLocale = locale === 'tr' ? 'en' : 'tr'

  const links = [
    { key: 'about', href: '#proje' },
    { key: 'location', href: '#lokasyon' },
    { key: 'units', href: '#daireler' },
    { key: 'gallery', href: '#galeri' },
    { key: 'contact', href: '#iletisim' },
  ]

  return (
    <header
      className={cn(
        'fixed top-0 left-0 right-0 z-50 transition-all duration-500',
        visible ? 'translate-y-0 opacity-100' : '-translate-y-full opacity-0',
        scrolled
          ? 'bg-vesta-dark/95 backdrop-blur-md py-3 shadow-lg'
          : 'bg-transparent py-5'
      )}
    >
      <div className="container mx-auto px-6 flex items-center justify-between">
        {/* Logo */}
        <Link href={`/${locale}`} className="flex items-center">
          <Image
            src={SITE.logoUrl}
            alt={SITE.name}
            width={160}
            height={40}
            priority
            className="h-8 w-auto object-contain"
          />
        </Link>

        {/* Desktop nav */}
        <nav className="hidden md:flex items-center gap-8">
          {links.map((link) => (
            <a
              key={link.key}
              href={link.href}
              className="text-white/80 hover:text-white text-sm tracking-wide transition-colors duration-200"
            >
              {t(link.key as keyof ReturnType<typeof t>)}
            </a>
          ))}
        </nav>

        {/* Right side */}
        <div className="hidden md:flex items-center gap-4">
          {/* Dil seçici */}
          <Link
            href={`/${otherLocale}`}
            aria-label={`Switch language to ${otherLocale === 'tr' ? 'Turkish' : 'English'}`}
            className="text-white/60 hover:text-white text-xs tracking-widest uppercase transition-colors"
          >
            {otherLocale}
          </Link>

          {/* Telefon */}
          <a
            href={SITE.phoneHref}
            className="flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-full text-sm tracking-wide transition-all duration-200 active:scale-[0.98]"
          >
            <Phone className="w-3.5 h-3.5" />
            {t('phone')}
          </a>
        </div>

        {/* Mobile hamburger */}
        <button
          className="md:hidden text-white p-2"
          onClick={() => setMenuOpen(!menuOpen)}
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          aria-controls="mobile-menu"
        >
          {menuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
        </button>
      </div>

      {/* Mobile menu */}
      {menuOpen && (
        <div id="mobile-menu" className="md:hidden bg-vesta-dark/98 backdrop-blur-md border-t border-white/10">
          <div className="container mx-auto px-6 py-6 flex flex-col gap-4">
            {links.map((link) => (
              <a
                key={link.key}
                href={link.href}
                onClick={() => setMenuOpen(false)}
                className="text-white/80 hover:text-white text-base py-2 border-b border-white/10 transition-colors"
              >
                {t(link.key as keyof ReturnType<typeof t>)}
              </a>
            ))}
            <div className="flex items-center justify-between pt-2">
              <a href={SITE.phoneHref} className="text-white flex items-center gap-2">
                <Phone className="w-4 h-4" />
                {t('phone')}
              </a>
              <Link
                href={`/${otherLocale}`}
                className="text-white/50 uppercase text-sm"
                onClick={() => setMenuOpen(false)}
              >
                {otherLocale}
              </Link>
            </div>
          </div>
        </div>
      )}
    </header>
  )
}