{% extends "base.html" %}
{% block title %}Sprints — ResearchLoop{% endblock %}
{% block content %}
<h2>Sprints</h2>

{% if studies %}
<div class="card">
  <h3 style="margin-top:0">New sprint</h3>
  {% if error %}<p class="error">{{ error }}</p>{% endif %}
  {% if success %}<p class="success">{{ success }}</p>{% endif %}
  <form method="post" action="/dashboard/sprints/new" onsubmit="var b=this.querySelector('button[type=submit]');if(b.disabled)return false;b.disabled=true;b.textContent='Submitting...';">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="form-group">
      <label for="study_name">Study</label>
      {% set last_study = sprints[0].study_name if sprints else None %}
      <select name="study_name" id="study_name" required onchange="updateDefaults()">
        {% for s in studies %}<option value="{{ s }}"{% if s == last_study %} selected{% endif %}>{{ s }}</option>{% endfor %}
      </select>
    </div>
    <div class="form-group">
      <label for="idea">Research idea</label>
      <textarea name="idea" id="idea" rows="3" placeholder="Describe what this sprint should investigate..." required></textarea>
    </div>
    <details style="margin-bottom:0.75rem">
      <summary class="dim" style="cursor:pointer;font-size:0.85rem">Resource settings</summary>
      <div style="display:flex;gap:0.75rem;margin-top:0.5rem;flex-wrap:wrap">
        <div class="form-group" style="margin:0">
          <label for="gpu" style="font-size:0.8rem">GPU</label>
          <input type="text" name="gpu" id="gpu" placeholder="e.g. gpu:1" style="width:140px;font-size:0.85rem">
        </div>
        <div class="form-group" style="margin:0">
          <label for="mem" style="font-size:0.8rem">Memory</label>
          <input type="text" name="mem" id="mem" placeholder="e.g. 64G" style="width:80px;font-size:0.85rem">
        </div>
        <div class="form-group" style="margin:0">
          <label for="cpus" style="font-size:0.8rem">CPUs</label>
          <input type="text" name="cpus" id="cpus" placeholder="e.g. 8" style="width:60px;font-size:0.85rem">
        </div>
      </div>
    </details>
    <button type="submit" class="btn">Submit sprint</button>
  </form>
</div>
<script>
var studyDefaults={{ study_defaults_json|safe }};
function updateDefaults(){
  var s=document.getElementById('study_name').value;
  var d=studyDefaults[s]||{};
  document.getElementById('gpu').value=d.gpu||'';
  document.getElementById('mem').value=d.mem||'';
  document.getElementById('cpus').value=d.cpus||'';
}
updateDefaults();
</script>
{% endif %}

<table>
  <thead><tr><th>ID</th><th>Study</th><th>Status</th><th>Idea</th><th>Loop</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><a href="/dashboard/studies/{{ sp.study_name }}">{{ sp.study_name }}</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[:50] }}{% if sp.idea|length > 50 %}…{% endif %}{% elif sp.loop_id and sp.status not in ('completed', 'failed', 'cancelled') %}<span class="dim" style="font-style:italic">auto-generating idea...</span>{% elif sp.summary %}<span class="dim">{{ sp.summary[:50] }}{% if sp.summary|length > 50 %}…{% endif %}</span>{% endif %}</td>
      <td>{% if sp.loop_id %}<a href="/dashboard/loops/{{ sp.loop_id }}" class="dim" style="font-size:0.85rem">{{ sp.loop_id }}</a>{% 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, loopId){
  if(idea){
    var t=idea.length>50?idea.substring(0,50)+'…':idea;
    return _esc(t);
  }
  var terminal=['completed','failed','cancelled'];
  var main=(status||'').split(' ')[0];
  if(loopId && terminal.indexOf(main)<0){
    return '<span class="dim" style="font-style:italic">auto-generating idea...</span>';
  }
  if(summary){
    var t=summary.length>50?summary.substring(0,50)+'…':summary;
    return '<span class="dim">'+_esc(t)+'</span>';
  }
  return '';
}
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"]');
      if(sCell&&d.status)sCell.innerHTML=_renderStatus(d.status);
      if(iCell)iCell.innerHTML=_renderIdea(d.idea, d.status, d.summary, d.loop_id);
    }
    btn.innerHTML='&#10003;';btn.style.color='#86efac';
    setTimeout(function(){btn.innerHTML='&#8635;';btn.style.color='';},2000);
  }).catch(function(){
    btn.innerHTML='&#8635;';
  });
}
</script>
{% endblock %}