{% extends "base.html" %}
{% block title %}Lifecycle — {{ design.name }}{% endblock %}
{% block content %}
<div class="container-fluid py-3">

  <!-- Header -->
  <div class="d-flex align-items-center gap-3 mb-3">
    <a href="/agentic-ai/canvas/{{ design.id }}" class="btn btn-sm btn-outline-secondary">← Canvas</a>
    <div>
      <h4 class="mb-0">🔄 Design Lifecycle</h4>
      <small class="text-muted">{{ design.name }} &middot; {{ design.domain or 'unspecified' }}</small>
    </div>
    <div class="ms-auto">
      <span class="badge fs-6 px-3 py-2 bg-{{ lc.current_color }}">
        {{ lc.current_icon }} {{ lc.current_state }}
      </span>
    </div>
  </div>

  <!-- State machine diagram -->
  <div class="card mb-3">
    <div class="card-header fw-semibold py-2">State Machine</div>
    <div class="card-body d-flex flex-wrap gap-2 align-items-center py-3">
      {% for state, color in [('DRAFT','secondary'),('UNDER_REVIEW','info'),('CHANGES_REQUESTED','warning'),('APPROVED','success'),('DEPLOYED','primary'),('DEPRECATED','dark')] %}
      <div class="text-center px-2">
        <span class="badge bg-{{ color }} px-3 py-2 {{ 'border border-2 border-white shadow' if lc.current_state == state else '' }}"
              style="font-size:{{ '14px' if lc.current_state == state else '12px' }}">
          {{ lc.state_icons.get(state,'') }} {{ state }}
        </span>
        {% if not loop.last %}
        <span class="text-muted mx-1">→</span>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>

  <div class="row g-3 mb-3">
    <!-- Available transitions -->
    <div class="col-md-5">
      <div class="card h-100">
        <div class="card-header fw-semibold py-2">Available Transitions</div>
        <div class="card-body">
          {% if lc.available_transitions %}
          <form id="transition-form">
            <div class="mb-3">
              <label class="form-label small fw-semibold">Move to State</label>
              <div class="d-flex flex-wrap gap-2">
                {% for t in lc.available_transitions %}
                <button type="button"
                        class="btn btn-sm btn-{{ t.color }}"
                        onclick="doTransition('{{ t.to_state }}', '{{ t.label }}')"
                        title="{{ '⚠ Requires deploy gate check' if t.requires_gate else '' }}">
                  {{ lc.state_icons.get(t.to_state,'') }} {{ t.label }}
                  {% if t.requires_gate %}<span title="Deploy gate required">🔒</span>{% endif %}
                </button>
                {% endfor %}
              </div>
            </div>
            <div class="mb-2">
              <input id="actor-input" type="text" class="form-control form-control-sm"
                     placeholder="Your name / email (actor)" required>
            </div>
            <div class="mb-2">
              <textarea id="reason-input" class="form-control form-control-sm" rows="2"
                        placeholder="Reason / notes (optional)"></textarea>
            </div>
            <div id="transition-status" class="small text-muted"></div>
          </form>
          {% else %}
          <p class="text-muted small">No transitions available from <strong>{{ lc.current_state }}</strong>.</p>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Transition history -->
    <div class="col-md-7">
      <div class="card h-100">
        <div class="card-header fw-semibold py-2">Transition History</div>
        <div class="card-body p-0" style="max-height:300px;overflow-y:auto">
          {% if lc.history %}
          <table class="table table-sm mb-0">
            <thead class="table-light sticky-top"><tr><th>From</th><th>To</th><th>Actor</th><th>Reason</th><th>When</th></tr></thead>
            <tbody>
              {% for h in lc.history | reverse %}
              <tr>
                <td><span class="badge bg-{{ lc.state_colors.get(h.from_state,'secondary') }} small">{{ h.from_state }}</span></td>
                <td><span class="badge bg-{{ lc.state_colors.get(h.to_state,'secondary') }} small">{{ h.to_state }}</span></td>
                <td class="small">{{ h.actor or '—' }}</td>
                <td class="text-muted small" style="max-width:200px;overflow:hidden;text-overflow:ellipsis">{{ h.reason or '—' }}</td>
                <td class="text-muted small text-nowrap">{{ h.created_at[:16] if h.created_at else '—' }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <div class="p-3 text-muted small">No transitions yet. Design starts in DRAFT state.</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <!-- Quick links -->
  <div class="card">
    <div class="card-body d-flex flex-wrap gap-2 py-2">
      <a href="/agentic-ai/review/{{ design.id }}" class="btn btn-sm btn-outline-primary">👁 Review Workflow</a>
      <a href="/agentic-ai/deploy-gate/{{ design.id }}" class="btn btn-sm btn-outline-success">🚦 Deploy Gate</a>
      <a href="/agentic-ai/scorecard/{{ design.id }}" class="btn btn-sm btn-outline-info">🎯 Scorecard</a>
    </div>
  </div>

</div>

<script>
let pendingState = null;
function doTransition(toState, label) {
  pendingState = toState;
  document.getElementById('transition-status').textContent = `Ready to transition to: ${label}`;
  document.getElementById('actor-input').focus();
  // Submit on Enter in actor field
}
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('actor-input')?.addEventListener('keydown', e => {
    if (e.key === 'Enter' && pendingState) submitTransition();
  });
});
function submitTransition() {
  if (!pendingState) return;
  const actor = document.getElementById('actor-input').value.trim();
  const reason = document.getElementById('reason-input').value.trim();
  if (!actor) { alert('Actor/name is required.'); return; }
  const status = document.getElementById('transition-status');
  status.textContent = 'Saving…';
  fetch('/agentic-ai/api/designs/{{ design.id }}/lifecycle/transition', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({to_state: pendingState, actor, reason}),
  }).then(r => r.json()).then(d => {
    if (d.ok) { location.reload(); }
    else { status.textContent = 'Error: ' + d.error; }
  }).catch(err => { status.textContent = 'Error: ' + err; });
}
</script>
{% endblock %}