(function(){
  var rootId = 'mediaStudioModal';
  var mounted = false;
  var state = { items: [], activeId: null, projectId: '' };

  function body(){ return document.getElementById('mediaStudioBody'); }
  function status(){ return document.getElementById('mediaStudioStatus'); }
  function current(){ return state.items.find(function(x){ return x.id === state.activeId; }) || null; }

  function seed(){
    if(state.items.length) return;
    state.items = [
      { id:'media_1', name:'Intro Clip', type:'video', duration:'00:00:20', src:'' },
      { id:'media_2', name:'Lower Third PNG', type:'image', duration:'Still', src:'' },
      { id:'media_3', name:'Stinger Audio', type:'audio', duration:'00:00:05', src:'' }
    ];
    state.activeId = state.items[0].id;
  }

  function render(){
    if(!body()) return;
    var item = current();
    body().innerHTML = [
      '<div class="msm-pane"><div class="msm-list">',
      state.items.map(function(it){ return '<div class="msm-item'+(it.id===state.activeId?' active':'')+'" data-msm-id="'+it.id+'"><b>'+escapeHtml(it.name)+'</b><div>'+escapeHtml(it.type)+' · '+escapeHtml(it.duration)+'</div></div>'; }).join(''),
      '</div></div>',
      '<div class="msm-pane msm-preview"><div class="msm-preview-box">'+(item?('Preview: '+escapeHtml(item.name)):'No media selected')+'</div></div>',
      '<div class="msm-pane"><div class="msm-form">',
      item ? ('<div class="msm-field"><label>Name</label><input id="msmName" value="'+escapeAttr(item.name)+'"></div>'+
              '<div class="msm-field"><label>Type</label><select id="msmType"><option '+sel(item.type,'video')+'>video</option><option '+sel(item.type,'image')+'>image</option><option '+sel(item.type,'audio')+'>audio</option></select></div>'+
              '<div class="msm-field"><label>Duration</label><input id="msmDuration" value="'+escapeAttr(item.duration)+'"></div>') : '<div>No item selected</div>',
      '</div></div>'
    ].join('');
    bind();
  }

  function bind(){
    body().querySelectorAll('[data-msm-id]').forEach(function(el){
      el.addEventListener('click', function(){ state.activeId = this.getAttribute('data-msm-id'); render(); });
    });
    var n = document.getElementById('msmName');
    if(n) n.addEventListener('input', function(){ var x=current(); if(x){ x.name=this.value; render(); } });
    var t = document.getElementById('msmType');
    if(t) t.addEventListener('change', function(){ var x=current(); if(x){ x.type=this.value; render(); } });
    var d = document.getElementById('msmDuration');
    if(d) d.addEventListener('input', function(){ var x=current(); if(x){ x.duration=this.value; } });
  }

  function mount(){ if(mounted) return; mounted=true; seed(); render(); }
  function open(payload){ payload = payload || {}; state.projectId = payload.projectId || ''; mount(); FeatureModal.open(rootId); status() && (status().textContent = 'Media Studio ready'); }
  function close(){ FeatureModal.close(rootId); }

  function escapeHtml(v){ return String(v==null?'':v).replace(/[&<>"]/g, function(c){ return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'})[c]; }); }
  function escapeAttr(v){ return escapeHtml(v).replace(/'/g,'&#39;'); }
  function sel(a,b){ return a===b ? 'selected' : ''; }

  window.MediaStudio = { open: open, close: close, mount: mount };
})();
