Lectures/assets/js/admin.js

document.addEventListener('DOMContentLoaded', function() {
    // Gestion de la suppression des romans
    const storyList = document.querySelector('.stories-list');
    if (storyList) {
        storyList.addEventListener('click', async (e) => {
            if (e.target.matches('.delete-story')) {
                const storyId = e.target.dataset.id;
                if (confirmDeletion(storyId)) {
                    await deleteStory(storyId);
                }
            }
        });
    }

    // Confirmation de suppression avec informations du roman
    function confirmDeletion(storyId) {
        const storyCard = document.querySelector(`[data-id="${storyId}"]`).closest('.story-item');
        const title = storyCard.querySelector('h2').textContent;
        return confirm(`Voulez-vous vraiment supprimer le roman "${title}" ? Cette action est irréversible.`);
    }

    // Suppression d'un roman via l'API
    async function deleteStory(storyId) {
        try {
            const response = await fetch('api/delete-story.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ id: storyId })
            });

            if (response.ok) {
                const result = await response.json();
                if (result.success) {
                    // Animation de suppression et retrait du DOM
                    const storyCard = document.querySelector(`[data-id="${storyId}"]`).closest('.story-item');
                    storyCard.style.opacity = '0';
                    storyCard.style.transform = 'translateX(-100%)';
                    setTimeout(() => {
                        storyCard.remove();
                        showNotification('Roman supprimé avec succès');
                    }, 300);
                } else {
                    throw new Error(result.error || 'Erreur lors de la suppression');
                }
            } else {
                throw new Error('Erreur serveur');
            }
        } catch (error) {
            showNotification(error.message, 'error');
        }
    }

    // Système de notification
    function showNotification(message, type = 'success') {
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        // Animation d'entrée
        setTimeout(() => {
            notification.style.opacity = '1';
            notification.style.transform = 'translateY(0)';
        }, 10);
        
        // Auto-suppression après 3 secondes
        setTimeout(() => {
            notification.style.opacity = '0';
            notification.style.transform = 'translateY(-100%)';
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }

    // Gestion du formulaire de déconnexion
    const logoutForm = document.querySelector('.logout-form');
    if (logoutForm) {
        logoutForm.addEventListener('submit', (e) => {
            if (!confirm('Voulez-vous vraiment vous déconnecter ?')) {
                e.preventDefault();
            }
        });
    }

    // Fonction utilitaire pour détecter les changements non sauvegardés
    let hasUnsavedChanges = false;

    function detectUnsavedChanges() {
        const forms = document.querySelectorAll('form');
        forms.forEach(form => {
            const initialState = new FormData(form).toString();
            
            form.addEventListener('change', () => {
                const currentState = new FormData(form).toString();
                hasUnsavedChanges = initialState !== currentState;
            });
        });

        // Avertissement avant de quitter la page avec des changements non sauvegardés
        window.addEventListener('beforeunload', (e) => {
            if (hasUnsavedChanges) {
                e.preventDefault();
                e.returnValue = '';
            }
        });
    }

    // Style des notifications
    const style = document.createElement('style');
    style.textContent = `
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem 2rem;
            border-radius: 4px;
            background: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: translateY(-100%);
            transition: opacity 0.3s ease, transform 0.3s ease;
            z-index: 1000;
        }

        .notification.success {
            background-color: #4caf50;
            color: white;
        }

        .notification.error {
            background-color: #f44336;
            color: white;
        }

        .story-item {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
    `;
    document.head.appendChild(style);

    // Initialisation des fonctionnalités
    detectUnsavedChanges();
});