{% extends "base.html" %}

{% block title %}Profilo - Proxmox Manager{% endblock %}

{% block extra_styles %}
<style>
    .profile-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    @media (max-width: 768px) {
        .profile-grid {
            grid-template-columns: 1fr;
        }
    }

    .profile-info {
        background: var(--bg-tertiary);
        padding: var(--space-lg);
        border-radius: var(--radius-md);
        border-left: 4px solid var(--accent-blue);
    }

    .profile-info-item {
        margin-bottom: var(--space-md);
    }

    .profile-info-item:last-child {
        margin-bottom: 0;
    }

    .profile-info-label {
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin-bottom: var(--space-xs);
    }

    .profile-info-value {
        color: var(--text-primary);
        font-size: 1rem;
    }

    .form-section {
        margin-bottom: var(--space-lg);
    }

    .form-section h3 {
        color: var(--text-primary);
        margin-bottom: var(--space-md);
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid var(--border-muted);
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: var(--space-sm);
    }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-header">
    <div>
        <h1>Il Mio Profilo</h1>
        <p class="subtitle">Gestisci le tue informazioni personali</p>
    </div>
</div>

<div class="profile-grid">
    <!-- Info Profilo -->
    <div class="card">
        <div class="card-title">Informazioni Account</div>

        <div class="profile-info">
            <div class="profile-info-item">
                <div class="profile-info-label">Username</div>
                <div class="profile-info-value">{{ current_user.username }}</div>
            </div>

            <div class="profile-info-item">
                <div class="profile-info-label">Email</div>
                <div class="profile-info-value" id="currentEmail">{{ current_user.email or 'Non impostata' }}</div>
            </div>

            <div class="profile-info-item">
                <div class="profile-info-label">Ruolo</div>
                <div class="profile-info-value">
                    {% if current_user.is_admin %}
                    <span class="badge-admin">ADMIN</span>
                    {% else %}
                    <span class="status-badge" style="background: var(--bg-active); color: var(--accent-blue); border: 1px solid var(--accent-blue);">UTENTE</span>
                    {% endif %}
                </div>
            </div>

            <div class="profile-info-item">
                <div class="profile-info-label">ID Utente</div>
                <div class="profile-info-value">#{{ current_user.id }}</div>
            </div>
        </div>
    </div>

    <!-- Form Modifica -->
    <div>
        <!-- Cambio Email -->
        <div class="card form-section">
            <h3>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                    <polyline points="22,6 12,13 2,6"/>
                </svg>
                Modifica Email
            </h3>
            <form id="emailForm" onsubmit="updateEmail(event)">
                <div class="form-group">
                    <label for="newEmail">Nuova Email</label>
                    <input type="email" id="newEmail" placeholder="nuova@email.com" required>
                </div>
                <div class="form-group">
                    <label for="emailPassword">Password Corrente</label>
                    <input type="password" id="emailPassword" placeholder="Inserisci password" required>
                </div>
                <button type="submit" class="btn btn-primary">Aggiorna Email</button>
            </form>
        </div>

        <!-- Cambio Password -->
        <div class="card form-section">
            <h3>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                </svg>
                Modifica Password
            </h3>
            <form id="passwordForm" onsubmit="updatePassword(event)">
                <div class="form-group">
                    <label for="currentPassword">Password Corrente</label>
                    <input type="password" id="currentPassword" placeholder="Password attuale" required>
                </div>
                <div class="form-group">
                    <label for="newPassword">Nuova Password</label>
                    <input type="password" id="newPassword" placeholder="Nuova password" required minlength="6">
                    <small class="text-muted" style="font-size: 0.8rem; margin-top: var(--space-xs); display: block;">Minimo 6 caratteri</small>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">Conferma Nuova Password</label>
                    <input type="password" id="confirmPassword" placeholder="Ripeti nuova password" required minlength="6">
                </div>
                <button type="submit" class="btn btn-primary">Aggiorna Password</button>
            </form>
        </div>
    </div>
</div>

<!-- Statistiche Attività -->
<div class="card">
    <div class="card-title">Attività Recente</div>
    <div id="userActivity">
        <div class="loading">
            <div class="spinner"></div>
            <p>Caricamento attività...</p>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    loadUserActivity();
});

async function updateEmail(event) {
    event.preventDefault();

    const newEmail = document.getElementById('newEmail').value;
    const password = document.getElementById('emailPassword').value;

    const result = await apiCall('/api/profile/update-email', 'POST', {
        email: newEmail,
        password: password
    });

    if (result.status === 'success') {
        showToast('Email aggiornata con successo!', 'success');
        document.getElementById('currentEmail').textContent = newEmail;
        document.getElementById('emailForm').reset();
    } else {
        showAlert('Errore: ' + result.message, 'error');
    }
}

async function updatePassword(event) {
    event.preventDefault();

    const currentPassword = document.getElementById('currentPassword').value;
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;

    if (newPassword !== confirmPassword) {
        showAlert('Le password non corrispondono', 'error');
        return;
    }

    const result = await apiCall('/api/profile/update-password', 'POST', {
        current_password: currentPassword,
        new_password: newPassword,
        confirm_password: confirmPassword
    });

    if (result.status === 'success') {
        showToast('Password aggiornata con successo!', 'success');
        document.getElementById('passwordForm').reset();
    } else {
        showAlert('Errore: ' + result.message, 'error');
    }
}

async function loadUserActivity() {
    const container = document.getElementById('userActivity');

    container.innerHTML = `
        <p class="text-muted text-center" style="padding: var(--space-xl);">
            Le statistiche attività saranno disponibili a breve
        </p>
    `;
}
</script>
{% endblock %}