main.js

// Système de Gestion Financière - Association Amicale avec Rôles et Permissions
// Données mock pour la démonstration

const ROLES = {
    PRESIDENT: 'president',
    TRESORIER: 'tresorier',
    MEMBRE: 'membre'
};

const STATUT_DEPENSE = {
    EN_ATTENTE: 'en_attente',
    APPROUVEE_TRESORIER: 'approuvee_tresorier',
    APPROUVEE_PRESIDENT: 'approuvee_president',
    REJETEE: 'rejettee',
    VALIDEE: 'validee'
};

// Utilisateur actuellement connecté (simulation)
let currentUser = {
    id: 1,
    nom: 'Martin',
    prenom: 'Sophie',
    role: ROLES.TRESORIER // Changer pour tester différents rôles
};

const mockData = {
    membres: [
        { id: 1, nom: 'Martin', prenom: 'Sophie', email: 'sophie.martin@email.com', telephone: '06 12 34 56 78', dateInscription: '2023-09-15', cotisation: 25, derniereCotisation: '2024-09-15', statut: 'actif', role: ROLES.TRESORIER },
        { id: 2, nom: 'Bernard', prenom: 'Lucas', email: 'lucas.bernard@email.com', telephone: '06 23 45 67 89', dateInscription: '2023-10-02', cotisation: 25, derniereCotisation: '2024-10-02', statut: 'actif', role: ROLES.PRESIDENT },
        { id: 3, nom: 'Dubois', prenom: 'Emma', email: 'emma.dubois@email.com', telephone: '06 34 56 78 90', dateInscription: '2023-09-20', cotisation: 25, derniereCotisation: '2024-08-20', statut: 'retard', role: ROLES.MEMBRE },
        { id: 4, nom: 'Thomas', prenom: 'Hugo', email: 'hugo.thomas@email.com', telephone: '06 45 67 89 01', dateInscription: '2023-11-05', cotisation: 25, derniereCotisation: '2024-11-05', statut: 'actif', role: ROLES.MEMBRE },
        { id: 5, nom: 'Robert', prenom: 'Chloé', email: 'chloe.robert@email.com', telephone: '06 56 78 90 12', dateInscription: '2024-01-15', cotisation: 25, derniereCotisation: '2024-10-15', statut: 'actif', role: ROLES.MEMBRE },
        { id: 6, nom: 'Petit', prenom: 'Nathan', email: 'nathan.petit@email.com', telephone: '06 67 89 01 23', dateInscription: '2024-02-03', cotisation: 25, derniereCotisation: '2024-09-03', statut: 'retard', role: ROLES.MEMBRE },
        { id: 7, nom: 'Durand', prenom: 'Léa', email: 'lea.durand@email.com', telephone: '06 78 90 12 34', dateInscription: '2023-12-10', cotisation: 25, derniereCotisation: '2024-11-10', statut: 'actif', role: ROLES.MEMBRE },
        { id: 8, nom: 'Leroy', prenom: 'Julien', email: 'julien.leroy@email.com', telephone: '06 89 01 23 45', dateInscription: '2024-03-22', cotisation: 25, derniereCotisation: '2024-10-22', statut: 'actif', role: ROLES.MEMBRE },
        { id: 9, nom: 'Moreau', prenom: 'Camille', email: 'camille.moreau@email.com', telephone: '06 90 12 34 56', dateInscription: '2023-09-05', cotisation: 25, derniereCotisation: '2024-09-05', statut: 'actif', role: ROLES.MEMBRE },
        { id: 10, nom: 'Simon', prenom: 'Alexis', email: 'alexis.simon@email.com', telephone: '06 01 23 45 67', dateInscription: '2024-04-18', cotisation: 25, derniereCotisation: '2024-10-18', statut: 'actif', role: ROLES.MEMBRE }
    ],
    
    transactions: [
        // Transactions existantes...
        { id: 1, date: '2024-10-15', type: 'entrée', categorie: 'Cotisations', description: 'Cotisations membres Octobre', montant: 425, membreId: null, statut: STATUT_DEPENSE.VALIDEE },
        { id: 2, date: '2024-10-12', type: 'sortie', categorie: 'Événements', description: 'Location salle pour soirée étudiante', montant: 150, membreId: null, statut: STATUT_DEPENSE.VALIDEE },
        { id: 3, date: '2024-10-08', type: 'sortie', categorie: 'Matériel', description: 'Achat matériel informatique', montant: 320, membreId: null, statut: STATUT_DEPENSE.VALIDEE }
    ],
    
    demandesDepenses: [
        {
            id: 1,
            membreId: 3,
            montant: 45,
            categorie: 'Transport',
            description: 'Transport pour événement caritatif',
            dateDemande: '2024-10-20',
            justificatif: 'ticket_transport.jpg',
            statut: STATUT_DEPENSE.EN_ATTENTE,
            approuveParTresorier: null,
            approuveParPresident: null,
            dateApprobation: null
        },
        {
            id: 2,
            membreId: 5,
            montant: 120,
            categorie: 'Communication',
            description: 'Impression affiches événement',
            dateDemande: '2024-10-18',
            justificatif: 'devis_impression.pdf',
            statut: STATUT_DEPENSE.APPROUVEE_TRESORIER,
            approuveParTresorier: 1,
            approuveParPresident: null,
            dateApprobation: null
        }
    ],
    
    notifications: [
        {
            id: 1,
            membreId: 3,
            type: 'cotisation_retard',
            message: 'Votre cotisation est en retard. Merci de régulariser votre situation.',
            date: '2024-10-15',
            lue: false
        },
        {
            id: 2,
            membreId: 1,
            type: 'demande_depense',
            message: 'Nouvelle demande de dépense de Emma Dubois (€45) en attente d\'approbation.',
            date: '2024-10-20',
            lue: false
        }
    ]
};

