// App shell — routing, profile state, persistence.
function App() {
  const [profile, setProfile] = React.useState(() => {
    let p = OAStorage.load();
    p = OAStorage.rollStreak(p);
    return p;
  });

  const [screen, setScreen] = React.useState(() => profile.onboarded ? 'home' : 'onboarding');
  const [lastResult, setLastResult] = React.useState(null);

  // Apply settings on mount + when changed
  React.useEffect(() => {
    applyPalette(profile.settings.palette);
    OASound.setEnabled(profile.settings.soundsOn);
    document.body.classList.remove('oa-fs-besar', 'oa-fs-sangat-besar');
    if (profile.settings.fontScale === 'besar') document.body.classList.add('oa-fs-besar');
    if (profile.settings.fontScale === 'sangat-besar') document.body.classList.add('oa-fs-sangat-besar');
  }, [profile.settings.palette, profile.settings.soundsOn, profile.settings.fontScale]);

  // Save on every change
  React.useEffect(() => {
    OAStorage.save(profile);
  }, [profile]);

  // Hide splash once mounted
  React.useEffect(() => {
    const splash = document.querySelector('.oa-splash');
    if (splash) {
      splash.style.transition = 'opacity .4s ease';
      splash.style.opacity = '0';
      setTimeout(() => splash.remove(), 500);
    }
  }, []);

  // Read deep-link from query string
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const target = params.get('screen');
    if (target === 'profile' && profile.onboarded) setScreen('profile');
  }, []);

  const update = (changes) => setProfile(p => ({ ...p, ...changes }));
  const updateSettings = (changes) => setProfile(p => ({ ...p, settings: { ...p.settings, ...changes } }));

  const handleOnboardDone = ({ name }) => {
    update({ name, onboarded: true, joined: profile.joined || OAStorage.isoDay() });
    setScreen('home');
  };

  const handleOpenLesson = (kind) => {
    setScreen(kind);
  };

  const finishLesson = (kind, stats) => {
    const before = profile;
    const xpGained = 60;
    const after = OAStorage.recordLesson(before, kind, xpGained);

    const newBadgeId = Object.keys(after.badges).find(id => !before.badges[id]);
    setProfile(after);
    setLastResult({
      stats: { xp: xpGained, hearts: stats.hearts, accuracy: stats.accuracy },
      newBadge: newBadgeId,
      allDone: ['memory', 'numbers', 'language', 'differences'].every(k => after.completedToday[k]),
    });
    setScreen('result');
  };

  const handleResetData = () => {
    OAStorage.reset();
    const p = OAStorage.load();
    setProfile(p);
    setScreen('onboarding');
  };

  const navTab = (k) => {
    if (k === 'profile') setScreen('profile');
    else if (k === 'badges') setScreen('profile');
    else setScreen('home');
  };

  const isGame = ['memory', 'numbers', 'language', 'differences'].includes(screen);
  const showTabBar = !isGame && screen !== 'onboarding' && screen !== 'result';

  return (
    <div className="oa-app-shell">
      {!profile.onboarded && screen === 'onboarding' && (
        <Onboarding profile={profile} onDone={handleOnboardDone} />
      )}

      {profile.onboarded && screen === 'home' && (
        <Home
          profile={profile}
          onOpenLesson={handleOpenLesson}
          onOpenProfile={() => setScreen('profile')}
        />
      )}

      {profile.onboarded && screen === 'profile' && (
        <Profile
          profile={profile}
          onBack={() => setScreen('home')}
          onUpdateSettings={updateSettings}
          onChangeName={(name) => update({ name })}
          onResetData={handleResetData}
        />
      )}

      {screen === 'memory' && (
        <MemoryGame onExit={() => setScreen('home')} onComplete={(s) => finishLesson('memory', s)} />
      )}
      {screen === 'numbers' && (
        <NumbersGame onExit={() => setScreen('home')} onComplete={(s) => finishLesson('numbers', s)} />
      )}
      {screen === 'language' && (
        <LanguageGame onExit={() => setScreen('home')} onComplete={(s) => finishLesson('language', s)} />
      )}
      {screen === 'differences' && (
        <DifferencesGame onExit={() => setScreen('home')} onComplete={(s) => finishLesson('differences', s)} />
      )}

      {screen === 'result' && lastResult && (
        <ResultScreen
          stats={lastResult.stats}
          newBadge={lastResult.newBadge}
          allDone={lastResult.allDone}
          onContinue={() => setScreen('home')}
        />
      )}

      {showTabBar && <TabBar active={screen} onNav={navTab} />}
      <InstallPrompt />
    </div>
  );
}

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