const SUBJECTS=[
  {id:"lengua",name:"Lengua",games:[
    {id:"acentos",glyph:"á",name:"Aguda, llana o esdrújula",area:"Sílaba tónica y acentuación",t:1},
    {id:"gramatica",glyph:"Sust.",name:"Clases de palabras",area:"Sustantivo, verbo, adjetivo…",t:0}]},
  {id:"mates",name:"Matemáticas",games:[
    {id:"calculo",glyph:"×10",name:"Cálculo mental",area:"Tablas, ×10, ÷10, fracción de un número",t:1},
    {id:"problemas",glyph:"?",name:"Problemas",area:"Una y dos operaciones",t:0},
    {id:"fracciones",glyph:"¾",name:"Fracciones",area:"Leer fracciones en una figura",t:2},
    {id:"decimales",glyph:"0,5",name:"Números decimales",area:"Comparar y ordenar",t:2}]},
  {id:"naturales",name:"Ciencias de la Naturaleza",games:[
    {id:"reinos",glyph:"🍄",name:"Los cinco reinos",area:"Clasificación de los seres vivos",t:1}]},
  {id:"sociales",name:"Ciencias Sociales",games:[
    {id:"universo",glyph:"🪐",name:"El sistema solar",area:"El universo y la Tierra",t:1}]},
  {id:"english",name:"English",games:[
    {id:"grammar",glyph:"En",name:"Grammar practice",area:"A1-A2",t:0}]}
];
const HELP={acentos:"Busca la sílaba tónica y clasifica la palabra.",gramatica:"¿Qué clase de palabra es la marcada?",calculo:"Calcula de cabeza y toca el resultado.",problemas:"Lee el problema y toca la solución.",
  fracciones:"¿Qué fracción está coloreada?",decimales:"Toca el número que se pide.",reinos:"¿A qué reino pertenece este ser vivo?",universo:"Toca la respuesta correcta.",grammar:"Choose the correct word."};
const GRAM=[
  ["El *perro* ladra muy fuerte.","sustantivo"],["La *profesora* explica la lección.","sustantivo"],["El *río* baja con mucha agua.","sustantivo"],
  ["La casa *azul* es de mi abuela.","adjetivo"],["Hoy hace un día *precioso*.","adjetivo"],["El agua de la piscina está *fría*.","adjetivo"],
  ["Mi hermana *canta* muy bien.","verbo"],["Los niños *juegan* en el patio.","verbo"],["Ayer *escribimos* una carta.","verbo"],
  ["*Ellos* llegaron tarde a clase.","pronombre"],["*Nosotros* preparamos la obra de teatro.","pronombre"],["¿*Quién* ha llamado a la puerta?","pronombre"],
  ["Marta corre muy *deprisa*.","adverbio"],["Lo terminaremos *mañana*.","adverbio"],["*Siempre* desayuno fruta.","adverbio"],["Lucía es *muy* simpática.","adverbio"],
  ["El libro está *sobre* la mesa.","preposición"],["Iremos al museo *con* mis primos.","preposición"],["Salimos *hacia* el parque.","preposición"],
  ["*Aquellos* árboles son muy altos.","determinante"],["*Mis* zapatillas son nuevas.","determinante"],["*Este* cuaderno es de Pablo.","determinante"]
];
const CATS=["sustantivo","adjetivo","verbo","pronombre","adverbio","preposición","determinante"];

/* La sílaba en MAYÚSCULAS es la tónica */
const ACENTOS=["can-CIÓN","ÁR-bol","MÚ-si-ca","re-LOJ","LÁ-piz","PÁ-ja-ro","so-FÁ","ca-FÉ","ME-sa","te-LÉ-fo-no","ra-TÓN","CÁR-cel","e-XA-men","mur-CIÉ-la-go","pa-PEL","a-ZÚ-car","BRÚ-ju-la","ciu-DAD","CÉS-ped","SÁ-ba-do","ca-MIÓN","FÁ-cil","NÚ-me-ro","co-ra-ZÓN","ven-TA-na","ju-GAR","MÉ-di-co","a-ZUL","LI-bro","PLÁ-ta-no","RE-gla","ma-ri-PO-sa","pan-ta-LÓN","CÓ-mo-da"];

