{% extends 'layout.html' %}
{% from 'macros.html' import common_styles %}
{% block title %}Créer un Rôle{% endblock %}
{% block page_title %}Nouveau 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;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="d-flex align-items-center gap-3 mb-4">
    <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">Créer un Rôle</h5>
      <div class="text-muted small">Ajouter un nouveau profil d'accès</div>
    </div>
  </div>

  <form method="post" action="{{ url_for('ajouter_role') }}">
    <div class="row g-4">
      
      <!-- Colonne Gauche: Informations Générales & Modèle -->
      <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" required placeholder="Ex: Chef d'équipe" maxlength="50">
          </div>
          
          <div class="mb-3">
            <label class="form-label fw-semibold">Description</label>
            <textarea class="form-control" name="description" rows="3" placeholder="Description courte des responsabilités..."></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="#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">Par défaut</option>
                <option value="fa-user-shield">Bouclier (Admin)</option>
                <option value="fa-user-cog">Engrenage (Technique)</option>
                <option value="fa-user-tie">Cravate (Direction)</option>
                <option value="fa-tools">Outils</option>
                <option value="fa-wrench">Clé</option>
                <option value="fa-industry">Industrie</option>
                <option value="fa-flask">Laboratoire</option>
                <option value="fa-clipboard-check">Validation</option>
                <option value="fa-leaf">Énergie/Utilités</option>
              </select>
            </div>
          </div>
        </div>

        <div class="card form-card p-4">
          <div class="section-badge"><i class="fas fa-copy"></i>Modèle (Template)</div>
          <p class="small text-muted mb-3">Pré-remplir les cases en copiant la configuration d'un rôle existant.</p>
          <div class="d-flex gap-2">
            <select class="form-select form-select-sm" id="template_select">
              <option value="">Sélectionnez un rôle modèle...</option>
              {% for r in all_roles %}
                <option value="{{ r.id }}" {% if source_role and source_role.id == r.id %}selected{% endif %}>{{ r.name }}</option>
              {% endfor %}
            </select>
            <button type="button" class="btn btn-outline-primary btn-sm px-3" onclick="applyTemplate()">Copier</button>
          </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>
            <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>
          </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 = source_role and source_role[key] %}
              <div class="col">
                <div class="perm-toggle-card {% if is_checked %}is-active{% endif %}" onclick="this.querySelector('input').click()">
                  <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 %}>
                    <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>
            <span class="perm-counter-badge" id="action-count">0 / 0</span>
          </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 = source_role and source_role[key] %}
              <div class="col-md-4 col-sm-6">
                <div class="perm-toggle-card {% if is_checked %}is-active{% endif %}" onclick="this.querySelector('input').click()">
                  <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 %}>
                    <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 nouveaux utilisateurs créés avec ce rôle hériteront automatiquement de cette configuration de notifications.</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 source_notifs = source_role.notif_defaults_parsed if source_role and source_role.notif_defaults_parsed else {} %}
              {% set is_checked = source_notifs.get(key, '0') == '1' if source_role else (key in ['nouvelle_intervention', 'intervention_urgente']) %}
              <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 %}>
                    <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('liste_roles') }}" 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 => {
    cb.checked = state;
    // Sync card highlight
    const card = cb.closest('.perm-toggle-card');
    if (card) card.classList.toggle('is-active', state);
  });
  updateCounters();
}

function updateCounters() {
  const modules = document.querySelectorAll('.module-checkbox');
  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');
  const actionsChecked = [...actions].filter(c => c.checked).length;
  const actionEl = document.getElementById('action-count');
  if (actionEl) actionEl.textContent = `${actionsChecked} / ${actions.length}`;
}

function applyTemplate() {
  const select = document.getElementById('template_select');
  const sourceId = select.value;
  if (sourceId) {
    window.location.href = `{{ url_for('ajouter_role') }}?source_id=${sourceId}`;
  } else {
    window.location.href = `{{ url_for('ajouter_role') }}`;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  // Sync card highlights on load
  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 %}