'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useEffect, useState } from 'react'
import { nav, site } from '@/lib/site'
import { IconClose, IconMenu } from './Icons'

export default function Header() {
  const pathname = usePathname()
  const [open, setOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)

  // az eredeti main.js a görgetéskor sötét sávot tett a menü mögé
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 100)
    onScroll()
    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [])

  useEffect(() => setOpen(false), [pathname])

  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : ''
    return () => {
      document.body.style.overflow = ''
    }
  }, [open])

  const isActive = (href: string) =>
    href === '/' ? pathname === '/' : pathname.startsWith(href)

  return (
    <>
      <header className="site-navbar">
        <div className="navbar-inner">
          <h1 className="your-wedding-text-h1">
            <strong>{site.tagline}</strong>
          </h1>
        </div>
      </header>

      <nav
        className={`site-navigation${scrolled ? ' site-navigation-back' : ''}`}
        aria-label="Főmenü"
      >
        <button
          type="button"
          className="menu-toggle"
          aria-label="Menü megnyitása"
          aria-expanded={open}
          onClick={() => setOpen(true)}
        >
          <IconMenu />
        </button>
        <ul className="site-menu">
          {nav.map((item) => (
            <li key={item.href} className={isActive(item.href) ? 'active' : undefined}>
              <Link href={item.href}>{item.label}</Link>
            </li>
          ))}
        </ul>
      </nav>

      {open && (
        <button
          type="button"
          className="menu-backdrop"
          aria-label="Menü bezárása"
          onClick={() => setOpen(false)}
        />
      )}
      <div className={`site-mobile-menu${open ? ' is-open' : ''}`} aria-hidden={!open}>
        <button
          type="button"
          className="mobile-menu-close"
          aria-label="Menü bezárása"
          onClick={() => setOpen(false)}
        >
          <IconClose />
        </button>
        <ul>
          {nav.map((item) => (
            <li key={item.href}>
              <Link href={item.href} tabIndex={open ? 0 : -1}>
                {item.label}
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </>
  )
}