/* widget: interactieve getallenlijn */
function mountNumberline(root, initState){
  const S=Object.assign({min:0,max:20,step:1,value:0,target:10},initState||{});
  root.innerHTML=`
    <div class="nlw">
      <div class="nlw-settings">
        <label><span class="nlw-from-label"></span><input class="nlw-min" type="number" min="-100" max="99"></label>
        <label><span class="nlw-to-label"></span><input class="nlw-max" type="number" min="-99" max="200"></label>
        <label><span class="nlw-step-label"></span><select class="nlw-step"><option>1</option><option>2</option><option>5</option><option>10</option></select></label>
        <button class="tbtn ghost nlw-new" type="button"></button>
      </div>
      <div class="nlw-task"></div>
      <div class="nlw-scroll"><div class="nlw-line"></div></div>
      <div class="nlw-actions">
        <button class="tbtn ghost nlw-minus" type="button">−</button>
        <output class="nlw-value"></output>
        <button class="tbtn ghost nlw-plus" type="button">＋</button>
        <button class="tbtn nlw-check" type="button"></button>
      </div>
      <div class="nlw-feedback" aria-live="polite"></div>
    </div>`;
  const q=s=>root.querySelector(s), minEl=q('.nlw-min'), maxEl=q('.nlw-max'), stepEl=q('.nlw-step'),
        line=q('.nlw-line'), valueEl=q('.nlw-value'), task=q('.nlw-task'), feedback=q('.nlw-feedback');
  minEl.value=S.min; maxEl.value=S.max; stepEl.value=S.step;
  function normalize(){
    let min=Math.max(-100,Math.min(99,+minEl.value||0)); let max=Math.max(-99,Math.min(200,+maxEl.value||20));
    if(max<=min) max=min+1; const step=+stepEl.value||1;
    if((max-min)/step>60) max=min+60*step;
    S.min=min; S.max=max; S.step=step;
    if(S.value<min||S.value>max||(S.value-min)%step!==0) S.value=min;
    if(S.target<min||S.target>max||(S.target-min)%step!==0) S.target=min;
    minEl.value=min; maxEl.value=max; render();
  }
  function render(){
    line.innerHTML="";
    for(let v=S.min;v<=S.max;v+=S.step){
      const b=document.createElement('button'); b.type='button'; b.className='nlw-tick'; b.dataset.v=v;
      const mark=document.createElement('i'), label=document.createElement('span'); label.textContent=v;
      b.append(mark,label); b.classList.toggle('selected',v===S.value);
      b.addEventListener('click',()=>{S.value=v; feedback.textContent=""; render();}); line.appendChild(b);
    }
    valueEl.textContent=S.value; task.textContent=T('numberlineTask').replace('{number}',S.target);
  }
  function newTarget(){
    const count=Math.floor((S.max-S.min)/S.step); S.target=S.min+Math.floor(Math.random()*(count+1))*S.step;
    feedback.textContent=""; render();
  }
  [minEl,maxEl,stepEl].forEach(el=>el.addEventListener('change',normalize));
  q('.nlw-minus').addEventListener('click',()=>{S.value=Math.max(S.min,S.value-S.step);render();});
  q('.nlw-plus').addEventListener('click',()=>{S.value=Math.min(S.max,S.value+S.step);render();});
  q('.nlw-new').addEventListener('click',newTarget);
  q('.nlw-check').addEventListener('click',()=>{
    const ok=S.value===S.target; feedback.textContent=T(ok?'numberlineGood':'numberlineTry');
    feedback.className='nlw-feedback '+(ok?'ok':'bad'); if(ok){sndGood();confetti(root);}else sndBad();
  });
  function labels(){
    q('.nlw-from-label').textContent=T('numberlineFrom'); q('.nlw-to-label').textContent=T('numberlineTo');
    q('.nlw-step-label').textContent=T('numberlineStep'); q('.nlw-new').textContent=T('numberlineNew');
    q('.nlw-check').textContent=T('numberlineCheck'); render();
  }
  document.addEventListener('langchange',labels); labels(); normalize();
  return {getState:()=>({...S})};
}