{% extends "security_canvas/base.html" %}
{% block title %}Standard Operating Procedures — Security Design Canvas{% endblock %}
{% block content %}
<style>
  .sops-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap;}
  .sops-toolbar h1{margin:0;font-size:20px;font-weight:700;color:var(--text);}
  .sops-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  .sops-search input,.sops-search select{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 10px;font-size:13px;}
  .sops-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px;padding:20px;}
  .sop-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px;}
  .sop-card:hover{border-color:var(--accent);}
  .sop-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
  .sop-title{font-weight:700;font-size:14px;color:var(--text);line-height:1.3;}
  .sop-badges{display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0;}
  .badge-type{background:#2980b9;color:#fff;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;}
  .badge-status-draft{background:#7f8c8d;color:#fff;padding:2px 7px;border-radius:4px;font-size:10px;}
  .badge-status-pending_review{background:#f39c12;color:#fff;padding:2px 7px;border-radius:4px;font-size:10px;}
  .badge-status-approved{background:#27ae60;color:#fff;padding:2px 7px;border-radius:4px;font-size:10px;}
  .badge-status-rejected{background:#e74c3c;color:#fff;padding:2px 7px;border-radius:4px;font-size:10px;}
  .sop-desc{font-size:12px;color:var(--text-dim);line-height:1.5;}
  .sop-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--text-dim);}
  .sop-meta span{display:flex;align-items:center;gap:3px;}
  .sop-nist{font-size:11px;color:#5dade2;}
  .sop-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
  .btn-xs{padding:3px 10px;font-size:11px;border-radius:4px;border:none;cursor:pointer;font-weight:600;}
  .btn-view{background:var(--bg3);color:var(--text);border:1px solid var(--border);}
  .btn-edit{background:#2980b9;color:#fff;}
  .btn-submit{background:#f39c12;color:#fff;}
  .btn-approve{background:#27ae60;color:#fff;}
  .btn-reject{background:#e74c3c;color:#fff;}
  .btn-delete{background:transparent;color:#e74c3c;border:1px solid #e74c3c;}
  .empty-state{text-align:center;padding:60px 20px;color:var(--text-dim);}
  .empty-state h3{font-size:18px;margin-bottom:8px;}

  /* Modal */
  .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000;align-items:center;justify-content:center;}
  .modal-overlay.active{display:flex;}
  .modal{background:var(--bg1);border:1px solid var(--border);border-radius:10px;width:min(700px,96vw);max-height:90vh;overflow-y:auto;padding:24px;}
  .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
  .modal-header h2{margin:0;font-size:18px;color:var(--text);}
  .modal-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;padding:0 4px;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .form-full{grid-column:1/-1;}
  .form-group{display:flex;flex-direction:column;gap:4px;}
  .form-group label{font-size:12px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}
  .form-group input,.form-group select,.form-group textarea{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:8px 10px;font-size:13px;width:100%;box-sizing:border-box;}
  .form-group textarea{resize:vertical;min-height:80px;font-family:inherit;}
  .steps-list{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
  .step-row{display:flex;gap:6px;align-items:flex-start;}
  .step-row textarea{flex:1;min-height:52px;}
  .step-row input.step-party{width:140px;flex-shrink:0;}
  .step-row .step-num{font-size:11px;color:var(--text-dim);padding-top:10px;width:18px;flex-shrink:0;text-align:right;}
  .btn-add-step{background:var(--bg3);border:1px dashed var(--border);color:var(--text-dim);border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;width:100%;margin-top:4px;}
  .btn-remove-step{background:none;border:none;color:#e74c3c;cursor:pointer;font-size:14px;padding:8px 4px;}
  .modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
  .btn-primary{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:8px 18px;font-size:13px;cursor:pointer;font-weight:600;}
  .btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 18px;font-size:13px;cursor:pointer;}

  /* Detail modal */
  .detail-section{margin-bottom:16px;}
  .detail-label{font-size:11px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
  .detail-value{font-size:13px;color:var(--text);line-height:1.5;}
  .steps-detail{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
  .steps-detail li{display:flex;gap:10px;align-items:flex-start;}
  .step-badge{background:var(--accent);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px;}
  .step-body{flex:1;}
  .step-party-tag{font-size:10px;color:var(--text-dim);margin-top:2px;}
  .reject-form{display:flex;flex-direction:column;gap:8px;}
  .reject-form textarea{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:8px;font-size:13px;width:100%;box-sizing:border-box;min-height:80px;font-family:inherit;}
</style>

<div class="sops-toolbar">
  <div>
    <h1>&#x1f4cb; Standard Operating Procedures</h1>
    <div style="font-size:12px;color:var(--text-dim);margin-top:2px;">ATO-aligned SOPs with approval workflow — NIST 800-53 PL/IR/AC</div>
  </div>
  <div class="sops-search">
    <input type="text" id="searchInput" placeholder="Search SOPs…" oninput="filterSops()"/>
    <select id="typeFilter" onchange="filterSops()">
      <option value="">All Types</option>
      <option value="vulnerability_disclosure">Vulnerability Disclosure</option>
      <option value="access_review">Access Review</option>
      <option value="incident_classification">Incident Classification</option>
      <option value="evidence_collection">Evidence Collection</option>
      <option value="custom">Custom</option>
    </select>
    <select id="statusFilter" onchange="filterSops()">
      <option value="">All Statuses</option>
      <option value="draft">Draft</option>
      <option value="pending_review">Pending Review</option>
      <option value="approved">Approved</option>
      <option value="rejected">Rejected</option>
    </select>
    <button class="btn-xs btn-edit" onclick="openCreateModal()" style="padding:6px 14px;font-size:13px;">+ New SOP</button>
  </div>
</div>

<div class="sops-grid" id="sopsGrid">
  {% if sops %}
    {% for sop in sops %}
    <div class="sop-card"
         data-id="{{ sop.id }}"
         data-title="{{ sop.title|lower }}"
         data-type="{{ sop.sop_type }}"
         data-status="{{ sop.approval_status }}">
      <div class="sop-card-header">
        <div class="sop-title">{{ sop.title }}</div>
        <div class="sop-badges">
          <span class="badge-type">{{ sop.sop_type|replace('_',' ') }}</span>
          <span class="badge-status-{{ sop.approval_status }}">{{ sop.approval_status|replace('_',' ')|title }}</span>
        </div>
      </div>
      <div class="sop-desc">{{ sop.description }}</div>
      {% if sop.nist_controls %}
      <div class="sop-nist">NIST: {{ sop.nist_controls|join(', ') }}</div>
      {% endif %}
      <div class="sop-meta">
        {% if sop.owner %}<span>&#x1f464; {{ sop.owner }}</span>{% endif %}
        {% if sop.reviewer %}<span>&#x1f50d; Reviewer: {{ sop.reviewer }}</span>{% endif %}
        <span>v{{ sop.version }}</span>
        {% if sop.steps %}<span>{{ sop.steps|length }} steps</span>{% endif %}
      </div>
      <div class="sop-actions">
        <button class="btn-xs btn-view" onclick="viewSop('{{ sop.id }}')">View</button>
        {% if sop.approval_status in ('draft', 'rejected') %}
        <button class="btn-xs btn-edit" onclick="editSop('{{ sop.id }}')">Edit</button>
        <button class="btn-xs btn-submit" onclick="submitSop('{{ sop.id }}')">Submit for Review</button>
        {% endif %}
        {% if sop.approval_status == 'pending_review' %}
        <button class="btn-xs btn-approve" onclick="approveSop('{{ sop.id }}')">Approve</button>
        <button class="btn-xs btn-reject" onclick="openRejectModal('{{ sop.id }}')">Reject</button>
        {% endif %}
        {% if sop.approval_status in ('draft', 'rejected') %}
        <button class="btn-xs btn-delete" onclick="deleteSop('{{ sop.id }}', '{{ sop.title|replace("'","\\'")|escape }}')">Delete</button>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  {% else %}
  <div class="empty-state" style="grid-column:1/-1;">
    <h3>No SOPs yet</h3>
    <p>Create your first Standard Operating Procedure to start building your ATO evidence library.</p>
    <button class="btn-xs btn-edit" onclick="openCreateModal()" style="padding:8px 20px;font-size:13px;">+ New SOP</button>
  </div>
  {% endif %}
</div>

<!-- Create / Edit Modal -->
<div class="modal-overlay" id="sopFormModal">
  <div class="modal">
    <div class="modal-header">
      <h2 id="formModalTitle">New SOP</h2>
      <button class="modal-close" onclick="closeModal('sopFormModal')">&times;</button>
    </div>
    <form id="sopForm" onsubmit="saveSop(event)">
      <input type="hidden" id="sopId"/>
      <div class="form-grid">
        <div class="form-group form-full">
          <label>Title</label>
          <input type="text" id="sopTitle" required placeholder="e.g. Vulnerability Disclosure SOP"/>
        </div>
        <div class="form-group">
          <label>SOP Type</label>
          <select id="sopType">
            <option value="vulnerability_disclosure">Vulnerability Disclosure</option>
            <option value="access_review">Access Review</option>
            <option value="incident_classification">Incident Classification</option>
            <option value="evidence_collection">Evidence Collection</option>
            <option value="custom">Custom</option>
          </select>
        </div>
        <div class="form-group">
          <label>Version</label>
          <input type="text" id="sopVersion" value="1.0" placeholder="1.0"/>
        </div>
        <div class="form-group form-full">
          <label>Description</label>
          <textarea id="sopDescription" placeholder="Brief description of what this SOP covers…"></textarea>
        </div>
        <div class="form-group form-full">
          <label>Purpose</label>
          <textarea id="sopPurpose" placeholder="Why this SOP exists…"></textarea>
        </div>
        <div class="form-group form-full">
          <label>Scope</label>
          <textarea id="sopScope" placeholder="Systems, roles, or boundaries this SOP applies to…"></textarea>
        </div>
        <div class="form-group">
          <label>Owner</label>
          <input type="text" id="sopOwner" placeholder="e.g. ISSO"/>
        </div>
        <div class="form-group">
          <label>Reviewer</label>
          <input type="text" id="sopReviewer" placeholder="e.g. AO"/>
        </div>
        <div class="form-group">
          <label>Next Review Date</label>
          <input type="date" id="sopReviewDate"/>
        </div>
        <div class="form-group">
          <label>Classification</label>
          <select id="sopClassification">
            <option value="CUI">CUI</option>
            <option value="CUI // SP-CTI">CUI // SP-CTI</option>
            <option value="UNCLASSIFIED">UNCLASSIFIED</option>
            <option value="SECRET">SECRET</option>
          </select>
        </div>
        <div class="form-group form-full">
          <label>NIST Controls (comma-separated)</label>
          <input type="text" id="sopNistControls" placeholder="e.g. RA-5, SI-2, CA-7"/>
        </div>
        <div class="form-group form-full">
          <label>Procedure Steps</label>
          <div class="steps-list" id="stepsList"></div>
          <button type="button" class="btn-add-step" onclick="addStep()">+ Add Step</button>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-secondary" onclick="closeModal('sopFormModal')">Cancel</button>
        <button type="submit" class="btn-primary">Save SOP</button>
      </div>
    </form>
  </div>
</div>

<!-- View / Detail Modal -->
<div class="modal-overlay" id="sopViewModal">
  <div class="modal">
    <div class="modal-header">
      <h2 id="viewTitle">SOP Details</h2>
      <button class="modal-close" onclick="closeModal('sopViewModal')">&times;</button>
    </div>
    <div id="viewContent"></div>
    <div class="modal-footer">
      <button class="btn-secondary" onclick="closeModal('sopViewModal')">Close</button>
    </div>
  </div>
</div>

<!-- Reject Modal -->
<div class="modal-overlay" id="rejectModal">
  <div class="modal" style="max-width:480px;">
    <div class="modal-header">
      <h2>Reject SOP</h2>
      <button class="modal-close" onclick="closeModal('rejectModal')">&times;</button>
    </div>
    <div class="reject-form">
      <label style="font-size:12px;color:var(--text-dim);">Reason for rejection (required)</label>
      <textarea id="rejectReason" placeholder="Describe what needs to be corrected before re-submission…"></textarea>
    </div>
    <div class="modal-footer">
      <button class="btn-secondary" onclick="closeModal('rejectModal')">Cancel</button>
      <button class="btn-xs btn-reject" id="confirmRejectBtn" onclick="confirmReject()" style="padding:8px 18px;font-size:13px;">Confirm Reject</button>
    </div>
  </div>
</div>

{% endblock %}
{% block scripts %}
<script>
const BASE = '/security';
let _rejectSopId = null;

function closeModal(id) {
  document.getElementById(id).classList.remove('active');
}

function filterSops() {
  const q = document.getElementById('searchInput').value.toLowerCase();
  const type = document.getElementById('typeFilter').value;
  const status = document.getElementById('statusFilter').value;
  document.querySelectorAll('.sop-card').forEach(card => {
    const matchQ = !q || card.dataset.title.includes(q);
    const matchType = !type || card.dataset.type === type;
    const matchStatus = !status || card.dataset.status === status;
    card.style.display = (matchQ && matchType && matchStatus) ? '' : 'none';
  });
}

/* ── Steps editor ─────────────────────────────────────────────────── */
function addStep(desc='', party='') {
  const list = document.getElementById('stepsList');
  const idx = list.children.length + 1;
  const row = document.createElement('div');
  row.className = 'step-row';
  row.innerHTML = `
    <span class="step-num">${idx}</span>
    <textarea placeholder="Step description…" rows="2">${desc}</textarea>
    <input class="step-party" type="text" placeholder="Responsible party" value="${party}"/>
    <button type="button" class="btn-remove-step" onclick="removeStep(this)">&#x2715;</button>
  `;
  list.appendChild(row);
  renumberSteps();
}

function removeStep(btn) {
  btn.closest('.step-row').remove();
  renumberSteps();
}

function renumberSteps() {
  document.querySelectorAll('#stepsList .step-num').forEach((el, i) => el.textContent = i + 1);
}

function getSteps() {
  return Array.from(document.querySelectorAll('#stepsList .step-row')).map((row, i) => ({
    order: i + 1,
    description: row.querySelector('textarea').value.trim(),
    responsible_party: row.querySelector('.step-party').value.trim(),
  })).filter(s => s.description);
}

/* ── Create / Edit form ───────────────────────────────────────────── */
function openCreateModal() {
  document.getElementById('formModalTitle').textContent = 'New SOP';
  document.getElementById('sopForm').reset();
  document.getElementById('sopId').value = '';
  document.getElementById('sopVersion').value = '1.0';
  document.getElementById('sopClassification').value = 'CUI';
  document.getElementById('stepsList').innerHTML = '';
  document.getElementById('sopFormModal').classList.add('active');
}

function editSop(id) {
  fetch(`${BASE}/api/sops/${id}`)
    .then(r => r.json())
    .then(sop => {
      document.getElementById('formModalTitle').textContent = 'Edit SOP';
      document.getElementById('sopId').value = sop.id;
      document.getElementById('sopTitle').value = sop.title || '';
      document.getElementById('sopType').value = sop.sop_type || 'custom';
      document.getElementById('sopVersion').value = sop.version || '1.0';
      document.getElementById('sopDescription').value = sop.description || '';
      document.getElementById('sopPurpose').value = sop.purpose || '';
      document.getElementById('sopScope').value = sop.scope || '';
      document.getElementById('sopOwner').value = sop.owner || '';
      document.getElementById('sopReviewer').value = sop.reviewer || '';
      document.getElementById('sopReviewDate').value = sop.next_review_date || '';
      document.getElementById('sopClassification').value = sop.classification || 'CUI';
      document.getElementById('sopNistControls').value = (sop.nist_controls || []).join(', ');
      document.getElementById('stepsList').innerHTML = '';
      (sop.steps || []).forEach(s => addStep(s.description, s.responsible_party));
      document.getElementById('sopFormModal').classList.add('active');
    });
}

function saveSop(e) {
  e.preventDefault();
  const id = document.getElementById('sopId').value;
  const controls = document.getElementById('sopNistControls').value
    .split(',').map(s => s.trim()).filter(Boolean);
  const payload = {
    title: document.getElementById('sopTitle').value,
    sop_type: document.getElementById('sopType').value,
    version: document.getElementById('sopVersion').value,
    description: document.getElementById('sopDescription').value,
    purpose: document.getElementById('sopPurpose').value,
    scope: document.getElementById('sopScope').value,
    owner: document.getElementById('sopOwner').value,
    reviewer: document.getElementById('sopReviewer').value,
    next_review_date: document.getElementById('sopReviewDate').value,
    classification: document.getElementById('sopClassification').value,
    nist_controls: controls,
    steps: getSteps(),
  };
  const url = id ? `${BASE}/api/sops/${id}` : `${BASE}/api/sops`;
  const method = id ? 'PUT' : 'POST';
  fetch(url, {method, headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload)})
    .then(r => r.json())
    .then(() => { closeModal('sopFormModal'); location.reload(); })
    .catch(() => alert('Save failed'));
}

/* ── View ─────────────────────────────────────────────────────────── */
function viewSop(id) {
  fetch(`${BASE}/api/sops/${id}`)
    .then(r => r.json())
    .then(sop => {
      document.getElementById('viewTitle').textContent = sop.title;
      const statusColors = {draft:'#7f8c8d',pending_review:'#f39c12',approved:'#27ae60',rejected:'#e74c3c'};
      const stepsHtml = (sop.steps || []).map(s => `
        <li>
          <div class="step-badge">${s.order}</div>
          <div class="step-body">
            <div>${s.description}</div>
            ${s.responsible_party ? `<div class="step-party-tag">&#x1f464; ${s.responsible_party}</div>` : ''}
          </div>
        </li>`).join('');
      document.getElementById('viewContent').innerHTML = `
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;">
          <span class="badge-type">${(sop.sop_type||'').replace(/_/g,' ')}</span>
          <span style="background:${statusColors[sop.approval_status]||'#7f8c8d'};color:#fff;padding:2px 7px;border-radius:4px;font-size:10px;">${(sop.approval_status||'').replace(/_/g,' ')}</span>
          <span style="background:var(--bg3);border:1px solid var(--border);padding:2px 7px;border-radius:4px;font-size:10px;color:var(--text-dim);">v${sop.version||'1.0'}</span>
          <span style="background:var(--bg3);border:1px solid var(--border);padding:2px 7px;border-radius:4px;font-size:10px;color:var(--text-dim);">${sop.classification||'CUI'}</span>
        </div>
        ${sop.description?`<div class="detail-section"><div class="detail-label">Description</div><div class="detail-value">${sop.description}</div></div>`:''}
        ${sop.purpose?`<div class="detail-section"><div class="detail-label">Purpose</div><div class="detail-value">${sop.purpose}</div></div>`:''}
        ${sop.scope?`<div class="detail-section"><div class="detail-label">Scope</div><div class="detail-value">${sop.scope}</div></div>`:''}
        ${(sop.nist_controls||[]).length?`<div class="detail-section"><div class="detail-label">NIST Controls</div><div class="sop-nist" style="font-size:13px;">${sop.nist_controls.join(' &bull; ')}</div></div>`:''}
        <div class="detail-section" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
          ${sop.owner?`<div><div class="detail-label">Owner</div><div class="detail-value">${sop.owner}</div></div>`:''}
          ${sop.reviewer?`<div><div class="detail-label">Reviewer</div><div class="detail-value">${sop.reviewer}</div></div>`:''}
          ${sop.approved_by?`<div><div class="detail-label">Approved By</div><div class="detail-value">${sop.approved_by}</div></div>`:''}
          ${sop.approved_at?`<div><div class="detail-label">Approved At</div><div class="detail-value">${sop.approved_at.split('T')[0]}</div></div>`:''}
          ${sop.next_review_date?`<div><div class="detail-label">Next Review</div><div class="detail-value">${sop.next_review_date}</div></div>`:''}
        </div>
        ${sop.rejected_reason?`<div class="detail-section" style="background:#2c0a0a;border:1px solid #c0392b;border-radius:6px;padding:10px;"><div class="detail-label" style="color:#e74c3c;">Rejection Reason</div><div class="detail-value">${sop.rejected_reason}</div></div>`:''}
        ${stepsHtml?`<div class="detail-section"><div class="detail-label">Procedure Steps (${(sop.steps||[]).length})</div><ul class="steps-detail">${stepsHtml}</ul></div>`:''}
      `;
      document.getElementById('sopViewModal').classList.add('active');
    });
}

/* ── Workflow actions ─────────────────────────────────────────────── */
function submitSop(id) {
  if (!confirm('Submit this SOP for review?')) return;
  fetch(`${BASE}/api/sops/${id}/submit`, {method:'POST'})
    .then(r => r.json())
    .then(data => { if (data.error) alert(data.error); else location.reload(); });
}

function approveSop(id) {
  if (!confirm('Approve this SOP?')) return;
  fetch(`${BASE}/api/sops/${id}/approve`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({})})
    .then(r => r.json())
    .then(data => { if (data.error) alert(data.error); else location.reload(); });
}

function openRejectModal(id) {
  _rejectSopId = id;
  document.getElementById('rejectReason').value = '';
  document.getElementById('rejectModal').classList.add('active');
}

function confirmReject() {
  const reason = document.getElementById('rejectReason').value.trim();
  if (!reason) { alert('Please provide a rejection reason.'); return; }
  fetch(`${BASE}/api/sops/${_rejectSopId}/reject`, {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({reason})
  }).then(r => r.json())
    .then(data => { if (data.error) alert(data.error); else { closeModal('rejectModal'); location.reload(); } });
}

function deleteSop(id, title) {
  if (!confirm(`Delete SOP "${title}"? This cannot be undone.`)) return;
  fetch(`${BASE}/api/sops/${id}`, {method:'DELETE'})
    .then(r => r.json())
    .then(() => location.reload());
}

/* Close modal on overlay click */
document.querySelectorAll('.modal-overlay').forEach(el => {
  el.addEventListener('click', e => { if (e.target === el) el.classList.remove('active'); });
});
</script>
{% endblock %}