function AlienConstructionTraining({user,isOpen,onClose,topic,difficulty='f',onComplete,passNeeded=3,secondsPerQuestion=30}) {
  const [round]=React.useState(()=>window.TrainingStudioCatalog.shuffle(topic?.constructionExercises || window.AlienConstruction.bank(topic?.topicId,difficulty,user?.id)).slice(0,3));
  const [index,setIndex]=React.useState(0),[values,setValues]=React.useState({}),[field,setField]=React.useState(null),[feedback,setFeedback]=React.useState(null),[seconds,setSeconds]=React.useState(secondsPerQuestion);
  const answers=React.useRef([]),locked=React.useRef(false),timer=React.useRef(null),live=React.useRef(true);
  const exercise=round[index];
  React.useEffect(()=>{live.current=true;return()=>{live.current=false;clearTimeout(timer.current);};},[]);
  const finish=(timeout=false)=>{
    if(locked.current||!exercise)return;locked.current=true;
    const result=timeout?{correct:false,reason:'Se acabó el tiempo.',answer:window.AlienConstruction.sentence(exercise,values,difficulty)}:window.AlienConstruction.grade(exercise,values,difficulty);
    const next=[...answers.current,{learningId:exercise.id,questionId:exercise.id,masterIds:exercise.masterIds||[],baseQuestionId:exercise.id,topicIds:[exercise.topicId,...(exercise.additionalTopics||[])],studentAnswer:result.answer,isCorrect:result.correct}];answers.current=next;setFeedback(result);
    timer.current=setTimeout(()=>{if(!live.current)return;if(index+1===round.length){onComplete?.({correct:next.filter(a=>a.isCorrect).length,total:round.length,needed:passNeeded,checked:next.filter(a=>a.isCorrect).length>=passNeeded,answers:next});}else{setIndex(i=>i+1);setValues({});setField(null);setFeedback(null);setSeconds(secondsPerQuestion);locked.current=false;}},1000);
  };
  const finishRef=React.useRef(finish);finishRef.current=finish;
  React.useEffect(()=>{if(!isOpen||feedback||!exercise)return;const id=setInterval(()=>setSeconds(s=>Math.max(0,s-1)),1000);return()=>clearInterval(id);},[isOpen,index,feedback]);
  React.useEffect(()=>{if(seconds===0&&!feedback)finishRef.current(true);},[seconds,feedback]);
  if(!isOpen)return null;
  const asset=exercise && window.REAL_CONSTRUCTION_CONFIG.images[exercise.image];
  const layout=asset && window.REAL_CONSTRUCTION_CONFIG.layouts[asset.layout];
  const names={objective:difficulty==='f'?'Objective':'Substitution',indicator:'Indicator',description:exercise?.endingLabel||'Description',not:'NOT'};
  return <div className="modal-overlay"><div className="modal-content alien-room rc-modal ac-training"><AlienRoomMedia room/>
    <div className="modal-header"><h3>ALIEN CONTACT</h3><span>{index+1} / {round.length} · {seconds}s</span></div>
    <div className="modal-body">{!exercise?<p>No hay escenas para este tema.</p>:<>
      <h3>{exercise.prompt}</h3><img className="ac-scene" src={exercise.media} alt={exercise.alt}/>
      <p>{difficulty==='f'?'Toca las figuras y elige los elementos correctos.':difficulty==='m'?'Escribe cada elemento. Usa un pronombre como sujeto.':'Escribe cada elemento. Usa un pronombre, mayúscula inicial y signo final en el último elemento.'}</p>
      {difficulty!=='f'&&<div className="ac-vocabulary"><strong>Vocabulario disponible</strong><div>{exercise.vocabulary.map(word=><span key={word}>{word}</span>)}</div><small>Substitutions: I · you · he · she · it · we · they</small></div>}
      <div className="rc-canvas"><img src={asset.src} alt=""/>{layout.zones.map(zone=><button type="button" className={`rc-zone rc-${zone.shape}`} disabled={Boolean(feedback)} key={zone.field} aria-label={names[zone.field]} onClick={()=>zone.field==='not'?setValues(v=>({...v,not:v.not===false})):setField(zone.field)} style={{left:`${zone.x/layout.width*100}%`,top:`${zone.y/layout.height*100}%`,width:`${zone.width/layout.width*100}%`,height:`${zone.height/layout.height*100}%`}}><span>{zone.field==='not'?(values.not===false?'+':'✓'):values[zone.field]?'✓':'+'}</span></button>)}</div>
      <div className="ac-field-tabs">{['objective','indicator','description'].map(key=><button key={key} disabled={Boolean(feedback)} onClick={()=>setField(key)}>{names[key]}<strong>{values[key]||'Toca para completar'}</strong></button>)}</div>
      {field&&!feedback&&<div className="ac-entry"><label>{names[field]}{difficulty==='f'?<select autoFocus value={values[field]||''} onChange={e=>setValues(v=>({...v,[field]:e.target.value}))}><option value="">Elige una palabra</option>{(exercise.options[field]||[]).map(word=><option key={word}>{word}</option>)}</select>:<input autoFocus key={field} value={values[field]||''} maxLength={180} onChange={e=>setValues(v=>({...v,[field]:e.target.value}))}/>}</label></div>}
      <p className="ac-preview">{Object.keys(values).length?window.AlienConstruction.sentence(exercise,values,difficulty):''}</p>
      <button className="btn btn-primario" disabled={Boolean(feedback)||!['objective','indicator','description'].every(k=>values[k]?.trim())} onClick={()=>finish()}>Transmitir</button>
      {feedback&&<div role="status" className="ac-feedback"><strong>{feedback.correct?'✓ Correcto':'Revisa tu construcción'}</strong><p>{feedback.reason}</p>{!feedback.correct&&feedback.expectedAnswer&&<p>{feedback.expectedAnswer}</p>}</div>}
    </>}</div><div className="modal-footer"><button className="btn btn-secundario" onClick={onClose}>Cerrar</button></div>
  </div></div>;
}