function TrainingSignal() {
  const [missing,setMissing]=React.useState(false);
  const src=window.TRAINING_STUDIO_CONFIG?.backgroundGif;
  return <div className="training-signal" aria-hidden="true">{src && !missing
    ? <img src={src} alt="" onError={()=>setMissing(true)}/>
    : <><img src="negro.png" alt=""/><i/><i/><i/></>}</div>;
}

function TrainingStudio({user, available, onStart, running, summary, onBack}) {
  const [activity,setActivity]=React.useState('zeroError');
  const [path,setPath]=React.useState([]);
  const [basket,setBasket]=React.useState([]);
  const [notice,setNotice]=React.useState('');
  const [fusion,setFusion]=React.useState(null);
  const [count,setCount]=React.useState(1);
  const [catalog,setCatalog]=React.useState({f:[],m:[],d:[]});
  const [loading,setLoading]=React.useState(false);
  const [error,setError]=React.useState('');
  const [refresh,setRefresh]=React.useState(0);
  React.useEffect(()=>{
    let masters=JSON.stringify(window.MasterSpecialties?.selected(user?.id)||[]);
    const update=event=>{if(String(event.detail?.userId)===String(user?.id)){
      const next=JSON.stringify(window.MasterSpecialties?.selected(user?.id)||[]);
      if(next!==masters){masters=next;setRefresh(value=>value+1);setBasket([]);}
    }};
    window.addEventListener('tb:student-personalization-updated',update);
    return ()=>window.removeEventListener('tb:student-personalization-updated',update);
  },[user?.id]);
  const availableRef=React.useRef(available); availableRef.current=available;
  const vm=window.MyProgressEngine.getMyProgressViewModel(user?.id || '');
  const groups=vm.structureGroups;
  const roots=[
    {...groups.completeIdea,id:'completeIdea',label:'Estructuras',items:[groups.important,...groups.completeIdea.items]},
    {...groups.extraInformation,id:'extraInformation',label:'Extra information'},
    {id:'fusion',label:'Fusion',items:window.SpecialTechniques.list().map(item=>({...item,topicIds:item.practiceTopicIds,percentLabel:window.MyProgressEngine.formatPercent(item.practiceTopicIds.reduce((sum,id)=>sum+window.MyProgressEngine.getTopicProgress(user?.id||'',id).percent,0)/item.practiceTopicIds.length)}))}
  ];
  const current=path.reduce((parent,node)=>(parent?.items || roots).find(item=>item.id===node.id),null);
  const leaf=current && !current.items?.length ? current : null;
  const base=fusion?.base || leaf;
  const primary=base?.topicIds || [];
  const extra=fusion?.selected || [];
  const activities=[{id:'zeroError',label:'ZERO ERROR',note:'3 preguntas · cero errores'}, {id:'reaction',label:'REACTION',note:'Reacción y precisión'}, {id:'mirror',label:'Mirror Reflection',note:'Respuestas completas'}, {id:'alien',label:'Alien Contact',note:'Construye con figuras'}];
  const labels={f:'Fácil',m:'Medio',d:'Difícil'};
  React.useEffect(()=>{
    let live=true;
    setError('');setCatalog({f:[],m:[],d:[]});
    if(!base){setLoading(false);return;}
    setLoading(true);
    Promise.all(['f','m','d'].map(diff=>window.TrainingStudioCatalog.groups({activity,primary,extra,diff,userId:user?.id,available:(...args)=>availableRef.current(...args)})))
      .then(results=>{if(!live)return;setCatalog({f:results[0].rows,m:results[1].rows,d:results[2].rows});if(results.some(r=>r.errors.length))setError('No se pudo cargar parte del material. Puedes reintentar.');})
      .catch(()=>{if(live)setError('No se pudo cargar el material. Reintenta.');})
      .finally(()=>{if(live)setLoading(false);});
    return ()=>{live=false;};
  },[activity,base?.id,extra.join('|'),user?.id,refresh]);
  const rows=Object.values(catalog).flat();
  const related=window.TrainingStudioCatalog.related(rows,[...primary,...extra]);
  const choosingFusion=Boolean(fusion?.target && extra.length<fusion.target);
  const intersects=node=>{
    if(node.items?.length)return node.items.some(intersects);
    return (node.topicIds||[]).some(id=>related.includes(id));
  };
  const showNodes=(window.MasterSpecialties?.prioritize(current?.items || roots,user?.id)||current?.items||roots).filter(node=>!choosingFusion || intersects(node));
  const reset=()=>{setPath([]);setFusion(null);setError('');};
  const goBack=()=>{
    if(path.length){setPath(previous=>previous.slice(0,-1));return;}
    if(fusion?.selected.length){setFusion(previous=>({...previous,selected:previous.selected.slice(0,-1),names:previous.names.slice(0,-1)}));return;}
    if(fusion){setPath([fusion.base]);setFusion(null);}
  };
  const choose=node=>{
    if(node.items?.length){setPath(prev=>[...prev,node]);return;}
    if(choosingFusion){
      const id=(node.topicIds||[]).find(id=>related.includes(id));
      if(!id)return;
      setFusion(prev=>({...prev,selected:[...prev.selected,id],names:[...prev.names,node.label]}));
      setPath([]);
    } else setPath(prev=>[...prev,node]);
  };
  const add=diff=>{
    if(loading || !catalog[diff].length)return;
    const label=[base.label,...(fusion?.names||[])].join(' + ');
    const step=window.TrainingStudioCatalog.makeStep(catalog[diff],label,extra);
    setBasket(prev=>[...prev,step]);
    setNotice(`Se agregó un set de ${label} en ${labels[diff]}.`);
  };
  const begin=()=>{if(!basket.length || running)return;onStart(basket.map(step=>({...step,id:`${step.id}-${Date.now()}`})));};
  const status=node=>{const n=Number.parseFloat(node.percentLabel)||0;return n<=54?'low':n<=85?'mid':'high';};
  const optionsVisible=base && (!fusion || (fusion.target && !choosingFusion));
  return <div className={`training-studio activity-${activity}`}>
    <div className="elt-trail"><button className="elt-back-button" onClick={onBack}>Volver</button><span>Freestyle</span></div>
    <header className="studio-heading"><div><span className="studio-kicker">ENGLISH LEVEL TRAINING</span><h2>Freestyle</h2></div><img src="assets/ZERO/letras.png" alt="Todos Bilingües. Así de fácil."/></header>
    <div className="studio-tabs" role="tablist" aria-label="Tipo de actividad">{activities.map(item=><button key={item.id} role="tab" aria-selected={activity===item.id} className={`studio-tab activity-${item.id} ${activity===item.id?'is-active':''}`} onClick={()=>{if(activity===item.id)return;setActivity(item.id);setCatalog({f:[],m:[],d:[]});setLoading(Boolean(base));setNotice('');}}><strong>{item.label}</strong><small>{item.note}</small><span>{basket.filter(s=>s.exerciseType===item.id).length} sets</span></button>)}</div>
    <div className="studio-workspace"><section className="studio-topics" role="tabpanel" aria-label={activities.find(a=>a.id===activity).label}>
      <div className="studio-breadcrumb"><button onClick={goBack} disabled={!path.length&&!fusion}>← Atrás</button><button onClick={reset}>Temas principales</button>{path.map((node,i)=><React.Fragment key={node.id}><span>/</span><button onClick={()=>setPath(path.slice(0,i+1))}>{node.label}</button></React.Fragment>)}</div>
      {fusion && <div className="studio-fusion-summary"><strong>Fusión · {fusion.base.label}</strong><span>{fusion.names.join(' + ') || 'Combina temas dentro del mismo ejercicio.'}</span><button onClick={()=>{setPath([fusion.base]);setFusion(null);}}>Cancelar fusión</button></div>}
      {fusion && !fusion.target ? <div className="studio-fusion-count"><h3>¿Cuántos temas adicionales?</h3><div>{[1,2,3,4,5,6,7,8,9].map(n=><button key={n} aria-pressed={count===n} onClick={()=>setCount(n)}>{n}</button>)}</div><label>Otro número<input type="number" min="1" step="1" value={count} onChange={e=>setCount(Number(e.target.value))}/></label><button className="studio-primary" disabled={!Number.isSafeInteger(count)||count<1} onClick={()=>{setFusion(prev=>({...prev,target:count}));setPath([]);}}>Elegir temas</button></div>
      : optionsVisible ? <div className="studio-difficulty"><span className="studio-kicker">{fusion?'FUSIÓN': 'ELIGE UN SET'}</span><h3>{[base.label,...(fusion?.names||[])].join(' + ')}</h3><div>{['f','m','d'].map(diff=><button key={diff} disabled={loading||!catalog[diff].length||running} onClick={()=>add(diff)}><strong>{labels[diff]}</strong><small>{loading?'Cargando…':catalog[diff].length?'Añadir un set':'Sin ejercicios disponibles'}</small></button>)}{!fusion && <button disabled={loading||!related.length} onClick={()=>{setCount(1);setFusion({base,selected:[],names:[],target:null});}}><strong>Fusión</strong><small>{related.length?'Combinar temas':'Sin temas compartidos'}</small></button>}<button onClick={reset}><strong>Regresar a temas principales</strong></button></div>{!loading&&!rows.length&&<p>No hay sets disponibles. El tema principal debe estar desbloqueado en Paso a paso.</p>}</div>
      : <><div className="studio-section-title"><h3>{choosingFusion?`Elige el tema ${extra.length+1} de ${fusion.target}`:current?.label||'¿Qué quieres practicar?'}</h3><span className="studio-legend"><span><i/>Reforzar</span><span><i/>Entendiéndolo</span><span><i/>Dominado</span></span></div><div className="studio-topic-grid">{showNodes.map(node=><button className={`studio-topic is-${status(node)}`} key={node.id} data-topic-id={node.id} onClick={()=>choose(node)}><span>{node.code ? `${node.id.startsWith('structure_')?'Estructura':'Tema'} ${node.code}`:'EXPLORAR'}</span><strong>{node.label}</strong><span className="studio-topic-status">{{low:"Reforzar",mid:"Entendiéndolo",high:"Dominado"}[status(node)]}</span><b aria-hidden="true">↗</b></button>)}</div>{choosingFusion&&!loading&&!showNodes.length&&<p>No hay ejercicios que compartan esta combinación de temas.</p>}</>}
      {loading && <p role="status">Buscando ejercicios…</p>}{error&&<div role="alert">{error}<button onClick={()=>setRefresh(n=>n+1)}>Reintentar</button></div>}
    </section><aside className="studio-basket" aria-label="Tu ruta"><div className="studio-basket-head"><h3>Tu ruta</h3><span>{basket.length} sets</span></div><p role="status" className="studio-notice">{notice||'Puedes añadir varias veces el mismo tema y dificultad.'}</p><ol>{basket.map((step,i)=><li key={step.id} className={`activity-${step.exerciseType}`}><span className="studio-set-number">{i+1}</span><div><small>{activities.find(a=>a.id===step.exerciseType).label} · {labels[step.diff]}</small><strong>{step.topic.label}</strong><span>{step.exerciseType==='reaction'?'1 reto':'3 preguntas'}{step.fusionTopics.length?' · Fusión':''}</span></div><button disabled={running} aria-label={`Quitar set ${i+1}`} onClick={()=>setBasket(prev=>prev.filter(s=>s.id!==step.id))}>×</button></li>)}</ol><button className="studio-primary" disabled={!basket.length||running} onClick={begin}>{running?'Ruta en curso':'Iniciar ruta'}</button>{basket.length>0&&<button className="studio-clear" disabled={running} onClick={()=>{setBasket([]);setNotice('Ruta vacía.');}}>Vaciar ruta</button>}<small>Los sets se juegan en este orden.</small></aside></div>
    {summary}
  </div>;
}