Parking/js/dashboard.js

const API_URL = '/api';

let dashboardState = {
    user:        null,
    currentPage: 'map'
};

document.addEventListener('DOMContentLoaded', () => {
    console.log('🚗 Initialisation du dashboard...');
    checkAuthentication();
    initNavigation();
    initLogout();
    loadUserData();
});

function checkAuthentication() {
    const token = localStorage.getItem('smart_parking_token');
    const user  = localStorage.getItem('smart_parking_user');
    if (!token || !user) {
        window.location.href = '../index.html';
        return;
    }
    dashboardState.user = JSON.parse(user);
}

function initNavigation() {
    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const page = link.getAttribute('data-page');
            navigateToPage(page);
            navLinks.forEach(l => l.classList.remove('active'));
            link.classList.add('active');
        });
    });

    if (dashboardState.user && dashboardState.user.role === 'admin') {
        const adminLink = document.querySelector('.admin-only');
        if (adminLink) {
            adminLink.classList.remove('hidden');
            adminLink.classList.add('visible');
        }
    }
}

function navigateToPage(page) {
    document.querySelectorAll('.page').forEach(p => {
        p.classList.add('hidden');
        p.classList.remove('active');
    });

    const targetPage = document.getElementById(page);
    if (targetPage) {
        targetPage.classList.remove('hidden');
        targetPage.classList.add('active');
        dashboardState.currentPage = page;

        if (page === 'map' && window.ParkingMap) {
            window.ParkingMap.refresh();
        } else if (page === 'my-reservations') {
            loadMyReservations();
        } else if (page === 'admin' && window.AdminModule) {
            window.AdminModule.refresh();
        }
    }
}

function initLogout() {
    const logoutBtn = document.getElementById('logoutBtn');
    if (logoutBtn) {
        logoutBtn.addEventListener('click', () => {
            localStorage.removeItem('smart_parking_token');
            localStorage.removeItem('smart_parking_user');
            window.location.href = '../index.html';
        });
    }
}

function loadUserData() {
    const user = dashboardState.user;
    if (!user) return;

    document.getElementById('userName').textContent = user.name;
    document.getElementById('userRole').textContent = user.role === 'admin' ? 'Administrateur' : 'Client';

    document.getElementById('profileName').textContent    = user.name;
    document.getElementById('profileNameInput').value     = user.name;
    document.getElementById('profileEmailInput').value    = user.email;
    document.getElementById('profilePhoneInput').value    = user.phone || '';

    const roleBadge = document.getElementById('profileRole');
    if (roleBadge) {
        roleBadge.textContent = user.role === 'admin' ? 'Administrateur' : 'Client';
        roleBadge.className   = 'role-badge ' + (user.role === 'admin' ? 'badge-admin' : 'badge-client');
    }

    loadUserStats();
}

function loadUserStats() {
    const reservations     = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
    const userReservations = reservations.filter(r => r.userId === dashboardState.user.id);

    document.getElementById('totalReservations').textContent  = userReservations.length;
    document.getElementById('activeReservations').textContent = userReservations.filter(r => r.status === 'active').length;
    document.getElementById('totalSpent').textContent         = userReservations.reduce((s, r) => s + (r.price || 0), 0) + '€';
}

function loadMyReservations() {
    const container  = document.getElementById('myReservationsList');
    const emptyState = document.getElementById('noReservations');
    if (!container || !emptyState) return;

    const reservations     = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
    const userReservations = reservations.filter(r => r.userId === dashboardState.user.id);

    if (userReservations.length === 0) {
        container.innerHTML = '';
        emptyState.classList.remove('hidden');
        return;
    }

    emptyState.classList.add('hidden');
    container.innerHTML = userReservations.slice().reverse().map(res => `
        <div class="reservation-card">
            <div class="reservation-info">
                <h4>Place ${res.spotNumber}</h4>
                <div class="reservation-details">
                    <span>📅 ${res.date}</span>
                    <span>🕐 ${res.startTime} - ${res.endTime}</span>
                    <span>⏱️ ${formatDurationLabel(res.duration)}</span>
                    <span>🚗 ${res.vehicle || 'N/A'}</span>
                </div>
            </div>
            <div class="reservation-actions">
                <span class="reservation-price">${res.price}€</span>
                <span class="reservation-status status-${res.status}">${getStatusLabel(res.status)}</span>
                ${res.status === 'active' ? `
                    <button class="btn btn-danger btn-small" onclick="cancelReservation(${res.id})">
                        Annuler
                    </button>
                ` : ''}
            </div>
        </div>
    `).join('');
}

