{% extends 'layout.html' %}
{% from 'macros.html' import common_styles %}
{% block title %}Rôle — {{ role.name }}{% endblock %}
{% block page_title %}Détails du 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-status-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    transition: all .2s;
}
.perm-status-card.active {
    background: #fff;
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px rgba(99,102,241,.07);
}
.status-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.status-indicator.allowed {
    background: #d1fae5;
    color: #065f46;
}
.status-indicator.denied {
    background: #f1f5f9;
    color: #94a3b8;
}
.score-bar-wrap { background:#f1f5f9; border-radius:99px; height:8px; overflow:hidden; }
.score-bar-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#6366f1,#8b5cf6); transition:width .5s ease; }
</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">
      <a href="{{ url_for('liste_roles') }}" class="back-btn">
        <i class="fas fa-arrow-left"></i>Retour
      </a>
      <div>
        <h5 class="fw-bold mb-0">Détails du Rôle</h5>
        <div class="text-muted small">Visualisation des droits d'accès</div>
      </div>
    </div>
    
    <div class="d-flex gap-2">
      <a href="{{ url_for('ajouter_role', source_id=role.id) }}" class="btn btn-outline-primary btn-sm px-3">
        <i class="fas fa-copy me-2"></i>Copier pour nouveau
      </a>
      <a href="{{ url_for('modifier_role', id=role.id) }}" class="btn btn-primary btn-sm px-3">
        <i class="fas fa-edit me-2"></i>Modifier
      </a>
    </div>
  </div>

  <div class="row g-4">
    <!-- Colonne Gauche: Aperçu -->
    <div class="col-lg-4">
      <div class="card form-card p-4 text-center mb-4" style="background: linear-gradient(135deg, #0f1629, #1e1b4b); color: #fff;">
        <div class="mx-auto mb-3 rounded-circle d-flex align-items-center justify-content-center text-white"
             style="width:80px;height:80px;background:{{ role.color or '#6366f1' }};font-size:2.2rem;box-shadow: 0 4px 20px rgba(0,0,0,0.3);">
          <i class="fas {{ role.icon or 'fa-user-tag' }}"></i>
        </div>
        <h4 class="fw-bold text-white mb-1">{{ role.name }}</h4>
        <div class="mb-3">
          {% if role.is_builtin %}
            <span class="badge" style="background:rgba(99,102,241,.2);color:#a5b4fc;border:1px solid rgba(99,102,241,.3)">Rôle intégré</span>
          {% else %}
            <span class="badge" style="background:rgba(14,165,233,.2);color:#7dd3fc;border:1px solid rgba(14,165,233,.3)">Rôle personnalisé</span>
          {% endif %}
        </div>
        <p class="small opacity-75 mb-0 px-2" style="min-height: 40px;">{{ role.description or 'Aucune description fournie.' }}</p>
      </div>

      <div class="card form-card p-4 mt-3">
        <div class="section-badge"><i class="fas fa-users"></i>Membres</div>
        <div class="d-flex align-items-center justify-content-between">
          <span class="text-muted small"><i class="fas fa-user-friends me-1"></i>Comptes associés :</span>
          <span class="badge rounded-pill bg-light text-dark border fw-bold px-3" style="font-size:0.85rem;">
            {{ user_count }}
          </span>
        </div>
      </div>

      <div class="card form-card p-4 mt-3">
        <div class="section-badge"><i class="fas fa-chart-pie"></i>Score de permissions</div>
        {% if role.name == 'SUPER ADMIN' %}
          {% set total_perms = 23 %}
          {% set granted_perms = 23 %}
        {% else %}
          {% set total_perms = 23 %}
          {% set granted_perms = 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 role[k] %}{% set granted_perms.n = granted_perms.n + 1 %}{% endif %}
          {% endfor %}
          {% set granted_perms = granted_perms.n %}
        {% endif %}
        {% set pct = ((granted_perms / total_perms) * 100)|int %}
        <div class="d-flex justify-content-between mb-2">
          <span class="small text-muted">Permissions accordées</span>
          <span class="fw-bold" style="color:#6366f1">{{ granted_perms }} / {{ total_perms }}</span>
        </div>
        <div class="score-bar-wrap">
          <div class="score-bar-fill" style="width:{{ pct }}%"></div>
        </div>
        <div class="text-end mt-1" style="font-size:.72rem;color:#94a3b8">{{ pct }}% d'accès</div>
      </div>
    </div>

    <!-- Colonne Droite: Permissions détaillées -->
    <div class="col-lg-8">
      <!-- Modules -->
      <div class="card form-card p-4 mb-4">
        <div class="section-badge"><i class="fas fa-cubes"></i>Accès aux Modules (Pages)</div>
        
        {% set modules_list = [
          ('interventions', 'Interventions', 'fa-clipboard-list'),
          ('equipements', 'Équipements', 'fa-industry'),
          ('pieces', 'Pièces de rechange', 'fa-box'),
          ('preventifs', 'Préventifs', 'fa-calendar-alt'),
          ('ordres', 'Ordres de travail', 'fa-tools'),
          ('fournisseurs', 'Fournisseurs', 'fa-truck'),
          ('commandes', 'Commandes', 'fa-shopping-cart'),
          ('familles', 'Familles', 'fa-tags'),
          ('operations', 'Opérations', 'fa-tasks'),
          ('operateurs', 'Opérateurs', 'fa-users'),
          ('qualifications', 'Qualifications', 'fa-award'),
          ('outillages', 'Outillages', 'fa-toolbox'),
          ('gammes', 'Gammes', 'fa-route'),
          ('constats', 'Constats', 'fa-file-signature'),
          ('rapports', 'Rapports', 'fa-file-medical'),
          ('utilisateurs', 'Utilisateurs (Admin)', 'fa-users-cog'),
          ('roles', 'Rôles & Permissions', 'fa-user-shield'),
          ('activites', 'Journal d\'activités', 'fa-history')
        ] %}

        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
          {% for key, name, icon in modules_list %}
            {% set allowed = role[key] or role.name == 'SUPER ADMIN' %}
            <div class="col">
              <div class="perm-status-card {% if allowed %}active{% endif %}">
                <span class="small fw-semibold text-dark"><i class="fas {{ icon }} me-2 text-muted"></i>{{ name }}</span>
                {% if allowed %}
                  <span class="status-indicator allowed" title="Autorisé"><i class="fas fa-check"></i></span>
                {% else %}
                  <span class="status-indicator denied" title="Refusé"><i class="fas fa-times"></i></span>
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>

      <!-- Actions -->
      <div class="card form-card p-4 mb-4">
        <div class="section-badge"><i class="fas fa-hand-pointer"></i>Actions CRUD autorisées</div>
        <div class="row g-3">
          {% set actions_list = [
            ('can_add', 'Créer (Ajouter)', 'fa-plus-circle'),
            ('can_edit', 'Modifier (Mise à jour)', 'fa-edit'),
            ('can_delete', 'Supprimer (Effacement)', 'fa-trash'),
            ('export_data', 'Exporter CSV/PDF', 'fa-file-export'),
            ('valider_demande', 'Valider des demandes', 'fa-check-double')
          ] %}
          
          {% for key, name, icon in actions_list %}
            {% set allowed = role[key] or role.name == 'SUPER ADMIN' %}
            <div class="col-md-4">
              <div class="perm-status-card {% if allowed %}active{% endif %}">
                <span class="small fw-semibold text-dark"><i class="fas {{ icon }} me-2 text-muted"></i>{{ name }}</span>
                {% if allowed %}
                  <span class="status-indicator allowed" title="Autorisé"><i class="fas fa-check"></i></span>
                {% else %}
                  <span class="status-indicator denied" title="Refusé"><i class="fas fa-times"></i></span>
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>

      <!-- Notifications -->
      <div class="card form-card p-4 mb-4">
        <div class="section-badge"><i class="fas fa-bell"></i>Notifications par défaut</div>
        <div class="row row-cols-1 row-cols-sm-2 g-3">
          {% set notifs_list = [
            ('nouvelle_intervention', 'Nouvelle intervention', 'fa-clipboard-list'),
            ('intervention_urgente', 'Intervention très urgente', 'fa-bolt'),
            ('intervention_traitee', 'Intervention traitée', 'fa-check-circle'),
            ('stock_alerte', 'Alerte stock pièces', 'fa-exclamation-triangle'),
            ('maintenance_preventive', 'Maintenance préventive', 'fa-calendar-check'),
            ('ordre_travail', 'Ordre de travail créé', 'fa-tools')
          ] %}

          {% for key, name, icon in notifs_list %}
            {% set allowed = notif_config.get(key, '0') == '1' or role.name == 'SUPER ADMIN' %}
            <div class="col">
              <div class="perm-status-card {% if allowed %}active{% endif %}">
                <span class="small fw-semibold text-dark"><i class="fas {{ icon }} me-2 text-muted"></i>{{ name }}</span>
                {% if allowed %}
                  <span class="status-indicator allowed" title="Activée"><i class="fas fa-check"></i></span>
                {% else %}
                  <span class="status-indicator denied" title="Désactivée"><i class="fas fa-times"></i></span>
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}