'use client';

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

const navItems = [
  {id: 'dema', label: 'Dema', href: '/pl#dema'},
  {id: 'platforma', label: 'Platforma', href: '/pl#platforma'},
  {id: 'funkcje', label: 'Funkcje', href: '/pl#funkcje'},
  {id: 'faq', label: 'FAQ', href: '/pl#faq'}
];

export function Header() {
  const pathname = usePathname();
  const [isOpen, setIsOpen] = useState(false);
  const [activeSection, setActiveSection] = useState('platforma');

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

    const sections = ['dema', '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 ?? 'platforma');
    }

    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 (pathname === '/pl') {
      return itemId === activeSection;
    }

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

    return false;
  }

  return (
    <header className="siteHeader">
      <div className="siteHeader__inner">
        <Link className="siteHeader__logo" href="/pl" aria-label="Ultifide konfiguratory 3D">
          <Logo />
        </Link>
        <nav className="siteHeader__nav" aria-label="Nawigacja glowna">
          {navItems.map(item => (
            <a className={isActive(item.id) ? 'isActive' : undefined} key={item.href} href={item.href}>
              {item.label}
            </a>
          ))}
        </nav>
        <a className={activeSection === 'kontakt' ? 'siteHeader__contact isActive' : 'siteHeader__contact'} href="#kontakt">
          Kontakt
        </a>
        <button
          className="siteHeader__menu"
          type="button"
          aria-label={isOpen ? 'Zamknij menu' : 'Otwórz menu'}
          aria-expanded={isOpen}
          onClick={() => setIsOpen(current => !current)}
        >
          {isOpen ? <X size={22} /> : <Menu size={22} />}
        </button>
      </div>
      {isOpen ? (
        <nav className="siteHeader__mobileNav" aria-label="Nawigacja mobilna">
          {navItems.map(item => (
            <a
              className={isActive(item.id) ? 'isActive' : undefined}
              key={item.href}
              href={item.href}
              onClick={() => setIsOpen(false)}
            >
              {item.label}
            </a>
          ))}
        </nav>
      ) : null}
    </header>
  );
}
