/* HTD App — phase machine + navigation stack + spec tabs + tweaks */
(function () {
  const { useState, useEffect } = React;
  const { StatusBar, AppBar, BottomTabs } = window.HTDShell;
  const { NavCtx } = window.HTDUI;
  const A = window.HTDAuth, O = window.HTDOnboarding, I = window.HTDIntro;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "todayState": "ASSIGNED",
    "emptyStates": false,
    "plan": "PRO",
    "skeletons": false,
    "displayFont": "Oswald"
  }/*EDITMODE-END*/;

  // tab roots (spec: TODAY / CHALLENGES / FEED / COACH / PROFILE)
  const TAB_ROOTS = {
    home:    window.HTDScreens.CommandCenter,
    mission: window.HTDChallenge.ChallengeHub,
    feed:    window.HTDFeed.ProofFeed,
    coach:   window.HTDAI.CoachTab,
    profile: window.HTDProfile.Profile,
  };
  const TAB_HEADERS = {
    home:    { variant:'wordmark', title:'HTD', left:'menu', right:['compass','bell'] },
    mission: { variant:'title', title:'CHALLENGE HUB', left:'menu', right:['bell'] },
    feed:    { variant:'title', title:'PROOF FEED', left:'menu', right:['bell'] },
    coach:   { variant:'title', title:'AI RESILIENCE ARCHITECT', left:'menu', right:['spark'] },
    profile: { variant:'title', title:'PROFILE', left:'menu', right:['settings'] },
  };
  // pushed screens
  const PUSH = Object.assign({}, window.HTDMission, window.HTDFeed, window.HTDChallenge, window.HTDAI,
    window.HTDContent, window.HTDReadiness, window.HTDMoney, window.HTDSettings, window.HTDSystem, window.HTDLoop,
    window.HTDGrowth, window.HTDMoments, window.HTDSoul, window.HTDApex, window.HTDCatalog);

  function SkeletonScreen() {
    return (
      <div style={{ paddingTop:10 }}>
        <div className="skel" style={{ height:18, width:'38%' }} />
        <div className="skel" style={{ height:44, width:'82%', marginTop:12 }} />
        <div className="skel" style={{ height:160, marginTop:18 }} />
        <div className="skel" style={{ height:58, marginTop:14 }} />
        <div className="skel" style={{ height:86, marginTop:14 }} />
        <div className="skel" style={{ height:86, marginTop:12 }} />
      </div>
    );
  }

  function MainApp({ nav, tab, stack, tweaks }) {
    const Root = TAB_ROOTS[tab];
    const hdr = TAB_HEADERS[tab];
    const [loading, setLoading] = useState(false);
    useEffect(() => {
      if (!tweaks.skeletons) return;
      setLoading(true);
      const t = setTimeout(() => setLoading(false), 700);
      return () => clearTimeout(t);
    }, [tab, tweaks.skeletons]);
    return (
      <React.Fragment>
        <StatusBar />
        <AppBar {...hdr} onAI={() => nav.go('coach')} onSettings={() => nav.push('Settings')} />
        <div className="screen-body" key={tab}>{loading ? <SkeletonScreen /> : <Root tweaks={tweaks} />}</div>
        <BottomTabs active={tab} onChange={nav.go} />
        {stack.map((r, i) => {
          const Comp = PUSH[r.name];
          return Comp ? <Comp key={i + r.name} params={r.params} /> : null;
        })}
      </React.Fragment>
    );
  }

  function App() {
    const initialPhase = new URLSearchParams(window.location.search).get('preview') === 'app' ? 'app' : 'splash';
    const [phase, setPhase] = useState(initialPhase);
    const [tab, setTab] = useState('home');
    const [stack, setStack] = useState([]);
    const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
    window.HTD_TWEAKS = tweaks; // global read for pushed screens (plan gates etc.)

    const nav = React.useMemo(() => ({
      push: (name, params) => setStack(s => [...s, { name, params }]),
      pop: () => setStack(s => s.slice(0, -1)),
      popToRoot: () => setStack([]),
      go: (t) => { setStack([]); setTab(t); },
      setPhase: (p) => { setStack([]); setTab('home'); setPhase(p); },
    }), []);

    useEffect(() => {
      document.documentElement.style.setProperty('--display',
        "'" + (tweaks.displayFont || 'Oswald') + "', sans-serif");
    }, [tweaks.displayFont]);

    let body;
    if (phase === 'splash') body = <A.Splash />;
    else if (phase === 'boot') body = <A.BootSync />;
    else if (phase === 'manifesto') body = <window.HTDSoul.Manifesto />;
    else if (phase === 'intro') body = <I.Intro />;
    else if (phase === 'welcome') body = <A.AuthWelcome />;
    else if (phase === 'login') body = <A.Login />;
    else if (phase === 'onboarding') body = <O.Onboarding />;
    else body = <MainApp nav={nav} tab={tab} stack={stack} tweaks={tweaks} />;

    return (
      <NavCtx.Provider value={nav}>
        <div className="device">
          <div className="device-screen grid-bg">{body}</div>
        </div>
        <window.TweaksPanel>
          <window.TweakSection label="Demo states" />
          <window.TweakSelect label="Today state" value={tweaks.todayState}
            options={['ASSIGNED','PRE-DROP','COMPLETED','MISSED','RECOVERY','OVERLOAD','NO MISSION']}
            onChange={(v) => setTweak('todayState', v)} />
          <window.TweakToggle label="Empty states" value={tweaks.emptyStates}
            onChange={(v) => setTweak('emptyStates', v)} />
          <window.TweakRadio label="Plan" value={tweaks.plan}
            options={['FREE','PRO']}
            onChange={(v) => setTweak('plan', v)} />
          <window.TweakToggle label="Loading skeletons" value={tweaks.skeletons}
            onChange={(v) => setTweak('skeletons', v)} />
          <window.TweakSection label="Type" />
          <window.TweakRadio label="Display font" value={tweaks.displayFont}
            options={['Oswald','Saira Condensed']}
            onChange={(v) => setTweak('displayFont', v)} />
        </window.TweaksPanel>
      </NavCtx.Provider>
    );
  }

  function mount() {
    ReactDOM.createRoot(document.getElementById('app')).render(React.createElement(App));
    const scaler = document.getElementById('scaler');
    function fit() {
      const W = 414, H = 868, pad = 22;
      const s = Math.min((window.innerWidth - pad) / W, (window.innerHeight - pad) / H);
      scaler.style.transform = 'scale(' + Math.min(s, 1.3) + ')';
    }
    fit(); window.addEventListener('resize', fit);
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mount);
  else mount();
})();