{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div style="width:100%">
    <h1 class="ct-docs-page-h1-title" id="content">
      Fault Detection
    </h1>
    <p class="text-xs text-muted">Configure message patterns that automatically mark affected wallboxes when matched.</p>
  </div>

  {% if error %}
  <div class="alert alert-danger text-xs" role="alert">
    {{ error }}
  </div>
  {% endif %}

  {% if message %}
  <div class="alert alert-success text-xs" role="alert">
    {{ message }}
  </div>
  {% endif %}

  <ul class="nav nav-tabs mb-4">
    <li class="nav-item">
      <a class="nav-link {% if active_tab != 'custom' %}active{% endif %}" href="{{ url_for('fault_detection', active_tab='common') }}">Standard-Trigger</a>
    </li>
    <li class="nav-item">
      <a class="nav-link {% if active_tab == 'custom' %}active{% endif %}" href="{{ url_for('fault_detection', active_tab='custom') }}">Eigene Patterns</a>
    </li>
  </ul>

  {% if active_tab != 'custom' %}
    {% for section in trigger_sections %}
    <div class="card{% if not loop.last %} mb-4{% endif %}">
      <div class="card-header pb-0">
        <h6 class="mb-0">Standard-Trigger – {{ section.label }}</h6>
      </div>
      <div class="card-body px-0 pt-0 pb-2">
        <div class="table-responsive p-0">
          <table class="table align-items-center mb-0">
            <thead>
              <tr>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Status</th>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Titel</th>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Beschreibung</th>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Schwellenwert</th>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Priorität</th>
              </tr>
            </thead>
            <tbody>
              {% if section.triggers %}
                {% for trigger in section.triggers %}
                <tr>
                  <td class="text-xs mb-0 text-center">
                    <form method="post" class="m-0">
                      <input type="hidden" name="action" value="toggle_trigger" />
                      <input type="hidden" name="trigger_id" value="{{ trigger.id }}" />
                      <input type="hidden" name="new_status" value="{{ 1 if trigger.is_enabled else 0 }}" />
                      <input type="hidden" name="active_tab" value="common" />
                      <div class="form-check form-switch d-inline-flex align-items-center justify-content-center gap-2">
                        <input class="form-check-input" type="checkbox" id="toggle-trigger-{{ trigger.id }}" {% if trigger.is_enabled %}checked{% endif %}
                          onchange="this.closest('form').querySelector('[name=\'new_status\']').value = this.checked ? '1' : '0';this.form.submit();" />
                        <label class="form-check-label text-xs ms-2" for="toggle-trigger-{{ trigger.id }}">{{ 'Aktiv' if trigger.is_enabled else 'Inaktiv' }}</label>
                      </div>
                    </form>
                  </td>
                  <td class="text-xs font-weight-bold mb-0">{{ trigger.report_reason_title }}</td>
                  <td class="text-xs mb-0">{{ trigger.report_reason_description }}</td>
                  <td class="text-xs mb-0 text-center">
                    <form method="post" class="d-inline-flex align-items-center justify-content-center gap-2">
                      <input type="hidden" name="action" value="update_trigger_threshold" />
                      <input type="hidden" name="trigger_id" value="{{ trigger.id }}" />
                      <input type="hidden" name="active_tab" value="common" />
                      <input type="number" class="form-control form-control-sm" name="threshold" min="1" max="10" value="{{ trigger.threshold }}" style="width: 4.5rem;" />
                      <button type="submit" class="btn btn-link btn-sm text-xs p-0">Speichern</button>
                    </form>
                  </td>
                  <td class="text-xs mb-0">{{ trigger.priority|capitalize }}</td>
                </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td colspan="5" class="text-center text-xs text-muted py-3">Keine Standard-Trigger in dieser Gruppe vorhanden.</td>
                </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
    {% endfor %}
  {% endif %}

  {% if active_tab == 'custom' %}
  <div class="card mb-4">
    <div class="card-header pb-0">
      <h6 class="mb-0">Neues Pattern</h6>
    </div>
    <div class="card-body">
      <form method="post">
        <input type="hidden" name="action" value="add" />
        <input type="hidden" name="active_tab" value="custom" />
        <div class="row">
          <div class="col-12 mb-3">
            <label class="form-label text-xs">Titel</label>
            <input type="text" class="form-control form-control-sm" name="pattern_title" placeholder="z.B. Ladestation nicht verbunden" required />
            <small class="text-muted">Kurze Beschreibung für das Pattern.</small>
          </div>
          <div class="col-md-4 mb-3">
            <label class="form-label text-xs">OCPP Pattern</label>
            <input type="text" class="form-control form-control-sm" name="pattern" placeholder="z.B. ConnectorError" required />
            <small class="text-muted">Unterstützt Python-Regular-Expressions (Groß-/Kleinschreibung wird ignoriert).</small>
          </div>
          <div class="col-md-4 mb-3">
            <label class="form-label text-xs">Erklärung</label>
            <input type="text" class="form-control form-control-sm" name="explanation" placeholder="Warum wird die Wallbox markiert?" required />
            <small class="text-muted">Dieser Text erscheint im Dashboard bei der markierten Wallbox.</small>
          </div>
          <div class="col-md-2 mb-3">
            <label class="form-label text-xs" for="newPatternCriticality">Kritikalität</label>
            <select class="form-select form-select-sm" id="newPatternCriticality" name="criticality">
              <option value="low">Low</option>
              <option value="medium" selected>Medium</option>
              <option value="high">High</option>
            </select>
          </div>
          <div class="col-md-2 mb-3 d-flex align-items-end">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="newPatternActive" name="is_active" value="1" checked />
              <label class="form-check-label text-xs" for="newPatternActive">Aktiv</label>
            </div>
          </div>
        </div>
        <div class="d-flex justify-content-end">
          <button type="submit" class="btn btn-primary btn-sm">Speichern</button>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-header pb-0">
      <h6 class="mb-0">Konfigurierte Patterns</h6>
    </div>
    <div class="card-body px-0 pt-0 pb-2">
      <div class="table-responsive p-0">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Status</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Titel</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Pattern</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Erklärung</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Kritikalität</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Treffer</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Angelegt</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {% if rules %}
              {% for rule in rules %}
              <tr>
                <td class="text-xs mb-0 text-center">
                  <form method="post" class="m-0">
                    <input type="hidden" name="action" value="toggle" />
                    <input type="hidden" name="rule_id" value="{{ rule.id }}" />
                    <input type="hidden" name="new_status" value="{{ 1 if rule.is_active else 0 }}" />
                    <input type="hidden" name="active_tab" value="custom" />
                    <div class="form-check form-switch d-inline-flex align-items-center justify-content-center gap-2">
                      <input class="form-check-input" type="checkbox" id="toggle-{{ rule.id }}" {% if rule.is_active %}checked{% endif %}
                        onchange="this.closest('form').querySelector('[name=\'new_status\']').value = this.checked ? '1' : '0';this.form.submit();" />
                      <label class="form-check-label text-xs ms-2" for="toggle-{{ rule.id }}">{{ 'Aktiv' if rule.is_active else 'Inaktiv' }}</label>
                    </div>
                  </form>
                </td>
                <td class="text-xs font-weight-bold mb-0">{{ rule.pattern_title or rule.pattern }}</td>
                <td class="text-xs font-weight-bold mb-0">{{ rule.pattern }}</td>
                <td class="text-xs mb-0">{{ rule.explanation }}</td>
                <td class="text-xs mb-0">{{ (rule.criticality or 'medium')|capitalize }}</td>
                <td class="text-xs mb-0">{{ counts.get(rule.id, 0) }}</td>
                <td class="text-xs mb-0">{% if rule.created_at %}{{ rule.created_at }}{% else %}-{% endif %}</td>
                <td class="text-xs mb-0">
                  <form method="post" onsubmit="return confirm('Pattern wirklich löschen? Die zugehörigen Markierungen werden entfernt.');">
                    <input type="hidden" name="action" value="delete" />
                    <input type="hidden" name="rule_id" value="{{ rule.id }}" />
                    <input type="hidden" name="active_tab" value="custom" />
                    <button type="submit" class="btn btn-link text-danger text-xs p-0 m-0">Löschen</button>
                  </form>
                </td>
              </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="8" class="text-center text-xs text-muted py-3">Keine Patterns vorhanden.</td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {% endif %}
</main>
{% endblock %}