const { useState, useEffect } = React;

const TWEAK_DEFAULTS = {
  accentColor: '#a8ff00',
  bgColor: '#222222',
  globeSpeed: 7,
  noiseOpacity: 0.035,
};

function Nav({ page, onNavigate }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const links = [
    { key: 'home',    label: 'INÍCIO'  },
    { key: 'store',   label: 'LOJA'    },
    { key: 'profile', label: 'PERFIL'  },
  ];
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: 'rgba(20,20,20,0.92)', backdropFilter: 'blur(12px)',
      borderBottom: '1px solid rgba(168,255,0,0.12)',
      padding: '0 5vw',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64, maxWidth: 1200, margin: '0 auto' }}>
        {/* Logo */}
        <button onClick={() => onNavigate('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="uploads/genz-logo.png" alt="Z" style={{ width: 36, height: 36, objectFit: 'contain', filter: 'drop-shadow(0 0 8px #a8ff00)' }} />
          <span style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 16, letterSpacing: '0.15em', color: '#fff', textTransform: 'uppercase' }}>Project Gen Z</span>
        </button>

        {/* Desktop links */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }} className="desktop-nav">
          {links.map(l => (
            <button key={l.key} onClick={() => onNavigate(l.key)} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 13, letterSpacing: '0.12em',
              color: page === l.key ? '#a8ff00' : 'rgba(255,255,255,0.5)',
              padding: '8px 16px', textTransform: 'uppercase',
              borderBottom: `2px solid ${page === l.key ? '#a8ff00' : 'transparent'}`,
              transition: 'color 0.2s',
            }}
              onMouseEnter={e => { if (page !== l.key) e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={e => { if (page !== l.key) e.currentTarget.style.color = 'rgba(255,255,255,0.5)'; }}
            >{l.label}</button>
          ))}
          {/* Botão ENTRAR (auth) escondido — login ainda não implementado.
              Reativar quando Supabase auth estiver pronto + Discord vinculação. */}
        </div>

        {/* Mobile hamburger */}
        <button onClick={() => setMenuOpen(o => !o)} style={{
          display: 'none', background: 'none', border: 'none', cursor: 'pointer',
          color: '#a8ff00', fontSize: 22, padding: 4,
        }} className="hamburger">☰</button>
      </div>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={{ background: '#1e1e1e', borderTop: '1px solid rgba(168,255,0,0.12)', padding: '16px 0' }}>
          {links.map(l => (
            <button key={l.key} onClick={() => { onNavigate(l.key); setMenuOpen(false); }} style={{
              display: 'block', width: '100%', background: 'none', border: 'none',
              textAlign: 'left', padding: '14px 5vw', cursor: 'pointer',
              fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 15, letterSpacing: '0.1em',
              color: page === l.key ? '#a8ff00' : 'rgba(255,255,255,0.6)',
              textTransform: 'uppercase',
            }}>{l.label}</button>
          ))}
        </div>
      )}
    </nav>
  );
}

function App() {
  // Páginas escondidas (LOJA, PERFIL, AUTH) — se localStorage tiver valor antigo,
  // força volta pra home. Reativar quando os sistemas estiverem prontos.
  const HIDDEN_PAGES = ['store', 'profile', 'auth'];
  const stored = JSON.parse(localStorage.getItem('pgz-page') || '"home"');
  const initialPage = HIDDEN_PAGES.includes(stored) ? 'home' : stored;
  const [page, setPage] = useState(initialPage);
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [entered, setEntered] = useState(false);

  function navigate(p) {
    setPage(p);
    localStorage.setItem('pgz-page', JSON.stringify(p));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  useEffect(() => {
    const dragStart = { x: 0, y: 0 };
    let isDragging = false;
    let tracking = false;

    const onDown = (e) => {
      if (e.target.closest('button, a, input, select, textarea, [role="button"]')) return;
      dragStart.x = e.clientX;
      dragStart.y = e.clientY;
      isDragging = false;
      tracking = true;
      window.addEventListener('mousemove', onMove);
      window.addEventListener('mouseup', onUp);
    };

    const onMove = (e) => {
      if (!tracking) return;
      const dx = e.clientX - dragStart.x;
      const dy = e.clientY - dragStart.y;
      if (!isDragging) {
        if (Math.abs(dx) < 6 && Math.abs(dy) < 6) return;
        isDragging = true;
        document.body.style.cursor = 'grabbing';
        document.body.style.userSelect = 'none';
        document.body.style.webkitUserSelect = 'none';
      }
      e.preventDefault();
      dragStart.x = e.clientX;
      dragStart.y = e.clientY;
      window.dispatchEvent(new CustomEvent('globe-drag', { detail: { dx, dy } }));
    };

    const onUp = () => {
      tracking = false;
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
      document.body.style.webkitUserSelect = '';
      if (isDragging) {
        isDragging = false;
        window.dispatchEvent(new CustomEvent('globe-drag-end'));
      }
    };

    window.addEventListener('mousedown', onDown);
    return () => {
      window.removeEventListener('mousedown', onDown);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
  }, []);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accentColor);
    document.documentElement.style.setProperty('--bg', tweaks.bgColor);
    document.body.style.background = tweaks.bgColor;
  }, [tweaks]);

  return (
    <div>
      <style>{`
        @media (max-width: 680px) {
          .desktop-nav { display: none !important; }
          .hamburger { display: block !important; }
        }
        @keyframes pulse {
          0%,100% { opacity: 1; box-shadow: 0 0 10px var(--accent); }
          50%      { opacity: 0.5; box-shadow: 0 0 4px var(--accent); }
        }
        .page-content {
          position: relative;
          z-index: 1;
        }
      `}</style>

      <Nav page={page} onNavigate={navigate} />

      {page === 'home' && <Globe3D size={window.innerWidth} />}
      <div className="page-content">
        {page === 'home'    && <LandingPage onNavigate={navigate} />}
        {page === 'auth'    && <AuthPage    onNavigate={navigate} />}
        {page === 'profile' && <ProfilePage onNavigate={navigate} />}
        {page === 'store'   && <StorePage   onNavigate={navigate} />}
      </div>
      {page === 'home' && <GlobeHUD />}
      {page === 'home' && <SatDialog />}

      {!entered && window.GateScreen && <GateScreen onEnter={() => setEntered(true)} />}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);