{% extends "base.html" %}
{% load static %}

{% block title %}Mi Perfil - DG Perfumance{% endblock %}

{% block extra_css %}
<style>
    .perfil-container {
        max-width: 900px;
        margin: 40px auto;
        padding: 20px;
    }

    .perfil-header {
        background: linear-gradient(135deg, #8B4789 0%, #6b3569 100%);
        color: white;
        padding: 40px;
        border-radius: 12px;
        margin-bottom: 30px;
        text-align: center;
    }

    .perfil-header h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .perfil-header p {
        font-size: 1.1rem;
        opacity: 0.9;
    }

    .tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 30px;
        border-bottom: 2px solid #e0e0e0;
    }

    .tab-button {
        padding: 12px 24px;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 600;
        color: #999;
        border-bottom: 3px solid transparent;
        transition: all 0.3s ease;
    }

    .tab-button.active {
        color: #8B4789;
        border-bottom-color: #8B4789;
    }

    .tab-button:hover {
        color: #8B4789;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    .info-card {
        background: white;
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        margin-bottom: 20px;
    }

    .info-row {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 20px;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
    }

    .info-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .info-label {
        font-weight: 600;
        color: #666;
    }

    .info-value {
        color: #333;
        word-break: break-word;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #333;
    }

    .form-group input,
    .form-group select {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 1rem;
        transition: border-color 0.3s ease;
    }

    .form-group input:focus,
    .form-group select:focus {
        outline: none;
        border-color: #8B4789;
        box-shadow: 0 0 0 3px rgba(139, 71, 137, 0.1);
    }

    .button-group {
        display: flex;
        gap: 15px;
        margin-top: 25px;
    }

    .btn-primary {
        flex: 1;
        padding: 12px 24px;
        background-color: #8B4789;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        background-color: #6b3569;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(139, 71, 137, 0.3);
    }

    .btn-secondary {
        flex: 1;
        padding: 12px 24px;
        background-color: #f0f0f0;
        color: #333;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-secondary:hover {
        background-color: #e0e0e0;
    }

    .btn-danger {
        padding: 10px 20px;
        background-color: #ff4444;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-danger:hover {
        background-color: #cc0000;
    }

    .address-list {
        margin-top: 20px;
    }

    .address-item {
        background: #f9f9f9;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 15px;
        border-left: 4px solid #8B4789;
    }

    .address-item h4 {
        margin-bottom: 8px;
        color: #8B4789;
    }

    .address-item p {
        margin: 5px 0;
        color: #666;
        font-size: 0.9rem;
    }

    .success-message {
        background-color: #d4edda;
        color: #155724;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 20px;
        border: 1px solid #c3e6cb;
    }

    .error-message {
        background-color: #f8d7da;
        color: #721c24;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 20px;
        border: 1px solid #f5c6cb;
    }

    @media (max-width: 768px) {
        .perfil-container {
            margin: 20px 10px;
            padding: 15px;
        }

        .perfil-header {
            padding: 25px;
        }

        .perfil-header h1 {
            font-size: 1.8rem;
        }

        .info-row {
            grid-template-columns: 1fr;
            gap: 5px;
        }

        .button-group {
            flex-direction: column;
        }

        .tabs {
            flex-wrap: wrap;
        }

        .tab-button {
            padding: 10px 16px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="perfil-container">
    <!-- Header -->
    <div class="perfil-header">
        <h1>👤 Mi Perfil</h1>
        <p>Bienvenido, {{ request.session.usuario.username }}</p>
    </div>

    <!-- Tabs -->
    <div class="tabs">
        <button class="tab-button active" onclick="cambiarTab('informacion')">
            📋 Información
        </button>
        <button class="tab-button" onclick="cambiarTab('direcciones')">
            📍 Direcciones de Envío
        </button>
        <button class="tab-button" onclick="cambiarTab('seguridad')">
            🔒 Seguridad
        </button>
    </div>

    <!-- TAB 1: INFORMACIÓN GENERAL -->
    <div id="informacion" class="tab-content active">
        <div class="info-card">
            <h3>Información de la Cuenta</h3>
            
            {% if messages %}
                {% for message in messages %}
                    <div class="{% if message.tags %}{{ message.tags }}{% endif %}-message">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}

            <div class="info-row">
                <div class="info-label">👤 Usuario:</div>
                <div class="info-value">{{ request.session.usuario.username }}</div>
            </div>

            {% if cliente %}
            <div class="info-row">
                <div class="info-label">👥 Nombre Completo:</div>
                <div class="info-value">{{ cliente.nombres }} {{ cliente.apellidos }}</div>
            </div>
            {% endif %}

            <div class="info-row">
                <div class="info-label">📧 Email:</div>
                <div class="info-value" id="email-display">
                    {% if cliente.email %}
                        {{ cliente.email }}
                    {% else %}
                        <em style="color: #999;">No configurado</em>
                    {% endif %}
                </div>
            </div>

            <div class="info-row">
                <div class="info-label">📞 Teléfono:</div>
                <div class="info-value" id="telefono-display">
                    {% if cliente.telefono %}
                        {{ cliente.telefono }}
                    {% else %}
                        <em style="color: #999;">No configurado</em>
                    {% endif %}
                </div>
            </div>

            <div class="button-group">
                <button class="btn-secondary" onclick="toggleEditar('informacion-form')">
                    ✏️ Editar Información
                </button>
            </div>
        </div>

        <!-- Formulario de edición (oculto por defecto) -->
        <div id="informacion-form" style="display: none;" class="info-card">
            <h3>Editar Información</h3>
            <form method="POST" action="/usuarios/actualizar-perfil/">
                {% csrf_token %}
                
                <div class="form-group">
                    <label>Email:</label>
                    <input type="email" name="email" placeholder="tu@email.com" 
                           value="{% if cliente.email %}{{ cliente.email }}{% endif %}">
                </div>

                <div class="form-group">
                    <label>Teléfono:</label>
                    <input type="tel" name="telefono" placeholder="+52 123 456 7890"
                           value="{% if cliente.telefono %}{{ cliente.telefono }}{% endif %}">
                </div>

                <div class="button-group">
                    <button type="submit" class="btn-primary">✓ Guardar Cambios</button>
                    <button type="button" class="btn-secondary" onclick="toggleEditar('informacion-form')">
                        ✕ Cancelar
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- TAB 2: DIRECCIONES DE ENVÍO -->
    <div id="direcciones" class="tab-content">
        <div class="info-card">
            <h3>Mis Direcciones de Envío</h3>

            <div class="address-list">
                {% if direcciones %}
                    {% for direccion in direcciones %}
                    <div class="address-item">
                        <h4>{{ direccion.nombre }}</h4>
                        <p>📍 {{ direccion.calle }}, {{ direccion.numero }}</p>
                        {% if direccion.departamento %}<p>{{ direccion.departamento }}</p>{% endif %}
                        <p>🏢 {{ direccion.ciudad }}, {{ direccion.estado }}</p>
                        <p>📮 {{ direccion.codigo_postal }}</p>
                        {% if direccion.telefono %}<p>📞 {{ direccion.telefono }}</p>{% endif %}
                        
                        <form method="POST" action="/usuarios/eliminar-direccion/" style="display: inline;">
                            {% csrf_token %}
                            <input type="hidden" name="id_direccion" value="{{ direccion.id_direccion }}">
                            <button type="submit" class="btn-danger" style="margin-top: 10px; padding: 8px 16px;" 
                                    onclick="return confirm('¿Estás seguro de eliminar esta dirección?')">
                                🗑️ Eliminar
                            </button>
                        </form>
                    </div>
                    {% endfor %}
                {% else %}
                <p style="color: #999; text-align: center; padding: 20px;">
                    No tienes direcciones guardadas aún
                </p>
                {% endif %}
            </div>

            <button class="btn-primary" style="width: 100%; margin-top: 20px;" 
                    onclick="toggleEditar('nueva-direccion-form')">
                ➕ Agregar Nueva Dirección
            </button>
        </div>

        <!-- Formulario para agregar dirección (oculto por defecto) -->
        <div id="nueva-direccion-form" style="display: none;" class="info-card">
            <h3>Agregar Nueva Dirección</h3>
            <form method="POST" action="/usuarios/agregar-direccion/">
                {% csrf_token %}
                
                <div class="form-group">
                    <label>Nombre de la Dirección (ej: Casa, Oficina):</label>
                    <input type="text" name="nombre" placeholder="Casa" required>
                </div>

                <div class="form-group">
                    <label>Calle:</label>
                    <input type="text" name="calle" placeholder="Avenida Principal" required>
                </div>

                <div class="form-group">
                    <label>Número:</label>
                    <input type="text" name="numero" placeholder="123" required>
                </div>

                <div class="form-group">
                    <label>Departamento / Piso (Opcional):</label>
                    <input type="text" name="departamento" placeholder="Apto 202">
                </div>

                <div class="form-group">
                    <label>Ciudad:</label>
                    <input type="text" name="ciudad" placeholder="México" required>
                </div>

                <div class="form-group">
                    <label>Estado:</label>
                    <input type="text" name="estado" placeholder="CDMX" required>
                </div>

                <div class="form-group">
                    <label>Código Postal:</label>
                    <input type="text" name="codigo_postal" placeholder="09208" required>
                </div>

                <div class="form-group">
                    <label>Teléfono de Contacto:</label>
                    <input type="tel" name="telefono" placeholder="+52 123 456 7890">
                </div>

                <div class="button-group">
                    <button type="submit" class="btn-primary">✓ Guardar Dirección</button>
                    <button type="button" class="btn-secondary" onclick="toggleEditar('nueva-direccion-form')">
                        ✕ Cancelar
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- TAB 3: SEGURIDAD -->
    <div id="seguridad" class="tab-content">
        <div class="info-card">
            <h3>Seguridad de la Cuenta</h3>

            <div class="form-group" style="margin-top: 20px;">
                <label>Contraseña Actual:</label>
                <input type="password" id="password-actual" placeholder="Ingresa tu contraseña actual">
            </div>

            <div class="form-group">
                <label>Nueva Contraseña:</label>
                <input type="password" id="password-nueva" placeholder="Ingresa tu nueva contraseña">
            </div>

            <div class="form-group">
                <label>Confirmar Nueva Contraseña:</label>
                <input type="password" id="password-confirmar" placeholder="Confirma tu nueva contraseña">
            </div>

            <div class="button-group">
                <button class="btn-primary" onclick="cambiarPassword()">
                    🔐 Cambiar Contraseña
                </button>
            </div>

            <hr style="margin: 30px 0; border: none; border-top: 1px solid #e0e0e0;">

            <h3>Cerrar Sesión</h3>
            <p style="color: #666; margin-bottom: 20px;">
                Cierra tu sesión en todos los dispositivos
            </p>

            <div class="button-group">
                <a href="{% url 'logout' %}" class="btn-danger" style="text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center;">
                    🚪 Cerrar Sesión
                </a>
            </div>
        </div>
    </div>
</div>

<script>
function cambiarTab(tabName) {
    // Ocultar todos los tabs
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
    });

    // Desactivar todos los botones
    document.querySelectorAll('.tab-button').forEach(btn => {
        btn.classList.remove('active');
    });

    // Mostrar tab seleccionado y activar botón
    document.getElementById(tabName).classList.add('active');
    event.target.classList.add('active');
}

function toggleEditar(elementId) {
    const element = document.getElementById(elementId);
    if (element.style.display === 'none') {
        element.style.display = 'block';
    } else {
        element.style.display = 'none';
    }
}

async function cambiarPassword() {
    const actual = document.getElementById('password-actual').value;
    const nueva = document.getElementById('password-nueva').value;
    const confirmar = document.getElementById('password-confirmar').value;

    if (!actual || !nueva || !confirmar) {
        alert('Por favor completa todos los campos');
        return;
    }

    if (nueva !== confirmar) {
        alert('Las nuevas contraseñas no coinciden');
        return;
    }

    if (nueva.length < 6) {
        alert('La contraseña debe tener al menos 6 caracteres');
        return;
    }

    // Aquí iría la lógica para cambiar la contraseña
    alert('Funcionalidad de cambio de contraseña próximamente');
}
</script>
{% endblock %}