{% extends 'layout.html' %}
{% from 'macros.html' import common_styles %}
{% block title %}Gestion des Rôles{% endblock %}
{% block page_title %}Gestion des rôles{% endblock %}
{% block styles %}{{ common_styles() }}
<style>
.role-badge {
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div class="d-flex align-items-center gap-3">
      <div class="rounded-3 d-flex align-items-center justify-content-center"
           style="width:44px;height:44px;background:#ede9fe;color:#6366f1;font-size:1.1rem">
        <i class="fas fa-user-tag"></i>
      </div>
      <div>
        <h5 class="fw-bold mb-0">Rôles & Permissions</h5>
        <div class="text-muted small">{{ roles|length }} rôle(s) configuré(s)</div>
      </div>
    </div>
    <a href="{{ url_for('ajouter_role') }}" class="btn btn-primary btn-sm px-3">
      <i class="fas fa-plus me-2"></i>Nouveau rôle
    </a>
  </div>

  <!-- Table/List -->
  <div class="card border-0 shadow-sm" style="border-radius:12px">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table gtable mb-0">
          <thead>
            <tr>
              <th>Rôle</th>
              <th>Description</th>
              <th class="text-center">Utilisateurs</th>
              <th>Permissions</th>
              <th>Type</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for r in roles %}
            <tr>
              <td>
                <div class="d-flex align-items-center gap-2">
                  <div class="rounded-circle d-flex align-items-center justify-content-center text-white"
                       style="width:32px;height:32px;background:{{ r.color or '#6366f1' }};font-size:.9rem;flex-shrink:0">
                    <i class="fas {{ r.icon or 'fa-user-tag' }}"></i>
                  </div>
                  <span class="fw-semibold">{{ r.name }}</span>
                </div>
              </td>
              <td class="text-muted" style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                {{ r.description or '—' }}
              </td>
              <td class="text-center">
                <span class="badge rounded-pill bg-light text-dark fw-bold px-2.5 py-1.5" style="font-size:0.75rem; border:1px solid #e2e8f0;">
                  {{ r.user_count }}
                </span>
              </td>
              <td>
                {% if r.name == 'SUPER ADMIN' %}
                  {% set pct = 100 %}
                  {% set granted = 23 %}
                {% else %}
                  {% set total_p = 23 %}
                  {% set granted_ns = namespace(n=0) %}
                  {% for k in ['interventions','equipements','pieces','preventifs','ordres','fournisseurs','commandes','familles','operations','operateurs','qualifications','outillages','gammes','constats','rapports','utilisateurs','roles','activites','can_edit','can_add','can_delete','export_data','valider_demande'] %}
                    {% if r[k] %}{% set granted_ns.n = granted_ns.n + 1 %}{% endif %}
                  {% endfor %}
                  {% set granted = granted_ns.n %}
                  {% set pct = ((granted / total_p) * 100)|int %}
                {% endif %}
                <div style="min-width:100px">
                  <div class="d-flex justify-content-between mb-1" style="font-size:.7rem">
                    <span class="text-muted">{{ granted }}/23</span>
                    <span style="color:#6366f1;font-weight:700">{{ pct }}%</span>
                  </div>
                  <div style="background:#f1f5f9;border-radius:99px;height:5px;overflow:hidden">
                    <div style="width:{{ pct }}%;height:100%;border-radius:99px;background:linear-gradient(90deg,#6366f1,#8b5cf6)"></div>
                  </div>
                </div>
              </td>
              <td>
                {% if r.is_builtin %}
                  <span class="badge" style="background:#ede9fe;color:#6366f1;font-size:.7rem">Intégré</span>
                {% else %}
                  <span class="badge" style="background:#e0f2fe;color:#0369a1;font-size:.7rem">Personnalisé</span>
                {% endif %}
              </td>
              <td>
                <div class="d-flex gap-1">
                  <a href="{{ url_for('voir_role', id=r.id) }}"
                     style="background:#eff6ff;color:#2563eb;border:none;border-radius:6px;padding:4px 8px;font-size:.75rem" class="btn btn-xs" title="Voir"><i class="fas fa-eye"></i></a>
                  
                  <a href="{{ url_for('modifier_role', id=r.id) }}"
                     style="background:#f0fdf4;color:#16a34a;border:none;border-radius:6px;padding:4px 8px;font-size:.75rem" class="btn btn-xs" title="Modifier"><i class="fas fa-edit"></i></a>
                  
                  <a href="{{ url_for('copier_role', id=r.id) }}"
                     style="background:#fff7ed;color:#c2410c;border:none;border-radius:6px;padding:4px 8px;font-size:.75rem" class="btn btn-xs" title="Copier/Modèle"><i class="fas fa-copy"></i></a>
                  
                  {% if not r.is_builtin and r.name != 'SUPER ADMIN' %}
                    <button type="button"
                            style="background:#fde8e6;color:#b91c1c;border:none;border-radius:6px;padding:4px 8px;font-size:.75rem" 
                            class="btn btn-xs btn-delete-role" 
                            title="Supprimer"
                            data-id="{{ r.id }}"
                            data-name="{{ r.name }}"
                            data-users="{{ r.user_count }}">
                      <i class="fas fa-trash"></i>
                    </button>
                  {% endif %}
                </div>
              </td>
            </tr>
            {% else %}
            <tr>
              <td colspan="5" class="text-center py-5 text-muted">
                <i class="fas fa-user-tag fa-2x mb-2 d-block opacity-25"></i>
                <p class="mb-1">Aucun rôle trouvé dans la base de données.</p>
                <small>Veuillez exécuter la migration pour charger les rôles par défaut.</small>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal de confirmation de suppression -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow" style="border-radius:16px;">
      <div class="modal-header border-0 pb-0">
        <h5 class="modal-title fw-bold" id="deleteConfirmModalLabel">Supprimer le rôle</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="deleteRoleForm" method="post" action="">
        <div class="modal-body py-3">
          <p>Êtes-vous sûr de vouloir supprimer le rôle <strong id="deleteRoleName"></strong> ? Cette action est irréversible.</p>
          <div id="deleteWarningMsg" class="alert alert-danger d-none">
            Attention : ce rôle est actuellement attribué à <strong id="deleteRoleUsers"></strong> utilisateur(s).
            Vous devez d'abord les réassigner avant de pouvoir supprimer ce rôle.
          </div>
        </div>
        <div class="modal-footer border-0 pt-0">
          <button type="button" class="btn btn-light px-3" data-bs-dismiss="modal">Annuler</button>
          <button type="submit" id="confirmDeleteBtn" class="btn btn-danger px-3">Supprimer</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  const deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
  const deleteForm = document.getElementById('deleteRoleForm');
  const deleteRoleName = document.getElementById('deleteRoleName');
  const deleteRoleUsers = document.getElementById('deleteRoleUsers');
  const deleteWarningMsg = document.getElementById('deleteWarningMsg');
  const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');

  document.querySelectorAll('.btn-delete-role').forEach(button => {
    button.addEventListener('click', function() {
      const id = this.getAttribute('data-id');
      const name = this.getAttribute('data-name');
      const users = parseInt(this.getAttribute('data-users') || '0', 10);

      deleteRoleName.textContent = name;
      deleteForm.action = `/roles/${id}/supprimer`;

      if (users > 0) {
        deleteRoleUsers.textContent = users;
        deleteWarningMsg.classList.remove('d-none');
        confirmDeleteBtn.disabled = true;
      } else {
        deleteWarningMsg.classList.add('d-none');
        confirmDeleteBtn.disabled = false;
      }

      deleteModal.show();
    });
  });
});
</script>
{% endblock %}