'use client'

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

const NAV = [
  { href: '/urunler', key: 'products' },
  { href: '/projeler', key: 'projects' },
  { href: '/hakkimizda', key: 'about' },
  { href: '/blog', key: 'blog' },
  { href: '/iletisim', key: 'contact' },
] as const

export default function Header({ locale = 'tr' }: { locale?: 'tr' | 'en' }) {
  const [open, setOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)
  const t = useTranslations('nav')
  const pathname = usePathname()
  const router = useRouter()

  useEffect(() => {
    function onScroll() { setScrolled(window.scrollY > 24) }
    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [])

  const panelUrl = process.env.NEXT_PUBLIC_PANEL_URL ?? 'https://panel.peyzajart.com'

  function switchLocale(next: 'tr' | 'en') {
    if (next !== locale) router.replace(pathname, { locale: next })
  }

  return (
    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${scrolled ? 'bg-dark/95 backdrop-blur-sm shadow-lg' : 'bg-dark'}`}>
      <div className="max-w-7xl mx-auto px-6 md:px-10 flex items-center justify-between h-16 md:h-20">
        {/* Logo */}
        <Link href="/" className="font-display text-xl md:text-2xl tracking-tight text-cream">
          Peyzaj<span className="text-orange">Art</span>
        </Link>

        {/* Desktop nav */}
        <nav className="hidden md:flex items-center gap-7">
          {NAV.map(item => (
            <Link key={item.href} href={item.href}
              className={`font-body text-xs tracking-widest uppercase transition-colors ${
                pathname.startsWith(item.href) ? 'text-orange' : 'text-cream/60 hover:text-cream'
              }`}>
              {t(item.key)}
            </Link>
          ))}
        </nav>

        {/* Right */}
        <div className="flex items-center gap-4">
          <LocaleSwitcher locale={locale} onSwitch={switchLocale} />
          <a href={panelUrl}
            className="hidden md:inline-flex px-5 py-2 rounded-lg bg-orange text-cream font-body text-xs tracking-widest uppercase hover:bg-orange-hover transition-colors">
            {t('dealer')}
          </a>
          <button onClick={() => setOpen(v => !v)} className="md:hidden p-2 text-cream" aria-label="Menü">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
              {open
                ? <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
                : <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5" />}
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile menu */}
      {open && (
        <div className="md:hidden bg-dark border-t border-white/10">
          <nav className="flex flex-col px-6 py-5 gap-4">
            {NAV.map(item => (
              <Link key={item.href} href={item.href}
                onClick={() => setOpen(false)}
                className="font-body text-xs tracking-widest uppercase text-cream/70 hover:text-cream transition-colors">
                {t(item.key)}
              </Link>
            ))}
            <a href={panelUrl}
              className="mt-2 px-5 py-2.5 rounded-lg bg-orange text-cream font-body text-xs tracking-widest uppercase text-center hover:bg-orange-hover transition-colors">
              {t('dealer')}
            </a>
          </nav>
        </div>
      )}
    </header>
  )
}

function LocaleSwitcher({ locale, onSwitch }: { locale: 'tr' | 'en'; onSwitch: (l: 'tr' | 'en') => void }) {
  return (
    <div className="flex items-center gap-1 font-body text-xs tracking-widest uppercase">
      {(['tr', 'en'] as const).map((l, i) => (
        <span key={l} className="flex items-center">
          {i > 0 && <span className="text-cream/20 mr-1">/</span>}
          <button
            onClick={() => onSwitch(l)}
            className={`transition-colors ${l === locale ? 'text-orange' : 'text-cream/50 hover:text-cream'}`}
            aria-current={l === locale}>
            {l}
          </button>
        </span>
      ))}
    </div>
  )
}