// Fonctions utilitaires
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('fr-FR');
}

function formatMontant(montant) {
    return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(montant);
}

function calculerSoldeActuel() {
    return mockData.transactions.reduce((solde, transaction) => {
        return transaction.type === 'entrée' ? solde + transaction.montant : solde - transaction.montant;
    }, 0);
}

function calculerMontantMois() {
    const maintenant = new Date();
    const moisActuel = maintenant.getMonth();
    const anneeActuelle = maintenant.getFullYear();
    
    return mockData.transactions
        .filter(transaction => {
            const dateTransaction = new Date(transaction.date);
            return dateTransaction.getMonth() === moisActuel && dateTransaction.getFullYear() === anneeActuelle;
        })
        .reduce((total, transaction) => {
            return transaction.type === 'entrée' ? total + transaction.montant : total - transaction.montant;
        }, 0);
}

function obtenirStatistiquesMembres() {
    const totalMembres = mockData.membres.length;
    const membresActifs = mockData.membres.filter(m => m.statut === 'actif').length;
    const membresRetard = mockData.membres.filter(m => m.statut === 'retard').length;
    
    return { totalMembres, membresActifs, membresRetard };
}

// Fonctions de vérification des permissions
function hasPermission(action) {
    switch (action) {
        case 'view_all_transactions':
            return currentUser.role === ROLES.TRESORIER || currentUser.role === ROLES.PRESIDENT;
        case 'approve_expenses':
            return currentUser.role === ROLES.TRESORIER || currentUser.role === ROLES.PRESIDENT;
        case 'approve_large_expenses':
            return currentUser.role === ROLES.PRESIDENT;
        case 'create_expense_request':
            return currentUser.role === ROLES.MEMBRE;
        case 'view_own_expenses':
            return true; // Tous les membres peuvent voir leurs propres dépenses
        default:
            return false;
    }
}

function isLargeExpense(montant) {
    return montant > 100; // Seuil pour nécessiter l'approbation du président
}

