{% extends "base.html" %}
{% block title %}Ops Config — {{ design_name }} — AADC{% endblock %}

{% block extra_css %}
<style>
:root {
  --oc-purple:#6366f1; --oc-gold:#FFB800; --oc-green:#00FF88;
  --oc-red:#FF4444;    --oc-slate:#1e293b; --oc-border:#334155;
  --oc-blue:#4A90E2;
}
.oc-header {
  background:linear-gradient(135deg,#1e1b4b 0%,#312e81 40%,#1a1a14 100%);
  padding:1.75rem 2rem 1.25rem;border-bottom:1px solid var(--oc-border);
}
.oc-header h1 { font-size:1.4rem;font-weight:700;color:#e0e7ff;margin:0 0 .2rem; }
.oc-header p  { color:#a5b4fc;margin:0;font-size:.85rem; }
.oc-breadcrumb { font-size:.75rem;color:#64748b;margin-bottom:.4rem; }
.oc-breadcrumb a { color:var(--oc-blue);text-decoration:none; }

.oc-body { max-width:960px;margin:0 auto;padding:1.5rem 2rem 4rem; }

.oc-callout {
  background:rgba(99,102,241,.07);border:1px solid rgba(99,102,241,.2);
  border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.5rem;font-size:.88rem;color:#cbd5e1;
}
.oc-callout strong { color:#e0e7ff; }

/* Generate button */
.oc-gen-row { display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1.5rem; }
.oc-btn-generate {
  background:var(--oc-gold);color:#000;padding:.6rem 1.5rem;border-radius:8px;
  font-size:.9rem;font-weight:700;border:none;cursor:pointer;transition:background .15s;
}
.oc-btn-generate:hover { background:#e0a300; }
.oc-btn-generate:disabled { opacity:.5;cursor:default; }
.oc-label { font-size:.82rem;color:#64748b;display:flex;align-items:center;gap:.4rem; }
.oc-checkbox { width:14px;height:14px;accent-color:var(--oc-purple); }

/* Loading */
#oc-loading { display:none;padding:1.5rem;text-align:center;color:#64748b;font-size:.88rem; }
.oc-spinner {
  width:24px;height:24px;border:3px solid #334155;border-top-color:var(--oc-purple);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;margin-bottom:.6rem;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Results */
#oc-result { display:none; }

.oc-result-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.5rem; }
@media(max-width:640px){ .oc-result-grid{ grid-template-columns:1fr; } }

.oc-card {
  background:var(--oc-slate);border:1px solid var(--oc-border);
  border-radius:12px;padding:1.25rem;
}
.oc-card-title {
  font-size:.78rem;font-weight:700;color:var(--oc-gold);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 .85rem;
}

/* Node chips */
.oc-node-chips { display:flex;flex-wrap:wrap;gap:.4rem; }
.oc-chip-matched {
  background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.2);
  border-radius:6px;padding:.2rem .55rem;font-size:.75rem;color:var(--oc-green);font-family:monospace;
}
.oc-chip-unmatched {
  background:rgba(255,68,68,.1);border:1px solid rgba(255,68,68,.2);
  border-radius:6px;padding:.2rem .55rem;font-size:.75rem;color:var(--oc-red);font-family:monospace;
}

/* Config preview */
.oc-config-pre {
  background:#0f172a;border:1px solid var(--oc-border);border-radius:8px;
  padding:1rem;font-family:monospace;font-size:.78rem;color:#94a3b8;
  max-height:300px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;
  line-height:1.5;
}

/* Kanban tasks */
.oc-task-list { list-style:none;padding:0;margin:0; }
.oc-task-item {
  padding:.65rem .85rem;border-bottom:1px solid rgba(255,255,255,.05);
  font-size:.84rem;color:#cbd5e1;display:flex;align-items:flex-start;gap:.6rem;
}
.oc-task-item:last-child { border-bottom:none; }
.oc-task-icon { color:var(--oc-gold);flex-shrink:0;margin-top:.05rem; }
.oc-task-node { font-family:monospace;font-size:.75rem;color:var(--oc-blue);margin-left:.3rem; }

/* Config path */
.oc-path-chip {
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);
  border-radius:6px;padding:.3rem .7rem;font-family:monospace;font-size:.8rem;color:#a5b4fc;
}

/* Actions */
.oc-actions { display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem; }
.oc-action-btn {
  padding:.5rem 1.1rem;border-radius:8px;font-size:.85rem;font-weight:600;
  text-decoration:none;border:none;cursor:pointer;
}
.oc-action-primary   { background:var(--oc-purple);color:#fff; }
.oc-action-secondary { background:rgba(255,255,255,.07);color:#e2e8f0; }
.oc-action-gold      { background:var(--oc-gold);color:#000; }
</style>
{% endblock %}

{% block content %}
{% if not_found %}
<div style="max-width:600px;margin:4rem auto;text-align:center;padding:2rem;background:#1e293b;border:1px solid rgba(255,68,68,.3);border-radius:12px;">
  <div style="font-size:2.5rem;margin-bottom:1rem;">⚠️</div>
  <h2 style="color:#f87171;margin:0 0 .75rem;">Design Not Found</h2>
  <p style="color:#94a3b8;margin:0 0 1.5rem;">Canvas design <code style="color:#a5b4fc;">{{ design_id }}</code> does not exist or has been deleted.</p>
  <a href="/agentic-ai" style="background:rgba(99,102,241,.8);color:#fff;padding:.6rem 1.4rem;border-radius:8px;text-decoration:none;font-weight:600;">← Back to AADC</a>
</div>
{% else %}
<div class="oc-header">
  <div class="oc-breadcrumb">
    <a href="/agentic-ai">AADC</a> →
    <a href="/agentic-ai/canvas/{{ design_id }}">{{ design_name }}</a> →
    Generate Ops Config
  </div>
  <h1>⚙️ Generate Ops Config</h1>
  <p>Map your AADC canvas nodes to runtime tools and generate wiring tasks.</p>
</div>

<div class="oc-body">

  <div class="oc-callout">
    <strong>What this does:</strong> Reads every node in your canvas design, maps each ops/safety/governance node
    to its runtime tool (from <code>args/aadc_node_tool_map.yaml</code>), and outputs:
    <ul style="margin:.5rem 0 0 1rem;padding:0;">
      <li><code>args/ops_config_{{ design_id }}.yaml</code> — tool activation config with default thresholds</li>
      <li>One Kanban backlog task per tool to wire up, with CLI reference and config key</li>
    </ul>
    This is a <strong>configuration generator</strong> — not a runtime deployer. Your team wires the tools.
  </div>

  <div class="oc-gen-row">
    <button class="oc-btn-generate" id="oc-gen-btn" onclick="generateConfig()">
      ⚙️ Generate Ops Config →
    </button>
    <label class="oc-label">
      <input type="checkbox" class="oc-checkbox" id="oc-create-tasks" checked>
      Create Kanban tasks
    </label>
  </div>

  <div id="oc-loading">
    <div class="oc-spinner"></div><br>Analyzing canvas nodes…
  </div>

  <div id="oc-result">

    <div class="oc-result-grid">

      <!-- Matched nodes -->
      <div class="oc-card">
        <div class="oc-card-title">Mapped Nodes → Tools</div>
        <div class="oc-node-chips" id="oc-matched-chips">
          <span style="color:#475569;font-size:.8rem;">No ops nodes found in this design.</span>
        </div>
      </div>

      <!-- Config file path -->
      <div class="oc-card">
        <div class="oc-card-title">Output</div>
        <div style="margin-bottom:.75rem;">
          <div style="font-size:.75rem;color:#64748b;margin-bottom:.3rem;">Config file</div>
          <span class="oc-path-chip" id="oc-config-path">—</span>
        </div>
        <div>
          <div style="font-size:.75rem;color:#64748b;margin-bottom:.3rem;">Kanban tasks created</div>
          <span style="font-size:1.3rem;font-weight:700;color:#e0e7ff;" id="oc-task-count">0</span>
          <span style="font-size:.78rem;color:#64748b;"> tasks queued in backlog</span>
        </div>
        {% if unmatched_count %}
        <div style="margin-top:.75rem;font-size:.78rem;color:var(--oc-red);">
          <span id="oc-unmatched-count">0</span> node types have no tool mapping — add them to <code>args/aadc_node_tool_map.yaml</code>
        </div>
        {% endif %}
        <div style="margin-top:.75rem;font-size:.75rem;color:#475569;" id="oc-unmatched-wrap" style="display:none">
          <span style="color:var(--oc-red);font-size:.75rem;">Unmatched: </span>
          <span id="oc-unmatched-chips"></span>
        </div>
      </div>

    </div>

    <!-- Kanban tasks list -->
    <div class="oc-card" style="margin-bottom:1.25rem;" id="oc-tasks-card">
      <div class="oc-card-title">Kanban Tasks Generated</div>
      <ul class="oc-task-list" id="oc-task-list"></ul>
    </div>

    <!-- Config preview -->
    <div class="oc-card" style="margin-bottom:1.5rem;">
      <div class="oc-card-title" style="display:flex;justify-content:space-between;align-items:center;">
        <span>Config Preview</span>
        <button onclick="copyConfig()" style="background:rgba(255,255,255,.06);border:1px solid var(--oc-border);color:#94a3b8;padding:.2rem .6rem;border-radius:5px;cursor:pointer;font-size:.72rem;">Copy</button>
      </div>
      <div class="oc-config-pre" id="oc-config-pre"></div>
    </div>

    <div class="oc-actions">
      <a href="/kanban" class="oc-action-btn oc-action-primary">View Kanban Tasks →</a>
      <a href="/agentic-ai/canvas/{{ design_id }}" class="oc-action-btn oc-action-secondary">Back to Canvas</a>
      <a href="/academy/mission/m-swe-aadc-09-ops-config" class="oc-action-btn oc-action-secondary">Academy Mission →</a>
    </div>
  </div>

  <div style="text-align:center;padding:2rem;font-size:.75rem;color:#334155;margin-top:2rem;">
    CUI // SP-CTI — AADC Ops Config Generator (Track B)
  </div>

</div>

<script>
const DESIGN_ID = {{ design_id | tojson }};

async function generateConfig() {
  const btn = document.getElementById('oc-gen-btn');
  const createTasks = document.getElementById('oc-create-tasks').checked;

  btn.disabled = true;
  document.getElementById('oc-result').style.display  = 'none';
  document.getElementById('oc-loading').style.display = 'block';

  try {
    const res = await fetch(`/agentic-ai/api/designs/${DESIGN_ID}/ops-config`, {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({create_tasks: createTasks}),
    });
    if (!res.ok) {
      const err = await res.json().catch(() => ({error: 'Server error ' + res.status}));
      throw new Error(err.error || 'Unknown error');
    }
    const data = await res.json();
    renderResult(data);
  } catch(e) {
    document.getElementById('oc-loading').style.display = 'none';
    alert('Generation failed: ' + e.message);
  } finally {
    btn.disabled = false;
  }
}

function renderResult(data) {
  document.getElementById('oc-loading').style.display = 'none';

  // Matched chips
  const matchedEl = document.getElementById('oc-matched-chips');
  if (data.matched_nodes && data.matched_nodes.length > 0) {
    matchedEl.innerHTML = data.matched_nodes.map(n =>
      `<span class="oc-chip-matched">${escHtml(n)}</span>`
    ).join('');
  } else {
    matchedEl.innerHTML = '<span style="color:#475569;font-size:.8rem;">No ops/safety/governance nodes found in this design. Add drift-detector, guardrail, token-budget, or audit-logger nodes to your canvas.</span>';
  }

  // Config path
  document.getElementById('oc-config-path').textContent = data.config_path || '—';

  // Task count
  document.getElementById('oc-task-count').textContent = (data.created_task_ids || []).length;

  // Unmatched
  const unmatchedWrap = document.getElementById('oc-unmatched-wrap');
  if (data.unmatched_nodes && data.unmatched_nodes.length > 0) {
    document.getElementById('oc-unmatched-chips').innerHTML =
      data.unmatched_nodes.map(n => `<code style="color:var(--oc-red);font-size:.75rem;margin-right:.3rem;">${escHtml(n)}</code>`).join('');
    unmatchedWrap.style.display = 'block';
  } else {
    unmatchedWrap.style.display = 'none';
  }

  // Task list
  const taskList = document.getElementById('oc-task-list');
  if (data.kanban_tasks && data.kanban_tasks.length > 0) {
    taskList.innerHTML = data.kanban_tasks.map(t =>
      `<li class="oc-task-item">
        <span class="oc-task-icon">→</span>
        <div>
          <span>${escHtml(t.title)}</span>
          <span class="oc-task-node">[${escHtml((t.tags||[]).find(x=>x!=='ops-config'&&x!=='aadc')||'')}]</span>
        </div>
      </li>`
    ).join('');
    document.getElementById('oc-tasks-card').style.display = 'block';
  } else {
    document.getElementById('oc-tasks-card').style.display = 'none';
  }

  // Config preview
  document.getElementById('oc-config-pre').textContent = data.config_preview || '';

  document.getElementById('oc-result').style.display = 'block';
  document.getElementById('oc-result').scrollIntoView({behavior:'smooth', block:'start'});
}

function copyConfig() {
  const text = document.getElementById('oc-config-pre').textContent;
  navigator.clipboard.writeText(text).catch(() => {});
}

function escHtml(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
</script>
{% endif %}
{% endblock %}