/* widget: Complimentenmachine */
/* =========================================================
   Trek een willekeurig compliment - zelfde spin-en-onthul-mechaniek als
   de namenkiezer (names.js)
==========================================================*/
const COMPLIMENTS = Object.freeze([
  { nl:"Jij bent een fijne klasgenoot!", en:"You're a great classmate!" },
  { nl:"Wat knap dat je dat zelf hebt uitgezocht!", en:"Great job figuring that out yourself!" },
  { nl:"Jij luistert altijd goed naar anderen.", en:"You're always a great listener." },
  { nl:"Je hebt vandaag hard gewerkt, goed gedaan!", en:"You worked hard today, well done!" },
  { nl:"Jij deelt graag met anderen.", en:"You love sharing with others." },
  { nl:"Wat fijn dat jij er bent!", en:"We're so glad you're here!" },
  { nl:"Jij bent heel behulpzaam.", en:"You're very helpful." },
  { nl:"Je hebt een mooie glimlach.", en:"You have a lovely smile." },
  { nl:"Jij geeft nooit op, dat is knap!", en:"You never give up, that's impressive!" },
  { nl:"Jij bent een echte teamspeler.", en:"You're a real team player." },
  { nl:"Wat een goed idee had jij daar!", en:"That was a great idea you had!" },
  { nl:"Jij maakt anderen graag blij.", en:"You love making others happy." },
  { nl:"Je hebt heel goed je best gedaan.", en:"You tried really hard." },
  { nl:"Jij bent creatief en origineel.", en:"You're creative and original." },
  { nl:"Jij zegt altijd eerlijk wat je denkt.", en:"You always speak your mind honestly." },
  { nl:"Jij bent een fijne vriend(in).", en:"You're a great friend." },
  { nl:"Wat kun jij goed samenwerken!", en:"You're so good at working together!" },
  { nl:"Jij maakt de klas een fijnere plek.", en:"You make our class a nicer place." },
  { nl:"Jij durft dingen te proberen, goed zo!", en:"You're brave enough to try new things!" },
  { nl:"Jij bent trots op jezelf, en dat mag!", en:"You're proud of yourself, and that's great!" },
]);
function mountCompliments(root, initState){
  let current = null, spinning = false;
  root.innerHTML = `
    <div class="cpl">
      <p class="play-mission cpl-mission"></p>
      <div class="cpl-card"><span class="cpl-icon">💝</span><p class="cpl-text"></p></div>
      <button class="tbtn cpl-draw"></button>
    </div>`;
  const card = root.querySelector(".cpl-card"), text = root.querySelector(".cpl-text"), drawBtn = root.querySelector(".cpl-draw");
  function pickRandom(){ return COMPLIMENTS[Math.floor(Math.random() * COMPLIMENTS.length)]; }
  function draw(){
    if(spinning) return;
    spinning = true;
    card.classList.remove("show");
    let n = 0;
    const iv = setInterval(()=>{
      text.textContent = pickRandom()[LANG];
      tone(500 + Math.random() * 200, 0.03, 0, "square", 0.04);
      if(++n >= 10){
        clearInterval(iv);
        current = pickRandom();
        text.textContent = current[LANG];
        card.classList.add("show");
        confetti(card);
        sndWin();
        spinning = false;
      }
    }, 70);
  }
  drawBtn.addEventListener("click", draw);
  function labels(){
    root.querySelector(".cpl-mission").textContent = T("wg_compliments_d");
    drawBtn.textContent = "💝 " + T("complimentsDraw");
    if(current) text.textContent = current[LANG];
  }
  document.addEventListener("langchange", labels);
  labels();
  return { getState: ()=>({}) };
}