let DATA;
const $=q=>document.querySelector(q);
async function boot(){
  DATA=await (await fetch('./demo-data.json')).json();
  $('#metrics').innerHTML=DATA.metrics.map(([l,v])=>`<div class="metric"><b>${v}</b><span>${l}</span></div>`).join('');
  const s=DATA.scenario;
  $('#question').textContent=s.question;
  $('#conditions').innerHTML=Object.entries(s.conditions).map(([k,v])=>`<div class="condition"><b>${k}</b>${v}</div>`).join('');
  draw('#retrieval',DATA.retrieval,['Dense baseline','Section-aware','Hybrid RRF — selected','Reranker ablation']);
  draw('#agent',DATA.agent,['Analytical tools','Agentic investigation','Agentic + verifier — final']);
}
function draw(sel,items,labels){
  $(sel).innerHTML=items.map(([v,s],i)=>`<div class="row"><div class="row-head"><strong>${v} · ${s}%</strong><span>${labels[i]}</span></div><div class="bar"><i style="width:${s}%"></i></div></div>`).join('');
}
function runDemo(){
  $('#placeholder').style.display='none';
  $('#result').classList.remove('active');
  $('#loading').classList.add('active');
  const stages=['Retrieving historical incidents...','Running bounded analytics...','Assessing evidence sufficiency...','Generating ranked hypotheses...','Verifying claims and citations...'];
  let i=0; $('#loading-status').textContent=stages[0];
  const timer=setInterval(()=>{i++;if(i<stages.length){$('#loading-status').textContent=stages[i]}else{clearInterval(timer);showResult()}},320);
}
function showResult(){
  const s=DATA.scenario;
  $('#loading').classList.remove('active');
  $('#root').textContent=s.root_cause;
  $('#summary').textContent=s.summary;
  $('#confidence').textContent='Confidence '+s.confidence.toFixed(2);
  $('#support').textContent=s.support;
  $('#verification').textContent='Verification '+s.verification;
  $('#timeline').innerHTML=s.timeline.map(t=>`<div class="step"><div class="dot"></div>${t}</div>`).join('');
  $('#evidence').innerHTML=s.evidence.map(([c,t,x])=>`<div class="ev"><code>${c}</code><p>${x}</p></div>`).join('');
  $('#analytics').innerHTML=s.analytics.map(([n,v,d])=>`<div class="analytic"><div><b>${n}</b><small>${d}</small></div><strong>${v}</strong></div>`).join('');
  $('#result').classList.add('active');
}
document.addEventListener('DOMContentLoaded',boot);