{% extends "xeolux_securitykit/base.html" %}
{% block title %}{{ module.label }}{% endblock %}

{% block content %}
<div class="page-header">
  <div style="display:flex; align-items:center; gap:12px;">
    <a href="{% url 'xeolux_securitykit:modules' %}" style="color:var(--label-3); display:flex; align-items:center;">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M19 12H5M12 5l-7 7 7 7"/>
      </svg>
    </a>
    <div>
      <div style="font-size:12px; color:var(--label-3); margin-bottom:2px;">Modules / {{ module.category }}</div>
      <h1 style="margin:0;">{{ module.label }}</h1>
    </div>
  </div>
</div>

{% if messages %}
  {% for msg in messages %}
    <div class="alert alert-{% if msg.tags == 'error' %}error{% else %}success{% endif %}" style="margin-bottom:16px;">{{ msg }}</div>
  {% endfor %}
{% endif %}

<!-- Toggle on/off -->
<div class="card" style="margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:16px;">
  <div>
    <div style="font-weight:600; color:var(--label); margin-bottom:2px;">État du module</div>
    <div style="font-size:13px; color:var(--label-2);">
      {% if enabled %}
        <span style="color:var(--green);">●</span> Module actif — il s'exécute à chaque requête.
      {% else %}
        <span style="color:var(--label-3);">●</span> Module inactif — il est ignoré par le middleware.
      {% endif %}
    </div>
  </div>
  <form method="post" action="{% url 'xeolux_securitykit:module_toggle' module.name %}">
    {% csrf_token %}
    <button type="submit" class="btn {% if enabled %}btn-outline{% else %}btn-primary{% endif %}" style="white-space:nowrap;">
      {% if enabled %}Désactiver{% else %}Activer{% endif %}
    </button>
  </form>
</div>

{% if has_settings %}
<!-- Formulaire de réglages -->
<form method="post">
  {% csrf_token %}
  <div class="card">
    <div class="card-title" style="margin-bottom:20px;">Réglages</div>

    {% for param in params %}
    <div class="form-group" style="padding:12px 0; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:16px;">
      <div style="flex:1; min-width:0;">
        <div style="display:flex; align-items:center; gap:8px; margin-bottom:4px;">
          <label class="form-label" for="param_{{ param.key }}" style="margin:0;">{{ param.label }}</label>
          {% if param.source == "db" %}
            <span class="badge" style="background:rgba(52,199,89,0.12); color:var(--green); font-size:10px;">Modifié</span>
          {% else %}
            <span class="badge badge-neutral" style="font-size:10px;">Défaut</span>
          {% endif %}
        </div>
        {% if param.help_text %}
          <p class="help-text" style="margin-bottom:8px;">{{ param.help_text }}</p>
        {% endif %}

        {% if param.type == "bool" %}
          <label style="display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none;">
            <input type="hidden" name="{{ param.key }}" id="hidden_{{ param.key }}" value="{% if param.value %}on{% else %}off{% endif %}">
            <button type="button"
                    id="toggle_{{ param.key }}"
                    onclick="toggleParam('{{ param.key }}')"
                    style="
                      width:44px; height:26px; border-radius:13px; border:none; cursor:pointer;
                      transition:background .2s;
                      background:{% if param.value %}var(--blue){% else %}var(--label-4){% endif %};
                      position:relative; flex-shrink:0;
                    ">
              <span style="
                position:absolute; top:3px;
                left:{% if param.value %}21px{% else %}3px{% endif %};
                width:20px; height:20px; border-radius:50%; background:#fff;
                box-shadow:0 1px 3px rgba(0,0,0,.25);
                transition:left .2s;
                display:block;
              " id="thumb_{{ param.key }}"></span>
            </button>
            <span id="label_{{ param.key }}" style="font-size:13px; color:var(--label-2);">
              {% if param.value %}Activé{% else %}Désactivé{% endif %}
            </span>
          </label>

        {% elif param.type == "list" %}
          <textarea id="param_{{ param.key }}" name="{{ param.key }}" rows="3"
                    class="form-control" style="font-family:monospace; font-size:12px;"
                    placeholder='Ex: ["/static/", "/media/"]'>{{ param.value_json|default:"" }}</textarea>
          <p class="help-text">Format JSON. Défaut : <code>{{ param.default }}</code></p>

        {% elif param.type == "int" %}
          <input type="number" id="param_{{ param.key }}" name="{{ param.key }}"
                 value="{{ param.value }}" class="form-control" min="0" style="max-width:180px;">
          <p class="help-text">Défaut : <code>{{ param.default }}</code></p>

        {% elif param.type == "NoneType" %}
          <input type="text" id="param_{{ param.key }}" name="{{ param.key }}"
                 value="{{ param.value|default:'' }}"
                 class="form-control" placeholder="Vide = désactivé" style="max-width:340px;">
          <p class="help-text">Laissez vide pour désactiver. Défaut : <code>{{ param.default }}</code></p>

        {% else %}
          <input type="text" id="param_{{ param.key }}" name="{{ param.key }}"
                 value="{{ param.value|default:'' }}"
                 class="form-control" placeholder="{{ param.default|default:'' }}" style="max-width:340px;">
          <p class="help-text">Défaut : <code>{{ param.default }}</code></p>
        {% endif %}
      </div>
    </div>
    {% endfor %}

    <div style="display:flex; gap:10px; margin-top:20px;">
      <button type="submit" class="btn btn-primary">Sauvegarder</button>
      <a href="{% url 'xeolux_securitykit:modules' %}" class="btn btn-ghost">Retour aux modules</a>
    </div>
  </div>
</form>

{% else %}
<div class="card" style="text-align:center; padding:40px; color:var(--label-2);">
  <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin:0 auto 12px; display:block; opacity:0.35;">
    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z"/>
    <circle cx="12" cy="12" r="3"/>
  </svg>
  <p style="font-weight:500; margin-bottom:4px;">Pas de réglages pour ce module</p>
  <p style="font-size:13px;">Ce module fonctionne sans paramètres configurables — activez ou désactivez-le ci-dessus.</p>
  <div style="margin-top:16px;">
    <a href="{% url 'xeolux_securitykit:modules' %}" class="btn btn-secondary">Retour aux modules</a>
  </div>
</div>
{% endif %}

<script>
function toggleParam(key) {
  const hidden = document.getElementById('hidden_' + key);
  const btn = document.getElementById('toggle_' + key);
  const thumb = document.getElementById('thumb_' + key);
  const label = document.getElementById('label_' + key);
  const isOn = hidden.value !== 'on';
  hidden.value = isOn ? 'on' : 'off';
  btn.style.background = isOn ? 'var(--blue)' : 'var(--label-4)';
  thumb.style.left = isOn ? '21px' : '3px';
  label.textContent = isOn ? 'Activé' : 'Désactivé';
}
</script>
{% endblock %}