const REINOS=["animales","plantas","hongos","protoctistas","moneras"];
const SERES=[["Perro","🐶","animales"],["Águila","🦅","animales"],["Mariposa","🦋","animales"],["Rosal","🌹","plantas"],["Pino","🌲","plantas"],["Helecho","🌿","plantas"],
  ["Champiñón","🍄","hongos"],["Levadura del pan","🍞","hongos"],["Moho del pan","🦠","hongos"],["Ameba","🔬","protoctistas"],["Paramecio","🔬","protoctistas"],["Alga unicelular","🔬","protoctistas"],["Bacteria","🦠","moneras"]];
const UNIVERSO=[["¿Cuál es el planeta más cercano al Sol?","Mercurio","Venus","Marte"],["¿Cuál es el planeta más grande?","Júpiter","Saturno","La Tierra"],["¿Qué planeta es conocido como el planeta rojo?","Marte","Venus","Júpiter"],
  ["¿Qué es el Sol?","Una estrella","Un planeta","Un satélite"],["¿Cuál es el satélite de la Tierra?","La Luna","Marte","El Sol"],["¿Cuánto tarda la Tierra en dar una vuelta alrededor del Sol?","Un año","Un día","Un mes"],
  ["¿Qué movimiento produce el día y la noche?","La rotación","La traslación","Las mareas"],["¿Cuántos planetas tiene el sistema solar?","8","9","7"],["¿Cuál es el planeta más alejado del Sol?","Neptuno","Urano","Saturno"],
  ["¿Cómo se llama nuestra galaxia?","La Vía Láctea","Andrómeda","La Osa Mayor"],["¿Qué planeta tiene los anillos más visibles?","Saturno","Mercurio","Marte"],["¿Cuánto tarda la Tierra en girar sobre sí misma?","Un día","Un año","Una semana"]];
const GRAMMAR=[["I ___ a shower every morning.","have",["has","having"]],["There isn't ___ milk in the fridge.","any",["some","a"]],["Where ___ you yesterday?","were",["was","are"]],["He ___ watching TV at the moment.","is",["are","does"]],
  ["My sister is ___ than me.","older",["oldest","more old"]],["We ___ to the zoo last week.","went",["go","goed"]],["___ often do you play tennis?","How",["What","Who"]],["I'm good ___ maths.","at",["in","on"]],
  ["She doesn't ___ coffee.","like",["likes","liking"]],["Can you ___ me the salt, please?","pass",["passing","passes"]],["They have never ___ to Paris.","been",["be","went"]],["It's ___ cold today!","very",["much","many"]]];
const $=s=>document.querySelector(s);
const board=$("#board");
const rand=(a,b)=>a+Math.floor(Math.random()*(b-a+1));
const pick=a=>a[rand(0,a.length-1)];
const shuffle=a=>{a=[...a];for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]]}return a};
const esc=s=>String(s).replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));
const fmt=n=>{const r=Math.round(n*1000)/1000;let [i,d]=String(r).split(".");if(i.length>4)i=i.replace(/\B(?=(\d{3})+(?!\d))/g,".");return d?i+","+d:i};
const ALL=SUBJECTS.flatMap(s=>s.games.map(g=>({...g,subject:s})));
const TRIM=["Todo el curso","1.er trimestre","2.º trimestre","3.er trimestre"];

let current="acentos", soundOn=true, actx=null, trim=0;
function tone(ok){
  if(!soundOn) return;
  try{
    actx=actx||new (window.AudioContext||window.webkitAudioContext)();
    (ok?[660,880]:[220]).forEach((f,i)=>{const o=actx.createOscillator(),g=actx.createGain();o.type="sine";o.frequency.value=f;
      const t=actx.currentTime+i*.11;g.gain.setValueAtTime(.0001,t);g.gain.exponentialRampToValueAtTime(.16,t+.02);g.gain.exponentialRampToValueAtTime(.0001,t+.25);
      o.connect(g).connect(actx.destination);o.start(t);o.stop(t+.27)});
  }catch(e){}
}
function shake(el){el.classList.remove("shake");void el.offsetWidth;el.classList.add("shake")}

