{% extends "base.html" %}
{% block title %}{{ loop.id }} — ResearchLoop{% endblock %}
{% block head %}
{% if loop.status in ('running', 'pending') %}
<script>setTimeout(function(){window.location.reload()},30000);</script>
{% endif %}
{% endblock %}
{% block content %}
<h2>Loop {{ loop.id }}</h2>
<div class="card">
  <dl>
    <dt>Study</dt><dd><a href="/dashboard/studies/{{ loop.study_name }}">{{ loop.study_name }}</a></dd>
    <dt>Status</dt><dd><span class="badge badge-{{ loop.status }}">{{ loop.status }}</span></dd>
    <dt>Progress</dt><dd>{{ loop.completed_count }}/{{ loop.total_count }}</dd>
    <dt>Current Sprint</dt><dd>{% if loop.current_sprint_id %}<a href="/dashboard/sprints/{{ loop.current_sprint_id }}">{{ loop.current_sprint_id }}</a>{% else %}—{% endif %}</dd>
    <dt>Created</dt><dd>{{ loop.created_at }}</dd>
    {% if loop.stopped_at %}<dt>Stopped</dt><dd>{{ loop.stopped_at }}</dd>{% endif %}
  </dl>
  <div class="actions" style="display: flex; gap: 0.5rem;">
    {% if loop.status in ('running', 'pending') %}
    <form method="post" action="/dashboard/loops/{{ loop.id }}/stop">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Stop this loop?')">Stop loop</button>
    </form>
    {% endif %}
    {% if loop.status in ('stopped', 'failed') and loop.completed_count < loop.total_count %}
    <form method="post" action="/dashboard/loops/{{ loop.id }}/resume" onsubmit="var b=this.querySelector('button');if(b.disabled)return false;b.disabled=true;b.textContent='Resuming...';">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button type="submit" class="btn btn-sm">Resume loop</button>
    </form>
    {% endif %}
  </div>
</div>
{% if context %}
<h3>Idea Generation Context</h3>
<div class="card report-content">{{ context|markdown|safe }}</div>
{% endif %}
<h3>Sprints</h3>
<table>
  <thead><tr><th>ID</th><th>Status</th><th>Idea</th><th>Summary</th><th>Created</th><th></th></tr></thead>
  <tbody>
  {% for sp in sprints %}
    <tr id="row-{{ sp.id }}">
      <td><a href="/dashboard/sprints/{{ sp.id }}">{{ sp.id }}</a></td>
      <td data-cell="status"><span class="badge badge-{{ sp.status.split(' ')[0] }}">{{ sp.status.split(' ')[0] }}</span>{% if '(' in sp.status %} <span class="dim" style="font-size:0.75rem">{{ sp.status.split('(')[1].rstrip(')') }}</span>{% endif %}</td>
      <td data-cell="idea">{% if sp.idea %}{{ sp.idea[:60] }}{% if sp.idea|length > 60 %}…{% endif %}{% elif sp.status not in ('completed', 'failed', 'cancelled') %}<span class="dim" style="font-style:italic">auto-generating...</span>{% elif sp.summary %}<span class="dim">{{ sp.summary[:60] }}{% if sp.summary|length > 60 %}…{% endif %}</span>{% endif %}</td>
      <td class="dim" data-cell="summary">{{ (sp.summary or '')[:80] }}{% if (sp.summary or '')|length > 80 %}…{% endif %}</td>
      <td class="dim">{{ sp.created_at }}</td>
      <td>
        {% if sp.status.startswith('running') or sp.status == 'submitted' %}
        <button type="button" class="refresh-btn" title="Refresh status" data-csrf="{{ csrf_token }}" onclick="refreshSprintRow('{{ sp.id }}', this)">&#8635;</button>
        {% endif %}
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>
<script>
function _esc(s){return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
function _renderStatus(status){
  if(!status)return '';
  var main=status.split(' ')[0];
  var html='<span class="badge badge-'+_esc(main)+'">'+_esc(main)+'</span>';
  var p=status.indexOf('(');
  if(p>=0){
    var sub=status.substring(p+1).replace(/\)$/,'');
    html+=' <span class="dim" style="font-size:0.75rem">'+_esc(sub)+'</span>';
  }
  return html;
}
function _renderIdea(idea, status, summary){
  if(idea){
    var t=idea.length>60?idea.substring(0,60)+'…':idea;
    return _esc(t);
  }
  var terminal=['completed','failed','cancelled'];
  var main=(status||'').split(' ')[0];
  if(terminal.indexOf(main)<0){
    return '<span class="dim" style="font-style:italic">auto-generating...</span>';
  }
  if(summary){
    var t=summary.length>60?summary.substring(0,60)+'…':summary;
    return '<span class="dim">'+_esc(t)+'</span>';
  }
  return '';
}
function _renderSummary(summary){
  if(!summary)return '';
  var t=summary.length>80?summary.substring(0,80)+'…':summary;
  return _esc(t);
}
function refreshSprintRow(id, btn){
  btn.innerHTML='<span class="spinning">&#8635;</span>';
  var csrf=btn.getAttribute('data-csrf');
  fetch('/dashboard/sprints/'+id+'/refresh',{
    method:'POST',
    headers:{'Accept':'application/json','X-CSRF-Token':csrf}
  }).then(function(r){return r.json();}).then(function(d){
    var row=document.getElementById('row-'+id);
    if(row){
      var sCell=row.querySelector('[data-cell="status"]');
      var iCell=row.querySelector('[data-cell="idea"]');
      var sumCell=row.querySelector('[data-cell="summary"]');
      if(sCell&&d.status)sCell.innerHTML=_renderStatus(d.status);
      if(iCell)iCell.innerHTML=_renderIdea(d.idea, d.status, d.summary);
      if(sumCell)sumCell.innerHTML=_renderSummary(d.summary);
    }
    btn.innerHTML='&#10003;';btn.style.color='#86efac';
    setTimeout(function(){btn.innerHTML='&#8635;';btn.style.color='';},2000);
  }).catch(function(){
    btn.innerHTML='&#8635;';
  });
}
</script>
{% endblock %}