{% extends "base.html" %}
{% block title %}Rule Builder | Suvra{% endblock %}
{% block content %}
{% raw %}
<style>
.builder-step { display: none; }
.builder-step.active { display: block; }
.step-indicator {
  display: flex; gap: 0.5rem; margin-bottom: 1.5rem;
}
.step-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-border); color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.85rem;
}
.step-dot.done { background: var(--color-success-bg); color: var(--color-success); }
.step-dot.current { background: var(--color-accent); color: #fff; }
.step-line { flex: 1; height: 2px; background: var(--color-border); align-self: center; }

.effect-cards { display: flex; gap: 1rem; flex-wrap: wrap; }
.effect-card {
  flex: 1; min-width: 200px; padding: 1.25rem;
  border: 2px solid var(--color-border); border-radius: var(--radius-md);
  cursor: pointer; text-align: center; transition: var(--transition);
}
.effect-card:hover { border-color: var(--color-accent); background: var(--color-accent-subtle); }
.effect-card.selected { border-color: var(--color-accent); background: var(--color-accent-subtle); }
.effect-card .effect-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.effect-card.allow .effect-icon { color: var(--color-success); }
.effect-card.deny .effect-icon { color: var(--color-danger); }
.effect-card.needs_approval .effect-icon { color: var(--color-needs); }

.constraint-group { display: none; margin-top: 1rem; }
.constraint-group.visible { display: block; }

.tag-input { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.5rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  min-height: 42px; cursor: text; background: var(--color-surface); }
.tag-input .tag { display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.15rem 0.55rem; background: var(--color-accent-subtle);
  border-radius: var(--radius-sm); font-size: 0.85rem; }
.tag-input .tag button { background: none; border: none; cursor: pointer;
  font-weight: bold; color: var(--color-text-muted); padding: 0 0.15rem; }
.tag-input input { border: none; outline: none; flex: 1; min-width: 100px;
  font-size: 0.9rem; background: transparent; }

.preview-block { background: var(--color-surface-raised); padding: 1rem;
  border-radius: var(--radius-md); font-family: var(--font-mono);
  font-size: 0.82rem; white-space: pre-wrap; max-height: 300px; overflow-y: auto;
  border: 1px solid var(--color-border); }
.preview-summary { padding: 0.75rem; background: var(--color-accent-subtle);
  border-radius: var(--radius-md); margin-bottom: 1rem; font-size: 0.95rem; }
.preview-warning { padding: 0.6rem 1rem; background: var(--color-warning-bg);
  color: var(--color-warning); border-radius: var(--radius-md); margin-bottom: 1rem; }
.help-text { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.25rem; }
</style>
{% endraw %}

<div class="page-head">
  <h1>Rule Builder</h1>
  <p class="muted">Build a policy rule step by step — no YAML required.</p>
</div>

<form id="rule-form" method="POST" action="/dashboard/policy/{{ policy_id }}/rules/add_custom">
<input type="hidden" name="policy_id" value="{{ policy_id }}">

<div class="step-indicator">
  <span class="step-dot current" id="dot1">1</span><span class="step-line"></span>
  <span class="step-dot" id="dot2">2</span><span class="step-line"></span>
  <span class="step-dot" id="dot3">3</span><span class="step-line"></span>
  <span class="step-dot" id="dot4">4</span>
</div>

<!-- STEP 1: Action Type -->
<div class="builder-step active panel" id="step1">
  <div class="panel-head"><h2>Step 1 — What action should this rule control?</h2></div>
  <div class="panel-body">
    <label>Action type
      <select name="action_type" id="action-type" onchange="showConstraints()">
        <option value="">Select an action type…</option>
        <option value="fs.write_file">Write File</option>
        <option value="fs.delete_file">Delete File</option>
        <option value="http.request">HTTP Request</option>
        <option value="shell.exec">Run Shell Command</option>
        <option value="secrets.read">Read Secret</option>
        <option value="email.delete">Delete Email</option>
        <option value="mcp.*">MCP Tool Call (any tool)</option>
      </select>
    </label>
    <button type="button" class="btn btn-primary" style="margin-top:1rem" onclick="nextStep(2)">Next →</button>
  </div>
</div>

<!-- STEP 2: Effect -->
<div class="builder-step panel" id="step2">
  <div class="panel-head"><h2>Step 2 — What should happen?</h2></div>
  <div class="panel-body">
    <div class="effect-cards">
      <label class="effect-card allow" onclick="selectEffect(this)">
        <input type="radio" name="effect" value="allow" style="display:none">
        <div class="effect-icon">✓</div>
        <strong>Allow</strong>
        <p class="muted">Agent can perform this action without review</p>
      </label>
      <label class="effect-card deny" onclick="selectEffect(this)">
        <input type="radio" name="effect" value="deny" style="display:none">
        <div class="effect-icon">✕</div>
        <strong>Deny</strong>
        <p class="muted">Agent is blocked from performing this action</p>
      </label>
      <label class="effect-card needs_approval" onclick="selectEffect(this)">
        <input type="radio" name="effect" value="needs_approval" style="display:none">
        <div class="effect-icon">⏳</div>
        <strong>Needs Approval</strong>
        <p class="muted">A human must approve before the agent proceeds</p>
      </label>
    </div>
    <div style="margin-top:1rem">
      <button type="button" class="btn btn-secondary" onclick="nextStep(1)">← Back</button>
      <button type="button" class="btn btn-primary" onclick="nextStep(3)">Next →</button>
    </div>
  </div>
</div>

<!-- STEP 3: Constraints -->
<div class="builder-step panel" id="step3">
  <div class="panel-head"><h2>Step 3 — Add constraints</h2></div>
  <div class="panel-body">
    <!-- FS constraints -->
    <div class="constraint-group" id="c-fs">
      <label>Path prefix <span class="help-text">Files must be under this path</span>
        <input type="text" name="constraint__path_prefix" placeholder="workspace/reports/">
      </label>
      <label style="margin-top:0.75rem">Max file size (bytes)
        <input type="number" name="constraint__max_bytes" placeholder="1048576">
      </label>
    </div>
    <!-- HTTP constraints -->
    <div class="constraint-group" id="c-http">
      <label>Allowed domains <span class="help-text">Comma-separated list of domains the agent can reach</span>
        <div class="tag-input" id="tag-domains" onclick="this.querySelector('input').focus()">
        </div>
        <input type="hidden" name="constraint__allow_domains" id="hidden-allow-domains">
      </label>
      <label style="margin-top:0.75rem">Timeout (seconds)
        <input type="number" name="constraint__timeout_seconds" placeholder="5">
      </label>
    </div>
    <!-- SHELL constraints -->
    <div class="constraint-group" id="c-shell">
      <label>Allowed commands <span class="help-text">Add each allowed command</span>
        <div class="tag-input" id="tag-commands" onclick="this.querySelector('input').focus()">
        </div>
        <input type="hidden" name="constraint__allow_commands" id="hidden-allow-commands">
      </label>
    </div>
    <!-- SECRETS constraints -->
    <div class="constraint-group" id="c-secrets">
      <label>Allowed secret names <span class="help-text">Add each secret name the agent can access</span>
        <div class="tag-input" id="tag-names" onclick="this.querySelector('input').focus()">
        </div>
        <input type="hidden" name="constraint__allow_names" id="hidden-allow-names">
      </label>
    </div>
    <!-- Common constraints (all types) -->
    <div style="margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--color-border)">
      <h3 style="margin-bottom:0.75rem">Identity context (optional)</h3>
      <div style="display:flex; gap:1rem; flex-wrap:wrap">
        <label>Agent ID <span class="help-text">Restrict to a specific agent</span>
          <input type="text" name="constraint__agent">
        </label>
        <label>User
          <input type="text" name="constraint__user">
        </label>
        <label>Role
          <select name="constraint__role">
            <option value="">Any role</option>
            <option value="admin">Admin</option>
            <option value="operator">Operator</option>
            <option value="viewer">Viewer</option>
            <option value="policy_admin">Policy Admin</option>
          </select>
        </label>
        <label>Environment
          <input type="text" name="constraint__environment" placeholder="prod">
        </label>
      </div>
      <label style="margin-top:0.75rem">Labels <span class="help-text">Key:value pairs, one per line (e.g. scanner:lakera)</span>
        <textarea name="labels_raw" rows="3" placeholder="scanner:lakera&#10;tier:critical"></textarea>
      </label>
    </div>
    <div style="margin-top:1rem">
      <button type="button" class="btn btn-secondary" onclick="nextStep(2)">← Back</button>
      <button type="button" class="btn btn-primary" onclick="previewRule(event)">Preview →</button>
    </div>
  </div>
</div>

<!-- STEP 4: Review -->
<div class="builder-step panel" id="step4">
  <div class="panel-head"><h2>Step 4 — Review &amp; name your rule</h2></div>
  <div class="panel-body">
    <div id="preview-container"></div>
    <label style="margin-top:1rem">Rule name
      <input type="text" name="name" id="rule-name" required placeholder="e.g. Allow workspace file writes">
    </label>
    <label>Description
      <input type="text" name="description" placeholder="Optional description of what this rule does">
    </label>
    <input type="hidden" name="rule_data_json" id="rule-data-json">
    <div style="margin-top:1rem">
      <button type="button" class="btn btn-secondary" onclick="nextStep(3)">← Back</button>
      <button type="submit" class="btn btn-primary">Create Rule</button>
    </div>
  </div>
</div>

</form>
{% raw %}
<script>
const TAG_INPUTS = {};
function initTagInput(id, hiddenId) {
  const container = document.getElementById(id);
  const Hidden = container.querySelector('input');
  const input = document.createElement('input');
  input.placeholder = 'Type and press Enter…';
  container.appendChild(input);
  const tags = [];
  input.addEventListener('keydown', function(e) {
    if ((e.key === 'Enter' || e.key === ',') && this.value.trim()) {
      e.preventDefault();
      const val = this.value.replace(/,/g,'').trim();
      if (val && !tags.includes(val)) { addTag(val); }
      this.value = '';
    }
    if (e.key === 'Backspace' && !this.value && tags.length) {
      tags.pop(); renderTags();
    }
  });
  function addTag(val) { tags.push(val); renderTags(); }
  function renderTags() {
    while (container.firstChild !== input) container.removeChild(container.firstChild);
    tags.forEach(v => {
      const span = document.createElement('span'); span.className = 'tag';
      span.innerHTML = v + ' <button type="button" onclick="removeTag(&quot;'+v+'&quot;)">×</button>';
      container.insertBefore(span, input);
    });
    document.getElementById(hiddenId).value = tags.join(',');
  }
  TAG_INPUTS[id] = { addTag, tags };
  window['removeTag'+id] = function(v) { /* noop for inline onclick */ };
}
function removeTag(v) {
  Object.entries(TAG_INPUTS).forEach(([id,ctx]) => {
    const idx = ctx.tags.indexOf(v);
    if (idx >= 0) { ctx.tags.splice(idx,1); ctx.tags.length; }
    // Re-render: just clear and re-add
    const container = document.getElementById(id);
    const input = container.querySelector('input');
    while (container.firstChild !== input) container.removeChild(container.firstChild);
    ctx.tags.forEach(t => {
      const span = document.createElement('span'); span.className = 'tag';
      span.innerHTML = t + ' <button type="button" onclick="removeTag(&quot;'+t+'&quot;)">×</button>';
      container.insertBefore(span, input);
    });
    document.getElementById(id === 'tag-domains' ? 'hidden-allow-domains' : id === 'tag-commands' ? 'hidden-allow-commands' : 'hidden-allow-names').value = ctx.tags.join(',');
  });
}

initTagInput('tag-domains', 'hidden-allow-domains');
initTagInput('tag-commands', 'hidden-allow-commands');
initTagInput('tag-names', 'hidden-allow-names');

function selectEffect(el) {
  document.querySelectorAll('.effect-card').forEach(c => c.classList.remove('selected'));
  el.classList.add('selected');
  el.querySelector('input[type=radio]').checked = true;
}

function showConstraints() {
  const at = document.getElementById('action-type').value;
  document.querySelectorAll('.constraint-group').forEach(g => g.classList.remove('visible'));
  if (at.startsWith('fs.')) { document.getElementById('c-fs').classList.add('visible'); }
  if (at === 'http.request') { document.getElementById('c-http').classList.add('visible'); }
  if (at === 'shell.exec') { document.getElementById('c-shell').classList.add('visible'); }
  if (at === 'secrets.read') { document.getElementById('c-secrets').classList.add('visible'); }
}

function nextStep(n) {
  document.querySelectorAll('.builder-step').forEach(s => s.classList.remove('active'));
  document.getElementById('step'+n).classList.add('active');
  for (let i=1; i<=4; i++) {
    const dot = document.getElementById('dot'+i);
    dot.className = 'step-dot' + (i < n ? ' done' : '') + (i === n ? ' current' : '');
  }
}

function buildRuleJSON() {
  const at = document.getElementById('action-type').value;
  const effect = document.querySelector('input[name=effect]:checked');
  if (!at || !effect) return null;
  const rule = { rule_id: 'custom-' + Date.now(), action_type: at, effect: effect.value, constraints: {}, name: '', description: '' };
  const form = document.getElementById('rule-form');
  form.querySelectorAll('input[name^="constraint__"]').forEach(inp => {
    if (inp.value && inp.value.trim()) rule.constraints[inp.name.replace('constraint__','')] = inp.value;
  });
  const labelsEl = form.querySelector('textarea[name=labels_raw]');
  if (labelsEl && labelsEl.value.trim()) {
    rule.constraints.labels = labelsEl.value.trim().split('\n').filter(l=>l.includes(':')).reduce((o,l)=>{const[p,v]=l.split(':',2);o[p.trim()]=v.trim();return o},{});
  }
  // Handle tag values from hidden inputs
  ['hidden-allow-domains','hidden-allow-commands','hidden-allow-names'].forEach(id => {
    const el = document.getElementById(id);
    if (el && el.value) {
      const keyMap = {'hidden-allow-domains':'allow_domains','hidden-allow-commands':'allow_commands','hidden-allow-names':'allow_names'};
      rule.constraints[keyMap[id]] = el.value.split(',');
    }
  });
  return rule;
}

async function previewRule(e) {
  e.preventDefault();
  const rule = buildRuleJSON();
  if (!rule) { alert('Please select an action type and effect first.'); return; }
  // Auto-suggest name
  const effectLabel = rule.effect === 'allow' ? 'Allow' : rule.effect === 'deny' ? 'Deny' : 'Require approval for';
  const atLabel = document.getElementById('action-type').selectedOptions[0].text;
  document.getElementById('rule-name').value = effectLabel + ' ' + atLabel.toLowerCase();
  // Show preview
  const container = document.getElementById('preview-container');
  const yaml = ruleToYaml(rule);
  const hasConstraints = Object.keys(rule.constraints).length > 0;
  const summary = 'When ' + (rule.constraints.agent || 'any agent') + ' tries to ' + atLabel.toLowerCase() + ', ' + rule.effect.replace('_',' ') + (hasConstraints ? ', provided constraints are met' : '');
  container.innerHTML =
    '<div class="preview-summary"><strong>Summary:</strong> ' + summary + '</div>' +
    (hasConstraints ? '' : '<div class="preview-warning">⚠ This rule applies to all agents and all contexts — consider adding constraints</div>') +
    '<p class="muted" style="margin-bottom:0.5rem">Generated rule (YAML preview):</p>' +
    '<div class="preview-block">' + escapeHtml(yaml) + '</div>';
  document.getElementById('rule-data-json').value = JSON.stringify(rule);
  nextStep(4);
}

function ruleToYaml(rule) {
  let y = 'rule_id: ' + rule.rule_id + '\n';
  y += 'action_type: ' + rule.action_type + '\n';
  y += 'effect: ' + rule.effect + '\n';
  if (Object.keys(rule.constraints).length > 0) {
    y += 'constraints:\n';
    Object.entries(rule.constraints).forEach(([k,v]) => {
      if (Array.isArray(v)) { y += '  ' + k + ': [' + v.map(x=>'"'+x+'"').join(', ') + ']\n'; }
      else if (typeof v === 'object') { y += '  ' + k + ': ' + JSON.stringify(v) + '\n'; }
      else { y += '  ' + k + ': ' + v + '\n'; }
    });
  }
  return y;
}

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