function renderNav(){
  $("#trims").innerHTML=TRIM.map((t,k)=>`<button data-t="${k}" aria-pressed="${k===trim}">${t}</button>`).join("");
  document.querySelectorAll("#trims button").forEach(b=>b.onclick=()=>{trim=+b.dataset.t;renderNav()});
  $("#games").innerHTML=SUBJECTS.map(s=>{const gs=s.games.filter(g=>!trim||g.t===0||g.t===trim).sort((a,b)=>a.t-b.t);
    return `<div class="subject" style="--c:var(--${s.id})"><h3>${s.name}</h3>
    ${gs.length?gs.map(g=>`<button class="game" data-id="${g.id}" aria-pressed="${g.id===current}"><span class="glyph" aria-hidden="true">${g.glyph}</span><span><strong>${g.name}</strong><small>${g.area}</small><em class="chip">${g.t?["","1.er trim.","2.º trim.","3.er trim."][g.t]:"Todo el curso"}</em></span></button>`).join(""):`<p class="empty">Nada este trimestre</p>`}</div>`}).join("");
  document.querySelectorAll(".game").forEach(b=>b.onclick=()=>{current=b.dataset.id;renderNav();play(ALL.find(x=>x.id===current))});
}

const isFrac=v=>/^\d+\/\d+$/.test(v);
/* ---------- Generadores ---------- */
function numOpts(r,extra=[]){
  const s=new Set([fmt(r)]);
  extra.forEach(x=>{if(s.size<3&&x>=0&&fmt(x)!==fmt(r))s.add(fmt(x))});
  const d=Math.abs(r)>=20?[10,-10,1,-1]:[1,-1,2,-2];
  shuffle(d).forEach(k=>{if(s.size<3&&r+k>=0)s.add(fmt(r+k))});
  return shuffle([...s]);
}
const fracHtml=v=>{const [a,b]=v.split("/");return `<span class="frac"><b>${a}</b><b>${b}</b></span>`};

