// app.jsx — root, estado, navegação e tweaks
const { useState: useA, useEffect: useAE } = React;

function hexToRgba(hex, a) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
  return `rgba(${r},${g},${b},${a})`;
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ff2d2d",
  "displayFont": "Barlow Condensed",
  "glow": true,
  "avatarPulse": true,
  "radius": 22
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [onboarded, setOnboarded] = useA(false);
  const [screen, setScreen] = useA('dashboard');
  const [inWorkout, setInWorkout] = useA(false);
  const [user, setUser] = useA(USER_STATE);
  const [profile, setProfile] = useA(null);

  const rootStyle = {
    '--accent': t.accent,
    '--accent-soft': hexToRgba(t.accent, 0.16),
    '--ff-display': `'${t.displayFont}', 'Arial Narrow', sans-serif`,
    '--r-lg': t.radius + 'px',
    '--r-xl': (t.radius + 8) + 'px',
    '--glow': t.glow ? 'drop-shadow(0 0 8px var(--accent-soft))' : 'none',
    '--aura-play': t.avatarPulse ? 'running' : 'paused',
  };

  const reset = () => { setOnboarded(false); setScreen('dashboard'); setInWorkout(false); };

  return (
    <div id="app-root" style={rootStyle}>
      <PhoneFrame>
        {!onboarded ? (
          <Onboarding onComplete={(p) => { setProfile(p); setUser(u => ({ ...u, name: p.name || u.name, level: p.level || u.level, sex: p.sex || u.sex })); setOnboarded(true); }} />
        ) : inWorkout ? (
          <Workout user={user}
            onExit={() => setInWorkout(false)}
            onFinish={() => { setInWorkout(false); setScreen('dashboard'); }} />
        ) : (
          <React.Fragment>
            {screen === 'dashboard' && <Dashboard user={user} onStart={() => setInWorkout(true)} onNav={setScreen} />}
            {screen === 'workout'  && <Dashboard user={user} onStart={() => setInWorkout(true)} onNav={setScreen} />}
            {screen === 'avatar'   && <AvatarScreen user={user} />}
            {screen === 'history'  && <HistoryScreen user={user} />}
            <BottomNav active={screen} onNav={(s) => { if (s === 'workout') setInWorkout(true); else setScreen(s); }} />
          </React.Fragment>
        )}
      </PhoneFrame>

      <TweaksPanel>
        <TweakSection label="Cores" />
        <TweakColor label="Acento" value={t.accent}
          options={['#ff2d2d', '#e8c14a', '#7c5cff', '#2fd07a', '#2a8fff']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Tipografia" />
        <TweakSelect label="Fonte display" value={t.displayFont}
          options={['Barlow Condensed', 'Oswald', 'Anton', 'Archivo']}
          onChange={(v) => setTweak('displayFont', v)} />
        <TweakSection label="Estilo" />
        <TweakSlider label="Arredondamento" value={t.radius} min={6} max={30} unit="px"
          onChange={(v) => setTweak('radius', v)} />
        <TweakToggle label="Brilho (glow)" value={t.glow} onChange={(v) => setTweak('glow', v)} />
        <TweakToggle label="Aura do avatar" value={t.avatarPulse} onChange={(v) => setTweak('avatarPulse', v)} />
        <TweakSection label="Demo" />
        <TweakButton label="Reiniciar onboarding" onClick={reset} />
      </TweaksPanel>
    </div>
  );
}

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