'use client';

import {Menu, X} from 'lucide-react';
import Link from 'next/link';
import {useTranslations} from 'next-intl';
import {useEffect, useState} from 'react';
import {usePathname} from 'next/navigation';
import {Logo} from './Logo';

const navItems = [
  {id: 'dema', labelKey: 'dema', href: '/pl/dema'},
  {id: 'platforma', labelKey: 'platform', href: '/pl#platforma'},
  {id: 'funkcje', labelKey: 'features', href: '/pl#funkcje'},
  {id: 'faq', labelKey: 'faq', href: '/pl#faq'}
] as const;

export function Header() {
  const t = useTranslations('navigation');
  const pathname = usePathname();
  const [isOpen, setIsOpen] = useState(false);
  const [activeSection, setActiveSection] = useState<string | null>(null);

  useEffect(() => {
    if (pathname !== '/pl') {
      return;
    }

    const sections = ['platforma', 'funkcje', 'faq', 'kontakt']
      .map(id => document.getElementById(id))
      .filter((section): section is HTMLElement => Boolean(section));

    function updateActiveSection() {
      const activationLine = 120;
      const currentSection = sections.reduce<HTMLElement | null>((active, section) => {
        const sectionTop = section.getBoundingClientRect().top;

        if (sectionTop <= activationLine) {
          return section;
        }

        return active;
      }, null);

      setActiveSection(currentSection?.id ?? null);
    }

    updateActiveSection();
    window.addEventListener('scroll', updateActiveSection, {passive: true});
    window.addEventListener('resize', updateActiveSection);

    return () => {
      window.removeEventListener('scroll', updateActiveSection);
      window.removeEventListener('resize', updateActiveSection);
    };
  }, [pathname]);

  function isActive(itemId: string) {
    if (itemId === 'dema') {
      return pathname === '/pl/dema' || pathname.startsWith('/pl/demo');
    }

    if (pathname === '/pl') {
      return itemId === activeSection;
    }

    return false;
  }

  function handleLogoClick(event: React.MouseEvent<HTMLAnchorElement>) {
    if (pathname !== '/pl') {
      return;
    }

    event.preventDefault();
    setIsOpen(false);

    if (window.location.hash) {
      window.history.replaceState(null, '', pathname);
    }

    window.scrollTo({top: 0, left: 0});
    setActiveSection(null);
  }

  return (
    <header className="siteHeader">
      <div className="siteHeader__inner">
        <Link
          className="siteHeader__logo"
          href="/pl"
          aria-label={t('logoAriaLabel')}
          scroll
          onClick={handleLogoClick}
        >
          <Logo />
        </Link>
        <nav className="siteHeader__nav" aria-label={t('mainNav')}>
          {navItems.map(item => (
            <a className={isActive(item.id) ? 'isActive' : undefined} key={item.href} href={item.href}>
              {t(item.labelKey)}
            </a>
          ))}
        </nav>
        <a className={activeSection === 'kontakt' ? 'siteHeader__contact isActive' : 'siteHeader__contact'} href="#kontakt">
          {t('contact')}
        </a>
        <button
          className="siteHeader__menu"
          type="button"
          aria-label={isOpen ? t('closeMenu') : t('openMenu')}
          aria-expanded={isOpen}
          onClick={() => setIsOpen(current => !current)}
        >
          {isOpen ? <X size={22} /> : <Menu size={22} />}
        </button>
      </div>
      {isOpen ? (
        <nav className="siteHeader__mobileNav" aria-label={t('mobileNav')}>
          {navItems.map(item => (
            <a
              className={isActive(item.id) ? 'isActive' : undefined}
              key={item.href}
              href={item.href}
              onClick={() => setIsOpen(false)}
            >
              {t(item.labelKey)}
            </a>
          ))}
        </nav>
      ) : null}
    </header>
  );
}
