function ExerciseMaterialLinks({exercise}){
 const materials=[];
 const add=(src,label)=>{src=window.LiveCatalog?.media(src)||src;if(typeof src==='string'&&src&&!materials.some(m=>m.src===src))materials.push({src,label});};
 if(exercise.type==='reaction'){
  const source=exercise.cardMedia||exercise.media||(exercise.token?(window.REACTION_CONFIG?.BASE_DIR||'DINAMICS/JUEGOS/MATE/')+exercise.token+'.mp4':'');
  if(typeof source==='string')add(source.replace('DINAMICS/JUEGOS/MATE/','DINAMICS/JUEGOS/WEB/MATE/'),'Ver material completo');
 }
 else add(typeof exercise.media==='string'?exercise.media:exercise.media?.src,'Ver imagen completa');
 const slotId=String(exercise.id||'').replace(/^slot:/,'');
 const activity=window.REAL_CONSTRUCTION_CONFIG?.activities?.[slotId];
 const labels={affirmative:'Ver imagen afirmativa',negative:'Ver GIF negativo',question:'Ver GIF de pregunta'};
 if(activity)Object.entries(activity).forEach(([kind,spec])=>add(window.REAL_CONSTRUCTION_CONFIG.images?.[spec.image]?.src,labels[kind]||'Ver imagen completa'));
 if(!materials.length)return null;
 return <div className="exercise-material-links" aria-label="Material original del ejercicio">{materials.map(({src,label})=><a key={src} href={src} target="_blank" rel="noopener noreferrer">{label} ↗</a>)}</div>;
}

