function LearningContributionFields({value,onChange}){
 const rule=value||{structure:.35,logic:.05};const mode=rule.structure>0&&rule.logic>0?'both':rule.structure>0?'structure':rule.logic>0?'logic':'none';
 return <fieldset className="learning-contribution"><legend>Aportación a Specific Level</legend><p>Puntos por respuesta correcta. Estructura mide cómo la construye; lógica mide si la usa con sentido. 0 deja esa vertiente sin aportación.</p><label>Qué desarrolla<select value={mode} onChange={e=>onChange({structure:['both','structure'].includes(e.target.value)?rule.structure||.35:0,logic:['both','logic'].includes(e.target.value)?rule.logic||.05:0})}><option value="both">Estructura y lógica</option><option value="structure">Solo estructura</option><option value="logic">Solo lógica</option><option value="none">Sin aportación</option></select></label>{[['structure','Estructura'],['logic','Lógica']].map(([key,label])=><label key={key}>{label} · puntos por acierto<input type="number" min="0" max="10" step="0.01" value={rule[key]} onChange={e=>onChange({...rule,[key]:Number(e.target.value)})}/></label>)}</fieldset>;
}
function ActivityIntroduction({slot,onStart,onClose,finished=false,password,nextLevel}){
 const audio=React.useRef(null),panel=React.useRef(null);const [muted,setMuted]=React.useState(false);
 React.useEffect(()=>{const previous=document.activeElement,a=new Audio('DINAMICS/JUEGOS/BUBBLES.mp3');a.loop=true;a.volume=.35;audio.current=a;a.onerror=()=>{if(!a.src.endsWith('BUBBLES.wav')){a.src='DINAMICS/JUEGOS/BUBBLES.wav';a.play().catch(()=>{});}};a.play().catch(()=>{});panel.current?.querySelector('button')?.focus();const key=e=>{if(e.key==='Escape')onClose();if(e.key==='Tab'){const buttons=[...panel.current.querySelectorAll('button')];const first=buttons[0],last=buttons.at(-1);if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}}};document.addEventListener('keydown',key);return()=>{a.pause();a.currentTime=0;document.removeEventListener('keydown',key);previous?.focus();};},[]);
 return <div className="activity-intro-backdrop" role="presentation"><section ref={panel} className="activity-intro" role="dialog" aria-modal="true" aria-labelledby="activity-intro-title"><div className="activity-intro-top"><span>TODOS BILINGÜES / PASO A PASO</span><button aria-label="Cerrar presentación" onClick={onClose}>×</button></div><div className="activity-intro-orbit" aria-hidden="true"/><p className="activity-intro-kicker">{finished?'UN NIVEL MÁS CERCA':window.LevelDesign.typeName(slot)}</p><h2 id="activity-intro-title">{finished?'FINISHED':slot.descriptionTitle||slot.title||'Tu siguiente reto'}</h2><div className="activity-intro-lines">{finished?<><p>Terminaste este nivel. Tu siguiente paso te espera.</p>{password?<div className="activity-next-password"><span>Entrada al nivel {nextLevel}</span><strong>{password}</strong><small>Guarda esta contraseña para continuar.</small></div>:<p>El maestro anunciará la entrada al siguiente nivel.</p>}</>:(slot.descriptionLines||[]).map((line,i)=><p key={i}>{line}</p>)}</div><footer><button className="activity-intro-sound" onClick={()=>{const value=!muted;setMuted(value);if(audio.current)audio.current.muted=value;}}>{muted?'Activar música':'Silenciar música'}</button><button className="activity-intro-start" onClick={finished?onClose:onStart}>{finished?'Continuar':'Comenzar'} <span>↗</span></button></footer></section></div>;
}

