{% extends "settings/layout.html" %}

{% block settings_content %}
<div>
  <h2 class="ui-section-title text-xl">Detection Rules</h2>
  <p class="ui-section-subtitle">Globally enable or disable rule families. Per-project allow-lists in each configuration's Advanced Settings can further narrow this set, but they cannot enable a rule that is globally disabled here.</p>

  {% if flash %}
    <div class="mt-4 ui-alert border
      {% if flash.level == 'info' %}
        border-blue-300 dark:border-blue-500/30 bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-300
      {% elif flash.level == 'error' %}
        border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 text-red-600 dark:text-red-300
      {% else %}
        border-brand-200 dark:border-brand-500/30 bg-brand-50 dark:bg-brand-700/40 text-brand-500 dark:text-brand-200
      {% endif %}
    ">
      {{ flash.message }}
    </div>
  {% endif %}

  {% if any_env_overrides %}
    <div class="mt-4 ui-alert border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300">
      One or more rules below have an <code class="font-mono">OPPORTUNITY_*_ENABLED</code> environment variable set. Env vars take precedence over admin toggles &mdash; saving here will not change those rows until the env var is removed.
    </div>
  {% endif %}

  <form method="post" action="/settings/detection-rules" class="ui-form-scope mt-6">
    <div class="space-y-6">
      {% for group in groups %}
        <fieldset class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-5">
          <legend class="px-2 text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300">{{ group.title }}</legend>
          {% if group.description %}
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ group.description }}</p>
          {% endif %}

          <div class="mt-4 space-y-3">
            {% for rule in group.rules %}
              {% set is_env = rule.source == 'env' %}
              <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/40 p-4 {% if is_env %}opacity-70{% else %}cursor-pointer hover:border-slate-300 dark:hover:border-slate-700{% endif %} transition-colors">
                <input
                  type="checkbox"
                  name="rule_{{ rule.rule_type }}"
                  {% if rule.is_enabled %}checked{% endif %}
                  {% if is_env %}disabled{% endif %}
                  class="mt-0.5 text-brand-500 focus:ring-brand-500"
                />
                <div class="min-w-0 flex-1">
                  <div class="flex flex-wrap items-center gap-2">
                    <span class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ rule.display_name }}</span>
                    <span class="ui-pill
                      {% if rule.is_enabled %}ui-pill-success{% else %}ui-pill-neutral{% endif %}
                    ">{{ 'Enabled' if rule.is_enabled else 'Disabled' }}</span>
                    {% if rule.source == 'env' %}
                      <span class="ui-pill ui-pill-warning" title="Set via {{ rule.env_var }}={{ rule.env_value }}">env override</span>
                    {% elif rule.source == 'admin' %}
                      <span class="ui-pill ui-pill-blue">admin override</span>
                    {% else %}
                      <span class="ui-pill ui-pill-neutral">default</span>
                    {% endif %}
                  </div>
                  <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ rule.description }}</p>
                  <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">
                    Hardcoded default: <span class="font-medium text-slate-500 dark:text-slate-400">{{ 'on' if rule.hardcoded_default else 'off' }}</span>
                    &middot; Env var: <code class="font-mono">{{ rule.env_var }}</code>{% if rule.env_value is not none %} = <code class="font-mono">{{ rule.env_value }}</code>{% endif %}
                  </p>
                </div>
              </label>
            {% endfor %}
          </div>
        </fieldset>
      {% endfor %}
    </div>

    <div class="mt-6 flex items-center gap-3">
      <button type="submit" class="ui-btn-primary transition-colors">Save</button>
      <p class="text-sm text-slate-500 dark:text-slate-400">Changes apply on the next detection run &mdash; no restart required.</p>
    </div>
  </form>
</div>
{% endblock %}