// app.jsx — Router de v2.
// Pantallas: auth → dashboard → lessons-list → player → done.

function ActApp() {
  const [session, setSession] = React.useState(null);
  const [route, setRoute] = React.useState('boot');  // boot, auth, dash, lessons, player, done
  const [activeChild, setActiveChild] = React.useState(null);
  const [activeLesson, setActiveLesson] = React.useState(null);
  const [lastReward, setLastReward] = React.useState(null);

  React.useEffect(() => {
    (async () => {
      const s = await window.actGetSession();
      if (s) { setSession(s); setRoute('dash'); }
      else setRoute('auth');
    })();
  }, []);

  function pickChild(child) {
    setActiveChild(child);
    setRoute('lessons');
  }
  function pickLesson(lesson) {
    setActiveLesson(lesson);
    setRoute('player');
  }
  function onDone(reward) {
    setLastReward(reward);
    setRoute('done');
  }
  async function signOut() {
    await window.actSignOut();
    setSession(null);
    setActiveChild(null);
    setRoute('auth');
  }

  if (route === 'boot') {
    return <div className="act-splash"><div className="act-logo-big">🦊</div><p>Cargando…</p></div>;
  }
  if (route === 'auth') {
    return <window.ActAuthScreen onSession={async () => {
      const s = await window.actGetSession();
      setSession(s); setRoute('dash');
    }} />;
  }
  if (route === 'dash') {
    return <window.ActParentDashboard
      session={session}
      onPickChild={pickChild}
      onSignOut={signOut}
    />;
  }
  if (route === 'lessons') {
    return <ActLessonsScreen
      activeChild={activeChild}
      onBack={() => setRoute('dash')}
      onPick={pickLesson}
    />;
  }
  if (route === 'player') {
    return <window.ActLessonPlayer
      lesson={activeLesson}
      child={activeChild}
      onDone={onDone}
      onExit={() => setRoute('lessons')}
    />;
  }
  if (route === 'done') {
    return (
      <div className="act-done">
        <div className="act-trofeo">🏆</div>
        <h1>¡Lo lograste, {activeChild?.nombre}!</h1>
        <p>⭐ {lastReward?.estrellas || 0} estrellas · 🪙 {lastReward?.monedas || 0} monedas</p>
        <button className="act-next" onClick={() => setRoute('lessons')}>
          Otra lección
        </button>
        <button className="act-link" onClick={() => setRoute('dash')}>
          Volver con mamá
        </button>
      </div>
    );
  }
  return null;
}

function ActLessonsScreen({ activeChild, onBack, onPick }) {
  const [tick, setTick] = React.useState(0);
  const lessons = Object.values(window.ACT_LESSONS || {});

  React.useEffect(() => {
    if (lessons.length > 0) return;
    let cancelled = false;
    const start = Date.now();
    function poll() {
      if (cancelled) return;
      const count = Object.keys(window.ACT_LESSONS || {}).length;
      if (count !== lessons.length) {
        setTick(t => t + 1);
        return;
      }
      if (Date.now() - start < 15000) {
        setTimeout(poll, 400);
      } else {
        setTick(t => t + 1); // final refresh
      }
    }
    setTimeout(poll, 400);
    return () => { cancelled = true; };
  }, [tick]);

  const grouped = {};
  for (const l of lessons) {
    const key = (l.materia || 'otros') + ' · ' + (l.nivel || '');
    if (!grouped[key]) grouped[key] = [];
    grouped[key].push(l);
  }
  const groupKeys = Object.keys(grouped).sort();

  return (
    <div className="act-lessons">
      <header className="act-dash-top">
        <button className="act-link" onClick={onBack}>← Atrás</button>
        <h1>Lecciones de {activeChild?.nombre}</h1>
        <span style={{ width: 60 }} />
      </header>
      {lessons.length === 0 && (
        <div className="act-empty">Cargando cursos… ({Object.keys(window.ACT_LESSONS_INDEX || {}).length} en camino)</div>
      )}
      {groupKeys.map(gk => (
        <div key={gk} className="act-lesson-group">
          <h2 className="act-lesson-group-title">{gk} <span className="act-lesson-group-count">({grouped[gk].length})</span></h2>
          <div className="act-lessons-grid">
            {grouped[gk].sort((a,b)=>(a.num||0)-(b.num||0)).map(l => {
              const m = window.actMascotById(l.mascota_id);
              return (
                <button
                  key={l.id}
                  className="act-lesson-card"
                  style={{ background: m.colorSuave, borderColor: m.color }}
                  onClick={() => onPick(l)}
                >
                  <div className="act-lesson-emoji">{m.emoji}</div>
                  <div className="act-lesson-title">{l.titulo}</div>
                  <div className="act-lesson-meta">{l.materia} · {l.nivel}</div>
                </button>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

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