/* app.jsx — Top-level state machine for Bulder Bonus prototype */
/* global React, ReactDOM */

const { useState, useEffect } = React;

// Screen registry — drives presenter rail
const SCREENS = [
  { id: 'intro',             title: 'Intro',                     group: 'Onboarding' },
  { id: 'oversikt',          title: 'Oversikt (INN → SALDO → UT)', group: 'Onboarding' },
  { id: 'kalkulator',        title: 'Personlig kalkulator',      group: 'Onboarding' },
  { id: 'klar',              title: 'Du er med',                 group: 'Onboarding' },
  { id: 'hjem',              title: 'Hjem (Bulder-app)',         group: 'Produkt' },
  { id: 'bonus-hjem',        title: 'Bonus-saldo',               group: 'Produkt' },
  { id: 'opptjening',        title: 'Opptjening — formel',       group: 'Produkt' },
  { id: 'bruk-meny',         title: 'Bruk bonus — meny',         group: 'Produkt' },
  { id: 'eurobonus',         title: 'EuroBonus konvertering',    group: 'Produkt' },
  { id: 'eurobonus-success', title: 'EuroBonus suksess',         group: 'Produkt' },
  { id: 'kontant',           title: 'Kontantutbetaling',         group: 'Produkt' },
  { id: 'maanedlig',         title: 'Månedlig push-summary',     group: 'Produkt' },
  { id: 'compare',           title: 'Kontant vs EuroBonus',      group: 'Produkt' },
];

function App() {
  const [screenId, setScreenId] = useState('intro');
  const [optedIn] = useState(true);  // bonuskonto aktivert som default
  const [euroAmt, setEuroAmt] = useState(10000);

  const idx = SCREENS.findIndex(s => s.id === screenId);

  // Jump by index from presenter rail
  const jump = (i) => setScreenId(SCREENS[i].id);
  const goto = (id) => setScreenId(id);

  // Bottom-nav tab mapping (when in product screens)
  const goToTab = (tab) => {
    if (tab === 'hjem') goto('hjem');
    else if (tab === 'bulder') goto('bonus-hjem');
    // others are no-op for the prototype
  };

  // Skip onboarding straight to hjem
  const skip = () => goto('hjem');

  // Render the right screen
  let screen;
  switch (screenId) {
    case 'intro':
      screen = <OnboardingIntro onNext={() => goto('oversikt')} onSkip={skip} />;
      break;
    case 'oversikt':
      screen = <OnboardingOversikt onNext={() => goto('kalkulator')} onBack={() => goto('intro')} />;
      break;
    case 'kalkulator':
      screen = <OnboardingKalkulator onNext={() => goto('klar')} onBack={() => goto('oversikt')} />;
      break;
    case 'klar':
      screen = <OnboardingKlar onNext={() => goto('hjem')} optedIn={optedIn} />;
      break;
    case 'hjem':
      screen = <Hjem optedIn={optedIn} goto={goto} goToTab={goToTab} />;
      break;
    case 'bonus-hjem':
      screen = <BonusHjem goto={goto} goToTab={goToTab} />;
      break;
    case 'opptjening':
      screen = <OpptjeningDetalj goto={goto} />;
      break;
    case 'bruk-meny':
      screen = <BrukMeny goto={goto} />;
      break;
    case 'eurobonus':
      screen = <EuroBonusFlow goto={goto} setEuroAmt={setEuroAmt} />;
      break;
    case 'eurobonus-success':
      screen = <EuroBonusSuccess goto={goto} euroAmt={euroAmt} />;
      break;
    case 'kontant':
      screen = <KontantFlow goto={goto} />;
      break;
    case 'maanedlig':
      screen = <MaanedligPush goto={goto} />;
      break;
    case 'compare':
      screen = <Sammenlign goto={goto} />;
      break;
    default:
      screen = <div style={{ padding: 40, color: '#fff' }}>Unknown screen: {screenId}</div>;
  }

  // Label each screen for [data-screen-label] so comments are anchored to scenes
  const label = `${String(idx + 1).padStart(2, '0')} ${SCREENS[idx].title}`;

  return (
    <div className="stage">
      <PresenterRail screens={SCREENS} current={idx} onJump={jump} />
      <div data-screen-label={label}>
        <Phone>{screen}</Phone>
      </div>
    </div>
  );
}

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