// Gestion des demandes de dépenses
function creerDemandeDepense(demandeData) {
    if (!hasPermission('create_expense_request')) {
        throw new Error('Vous n\'avez pas la permission de créer une demande de dépense.');
    }
    
    const nouvelleDemande = {
        id: mockData.demandesDepenses.length + 1,
        membreId: currentUser.id,
        montant: demandeData.montant,
        categorie: demandeData.categorie,
        description: demandeData.description,
        dateDemande: new Date().toISOString().split('T')[0],
        justificatif: demandeData.justificatif || null,
        statut: STATUT_DEPENSE.EN_ATTENTE,
        approuveParTresorier: null,
        approuveParPresident: null,
        dateApprobation: null
    };
    
    mockData.demandesDepenses.push(nouvelleDemande);
    
    // Créer une notification pour le trésorier
    const tresorier = mockData.membres.find(m => m.role === ROLES.TRESORIER);
    if (tresorier) {
        mockData.notifications.push({
            id: mockData.notifications.length + 1,
            membreId: tresorier.id,
            type: 'demande_depense',
            message: `Nouvelle demande de dépense de ${currentUser.prenom} ${currentUser.nom} (${formatMontant(demandeData.montant)}) en attente d'approbation.`,
            date: new Date().toISOString().split('T')[0],
            lue: false
        });
    }
    
    return nouvelleDemande;
}

function approuverDemandeDepense(demandeId, role) {
    const demande = mockData.demandesDepenses.find(d => d.id === demandeId);
    if (!demande) {
        throw new Error('Demande de dépense introuvable.');
    }
    
    if (role === ROLES.TRESORIER) {
        if (demande.statut !== STATUT_DEPENSE.EN_ATTENTE) {
            throw new Error('Cette demande n\'est plus en attente d\'approbation.');
        }
        
        demande.statut = STATUT_DEPENSE.APPROUVEE_TRESORIER;
        demande.approuveParTresorier = currentUser.id;
        
        // Si c'est une petite dépense, elle est automatiquement validée
        if (!isLargeExpense(demande.montant)) {
            demande.statut = STATUT_DEPENSE.VALIDEE;
            demande.dateApprobation = new Date().toISOString().split('T')[0];
            
            // Créer la transaction correspondante
            const nouvelleTransaction = {
                id: mockData.transactions.length + 1,
                date: demande.dateApprobation,
                type: 'sortie',
                categorie: demande.categorie,
                description: demande.description,
                montant: demande.montant,
                membreId: demande.membreId,
                statut: STATUT_DEPENSE.VALIDEE
            };
            mockData.transactions.push(nouvelleTransaction);
        } else {
            // Pour les grandes dépenses, notifier le président
            const president = mockData.membres.find(m => m.role === ROLES.PRESIDENT);
            if (president) {
                mockData.notifications.push({
                    id: mockData.notifications.length + 1,
                    membreId: president.id,
                    type: 'demande_depense_president',
                    message: `Demande de dépense de ${formatMontant(demande.montant)} nécessite votre approbation présidentielle.`,
                    date: new Date().toISOString().split('T')[0],
                    lue: false
                });
            }
        }
    } else if (role === ROLES.PRESIDENT) {
        if (demande.statut !== STATUT_DEPENSE.APPROUVEE_TRESORIER) {
            throw new Error('Cette demande doit d\'abord être approuvée par le trésorier.');
        }
        
        if (!isLargeExpense(demande.montant)) {
            throw new Error('Seules les dépenses supérieures à 100€ nécessitent l\'approbation du président.');
        }
        
        demande.statut = STATUT_DEPENSE.APPROUVEE_PRESIDENT;
        demande.approuveParPresident = currentUser.id;
        demande.dateApprobation = new Date().toISOString().split('T')[0];
        
        // Créer la transaction correspondante
        const nouvelleTransaction = {
            id: mockData.transactions.length + 1,
            date: demande.dateApprobation,
            type: 'sortie',
            categorie: demande.categorie,
            description: demande.description,
            montant: demande.montant,
            membreId: demande.membreId,
            statut: STATUT_DEPENSE.VALIDEE
        };
        mockData.transactions.push(nouvelleTransaction);
    }
    
    return demande;
}

