{% extends "base.html" %}
{% block title %}NDC SOPs — ICDEV™{% endblock %}

{% block extra_css %}
<style>
  .sops-wrap {
    display: grid;
    grid-template-columns: minmax(340px, 420px) 1fr;
    gap: 1rem;
    padding: 1rem;
  }
  .sops-panel {
    background: var(--panel-bg, #1c2130);
    border: 1px solid var(--border, #2a3142);
    border-radius: 6px;
    padding: 1rem;
    color: var(--text, #d7dbe3);
  }
  .sops-panel h2 { margin-top: 0; font-size: 1.05rem; }
  .sops-filter-row {
    display: flex; gap: .5rem; margin-bottom: .75rem; flex-wrap: wrap;
  }
  .sops-filter-row select, .sops-filter-row input {
    background: #0f1320; color: var(--text,#d7dbe3);
    border: 1px solid var(--border,#2a3142); border-radius: 4px;
    padding: .35rem .5rem; font-size: .85rem;
  }
  table.sops-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
  table.sops-table th, table.sops-table td {
    padding: .45rem .5rem; border-bottom: 1px solid var(--border,#2a3142);
    text-align: left; vertical-align: top;
  }
  table.sops-table th { color: var(--muted,#8892a6); font-weight: 600; }
  table.sops-table tr.active { background: rgba(88,132,255,0.15); }
  table.sops-table tr:hover { background: rgba(255,255,255,0.03); cursor: pointer; }
  .badge {
    display: inline-block; padding: .1rem .5rem;
    border-radius: 10px; font-size: .7rem; font-weight: 600; text-transform: uppercase;
  }
  .badge-draft      { background: #3a3f52; color: #d7dbe3; }
  .badge-review     { background: #5a4a1c; color: #f4d884; }
  .badge-approved   { background: #1f4d2e; color: #8fe2a5; }
  .badge-deprecated { background: #4b2020; color: #f28b82; }
  .sops-detail h3 { margin: 0 0 .25rem 0; font-size: 1.25rem; }
  .sops-meta { color: var(--muted,#8892a6); font-size: .82rem; margin-bottom: 1rem; }
  .sops-section { margin: 1rem 0; }
  .sops-section h4 {
    font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--accent,#5884ff); margin: 0 0 .4rem 0;
  }
  .sops-steps { list-style: none; padding: 0; margin: 0; }
  .sops-steps li {
    border-left: 3px solid var(--accent,#5884ff);
    padding: .5rem .75rem; margin-bottom: .5rem;
    background: rgba(88,132,255,0.05);
  }
  .sops-steps .step-num { font-weight: 700; color: var(--accent,#5884ff); }
  .sops-steps .step-meta { color: var(--muted,#8892a6); font-size: .75rem; }
  .sops-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
  .btn {
    background: var(--accent,#5884ff); color: #fff; border: none;
    padding: .45rem .9rem; border-radius: 4px; cursor: pointer; font-size: .82rem;
  }
  .btn-secondary { background: #3a3f52; }
  .btn-danger    { background: #b84545; }
  .btn-success   { background: #2d8a4a; }
  .btn:disabled  { opacity: .4; cursor: not-allowed; }
  .sops-empty { color: var(--muted,#8892a6); padding: 2rem; text-align: center; }
  pre.sops-json {
    background: #0f1320; border: 1px solid var(--border,#2a3142);
    padding: .5rem; border-radius: 4px; font-size: .75rem;
    max-height: 200px; overflow: auto;
  }
</style>
{% endblock %}

{% block content %}
<main id="main-content" class="sops-wrap" role="main"
      aria-label="NDC Standard Operating Procedures">

  <!-- ── LEFT: SOP list ── -->
  <section class="sops-panel" aria-label="SOP list">
    <h2>NDC SOPs</h2>
    <div class="sops-filter-row">
      <select id="filter-category" aria-label="Filter by category">
        <option value="">All categories</option>
        <option value="change_window">Change Window</option>
        <option value="provisioning">Provisioning</option>
        <option value="firewall">Firewall</option>
        <option value="dns">DNS</option>
        <option value="failover">Failover</option>
      </select>
      <select id="filter-status" aria-label="Filter by status">
        <option value="">All statuses</option>
        <option value="draft">Draft</option>
        <option value="review">In Review</option>
        <option value="approved">Approved</option>
        <option value="deprecated">Deprecated</option>
      </select>
      <button class="btn btn-secondary" id="btn-refresh" type="button">Refresh</button>
    </div>
    <table class="sops-table" id="sops-table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Category</th>
          <th>Status</th>
          <th>Ver</th>
          <th>Updated</th>
        </tr>
      </thead>
      <tbody id="sops-tbody">
        <tr><td colspan="5" class="sops-empty">Loading…</td></tr>
      </tbody>
    </table>
  </section>

  <!-- ── RIGHT: detail pane ── -->
  <section class="sops-panel sops-detail" aria-label="SOP detail">
    <div id="sops-detail-body">
      <p class="sops-empty">Select an SOP from the list to view details.</p>
    </div>
  </section>

</main>

<script>
(function () {
  const tbody = document.getElementById('sops-tbody');
  const detail = document.getElementById('sops-detail-body');
  const catSel = document.getElementById('filter-category');
  const statSel = document.getElementById('filter-status');
  const btnRefresh = document.getElementById('btn-refresh');
  let currentSopId = null;

  function badge(status) {
    const cls = 'badge badge-' + (status || 'draft');
    return `<span class="${cls}">${status || 'draft'}</span>`;
  }

  function fmtDate(s) {
    if (!s) return '—';
    try { return new Date(s).toLocaleString(); } catch (e) { return s; }
  }

  async function fetchJSON(url, opts) {
    const r = await fetch(url, opts);
    const data = await r.json().catch(() => ({}));
    if (!r.ok || data.ok === false) {
      throw new Error((data && data.error) || ('HTTP ' + r.status));
    }
    return data;
  }

  async function loadList() {
    const params = new URLSearchParams();
    if (catSel.value) params.set('category', catSel.value);
    if (statSel.value) params.set('status', statSel.value);
    tbody.innerHTML = `<tr><td colspan="5" class="sops-empty">Loading…</td></tr>`;
    try {
      const data = await fetchJSON('/api/ndc/sops?' + params.toString());
      renderList(data.sops || []);
    } catch (e) {
      tbody.innerHTML = `<tr><td colspan="5" class="sops-empty">Error: ${e.message}</td></tr>`;
    }
  }

  function renderList(items) {
    if (!items.length) {
      tbody.innerHTML = `<tr><td colspan="5" class="sops-empty">No SOPs found.</td></tr>`;
      return;
    }
    tbody.innerHTML = items.map(s => `
      <tr data-id="${s.sop_id}" class="${s.sop_id === currentSopId ? 'active' : ''}">
        <td><strong>${escapeHtml(s.title)}</strong><br>
            <small style="color:var(--muted,#8892a6)">${escapeHtml(s.approver || 'unassigned')}</small></td>
        <td>${escapeHtml(s.category)}</td>
        <td>${badge(s.status)}</td>
        <td>v${s.version}</td>
        <td>${fmtDate(s.updated_at)}</td>
      </tr>`).join('');
    tbody.querySelectorAll('tr[data-id]').forEach(row => {
      row.addEventListener('click', () => loadDetail(row.dataset.id));
    });
  }

  async function loadDetail(sopId) {
    currentSopId = sopId;
    detail.innerHTML = `<p class="sops-empty">Loading…</p>`;
    try {
      const [sopData, histData] = await Promise.all([
        fetchJSON('/api/ndc/sops/' + encodeURIComponent(sopId)),
        fetchJSON('/api/ndc/sops/' + encodeURIComponent(sopId) + '/history'),
      ]);
      renderDetail(sopData.sop, histData.history || []);
    } catch (e) {
      detail.innerHTML = `<p class="sops-empty">Error: ${e.message}</p>`;
    }
    document.querySelectorAll('#sops-tbody tr').forEach(r => {
      r.classList.toggle('active', r.dataset.id === sopId);
    });
  }

  function renderDetail(s, history) {
    if (!s) {
      detail.innerHTML = `<p class="sops-empty">SOP not found.</p>`;
      return;
    }
    const steps = (s.steps || []).map(st => `
      <li>
        <div><span class="step-num">${st.number || '•'}.</span> ${escapeHtml(st.action || '')}</div>
        <div class="step-meta">
          Verify: ${escapeHtml(st.verify || '—')} ·
          Rollback: ${escapeHtml(st.rollback || '—')} ·
          Est: ${escapeHtml(st.time_est || '—')}
        </div>
      </li>`).join('');

    const prereqs = (s.prerequisites || []).map(p => `<li>${escapeHtml(p)}</li>`).join('');
    const val = (s.validation || []).map(v => `<li>${escapeHtml(v)}</li>`).join('');
    const esc = (s.escalation || []).map(e =>
      `<li>Tier ${escapeHtml(String(e.tier || '?'))} — ${escapeHtml(e.role || '')}: <code>${escapeHtml(e.contact || '')}</code></li>`
    ).join('');

    const rollback = s.rollback || {};
    const history_html = history.map(h =>
      `<li><strong>${escapeHtml(h.action)}</strong> by ${escapeHtml(h.actor)} at ${fmtDate(h.timestamp)}
       ${h.comment ? '— ' + escapeHtml(h.comment) : ''}</li>`
    ).join('');

    const actions = [];
    if (s.status === 'draft')    actions.push(`<button class="btn" data-act="submit">Submit for Review</button>`);
    if (s.status === 'review')   actions.push(`<button class="btn btn-success" data-act="approve">Approve</button>`,
                                               `<button class="btn btn-danger" data-act="reject">Reject</button>`);
    if (s.status === 'approved') actions.push(`<button class="btn btn-secondary" data-act="deprecate">Deprecate</button>`);
    if (s.status === 'draft' || s.status === 'review')
      actions.push(`<button class="btn btn-danger" data-act="delete">Delete</button>`);
    actions.push(`<button class="btn btn-secondary" data-act="history">Refresh History</button>`);

    detail.innerHTML = `
      <h3>${escapeHtml(s.title)} ${badge(s.status)}</h3>
      <div class="sops-meta">
        <code>${escapeHtml(s.sop_id)}</code> · v${s.version} · ${escapeHtml(s.category)} ·
        Classification: ${escapeHtml(s.classification || 'CUI')} ·
        Author: ${escapeHtml(s.author || '—')} ·
        Reviewer: ${escapeHtml(s.reviewer || '—')} ·
        Approver: ${escapeHtml(s.approver || '—')}
      </div>

      <div class="sops-section">
        <h4>Description</h4>
        <div>${escapeHtml(s.description || '')}</div>
      </div>

      <div class="sops-section">
        <h4>Prerequisites</h4>
        <ul>${prereqs || '<li>(none)</li>'}</ul>
      </div>

      <div class="sops-section">
        <h4>Steps</h4>
        <ol class="sops-steps">${steps || '<li>(no steps)</li>'}</ol>
      </div>

      <div class="sops-section">
        <h4>Validation Checks</h4>
        <ul>${val || '<li>(none)</li>'}</ul>
      </div>

      <div class="sops-section">
        <h4>Rollback Plan</h4>
        <div><strong>Trigger:</strong> ${escapeHtml(rollback.trigger || '—')}</div>
        <div><strong>Procedure:</strong> ${escapeHtml(rollback.procedure || '—')}</div>
        <div><strong>Max Duration:</strong> ${escapeHtml(rollback.max_duration || '—')}</div>
      </div>

      <div class="sops-section">
        <h4>Escalation</h4>
        <ul>${esc || '<li>(none)</li>'}</ul>
      </div>

      <div class="sops-section">
        <h4>Approval History</h4>
        <ul>${history_html || '<li>(no history)</li>'}</ul>
      </div>

      <div class="sops-actions">${actions.join(' ')}</div>
    `;

    detail.querySelectorAll('button[data-act]').forEach(btn => {
      btn.addEventListener('click', () => handleAction(s.sop_id, btn.dataset.act, s.status));
    });
  }

  async function handleAction(sopId, action, status) {
    const base = '/api/ndc/sops/' + encodeURIComponent(sopId);
    try {
      if (action === 'submit') {
        const reviewer = prompt('Reviewer username:');
        if (!reviewer) return;
        await fetchJSON(base + '/submit', postJSON({reviewer}));
      } else if (action === 'approve') {
        const comment = prompt('Approval comment (optional):') || '';
        await fetchJSON(base + '/approve', postJSON({comment}));
      } else if (action === 'reject') {
        const comment = prompt('Rejection reason (required):');
        if (!comment) { alert('Rejection reason required.'); return; }
        await fetchJSON(base + '/reject', postJSON({comment}));
      } else if (action === 'deprecate') {
        const comment = prompt('Deprecation reason (optional):') || '';
        await fetchJSON(base + '/deprecate', postJSON({comment}));
      } else if (action === 'delete') {
        if (!confirm('Delete this SOP? This cannot be undone.')) return;
        await fetchJSON(base, {method: 'DELETE'});
        currentSopId = null;
        detail.innerHTML = `<p class="sops-empty">SOP deleted.</p>`;
        await loadList();
        return;
      } else if (action === 'history') {
        await loadDetail(sopId);
        return;
      }
      await loadList();
      await loadDetail(sopId);
    } catch (e) {
      alert('Action failed: ' + e.message);
    }
  }

  function postJSON(body) {
    return {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(body || {}),
    };
  }

  function escapeHtml(s) {
    return String(s == null ? '' : s)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  }

  catSel.addEventListener('change', loadList);
  statSel.addEventListener('change', loadList);
  btnRefresh.addEventListener('click', loadList);

  // Initial load
  loadList();
})();
</script>
{% endblock %}