(function(){
  const scenarios = window.JS_SCENARIOS || [];
  const sel = document.getElementById('scenarioSelect');

  const suiteVal = document.getElementById('suiteVal');
  const worldVal = document.getElementById('worldVal');
  const outcomeVal = document.getElementById('outcomeVal');
  const packVal = document.getElementById('packVal');

  const intentText = document.getElementById('intentText');
  const statusText = document.getElementById('statusText');
  const aiText = document.getElementById('aiText');
  const diffText = document.getElementById('diffText');
  const boundsList = document.getElementById('boundsList');
  const escalationText = document.getElementById('escalationText');

  const boardBtn = document.getElementById('boardBtn');
  const regBtn = document.getElementById('regBtn');
  const disputeBtn = document.getElementById('disputeBtn');
  const evidenceBtn = document.getElementById('evidenceBtn');

  const timeline = document.getElementById('timeline');
  const replayBtn = document.getElementById('replayBtn');
  const stopBtn = document.getElementById('stopBtn');

  let current = null;
  let interval = null;
  let stepIndex = 0;

  function optionLabel(s){
    return `${s.name} — ${s.outcome}`;
  }

  function buildOptions(){
    sel.innerHTML = '';
    scenarios.forEach((s, idx)=>{
      const opt = document.createElement('option');
      opt.value = s.slug;
      opt.textContent = optionLabel(s);
      sel.appendChild(opt);
    });
    if(scenarios.length){
      sel.value = scenarios[0].slug;
      setScenario(scenarios[0].slug);
    }
  }

  function renderTimeline(events){
    timeline.innerHTML = '';
    (events || []).forEach((ev, i)=>{
      const step = document.createElement('div');
      step.className = 't-step';
      step.dataset.index = String(i);

      const dot = document.createElement('div');
      dot.className = 't-dot';

      const body = document.createElement('div');
      body.className = 't-body';

      const title = document.createElement('div');
      title.className = 't-title';
      title.textContent = ev.title;

      const desc = document.createElement('div');
      desc.className = 't-desc';
      desc.textContent = ev.description;

      body.appendChild(title);
      body.appendChild(desc);
      step.appendChild(dot);
      step.appendChild(body);
      timeline.appendChild(step);
    });
  }

  function clearActive(){
    document.querySelectorAll('.t-step.active').forEach(el=>el.classList.remove('active'));
  }

  function activateStep(i){
    clearActive();
    const el = timeline.querySelector(`.t-step[data-index="${i}"]`);
    if(el){
      el.classList.add('active');
      el.scrollIntoView({behavior:'smooth', block:'nearest'});
    }
  }

  function setScenario(slug){
    current = scenarios.find(s=>s.slug===slug) || scenarios[0];
    if(!current) return;

    suiteVal.textContent = current.suite;
    worldVal.textContent = current.world;
    outcomeVal.textContent = current.outcome;
    packVal.textContent = current.pack_id;

    intentText.textContent = current.proposed_action;
    statusText.textContent = current.status_quo;
    aiText.textContent = current.ai_shift;
    diffText.textContent = current.js_difference;

    // Bounds list
    boundsList.innerHTML = '';
    (current.bounds || []).forEach(b=>{
      const li = document.createElement('li');
      li.textContent = b;
      boundsList.appendChild(li);
    });
    escalationText.textContent = `Escalation: ${current.escalation}`;

    boardBtn.href = current.exports.board;
    regBtn.href = current.exports.regulator;
    disputeBtn.href = current.exports.dispute;
    evidenceBtn.href = current.evidence_pack;

    renderTimeline(current.replay_events || []);
    stopReplay();
  }

  function startReplay(){
    if(!current) return;
    stopReplay();
    const events = current.replay_events || [];
    if(!events.length) return;

    replayBtn.disabled = true;
    stopBtn.disabled = false;

    stepIndex = 0;
    activateStep(stepIndex);

    const stepMs = Math.floor(90000 / events.length);
    interval = setInterval(()=>{
      stepIndex += 1;
      if(stepIndex >= events.length){
        stopReplay();
        return;
      }
      activateStep(stepIndex);
    }, stepMs);
  }

  function stopReplay(){
    if(interval){
      clearInterval(interval);
      interval = null;
    }
    replayBtn.disabled = false;
    stopBtn.disabled = true;
    clearActive();
  }

  sel.addEventListener('change', (e)=>setScenario(e.target.value));
  replayBtn.addEventListener('click', startReplay);
  stopBtn.addEventListener('click', stopReplay);

  buildOptions();
})();
