// Shared ZERO ERROR game. Loaded before the main application.
function ZeroErrorBrandMark({ white = false, className = '' }) {
  const primary = window.ZERO_ERROR_CONFIG?.brand?.[white ? 'whiteMark' : 'blackMark'];
  const fallback = white ? 'blanco.png' : 'negro.png';
  const [src, setSrc] = React.useState(primary || fallback);
  return <img className={`zero-brand-mark ${className}`} src={src} alt="" aria-hidden="true" draggable="false"
    onError={event => { if (src !== fallback) setSrc(fallback); else event.currentTarget.style.visibility = 'hidden'; }} />;
}

function ZeroErrorFigure({ state }) {
  return <g className="zero-figure" fill="none" stroke="currentColor" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="0" cy="-81" r="16" fill="white" />
    <path d="M0 -65V-25M0 -25L-18 8M0 -25L20 8"/>
    <path className="zero-arms" d={state === 'won' ? 'M-29 -87L-19 -59L0 -52L20 -62L30 -87' : 'M-30 -46L0 -56L30 -44'}/>
    {state === 'won' && <path d="M-6 -79Q0 -71 6 -79" strokeWidth="3"/>}
  </g>;
}

function ZeroErrorIllustration({ kind, state }) {
  const won = state === 'won';
  const descriptions = {
    bridge: 'Un personaje cruza un puente suspendido.',
    boulder: 'Un personaje evita una roca que rueda cuesta abajo.',
    sea: 'Un personaje navega cerca de un tiburón.',
    press: 'Un personaje evita una prensa que baja desde el techo.'
  };
  return <svg viewBox="0 0 640 360" role="img" aria-label={`${descriptions[kind]} ${won ? 'A salvo, celebra la victoria.' : state === 'lost' ? 'La situación terminó en derrota.' : 'Todavía está en riesgo.'}`}>
    <g className="zero-scenery">
      <path className="zero-scene-cloud" d="M60 73h48m-23-12h43M470 67h50m-26 12h64"/>
      {kind === 'bridge' && <>
        <path className="zero-land" d="M0 360V235L90 191L173 232V360M466 360V232L554 191L640 235V360"/>
        <path className="zero-land-detail" d="M30 279l42-42 32 16m400 20 34-35 41 30"/>
        <path className="zero-bridge-line" d={state === 'lost' ? 'M120 215Q182 255 240 290M400 290Q458 255 520 215' : 'M120 215Q320 260 520 215'}/>
        <g transform="translate(320 227)"><g className="zero-actor"><ZeroErrorFigure state={state}/></g></g>
      </>}
      {kind === 'boulder' && <>
        <path className="zero-land" d="M0 130L115 170L220 251H640V360H0Z"/>
        <path className="zero-land-detail" d="M20 223l50 24m190 51h65m146-10 36 12"/>
        <g className="zero-boulder"><circle cx="162" cy="153" r="47"/><path d="M139 127l30 7 12 34-27 11-23-19"/></g>
        <g transform="translate(365 241)"><g className="zero-actor"><ZeroErrorFigure state={state}/></g></g>
        <path className="zero-safe-flag" d="M535 248V150m0 0 48 18-48 16"/>
      </>}
      {kind === 'sea' && <>
        <path className="zero-sea-fill" d="M0 263Q40 241 80 263T160 263T240 263T320 263T400 263T480 263T560 263T640 263V360H0Z"/>
        <g className="zero-boat"><path className="zero-hull" d="M228 221H416L385 261H257Z"/>
          <path className="zero-oar" d="M368 207l70 71"/>
          <g transform="translate(320 215)"><g className="zero-actor"><ZeroErrorFigure state={state}/></g></g>
        </g>
        <g className="zero-shark"><path d="M445 274q20-38 47-42l-4 35 28 9Z"/><path d="M431 288h79"/></g>
        <path className="zero-waves" d="M-60 302q30-15 60 0t60 0t60 0t60 0t60 0t60 0t60 0t60 0t60 0t60 0t60 0t60 0"/>
      </>}
      {kind === 'press' && <>
        <path className="zero-land" d="M0 283H640V360H0Z"/>
        <path className="zero-machine-frame" d="M161 284V58H479V284"/>
        <g className="zero-press"><path className="zero-piston" d="M320 5V60"/><rect x="220" y="59" width="200" height="34" rx="5"/><path className="zero-press-stripes" d="M238 65l18 22m22-22 18 22m22-22 18 22m22-22 18 22m22-22 12 15"/></g>
        <g transform="translate(320 272)"><g className="zero-actor"><ZeroErrorFigure state={state}/></g></g>
        <path className="zero-machine-switch" d="M507 240h34v35h-34Z"/><circle cx="524" cy="253" r="5"/>
      </>}
      {won && <g className="zero-celebration"><path d="M225 85l-10-15m197 15 10-15M197 125l-17-4m264 4 17-4M273 51l-3-15m99 15 3-15"/><circle cx="205" cy="55" r="4"/><circle cx="434" cy="50" r="4"/></g>}
    </g>
  </svg>;
}

