// Tobeads — HiddenTopNav + MobileMenu (pixel HUD)

const { useState: useStateNav, useEffect: useEffectNav } = React;

const NAV_LINKS = [
  { id: 'quickstart', label: 'Quick Start', href: '#/quick-start' },
  { id: 'presets',    label: 'Preset World', href: '#/presets' },
  { id: 'create',     label: 'Creator Mode', href: '#/create' },
  { id: 'arrivals',   label: 'New Arrivals', href: '#/presets' },
  { id: 'gallery',    label: 'Gallery', href: '#/gallery' },
];

function HiddenTopNav({ route, onNavigate, cartCount }) {
  const [show, setShow] = useStateNav(false);
  // Creator Mode is a dedicated editor with its own top toolbar — the
  // hover-triggered global HUD would collide with the editor controls, so we
  // suppress it entirely there (the toolbar carries its own click-based menu).
  const isEditor = route === 'create';

  useEffectNav(() => {
    if (isEditor) { setShow(false); return; }
    let hideTimer = null;
    function onMove(e) {
      if (e.clientY <= 56) {
        setShow(true);
        if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
      } else if (e.clientY > 110) {
        if (!hideTimer) hideTimer = setTimeout(() => { setShow(false); hideTimer = null; }, 300);
      }
    }
    window.addEventListener('mousemove', onMove);
    return () => { window.removeEventListener('mousemove', onMove); if (hideTimer) clearTimeout(hideTimer); };
  }, [isEditor]);

  // In the editor, render only the mobile menu (click-based) — no hover zones.
  if (isEditor) {
    return <MobileMenu route={route} onNavigate={onNavigate} cartCount={cartCount}/>;
  }

  return (
    <>
      <div className="aw-navpeek aw-hide-mob" style={{ opacity: show ? 0 : 1, pointerEvents: 'none' }}>
        <span className="dot"/><span className="dot"/><span className="dot"/>
      </div>

      <div className="aw-navzone aw-hide-mob" onMouseEnter={() => setShow(true)}/>

      <div className={`aw-hud aw-hide-mob ${show ? 'show' : ''}`} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
        <a href="#/" onClick={() => onNavigate('home')} style={{ display: 'flex', alignItems: 'center', paddingLeft: 4 }}>
          <window.TobeadsNav size={13}/>
        </a>
        <nav className="aw-hud-links">
          {NAV_LINKS.map(l => (
            <a key={l.id} href={l.href} onClick={() => onNavigate(l.id)} className={`aw-hud-link ${route === l.id ? 'on' : ''}`}>
              {l.label}
            </a>
          ))}
        </nav>
        <button onClick={() => window.dispatchEvent(new CustomEvent('pibead:open-cart'))} className="aw-hud-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <window.Icon.Cart size={14}/> Cart{cartCount > 0 ? `·${cartCount}` : ''}
        </button>
      </div>

      <MobileMenu route={route} onNavigate={onNavigate} cartCount={cartCount}/>
    </>
  );
}
window.HiddenTopNav = HiddenTopNav;

function MobileMenu({ route, onNavigate, cartCount }) {
  const [open, setOpen] = useStateNav(false);
  useEffectNav(() => {
    if (open) document.body.classList.add('no-scroll');
    else document.body.classList.remove('no-scroll');
    return () => document.body.classList.remove('no-scroll');
  }, [open]);

  return (
    <>
      <button className="aw-mob-btn aw-only-mob" onClick={() => setOpen(true)} aria-label="Open menu">
        <window.Icon.Menu size={20}/>
      </button>
      {open && (
        <div className="aw-mob-overlay aw-grid-bg">
          <button className="aw-mob-btn" onClick={() => setOpen(false)} aria-label="Close menu">
            <window.Icon.Close size={20}/>
          </button>
          <a href="#/" onClick={() => { onNavigate('home'); setOpen(false); }} style={{ marginBottom: 24 }}>
            <window.TobeadsMark size={28}/>
          </a>
          {NAV_LINKS.map((l, i) => (
            <a key={l.id} href={l.href} onClick={() => { onNavigate(l.id); setOpen(false); }} className="aw-mob-link">
              <span className="n">0{i+1}</span>{l.label}
            </a>
          ))}
          <button onClick={() => { setOpen(false); window.dispatchEvent(new CustomEvent('pibead:open-cart')); }} className="aw-mob-link">
            <span className="n">★</span>Cart {cartCount > 0 ? `(${cartCount})` : ''}
          </button>
        </div>
      )}
    </>
  );
}
window.MobileMenu = MobileMenu;