{% extends 'backoffice/base.html' %}
{% load static %}

{% block title %}Mon Compte - ECOLUX Dashboard{% endblock %}

{% block content %}
<style>
.ecolux-card {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border: none;
    transition: all 0.3s ease;
}

.ecolux-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.ecolux-primary {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

.ecolux-secondary {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.has-text-ecolux-primary {
    color: #1e3a8a !important;
}

.has-text-ecolux-secondary {
    color: #059669 !important;
}

.is-ecolux-primary {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color: white;
    border: none;
}

.is-ecolux-secondary {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    border: none;
}

.avatar-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.profile-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.simple-input {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.simple-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.simple-button {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.simple-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
</style>

<section class="section is-main-section">
    <!-- En-tête simplifié -->
    <div class="profile-header">
        <div class="avatar-circle">
            {% if user_profile.image %}
                <img src="{{ user_profile.image.url }}" alt="Avatar" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;">
            {% else %}
                {{ user.first_name|first|default:user.username|first|upper }}
            {% endif %}
        </div>
        
        <h1 class="title is-3 has-text-ecolux-primary mb-2">
            {% if user.first_name or user.last_name %}
                {{ user.get_full_name }}
            {% else %}
                {{ user.username }}
            {% endif %}
        </h1>
        
        <p class="subtitle is-5 has-text-ecolux-secondary mb-3">
            {{ user_profile.type|default:"Utilisateur" }}
        </p>
        
        <div class="tags is-centered">
            <span class="tag is-ecolux-primary is-medium">
                <i class="fas fa-envelope mr-2"></i>
                {{ user.email }}
            </span>
            {% if user_profile.phone %}
            <span class="tag is-ecolux-secondary is-medium">
                <i class="fas fa-phone mr-2"></i>
                {{ user_profile.phone }}
            </span>
            {% endif %}
        </div>
    </div>

    <div class="columns">
        <!-- Informations principales -->
        <div class="column is-8">
            <div class="card ecolux-card">
                <header class="card-header ecolux-primary">
                    <p class="card-header-title has-text-white">
                        <i class="fas fa-user-edit mr-2"></i>
                        Mes Informations
                    </p>
                </header>
                
                <div class="card-content">
                    {% if messages %}
                        {% for message in messages %}
                        <div class="notification {% if message.tags == 'success' %}is-success{% elif message.tags == 'error' %}is-danger{% else %}is-info{% endif %} is-light mb-4">
                            <button class="delete" onclick="this.parentElement.remove()"></button>
                            {{ message }}
                        </div>
                        {% endfor %}
                    {% endif %}

                    <form method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <!-- Photo de profil -->
                        <div class="field mb-5">
                            <label class="label has-text-ecolux-primary">
                                <i class="fas fa-camera mr-2"></i>Photo de profil
                            </label>
                            <div class="file has-name is-fullwidth">
                                <label class="file-label">
                                    <input class="file-input" type="file" name="image" accept="image/*" onchange="updateFileName(this)">
                                    <span class="file-cta is-ecolux-secondary">
                                        <span class="file-icon">
                                            <i class="fas fa-upload"></i>
                                        </span>
                                        <span class="file-label">Choisir une photo</span>
                                    </span>
                                    <span class="file-name" id="fileName">
                                        {% if user_profile.image %}Photo actuelle{% else %}Aucune photo{% endif %}
                                    </span>
                                </label>
                            </div>
                        </div>

                        <!-- Nom et prénom -->
                        <div class="columns">
                            <div class="column">
                                <div class="field">
                                    <label class="label has-text-ecolux-primary">Prénom</label>
                                    <input class="input simple-input" type="text" name="first_name" value="{{ user.first_name }}" placeholder="Votre prénom">
                                </div>
                            </div>
                            <div class="column">
                                <div class="field">
                                    <label class="label has-text-ecolux-primary">Nom</label>
                                    <input class="input simple-input" type="text" name="last_name" value="{{ user.last_name }}" placeholder="Votre nom">
                                </div>
                            </div>
                        </div>

                        <!-- Email et téléphone -->
                        <div class="columns">
                            <div class="column">
                                <div class="field">
                                    <label class="label has-text-ecolux-primary">Email</label>
                                    <input class="input simple-input" type="email" name="email" value="{{ user.email }}" placeholder="votre@email.com">
                                </div>
                            </div>
                            <div class="column">
                                <div class="field">
                                    <label class="label has-text-ecolux-primary">Téléphone</label>
                                    <input class="input simple-input" type="tel" name="phone" value="{{ user_profile.phone }}" placeholder="+221 XX XXX XX XX">
                                </div>
                            </div>
                        </div>

                        <!-- Adresse -->
                        <div class="field">
                            <label class="label has-text-ecolux-primary">Adresse</label>
                            <textarea class="textarea simple-input" name="address" rows="3" placeholder="Votre adresse complète">{{ user_profile.address }}</textarea>
                        </div>

                        <!-- Boutons -->
                        <div class="field is-grouped mt-5">
                            <div class="control">
                                <button type="submit" class="button is-ecolux-primary simple-button">
                                    <i class="fas fa-save mr-2"></i>
                                    Sauvegarder
                                </button>
                            </div>
                            <div class="control">
                                <a href="{% url 'app:dashboard_home' %}" class="button is-light simple-button">
                                    <i class="fas fa-arrow-left mr-2"></i>
                                    Retour
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Informations complémentaires -->
        <div class="column is-4">
            <!-- Statistiques -->
            <div class="card ecolux-card mb-4">
                <header class="card-header ecolux-secondary">
                    <p class="card-header-title has-text-white">
                        <i class="fas fa-chart-bar mr-2"></i>
                        Mes Statistiques
                    </p>
                </header>
                <div class="card-content">
                    <div class="content">
                        <div class="has-text-centered mb-3">
                            <span class="tag is-ecolux-primary is-large">
                                <i class="fas fa-user mr-2"></i>
                                {{ user_profile.type|default:"Utilisateur" }}
                            </span>
                        </div>
                        
                        <div class="has-text-centered mb-3">
                            <span class="tag is-ecolux-secondary is-large">
                                <i class="fas fa-check-circle mr-2"></i>
                                Compte actif
                            </span>
                        </div>
                        
                        <hr>
                        
                        <p class="is-size-7 has-text-grey">
                            <i class="fas fa-calendar mr-1"></i>
                            Membre depuis {{ user.date_joined|date:"F Y" }}
                        </p>
                        
                        <p class="is-size-7 has-text-grey">
                            <i class="fas fa-clock mr-1"></i>
                            Dernière connexion {{ user.last_login|timesince }} ago
                        </p>
                    </div>
                </div>
            </div>

            <!-- Sécurité -->
            <div class="card ecolux-card">
                <header class="card-header" style="background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);">
                    <p class="card-header-title has-text-white">
                        <i class="fas fa-shield-alt mr-2"></i>
                        Sécurité
                    </p>
                </header>
                <div class="card-content">
                    <div class="content">
                        <p class="mb-4 is-size-7">
                            Protégez votre compte en changeant régulièrement votre mot de passe.
                        </p>
                        
                        <button class="button is-warning simple-button is-fullwidth" onclick="requestPasswordReset()">
                            <i class="fas fa-key mr-2"></i>
                            Changer le mot de passe
                        </button>
                        
                        <div class="notification is-info is-light mt-3 p-3">
                            <p class="is-size-7">
                                <i class="fas fa-info-circle mr-1"></i>
                                Un email sécurisé sera envoyé pour la réinitialisation.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
function updateFileName(input) {
    const fileName = document.getElementById('fileName');
    if (input.files && input.files.length > 0) {
        fileName.textContent = input.files[0].name;
    } else {
        fileName.textContent = '{% if user_profile.image %}Photo actuelle{% else %}Aucune photo{% endif %}';
    }
}

function requestPasswordReset() {
    if (confirm('Un email de réinitialisation sera envoyé à {{ user.email }}. Continuer ?')) {
        // Afficher une notification de succès
        const notification = document.createElement('div');
        notification.className = 'notification is-success is-light';
        notification.innerHTML = `
            <button class="delete" onclick="this.parentElement.remove()"></button>
            <i class="fas fa-check-circle mr-2"></i>
            <strong>Email envoyé !</strong> Vérifiez votre boîte de réception.
        `;
        
        document.querySelector('.card-content').appendChild(notification);
        
        // Auto-hide après 5 secondes
        setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
        }, 5000);
    }
}

// Auto-hide notifications
document.addEventListener('DOMContentLoaded', function() {
    const notifications = document.querySelectorAll('.notification');
    notifications.forEach(notification => {
        setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
        }, 5000);
    });
});
</script>
{% endblock %}