function ZeroErrorScene({ scene, state, paused }) {
  const [broken, setBroken] = React.useState(false);
  const video = React.useRef(null);
  const kind = ['bridge', 'boulder', 'sea', 'press'].includes(scene?.builtin) ? scene.builtin : 'bridge';
  const src = scene?.[state === 'lost' ? 'loss' : state === 'won' ? 'win' : 'risk'];
  React.useEffect(() => setBroken(false), [src]);
  React.useEffect(() => {
    if (!video.current) return;
    if (paused) video.current.pause();
    else { const play = video.current.play(); if (play?.catch) play.catch(() => {}); }
  }, [paused, src]);
  return <div className={`zero-scene zero-scene-${kind} is-${state}${paused ? ' is-paused' : ''}`}>
    {src && !broken ? (/\.mp4(?:[?#]|$)/i.test(src)
      ? <video ref={video} key={src} src={src} autoPlay={!paused} muted loop playsInline preload="metadata" onError={() => setBroken(true)} aria-label={scene.label || 'Escena ZERO ERROR'} />
      : <img src={src} alt={scene.label || 'Escena ZERO ERROR'} onError={() => setBroken(true)} />)
      : <ZeroErrorIllustration key={`${kind}-${state}`} kind={kind} state={state}/>}
    <ZeroErrorBrandMark className="zero-scene-signature"/>
  </div>;
}

function ZeroErrorGame({ exercise, secondsPerQuestion = 0, contextLabel, training = false, onClose, onComplete }) {
  const questions = exercise?.questions || [];
  const [index, setIndex] = React.useState(0);
  const [answers, setAnswers] = React.useState([]);
  const [state, setState] = React.useState(training ? 'playing' : 'ready');
  const [timeLeft, setTimeLeft] = React.useState(secondsPerQuestion);
  const [scene] = React.useState(() => window.ZeroError.pickScene());
  const [motionPaused, setMotionPaused] = React.useState(() => Boolean(window.matchMedia?.('(prefers-reduced-motion: reduce)').matches));
  const [pageHidden, setPageHidden] = React.useState(document.hidden);
  const dialog = React.useRef(null);
  React.useEffect(() => {
    const previousOverflow = document.body.style.overflow;
    const previousFocus = document.activeElement;
    document.body.style.overflow = 'hidden';
    dialog.current?.focus();
    return () => {
      document.body.style.overflow = previousOverflow;
      if (previousFocus?.isConnected && previousFocus.focus) previousFocus.focus();
    };
  }, []);
  React.useEffect(() => { if (dialog.current) dialog.current.scrollTop = 0; }, [state, index]);
  React.useEffect(() => {
    const update = () => setPageHidden(document.hidden);
    document.addEventListener('visibilitychange', update);
    return () => document.removeEventListener('visibilitychange', update);
  }, []);
  const locked = React.useRef(false);
  const sent = React.useRef(false);
  const deadline = React.useRef(training ? Date.now() + secondsPerQuestion * 1000 : 0);
  const question = questions[index];
  const lastAnswer = answers[answers.length - 1];
  const notify = result => { if (!sent.current) { sent.current = true; onComplete?.(result); } };
  React.useEffect(() => {
    if (!training || (state !== 'won' && state !== 'lost')) return;
    const id = window.setTimeout(() => notify(window.ZeroError.result(questions, answers)), 1100);
    return () => window.clearTimeout(id);
  }, [state, training]);
  const respond = (value, timedOut = false) => {
    if (locked.current || state !== 'playing' || !question) return;
    locked.current = true;
    const expired = timedOut || (secondsPerQuestion > 0 && Date.now() >= deadline.current);
    const isCorrect = !expired && value === question.correct;
    const entry = { ...question, userAnswer:expired ? null : value, isCorrect, timedOut:expired,
      learningId:question.learningId||question.id,sourceQuestionNumber:question.sourceQuestionNumber || index + 1,
      correctAnswerLabel:question.options.find(o => o.value === question.correct)?.label,
      explanation:expired ? 'Se acabó el tiempo.' : question.corrections?.[value] || '' };
    const next = [...answers, entry];
    setAnswers(next);
    if (!isCorrect || index + 1 === questions.length) {
      setState(isCorrect ? 'won' : 'lost');
      // Level progression is saved immediately; training continues on the result button.
      if (!training) notify(window.ZeroError.result(questions, next));
    } else {
      setIndex(i => i + 1);
      deadline.current = Date.now() + secondsPerQuestion * 1000;
      setTimeLeft(secondsPerQuestion);
    }
  };
  React.useEffect(() => { locked.current = false; }, [index]);
  React.useEffect(() => {
    if (state !== 'playing' || !secondsPerQuestion) return;
    const id = window.setInterval(() => {
      const remaining = Math.max(0, Math.ceil((deadline.current - Date.now()) / 1000));
      setTimeLeft(remaining);
      if (!remaining) respond(null, true);
    }, 250);
    return () => window.clearInterval(id);
  }, [state, index, secondsPerQuestion]);
  const finish = () => {
    if (training) notify(window.ZeroError.result(questions, answers));
    else onClose?.();
  };
  const leave = () => {
    if (state === 'won' || state === 'lost') { finish(); return; }
    if (state === 'playing') {
      locked.current = true;
      setState('lost');
      if (!training) notify(window.ZeroError.result(questions, answers));
      return;
    }
    if (training) { notify(window.ZeroError.result(questions, [])); return; }
    onClose?.();
  };
  const handleDialogKeys = event => {
    if (event.key === 'Escape') { event.preventDefault(); leave(); }
    if (event.key !== 'Tab') return;
    const buttons = Array.from(dialog.current.querySelectorAll('button:not(:disabled)'));
    const first = buttons[0], last = buttons[buttons.length - 1];
    if (event.shiftKey && (document.activeElement === first || document.activeElement === dialog.current)) {
      event.preventDefault(); last?.focus();
    } else if (!event.shiftKey && document.activeElement === last) {
      event.preventDefault(); first?.focus();
    }
  };
  return <div className="modal-overlay zero-overlay">
    <section ref={dialog} tabIndex={-1} onKeyDown={handleDialogKeys} className={`modal-content zero-game is-${state}`} role="dialog" aria-modal="true" aria-label="ZERO ERROR">
      <header className="zero-header"><div><span className="zero-eyebrow">{training ? 'ENGLISH LEVEL TRAINING' : 'PASO A PASO'}</span><h2>ZERO <em>ERROR</em></h2></div>
        <img className="zero-logo" src="assets/ZERO/letras.png" alt="Todos Bilingües. Así de fácil." />
      </header>
      <div className="zero-layout"><div className="zero-visual"><ZeroErrorScene scene={scene} state={state} paused={motionPaused || pageHidden}/>
        <div className="zero-rule"><strong>01 VIDA</strong><span>Un error termina la ronda.</span></div>
        <div className="zero-progress" aria-label={`${answers.filter(a => a.isCorrect).length} de ${questions.length} correctas`}>{questions.map((q, i) => <span key={i} className={answers[i] ? answers[i].isCorrect ? 'is-safe' : 'is-failed' : ''}/>)}</div>
      </div><div className="zero-play">
        <p className="zero-context">{contextLabel || exercise?.title}</p>
        {state === 'ready' && <div className="zero-intro"><span className="zero-eyebrow">EL RETO</span><h3>10 sin equivocarte.<br/>¡Dale!</h3><p>{training ? 'Tres preguntas. Un solo error anula los tres puntos. Después continúa tu ruta.' : `Supera las ${questions.length} preguntas sin fallar para desbloquear la siguiente casilla.`}</p>{secondsPerQuestion > 0 && <p>{secondsPerQuestion} segundos por pregunta.</p>}<button className="zero-button" disabled={!questions.length} onClick={() => { deadline.current = Date.now() + secondsPerQuestion * 1000; setState('playing'); }}>ACEPTAR EL RETO ↗</button></div>}
        {state === 'playing' && question && <><div className="zero-topline"><span>PREGUNTA {String(index + 1).padStart(2, '0')} / {questions.length}</span>{secondsPerQuestion > 0 && <strong className={timeLeft <= 5 ? 'zero-urgent' : ''}>{timeLeft}s</strong>}</div>
          {secondsPerQuestion > 0 && <div className="zero-clock"><span style={{width:`${timeLeft / secondsPerQuestion * 100}%`}}/></div>}
          {question.media&&<div className="zero-media">{/\.(mp4|webm)(?:[?#]|$)/i.test(question.media)?<video src={question.media} controls playsInline/>:<img src={question.media} alt="Recurso de la pregunta" style={{maxWidth:'100%',maxHeight:400}}/>}</div>}<h3 className="zero-question">{question.question}</h3><div className="zero-options">{question.options.map((option, i) => <button key={option.value} onClick={() => respond(option.value)}><span>{String.fromCharCode(65 + i)}</span>{option.label.replace(/^[A-Z]\)\s*/, '')}</button>)}</div></>}
        {(state === 'lost' || state === 'won') && <div className="zero-result" role="status"><span className="zero-eyebrow">{state === 'won' ? 'MISIÓN CUMPLIDA' : 'RONDA TERMINADA'}</span><h3>{state === 'won' ? 'IMPECABLE.' : training ? 'RONDA PERDIDA' : 'Fíjate por qué te equivocaste. ↓'}</h3><p>{state === 'won' ? `${questions.length} de ${questions.length}. Cero errores.` : training ? '0 de 3 puntos. Tu ruta continúa.' : 'Esta casilla sigue pendiente. Vuelve a intentarlo desde el mapa.'}</p>{!training && state === 'lost' && lastAnswer?.isCorrect === false && <div className="zero-correction"><strong>{lastAnswer.timedOut ? 'Tiempo agotado.' : 'Respuesta correcta:'} {lastAnswer.correctAnswerLabel}</strong><p>{lastAnswer.explanation}</p></div>}<button className="zero-button" hidden={training} onClick={finish}>{training ? 'CONTINUAR LA RUTA →' : 'VOLVER AL MAPA →'}</button></div>}
      </div></div>
      <footer className="zero-footer"><span className="zero-footer-brand"><ZeroErrorBrandMark white/> ASÍ DE FÁCIL.</span><div className="zero-footer-actions"><button type="button" aria-pressed={motionPaused} onClick={() => setMotionPaused(value => !value)}>{motionPaused ? 'Activar animación' : 'Pausar animación'}</button>{(state === 'playing' || state === 'ready') && <button onClick={leave}>{state === 'playing' ? 'Abandonar ronda' : 'Salir'}</button>}</div></footer>
    </section>
  </div>;
}

function ZeroErrorExerciseModal({ exercise, onClose, onSubmitResult, title }) {
  return <ZeroErrorGame key={exercise?.id} exercise={exercise} contextLabel={title} onClose={onClose} onComplete={result => {
    const questionResults = result.answers.map(a => ({learningId:a.learningId,questionNumber:a.sourceQuestionNumber, masterIds:a.masterIds||[],correct:a.isCorrect, primaryTopics:a.primaryTopics, additionalTopics:a.additionalTopics}));
    onSubmitResult?.(result.checked ? 100 : 0, {...result, score:result.checked ? 100 : 0, questionResults, exercise});
  }}/>;
}

function MiniZeroErrorChallengeModal({ isOpen, exercise, secondsPerQuestion, contextLabel, onClose, onComplete }) {
  if (!isOpen) return null;
  return <ZeroErrorGame key={exercise?.id} exercise={exercise} secondsPerQuestion={secondsPerQuestion} contextLabel={contextLabel} training onClose={onClose} onComplete={onComplete}/>;
}