// Wander — App router & shell

const SCREENS = {
  ONBOARDING:'onboarding', MAP:'map', BROWSE:'browse', SAVED:'saved',
  PROFILE:'profile', DETAIL:'detail', PLAYER:'player', PAYWALL:'paywall',
  COMPLETION:'completion', SEARCH:'search', OFFLINE:'offline',
};

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{ "density":"comfortable", "brand":"#FFC93C" }/*EDITMODE-END*/;

function App() {
  const [screen, setScreen] = React.useState(SCREENS.ONBOARDING);
  const [tourId, setTourId] = React.useState('merlion-marina');
  const [tours, setTours] = React.useState(window.WANDER_DATA.TOURS);
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAKS_DEFAULTS) : [TWEAKS_DEFAULTS, ()=>{}];
  const dense = tweaks.density==='compact';

  // Load tours from API on mount
  React.useEffect(() => {
    window.loadTours().then(data => {
      window.WANDER_DATA.TOURS = data;
      setTours(data);
    });
  }, []);

  // Apply brand colour
  React.useEffect(() => {
    document.documentElement.style.setProperty('--w-yellow', tweaks.brand);
  }, [tweaks.brand]);

  const goTab = (t) => {
    if (t==='map')     setScreen(SCREENS.MAP);
    if (t==='browse')  setScreen(SCREENS.BROWSE);
    if (t==='saved')   setScreen(SCREENS.SAVED);
    if (t==='profile') setScreen(SCREENS.PROFILE);
  };

  let body;
  switch (screen) {
    case SCREENS.ONBOARDING: body = <Onboarding onDone={()=>setScreen(SCREENS.MAP)} dense={dense}/>; break;
    case SCREENS.MAP:        body = <MapScreen onOpenTour={(id)=>{setTourId(id);setScreen(SCREENS.DETAIL);}} onTab={goTab} dense={dense} brand={tweaks.brand}/>; break;
    case SCREENS.BROWSE:     body = <BrowseScreen onOpenTour={(id)=>{setTourId(id);setScreen(SCREENS.DETAIL);}} onTab={goTab} onSearch={()=>setScreen(SCREENS.SEARCH)} dense={dense}/>; break;
    case SCREENS.SAVED:      body = <SavedScreen onTab={goTab} onOpenTour={(id)=>{setTourId(id);setScreen(SCREENS.DETAIL);}} onOpenOffline={()=>setScreen(SCREENS.OFFLINE)} dense={dense}/>; break;
    case SCREENS.PROFILE:    body = <ProfileScreen onTab={goTab} dense={dense}/>; break;
    case SCREENS.SEARCH:     body = <SearchScreen onClose={()=>setScreen(SCREENS.BROWSE)} onOpenTour={(id)=>{setTourId(id);setScreen(SCREENS.DETAIL);}}/>; break;
    case SCREENS.DETAIL:     body = <DetailScreen tourId={tourId} onBack={()=>setScreen(SCREENS.MAP)} onStart={()=>setScreen(SCREENS.PLAYER)} onPaywall={()=>setScreen(SCREENS.PAYWALL)} dense={dense}/>; break;
    case SCREENS.PLAYER:     body = <PlayerScreen tourId={tourId} onBack={()=>setScreen(SCREENS.DETAIL)} onComplete={()=>setScreen(SCREENS.COMPLETION)} dense={dense}/>; break;
    case SCREENS.PAYWALL:    body = <PaywallScreen tourId={tourId} onClose={()=>setScreen(SCREENS.DETAIL)} onSuccess={()=>setScreen(SCREENS.PLAYER)}/>; break;
    case SCREENS.COMPLETION: body = <CompletionScreen tourId={tourId} onDone={()=>setScreen(SCREENS.MAP)}/>; break;
    case SCREENS.OFFLINE:    body = <OfflineScreen onClose={()=>setScreen(SCREENS.SAVED)}/>; break;
    default: body = null;
  }

  const labels = {
    [SCREENS.ONBOARDING]:'01 Onboarding', [SCREENS.MAP]:'02 Map', [SCREENS.BROWSE]:'03 Browse',
    [SCREENS.SAVED]:'04 Saved', [SCREENS.PROFILE]:'05 Profile', [SCREENS.SEARCH]:'06 Search',
    [SCREENS.DETAIL]:'07 Tour Detail', [SCREENS.PLAYER]:'08 Tour Player', [SCREENS.PAYWALL]:'09 Paywall',
    [SCREENS.COMPLETION]:'10 Completion', [SCREENS.OFFLINE]:'11 Offline',
  };

  return (
    <div style={{ minHeight:'100vh', display:'flex', alignItems:'center', justifyContent:'center', padding:'32px 16px', background:'radial-gradient(circle at 30% 20%,#FFF4D2,#FAF6EC 60%)' }}>
      <div data-screen-label={labels[screen]} style={{ position:'relative' }}>
        <IOSDevice width={402} height={874}>{body}</IOSDevice>
        <ScreenJumper current={screen} onJump={setScreen}/>
      </div>

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Display"/>
          <window.TweakRadio label="Card density" value={tweaks.density} onChange={v=>setTweak('density',v)} options={[{value:'comfortable',label:'Comfortable'},{value:'compact',label:'Compact'}]}/>
          <window.TweakSection title="Brand colour"/>
          <window.TweakColor label="Primary" value={tweaks.brand} onChange={v=>setTweak('brand',v)}/>
          <div style={{ display:'flex', gap:6, marginTop:8 }}>
            {['#FFC93C','#FF6B5A','#2DD4A7','#9B7EDC','#4FB7E8','#E89B6C'].map(c => (
              <button key={c} onClick={()=>setTweak('brand',c)} style={{ width:28, height:28, borderRadius:14, border:tweaks.brand===c?'2px solid #1A1812':'2px solid transparent', background:c, cursor:'pointer' }}/>
            ))}
          </div>
          <window.TweakSection title="Jump to screen"/>
          <window.TweakSelect label="Screen" value={screen} onChange={v=>setScreen(v)} options={Object.entries(labels).map(([k,v])=>({value:k,label:v}))}/>
        </window.TweaksPanel>
      )}
    </div>
  );
}

function ScreenJumper({ current, onJump }) {
  const items = [
    {id:'onboarding',label:'Intro'},{id:'map',label:'Map'},{id:'browse',label:'Browse'},
    {id:'search',label:'Search'},{id:'detail',label:'Detail'},{id:'paywall',label:'Paywall'},
    {id:'player',label:'Player'},{id:'completion',label:'Done'},{id:'saved',label:'Saved'},
    {id:'offline',label:'Offline'},{id:'profile',label:'You'},
  ];
  return (
    <div style={{ position:'absolute', top:'50%', left:'calc(100% + 24px)', transform:'translateY(-50%)', display:'flex', flexDirection:'column', gap:4, background:'#fff', borderRadius:20, padding:8, boxShadow:'0 8px 24px rgba(0,0,0,0.08)', maxHeight:600, overflowY:'auto' }}>
      <div style={{ fontSize:9, color:'#8A8474', fontWeight:700, letterSpacing:0.5, textTransform:'uppercase', padding:'6px 10px 4px' }}>Screens</div>
      {items.map(s => (
        <button key={s.id} onClick={()=>onJump(s.id)} style={{ padding:'8px 12px', borderRadius:12, border:'none', cursor:'pointer', background:current===s.id?'#1A1812':'transparent', color:current===s.id?'#FFC93C':'#1A1812', fontWeight:600, fontSize:12, fontFamily:'inherit', textAlign:'left', minWidth:90 }}>{s.label}</button>
      ))}
    </div>
  );
}

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