{% extends "base.html" %}
{% block title %}Review — {{ 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/lifecycle/{{ design.id }}" class="btn btn-sm btn-outline-secondary">← Lifecycle</a>
    <div>
      <h4 class="mb-0">👁 Design Review</h4>
      <small class="text-muted">{{ design.name }}</small>
    </div>
    <div class="ms-auto">
      {% set status_colors = {'PENDING':'secondary','APPROVED':'success','CHANGES_REQUESTED':'warning','REJECTED':'danger'} %}
      <span class="badge fs-6 px-3 py-2 bg-{{ status_colors.get(review.status,'secondary') }}">
        {{ review.status }}
      </span>
    </div>
  </div>

  <!-- Reviewer summary -->
  {% if review.reviewer_summary %}
  <div class="card mb-3">
    <div class="card-header fw-semibold py-2">Reviewer Decisions</div>
    <div class="card-body d-flex flex-wrap gap-2 py-2">
      {% for reviewer, decision in review.reviewer_summary.items() %}
      <span class="badge bg-{{ review.type_colors.get(decision,'secondary') }} px-2 py-1">
        {{ review.type_icons.get(decision,'') }} {{ reviewer }}: {{ decision }}
      </span>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <div class="row g-3">
    <!-- Comment thread -->
    <div class="col-md-7">
      <div class="card h-100">
        <div class="card-header fw-semibold py-2">Review Thread ({{ review.comments | length }})</div>
        <div class="card-body p-0" style="max-height:400px;overflow-y:auto">
          {% if review.comments %}
          {% for c in review.comments %}
          <div class="p-3 border-bottom">
            <div class="d-flex justify-content-between align-items-center mb-1">
              <div class="d-flex align-items-center gap-2">
                <span class="badge bg-{{ review.type_colors.get(c.comment_type,'secondary') }} small">
                  {{ review.type_icons.get(c.comment_type,'') }} {{ c.comment_type }}
                </span>
                <strong class="small">{{ c.reviewer }}</strong>
                {% if c.node_id %}
                <code class="small text-muted">node: {{ c.node_id[:12] }}</code>
                {% endif %}
              </div>
              <small class="text-muted">{{ c.created_at[:16] if c.created_at else '' }}</small>
            </div>
            <p class="mb-0 small">{{ c.body or '(no comment)' }}</p>
          </div>
          {% endfor %}
          {% else %}
          <div class="p-3 text-muted small">No comments yet. Be the first reviewer.</div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Add comment form -->
    <div class="col-md-5">
      <div class="card h-100">
        <div class="card-header fw-semibold py-2">Add Review Comment</div>
        <div class="card-body">
          <div class="mb-2">
            <label class="form-label small fw-semibold">Reviewer Name / Email</label>
            <input id="reviewer-input" type="text" class="form-control form-control-sm"
                   placeholder="your.name@agency.gov" required>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">Type</label>
            <select id="type-select" class="form-select form-select-sm">
              <option value="COMMENT">💬 Comment</option>
              <option value="APPROVAL">✅ Approval</option>
              <option value="CHANGE_REQUEST">↩ Change Request</option>
              <option value="REJECTION">❌ Rejection</option>
            </select>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">Node (optional)</label>
            <input id="node-input" type="text" class="form-control form-control-sm"
                   placeholder="node-id or leave blank">
          </div>
          <div class="mb-3">
            <label class="form-label small fw-semibold">Comment</label>
            <textarea id="body-input" class="form-control form-control-sm" rows="3"
                      placeholder="Your review comment…"></textarea>
          </div>
          <button onclick="submitComment()" class="btn btn-sm btn-primary w-100">Submit</button>
          <div id="comment-status" class="small text-muted mt-2"></div>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
function submitComment() {
  const reviewer = document.getElementById('reviewer-input').value.trim();
  const comment_type = document.getElementById('type-select').value;
  const body = document.getElementById('body-input').value.trim();
  const node_id = document.getElementById('node-input').value.trim() || null;
  const status = document.getElementById('comment-status');
  if (!reviewer) { status.textContent = 'Reviewer name is required.'; return; }
  status.textContent = 'Saving…';
  fetch('/agentic-ai/api/designs/{{ design.id }}/review', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({reviewer, comment_type, body, node_id}),
  }).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 %}