function rejeterDemandeDepense(demandeId, raison) {
    const demande = mockData.demandesDepenses.find(d => d.id === demandeId);
    if (!demande) {
        throw new Error('Demande de dépense introuvable.');
    }
    
    demande.statut = STATUT_DEPENSE.REJETEE;
    demande.raisonRejet = raison;
    
    // Notifier le membre du rejet
    mockData.notifications.push({
        id: mockData.notifications.length + 1,
        membreId: demande.membreId,
        type: 'demande_rejetee',
        message: `Votre demande de dépense de ${formatMontant(demande.montant)} a été rejetée. Raison: ${raison}`,
        date: new Date().toISOString().split('T')[0],
        lue: false
    });
    
    return demande;
}

// Gestion des notifications
function obtenirNotifications() {
    return mockData.notifications.filter(n => n.membreId === currentUser.id && !n.lue);
}

function marquerNotificationLue(notificationId) {
    const notification = mockData.notifications.find(n => n.id === notificationId);
    if (notification) {
        notification.lue = true;
    }
}

// Fonctions d'animation
function animerElements() {
    if (typeof anime !== 'undefined') {
        anime({
            targets: '.metric-card',
            translateY: [50, 0],
            opacity: [0, 1],
            delay: anime.stagger(100),
            duration: 800,
            easing: 'easeOutQuart'
        });

        anime({
            targets: '.chart-container',
            scale: [0.8, 1],
            opacity: [0, 1],
            delay: 300,
            duration: 1000,
            easing: 'easeOutElastic(1, .8)'
        });
    }
}

// Fonctions de filtrage
function filtrerTransactions(categorie = null, type = null, dateDebut = null, dateFin = null) {
    let transactionsFiltrees = [...mockData.transactions];
    
    if (categorie && categorie !== 'tous') {
        transactionsFiltrees = transactionsFiltrees.filter(t => t.categorie === categorie);
    }
    
    if (type && type !== 'tous') {
        transactionsFiltrees = transactionsFiltrees.filter(t => t.type === type);
    }
    
    if (dateDebut) {
        transactionsFiltrees = transactionsFiltrees.filter(t => new Date(t.date) >= new Date(dateDebut));
    }
    
    if (dateFin) {
        transactionsFiltrees = transactionsFiltrees.filter(t => new Date(t.date) <= new Date(dateFin));
    }
    
    // Filtrer selon les permissions
    if (!hasPermission('view_all_transactions')) {
        transactionsFiltrees = transactionsFiltrees.filter(t => t.membreId === currentUser.id);
    }
    
    return transactionsFiltrees;
}

function filtrerDemandesDepenses(statut = null, membreId = null) {
    let demandesFiltrees = [...mockData.demandesDepenses];
    
    if (statut && statut !== 'tous') {
        demandesFiltrees = demandesFiltrees.filter(d => d.statut === statut);
    }
    
    if (membreId) {
        demandesFiltrees = demandesFiltrees.filter(d => d.membreId === membreId);
    }
    
    // Filtrer selon les permissions
    if (!hasPermission('view_all_transactions')) {
        demandesFiltrees = demandesFiltrees.filter(d => d.membreId === currentUser.id);
    }
    
    return demandesFiltrees;
}

