'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useEffect, useState } from 'react'
import { useLang } from '@/context/LangContext'
import LanguageSwitcher from '@/components/LanguageSwitcher'

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false)
  const [menuOpen, setMenuOpen] = useState(false)
  const pathname = usePathname()
  const { lang, t } = useLang()
  const localeHome = lang === 'de' ? '/' : `/${lang}`
  const homeHref = (hash: string) => (pathname === localeHome ? hash : `${localeHome}${hash}`)
  const isSubpage = pathname !== localeHome
  const isDevelopersPage = pathname === '/developers'

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

  return (
    <nav className={`navbar${scrolled || isSubpage ? ' scrolled' : ''}`} id="navbar" role="navigation" aria-label="Main navigation">
      <div className="container">
        <Link href={localeHome} className="nav-logo" aria-label="GreenLens Home">
          GREENLENS
        </Link>

        <div className={`nav-links${menuOpen ? ' nav-links--open' : ''}`}>
          <a href={homeHref('#features')} onClick={() => setMenuOpen(false)}>{t.nav.features}</a>
          <a href={homeHref('#intelligence')} onClick={() => setMenuOpen(false)}>{t.nav.tech}</a>
          <a href={homeHref('#faq')} onClick={() => setMenuOpen(false)}>FAQ</a>
          <a href={homeHref('#how')} onClick={() => setMenuOpen(false)}>{t.nav.how}</a>
          <Link href="/developers" className={isDevelopersPage ? 'nav-link--active' : undefined} onClick={() => setMenuOpen(false)}>Developers</Link>
          <Link href="/support" onClick={() => setMenuOpen(false)}>Support</Link>
          <a href={homeHref('#cta')} onClick={() => setMenuOpen(false)}>{t.nav.download}</a>

          <LanguageSwitcher />

          <a href={homeHref('#cta')} className="nav-cta" onClick={() => setMenuOpen(false)}>{t.nav.cta}</a>
        </div>

        <button
          className="nav-hamburger"
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((o) => !o)}
        >
          <span />
          <span />
          <span />
        </button>
      </div>

      <style jsx>{`
        .nav-links--open {
          display: flex !important;
          flex-direction: column;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: rgba(19,31,22,0.97);
          backdrop-filter: blur(18px);
          padding: 1.5rem 2rem;
          gap: 1rem;
          border-top: 1px solid rgba(244,241,232,0.08);
        }
      `}</style>
    </nav>
  )
}