function ExistingExerciseCatalog({user,baseUrl,admin,topics}){
 const [items,setItems]=React.useState([]),[type,setType]=React.useState(''),[topic,setTopic]=React.useState(''),[diff,setDiff]=React.useState(''),[search,setSearch]=React.useState(''),[edit,setEdit]=React.useState(null),[payload,setPayload]=React.useState({}),[busy,setBusy]=React.useState(false),[error,setError]=React.useState(''),[notice,setNotice]=React.useState('');
 const request=(route,options)=>window.TeacherRoomClient.request(baseUrl,user,route,options);
 async function load(){const data=await request('/authoring/legacy');setItems(data.items);}
 React.useEffect(()=>{let live=true;request('/authoring/legacy').then(data=>{if(live)setItems(data.items);}).catch(e=>{if(live)setError(e.message);});return()=>{live=false;};},[user.id,baseUrl]);
 const names={reaction:'Reaction',zero:'Zero Error',zeroError:'Zero Error · Casilla',mirror:'Mirror Reflection',alien:'Alien Contact',alienContact:'Mirror Reflection · Casilla',special_technique:'Special Technique',video:'Clase en video',aiExam:'Examen IA',activity:'Actividad de Paso a Paso'};
 const difficulties={f:'Fácil',m:'Medio',d:'Difícil'};
 const topicName=id=>id?(id+' · '+(topics.find(t=>t.id===id)?.name||'Topic no identificado')):'No declarado';
 function open(item){setEdit(item);setPayload({learning:item.learning,connectedTopics:[...item.connectedTopics],...(item.type==='zero'?{question:item.question,options:item.options.map(o=>({...o})),correct:item.correct}:{})});setError('');setNotice('');}
 async function save(e){e.preventDefault();if(busy)return;setBusy(true);setError('');setNotice('');try{await request('/authoring/legacy',{method:'POST',body:JSON.stringify({id:edit.id,version:edit.version,sourceVersion:edit.sourceVersion,payload})});setEdit(null);await load();setNotice('Corrección guardada. Los alumnos la reciben al recargar con esta API activada.');}catch(e){setError(e.message);}finally{setBusy(false);}}
 const visible=items.filter(item=>(!type||item.type===type)&&(!topic||item.primaryTopic===topic||item.connectedTopics.includes(topic))&&(!diff||item.difficulty===diff||item.difficulties?.includes(diff))&&(item.title+' '+item.id).toLowerCase().includes(search.toLowerCase()));
 return <section><h4>Ejercicios existentes</h4><p>Los IDs, el progreso y los archivos de origen se conservan. Los campos que requieren migración aparecen bloqueados.</p>{error&&<p role="alert">{error}</p>}{notice&&<p role="status">{notice}</p>}<div className="inbox-filters"><label>Buscar<input value={search} onChange={e=>setSearch(e.target.value)}/></label><label>Tipo<select value={type} onChange={e=>setType(e.target.value)}><option value="">Todos</option>{[...new Set(items.map(i=>i.type))].sort().map(id=><option key={id} value={id}>{names[id]||id}</option>)}</select></label><label>Topic principal o conectado<select value={topic} onChange={e=>setTopic(e.target.value)}><option value="">Todos</option>{topics.map(t=><option key={t.id} value={t.id}>{topicName(t.id)}</option>)}</select></label><label>Dificultad<select value={diff} onChange={e=>setDiff(e.target.value)}><option value="">Todas</option>{Object.entries(difficulties).map(([id,label])=><option key={id} value={id}>{label}</option>)}</select></label><button disabled={busy} onClick={()=>load().catch(e=>setError(e.message))}>Actualizar catálogo</button></div><p>{visible.length} de {items.length} registros</p>
 {edit&&<form className="inbox-compose" onSubmit={save}><h4>Editar: {edit.title}</h4><p>Principal: {topicName(edit.primaryTopic)}. {edit.restriction}</p><fieldset disabled={busy}><legend>Topics secundarios</legend>{payload.connectedTopics.map(id=><p key={id}>{topicName(id)} <button type="button" disabled={(edit.immutableTopics||[]).includes(id)} onClick={()=>setPayload(p=>({...p,connectedTopics:p.connectedTopics.filter(t=>t!==id)}))}>Quitar conexión agregada</button></p>)}<select aria-label="Conectar topic a ejercicio existente" value="" onChange={e=>{if(e.target.value)setPayload(p=>({...p,connectedTopics:[...p.connectedTopics,e.target.value]}));}}><option value="">+ Conectar topic</option>{topics.filter(t=>t.id!==edit.primaryTopic&&!payload.connectedTopics.includes(t.id)).map(t=><option key={t.id} value={t.id}>{topicName(t.id)}</option>)}</select></fieldset>
 {edit.type==='zero'&&<fieldset disabled={busy}><legend>Corregir pregunta y opciones</legend><label>Pregunta<textarea aria-label="Pregunta del ejercicio existente" required maxLength="2000" value={payload.question} onChange={e=>setPayload(p=>({...p,question:e.target.value}))}/></label>{payload.options.map((o,i)=><label key={o.value}>Opción {i+1}<input required maxLength="1000" value={o.label} onChange={e=>setPayload(p=>({...p,options:p.options.map((v,n)=>n===i?{...v,label:e.target.value}:v)}))}/><input type="radio" name="legacy-correct" aria-label={'Respuesta correcta '+(i+1)} checked={payload.correct===o.value} onChange={()=>setPayload(p=>({...p,correct:o.value}))}/>Correcta</label>)}</fieldset>}
 {edit.editable.includes('learning')&&<LearningContributionFields value={payload.learning} onChange={learning=>setPayload(p=>({...p,learning}))}/>}<button disabled={busy}>Guardar corrección</button><button type="button" disabled={busy} onClick={()=>setEdit(null)}>Cancelar</button></form>}
 {visible.map(item=><article className="teacher-question" key={item.id}><h4>{names[item.type]||item.type} · {item.title}</h4><ExerciseContentPreview exercise={item} compact/><ExerciseMaterialLinks exercise={item}/><p><strong>Dificultad:</strong> {(item.difficulty?[item.difficulty]:item.difficulties||[]).map(d=>difficulties[d]||d).join(', ')||'No declarada'}</p><p><strong>Topic principal:</strong> {topicName(item.primaryTopic)}</p><p><strong>Topics secundarios:</strong> {item.connectedTopics.map(topicName).join(' / ')||'Ninguno declarado'}</p><small>{item.source} · {item.id} · revisión {item.version}</small><p>{item.restriction}</p>{item.conflict&&<p role="alert">El archivo original cambió; la corrección anterior no se aplica hasta revisarla.</p>}<button disabled={!admin||!item.editable.length||busy} onClick={()=>open(item)}>{item.editable.length?'Editar campos compatibles':'Requiere editor específico'}</button></article>)}
 </section>;
}

