// ============================================================
// HUNGRY HOLE 3D — app router + screen dock + mount
// (router)
// ============================================================
const { useState: useStateApp } = React;

const SCREENS = [
  { id: 'splash', label: 'Splash', grp: 'Onboarding' },
  { id: 'home', label: 'Home', grp: 'Core loop' },
  { id: 'map', label: 'World Map', grp: 'Core loop' },
  { id: 'intro', label: 'Level Intro', grp: 'Core loop' },
  { id: 'game', label: 'Gameplay HUD', grp: 'Core loop' },
  { id: 'complete', label: 'Level Complete', grp: 'Core loop' },
  { id: 'timeout', label: 'Out of Time', grp: 'Core loop' },
  { id: 'bonus', label: 'Bonus Intro', grp: 'Core loop' },
  { id: 'worldclear', label: 'World Clear', grp: 'Core loop' },
  { id: 'portal', label: 'Planet Portal', grp: 'Core loop' },
  { id: 'shop', label: 'Shop', grp: 'Meta' },
  { id: 'powerups', label: 'Power', grp: 'Meta' },
  { id: 'rewards', label: 'Rewards', grp: 'Meta' },
  { id: 'daily', label: 'Daily', grp: 'Meta' },
  { id: 'missions', label: 'Missions', grp: 'Meta' },
  { id: 'leaderboard', label: 'Leaderboard', grp: 'Meta' },
  { id: 'profile', label: 'Profile & Stats', grp: 'Meta' },
  { id: 'collection', label: 'Collection', grp: 'Meta' },
  { id: 'share', label: 'Share Card', grp: 'Meta' },
  { id: 'settings', label: 'Settings', grp: 'Meta' },
  { id: 'motion', label: 'Motion & juice', grp: 'Reference' },
  { id: 'components', label: 'Component sheet', grp: 'Reference' },
];

function App() {
  const HH = window.HH;
  const initRoute = (typeof location !== 'undefined' && new URLSearchParams(location.search).get('screen')) || 'loading';
  const initWorld = Math.max(0, Math.min(15, parseInt((typeof location !== 'undefined' && new URLSearchParams(location.search).get('world')) || '0', 10) || 0));
  const [route, setRoute] = useStateApp(initRoute);
  const [world, setWorld] = useStateApp(initWorld);
  const [level, setLevel] = useStateApp(initWorld * 10 + 1);
  // PLANET — infinite meta-layer. 0=Earth,1=Mars,… persists across sessions.
  const [planet, setPlanet] = useStateApp(() => { try { return Math.max(0, parseInt(localStorage.getItem('hh_planet')) || 0); } catch (e) { return 0; } });
  const savePlanet = (p) => { try { localStorage.setItem('hh_planet', String(p)); } catch (e) {} };
  // first-time walkthrough gate (skip if already completed, or if a deep-link screen is forced)
  const [showTut, setShowTut] = useStateApp(() => { try { return !localStorage.getItem('hh_tut_done'); } catch (e) { return false; } });
  const [result, setResult] = useStateApp({ score: 0, eaten: 0, total: 18 });
  const [runKey, setRunKey] = useStateApp(0);
  // active hole skin = whichever the player has equipped (persisted); falls back to Classic
  const skin = ((HH.SKINS && HH.SKINS.find(s => s.sel)) || (HH.SKINS && HH.SKINS[0]) || { id: 'classic' }).id;
  const wallet = HH.wallet;

  // Drive scene-aware music + win/fail stings on every screen change.
  React.useEffect(() => { if (window.HHSound) window.HHSound.scene(route); }, [route]);

  // Banner ads fully disabled (no top/bottom banners anywhere) — revenue comes from
  // rewarded ads + the paced gameplay interstitial. Keep the call to ensure any
  // previously-shown banner is hidden.
  React.useEffect(() => {
    if (!window.HHAds || !window.HHAds.setBannerVisible) return;
    window.HHAds.setBannerVisible(false);
  }, [route]);

  window.__hhGo = (r) => setRoute(r);
  window.__hhOpenLevel = (n) => { setLevel(n); setWorld(Math.floor((n - 1) / 10)); setRoute('intro'); };
  window.__hhSetWorld = (w) => setWorld(w);
  const go = (r) => { try { console.log('[HH route]', r, (new Error().stack || '').split('\n').slice(2, 4).join(' | ')); } catch (e) {} setRoute(r); };
  const openLevel = (n) => { try { console.log('[HH openLevel]', n, (new Error().stack || '').split('\n').slice(2, 4).join(' | ')); } catch (e) {} setLevel(n); setWorld(Math.floor((n - 1) / 10)); setRoute('intro'); };
  const startLevel = (n) => { setRunKey(k => k + 1); setRoute('game'); };
  const finish = (res) => { setResult(res); setRoute('complete'); };
  const timeout = (res) => { setResult(res); setRoute('timeout'); };
  const nextLevel = () => {
    if (window.HHAds && window.HHAds.onLevelTransition) window.HHAds.onLevelTransition(); // paced interstitial between levels
    if (level >= 160) { setRoute('portal'); return; }          // beat the planet's final boss → PORTAL to the next planet
    const n = level + 1;
    if (level % 10 === 0) { setRoute('worldclear'); } else openLevel(n);
  };
  // take the portal: jump to the next planet, back to its world 1 / level 1 (re-tinted, harder).
  const advancePlanet = () => {
    const p = planet + 1; setPlanet(p); savePlanet(p);
    setWorld(0); setLevel(1); setRoute('intro');
  };

  let screen;
  switch (route) {
    case 'loading': screen = <Loading go={go} />; break;
    case 'splash': screen = <Splash go={go} />; break;
    case 'home': screen = <Home go={go} openLevel={openLevel} world={world} setWorld={setWorld} wallet={wallet} />; break;
    case 'map': screen = <WorldMap go={go} openLevel={openLevel} world={world} setWorld={setWorld} wallet={wallet} planet={planet} />; break;
    case 'intro': screen = <LevelIntro go={go} startLevel={startLevel} world={world} level={level} planet={planet} />; break;
    case 'game': screen = <Gameplay key={runKey} go={go} world={world} level={level} planet={planet} skin={skin} finish={finish} timeout={timeout} equipped={HH.equipped} />; break;
    case 'complete': screen = <LevelComplete go={go} nextLevel={nextLevel} replay={() => startLevel(level)} world={world} level={level} planet={planet} result={result} wallet={wallet} />; break;
    case 'portal': screen = <Portal go={go} planet={planet} onEnter={advancePlanet} />; break;
    case 'timeout': screen = <OutOfTime go={go} retry={() => startLevel(level)} world={world} level={level} result={result} />; break;
    case 'bonus': screen = <BonusIntro go={go} startBonus={() => startLevel(level)} world={world} />; break;
    case 'worldclear': screen = <WorldClear go={go} world={world} wallet={wallet} />; break;
    case 'shop': screen = <Shop go={go} world={world} wallet={wallet} />; break;
    case 'powerups': screen = <PowerUps go={go} wallet={wallet} />; break;
    case 'rewards': screen = <AdCenter go={go} wallet={wallet} />; break;
    case 'daily': screen = <Daily go={go} world={world} wallet={wallet} />; break;
    case 'missions': screen = <Missions go={go} world={world} wallet={wallet} />; break;
    case 'leaderboard': screen = <Leaderboard go={go} />; break;
    case 'profile': screen = <Profile go={go} wallet={wallet} />; break;
    case 'collection': screen = <Collection go={go} />; break;
    case 'share': screen = <ShareCard go={go} world={world} />; break;
    case 'settings': screen = <Settings go={go} />; break;
    // 'endless' (standalone open-world) retired — the open world is now merged into every level.
    case 'motion': screen = <MotionSpec go={go} />; break;
    case 'components': screen = <Components go={go} />; break;
    default: screen = <WorldMap go={go} openLevel={openLevel} world={world} setWorld={setWorld} wallet={wallet} planet={planet} />;
  }

  // Full-screen mobile app: one screen fills the entire device viewport.
  return (
    <div style={{ position: 'fixed', inset: 0, overflow: 'hidden', background: '#0a0712' }}>
      <div data-screen-label={route} style={{ position: 'absolute', inset: 0 }}>{screen}</div>
      {/* first-time animated walkthrough — shows once when a new player reaches the hub */}
      {showTut && route === 'home' && window.Walkthrough && <window.Walkthrough onDone={() => setShowTut(false)} />}
    </div>
  );
}

