// lesson-player.jsx — Reproductor de lecciones por bloques.
// Tipos de bloque: imagen, audio, quiz, reward.

function ActLessonPlayer({ lesson, child, onDone, onExit }) {
  const [idx, setIdx] = React.useState(0);
  const [estrellas, setEstrellas] = React.useState(0);
  const [monedas, setMonedas] = React.useState(0);
  const [respuesta, setRespuesta] = React.useState(null);
  const [acertado, setAcertado] = React.useState(null);
  const [startTs] = React.useState(Date.now());
  const mascota = window.actMascotById(lesson.mascota_id);
  const bloque = lesson.bloques[idx];
  const total = lesson.bloques.length;

  function avanzar() {
    setRespuesta(null);
    setAcertado(null);
    if (idx + 1 >= total) {
      // Done
      const segundos = Math.round((Date.now() - startTs) / 1000);
      const final = bloque.tipo === 'reward'
        ? { estrellas: bloque.estrellas || estrellas, monedas: bloque.monedas || monedas }
        : { estrellas, monedas };
      window.actRecordProgress({
        child_id: child?.id || 'demo',
        lesson_id: lesson.id,
        estrellas: final.estrellas,
        monedas: final.monedas,
        segundos
      }).catch(console.warn);
      onDone && onDone(final);
      return;
    }
    setIdx(idx + 1);
  }

  function elegir(op) {
    if (respuesta) return;
    setRespuesta(op);
    const ok = op === bloque.correcta;
    setAcertado(ok);
    if (ok) {
      setEstrellas(e => e + 1);
      setMonedas(m => m + 3);
    }
  }

  function hablar(texto) {
    try {
      const u = new SpeechSynthesisUtterance(texto);
      u.lang = 'es-MX';
      u.rate = 0.95;
      window.speechSynthesis.cancel();
      window.speechSynthesis.speak(u);
    } catch (_) {}
  }

  // Auto-narrate text on each new block
  React.useEffect(() => {
    if (!bloque) return;
    const txt = bloque.texto || bloque.pregunta;
    if (txt) hablar(txt);
  }, [idx]);

  if (!bloque) return null;

  return (
    <div className="act-player" style={{ background: mascota.colorSuave }}>
      <div className="act-player-top">
        <button className="act-x" onClick={onExit}>✕</button>
        <div className="act-progress">
          <div className="act-progress-bar" style={{ width: ((idx + 1) / total * 100) + '%', background: mascota.color }} />
        </div>
        <div className="act-coins">⭐ {estrellas} · 🪙 {monedas}</div>
      </div>

      <div className="act-player-body">
        <div className="act-mascot" style={{ color: mascota.color }}>
          <div className="act-mascot-emoji">{mascota.emoji}</div>
          <div className="act-mascot-name">{mascota.nombre}</div>
        </div>

        {bloque.tipo === 'imagen' && (
          <div className="act-block-imagen">
            <div className="act-emoji-xl">{bloque.emoji}</div>
            <p>{bloque.texto}</p>
            <button className="act-next" onClick={avanzar} style={{ background: mascota.color }}>
              Siguiente →
            </button>
          </div>
        )}

        {bloque.tipo === 'audio' && (
          <div className="act-block-audio">
            <button className="act-play" onClick={() => hablar(bloque.texto)} style={{ background: mascota.color }}>
              🔊 Escuchar
            </button>
            <p>{bloque.texto}</p>
            <button className="act-next" onClick={avanzar} style={{ background: mascota.color }}>
              Siguiente →
            </button>
          </div>
        )}

        {bloque.tipo === 'texto' && (
          <div className="act-block-texto">
            {bloque.etiqueta && <h3 className="act-texto-etiqueta" style={{ color: mascota.color }}>{bloque.etiqueta}</h3>}
            <p className="act-texto-body">{bloque.texto}</p>
            <button className="act-play" onClick={() => hablar(bloque.texto)} style={{ background: mascota.color, marginRight: 8 }}>
              🔊 Escuchar
            </button>
            <button className="act-next" onClick={avanzar} style={{ background: mascota.color }}>
              Siguiente →
            </button>
          </div>
        )}

        {bloque.tipo === 'quiz' && (
          <div className="act-block-quiz">
            <p className="act-quiz-q">{bloque.pregunta}</p>
            {bloque.visual && <div className="act-emoji-xl">{bloque.visual}</div>}
            <div className="act-options">
              {bloque.opciones.map(op => (
                <button
                  key={op}
                  onClick={() => elegir(op)}
                  disabled={!!respuesta}
                  className={
                    'act-option ' +
                    (respuesta === op ? (acertado ? 'act-ok' : 'act-mal') : '')
                  }
                  style={respuesta == null ? { borderColor: mascota.color } : {}}
                >
                  {op}
                </button>
              ))}
            </div>
            {respuesta && (
              <div className={'act-feedback ' + (acertado ? 'ok' : 'mal')}>
                {acertado ? bloque.retroOk : bloque.retroMal}
              </div>
            )}
            {respuesta && (
              <button className="act-next" onClick={avanzar} style={{ background: mascota.color }}>
                Siguiente →
              </button>
            )}
          </div>
        )}

        {bloque.tipo === 'reward' && (
          <div className="act-block-reward">
            <div className="act-trofeo">🏆</div>
            <h2>{bloque.texto}</h2>
            <div className="act-reward-stars">
              {Array.from({ length: bloque.estrellas || 1 }).map((_, i) => (
                <span key={i}>⭐</span>
              ))}
            </div>
            <button className="act-next" onClick={avanzar} style={{ background: mascota.color }}>
              ¡Terminar!
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

window.ActLessonPlayer = ActLessonPlayer;