/* HelpMe — root app + router */
const { useState, useEffect, useRef } = React;

function useFit() {
  const [scale, setScale] = useState(1);
  useEffect(() => {
    const fit = () => {
      const s = Math.min(1, (window.innerHeight - 36) / 870, (window.innerWidth - 28) / 416);
      setScale(s);
    };
    fit();
    window.addEventListener('resize', fit);
    return () => window.removeEventListener('resize', fit);
  }, []);
  return scale;
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "composer": "quick",
  "aiLearning": true,
  "gamify": true
}/*EDITMODE-END*/;

function App() {
  const scale = useFit();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useState('onboarding');
  const [navType, setNavType] = useState('none');
  const [stack, setStack] = useState([]);
  const [lang, setLang] = useState('EN');
  const [placeId, setPlaceId] = useState('angkor-wat');
  const [bookings, setBookings] = useState(HM.BOOKINGS);
  const [audioOpen, setAudioOpen] = useState(false);
  const [toast, setToast] = useState(false);
  const [contribs, setContribs] = useState(() => {
    const m = {}; HM.PLACES.forEach(p => { m[p.id] = HM.getCommunity(p.id).items.slice(); }); return m;
  });
  const [composer, setComposer] = useState(null); // { type } while open

  const place = HM.PLACES.find(p => p.id === placeId) || HM.PLACES[0];
  const community = { ...HM.getCommunity(placeId), items: contribs[placeId] || [] };
  const addContrib = (item) => setContribs(m => ({ ...m, [placeId]: [item, ...(m[placeId] || [])] }));
  const openComposer = (type = null) => setComposer({ type: type || null });
  const TABS = ['home', 'explore', 'shield', 'bookings', 'profile'];

  const push = (v) => { setStack(s => [...s, view]); setNavType('push'); setView(v); };
  const back = () => { setNavType('pop'); setStack(s => { const n = [...s]; const prev = n.pop() || 'home'; setView(prev); return n; }); };
  const goTab = (v) => { setNavType('tab'); setStack([]); setView(v); };
  const openPlace = (id) => { setPlaceId(id); push('detail'); };
  const openBooking = () => push('booking');
  const openGuide = () => push('guide');

  // scam toast appears shortly after landing on home
  useEffect(() => {
    if (view === 'home' && !toast && !window.__noToast) {
      const id = setTimeout(() => setToast(true), 2600);
      return () => clearTimeout(id);
    }
  }, [view]);

  // programmatic navigation hook (used by the screenshot harness)
  useEffect(() => {
    window.__nav = (opts = {}) => {
      const { view: v, place, audio, toast: tt, lang: l } = opts;
      window.__noToast = !tt;
      setNavType('replace');
      if (l) setLang(l);
      if (place) setPlaceId(place);
      if (v) { setStack([]); setView(v); }
      setAudioOpen(!!audio);
      setToast(!!tt);
    };
    window.__setTweak = setTweak;              // QA/scripting hook: __setTweak('composer','guided')
    window.__openComposer = (type) => setComposer({ type: type || null });
    window.__navReady = true;
  }, []);

  const guideAction = (a) => { setNavType('push'); if (a === 'book') { setView('booking'); } else if (a === 'audio') { setView('detail'); setAudioOpen(true); } };

  let screen;
  switch (view) {
    case 'onboarding': screen = <Onboarding lang={lang} setLang={setLang} onStart={() => { setNavType('push'); setView('auth'); }} />; break;
    case 'auth': screen = <Auth lang={lang} setLang={setLang} onAuth={() => { setNavType('push'); setStack([]); setView('home'); }} />; break;
    case 'home': screen = <Home onNav={goTab} onOpenPlace={openPlace} onOpenChat={openGuide} onOpenAudio={() => { setPlaceId('angkor-wat'); setAudioOpen(true); }} />; break;
    case 'explore': screen = <Explore onNav={goTab} onOpenPlace={openPlace} onOpenChat={openGuide} />; break;
    case 'detail': screen = <PlaceDetail place={place} community={community} onBack={back} onBook={openBooking} onOpenAudio={() => setAudioOpen(true)} onOpenCommunity={() => push('community')} onWrite={openComposer} aiLearning={t.aiLearning} lang={lang} setLang={setLang} />; break;
    case 'community': screen = <CommunityScreen place={place} data={community} onBack={back} onWrite={openComposer} aiLearning={t.aiLearning} gamify={t.gamify} />; break;
    case 'booking': screen = <BookingFlow place={place} onBack={back} lang={lang} onDone={(b) => { setBookings(x => [b, ...x]); goTab('bookings'); }} />; break;
    case 'shield': screen = <ScamShield onNav={goTab} onBack={() => goTab('home')} />; break;
    case 'guide': screen = <AIGuide onBack={back} lang={lang} onAction={guideAction} />; break;
    case 'bookings': screen = <Bookings onNav={goTab} bookings={bookings} onView={() => {}} onReview={(name) => { const pl = HM.PLACES.find(p => p.name === name); if (pl) setPlaceId(pl.id); openComposer('review'); }} />; break;
    case 'profile': screen = <Profile onNav={goTab} lang={lang} setLang={setLang} onSignOut={() => { setNavType('pop'); setStack([]); setView('onboarding'); }} />; break;
    default: screen = null;
  }

  return (
    <div style={{ position: 'fixed', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'radial-gradient(120% 100% at 50% 0%, #eef0f2 0%, #dfe3e6 60%, #d4d8db 100%)' }}>
      <div style={{ transform: `scale(${scale})`, transformOrigin: 'center center' }}>
        <PhoneFrame bg={view === 'onboarding' ? T.navy2 : T.cream}>
          <Stage viewKey={view} navType={navType} bg={view === 'onboarding' ? T.navy2 : T.cream}>{screen}</Stage>
          {audioOpen && <AudioPlayer place={place} lang={lang} setLang={setLang} onClose={() => setAudioOpen(false)} />}
          {toast && view === 'home' && <ScamToast onClose={() => setToast(false)} onView={() => { setToast(false); goTab('shield'); }} />}
          {composer && <Composer place={place} initialType={composer.type} variant={t.composer} onClose={() => setComposer(null)} onSubmit={addContrib} />}
        </PhoneFrame>
      </div>
      <TweaksPanel>
        <TweakSection label="Composer flow" />
        <TweakRadio label="Style" value={t.composer}
          options={[{ value: 'quick', label: 'Quick' }, { value: 'guided', label: 'Guided' }, { value: 'ai', label: 'AI chat' }]}
          onChange={(v) => setTweak('composer', v)} />
        <TweakSection label="Community" />
        <TweakToggle label="AI-learning labels" value={t.aiLearning} onChange={(v) => setTweak('aiLearning', v)} />
        <TweakToggle label="Contributor points" value={t.gamify} onChange={(v) => setTweak('gamify', v)} />
      </TweaksPanel>
    </div>
  );
}

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