async function validateReactionClip(file){
 if(!file)return;
 if(!/\.(gif|mp4)$/i.test(file.name))throw Error('Reaction usa GIF animado o MP4.');
 if(/\.mp4$/i.test(file.name)){const url=URL.createObjectURL(file);try{await new Promise((resolve,reject)=>{const video=document.createElement('video');video.preload='metadata';video.onloadedmetadata=()=>resolve();video.onerror=()=>reject(Error('No se pudo leer el MP4.'));video.src=url;});}finally{URL.revokeObjectURL(url);}}
}
function AuthoringMediaGuide({activity,layout}){
 const recommendations={reaction:layout==='embedded'?'Tarjeta completa: PNG o JPG, vertical 9:16; recomendado 900 x 1600 px. Incluye pregunta y opciones.':'Material central: GIF animado (preferido) o MP4 de cualquier duracion. Se reproduce en loop. Recomendamos clips de unos 3 segundos. Recomendado 1600 x 900 px (16:9); la tarjeta es vertical 900 x 1600 px (9:16). Exporta el GIF con repeticion infinita.',zero:'Imagen opcional: PNG, JPG, WebP o GIF; recomendado 1600 x 900 px (16:9). Video: MP4 o WebM, 1280 x 720 px (16:9). Escribe la pregunta y opciones en el formulario.',vocabulary:'Sube solamente el GIF central, sin título, palabra ni botones. Recomendado 640 x 640 px (1:1). Declara palabra, categoría y, para verbos, las formas 1, 2 y 3.',alien:'Escena de Alien Contact (ELT): GIF, PNG, JPG o WebP; recomendado 1600 x 900 px (16:9). Video: MP4 o WebM, 1280 x 720 px (16:9).',mirror:'Imagen: PNG, JPG, WebP o GIF; recomendado 1600 x 900 px (16:9). Video: MP4 o WebM, 1280 x 720 px (16:9).'};
 return <aside className="authoring-workflow-hint"><strong>Cómo preparar el archivo</strong><p>{recommendations[activity]}</p><p>Máximo 20 MB por archivo. Las dimensiones son recomendaciones; revisa el encuadre en la vista previa. El banco acepta PNG, JPG, GIF, WebP, MP4 y WebM; usa los formatos indicados para cada Maker.</p></aside>;
}