function ContactCategoryAdministration({catalog,request,onChanged}){
 const [form,setForm]=React.useState({id:'',label:'',kind:'person',parentId:'',roles:[],possessiveLabel:'',version:0}),[error,setError]=React.useState(''),[busy,setBusy]=React.useState(false);
 const update=(k,v)=>setForm(p=>({...p,[k]:v}));const roles=window.ALIEN_CONTACT_CONFIG.roleOptions;
 return <section className="curriculum-contacts"><h3>Banco de contactos c</h3><p>Personas, animales y lugares comparten un catálogo. Un grupo c incluye sus ramas: c3 puede reunir lugares favoritos y lugares que extrañarás.</p><form className="inbox-compose" onSubmit={async e=>{e.preventDefault();setBusy(true);try{const payload={...form,roleCode:form.newRole?'CONTACT_'+form.id.replaceAll('.','_').toUpperCase():form.roleCode};await request('/authoring/contacts',{method:'POST',body:JSON.stringify(payload)});const next=await request('/authoring/catalog');window.ContactCategories.replace(next.contacts);onChanged(next);setForm({id:'',label:'',kind:'person',parentId:'',roles:[],possessiveLabel:'',version:0});setError('');}catch(err){setError(err.message);}finally{setBusy(false);}}}><fieldset disabled={busy}><legend>{form.version?'Modificar grupo':'Nuevo grupo o relación'}</legend><label>Código<input required pattern="c[0-9]+(\.[0-9]+)*" placeholder="c3.1" value={form.id} onChange={e=>update('id',e.target.value)}/></label><label>Nombre<input required value={form.label} onChange={e=>update('label',e.target.value)}/></label><label>Grupo principal<select value={form.parentId||''} onChange={e=>{update('parentId',e.target.value);if(e.target.value)update('kind',catalog.contacts.find(c=>c.id===e.target.value).kind);}}><option value="">Grupo independiente</option>{catalog.contacts.filter(c=>c.id!==form.id).map(c=><option key={c.id} value={c.id}>{c.id} · {c.label}</option>)}</select></label><label>Tipo<select value={form.kind} onChange={e=>update('kind',e.target.value)}><option value="person">Personas</option><option value="animal">Animales</option><option value="place">Lugares</option></select></label><fieldset><legend>Relaciones que incluye</legend>{roles.map(r=><label key={r.code}><input type="checkbox" checked={form.roles.includes(r.code)} onChange={e=>update('roles',e.target.checked?[...form.roles,r.code]:form.roles.filter(c=>c!==r.code))}/>{r.label}</label>)}</fieldset><label><input type="checkbox" checked={Boolean(form.newRole||form.roleCode)} onChange={e=>update('newRole',e.target.checked)}/>También crear esta relación en el perfil del alumno</label>{(form.newRole||form.roleCode)&&<label>Referencia en inglés para medio / difícil<input required placeholder="your favorite restaurant" value={form.possessiveLabel} onChange={e=>update('possessiveLabel',e.target.value)}/></label>}<button>Guardar grupo c</button></fieldset></form>{error&&<p role="alert">{error}</p>}<div className="curriculum-card-list">{catalog.contacts.map(c=><article key={c.id}><strong>{c.id} · {c.label}</strong><p>{c.kind==='person'?'Personas':c.kind==='animal'?'Animales':'Lugares'} · {(c.roles||[]).map(code=>roles.find(r=>r.code===code)?.label||code).join(', ')}</p><button onClick={()=>setForm({...c,newRole:false})}>Modificar</button></article>)}</div></section>;
}

