/* ═══════════════════════════════════════════════════════
   IKIGAI · Floating Nav + App Root + Tweaks
   ═══════════════════════════════════════════════════════ */

const { useState: useStA, useEffect: useEfA, useRef: useRefA, useContext: useCtxA } = React;

// ───────────── Tweak defaults ─────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "orbPalette": "aurora",
  "starDensity": 110,
  "connections": true,
  "starGlow": 1,
  "autoDemo": true,
  "wordmarkStyle": "italic",
  "heroIntensity": 1
}/*EDITMODE-END*/;

// Orb palette presets
const ORB_PALETTES = {
  aurora:   { core: '#7EF6E2', ring: '#6EA8FF', halo: '#9B8CFF', label: 'Aurora' },
  cosmic:   { core: '#6EA8FF', ring: '#9B8CFF', halo: '#7EF6E2', label: 'Cósmico' },
  violet:   { core: '#9B8CFF', ring: '#C8D4F0', halo: '#6EA8FF', label: 'Violeta' },
  dawn:     { core: '#F5DFA7', ring: '#7EF6E2', halo: '#6EA8FF', label: 'Amanecer' },
  mono:     { core: '#FFFFFF', ring: '#C8D4F0', halo: '#EDF0F6', label: 'Mono' },
  ember:    { core: '#F5DFA7', ring: '#9B8CFF', halo: '#7EF6E2', label: 'Ember' },
};

// ───────────── Floating Nav ─────────────
function FloatingNav() {
  const [scrolled, setScrolled] = useStA(false);
  const [hidden, setHidden] = useStA(false);
  const lastY = useRefA(0);

  useEfA(() => {
    function onScroll() {
      const y = window.scrollY;
      setScrolled(y > 40);
      const delta = y - lastY.current;
      if (y > 120) {
        if (delta > 4) setHidden(true);
        else if (delta < -4) setHidden(false);
      } else {
        setHidden(false);
      }
      lastY.current = y;
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className={`nav ${scrolled ? 'is-scrolled' : ''} ${hidden ? 'is-hidden' : ''}`}>
      <div className="nav__inner">
        <a href="#" className="nav__brand" aria-label="IKIGAI">
          <span className="nav__brand-orb" />
          <span className="wordmark nav__brand-word">ikigai</span>
        </a>
        <ul className="nav__links">
          <li><a href="#pages">Pages</a></li>
          <li><a href="#vaults">Vaults</a></li>
          <li><a href="#agents">Agents</a></li>
          <li><a href="#cloud">Cloud</a></li>
          <li><a href="#roadmap">Roadmap</a></li>
        </ul>
        <a href="https://vault.qruzh.com.mx" target="_blank" rel="noopener noreferrer" className="nav__cta">
          <span>Entrar</span>
          <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
            <path d="M2 6h7M6 2l3 4-3 4" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>
    </nav>
  );
}

// ───────────── Tweaks bridge ─────────────
// Bridges the tweaks state into the OrbContext (accent override) and the constellation.
function TweaksBridge({ tweaks }) {
  const { setAccent } = useCtxA(OrbContext);

  useEfA(() => {
    const palette = ORB_PALETTES[tweaks.orbPalette] || ORB_PALETTES.aurora;
    setAccent({ core: palette.core, ring: palette.ring, halo: palette.halo });
  }, [tweaks.orbPalette]);

  useEfA(() => {
    const c = window.__ikigaiConstellation;
    if (!c) return;
    c.setDensity(tweaks.starDensity);
    c.setConnections(tweaks.connections);
    c.setGlow(tweaks.starGlow);
  }, [tweaks.starDensity, tweaks.connections, tweaks.starGlow]);

  useEfA(() => {
    window.__ikigaiAutoDemo = tweaks.autoDemo;
    window.dispatchEvent(new CustomEvent('ikigai:tweaks', { detail: tweaks }));
  }, [tweaks.autoDemo]);

  useEfA(() => {
    // wordmark style
    document.documentElement.dataset.wordmark = tweaks.wordmarkStyle;
  }, [tweaks.wordmarkStyle]);

  useEfA(() => {
    document.documentElement.style.setProperty('--hero-intensity', tweaks.heroIntensity);
  }, [tweaks.heroIntensity]);

  return null;
}

// ───────────── Tweaks Panel ─────────────
function IkigaiTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const paletteOpts = Object.keys(ORB_PALETTES).map((k) => [
    ORB_PALETTES[k].core,
    ORB_PALETTES[k].ring,
    ORB_PALETTES[k].halo,
  ]);
  const paletteIdx = Object.keys(ORB_PALETTES).indexOf(t.orbPalette);

  return (
    <React.Fragment>
      <TweaksBridge tweaks={t} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="La entidad" />
        <TweakColor
          label="Paleta del orbe"
          value={paletteOpts[paletteIdx] || paletteOpts[0]}
          options={paletteOpts}
          onChange={(v) => {
            const i = paletteOpts.findIndex(
              (p) => p[0] === v[0] && p[1] === v[1] && p[2] === v[2]
            );
            const key = Object.keys(ORB_PALETTES)[i] || 'aurora';
            setTweak('orbPalette', key);
          }}
        />
        <TweakSlider
          label="Intensidad del hero"
          value={t.heroIntensity}
          min={0} max={2} step={0.1}
          onChange={(v) => setTweak('heroIntensity', v)}
        />

        <TweakSection label="Constelación" />
        <TweakSlider
          label="Densidad estelar"
          value={t.starDensity}
          min={0} max={250} step={5} unit="★"
          onChange={(v) => setTweak('starDensity', v)}
        />
        <TweakToggle
          label="Líneas de conexión"
          value={t.connections}
          onChange={(v) => setTweak('connections', v)}
        />
        <TweakSlider
          label="Brillo estelar"
          value={t.starGlow}
          min={0.3} max={2.5} step={0.1}
          onChange={(v) => setTweak('starGlow', v)}
        />

        <TweakSection label="Portal de descubrimiento" />
        <TweakToggle
          label="Demo automática"
          value={t.autoDemo}
          onChange={(v) => setTweak('autoDemo', v)}
        />

        <TweakSection label="Tipografía" />
        <TweakRadio
          label="Wordmark"
          value={t.wordmarkStyle}
          options={['italic', 'regular']}
          onChange={(v) => setTweak('wordmarkStyle', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

// ───────────── App Root ─────────────
function App() {
  useOrbStateOnScroll();
  useReveal();

  return (
    <React.Fragment>
      <FloatingNav />
      <main>
        <HeroSection />
        <SearchSection />
        <ProblemSection />
        <VisionSection />
        <UnitsSection />
        <div id="pages"><PagesSection /></div>
        <div id="vaults"><VaultsSection /></div>
        <div id="agents"><AgentsSection /></div>
        <div id="cloud"><CloudSection /></div>
        <SecuritySection />
        <GovernanceSection />
        <LabsSection />
        <div id="roadmap"><RoadmapSection /></div>
        <FinalSection />
      </main>
      <IkigaiTweaks />
    </React.Fragment>
  );
}

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