function makeQ(id,used){
  if(id==="reinos"){
    const [n,e,r]=pick(SERES.filter(x=>!used.has(x[0]))); used.add(n);
    return {scene:`<p class="bigword" style="font-size:clamp(60px,9vw,96px)">${e}</p><p class="big">${esc(n)}</p>`,answer:"reino "+r,opts:REINOS.map(x=>"reino "+x),txt:true};
  }
  if(id==="universo"){
    const [q,ok,...bad]=pick(UNIVERSO.filter(x=>!used.has(x[0]))); used.add(q);
    return {scene:`<p class="big">${esc(q)}</p>`,answer:ok,opts:shuffle([ok,...bad]),txt:true};
  }
  if(id==="grammar"){
    const [s,ok,bad]=pick(GRAMMAR.filter(x=>!used.has(x[0]))); used.add(s);
    return {scene:`<p class="sentence">${esc(s).replace("___",'<span class="blank">&nbsp;?&nbsp;</span>')}</p>`,answer:ok,opts:shuffle([ok,...bad]),txt:true,
      after:()=>`<p class="sentence">${esc(s).replace("___",`<span class="blank">${esc(ok)}</span>`)}</p>`};
  }
  if(id==="fracciones"){
    const n=pick([3,4,5,6,8,10,12]), k=rand(1,n-1);
    const cells=shuffle(Array.from({length:n},(_,i)=>i<k)).map(on=>`<i class="${on?"on":""}"></i>`).join("");
    const ans=`${k}/${n}`, s=new Set([ans]);
    [`${n-k}/${n}`,`${k}/${n-k}`,`${k}/${n+1}`,`${k+1}/${n}`].forEach(x=>{const [a,b]=x.split("/").map(Number);if(s.size<3&&b>0&&a>0)s.add(x)});
    return {scene:`<div class="fbar" style="grid-template-columns:repeat(${n},1fr)" role="img" aria-label="Figura dividida en ${n} partes, ${k} coloreadas">${cells}</div>`,
      answer:ans,opts:shuffle([...s]),render:fracHtml,why:`Hay ${n} partes iguales (denominador) y ${k} coloreadas (numerador).`};
  }
  if(id==="decimales"){
    const a=rand(0,9), d=rand(2,8);
    const base=[a+d/10, a+(d-1)/10+rand(10,99)/1000*10/10, a+d/10+rand(1,9)/100, a+(d-1)/10+rand(1,9)/100+rand(1,9)/1000];
    const vals=[...new Set(shuffle(base).map(x=>fmt(x)))].slice(0,3).map(x=>+x.replace(",","."));
    const big=Math.random()<.6, t=big?Math.max(...vals):Math.min(...vals);
    return {scene:`<p class="ask">¿Cuál es el número ${big?"MAYOR":"MENOR"}?</p>`,answer:fmt(t),opts:shuffle(vals.map(fmt)),
      why:"Compara primero la parte entera, luego las décimas, después las centésimas… ¡Más cifras no significa más grande!"};
  }
  if(id==="calculo"){
    const k=rand(0,5); let txt,r,ex=[];
    if(k===0){const a=rand(3,9),b=rand(3,9);txt=`${a} × ${b}`;r=a*b;ex=[a*b+a,a*b-b];}
    else if(k===1){const a=rand(11,99)/10,m=pick([10,100,1000]);txt=`${fmt(a)} × ${m}`;r=a*m;ex=[a*m/10,a*m*10];}
    else if(k===2){const a=rand(2,99)*10,m=pick([10,100]);const aa=m===100?a*10:a;txt=`${aa} : ${m}`;r=aa/m;ex=[r*10,r/10];}
    else if(k===3){const d=pick([2,3,4,5,10]),n=d*rand(3,12);txt=`1/${d} de ${n}`;r=n/d;ex=[n-d,n*d/10];}
    else if(k===4){const a=pick([25,50,125]),b=a===125?8:a===25?pick([4,8,12]):pick([2,4,6]);txt=`${a} × ${b}`;r=a*b;ex=[r+a,r-a];}
    else {const p=pick([10,50,25]),n=pick([20,40,60,80,120,200,400]);txt=`${p} % de ${n}`;r=n*p/100;ex=[n-r,r*2];}
    return {scene:`<p class="prompt">${txt.replace(/1\/(\d+)/,(m,d)=>`<span class="frac" style="font-size:.7em;vertical-align:middle"><b>1</b><b>${d}</b></span>`)} = ?</p>`,answer:fmt(r),opts:numOpts(r,ex)};
  }
  if(id==="problemas"){
    const k=rand(0,5);
    if(k===0){const a=rand(6,12),b=rand(4,8),c=rand(10,a*b-5),r=a*b-c;
      return {scene:`<p class="problem">En el comedor hay <b>${a}</b> mesas con <b>${b}</b> sillas cada una. Se sientan <b>${c}</b> alumnos. ¿Cuántas sillas quedan libres?</p>`,answer:fmt(r),opts:numOpts(r,[a*b,a*b+c]),why:`${a} × ${b} = ${a*b} sillas; ${a*b} − ${c} = ${r}.`};}
    if(k===1){const b=rand(8,15),d=rand(6,12),a=b*d;
      return {scene:`<p class="problem">Un libro tiene <b>${a}</b> páginas. Marta lee <b>${b}</b> páginas cada día. ¿Cuántos días tarda en terminarlo?</p>`,answer:fmt(d),opts:numOpts(d,[a-b,d+2]),why:`${a} : ${b} = ${d} días.`};}
    if(k===2){const a=rand(3,6),p=rand(2,5),m=a*p<20?20:50,r=m-a*p;
      return {scene:`<p class="problem">Compramos <b>${a}</b> cuadernos a <b>${p} €</b> cada uno y pagamos con un billete de <b>${m} €</b>. ¿Cuántos euros nos devuelven?</p>`,answer:fmt(r),opts:numOpts(r,[a*p,m-a-p]),why:`${a} × ${p} = ${a*p} €; ${m} − ${a*p} = ${r} €.`};}
    if(k===3){const a=rand(12,25),b=rand(20,28),r=a*b;
      return {scene:`<p class="problem">La excursión cuesta <b>${a} €</b> por alumno y van <b>${b}</b> alumnos. ¿Cuánto se paga en total?</p>`,answer:fmt(r),opts:numOpts(r,[a+b,r+a]),why:`${a} × ${b} = ${r} €.`};}
    if(k===4){const d=pick([3,4,5]),n=d*rand(5,12),r=n/d;
      return {scene:`<p class="problem">En una caja hay <b>${n}</b> canicas. <span class="frac" style="vertical-align:middle;font-weight:700"><b>1</b><b>${d}</b></span> de ellas son rojas. ¿Cuántas canicas rojas hay?</p>`,answer:fmt(r),opts:numOpts(r,[n-r,n-d]),why:`${n} : ${d} = ${r}.`};}
    const a=rand(120,480),b=rand(60,180),c=rand(40,a+b-30),r=a+b-c;
    return {scene:`<p class="problem">Una biblioteca tenía <b>${a}</b> libros. Compró <b>${b}</b> más y prestó <b>${c}</b>. ¿Cuántos libros quedan en la biblioteca?</p>`,answer:fmt(r),opts:numOpts(r,[a+b,a-c]),why:`${a} + ${b} = ${a+b}; ${a+b} − ${c} = ${r}.`};
  }
  if(id==="gramatica"){
    const [s,c]=pick(GRAM.filter(x=>!used.has(x[0]))); used.add(s);
    const html=esc(s).replace(/\*(.+?)\*/,"<mark>$1</mark>");
    return {scene:`<p class="sentence">${html}</p>`,answer:c,opts:shuffle([c,...shuffle(CATS.filter(x=>x!==c)).slice(0,2)]),txt:true};
  }
  /* acentos */
  const w=pick(ACENTOS.filter(x=>x&&!used.has(x))); used.add(w);
  const sy=w.split("-"), ti=sy.findIndex(x=>x===x.toUpperCase()), fromEnd=sy.length-1-ti;
  const type=["aguda","llana","esdrújula"][fromEnd];
  const word=sy.join("").toLowerCase();
  return {scene:`<p class="bigword">${esc(word)}</p>`,answer:type,opts:["aguda","llana","esdrújula"],txt:true,
    after:()=>`<div class="sylls">${sy.map((x,i)=>`<span class="${i===ti?"t":""}">${esc(x.toLowerCase())}</span>`).join("")}</div>`};
}

