/* global React */
/* Navbar generado desde rules/menu.json — no editar a mano; usar rules/menu.json */
const { useState, useEffect } = React;

const NAV = window.ACMP_NAV || { logo_href: 'index.html', items: [], cta: null };

function navLinkProps(item) {
  if (!item) return {};
  const external = item.external || /^https?:\/\//.test(item.href || '');
  return {
    href: item.href,
    target: external ? '_blank' : undefined,
    rel: external ? 'noopener noreferrer' : undefined,
  };
}

function NavLogo({ inverted = false }) {
  return (
    <a
      className={'acmp-logo' + (inverted ? ' acmp-logo--inverted' : '')}
      href={NAV.logo_href || 'index.html'}
      style={{ display: 'flex', alignItems: 'center', textDecoration: 'none', cursor: 'pointer' }}
    >
      <img
        src={R('assets/logo-primary.webp')}
        alt="Academia Comunica de Mai Pistiner"
        style={{ height: 46, width: 'auto', display: 'block', marginTop: '-6px' }}
      />
    </a>
  );
}

function HamburgerIcon({ open }) {
  return (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true">
      {open ? (
        <><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></>
      ) : (
        <><line x1="3" y1="7" x2="21" y2="7" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="17" x2="21" y2="17" /></>
      )}
    </svg>
  );
}

function ChevronDown() {
  return (
    <svg className="acmp-nav-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true">
      <polyline points="6 9 12 15 18 9" />
    </svg>
  );
}

function NavDropdown({ item, onNavigate }) {
  const [open, setOpen] = useState(false);
  return (
    <div
      className={'acmp-nav-dropdown' + (open ? ' is-open' : '')}
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <button
        type="button"
        className="acmp-nav-link acmp-nav-dropdown-toggle"
        aria-haspopup="true"
        aria-expanded={open}
        onClick={() => setOpen(v => !v)}
      >
        {item.label}
        <ChevronDown />
      </button>
      <div className="acmp-nav-dropdown-menu" role="menu">
        {(item.children || []).map(child => (
          <a
            key={child.label}
            className="acmp-nav-dropdown-link"
            role="menuitem"
            {...navLinkProps(child)}
            style={{ textDecoration: 'none' }}
            onClick={onNavigate}
          >
            {child.label}
          </a>
        ))}
      </div>
    </div>
  );
}

function NavMobileAccordion({ item, onNavigate }) {
  const [expanded, setExpanded] = useState(false);
  return (
    <div className={'acmp-nav-mobile-accordion' + (expanded ? ' is-open' : '')}>
      <button
        type="button"
        className="acmp-nav-mobile-accordion-toggle"
        aria-expanded={expanded}
        onClick={() => setExpanded(v => !v)}
      >
        <span>{item.label}</span>
        <ChevronDown />
      </button>
      {expanded && (
        <div className="acmp-nav-mobile-accordion-body">
          {(item.children || []).map(child => (
            <a
              key={child.label}
              className="acmp-nav-mobile-sublink"
              {...navLinkProps(child)}
              onClick={onNavigate}
            >
              {child.label}
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

function NavMobileMenu({ items, cta, onClose }) {
  return (
    <div className="acmp-nav-mobile" role="dialog" aria-modal="true" aria-label="Menú de navegación">
      <div className="acmp-nav-mobile-header">
        <NavLogo inverted />
        <button
          type="button"
          className="acmp-nav-mobile-close"
          aria-label="Cerrar menú"
          onClick={onClose}
        >
          <HamburgerIcon open />
        </button>
      </div>
      <div className="acmp-nav-mobile-scroll">
        {items.map(item => (
          item.children ? (
            <NavMobileAccordion key={item.label} item={item} onNavigate={onClose} />
          ) : (
            <a
              key={item.label}
              className="acmp-nav-mobile-link"
              {...navLinkProps(item)}
              onClick={onClose}
            >
              {item.label}
              {item.badge && <span className="acmp-nav-mobile-badge">{item.badge}</span>}
            </a>
          )
        ))}
      </div>
      {cta && (
        <div className="acmp-nav-mobile-footer">
          <a
            className="acmp-btn acmp-nav-mobile-cta"
            {...navLinkProps(cta)}
            onClick={onClose}
          >
            {cta.label}
          </a>
        </div>
      )}
    </div>
  );
}

function Navbar() {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  const items = NAV.items || [];
  const cta = NAV.cta;

  useEffect(() => {
    if (!open) return undefined;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);

  return (
    <nav className={'acmp-nav' + (open ? ' is-open' : '')}>
      <div className="acmp-nav-inner">
        <div className="acmp-nav-left"><NavLogo /></div>
        <div className="acmp-nav-links">
          {items.map(item => (
            item.children ? (
              <NavDropdown key={item.label} item={item} onNavigate={close} />
            ) : (
              <a
                key={item.label}
                className="acmp-nav-link"
                {...navLinkProps(item)}
                style={{ textDecoration: 'none' }}
                onClick={close}
              >
                {item.label}
              </a>
            )
          ))}
        </div>
        <div className="acmp-nav-right">
          {cta && (
            <a
              className="acmp-btn acmp-btn-primary acmp-nav-cta"
              {...navLinkProps(cta)}
              style={{ textDecoration: 'none', whiteSpace: 'nowrap' }}
            >
              {cta.label} <span aria-hidden="true">→</span>
            </a>
          )}
          <button
            className="acmp-nav-burger"
            aria-label={open ? 'Cerrar menú' : 'Abrir menú'}
            aria-expanded={open}
            onClick={() => setOpen(v => !v)}
          >
            <HamburgerIcon open={open} />
          </button>
        </div>
      </div>

      {open && <NavMobileMenu items={items} cta={cta} onClose={close} />}
    </nav>
  );
}

Object.assign(window, { Navbar, NavLogo });