(function(){
  var rootId='transitionStudioModal';
  var mounted=false;
  var state={ transitions:[
    {id:'cut', name:'Cut', duration:150, easing:'linear'},
    {id:'fade', name:'Fade', duration:450, easing:'ease'},
    {id:'wipe-left', name:'Wipe Left', duration:600, easing:'ease-in-out'}
  ], activeId:'fade' };

  function body(){ return document.getElementById('transitionStudioBody'); }
  function current(){ return state.transitions.find(function(t){ return t.id===state.activeId; }) || state.transitions[0]; }

  function mount(){ if(mounted) return; mounted=true; render(); }
  function open(payload){ mount(); FeatureModal.open(rootId); }
  function close(){ FeatureModal.close(rootId); }

  function render(){
    var t=current();
    body().innerHTML = [
      '<div class="tsm-pane"><div class="tsm-list">',
      state.transitions.map(function(x){ return '<div class="tsm-item'+(x.id===state.activeId?' active':'')+'" data-tsm-id="'+x.id+'"><b>'+esc(x.name)+'</b><div>'+x.duration+' ms</div></div>'; }).join(''),
      '</div></div>',
      '<div class="tsm-pane tsm-preview"><div class="tsm-preview-stage" id="tsmPreview"><div class="tsm-a"></div><div class="tsm-b" id="tsmB"></div></div></div>',
      '<div class="tsm-pane"><div class="tsm-form">'+
      '<div class="tsm-field"><label>Name</label><input id="tsmName" value="'+escAttr(t.name)+'"></div>'+
      '<div class="tsm-field"><label>Duration (ms)</label><input id="tsmDuration" type="number" min="0" value="'+t.duration+'"></div>'+
      '<div class="tsm-field"><label>Easing</label><select id="tsmEasing"><option '+sel(t.easing,'linear')+'>linear</option><option '+sel(t.easing,'ease')+'>ease</option><option '+sel(t.easing,'ease-in')+'>ease-in</option><option '+sel(t.easing,'ease-out')+'>ease-out</option><option '+sel(t.easing,'ease-in-out')+'>ease-in-out</option></select></div>'+
      '<button class="featureBtn primary" id="tsmPlay">Preview</button>'+
      '</div></div>'
    ].join('');
    bind();
  }

  function bind(){
    body().querySelectorAll('[data-tsm-id]').forEach(function(el){ el.addEventListener('click', function(){ state.activeId=this.getAttribute('data-tsm-id'); render(); }); });
    document.getElementById('tsmName')?.addEventListener('input', function(){ current().name=this.value; });
    document.getElementById('tsmDuration')?.addEventListener('input', function(){ current().duration=parseInt(this.value,10)||0; });
    document.getElementById('tsmEasing')?.addEventListener('change', function(){ current().easing=this.value; });
    document.getElementById('tsmPlay')?.addEventListener('click', preview);
  }

  function preview(){
    var t=current();
    var b=document.getElementById('tsmB');
    if(!b) return;
    b.style.transition='none'; b.style.opacity='0'; b.style.transform='translateX(0)';
    void b.offsetWidth;
    if(t.id==='cut'){ b.style.opacity='1'; return; }
    if(t.id==='fade'){
      b.style.transition='opacity '+t.duration+'ms '+t.easing;
      b.style.opacity='1';
      return;
    }
    if(t.id==='wipe-left'){
      b.style.opacity='1';
      b.style.transform='translateX(100%)';
      void b.offsetWidth;
      b.style.transition='transform '+t.duration+'ms '+t.easing;
      b.style.transform='translateX(0%)';
    }
  }

  function esc(v){ return String(v==null?'':v).replace(/[&<>"]/g, function(c){ return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'})[c]; }); }
  function escAttr(v){ return esc(v).replace(/'/g,'&#39;'); }
  function sel(a,b){ return a===b?'selected':''; }
  window.TransitionStudio={ open:open, close:close, mount:mount, preview:preview };
})();