function TopicAdministration({catalog,request,onChanged}){
 const [id,setId]=React.useState(''),[name,setName]=React.useState(''),[version,setVersion]=React.useState(0),[category,setCategory]=React.useState('completeIdea'),[error,setError]=React.useState('');
 return <section><h4>Topics y subtopics</h4><p>t7 agrupa t7.1, t7.2 y t7.3. Puedes cambiar el topic principal de cada ejercicio desde Ver / editar. Cambiar su clasificación no borra el ejercicio.</p><form onSubmit={async e=>{e.preventDefault();try{await request('/authoring/topics',{method:'POST',body:JSON.stringify({id,name,version,category,parentId:id.includes('.')?id.slice(0,id.lastIndexOf('.')):null})});onChanged(await request('/authoring/catalog'));setId('');setName('');setVersion(0);setError('');}catch(err){setError(err.message);}}}><label>Código<input required pattern="t[0-9]+(\.[0-9]+)*" value={id} onChange={e=>{setId(e.target.value);setVersion(catalog.topics.find(t=>t.id===e.target.value)?.version||0);}} placeholder="t7.1"/></label><label>Nombre<input required value={name} onChange={e=>setName(e.target.value)}/></label><label>Rama de Specific Level<select value={category} onChange={e=>setCategory(e.target.value)}><option value="completeIdea">Estructuras / Complete Idea</option><option value="extraInformation">Extra Information</option><option value="specialTechnique">Special Technique</option></select></label><button>Guardar topic</button></form>{error&&<p role="alert">{error}</p>}{catalog.topics.map(t=><article key={t.id}><strong>{t.id} · {t.name}</strong><button onClick={()=>{setId(t.id);setName(t.name);setVersion(t.version||0);setCategory(t.category||'completeIdea');}}>Modificar</button></article>)}</section>;
}
function MakerCardPreview({exercise}){
 const [src,setSrc]=React.useState(''),[error,setError]=React.useState('');
 React.useEffect(()=>{let live=true,url='';setError('');if(exercise.layout==='embedded'){setSrc(exercise.media);return;}window.SpeedCard.generate(exercise,s=>s).then(card=>{url=URL.createObjectURL(card.blob);if(live)setSrc(url);}).catch(e=>{if(live)setError(e.message);});return()=>{live=false;if(url)URL.revokeObjectURL(url);};},[exercise.layout,exercise.media,exercise.question,JSON.stringify(exercise.options)]);
 const zones=exercise.layout==='embedded'?exercise.hotspots:window.SpeedCard.defaults(exercise.options.length);
 return <div>{error&&<p role="alert">{error}</p>}<div style={{position:'relative',width:'100%'}}>{src&&<img src={src} alt="Tarjeta Reaction" style={{display:'block',width:'100%'}}/>}{src&&exercise.layout==='generated'&&window.SpeedCard.animated(exercise.media)&&(/\.mp4(?:[?#]|$)/i.test(exercise.media)?<video src={exercise.media} autoPlay muted loop playsInline style={{position:'absolute',left:0,top:'23.125%',width:'100%',height:'41.25%',objectFit:'contain',background:'white',pointerEvents:'none'}}/>:<img src={exercise.media} alt="Escena animada de Reaction" style={{position:'absolute',left:0,top:'23.125%',width:'100%',height:'41.25%',objectFit:'contain',background:'white',pointerEvents:'none'}}/>)}{src&&zones?.map((r,i)=><button key={i} type="button" title={exercise.options[i]} aria-label={'Probar respuesta '+(i+1)} style={{position:'absolute',left:r.x+'%',top:r.y+'%',width:r.w+'%',height:r.h+'%',border:'2px dashed #159b89',background:'#00a08018'}} onClick={()=>window.alert(i===exercise.correct?'Respuesta correcta':'Esta respuesta no es la correcta')}>{i+1}</button>)}</div></div>;
}
function ExerciseContentPreview({exercise,compact=false}){
 const options=exercise.options||[],valid=(exercise.validAnswers||[]).filter(a=>a.trim()),hasOptions=['reaction','zero'].includes(exercise.type)&&options.length>0;
 const media=(typeof exercise.media==='string'?exercise.media:exercise.media?.src||'').replace('DINAMICS/JUEGOS/MATE/','DINAMICS/JUEGOS/WEB/MATE/');
 const video=/\.(mp4|webm|mov)(?:[?#]|$)/i.test(media);
 return <section className={'exercise-preview'+(compact?' is-compact':'')} aria-label="Vista previa del ejercicio">
 <div className="exercise-preview-heading"><strong>{compact?'Contenido del ejercicio':'Vista previa en vivo'}</strong><span>{exercise.type==='vocabulary'?'Vocabulario':media?'Con recurso visual':'Ejercicio de texto'}</span></div>
 {!compact&&<h4>{exercise.title||'Tu nuevo ejercicio'}</h4>}
 {exercise.type==='reaction'&&exercise.layout?<MakerCardPreview exercise={exercise}/>:media&&<div className="exercise-preview-media">{video?<video src={media} controls muted playsInline preload="metadata" aria-label={'Video de '+(exercise.title||'ejercicio')}/>:<img src={media} alt={exercise.title||'Recurso del ejercicio'} loading="lazy"/>}</div>}
 <p className={'exercise-preview-question'+(!(exercise.question||exercise.word)?' is-placeholder':'')}>{exercise.question||exercise.word||(video?'Reproduce el video para revisar la pregunta y las respuestas incluidas.':compact?'Este registro no incluye una pregunta de texto.':'Escribe la pregunta o consigna: aparecerá aquí tal cual.')}</p>
 {hasOptions&&<ol className="exercise-preview-options">{options.map((option,i)=>{const label=typeof option==='string'?option:option.label;const correct=typeof option==='string'?exercise.correct===i:exercise.correct===option.value;return <li key={i} className={correct?'is-correct':''}><span className="exercise-option-number">{i+1}</span><span>{label||'Respuesta '+(i+1)+' por escribir'}</span>{correct&&<strong className="exercise-correct-label">✓ Correcta</strong>}</li>;})}</ol>}
 {['alien','mirror'].includes(exercise.type)&&<div><small>Respuestas completas válidas</small>{valid.length?<ul className="exercise-preview-options">{valid.map((answer,i)=><li key={i} className="is-correct"><span>{answer}</span><strong className="exercise-correct-label">✓ Válida</strong></li>)}</ul>:!compact&&<p className="is-placeholder">Agrega las respuestas válidas para revisarlas aquí.</p>}</div>}
 {exercise.type==='alien'&&exercise.finalWords?.some(Boolean)&&<p>Palabras finales: {exercise.finalWords.filter(Boolean).join(' · ')}</p>}
 {exercise.type==='vocabulary'&&exercise.variants?.some(Boolean)&&<p>Variantes: {exercise.variants.filter(Boolean).join(' · ')}</p>}
 {!compact&&<small>Se actualiza mientras escribes. El verde identifica la respuesta correcta o válida.</small>}
 </section>;
}

function EducationalAuthoring({user,baseUrl}){
 const [catalog,setCatalog]=React.useState(null),[items,setItems]=React.useState([]),[tab,setTab]=React.useState('create'),[error,setError]=React.useState(''),[notice,setNotice]=React.useState(''),[busy,setBusy]=React.useState(false),[selected,setSelected]=React.useState(null),[search,setSearch]=React.useState(''),[libraryType,setLibraryType]=React.useState(''),[mediaType,setMediaType]=React.useState('reaction');
 const empty=type=>({type,title:'',primaryTopic:'',connectedTopics:[],difficulty:'f',contexts:type==='alien'?['elt']:['pap','elt'],layout:'generated',hotspots:[],cardMedia:'',distribution:'GENERAL',masterIds:[],question:'',options:['',''],correct:0,media:'',validAnswers:[],ideaKind:'affirmative',contactMode:'all',contactGroups:[],contactCategoryIds:[],contactRoleCodes:[],learning:{structure:.35,logic:.05},zeroMode:'normal',category:'',word:'',variants:[],unlock:'',finalWords:[]});
 const [form,setForm]=React.useState(()=>empty('reaction'));
 const request=(route,options)=>window.TeacherRoomClient.request(baseUrl,user,route,options);
 const resolveMedia=src=>String(src||'').startsWith('/authoring/')?baseUrl.replace(/\/$/,'')+src:src;
 async function upload(file,activity=form.type,purpose="materiales"){if(!file)return;if(file.size>20*1024*1024)throw Error('El archivo supera 20 MB. Reduce su tamaño.');const result=await request('/authoring/media?activity='+activity+'&purpose='+purpose,{method:'POST',headers:{'Content-Type':'application/octet-stream','X-File-Name':encodeURIComponent(file.name||'reaction-tarjeta.png')},body:file});const c=await request('/authoring/catalog');setCatalog(c);return result.src;}
 const update=(key,value)=>{setForm(prev=>({...prev,[key]:value}));setNotice('');};
 async function reload(){const data=await request('/authoring/content');setItems(data.items);}
 React.useEffect(()=>{let live=true;Promise.all([request('/authoring/catalog'),request('/authoring/content')]).then(([c,data])=>{if(live){setCatalog(c);setItems(data.items);}}).catch(e=>{if(live)setError(e.message);});return()=>{live=false;};},[user.id,baseUrl]);
 async function save(event){event.preventDefault();if(busy)return;setBusy(true);setError('');setNotice('');try{const payload={...form};if(payload.type==='vocabulary'){payload.title=payload.word;if(payload.category==='activity')payload.forms={a:{word:payload.forms?.a?.word||payload.word},b:{word:payload.forms?.b?.word||''},c:{word:payload.forms?.c?.word||''}};}if(payload.type==='zero'&&payload.zeroMode==='contact'){payload.contacts={person:{categoryIds:payload.contactCategoryIds.length?payload.contactCategoryIds:['c1'],roleCodes:payload.contactRoleCodes||[],mode:payload.contactMode==='all'?'only':payload.contactMode}};payload.question=payload.question.replaceAll('____','{{contact:person}}');payload.options=payload.options.map(s=>s.replaceAll('____','{{contact:person}}'));}for(const key of ['validAnswers','variants','finalWords'])payload[key]=payload[key].map(s=>s.trim()).filter(Boolean);if(payload.type==='reaction'){if(payload.layout==='generated'){const card=await window.SpeedCard.generate(payload,resolveMedia);payload.cardMedia=await upload(card.blob,'reaction','terminados');payload.hotspots=card.hotspots;}else{const response=await fetch(resolveMedia(payload.media));if(!response.ok)throw Error('No se pudo copiar la tarjeta terminada.');payload.cardMedia=await upload(await response.blob(),'reaction','terminados');}}const result=await request('/authoring/content',{method:'POST',body:JSON.stringify({id:selected?.id,version:selected?.version,payload})});setSelected({...result,payload});setForm(payload);setNotice('Borrador guardado en el servidor.');await reload();}catch(e){setError(e.message);}finally{setBusy(false);}}
 async function state(item,next){if(busy)return;let note='';if(['corrections','rejected'].includes(next)){note=window.prompt('Explicación para el autor:');if(note===null)return;}if(next==='archived'&&!window.confirm('¿Archivar este contenido conservando sus versiones?'))return;setBusy(true);setError('');try{await request('/authoring/content/'+encodeURIComponent(item.id)+'/state',{method:'POST',body:JSON.stringify({version:item.version,state:next,note})});await reload();setNotice(next==='pending'?'Propuesta enviada a p para supervisión.':'Estado actualizado.');}catch(e){setError(e.message);}finally{setBusy(false);}}
 function open(item){setSelected(item);setForm({...empty(item.payload.type),...item.payload});setTab(item.payload.type==='vocabulary'?'vocabulary':'create');setNotice('');}
 const lines=value=>value.split('\n');
 const multi=(name,values,options)=> <fieldset><legend>{name}</legend>{options.map(({id,label})=><label key={id} style={{display:'inline-flex',gap:6,marginRight:12}}><input type="checkbox" checked={values.includes(id)} onChange={e=>update(name==='Especialidades m'?'masterIds':name==='Contactos personales'?'contactGroups':name==='Grupos c'?'contactCategoryIds':'contexts',e.target.checked?[...values,id]:values.filter(v=>v!==id))}/>{label}</label>)}</fieldset>;
 if(!catalog)return <div>{error?<p role="alert">{error}</p>:<p>Cargando catálogos oficiales…</p>}</div>;
 const mediaLabel=src=>catalog.mediaEntries?.find(m=>m.src===src)?.name||src;
 const typeNames={reaction:'Reaction',alien:'Alien Contact',mirror:'Mirror Reflection',zero:'Zero Error',vocabulary:'VOC Maker — Agregar vocabulario'};
 const filtered=items.filter(item=>(!libraryType||item.payload.type===libraryType)&&(item.payload.title+' '+item.payload.type+' '+item.state+' '+item.payload.primaryTopic).toLowerCase().includes(search.toLowerCase()));
 return <section className="teacher-authoring"><h3>Autoría educativa</h3><p>{catalog.admin?'Supervisa las propuestas de tus colaboradores en Aprobaciones.':'Crea un borrador y envíalo a p desde Mis propuestas.'}</p><p className="teacher-hint">Los ejercicios aprobados se incorporan al recargar las actividades. Reaction y Zero Error comparten el banco PAP / ELT por topic y dificultad.</p><nav className="inbox-tabs">{[['create','Creación de ejercicios'],['content',catalog.admin?'Ejercicios en función':'Mis propuestas'],['media','Material para crear'],['vocabulary','VOC Maker'],['review','Aprobaciones'],['specialties','Entornos m'],['topics','Topics t']].filter(([id])=>catalog.admin||!['review','specialties','topics'].includes(id)).map(([id,label])=><button key={id} disabled={busy} aria-pressed={tab===id} onClick={()=>{setTab(id);if(id==='create'&&form.type==='vocabulary'){setForm(empty('reaction'));setSelected(null);}if(id==='vocabulary'&&form.type!=='vocabulary'){setForm(empty('vocabulary'));setSelected(null);}}}>{label}</button>)}</nav>{error&&<p role="alert">{error}</p>}{notice&&<p role="status">{notice}</p>}
 {['create','vocabulary'].includes(tab)&&<div className="exercise-authoring-workspace"><form className="inbox-compose" onSubmit={save}><fieldset disabled={busy}>{tab==='create'&&<label>Tipo de ejercicio<select value={form.type==='vocabulary'?'reaction':form.type} onChange={e=>{setForm(empty(e.target.value));setSelected(null);}}>{['reaction','alien','mirror','zero'].map(type=><option key={type} value={type}>{typeNames[type]}</option>)}</select></label>}<h4>{typeNames[form.type]}</h4><button type="button" onClick={()=>{setForm(empty(form.type));setSelected(null);setNotice('');}}>Nuevo ejercicio</button>{form.type==='reaction'&&<button type="button" onClick={()=>{setSelected(null);setForm({...empty('reaction'),title:'Prueba Reaction t1',primaryTopic:'t1',question:'Which description is the most important?',media:'vocabulario/description/nervous.gif',options:['nervous','happy','tall'],correct:0});}}>Cargar prueba t1 - facil</button>}{form.type==='reaction'&&<button type="button" onClick={()=>{setSelected(null);setForm({...empty('reaction'),title:'Prueba con mi imagen',primaryTopic:'t1',question:'Which description is the most important?',layout:'embedded',media:'assets/reaction/demos/description-nervous-clean.png',options:['nervous','happy','tall'],correct:0,hotspots:[{"x":24,"y":68.9,"w":48,"h":6.9},{"x":24,"y":78.3,"w":48,"h":6.9},{"x":24,"y":87.6,"w":48,"h":6.9}]});}}>Probar imagen de referencia</button>}{form.type!=='vocabulary'&&<label>Título<input required maxLength="200" value={form.title} onChange={e=>update('title',e.target.value)}/></label>}
 {form.type==='vocabulary'?<><label>Categoría<select required value={form.category} onChange={e=>{update('category',e.target.value);if(!form.unlock)update('unlock',catalog.legacyVocabulary.find(v=>v.type===e.target.value)?.unlock||'');}}><option value="">Seleccionar</option>{catalog.categories.map(c=><option key={c}>{c}</option>)}</select></label><label>Palabra o expresión<input required value={form.word} onChange={e=>update('word',e.target.value)}/></label>{form.category==='activity'&&<fieldset><legend>Las tres formas del verbo</legend>{[['a','Forma 1 - Description','#006b77'],['b','Forma 2 - Activity','#b23a48'],['c','Forma 3 - Activity','#8b3fb0']].map(([key,label,color])=><label key={key} style={{color}}>{label}<input required value={form.forms?.[key]?.word||(key==='a'?form.word:'')} onChange={e=>update('forms',{...form.forms,[key]:{...form.forms?.[key],word:e.target.value}})}/></label>)}<small>El GIF central se comparte. Cada forma conserva su palabra y su color.</small></fieldset>}<label>Desbloqueo existente<select required value={form.unlock} onChange={e=>update('unlock',e.target.value)}><option value="">Seleccionar</option>{[...new Set(catalog.legacyVocabulary.map(v=>v.unlock))].map(id=><option key={id}>{id}</option>)}</select></label></>:<><label>Topic principal<select required value={form.primaryTopic} onChange={e=>{update('primaryTopic',e.target.value);update('connectedTopics',form.connectedTopics.filter(id=>id!==e.target.value));}}><option value="">Seleccionar</option>{catalog.topics.map(t=><option key={t.id} value={t.id}>{t.id} · {t.name}</option>)}</select></label><label>Dificultad<select value={form.difficulty} onChange={e=>update('difficulty',e.target.value)}><option value="f">Fácil</option><option value="m">Medio</option><option value="d">Difícil</option></select></label>{form.type==='alien'?multi('Contextos',form.contexts,[{id:'pap',label:'PAP - revisión personal'},{id:'elt',label:'ELT - entrenamiento'}]):<p>Banco compartido PAP / ELT. La casilla y el alumno seleccionan topic y dificultad.</p>}</>}
 <fieldset><legend>Topics conectados</legend>{form.connectedTopics.map(id=><p key={id}>{id} · {catalog.topics.find(t=>t.id===id)?.name} <button type="button" onClick={()=>update('connectedTopics',form.connectedTopics.filter(t=>t!==id))}>Quitar</button></p>)}<select aria-label="Conectar topic" value="" onChange={e=>{if(e.target.value)update('connectedTopics',[...form.connectedTopics,e.target.value]);}}><option value="">+ Conectar topic</option>{catalog.topics.filter(t=>t.id!==form.primaryTopic&&!form.connectedTopics.includes(t.id)).map(t=><option key={t.id} value={t.id}>{t.id} · {t.name}</option>)}</select></fieldset>
 <label>Distribución<select value={form.distribution} onChange={e=>update('distribution',e.target.value)}>{['GENERAL','CONVENIENTE','EXCLUSIVO'].map(mode=><option key={mode}>{mode}</option>)}</select></label>{multi('Especialidades m',form.masterIds,catalog.masters.map(m=>({id:m.id,label:m.label})))}
 <AuthoringMediaGuide activity={form.type} layout={form.layout}/>{['reaction','alien','zero','vocabulary'].includes(form.type)&&<label>Seleccionar material fuente<select value={form.media} onChange={e=>update('media',e.target.value)}><option value="">Seleccionar recurso existente</option>{catalog.media.filter(src=>!catalog.mediaEntries||catalog.mediaEntries.some(m=>m.src===src&&m.activity===form.type)).filter(src=>form.type!=='reaction'||form.layout!=='generated'||window.SpeedCard.animated(src)).map(src=><option key={src} value={src}>{mediaLabel(src)}</option>)}</select><small>Reaction: imagen central o tarjeta completa. Zero Error: texto y opciones, con imagen o video opcional. Máximo 20 MB.</small></label>}
 <label>Subir archivo a {typeNames[form.type]}<input type="file" accept={form.type==='reaction'&&form.layout==='generated'?'image/gif,video/mp4':'image/png,image/jpeg,image/gif,image/webp,video/mp4,video/webm'} disabled={busy} onChange={async e=>{const file=e.target.files[0];setBusy(true);setError('');try{if(form.type==='reaction'&&form.layout==='generated')await validateReactionClip(file);const src=await upload(file);if(src)update('media',src);}catch(err){setError(err.message);}finally{setBusy(false);e.target.value='';}}}/></label>
 {form.type==='reaction'&&<fieldset><legend>Botones dentro de la imagen</legend><label>Diseño<select value={form.layout||'generated'} onChange={e=>{update('layout',e.target.value);update('hotspots',window.SpeedCard.defaults(form.options.length));}}><option value="generated">Maker: generar tarjeta con imagen central</option><option value="embedded">Mi tarjeta ya contiene pregunta y botones</option></select></label>{form.layout==='embedded'&&<><p>Posiciones en porcentajes de la imagen completa. Ajusta cada zona viendo la vista previa.</p>{form.options.map((o,i)=>{const r=form.hotspots[i]||window.SpeedCard.defaults(form.options.length)[i];return <fieldset key={i}><legend>Zona {i+1}: {o}</legend>{['x','y','w','h'].map(k=><label key={k}>{({x:'Izquierda',y:'Arriba',w:'Ancho',h:'Alto'})[k]} %<input type="number" min="0" max="100" step="0.1" value={r[k]} onChange={e=>{const zones=form.options.map((_,j)=>form.hotspots[j]||window.SpeedCard.defaults(form.options.length)[j]);zones[i]={...r,[k]:Number(e.target.value)};update('hotspots',zones);}}/></label>)}</fieldset>;})}</>}</fieldset>}
 {form.type!=='vocabulary'&&<label>{form.type==='mirror'?'Plantilla de pregunta':'Pregunta o consigna'}<textarea required value={form.question} onChange={e=>update('question',e.target.value)}/></label>}
 {['reaction','zero'].includes(form.type)&&<fieldset><legend>Respuestas</legend><label>Número de respuestas<input type="number" min="2" max="9" value={form.options.length} onChange={e=>{const n=Math.max(2,Math.min(9,Number(e.target.value)||2));update('options',Array.from({length:n},(_,i)=>form.options[i]||''));if(form.correct>=n)update('correct',0);}}/></label>{form.options.map((option,i)=><label key={i}>{i+1}<input required value={option} onChange={e=>update('options',form.options.map((s,n)=>n===i?e.target.value:s))}/><input type="radio" name="correct" aria-label={'Correcta '+(i+1)} checked={form.correct===i} onChange={()=>update('correct',i)}/>Correcta</label>)}</fieldset>}
 {form.type==='alien'&&<><label>Intención<select value={form.ideaKind} onChange={e=>update('ideaKind',e.target.value)}><option value="affirmative">Positiva</option><option value="negative">Negativa</option><option value="question">Interrogativa</option></select></label><label>Palabras finales disponibles, una por línea<textarea value={form.finalWords.join('\n')} onChange={e=>update('finalWords',lines(e.target.value))}/></label></>}
 {(form.type==='mirror'||(form.type==='alien'&&form.contexts.includes('elt')))&&<label>Respuestas completas válidas, una por línea<textarea required value={form.validAnswers.join('\n')} onChange={e=>update('validAnswers',lines(e.target.value))}/></label>}
 {(form.type==='mirror'||(form.type==='alien'&&form.contexts.includes('pap'))||(form.type==='zero'&&form.zeroMode==='contact'))&&<fieldset><legend>My Real World: sobre quien preguntar</legend><p>Escribe ____ donde debe aparecer el contacto. Elige SOLAMENTE PARA y c1 / Personas para usar humanos. En Mirror facil aparece su nombre; en medio y dificil, su relacion en ingles, como your dad.</p><label>Relacion especifica<select value={form.contactRoleCodes?.[0]||''} onChange={e=>update('contactRoleCodes',e.target.value?[e.target.value]:[])}><option value="">Todas las relaciones del grupo seleccionado</option>{[...new Set((catalog.contacts||[]).flatMap(c=>c.roles||[]))].map(code=><option key={code} value={code}>{window.ALIEN_CONTACT_CONFIG?.roleOptions.find(r=>r.code===code)?.label||code}</option>)}</select></label>{form.type==='mirror'&&<button type="button" onClick={()=>{update('question','Is ____ happy?');update('validAnswers',['____ is happy.','____ is not happy.']);update('contactMode','only');update('contactCategoryIds',['c1']);}}>Ejemplo: Is [persona] happy?</button>}{form.type==='alien'&&<p>Escribe una consigna, por ejemplo: Pregunta si ____ es tall. El alumno construye el mensaje sobre su contacto y p lo revisa; aqui no se exige una respuesta unica.</p>}</fieldset>}{form.type==='zero'&&form.zeroMode==='contact'&&<p>Escribe ____ donde debe aparecer el contacto, tanto en la pregunta como en las respuestas. Selecciona sus grupos c.</p>}
 {form.type==='zero'&&<label>Modalidad<select value={form.zeroMode} onChange={e=>update('zeroMode',e.target.value)}><option value="normal">NORMAL</option><option value="contact">CONTACT</option></select></label>}
 {(['alien','mirror'].includes(form.type)||(form.type==='zero'&&form.zeroMode==='contact'))&&<><label>Restricciones de contactos<select value={form.contactMode} onChange={e=>update('contactMode',e.target.value)}><option value="all">TODOS</option><option value="except">TODOS EXCEPTO</option><option value="only">SOLAMENTE PARA</option></select></label>{form.contactMode!=='all'&&multi('Grupos c',form.contactCategoryIds||[],(catalog.contacts||[]).map(c=>({id:c.id,label:c.id+' / '+c.label})))}</>}
 {form.type!=='vocabulary'&&<LearningContributionFields value={form.learning} onChange={value=>update('learning',value)}/>}<button type="submit">{selected?'Actualizar borrador':'Guardar borrador'}</button><p className="authoring-workflow-hint">Guarda el borrador y abre tus propuestas para enviarlo a revisión.</p></fieldset></form><aside className="exercise-authoring-preview"><ExerciseContentPreview exercise={{...form,media:resolveMedia(form.media)}}/></aside></div>}
 {['content','review'].includes(tab)&&<div>{tab==='review'&&<p className="authoring-workflow-hint">{items.filter(item=>item.state==='pending').length} propuestas pendientes de tu supervisión.</p>}<label>Actividad<select value={libraryType} onChange={e=>setLibraryType(e.target.value)}><option value="">Todas</option>{Object.entries(typeNames).map(([id,label])=><option key={id} value={id}>{label}</option>)}</select></label><label>Buscar título, topic, tipo o estado<input value={search} onChange={e=>setSearch(e.target.value)}/></label><button disabled={busy} onClick={()=>reload().catch(e=>setError(e.message))}>Actualizar</button>{filtered.filter(item=>tab!=='review'||item.state==='pending').map(item=><article key={item.id}><h4>{item.payload.title}</h4><p>{typeNames[item.payload.type]} · {item.payload.primaryTopic} · {item.state} · versión {item.version}</p><ExerciseContentPreview exercise={{...item.payload,layout:item.payload.layout,media:resolveMedia(item.payload.layout==='generated'?item.payload.media:item.payload.cardMedia||item.payload.media)}} compact/><ExerciseMaterialLinks exercise={item.payload}/><p>Topics agregados: {item.payload.connectedTopics.join(' / ')||'Ninguno'} / {item.payload.distribution} / {item.payload.masterIds.join(' / ')||'Todos los entornos'}</p><p>Autor: {item.author_id}</p>{item.review_note&&<p>{item.review_note}</p>}<button disabled={busy} onClick={()=>open(item)}>Ver / editar</button>{['draft','corrections'].includes(item.state)&&<button disabled={busy} onClick={()=>state(item,'pending')}>Enviar a revisión</button>}{catalog.admin&&['pending','draft'].includes(item.state)&&<><button disabled={busy} onClick={()=>state(item,'approved')}>Aprobar</button><button disabled={busy||item.state!=='pending'} onClick={()=>state(item,'corrections')}>Solicitar correcciones</button><button disabled={busy||item.state!=='pending'} onClick={()=>state(item,'rejected')}>Rechazar</button></>}{catalog.admin&&<button disabled={busy} onClick={()=>state(item,'archived')}>Archivar</button>}</article>)}<details><summary>Catálogo estático existente — requiere migración para editar</summary><p>{catalog.legacyReaction.length} tokens Reaction registrados. El contenido de los videos no se puede convertir automáticamente en preguntas y opciones editables.</p><p>{catalog.legacyVocabulary.length} entradas VOC existentes; se conservan sin alteraciones.</p></details></div>}
 {tab==='media'&&<div><label>Buscar recurso<input value={search} onChange={e=>setSearch(e.target.value)}/></label><label>Material para que actividad<select value={mediaType} onChange={e=>setMediaType(e.target.value)}>{Object.entries(typeNames).map(([id,label])=><option key={id} value={id}>{id==='alien'?'Alien Contact (ELT) - escenas':label}</option>)}</select></label><p>Elige la actividad antes de subir: s- Reaction, v- vocabulario, a- Alien Contact (ELT), z- Zero Error y m- Mirror. El prefijo se agrega automaticamente; no necesitas renombrar tu archivo. Material fuente, separado por actividad. Los ejercicios terminados se consultan en Ejercicios en función o Mis propuestas.</p><AuthoringMediaGuide activity={mediaType}/><label>Subir al banco seleccionado<input type="file" accept={mediaType==='reaction'?'image/gif,video/mp4':'image/png,image/jpeg,image/gif,image/webp,video/mp4,video/webm'} disabled={busy} onChange={async e=>{setBusy(true);try{if(mediaType==='reaction')await validateReactionClip(e.target.files[0]);await upload(e.target.files[0],mediaType);}catch(err){setError(err.message);}finally{setBusy(false);}}}/></label>{catalog.media.filter(src=>src.toLowerCase().includes(search.toLowerCase())&&(src.startsWith('/authoring/')?catalog.mediaEntries?.some(m=>m.src===src&&m.activity===mediaType):mediaType==='vocabulary'?src.startsWith('vocabulario/'):src.startsWith('vocabulario/')||({reaction:/MATE|reaction/i,zero:/ZERO/i,alien:/ALIEN|REAL/i,mirror:/ALIEN|REAL/i})[mediaType]?.test(src))).map(src=><details key={src}><summary>{mediaLabel(src)}</summary>{/\.(mp4|webm|mov)$/i.test(src)?<video src={resolveMedia(src)} controls muted playsInline preload="none" style={{maxWidth:'100%',width:400}}/>:<img src={resolveMedia(src)} alt={src} loading="lazy" style={{maxWidth:'100%',width:400}}/>}<button onClick={()=>{if(form.type!==mediaType){setSelected(null);setForm({...empty(mediaType),media:src});}else update('media',src);setTab(mediaType==='vocabulary'?'vocabulary':'create');}}>Usar en el borrador actual</button></details>)}</div>}
 {tab==='content'&&catalog.admin&&<ExistingExerciseCatalog user={user} baseUrl={baseUrl} admin={catalog.admin} topics={catalog.topics}/>} 
 {tab==='topics'&&<TopicAdministration catalog={catalog} request={request} onChanged={setCatalog}/>}
 {tab==='specialties'&&<SpecialtyAdministration user={user} baseUrl={baseUrl} admin={catalog.admin} onChanged={setCatalog}/>} 
 </section>;
}