{% extends 'layout.html' %}

{% block title %}Mon Profil{% endblock %}
{% block page_title %}Mon Profil{% endblock %}

{% block styles %}
<style>
    /* ── Avatar ── */
    .avatar-xl {
        width: 90px; height: 90px;
        border-radius: 50%;
        background: linear-gradient(135deg, #2563eb, #7c3aed);
        display: flex; align-items: center; justify-content: center;
        font-size: 2.2rem; font-weight: 700; color: #fff;
        box-shadow: 0 4px 16px rgba(37,99,235,.35);
        flex-shrink: 0;
    }

    /* ── Role badge ── */
    .role-badge {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 14px; border-radius: 20px;
        font-size: .78rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .5px;
    }
    .role-SUPER-ADMIN  { background:#fde8e6; color:#b91c1c; }
    .role-DIRECTION    { background:#dce8ff; color:#1d4ed8; }
    .role-CHEF-DEPARTEMENT { background:#e0e7ff; color:#4338ca; }
    .role-STM          { background:#d1fae5; color:#065f46; }
    .role-CEM          { background:#d1fae5; color:#065f46; }
    .role-SIM          { background:#d1fae5; color:#065f46; }
    .role-AQ           { background:#fef3c7; color:#92400e; }
    .role-PRODUCTION   { background:#f0fdf4; color:#166534; }
    .role-LABORATOIRE  { background:#f0f9ff; color:#0369a1; }
    .role-UTILITE      { background:#fdf4ff; color:#7e22ce; }
    .role-default      { background:#f1f5f9; color:#475569; }

    /* ── Info rows ── */
    .info-row {
        display: flex; align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #f1f5f9;
        gap: 12px;
    }
    .info-row:last-child { border-bottom: none; }
    .info-icon {
        width: 34px; height: 34px; border-radius: 8px;
        background: #f1f5f9;
        display: flex; align-items: center; justify-content: center;
        color: #64748b; font-size: .85rem; flex-shrink: 0;
    }
    .info-label { font-size: .75rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
    .info-value { font-size: .92rem; color: #1e293b; font-weight: 500; }

    /* ── Stat cards ── */
    .stat-mini {
        background: #f8fafc; border-radius: 12px;
        padding: 14px 16px; text-align: center;
        border: 1px solid #e2e8f0;
        transition: transform .2s, box-shadow .2s;
    }
    .stat-mini:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
    .stat-mini .num { font-size: 1.6rem; font-weight: 700; line-height: 1; }
    .stat-mini .lbl { font-size: .72rem; color: #94a3b8; margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }

    /* ── Password form ── */
    .pwd-input-wrap { position: relative; }
    .pwd-toggle {
        position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
        background: none; border: none; color: #94a3b8; cursor: pointer; padding: 0;
        font-size: .9rem;
    }
    .pwd-toggle:hover { color: #2563eb; }
    .strength-bar { height: 4px; border-radius: 2px; transition: all .3s; margin-top: 6px; }

    /* ── Quick actions ── */
    .quick-action {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px; border-radius: 10px;
        border: 1px solid #e2e8f0; background: #fff;
        text-decoration: none; color: #1e293b;
        transition: all .2s;
        margin-bottom: 8px;
    }
    .quick-action:hover { border-color: #2563eb; background: #eff6ff; color: #2563eb; text-decoration: none; }
    .quick-action .qa-icon {
        width: 36px; height: 36px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        font-size: .9rem; flex-shrink: 0;
    }
    .quick-action .qa-label { font-size: .88rem; font-weight: 500; }
    .quick-action .qa-arrow { margin-left: auto; color: #cbd5e1; font-size: .75rem; }

    /* ── Status dot ── */
    .status-dot {
        width: 10px; height: 10px; border-radius: 50%;
        display: inline-block; margin-right: 6px;
    }
    .status-dot.active { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
    .status-dot.inactive { background: #ef4444; }

    /* ── Section title ── */
    .section-title {
        font-size: .72rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .8px; color: #94a3b8; margin-bottom: 12px;
    }
</style>
{% endblock %}

{% block content %}
{% set role = user.type if user.type else 'N/A' %}
{% set role_class = 'role-' + role.replace(' ','-') if role in ['SUPER ADMIN','DIRECTION','CHEF DEPARTEMENT','STM','CEM','SIM','AQ','PRODUCTION','LABORATOIRE','UTILITE'] else 'role-default' %}

<div class="container-fluid">
<div class="row g-4 justify-content-center">

    <!-- ══ COLONNE GAUCHE ══ -->
    <div class="col-xl-4 col-lg-5">

        <!-- Carte identité -->
        <div class="card border-0 shadow-sm mb-4" style="border-radius:16px">
            <div class="card-body p-4">
                <div class="d-flex align-items-center gap-3 mb-4">
                    <div class="avatar-xl">{{ user.username[0]|upper }}</div>
                    <div>
                        <div class="fw-bold fs-5 lh-1 mb-1">{{ user.username }}</div>
                        <span class="role-badge {{ role_class }}">
                            <i class="fas fa-shield-alt"></i>{{ role }}
                        </span>
                        <div class="mt-2 small">
                            <span class="status-dot {{ 'active' if user.connect == 'oui' else 'inactive' }}"></span>
                            <span class="text-muted">{{ 'Compte actif' if user.connect == 'oui' else 'Compte inactif' }}</span>
                        </div>
                    </div>
                </div>

                <div class="section-title">Informations du compte</div>
                <div class="info-row">
                    <div class="info-icon"><i class="fas fa-user"></i></div>
                    <div>
                        <div class="info-label">Nom d'utilisateur</div>
                        <div class="info-value">{{ user.username }}</div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-icon"><i class="fas fa-id-badge"></i></div>
                    <div>
                        <div class="info-label">Rôle</div>
                        <div class="info-value">{{ role }}</div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-icon"><i class="fas fa-toggle-on"></i></div>
                    <div>
                        <div class="info-label">Statut</div>
                        <div class="info-value">
                            {% if user.connect == 'oui' %}
                                <span class="badge" style="background:#d1fae5;color:#065f46">Actif</span>
                            {% else %}
                                <span class="badge" style="background:#fde8e6;color:#b91c1c">Inactif</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-icon"><i class="fas fa-hashtag"></i></div>
                    <div>
                        <div class="info-label">ID utilisateur</div>
                        <div class="info-value">#{{ user.id }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistiques -->
        <div class="card border-0 shadow-sm mb-4" style="border-radius:16px">
            <div class="card-body p-4">
                <div class="section-title">Statistiques</div>
                <div class="row g-2">
                    <div class="col-6">
                        <div class="stat-mini">
                            <div class="num text-primary" id="stat-created">—</div>
                            <div class="lbl">Interventions créées</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-mini">
                            <div class="num text-success" id="stat-done">—</div>
                            <div class="lbl">Terminées</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-mini">
                            <div class="num text-warning" id="stat-pending">—</div>
                            <div class="lbl">En cours</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-mini">
                            <div class="num text-danger" id="stat-cancelled">—</div>
                            <div class="lbl">Annulées</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions rapides -->
        <div class="card border-0 shadow-sm" style="border-radius:16px">
            <div class="card-body p-4">
                <div class="section-title">Actions rapides</div>

                <a href="{{ url_for('liste_interventions') }}" class="quick-action">
                    <div class="qa-icon" style="background:#eff6ff;color:#2563eb"><i class="fas fa-clipboard-list"></i></div>
                    <span class="qa-label">Mes interventions</span>
                    <i class="fas fa-chevron-right qa-arrow"></i>
                </a>

                {% if session.user_role not in ['PRODUCTION','LABORATOIRE','UTILITE'] %}
                <a href="{{ url_for('liste_equipements') }}" class="quick-action">
                    <div class="qa-icon" style="background:#f0fdf4;color:#16a34a"><i class="fas fa-industry"></i></div>
                    <span class="qa-label">Équipements</span>
                    <i class="fas fa-chevron-right qa-arrow"></i>
                </a>
                {% endif %}

                {% if session.user_role in ['SUPER ADMIN','DIRECTION','CHEF DEPARTEMENT'] %}
                <a href="{{ url_for('liste_utilisateurs') }}" class="quick-action">
                    <div class="qa-icon" style="background:#fdf4ff;color:#7e22ce"><i class="fas fa-users-cog"></i></div>
                    <span class="qa-label">Gestion utilisateurs</span>
                    <i class="fas fa-chevron-right qa-arrow"></i>
                </a>
                {% endif %}

                <a href="{{ url_for('dashboard') }}" class="quick-action">
                    <div class="qa-icon" style="background:#fff7ed;color:#ea580c"><i class="fas fa-tachometer-alt"></i></div>
                    <span class="qa-label">Tableau de bord</span>
                    <i class="fas fa-chevron-right qa-arrow"></i>
                </a>
            </div>
        </div>

    </div>

    <!-- ══ COLONNE DROITE ══ -->
    <div class="col-xl-8 col-lg-7">

        <!-- Changer le mot de passe -->
        <div class="card border-0 shadow-sm" style="border-radius:16px">
            <div class="card-header bg-white px-4 pt-4 pb-0 border-0">
                <div class="section-title mb-0">
                    <i class="fas fa-lock me-2"></i>Changer le mot de passe
                </div>
            </div>
            <div class="card-body p-4">
                <form action="{{ url_for('parametres_utilisateur') }}" method="POST" id="pwdForm">
                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label fw-semibold">Mot de passe actuel</label>
                            <div class="pwd-input-wrap">
                                <input type="password" class="form-control" name="current_password"
                                       id="currentPwd" placeholder="••••••••" autocomplete="current-password">
                                <button type="button" class="pwd-toggle" onclick="togglePwd('currentPwd',this)">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Nouveau mot de passe</label>
                            <div class="pwd-input-wrap">
                                <input type="password" class="form-control" name="new_password"
                                       id="newPwd" placeholder="••••••••" autocomplete="new-password"
                                       oninput="checkStrength(this.value)">
                                <button type="button" class="pwd-toggle" onclick="togglePwd('newPwd',this)">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <!-- Barre de force -->
                            <div class="strength-bar mt-1" id="strengthBar" style="background:#e2e8f0;width:0%"></div>
                            <div class="d-flex justify-content-between mt-1">
                                <small id="strengthLabel" class="text-muted">Minimum 6 caractères</small>
                                <small id="strengthText" class="fw-semibold"></small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Confirmer le mot de passe</label>
                            <div class="pwd-input-wrap">
                                <input type="password" class="form-control" name="confirm_password"
                                       id="confirmPwd" placeholder="••••••••" autocomplete="new-password"
                                       oninput="checkMatch()">
                                <button type="button" class="pwd-toggle" onclick="togglePwd('confirmPwd',this)">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <small id="matchMsg" class="mt-1 d-block"></small>
                        </div>

                        <!-- Règles -->
                        <div class="col-12">
                            <div class="p-3 rounded-3" style="background:#f8fafc;border:1px solid #e2e8f0">
                                <div class="small fw-semibold text-muted mb-2">Règles du mot de passe :</div>
                                <div class="row g-1">
                                    <div class="col-sm-6"><small id="r-len"  class="rule"><i class="fas fa-circle me-1" style="font-size:.5rem"></i>Au moins 6 caractères</small></div>
                                    <div class="col-sm-6"><small id="r-upper" class="rule"><i class="fas fa-circle me-1" style="font-size:.5rem"></i>Une majuscule</small></div>
                                    <div class="col-sm-6"><small id="r-num"  class="rule"><i class="fas fa-circle me-1" style="font-size:.5rem"></i>Un chiffre</small></div>
                                    <div class="col-sm-6"><small id="r-spec" class="rule"><i class="fas fa-circle me-1" style="font-size:.5rem"></i>Un caractère spécial</small></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 d-flex justify-content-end gap-2 pt-2">
                            <button type="reset" class="btn btn-outline-secondary" onclick="resetForm()">
                                <i class="fas fa-undo me-1"></i>Annuler
                            </button>
                            <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
                                <i class="fas fa-save me-1"></i>Enregistrer
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

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

{% block scripts %}
<script>
/* ── Toggle visibilité mot de passe ── */
function togglePwd(id, btn) {
    const inp = document.getElementById(id);
    const icon = btn.querySelector('i');
    if (inp.type === 'password') {
        inp.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        inp.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}

/* ── Force du mot de passe ── */
function checkStrength(val) {
    const bar   = document.getElementById('strengthBar');
    const text  = document.getElementById('strengthText');
    const rules = {
        'r-len':   val.length >= 6,
        'r-upper': /[A-Z]/.test(val),
        'r-num':   /[0-9]/.test(val),
        'r-spec':  /[^A-Za-z0-9]/.test(val)
    };
    let score = Object.values(rules).filter(Boolean).length;

    // Colorier les règles
    Object.entries(rules).forEach(([id, ok]) => {
        const el = document.getElementById(id);
        el.style.color = ok ? '#16a34a' : '#94a3b8';
    });

    const levels = [
        { pct: '0%',   color: '#e2e8f0', label: '',          cls: '' },
        { pct: '25%',  color: '#ef4444', label: 'Faible',    cls: 'text-danger' },
        { pct: '50%',  color: '#f97316', label: 'Moyen',     cls: 'text-warning' },
        { pct: '75%',  color: '#eab308', label: 'Bien',      cls: 'text-warning' },
        { pct: '100%', color: '#22c55e', label: 'Fort',      cls: 'text-success' }
    ];
    const lvl = val.length === 0 ? levels[0] : levels[score];
    bar.style.width = lvl.pct;
    bar.style.background = lvl.color;
    text.textContent = lvl.label;
    text.className = 'fw-semibold ' + lvl.cls;

    checkSubmit();
}

/* ── Correspondance ── */
function checkMatch() {
    const np = document.getElementById('newPwd').value;
    const cp = document.getElementById('confirmPwd').value;
    const msg = document.getElementById('matchMsg');
    if (!cp) { msg.textContent = ''; return; }
    if (np === cp) {
        msg.innerHTML = '<span class="text-success"><i class="fas fa-check me-1"></i>Les mots de passe correspondent</span>';
    } else {
        msg.innerHTML = '<span class="text-danger"><i class="fas fa-times me-1"></i>Les mots de passe ne correspondent pas</span>';
    }
    checkSubmit();
}

function checkSubmit() {
    const cur = document.getElementById('currentPwd').value;
    const np  = document.getElementById('newPwd').value;
    const cp  = document.getElementById('confirmPwd').value;
    document.getElementById('submitBtn').disabled = !(cur && np.length >= 6 && np === cp);
}

document.getElementById('currentPwd').addEventListener('input', checkSubmit);

function resetForm() {
    document.getElementById('strengthBar').style.width = '0%';
    document.getElementById('strengthText').textContent = '';
    document.getElementById('matchMsg').textContent = '';
    document.getElementById('submitBtn').disabled = true;
    ['r-len','r-upper','r-num','r-spec'].forEach(id => {
        document.getElementById(id).style.color = '';
    });
}

/* ── Statistiques dynamiques ── */
fetch('/api/user_stats')
    .then(r => r.ok ? r.json() : null)
    .then(data => {
        if (!data) return;
        document.getElementById('stat-created').textContent   = data.created   ?? 0;
        document.getElementById('stat-done').textContent      = data.done      ?? 0;
        document.getElementById('stat-pending').textContent   = data.pending   ?? 0;
        document.getElementById('stat-cancelled').textContent = data.cancelled ?? 0;
    })
    .catch(() => {
        ['stat-created','stat-done','stat-pending','stat-cancelled']
            .forEach(id => document.getElementById(id).textContent = '0');
    });
</script>
{% endblock %}