function LevelDesigner({user,baseUrl}){
 const [data,setData]=React.useState(null),[catalog,setCatalog]=React.useState(null),[content,setContent]=React.useState([]),[level,setLevel]=React.useState(null),[index,setIndex]=React.useState(0),[tab,setTab]=React.useState('levels'),[error,setError]=React.useState(''),[notice,setNotice]=React.useState(''),[busy,setBusy]=React.useState(false),[preview,setPreview]=React.useState(false),[history,setHistory]=React.useState([]);
 const request=(path,options)=>window.TeacherRoomClient.request(baseUrl,user,path,options);
 async function load(){const [d,c,b]=await Promise.all([request('/authoring/levels'),request('/authoring/catalog'),request('/authoring/content')]);setData(d);setCatalog(c);setContent(b.items.filter(r=>r.state==='approved'));return d;}
 React.useEffect(()=>{let live=true;load().then(d=>{if(live)setLevel(window.LevelDesignModel.hydrate(d.levels.find(l=>l.id===1)||{id:1,total:1,slots:[]}));}).catch(e=>setError(e.message));return()=>{live=false;};},[]);
 if(!data||!catalog||!level)return <p role="status">{error||'Cargando diseñador de niveles…'}</p>;
 const slot=level.slots[index]||level.slots[0],update=(key,value)=>{setLevel(p=>({...p,slots:p.slots.map((s,i)=>i===index?{...s,[key]:value,...(['topicIds','difficulty','questionCount','contentIds'].includes(key)?{reactionBlocks:null}:{})}:s)}));setNotice('');};
 const checkList=(label,key,options)=> <fieldset><legend>{label}</legend>{options.map(o=><label key={o.id}><input type="checkbox" checked={(slot[key]||[]).includes(o.id)} onChange={e=>update(key,e.target.checked?[...(slot[key]||[]),o.id]:(slot[key]||[]).filter(id=>id!==o.id))}/>{o.label||o.name}</label>)}</fieldset>;
 const activityNames={pending:'Pendiente',video:'Clase en video',zeroError:'Zero Error',reaction:'Reaction',group:'Alien / Special Technique',alienContact:'Mirror Reflection',aiExam:'Ejemplos del alumno'};
 const kind=slot.type==='zeroError'?'zero':slot.type==='reaction'?'reaction':slot.type==='alienContact'?'mirror':slot.type==='group'?'alien':'';
 return <section className="level-designer"><header><span className="designer-eyebrow">ESTUDIO DEL MAESTRO / EXCLUSIVO DE P</span><h2>Diseño de niveles</h2><p>El título dice qué aprende el alumno; el tipo dice cómo lo va a practicar. La presentación y el hover comparten la misma explicación.</p></header><nav className="inbox-tabs"><button aria-pressed={tab==='levels'} onClick={()=>setTab('levels')}>Niveles y casillas</button><button aria-pressed={tab==='contacts'} onClick={()=>setTab('contacts')}>Contactos y grupos c</button></nav>{error&&<p role="alert">{error}</p>}{notice&&<p role="status">{notice}</p>}{tab==='contacts'?<ContactCategoryAdministration catalog={catalog} request={request} onChanged={setCatalog}/>:<><div className="designer-level-controls"><label>Nivel<input type="number" min="1" max="50" value={level.id} onChange={e=>{const id=Number(e.target.value);setLevel(window.LevelDesignModel.hydrate(data.levels.find(l=>l.id===id)||{id,total:1,slots:[],version:0}));setIndex(0);setNotice('');}}/></label><label>Nombre<input value={level.name||''} placeholder="Beginner" onChange={e=>setLevel(p=>({...p,name:e.target.value}))}/></label><label>Número de casillas<input type="number" min="1" max="200" value={level.total} onChange={e=>{const n=Math.max(1,Math.min(200,Number(e.target.value)||1));setLevel(p=>window.LevelDesignModel.hydrate({...p,total:n}));setIndex(i=>Math.min(i,n-1));}}/></label>{level.id>1&&<><label>Contraseña para entrar a este nivel<input value={level.entryPassword||''} onChange={e=>setLevel(p=>({...p,entryPassword:e.target.value}))}/></label><small>La última casilla del nivel {level.id-1} la entrega al terminar.</small></>}</div><div className="designer-workspace"><aside className="designer-slot-list">{level.slots.map((s,i)=><button key={s.exerciseId} aria-pressed={index===i} onClick={()=>setIndex(i)}><span>{String(s.num).padStart(2,'0')}</span><strong>{s.descriptionTitle||'Por diseñar'}</strong><small>{window.LevelDesign.typeName(s)}{s.num===level.total?' · FINISHED':''}</small></button>)}</aside><form className="designer-slot-form" onSubmit={async e=>{e.preventDefault();setBusy(true);setError('');try{const result=await request('/authoring/levels',{method:'POST',body:JSON.stringify({version:level.version||0,level})});setLevel(p=>({...p,version:result.version,designed:true}));setNotice('Nivel guardado. Los alumnos recibirán el diseño al recargar.');await load();}catch(err){setError(err.message);}finally{setBusy(false);}}}><fieldset disabled={busy}><legend>Casilla {slot.num} {slot.num===level.total?' / cierre del nivel':''}</legend><label>Título de la actividad<input value={slot.descriptionTitle||''} onChange={e=>update('descriptionTitle',e.target.value)} placeholder="La más importante"/></label><label>Tipo de actividad<select value={slot.type} onChange={e=>{const type=e.target.value;setLevel(p=>({...p,slots:p.slots.map((s,i)=>i===index?{...s,type,groupActivity:type==='group'?'alien':s.groupActivity,groupKey:s.groupKey||'grupoA',difficulty:s.difficulty||'f'}:s)}));}}>{Object.entries(activityNames).map(([id,name])=><option key={id} value={id}>{name}</option>)}</select></label><label>Explicación para hover y presentación<textarea rows="5" value={(slot.descriptionLines||[]).join('\n')} onChange={e=>update('descriptionLines',e.target.value.split('\n'))} placeholder="Qué vas a hacer, para qué sirve y cómo comenzar."/></label>{['video','group'].includes(slot.type)&&<><label>Video del catálogo<select value={slot.videoKey||''} onChange={e=>update('videoKey',e.target.value)}><option value="">Usar enlace propio</option>{data.videos.map(v=><option key={v.id} value={v.id}>{v.id} · {v.titulo}</option>)}</select></label><label>Enlace del video<input type="url" value={slot.videoUrl||slot.youtubeUrl||''} onChange={e=>update('videoUrl',e.target.value)}/></label>{slot.type==='video'&&<label>Contraseña que dice el video<input value={slot.password||''} onChange={e=>update('password',e.target.value)}/></label>}</>}
 {slot.type==='group'&&<><label>Actividad de este grupo<select value={slot.groupActivity||'alien'} onChange={e=>{update('groupActivity',e.target.value);update('isFinal',e.target.value==='special');}}><option value="alien">Alien Contact · revisión personal</option><option value="special">Special Technique · consigna del video</option></select></label><label>Grupo de entregas<input value={slot.groupKey||''} placeholder="grupoA" onChange={e=>update('groupKey',e.target.value)}/></label><label>Resumen de lo que debe entregar<textarea value={slot.activityPrompt||''} onChange={e=>update('activityPrompt',e.target.value)}/></label>{slot.groupActivity!=='special'&&['affirmative','negative','question'].map(k=><label key={k}>{({affirmative:'Ideas afirmativas',negative:'Ideas negativas',question:'Preguntas'})[k]}<input type="number" min="0" max="30" value={slot.construction?.[k]?.count??3} onChange={e=>update('construction',{...(slot.construction||{affirmative:{image:'a1',count:3},negative:{image:'n1',count:3},question:{image:'q1',count:3}}),[k]:{image:{affirmative:'a1',negative:'n1',question:'q1'}[k],count:Number(e.target.value)}})}/></label>)}</>}
 {slot.type==='aiExam'&&<><label>Script del examen<select value={slot.script||''} onChange={e=>{update('script',e.target.value);update('globalKey',data.levels.flatMap(l=>l.slots).find(s=>s.script===e.target.value)?.globalKey||'');}}><option value="">Seleccionar examen existente</option>{[...new Map(data.levels.flatMap(l=>l.slots).filter(s=>s.script).map(s=>[s.script,s])).values()].map(s=><option key={s.script} value={s.script}>{s.descriptionTitle} / {s.script}</option>)}</select></label><small>La estructura y las preguntas se conservan en el examen seleccionado.</small></>}
 {slot.type==='group'&&slot.groupActivity!=='special'&&['affirmative','negative','question'].map(kind=><details key={kind}><summary>Consignas de {({affirmative:'las ideas afirmativas',negative:'las ideas negativas',question:'las preguntas'})[kind]}</summary>{Array.from({length:slot.construction?.[kind]?.count??3},(_,i)=>{const rule=slot.constructionPrompts?.[kind]?.[i]||{type:'random'};const change=(key,value)=>{const rules=Array.from({length:slot.construction?.[kind]?.count??3},(_,j)=>slot.constructionPrompts?.[kind]?.[j]||{type:'random'});rules[i]={...rule,[key]:value};update('constructionPrompts',{...slot.constructionPrompts,[kind]:rules});};return <fieldset key={i}><legend>Ejemplo {i+1}</legend><label>Sobre quién o qué<select value={rule.type} onChange={e=>change('type',e.target.value)}><option value="self">Sobre el alumno · I</option><option value="random">Un contacto del alumno</option><option value="family">Un familiar</option><option value="fixed">Nombre fijo · persona o lugar</option><option value="alien">Pregunta a los aliens · you</option></select></label>{rule.type==='fixed'&&<label>Nombre fijo<input value={rule.name||''} onChange={e=>change('name',e.target.value)}/></label>}<label>Consigna<textarea value={rule.prompt||''} placeholder="Describe a ____ usando esta estructura." onChange={e=>change('prompt',e.target.value)}/></label></fieldset>;})}</details>)}
 {['reaction','zeroError','alienContact'].includes(slot.type)&&<><label>Dificultad<select value={slot.difficulty||'f'} 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><label>Cantidad de preguntas<input type="number" min="1" max="50" value={slot.questionCount??(slot.type==='zeroError'?10:slot.type==='alienContact'?7:9)} onChange={e=>update('questionCount',Number(e.target.value))}/></label>{slot.type==='alienContact'&&<label>Contactos que debe seleccionar<input type="number" min="0" max="20" value={slot.contactCount??3} onChange={e=>update('contactCount',Number(e.target.value))}/></label>}</>}
 {checkList('Topics que desarrolla','topicIds',catalog.topics.map(t=>({...t,label:t.id+' · '+t.name})))}<label>Distribución<select value={slot.distribution||'GENERAL'} onChange={e=>update('distribution',e.target.value)}><option value="GENERAL">General · todos</option><option value="CONVENIENTE">Conveniente para un entorno</option><option value="EXCLUSIVO">Exclusivo de un entorno</option></select></label>{(slot.distribution||'GENERAL')!=='GENERAL'&&checkList('Entornos m','masterIds',catalog.masters.map(m=>({...m,label:m.id+' · '+m.label})))}
 {['group','alienContact','zeroError'].includes(slot.type)&&<><label>A quiénes se refieren las preguntas<select value={slot.contactMode||'all'} onChange={e=>update('contactMode',e.target.value)}><option value="all">Todos los contactos</option><option value="except">Todos excepto estos grupos</option><option value="only">Solamente estos grupos</option></select></label>{slot.contactMode!=='all'&&checkList('Grupos c','contactCategoryIds',catalog.contacts.map(c=>({...c,label:c.id+' · '+c.label})))}</>}
 {kind&&checkList('Ejercicios aprobados que quieres usar (vacío = banco del topic)','contentIds',content.filter(r=>r.payload.type===kind).map(r=>({id:r.id,label:r.payload.title+' · '+r.payload.primaryTopic+' · '+r.payload.difficulty})))}
 {!['video','pending'].includes(slot.type)&&<LearningContributionFields value={slot.learning} onChange={value=>update('learning',value)}/>}<div className="designer-actions"><button type="button" onClick={()=>setPreview(true)}>Ver presentación del alumno</button><button type="submit">{busy?'Guardando…':'Guardar diseño del nivel'}</button><button type="button" onClick={async()=>{try{setHistory((await request('/authoring/levels/'+level.id+'/history')).items);}catch(e){setError(e.message);}}}>Versiones anteriores</button></div>{history.map(h=><button type="button" key={h.version} onClick={()=>{setLevel({...window.LevelDesignModel.hydrate(h.level),version:level.version});setIndex(0);setNotice('Versión cargada como borrador. Guarda para aplicarla.');}}>Cargar versión {h.version}</button>)}</fieldset></form></div></>}{preview&&<ActivityIntroduction slot={slot} onStart={()=>setPreview(false)} onClose={()=>setPreview(false)}/>}</section>;
}