// Fonctions d'affichage
function afficherTransactions(transactions, elementId) {
    const tbody = document.querySelector(`#${elementId} tbody`);
    if (!tbody) return;
    
    tbody.innerHTML = '';
    
    transactions.forEach(transaction => {
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-blue-50 transition-colors';
        
        tr.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${formatDate(transaction.date)}</td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full ${transaction.type === 'entrée' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                    ${transaction.type}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${transaction.categorie}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${transaction.description}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium ${transaction.type === 'entrée' ? 'text-green-600' : 'text-red-600'}">
                ${transaction.type === 'entrée' ? '+' : '-'}${formatMontant(transaction.montant)}
            </td>
        `;
        
        tbody.appendChild(tr);
    });
}

function afficherDemandesDepenses(demandes, elementId) {
    const tbody = document.querySelector(`#${elementId} tbody`);
    if (!tbody) return;
    
    tbody.innerHTML = '';
    
    demandes.forEach(demande => {
        const membre = mockData.membres.find(m => m.id === demande.membreId);
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-blue-50 transition-colors';
        
        const statutColors = {
            [STATUT_DEPENSE.EN_ATTENTE]: 'bg-yellow-100 text-yellow-800',
            [STATUT_DEPENSE.APPROUVEE_TRESORIER]: 'bg-blue-100 text-blue-800',
            [STATUT_DEPENSE.APPROUVEE_PRESIDENT]: 'bg-purple-100 text-purple-800',
            [STATUT_DEPENSE.VALIDEE]: 'bg-green-100 text-green-800',
            [STATUT_DEPENSE.REJETEE]: 'bg-red-100 text-red-800'
        };
        
        tr.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${formatDate(demande.dateDemande)}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${membre ? `${membre.prenom} ${membre.nom}` : 'Inconnu'}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${demande.categorie}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${demande.description}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">-${formatMontant(demande.montant)}</td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full ${statutColors[demande.statut]}">
                    ${demande.statut.replace('_', ' ')}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                ${afficherActionsDemande(demande)}
            </td>
        `;
        
        tbody.appendChild(tr);
    });
}

function afficherActionsDemande(demande) {
    let actions = '';
    
    if (demande.statut === STATUT_DEPENSE.EN_ATTENTE && hasPermission('approve_expenses') && currentUser.role === ROLES.TRESORIER) {
        actions += `<button onclick="approuverDemandeTresorier(${demande.id})" class="text-blue-600 hover:text-blue-800 mr-2">Approuver</button>`;
        actions += `<button onclick="rejeterDemande(${demande.id})" class="text-red-600 hover:text-red-800 mr-2">Rejeter</button>`;
    }
    
    if (demande.statut === STATUT_DEPENSE.APPROUVEE_TRESORIER && hasPermission('approve_large_expenses') && currentUser.role === ROLES.PRESIDENT) {
        actions += `<button onclick="approuverDemandePresident(${demande.id})" class="text-purple-600 hover:text-purple-800 mr-2">Valider</button>`;
        actions += `<button onclick="rejeterDemande(${demande.id})" class="text-red-600 hover:text-red-800 mr-2">Rejeter</button>`;
    }
    
    if (demande.membreId === currentUser.id) {
        actions += `<button onclick="voirDetailsDemande(${demande.id})" class="text-gray-600 hover:text-gray-800">Détails</button>`;
    }
    
    return actions || '<span class="text-gray-400">Aucune action</span>';
}

function afficherMembres(membres, elementId) {
    const tbody = document.querySelector(`#${elementId} tbody`);
    if (!tbody) return;
    
    tbody.innerHTML = '';
    
    membres.forEach(membre => {
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-blue-50 transition-colors';
        
        tr.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${membre.prenom} ${membre.nom}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${membre.email}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${membre.telephone}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${formatDate(membre.dateInscription)}</td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full ${membre.statut === 'actif' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                    ${membre.statut}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${formatDate(membre.derniereCotisation)}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 capitalize">${membre.role}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">
                <button onclick="ouvrirModalMembre(${membre.id})" class="hover:text-blue-800 transition-colors">
                    Voir détails
                </button>
            </td>
        `;
        
        tbody.appendChild(tr);
    });
}

// Fonctions de graphiques
function creerGraphiqueSolde(elementId) {
    if (typeof echarts === 'undefined') return;
    
    const chartDom = document.getElementById(elementId);
    if (!chartDom) return;
    
    const myChart = echarts.init(chartDom);
    
    // Calculer l'évolution du solde
    const transactionsTriees = [...mockData.transactions].sort((a, b) => new Date(a.date) - new Date(b.date));
    let solde = 0;
    const dates = [];
    const soldes = [];
    
    transactionsTriees.forEach(transaction => {
        solde += transaction.type === 'entrée' ? transaction.montant : -transaction.montant;
        dates.push(formatDate(transaction.date));
        soldes.push(solde);
    });
    
    const option = {
        title: {
            text: 'Évolution du solde',
            textStyle: { color: '#1e3a8a', fontSize: 18, fontWeight: 'bold' }
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                return `${params[0].name}<br/>Solde: ${formatMontant(params[0].value)}`;
            }
        },
        xAxis: {
            type: 'category',
            data: dates,
            axisLabel: { color: '#6b7280' }
        },
        yAxis: {
            type: 'value',
            axisLabel: { 
                color: '#6b7280',
                formatter: function(value) {
                    return formatMontant(value);
                }
            }
        },
        series: [{
            data: soldes,
            type: 'line',
            smooth: true,
            itemStyle: { color: '#3b82f6' },
            areaStyle: { color: 'rgba(59, 130, 246, 0.1)' }
        }]
    };
    
    myChart.setOption(option);
}

function creerGraphiqueRepartition(elementId) {
    if (typeof echarts === 'undefined') return;
    
    const chartDom = document.getElementById(elementId);
    if (!chartDom) return;
    
    const myChart = echarts.init(chartDom);
    
    // Calculer la répartition des dépenses par catégorie
    const depensesParCategorie = {};
    mockData.transactions
        .filter(t => t.type === 'sortie')
        .forEach(transaction => {
            depensesParCategorie[transaction.categorie] = (depensesParCategorie[transaction.categorie] || 0) + transaction.montant;
        });
    
    const data = Object.entries(depensesParCategorie).map(([categorie, montant]) => ({
        name: categorie,
        value: montant
    }));
    
    const option = {
        title: {
            text: 'Répartition des dépenses',
            textStyle: { color: '#1e3a8a', fontSize: 18, fontWeight: 'bold' }
        },
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                return `${params.name}<br/>${formatMontant(params.value)} (${params.percent}%)`;
            }
        },
        series: [{
            type: 'pie',
            radius: '70%',
            data: data,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            itemStyle: {
                color: function(params) {
                    const colors = ['#3b82f6', '#1e40af', '#1e3a8a', '#3730a3', '#581c87'];
                    return colors[params.dataIndex % colors.length];
                }
            }
        }]
    };
    
    myChart.setOption(option);
}

// Gestion des modales
function ouvrirModalMembre(membreId) {
    const membre = mockData.membres.find(m => m.id === membreId);
    if (!membre) return;
    
    const modal = document.getElementById('modalMembre');
    if (!modal) return;
    
    // Remplir les informations du membre
    document.getElementById('modalMembreNom').textContent = `${membre.prenom} ${membre.nom}`;
    document.getElementById('modalMembreEmail').textContent = membre.email;
    document.getElementById('modalMembreTelephone').textContent = membre.telephone;
    document.getElementById('modalMembreInscription').textContent = formatDate(membre.dateInscription);
    document.getElementById('modalMembreCotisation').textContent = formatDate(membre.derniereCotisation);
    document.getElementById('modalMembreStatut').textContent = membre.statut;
    
    const statutBadge = document.getElementById('modalMembreStatutBadge');
    statutBadge.className = `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${membre.statut === 'actif' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`;
    
    modal.classList.remove('hidden');
}

function fermerModalMembre() {
    const modal = document.getElementById('modalMembre');
    if (modal) {
        modal.classList.add('hidden');
    }
}

// Initialisation au chargement de la page
document.addEventListener('DOMContentLoaded', function() {
    // Initialiser les animations
    setTimeout(animerElements, 100);
    
    // Initialiser les graphiques si sur la page du tableau de bord
    if (document.getElementById('graphiqueSolde')) {
        setTimeout(() => {
            creerGraphiqueSolde('graphiqueSolde');
            creerGraphiqueRepartition('graphiqueRepartition');
        }, 500);
    }
    
    // Afficher les données initiales selon les permissions
    if (document.getElementById('tableauTransactions')) {
        const transactions = hasPermission('view_all_transactions') ? 
            mockData.transactions : 
            mockData.transactions.filter(t => t.membreId === currentUser.id);
        afficherTransactions(transactions.slice(0, 10), 'tableauTransactions');
    }
    
    if (document.getElementById('tableauMembres') && hasPermission('view_all_transactions')) {
        afficherMembres(mockData.membres, 'tableauMembres');
    }
    
    if (document.getElementById('tableauDemandes')) {
        const demandes = filtrerDemandesDepenses();
        afficherDemandesDepenses(demandes, 'tableauDemandes');
    }
    
    // Afficher les notifications
    afficherNotifications();
    
    // Gestion des filtres
    const filtres = document.querySelectorAll('.filtre-transaction');
    filtres.forEach(filtre => {
        filtre.addEventListener('change', function() {
            const categorie = document.getElementById('filtreCategorie')?.value || 'tous';
            const type = document.getElementById('filtreType')?.value || 'tous';
            const dateDebut = document.getElementById('filtreDateDebut')?.value || null;
            const dateFin = document.getElementById('filtreDateFin')?.value || null;
            
            const transactionsFiltrees = filtrerTransactions(categorie, type, dateDebut, dateFin);
            afficherTransactions(transactionsFiltrees, 'tableauTransactions');
        });
    });
    
    // Gestion de la modale
    const modal = document.getElementById('modalMembre');
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === modal) {
                fermerModalMembre();
            }
        });
    }
    
    // Bouton de fermeture de la modale
    const boutonFermer = document.getElementById('fermerModalMembre');
    if (boutonFermer) {
        boutonFermer.addEventListener('click', fermerModalMembre);
    }
});

// Fonctions globales pour les boutons
function afficherNotifications() {
    const notifications = obtenirNotifications();
    const notificationBadge = document.getElementById('notificationBadge');
    const notificationList = document.getElementById('notificationList');
    
    if (notificationBadge && notifications.length > 0) {
        notificationBadge.textContent = notifications.length;
        notificationBadge.classList.remove('hidden');
    }
    
    if (notificationList) {
        notificationList.innerHTML = '';
        notifications.forEach(notification => {
            const li = document.createElement('li');
            li.className = 'p-2 hover:bg-gray-100 cursor-pointer';
            li.onclick = () => marquerNotificationLue(notification.id);
            li.innerHTML = `
                <div class="text-sm text-gray-900">${notification.message}</div>
                <div class="text-xs text-gray-500">${formatDate(notification.date)}</div>
            `;
            notificationList.appendChild(li);
        });
    }
}

// Export des fonctions pour utilisation globale
window.gestionFinanciere = {
    mockData,
    currentUser,
    ROLES,
    STATUT_DEPENSE,
    hasPermission,
    isLargeExpense,
    calculerSoldeActuel,
    calculerMontantMois,
    obtenirStatistiquesMembres,
    creerDemandeDepense,
    approuverDemandeDepense,
    rejeterDemandeDepense,
    filtrerTransactions,
    filtrerDemandesDepenses,
    afficherTransactions,
    afficherDemandesDepenses,
    afficherMembres,
    ouvrirModalMembre,
    fermerModalMembre,
    formatDate,
    formatMontant
};