/* stoplicht (bordgereedschap-variant zit in board.js) */
/* =========================================================
   Traffic light widget
==========================================================*/
function mountLight(root, initState){
  let on = (initState && initState.on) || "green";
  root.innerHTML = `
    <div class="tl">
      <p class="play-mission tl-mission"></p>
      <div class="tl-house">
        <div class="tl-option"><button class="tl-lamp red" data-c="red"></button><span><strong></strong><small></small></span></div>
        <div class="tl-option"><button class="tl-lamp orange" data-c="orange"></button><span><strong></strong><small></small></span></div>
        <div class="tl-option"><button class="tl-lamp green" data-c="green"></button><span><strong></strong><small></small></span></div>
      </div>
      <output class="tl-status" aria-live="polite"></output>
    </div>`;
  const keys={red:['lightRed','lightRedHint'],orange:['lightOrange','lightOrangeHint'],green:['lightGreen','lightGreenHint']};
  function apply(){
    root.querySelectorAll(".tl-lamp").forEach(l=>{
      const active=l.dataset.c===on; l.classList.toggle("on",active);l.setAttribute('aria-pressed',String(active));
    });
    const [color,hint]=keys[on];
    root.querySelector('.tl-status').textContent=T('lightStatus').replace('{color}',T(color)).replace('{hint}',T(hint));
  }
  root.querySelectorAll(".tl-lamp").forEach(l=>{
    l.addEventListener("click", ()=>{ on = l.dataset.c; apply(); tone(on==='red'?260:on==='orange'?390:520,.12,0,'sine',.06); });
  });
  function labels(){
    root.querySelector('.tl-mission').textContent=T('wg_light_d');
    root.querySelectorAll('.tl-option').forEach(option=>{const lamp=option.querySelector('.tl-lamp'),[color,hint]=keys[lamp.dataset.c];lamp.setAttribute('aria-label',`${T(color)}: ${T(hint)}`);option.querySelector('strong').textContent=T(color);option.querySelector('small').textContent=T(hint)});
    apply();
  }
  document.addEventListener('langchange',labels);labels();
  return { getState: ()=>({on}) };
}