{% extends 'layout.html' %}
{% from 'macros.html' import common_styles, info_row %}
{% block title %}{{ utilisateur.username }}{% endblock %}
{% block page_title %}Fiche utilisateur{% endblock %}
{% block styles %}{{ common_styles() }}
<style>
.role-pill { display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px; }
.notif-row { display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f1f5f9; }
.notif-row:last-child { border-bottom:none; }
.notif-icon { width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.78rem;flex-shrink:0; }
</style>
{% endblock %}

{% block content %}
{% set notif_config = {} %}
{% if utilisateur.notif_config %}
  {# Parser côté Python via le contexte #}
{% endif %}

<div class="container-fluid">

  <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
    <a href="{{ url_for('liste_utilisateurs') }}" class="back-btn"><i class="fas fa-arrow-left"></i>Retour</a>
    <h5 class="fw-bold mb-0">{{ utilisateur.username }}</h5>
    {% if utilisateur.connect == 'oui' %}
      <span class="badge" style="background:#d1fae5;color:#065f46">● Actif</span>
    {% else %}
      <span class="badge" style="background:#fee2e2;color:#991b1b">● Inactif</span>
    {% endif %}
    <div class="ms-auto d-flex gap-2 no-print">
      <a href="{{ url_for('modifier_utilisateur', id=utilisateur.id) }}" class="btn btn-sm btn-primary">
        <i class="fas fa-edit me-1"></i>Modifier
      </a>
      {% if utilisateur.id != session.user_id %}
      <a href="{{ url_for('supprimer_utilisateur', id=utilisateur.id) }}" class="btn btn-sm btn-danger"
         onclick="return confirm('Supprimer cet utilisateur ?')">
        <i class="fas fa-trash me-1"></i>Supprimer
      </a>
      {% endif %}
    </div>
  </div>

  <div class="row g-4">

    <!-- Infos compte -->
    <div class="col-lg-5">
      <div class="card border-0 shadow-sm h-100" style="border-radius:16px">

        <!-- Header coloré -->
        <div style="background:linear-gradient(135deg,#0f1629,#1e1b4b);border-radius:16px 16px 0 0;padding:24px">
          <div class="d-flex align-items-center gap-3">
            <div style="width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#6366f1,#8b5cf6);
                        display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;color:#fff;
                        box-shadow:0 4px 16px rgba(99,102,241,.5)">
              {{ utilisateur.username[0]|upper }}
            </div>
            <div>
              <div class="fw-bold text-white fs-5">{{ utilisateur.username }}</div>
              <div style="font-size:.7rem;color:#a5b4fc;text-transform:uppercase;letter-spacing:1px">{{ utilisateur.type }}</div>
            </div>
          </div>
        </div>

        <div class="card-body px-4 py-3">
          {{ info_row('ID', '#' ~ utilisateur.id, 'fa-hashtag') }}
          {{ info_row("Nom d'utilisateur", utilisateur.username, 'fa-user') }}
          {{ info_row('Rôle', utilisateur.type, 'fa-shield-alt') }}
          <div class="d-flex align-items-start py-2">
            <div class="text-muted small fw-semibold" style="min-width:160px">
              <i class="fas fa-toggle-on me-2 text-primary" style="width:14px"></i>Statut
            </div>
            <div>
              {% if utilisateur.connect == 'oui' %}
                <span class="badge" style="background:#d1fae5;color:#065f46">✅ Actif</span>
              {% else %}
                <span class="badge" style="background:#fee2e2;color:#991b1b">❌ Inactif</span>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Notifications configurées -->
    <div class="col-lg-7">
      <div class="card border-0 shadow-sm h-100" style="border-radius:16px">
        <div class="card-header bg-white d-flex justify-content-between align-items-center"
             style="border-radius:16px 16px 0 0;border-bottom:1px solid #f1f5f9;padding:14px 20px">
          <span class="fw-semibold"><i class="fas fa-bell text-primary me-2"></i>Notifications configurées</span>
          <a href="{{ url_for('modifier_utilisateur', id=utilisateur.id) }}"
             class="btn btn-xs btn-outline-primary py-0 px-2" style="font-size:.72rem;border-radius:6px">
            <i class="fas fa-edit me-1"></i>Modifier
          </a>
        </div>
        <div class="card-body px-4 py-3">

          {% set nc = utilisateur.notif_config_parsed if utilisateur.notif_config_parsed else {} %}

          {% set notifs = [
            ('nouvelle_intervention', 'fa-clipboard-list', '#eff6ff', '#2563eb', 'Nouvelle intervention'),
            ('intervention_urgente',  'fa-bolt',           '#fef3c7', '#d97706', 'Intervention très urgente'),
            ('intervention_traitee', 'fa-check-circle',   '#d1fae5', '#059669', 'Intervention traitée'),
            ('stock_alerte',         'fa-exclamation-triangle','#fee2e2','#dc2626','Alerte stock pièces'),
            ('maintenance_preventive','fa-calendar-check', '#ede9fe', '#7c3aed', 'Maintenance préventive'),
            ('ordre_travail',        'fa-tools',           '#f0fdf4', '#16a34a', 'Ordre de travail'),
          ] %}

          {% for key, icon, bg, color, title in notifs %}
          {% set active = nc.get(key, '1' if key in ['nouvelle_intervention','intervention_urgente'] else '0') == '1' %}
          <div class="notif-row">
            <div class="d-flex align-items-center gap-3">
              <div class="notif-icon" style="background:{{ bg }};color:{{ color }}">
                <i class="fas {{ icon }}"></i>
              </div>
              <span class="fw-semibold small">{{ title }}</span>
            </div>
            {% if active %}
              <span class="badge" style="background:#d1fae5;color:#065f46;font-size:.7rem">
                <i class="fas fa-check me-1"></i>Activée
              </span>
            {% else %}
              <span class="badge" style="background:#f1f5f9;color:#94a3b8;font-size:.7rem">
                <i class="fas fa-times me-1"></i>Désactivée
              </span>
            {% endif %}
          </div>
          {% endfor %}

        </div>
      </div>
    </div>

  </div>
</div>
{% endblock %}