{% extends "network/base.html" %}
{% block title %}Design Versions — {{ topology.name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Design Versions — {{ topology.name }}</h1>
    <p class="page-subtitle">Track as-is, future state, and phase-based design changes</p>
  </div>
  <div class="page-actions">
    <a href="/network/canvas/{{ topology.id }}" class="btn btn-secondary">Open in Canvas</a>
    <button class="btn btn-primary" onclick="document.getElementById('add-modal').style.display='flex'">+ Snapshot Version</button>
  </div>
</div>

<section class="panel panel-wide">
  <div class="panel-header"><h2 class="panel-title">Version History ({{ versions|length }})</h2></div>
  {% if versions %}
  <table class="data-table">
    <thead><tr><th>Version</th><th>Label</th><th>Phase</th><th>Created By</th><th>Created</th><th>Notes</th><th>Actions</th></tr></thead>
    <tbody>
    {% for v in versions %}
      <tr>
        <td><strong>v{{ v.version_num }}</strong></td>
        <td>{{ v.label }}</td>
        <td><span class="badge badge-{% if v.phase == 'as-is' %}public{% elif 'Year' in (v.phase or '') %}warning{% else %}info{% endif %}">{{ v.phase }}</span></td>
        <td>{{ v.created_by or '—' }}</td>
        <td>{{ (v.created_at or '')[:16] }}</td>
        <td>{{ v.notes or '—' }}</td>
        <td class="actions">
          <input type="radio" name="va" value="{{ v.id }}" title="Select as Version A">
          <input type="radio" name="vb" value="{{ v.id }}" title="Select as Version B">
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  <div style="padding:1rem;">
    <button class="btn btn-secondary" onclick="diffVersions()">Compare Selected Versions</button>
    <div id="diff-result" style="margin-top:1rem;"></div>
  </div>
  {% else %}<p style="padding:1rem;color:var(--text-muted);">No versions yet. Click "+ Snapshot Version" to save the current state.</p>{% endif %}
</section>

<div id="add-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Save Version Snapshot</h3>
    <form onsubmit="return submitVersion(event)">
      <div class="form-grid">
        <label>Label <input name="label" placeholder="Approved Design, As-Built..."></label>
        <label>Phase <select name="phase">
          <option value="as-is">As-Is (Current)</option>
          <option value="future">Future State</option>
          <option value="Q1">Q1</option><option value="Q2">Q2</option><option value="Q3">Q3</option><option value="Q4">Q4</option>
          <option value="Year-1">Year 1</option><option value="Year-2">Year 2</option><option value="Year-3">Year 3</option>
        </select></label>
        <label>Created By <input name="created_by" placeholder="Your name"></label>
        <label>Notes <input name="notes" placeholder="What changed"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save Snapshot</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
const TOPO_ID='{{ topology.id }}';
function submitVersion(e){e.preventDefault();const fd=new FormData(e.target),d={};fd.forEach((v,k)=>d[k]=v);
  fetch(NC_BASE+'/api/versions/'+TOPO_ID,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(d)}).then(r=>{if(r.ok)location.reload();});return false;}
function diffVersions(){
  const a=document.querySelector('input[name=va]:checked'), b=document.querySelector('input[name=vb]:checked');
  if(!a||!b){alert('Select two versions (A and B radio buttons)');return;}
  fetch(NC_BASE+'/api/versions/'+TOPO_ID+'/diff',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({version_a:a.value,version_b:b.value})})
    .then(r=>r.json()).then(d=>{
      const el=document.getElementById('diff-result');
      el.innerHTML=`<div class="card" style="padding:1rem;">
        <h4>${d.version_a.label} (${d.version_a.phase}) vs ${d.version_b.label} (${d.version_b.phase})</h4>
        <p>Nodes: <span style="color:#4ade80;">+${d.nodes_added}</span> / <span style="color:#f87171;">-${d.nodes_removed}</span> / =${d.nodes_unchanged}</p>
        <p>Edges: <span style="color:#4ade80;">+${d.edges_added}</span> / <span style="color:#f87171;">-${d.edges_removed}</span> / =${d.edges_unchanged}</p>
      </div>`;
    });
}
</script>
{% endblock %}