function SpecialtyAdministration({user,baseUrl,admin,onChanged}){
 const [items,setItems]=React.useState([]),[selected,setSelected]=React.useState(null),[label,setLabel]=React.useState(''),[parentId,setParentId]=React.useState(''),[description,setDescription]=React.useState(''),[aliases,setAliases]=React.useState(''),[busy,setBusy]=React.useState(false),[error,setError]=React.useState(''),[notice,setNotice]=React.useState('');
 const request=(route,options)=>window.TeacherRoomClient.request(baseUrl,user,route,options);
 async function load(){const data=await request('/authoring/specialties');setItems(data.items);}
 React.useEffect(()=>{let live=true;request('/authoring/specialties').then(data=>{if(live)setItems(data.items);}).catch(e=>{if(live)setError(e.message);});return()=>{live=false;};},[user.id,baseUrl]);
 function open(item){setSelected(item);setLabel(item?.label||'');setParentId(item?.parentId||'');setDescription(item?.description||'');setAliases(item?.aliases?.join('\n')||'');setNotice('');}
 async function save(e){e.preventDefault();if(busy)return;setBusy(true);setError('');try{await request('/authoring/specialties',{method:'POST',body:JSON.stringify({id:selected?.id,version:selected?.version,label,parentId:parentId||null,description,aliases:aliases.split('\n').map(s=>s.trim()).filter(Boolean)})});await load();const data=await request('/authoring/catalog');onChanged(data);window.MasterSpecialties?.replaceCatalog(data.masters);open(null);setNotice('Especialidad guardada. Su identificador se conserva y aparecerá al recargar la plataforma.');}catch(e){setError(e.message);}finally{setBusy(false);}}
 return <section><h4>Entornos de inglés m</h4><p>1. Crea un entorno principal, por ejemplo Medicina. 2. Agrega sus ramas si las necesitas, por ejemplo Pediatría. En cada ejercicio: General = todos; Conveniente = recomendado para ese entorno; Exclusivo = solo ese entorno.</p>{error&&<p role="alert">{error}</p>}{notice&&<p role="status">{notice}</p>}{admin&&<form className="inbox-compose" onSubmit={save}><fieldset disabled={busy}><legend>{selected?'Modificar '+selected.id:'Agregar entorno'}</legend><label>Nombre<input required maxLength="120" value={label} onChange={e=>setLabel(e.target.value)}/></label><label>Crear dentro de<select disabled={Boolean(selected)} value={parentId} onChange={e=>setParentId(e.target.value)}><option value="">Nuevo entorno principal</option>{items.filter(m=>m.id!==selected?.id).map(m=><option key={m.id} value={m.id}>{m.id} · {m.label}</option>)}</select></label><label>Especificaciones<textarea maxLength="3000" value={description} onChange={e=>setDescription(e.target.value)}/></label><label>Otros nombres, uno por línea<textarea value={aliases} onChange={e=>setAliases(e.target.value)}/></label><button>{selected?'Guardar cambios':'Agregar'}</button><button type="button" onClick={()=>open(null)}>Nuevo / cancelar</button></fieldset></form>}{items.map(m=><article className="teacher-question" key={m.id}><h4>{m.id} · {m.label}</h4><p>{m.parentId?'Rama de '+items.find(p=>p.id===m.parentId)?.label:'Entorno principal'}</p>{m.description&&<p>{m.description}</p>}<button disabled={!admin||busy} onClick={()=>open(m)}>Modificar entorno</button></article>)}</section>;
}