/* ---------- Motor ---------- */
function play(g){
  const lect=g.id==="lectura", R=lect?6:8;
  const queue=lect?shuffle(LECTURAS).slice(0,3).flatMap(l=>[{l,qi:0},{l,qi:1}]):[];
  let i=0, score=0; const used=new Set();
  const head=(extra="")=>`<div class="board-head" style="--c:var(--${g.subject.id})"><div><span class="subj">${g.subject.name}</span><h2>${g.name}</h2><p>${HELP[g.id]}</p></div>${extra}</div>`;
  const next=()=>{
    if(i===R) return win();
    const q=makeQ(g.id,used,queue[i]);
    board.innerHTML=head(`<div class="count"><span>${i+1} / ${R}</span><span class="bar"><i style="width:${i/R*100}%"></i></span></div>`)+
      `<div class="q" id="qq">${q.scene}<div class="opts">${q.opts.map(o=>`<button class="opt${q.txt?" txt":""}" data-v="${esc(o)}">${q.render&&isFrac(o)?fracHtml(o):esc(o)}</button>`).join("")}</div><p class="hint" id="hint"></p></div>`;
    let tried=false;
    board.querySelectorAll(".opt").forEach(b=>b.onclick=()=>{
      if(b.disabled) return;
      if(b.dataset.v===q.answer){
        b.classList.add("ok"); tone(true); if(!tried) score++;
        board.querySelectorAll(".opt").forEach(x=>x.disabled=true);
        if(q.after){const s=board.querySelector("#qq .sentence"); if(s) s.outerHTML=q.after(); else $("#hint").insertAdjacentHTML("beforebegin",q.after());}
        $("#hint").textContent=(tried?"¡Ahora sí! ":"¡Correcto! ")+(q.why||"");
        i++; setTimeout(next,q.why?2300:1200);
      }else{ tried=true; b.classList.add("bad"); b.disabled=true; tone(false); shake(b); $("#hint").textContent="Mmm… piénsalo otra vez."; }
    });
  };
  const win=()=>{
    const msg=score===R?"¡Pleno! Dominio total.":score>=R*0.75?"Muy buen resultado.":score>=R/2?"Bien, pero merece otra ronda.":"Repasemos y volvemos a intentarlo.";
    board.innerHTML=head()+`<div class="win"><div class="score">${score} / ${R}</div><span class="bar"><i style="width:${score/R*100}%"></i></span><p>${msg}</p><button class="primary" id="again">Otra ronda</button></div>`;
    $("#again").onclick=()=>play(g);
  };
  next();
}

$("#sound").onclick=e=>{soundOn=!soundOn;e.currentTarget.textContent="Sonido: "+(soundOn?"sí":"no");e.currentTarget.setAttribute("aria-pressed",soundOn)};
$("#full").onclick=()=>{try{const p=document.fullscreenElement?document.exitFullscreen():board.requestFullscreen();p&&p.catch&&p.catch(()=>{})}catch(e){}};

renderNav(); play(ALL[0]);