/**
 * PanelManager - Gestionnaire du layout multi-panneaux
 * 
 * Responsabilités:
 * - Gérer le layout 3 colonnes avec CSS Grid
 * - Permettre le redimensionnement par glisser-déposer
 * - Sauvegarder/restaurer les dimensions dans localStorage
 * - Gérer le mode responsive (empilage vertical sur mobile)
 * 
 * Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6
 */

class PanelManager {
    constructor(stateManager) {
        this.stateManager = stateManager;
        this.layout = null;
        this.separators = [];
        this.isDragging = false;
        this.currentSeparator = null;
        this.startX = 0;
        this.startWidths = {};
        
        // Dimensions par défaut (en pourcentage)
        this.defaultSizes = {
            codes: 25,
            documents: 45,
            details: 30
        };
        
        this.init();
    }
    
    /**
     * Initialise le gestionnaire de panneaux
     */
    init() {
        this.layout = document.querySelector('.three-panel-layout');
        if (!this.layout) {
            console.error('Layout element not found');
            return;
        }
        
        // Restaurer les dimensions sauvegardées ou utiliser les valeurs par défaut
        const savedSizes = this.stateManager.getPanelSizes();
        const sizes = savedSizes || this.defaultSizes;
        this.applySizes(sizes);
        
        // Initialiser les séparateurs
        this.initSeparators();
        
        // Gérer le redimensionnement de la fenêtre
        window.addEventListener('resize', () => this.handleWindowResize());
    }
    
    /**
     * Initialise les séparateurs redimensionnables
     */
    initSeparators() {
        this.separators = Array.from(document.querySelectorAll('.panel-separator'));
        
        this.separators.forEach(separator => {
            separator.addEventListener('mousedown', (e) => this.startDrag(e, separator));
        });
        
        // Événements globaux pour le drag
        document.addEventListener('mousemove', (e) => this.drag(e));
        document.addEventListener('mouseup', () => this.stopDrag());
        
        // Empêcher la sélection de texte pendant le drag
        document.addEventListener('selectstart', (e) => {
            if (this.isDragging) {
                e.preventDefault();
            }
        });
    }
    
    /**
     * Démarre le glisser-déposer d'un séparateur
     */
    startDrag(event, separator) {
        // Ignorer sur mobile
        if (window.innerWidth <= 768) {
            return;
        }
        
        this.isDragging = true;
        this.currentSeparator = separator;
        this.startX = event.clientX;
        
        // Récupérer les largeurs actuelles
        const panels = this.getPanels();
        const layoutWidth = this.layout.offsetWidth;
        
        this.startWidths = {
            codes: (panels.codes.offsetWidth / layoutWidth) * 100,
            documents: (panels.documents.offsetWidth / layoutWidth) * 100,
            details: (panels.details.offsetWidth / layoutWidth) * 100
        };
        
        // Ajouter la classe de drag
        separator.classList.add('dragging');
        document.body.style.cursor = 'col-resize';
        document.body.style.userSelect = 'none';
    }
    
    /**
     * Gère le déplacement pendant le glisser-déposer
     */
    drag(event) {
        if (!this.isDragging || !this.currentSeparator) {
            return;
        }
        
        const deltaX = event.clientX - this.startX;
        const layoutWidth = this.layout.offsetWidth;
        const deltaPercent = (deltaX / layoutWidth) * 100;
        
        // Déterminer quel séparateur est déplacé
        const separatorIndex = this.separators.indexOf(this.currentSeparator);
        
        let newSizes = { ...this.startWidths };
        
        if (separatorIndex === 0) {
            // Séparateur entre codes et documents
            newSizes.codes = this.startWidths.codes + deltaPercent;
            newSizes.documents = this.startWidths.documents - deltaPercent;
            
            // Limites min/max (10% - 50%)
            newSizes.codes = Math.max(10, Math.min(50, newSizes.codes));
            newSizes.documents = Math.max(10, Math.min(60, newSizes.documents));
            
            // Ajuster pour maintenir la somme à 100%
            const adjustment = 100 - (newSizes.codes + newSizes.documents + newSizes.details);
            newSizes.documents += adjustment;
            
        } else if (separatorIndex === 1) {
            // Séparateur entre documents et détails
            newSizes.documents = this.startWidths.documents + deltaPercent;
            newSizes.details = this.startWidths.details - deltaPercent;
            
            // Limites min/max
            newSizes.documents = Math.max(10, Math.min(60, newSizes.documents));
            newSizes.details = Math.max(10, Math.min(50, newSizes.details));
            
            // Ajuster pour maintenir la somme à 100%
            const adjustment = 100 - (newSizes.codes + newSizes.documents + newSizes.details);
            newSizes.details += adjustment;
        }
        
        // Appliquer les nouvelles dimensions
        this.applySizes(newSizes);
    }
    
