{% extends 'layout.html' %}
{% from 'macros.html' import common_styles %}
{% block title %}Modifier Rôle — {{ role.name }}{% endblock %}
{% block page_title %}Modifier le rôle{% endblock %}
{% block styles %}{{ common_styles() }}
<style>
.form-card { border:none; border-radius:16px; box-shadow:0 2px 16px rgba(0,0,0,.07); }
.section-badge {
    display:inline-flex; align-items:center; gap:8px;
    font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
    color:#6366f1; margin-bottom:14px;
}
.section-badge::after { content:''; display:inline-block; width:40px; height:2px;
    background:linear-gradient(90deg,#6366f1,transparent); border-radius:2px; }

.perm-toggle-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    background: #fff;
    transition: all 0.2s;
    height: 100%;
    cursor: pointer;
}
.perm-toggle-card:hover {
    border-color: #6366f1;
    background: #fdfcff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99,102,241,0.1);
}
.perm-toggle-card.is-active {
    border-color: #6366f1;
    background: #f5f3ff;
}
.perm-counter-badge {
    display:inline-flex; align-items:center; gap:5px;
    background: #ede9fe; color: #6366f1;
    border-radius: 20px; padding: 2px 10px;
    font-size: .72rem; font-weight: 700;
    transition: all .2s;
}
.section-header-row {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.superadmin-info {
    background-color: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 12px;
    color: #991b1b;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="d-flex align-items-center gap-3 mb-4">
    <a href="{{ url_for('voir_role', id=role.id) }}" class="back-btn">
      <i class="fas fa-arrow-left"></i>Retour
    </a>
    <div>
      <h5 class="fw-bold mb-0">Modifier Rôle</h5>
      <div class="text-muted small">{{ role.name }}</div>
    </div>
  </div>

  {% if role.name == 'SUPER ADMIN' %}
    <div class="superadmin-info p-3 mb-4 d-flex align-items-center gap-3">
      <div class="fs-4"><i class="fas fa-user-shield text-danger"></i></div>
      <div>
        <h6 class="fw-bold mb-1">Rôle de protection invariant (SUPER ADMIN)</h6>
        <p class="small mb-0">Pour préserver la sécurité de l'application, les permissions du compte SUPER ADMIN ne peuvent pas être désactivées.</p>
      </div>
    </div>
  {% endif %}

  <form method="post" action="{{ url_for('modifier_role', id=role.id) }}">
    <div class="row g-4">
      
      <!-- Colonne Gauche: Informations Générales & Aperçu -->
      <div class="col-lg-4">
        <div class="card form-card p-4 mb-4">
          <div class="section-badge"><i class="fas fa-info-circle"></i>Détails du rôle</div>
          
          <div class="mb-3">
            <label class="form-label fw-semibold">Nom du rôle <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="name" value="{{ role.name }}" required {% if role.name == 'SUPER ADMIN' %}readonly{% endif %} maxlength="50">
            {% if role.name == 'SUPER ADMIN' %}
              <div class="form-text text-danger">Le rôle SUPER ADMIN ne peut pas être renommé.</div>
            {% endif %}
          </div>
          
          <div class="mb-3">
            <label class="form-label fw-semibold">Description</label>
            <textarea class="form-control" name="description" rows="3" placeholder="Description des responsabilités...">{{ role.description or '' }}</textarea>
          </div>

          <div class="row mb-3">
            <div class="col-6">
              <label class="form-label fw-semibold">Couleur</label>
              <input type="color" class="form-control form-control-color w-100" name="color" value="{{ role.color or '#6366f1' }}" title="Choisir une couleur">
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold">Icône (FontAwesome)</label>
              <select class="form-select" name="icon">
                <option value="fa-user-tag" {% if role.icon == 'fa-user-tag' %}selected{% endif %}>Par défaut</option>
                <option value="fa-user-shield" {% if role.icon == 'fa-user-shield' %}selected{% endif %}>Bouclier (Admin)</option>
                <option value="fa-user-cog" {% if role.icon == 'fa-user-cog' %}selected{% endif %}>Engrenage (Technique)</option>
                <option value="fa-user-tie" {% if role.icon == 'fa-user-tie' %}selected{% endif %}>Cravate (Direction)</option>
                <option value="fa-tools" {% if role.icon == 'fa-tools' %}selected{% endif %}>Outils</option>
                <option value="fa-wrench" {% if role.icon == 'fa-wrench' %}selected{% endif %}>Clé</option>
                <option value="fa-industry" {% if role.icon == 'fa-industry' %}selected{% endif %}>Industrie</option>
                <option value="fa-flask" {% if role.icon == 'fa-flask' %}selected{% endif %}>Laboratoire</option>
                <option value="fa-clipboard-check" {% if role.icon == 'fa-clipboard-check' %}selected{% endif %}>Validation</option>
                <option value="fa-leaf" {% if role.icon == 'fa-leaf' %}selected{% endif %}>Énergie/Utilités</option>
              </select>
            </div>
          </div>
        </div>

        <div class="card form-card p-4 mb-4" style="background:#f8fafc; border:1px solid #e2e8f0;">
          <div class="section-badge"><i class="fas fa-users"></i>Impact de la modification</div>
          <div class="d-flex align-items-center gap-3">
            <div class="rounded-circle d-flex align-items-center justify-content-center text-white"
                 style="width:48px;height:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);font-size:1.3rem;font-weight:bold;">
              {{ user_count }}
            </div>
            <div>
              <div class="fw-bold text-dark">Utilisateur(s) affecté(s)</div>
              <div class="text-muted small">Les modifications s'appliqueront immédiatement à ces comptes.</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Colonne Droite: Configuration Permissions -->
      <div class="col-lg-8">
        
        <!-- Modules -->
        <div class="card form-card p-4 mb-4">
          <div class="section-header-row">
            <div class="section-badge mb-0"><i class="fas fa-cubes"></i>Accès aux Modules (Pages)</div>
            {% if role.name != 'SUPER ADMIN' %}
              <div class="d-flex align-items-center gap-2">
                <span class="perm-counter-badge" id="module-count">0 / 0</span>
                <button type="button" class="btn btn-xs btn-outline-primary py-1 px-2" style="font-size:.7rem;border-radius:6px" onclick="toggleCategory('module-checkbox', true)">Tout</button>
                <button type="button" class="btn btn-xs btn-outline-secondary py-1 px-2" style="font-size:.7rem;border-radius:6px" onclick="toggleCategory('module-checkbox', false)">Aucun</button>
              </div>
            {% endif %}
          </div>
          
          {% set modules_list = [
            ('interventions', 'Interventions', 'fa-clipboard-list', 'Suivi des pannes et interventions'),
            ('equipements', 'Équipements', 'fa-industry', 'Gestion du parc machines'),
            ('pieces', 'Pièces de rechange', 'fa-box', 'Gestion du stock de pièces'),
            ('preventifs', 'Préventifs', 'fa-calendar-alt', 'Planification des maintenances'),
            ('ordres', 'Ordres de travail', 'fa-tools', 'Bons de travaux de maintenance'),
            ('fournisseurs', 'Fournisseurs', 'fa-truck', 'Fiches fournisseurs'),
            ('commandes', 'Commandes', 'fa-shopping-cart', 'Commandes de pièces'),
            ('familles', 'Familles', 'fa-tags', 'Catégories d\'équipements'),
            ('operations', 'Opérations', 'fa-tasks', 'Tâches élémentaires'),
            ('operateurs', 'Opérateurs', 'fa-users', 'Fiches techniciens/opérateurs'),
            ('qualifications', 'Qualifications', 'fa-award', 'Habilitations et formations'),
            ('outillages', 'Outillages', 'fa-toolbox', 'Outillages spécifiques'),
            ('gammes', 'Gammes', 'fa-route', 'Procédures de maintenance'),
            ('constats', 'Constats', 'fa-file-signature', 'Constats d\'anomalies'),
            ('rapports', 'Rapports', 'fa-file-medical', 'Rapports de contrôles réglementaires'),
            ('utilisateurs', 'Utilisateurs (Admin)', 'fa-users-cog', 'Administration des comptes'),
            ('roles', 'Rôles & Permissions', 'fa-user-shield', 'Gestion des rôles et droits d\'accès'),
            ('activites', 'Journal d\'activités', 'fa-history', 'Consultation du journal des activités')
          ] %}

          <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
            {% for key, name, icon, desc in modules_list %}
              {% set is_checked = role[key] or role.name == 'SUPER ADMIN' %}
              <div class="col">
                <div class="perm-toggle-card {% if is_checked %}is-active{% endif %}" {% if role.name != 'SUPER ADMIN' %}onclick="this.querySelector('input').click()"{% endif %}>
                  <div class="form-check form-switch mb-1" onclick="event.stopPropagation()">
                    <input class="form-check-input module-checkbox" type="checkbox" role="switch" name="{{ key }}" id="switch_{{ key }}" value="1" {% if is_checked %}checked{% endif %} {% if role.name == 'SUPER ADMIN' %}disabled{% endif %}>
                    <label class="form-check-label fw-bold small text-dark" for="switch_{{ key }}"><i class="fas {{ icon }} me-2 text-muted"></i>{{ name }}</label>
                  </div>
                  <div class="text-muted" style="font-size: 0.72rem; margin-left: 2.25rem;">{{ desc }}</div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>

        <!-- Actions -->
        <div class="card form-card p-4 mb-4">
          <div class="section-header-row">
            <div class="section-badge mb-0"><i class="fas fa-hand-pointer"></i>Actions & Droits spéciaux</div>
            {% if role.name != 'SUPER ADMIN' %}
              <span class="perm-counter-badge" id="action-count">0 / 0</span>
            {% endif %}
          </div>
          <div class="row g-3">
            {% set actions_list = [
              ('can_add', 'Créer / Ajouter', 'fa-plus-circle', 'Autoriser l\'ajout de nouveaux enregistrements'),
              ('can_edit', 'Modifier', 'fa-edit', 'Autoriser la modification des fiches'),
              ('can_delete', 'Supprimer', 'fa-trash', 'Autoriser l\'effacement définitif des données'),
              ('export_data', 'Exporter (CSV/PDF)', 'fa-file-export', 'Autoriser l\'export de données en fichier'),
              ('valider_demande', 'Valider des demandes', 'fa-check-double', 'Autoriser la validation et clôture des demandes')
            ] %}
            
            {% for key, name, icon, desc in actions_list %}
              {% set is_checked = role[key] or role.name == 'SUPER ADMIN' %}
              <div class="col-md-4 col-sm-6">
                <div class="perm-toggle-card {% if is_checked %}is-active{% endif %}" {% if role.name != 'SUPER ADMIN' %}onclick="this.querySelector('input').click()"{% endif %}>
                  <div class="form-check form-switch mb-1" onclick="event.stopPropagation()">
                    <input class="form-check-input action-checkbox" type="checkbox" role="switch" name="{{ key }}" id="switch_{{ key }}" value="1" {% if is_checked %}checked{% endif %} {% if role.name == 'SUPER ADMIN' %}disabled{% endif %}>
                    <label class="form-check-label fw-bold small text-dark" for="switch_{{ key }}"><i class="fas {{ icon }} me-2 text-muted"></i>{{ name }}</label>
                  </div>
                  <div class="text-muted" style="font-size: 0.72rem; margin-left: 2.25rem;">{{ desc }}</div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>

        <!-- Notifications par défaut -->
        <div class="card form-card p-4 mb-4">
          <div class="section-badge"><i class="fas fa-bell"></i>Notifications par défaut pour ce rôle</div>
          <p class="small text-muted mb-3">Les modifications de notifications par défaut s'appliqueront uniquement aux nouveaux utilisateurs (les comptes existants conservent leur configuration personnalisée).</p>
          <div class="row row-cols-1 row-cols-sm-2 g-3">
            {% set notifs_list = [
              ('nouvelle_intervention', 'Nouvelle intervention', 'fa-clipboard-list', 'Alerte à la création d\'une demande d\'intervention'),
              ('intervention_urgente', 'Intervention très urgente', 'fa-bolt', 'Alerte immédiate pour les interventions prioritaires'),
              ('intervention_traitee', 'Intervention traitée', 'fa-check-circle', 'Confirmation quand une intervention est clôturée'),
              ('stock_alerte', 'Alerte stock pièces', 'fa-exclamation-triangle', 'Notification quand le stock passe sous le seuil d\'alerte'),
              ('maintenance_preventive', 'Maintenance préventive', 'fa-calendar-check', 'Rappel des maintenances planifiées'),
              ('ordre_travail', 'Ordre de travail créé', 'fa-tools', 'Notification à la création d\'un ordre de travail')
            ] %}

            {% for key, name, icon, desc in notifs_list %}
              {% set is_checked = notif_config.get(key, '0') == '1' %}
              <div class="col">
                <div class="perm-toggle-card">
                  <div class="form-check form-switch mb-1">
                    <input class="form-check-input notif-checkbox" type="checkbox" role="switch" name="notif_{{ key }}" id="switch_notif_{{ key }}" value="1" {% if is_checked %}checked{% endif %} {% if role.name == 'SUPER ADMIN' %}disabled{% endif %}>
                    <label class="form-check-label fw-bold small text-dark" for="switch_notif_{{ key }}"><i class="fas {{ icon or 'fa-bell' }} me-2 text-muted"></i>{{ name }}</label>
                  </div>
                  <div class="text-muted" style="font-size: 0.72rem; margin-left: 2.25rem;">{{ desc }}</div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>

        <!-- Boutons de validation -->
        <div class="d-flex justify-content-between">
          <a href="{{ url_for('voir_role', id=role.id) }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-times me-1"></i>Annuler</a>
          <button type="submit" class="btn btn-primary px-4"><i class="fas fa-save me-2"></i>Enregistrer</button>
        </div>
      </div>
    </div>
  </form>
</div>
{% endblock %}

{% block scripts %}
<script>
function toggleCategory(className, state) {
  document.querySelectorAll('.' + className).forEach(cb => {
    if (!cb.disabled) {
      cb.checked = state;
      const card = cb.closest('.perm-toggle-card');
      if (card) card.classList.toggle('is-active', state);
    }
  });
  updateCounters();
}

function updateCounters() {
  const modules = document.querySelectorAll('.module-checkbox:not([disabled])');
  const modulesChecked = [...modules].filter(c => c.checked).length;
  const moduleEl = document.getElementById('module-count');
  if (moduleEl) moduleEl.textContent = `${modulesChecked} / ${modules.length}`;

  const actions = document.querySelectorAll('.action-checkbox:not([disabled])');
  const actionsChecked = [...actions].filter(c => c.checked).length;
  const actionEl = document.getElementById('action-count');
  if (actionEl) actionEl.textContent = `${actionsChecked} / ${actions.length}`;
}

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.module-checkbox, .action-checkbox').forEach(cb => {
    cb.addEventListener('change', () => {
      const card = cb.closest('.perm-toggle-card');
      if (card) card.classList.toggle('is-active', cb.checked);
      updateCounters();
    });
  });
  updateCounters();
});
</script>
{% endblock %}