function Dock({ route, go }) {
  const groups = [...new Set(SCREENS.map(s => s.grp))];
  return (
    <div style={{ width: 196, alignSelf: 'stretch', display: 'flex', flexDirection: 'column', justifyContent: 'center', maxHeight: 844, color: '#fff' }}>
      <div className="disp" style={{ fontSize: 22, lineHeight: 1 }}>HUNGRY HOLE <span style={{ color: 'var(--sun)' }}>3D</span></div>
      <div style={{ fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', fontWeight: 800, color: 'rgba(255,255,255,0.5)', margin: '4px 0 14px' }}>22 screens · 16 worlds · real 3D</div>
      <div className="pf-scroll" style={{ overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 3, paddingRight: 4 }}>
        {groups.map(grp => (
          <div key={grp}>
            <div style={{ fontSize: 9.5, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 800, color: 'rgba(255,255,255,0.4)', margin: '10px 0 5px 10px' }}>{grp}</div>
            {SCREENS.filter(s => s.grp === grp).map((s, i) => {
              const active = route === s.id;
              const n = SCREENS.findIndex(x => x.id === s.id) + 1;
              return <button key={s.id} onClick={() => go(s.id)} style={{ display: 'flex', alignItems: 'center', gap: 9, textAlign: 'left', cursor: 'pointer', width: '100%',
                padding: '8px 10px', borderRadius: 10, border: 'none', fontFamily: 'var(--ui)', fontWeight: 800, fontSize: 12.5,
                background: active ? 'rgba(255,255,255,0.16)' : 'transparent', color: active ? '#fff' : 'rgba(255,255,255,0.62)' }}>
                <span className="num" style={{ fontSize: 10, opacity: 0.55, width: 16 }}>{String(n).padStart(2, '0')}</span>{s.label}
              </button>;
            })}
          </div>
        ))}
      </div>
      <div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.45)', marginTop: 14, lineHeight: 1.5 }}>Drag the hole on Gameplay to eat. Auto-plays in previews.</div>
    </div>
  );
}

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