{% extends "base.html" %}
{% from "_macros.html" import crumbs %}
{% block title %}{% if rule %}Edit Rule{% else %}New Alert Rule{% endif %} — Steward{% endblock %}
{% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("Edit rule" if rule else "New rule", "")]) }}{% endblock %}
{% block content %}
<div style="max-width:600px;margin:2rem auto;">
  <h1 class="page-title">{% if rule %}Edit Rule{% else %}New Alert Rule{% endif %}</h1>
  <div class="card">
    <form method="post" action="{% if rule %}/alerts/rules/{{ rule.id }}{% else %}/alerts/rules{% endif %}">{{ csrf_field() }}

      <div class="form-group">
        <label>Rule Name</label>
        <input type="text" name="name" required autofocus
               value="{{ rule.name if rule else '' }}"
               placeholder="e.g. Home server down">
      </div>

      {# ── Source module ───────────────────────────────────────────────────── #}
      <div class="form-group">
        <label>Source</label>
        <select name="source_module" required
                hx-get="/alerts/api/rule_fields"
                hx-trigger="change"
                hx-target="#rule-fields"
                hx-include="[name='source_module']">
          {% for src in source_modules %}
          <option value="{{ src }}" {% if src == initial_source %}selected{% endif %}>{{ source_label(src) }}</option>
          {% endfor %}
        </select>
      </div>

      {# ── Dynamic resource + metric ────────────────────────────────────────── #}
      <div id="rule-fields">
        {% with current_resource = rule.resource_name if rule else "", current_metric = rule.metric_name if rule else "" %}
        {% include "alerts/_rule_fields.html" %}
        {% endwith %}
      </div>

      {# ── Condition: a threshold in the metric's unit, or for an up/down metric
         the word it fires on (sent as binary_when; the route turns it into
         < 0.5 or >= 0.5). The script swaps the two as the metric changes. #}
      {% set m0 = rule.metric_name if rule else "" %}
      {% set binary = m0 in ("is_up", "is_healthy") %}
      {% set fires_down = not rule or rule.operator.value in ("<", "<=") %}
      <div data-cond-binary {% if not binary %}hidden{% endif %} class="form-group">
        <label>Fires when it is</label>
        <select name="binary_when" {% if not binary %}disabled{% endif %}>
          <option value="down" {% if fires_down %}selected{% endif %}>down (unhealthy)</option>
          <option value="up" {% if not fires_down %}selected{% endif %}>up (healthy)</option>
        </select>
      </div>
      <div data-cond-numeric {% if binary %}hidden{% endif %} style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
        <div class="form-group">
          <label>Fires when the reading is</label>
          <select name="operator" {% if binary %}disabled{% endif %}>
            {% for val, label in operators %}
            <option value="{{ val }}" {% if rule and rule.operator.value == val %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group">
          <label>Threshold <span data-threshold-unit style="color:var(--text-muted);font-weight:normal;">{% if metric_unit(m0) %}({{ metric_unit(m0) }}){% endif %}</span></label>
          <input type="number" name="threshold" step="any" required {% if binary %}disabled{% endif %}
                 value="{{ rule.threshold if rule and not binary else '' }}" placeholder="90">
        </div>
      </div>

      <div class="form-group">
        <label>Breaching checks in a row before it fires</label>
        <input type="number" name="consecutive_failures_required" min="1"
               value="{{ rule.consecutive_failures_required if rule else 1 }}">
      </div>

      <div class="form-group">
        <label>Consecutive OK checks before it clears</label>
        <input type="number" name="consecutive_ok_required" min="1"
               value="{{ rule.consecutive_ok_required if rule else 1 }}">
        <p class="field-hint">
          A firing or acknowledged alert resolves only after this many checks in a row are back
          within the threshold. An acknowledgement holds until then.</p>
      </div>

      <div class="form-group">
        <label style="display:flex;align-items:center;gap:0.5rem;font-weight:normal;">
          <input type="checkbox" name="notify_no_data"
                 {% if not rule or rule.notify_no_data %}checked{% endif %}>
          Notify when this metric stops reporting
        </label>
        <p class="field-hint">
          Silence is always shown as NO DATA on the Alerts page: no sample for three of the
          metric's usual gaps (at least 5 minutes). This also sends a notification when it starts
          and when data resumes. A firing alert that goes silent stays firing.</p>
      </div>

      {# ── Metric reference ────────────────────────────────────────────────── #}
      <details style="margin-bottom:1rem;">
        <summary style="cursor:pointer;font-size:0.82rem;color:var(--text-muted);user-select:none;">
          What each metric measures
        </summary>
        <div style="margin-top:0.75rem;display:grid;gap:0.5rem;">
          {% for src, names in catalog.items() if names %}
          <div>
            <div style="font-size:0.78rem;font-weight:500;color:var(--text-dim);margin-bottom:0.2rem;">{{ source_label(src) }}</div>
            {% for m in names %}
            <div style="display:grid;grid-template-columns:200px 1fr;gap:0.5rem;font-size:0.78rem;padding:0.15rem 0;">
              <span>{{ metric_label(m) }}{% if metric_unit(m) %} <span style="color:var(--text-dim);">({{ metric_unit(m) }})</span>{% endif %}</span>
              <span style="color:var(--text-muted);">{{ metric_about(m) }}</span>
            </div>
            {% endfor %}
          </div>
          {% endfor %}
        </div>
      </details>

      {# ── Ansible action (admin only) ─────────────────────────────────────── #}
      {% if session.get("user_role") == "admin" %}
      {% set act = rule.ansible_action if rule and rule.ansible_action else None %}
      <div style="margin:1.25rem 0;padding:1rem;border:1px solid var(--border-mid);border-radius:6px;background:var(--bg-elevated);">
        <label style="display:flex;align-items:center;gap:0.5rem;font-weight:500;">
          <input type="checkbox" name="ansible_enabled" {% if act %}checked{% endif %}>
          On firing → run an Ansible playbook
        </label>
        <p style="font-size:0.78rem;color:var(--text-muted);margin:0.4rem 0 0.75rem;">
          Admin only. Runs once when the alert transitions into FIRING.
          <code>steward_alert_*</code> context vars (resource, metric, value…) are injected automatically.
        </p>
        <div class="form-group">
          <label>Source</label>
          <select name="ansible_source">
            <option value="">— select source —</option>
            {% for s in ansible_sources %}
            <option value="{{ s }}" {% if act and act.source == s %}selected{% endif %}>{{ s }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group">
          <label>Playbook <span style="color:var(--text-muted);font-weight:normal;">(path within source)</span></label>
          <input type="text" name="ansible_playbook" placeholder="playbooks/shutdown.yml"
                 value="{{ act.playbook if act else '' }}">
        </div>
        <div class="form-group">
          <label>Inventory <span style="color:var(--text-muted);font-weight:normal;">(path within source)</span></label>
          <input type="text" name="ansible_inventory" placeholder="inventory/hosts"
                 value="{{ act.inventory if act else '' }}">
        </div>
        <div class="form-group">
          <label>Extra vars <span style="color:var(--text-muted);font-weight:normal;">(optional, one key=value per line)</span></label>
          <textarea name="ansible_extra_vars" rows="2"
                    style="width:100%;font-family:ui-monospace,monospace;font-size:0.85rem;">{{ act.extra_vars | join("\n") if act and act.extra_vars else "" }}</textarea>
        </div>
        <div class="form-group">
          <label>Limit to host(s) <span style="color:var(--text-muted);font-weight:normal;">(optional)</span></label>
          <input type="text" name="ansible_limit" value="{{ act.limit if act and act.limit else '' }}">
        </div>
        <div class="form-group">
          <label>Tags <span style="color:var(--text-muted);font-weight:normal;">(optional)</span></label>
          <input type="text" name="ansible_tags" value="{{ act.tags if act and act.tags else '' }}">
        </div>
        <label style="display:flex;align-items:center;gap:0.5rem;font-weight:normal;">
          <input type="checkbox" name="ansible_check" {% if act and act.check %}checked{% endif %}>
          Dry-run (--check --diff)
        </label>
      </div>
      {% endif %}

      <script>
        // The condition follows the metric: an up/down metric asks which word
        // fires, any other a threshold in its unit. "Agent offline" is
        // seconds_since_seen > 180 (the agent's stale window).
        document.addEventListener("change", function (e) {
          if (e.target.name !== "metric_name") return;
          var form = e.target.form, opt = e.target.selectedOptions[0];
          var binary = opt.hasAttribute("data-binary"), unit = opt.dataset.unit || "";
          form.querySelector("[data-cond-binary]").hidden = !binary;
          form.querySelector("[data-cond-numeric]").hidden = binary;
          form.elements["binary_when"].disabled = !binary;
          form.elements["operator"].disabled = binary;
          form.elements["threshold"].disabled = binary;
          form.querySelector("[data-threshold-unit]").textContent = unit ? "(" + unit + ")" : "";
          var about = form.querySelector("[data-metric-about]");
          if (about) { about.textContent = opt.dataset.about || ""; about.hidden = !opt.dataset.about; }
          var threshold = form.elements["threshold"];
          if (opt.value === "seconds_since_seen" && threshold.value === "") {
            form.elements["operator"].value = ">";
            threshold.value = "180";
          }
        });
      </script>

      <div style="display:flex;gap:1rem;margin-top:1.5rem;">
        <button type="submit" class="btn">{% if rule %}Save Changes{% else %}Create Rule{% endif %}</button>
        <a href="/alerts/" class="btn btn-ghost">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}