function cancelReservation(reservationId) {
    if (!confirm('Êtes-vous sûr de vouloir annuler cette réservation ?')) return;

    let reservations  = JSON.parse(localStorage.getItem('smart_parking_reservations') || '[]');
    const reservation = reservations.find(r => r.id === reservationId);

    if (reservation) {
        reservation.status = 'cancelled';
        localStorage.setItem('smart_parking_reservations', JSON.stringify(reservations));

        if (window.ParkingMap) {
            window.ParkingMap.setSpotStatus(reservation.spotId, 'free');
        }

        showToast('Réservation annulée', 'success');
        loadMyReservations();
        loadUserStats();
    }
}

document.getElementById('profileForm')?.addEventListener('submit', async (e) => {
    e.preventDefault();

    const phone       = document.getElementById('profilePhoneInput').value;
    const newPassword = document.getElementById('profileNewPassword').value;
    const confirmPass = document.getElementById('profileNewPassword').value;

   
    if (newPassword && newPassword.length < 8) {
        showToast('Le mot de passe doit faire au moins 8 caractères', 'error');
        return;
    }

    const token = localStorage.getItem('smart_parking_token');

    if (token) {
        try {
           
            const updateData = { phone };
            if (newPassword) {
                updateData.password = newPassword;
            }

           
            const response = await fetch(`${API_URL}/users/profile`, {
                method:  'PUT',
                headers: {
                    'Content-Type':  'application/json',
                    'Authorization': 'Bearer ' + token
                },
                body: JSON.stringify(updateData)
            });

            const data = await response.json();

            if (data.success) {
        
                let user   = dashboardState.user;
                user.phone = phone;
                dashboardState.user = user;
                localStorage.setItem('smart_parking_user', JSON.stringify(user));

             
                document.getElementById('profileNewPassword').value = '';

                showToast('Profil mis à jour avec succès !', 'success');
            } else {
                showToast(data.message || 'Erreur lors de la mise à jour', 'error');
            }

        } catch (_err) {

            let user   = dashboardState.user;
            user.phone = phone;
            if (newPassword) user.password = newPassword;
            dashboardState.user = user;
            localStorage.setItem('smart_parking_user', JSON.stringify(user));

            let users = JSON.parse(localStorage.getItem('smart_parking_users') || '[]');
            const idx = users.findIndex(u => u.id === user.id);
            if (idx !== -1) {
                users[idx] = user;
                localStorage.setItem('smart_parking_users', JSON.stringify(users));
            }

            document.getElementById('profileNewPassword').value = '';
            showToast('Profil mis à jour', 'success');
        }
    } else {
        let user   = dashboardState.user;
        user.phone = phone;
        if (newPassword) user.password = newPassword;
        dashboardState.user = user;
        localStorage.setItem('smart_parking_user', JSON.stringify(user));
        showToast('Profil mis à jour', 'success');
    }
});

function getStatusLabel(status) {
    return { active: 'Active', completed: 'Terminée', cancelled: 'Annulée' }[status] || status;
}

function formatDurationLabel(minutes) {
    if (minutes >= 480) return 'Journée (8h)';
    if (minutes >= 60)  return Math.floor(minutes / 60) + 'h' + (minutes % 60 ? (minutes % 60) + 'min' : '');
    return minutes + ' min';
}

function showToast(message, type = 'info') {
    const container = document.getElementById('toastContainer');
    const toast     = document.createElement('div');
    toast.className  = `toast ${type}`;
    toast.textContent = message;
    container.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

window.Dashboard = {
    navigateToPage,
    showToast,
    getUser:      () => dashboardState.user,
    refreshStats: loadUserStats
};