    /**
     * Arrête le glisser-déposer
     */
    stopDrag() {
        if (!this.isDragging) {
            return;
        }
        
        this.isDragging = false;
        
        if (this.currentSeparator) {
            this.currentSeparator.classList.remove('dragging');
        }
        
        this.currentSeparator = null;
        document.body.style.cursor = '';
        document.body.style.userSelect = '';
        
        // Sauvegarder les nouvelles dimensions
        const panels = this.getPanels();
        const layoutWidth = this.layout.offsetWidth;
        
        const sizes = {
            codes: (panels.codes.offsetWidth / layoutWidth) * 100,
            documents: (panels.documents.offsetWidth / layoutWidth) * 100,
            details: (panels.details.offsetWidth / layoutWidth) * 100
        };
        
        this.stateManager.setPanelSizes(sizes);
    }
    
    /**
     * Applique les dimensions aux panneaux
     */
    applySizes(sizes) {
        // Normaliser pour s'assurer que la somme fait 100%
        const total = sizes.codes + sizes.documents + sizes.details;
        const normalized = {
            codes: (sizes.codes / total) * 100,
            documents: (sizes.documents / total) * 100,
            details: (sizes.details / total) * 100
        };
        
        // Appliquer via les variables CSS
        document.documentElement.style.setProperty('--codes-width', `${normalized.codes}%`);
        document.documentElement.style.setProperty('--documents-width', `${normalized.documents}%`);
        document.documentElement.style.setProperty('--details-width', `${normalized.details}%`);
    }
    
    /**
     * Récupère les éléments des panneaux
     */
    getPanels() {
        return {
            codes: document.getElementById('codes-panel'),
            documents: document.getElementById('documents-panel'),
            details: document.getElementById('details-panel')
        };
    }
    
    /**
     * Gère le redimensionnement de la fenêtre
     */
    handleWindowResize() {
        // Sur mobile, réinitialiser les dimensions
        if (window.innerWidth <= 768) {
            // Mode empilé, pas besoin de gérer les largeurs
            return;
        }
        
        // Réappliquer les dimensions actuelles pour s'adapter à la nouvelle largeur
        const savedSizes = this.stateManager.getPanelSizes();
        if (savedSizes) {
            this.applySizes(savedSizes);
        }
    }
    
    /**
     * Réinitialise les dimensions aux valeurs par défaut
     */
    resetSizes() {
        this.applySizes(this.defaultSizes);
        this.stateManager.setPanelSizes(this.defaultSizes);
    }
    
    /**
     * Obtient les dimensions actuelles
     */
    getCurrentSizes() {
        const panels = this.getPanels();
        const layoutWidth = this.layout.offsetWidth;
        
        return {
            codes: (panels.codes.offsetWidth / layoutWidth) * 100,
            documents: (panels.documents.offsetWidth / layoutWidth) * 100,
            details: (panels.details.offsetWidth / layoutWidth) * 100
        };
    }
}

// Export pour utilisation dans d'autres modules
if (typeof module !== 'undefined' && module.exports) {
    module.exports = PanelManager;
}
