jQuery(document).ready(function($) {
    'use strict';
    
    var cropperActive = false;
    var currentAttachmentId = 0;
    var originalImageWidth = 0;
    var originalImageHeight = 0;
    var scale = 1;
    
    // État du recadrage
    var cropState = {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        startX: 0,
        startY: 0,
        isDragging: false,
        isResizing: false,
        resizeHandle: '',
        minWidth: 50,
        minHeight: 89
    };
    
    // Sélectionner une image
    $('#wprg-select-image').on('click', function(e) {
        e.preventDefault();
        
        var frame = wp.media({
            title: 'Sélectionner une image pour le recadrage',
            button: {
                text: 'Utiliser cette image'
            },
            library: {
                type: 'image'
            },
            multiple: false
        });
        
        frame.on('select', function() {
            var attachment = frame.state().get('selection').first().toJSON();
            
            // Mettre à jour l'aperçu
            $('#wprg-cropper-image').attr('src', attachment.url);
            
            // Préparer le recadrage
            $('#wprg-crop-image').attr('src', attachment.url);
            $('#wprg-attachment-id').val(attachment.id);
            currentAttachmentId = attachment.id;
            
            // Afficher la zone de recadrage
            $('#wprg-crop-area').show();
            $('#wprg-crop-image-btn').show();
            
            // Initialiser le recadrage après le chargement de l'image
            $('#wprg-crop-image').on('load', initCropper);
        });
        
        frame.open();
    });
    
    // Ouvrir l'outil de recadrage
    $('#wprg-crop-image-btn').on('click', function() {
        var attachmentId = $('#wprg-attachment-id').val();
        var imageUrl = $('#wprg-cropper-image').attr('src');
        
        if (!attachmentId || !imageUrl) {
            alert('Veuillez d\'abord sélectionner une image');
            return;
        }
        
        $('#wprg-crop-image').attr('src', imageUrl);
        $('#wprg-crop-area').show();
        
        // Initialiser le recadrage
        if ($('#wprg-crop-image')[0].complete) {
            initCropper();
        } else {
            $('#wprg-crop-image').on('load', initCropper);
        }
    });
    
    // Initialiser le recadrage
    function initCropper() {
        var $image = $('#wprg-crop-image');
        var $wrapper = $image.parent('.wprg-crop-wrapper');
        var $selection = $wrapper.find('.wprg-crop-selection');
        
        // Obtenir les dimensions réelles de l'image
        originalImageWidth = $image[0].naturalWidth;
        originalImageHeight = $image[0].naturalHeight;
        
        // Calculer l'échelle d'affichage
        scale = $image.width() / originalImageWidth;
        
        // Calculer les dimensions de recadrage optimales (ratio 9:16)
        var targetRatio = 9 / 16; // 0.5625
        
        if (originalImageWidth / originalImageHeight > targetRatio) {
            // Image plus large que haute
            cropState.height = originalImageHeight;
            cropState.width = Math.round(originalImageHeight * targetRatio);
            cropState.x = Math.round((originalImageWidth - cropState.width) / 2);
            cropState.y = 0;
        } else {
            // Image plus haute que large
            cropState.width = originalImageWidth;
            cropState.height = Math.round(originalImageWidth / targetRatio);
            cropState.x = 0;
            cropState.y = Math.round((originalImageHeight - cropState.height) / 2);
        }
        
        // Positionner la sélection
        updateSelectionPosition();
        
        // Afficher la sélection
        $selection.show();
        
        // Attacher les événements
        attachSelectionEvents();
        
        cropperActive = true;
    }
    
    // Mettre à jour la position et la taille de la sélection
    function updateSelectionPosition() {
        var $selection = $('.wprg-crop-selection');
        
        $selection.css({
            'left': (cropState.x * scale) + 'px',
            'top': (cropState.y * scale) + 'px',
            'width': (cropState.width * scale) + 'px',
            'height': (cropState.height * scale) + 'px'
        });
        
        // Mettre à jour les champs cachés
        $('#wprg-crop-x').val(cropState.x);
        $('#wprg-crop-y').val(cropState.y);
        $('#wprg-crop-width').val(cropState.width);
        $('#wprg-crop-height').val(cropState.height);
    }
    
    // Attacher les événements de souris
    function attachSelectionEvents() {
        var $selection = $('.wprg-crop-selection');
        var $wrapper = $('.wprg-crop-wrapper');
        
        // Déplacement
        $selection.on('mousedown', '.wprg-crop-selection', startDrag);
        $selection.on('mousedown', '.wprg-crop-handle', startResize);
        
        $(document).on('mousemove', onMouseMove);
        $(document).on('mouseup', stopInteraction);
        
        // Événements tactiles (optionnel)
        $selection.on('touchstart', '.wprg-crop-selection', startDrag);
        $selection.on('touchstart', '.wprg-crop-handle', startResize);
        $(document).on('touchmove', onTouchMove);
        $(document).on('touchend', stopInteraction);
    }
    
    // Démarrer le déplacement
    function startDrag(e) {
        e.preventDefault();
        
        if ($(e.target).hasClass('wprg-crop-handle')) {
            return;
        }
        
        cropState.isDragging = true;
        cropState.startX = e.pageX - (cropState.x * scale);
        cropState.startY = e.pageY - (cropState.y * scale);
    }
    
    // Démarrer le redimensionnement
    function startResize(e) {
        e.preventDefault();
        e.stopPropagation();
        
        cropState.isResizing = true;
        cropState.resizeHandle = $(e.target).attr('class').split(' ')[1]; // nw, ne, sw, se
        
        cropState.startX = e.pageX;
        cropState.startY = e.pageY;
        cropState.startWidth = cropState.width;
        cropState.startHeight = cropState.height;
        cropState.startLeft = cropState.x;
        cropState.startTop = cropState.y;
    }
    
    // Gérer le déplacement de la souris
    function onMouseMove(e) {
        if (!cropState.isDragging && !cropState.isResizing) return;
        
        e.preventDefault();
        
        if (cropState.isDragging) {
            // Calculer la nouvelle position
            var newLeft = (e.pageX - cropState.startX) / scale;
            var newTop = (e.pageY - cropState.startY) / scale;
            
            // Contraindre aux limites
            newLeft = Math.max(0, Math.min(newLeft, originalImageWidth - cropState.width));
            newTop = Math.max(0, Math.min(newTop, originalImageHeight - cropState.height));
            
            cropState.x = Math.round(newLeft);
            cropState.y = Math.round(newTop);
        }
        
        if (cropState.isResizing) {
            var dx = (e.pageX - cropState.startX) / scale;
            var dy = (e.pageY - cropState.startY) / scale;
            
            var newWidth = cropState.startWidth;
            var newHeight = cropState.startHeight;
            var newX = cropState.startLeft;
            var newY = cropState.startTop;
            
            // Redimensionner selon la poignée
            if (cropState.resizeHandle.includes('e')) {
                newWidth = Math.max(cropState.minWidth, cropState.startWidth + dx);
                newHeight = newWidth * 16 / 9; // Maintenir le ratio
            }
            if (cropState.resizeHandle.includes('s')) {
                newHeight = Math.max(cropState.minHeight, cropState.startHeight + dy);
                newWidth = newHeight * 9 / 16; // Maintenir le ratio
            }
            if (cropState.resizeHandle.includes('w')) {
                newWidth = Math.max(cropState.minWidth, cropState.startWidth - dx);
                newX = cropState.startLeft + (cropState.startWidth - newWidth);
                newHeight = newWidth * 16 / 9;
            }
            if (cropState.resizeHandle.includes('n')) {
                newHeight = Math.max(cropState.minHeight, cropState.startHeight - dy);
                newY = cropState.startTop + (cropState.startHeight - newHeight);
                newWidth = newHeight * 9 / 16;
            }
            
            // Contraindre aux limites
            if (newX < 0) {
                newWidth += newX;
                newX = 0;
            }
            if (newY < 0) {
                newHeight += newY;
                newY = 0;
            }
            if (newX + newWidth > originalImageWidth) {
                newWidth = originalImageWidth - newX;
                newHeight = newWidth * 16 / 9;
            }
            if (newY + newHeight > originalImageHeight) {
                newHeight = originalImageHeight - newY;
                newWidth = newHeight * 9 / 16;
            }
            
            cropState.width = Math.round(newWidth);
            cropState.height = Math.round(newHeight);
            cropState.x = Math.round(newX);
            cropState.y = Math.round(newY);
        }
        
        updateSelectionPosition();
    }
    
    // Gérer le tactile
    function onTouchMove(e) {
        e.preventDefault();
        var touch = e.originalEvent.touches[0];
        onMouseMove(touch);
    }
    
    // Arrêter l'interaction
    function stopInteraction() {
        cropState.isDragging = false;
        cropState.isResizing = false;
    }
    
    // Appliquer le recadrage
    $('#wprg-apply-crop').on('click', function() {
        var attachmentId = $('#wprg-attachment-id').val();
        var postId = $('#post_ID').val();
        
        if (!attachmentId || !postId) {
            alert('Erreur: image ou publication non trouvée');
            return;
        }
        
        // Vérifier que les données sont valides
        if (cropState.width < 10 || cropState.height < 10) {
            alert('La zone de recadrage est trop petite');
            return;
        }
        
        var cropData = {
            x: cropState.x,
            y: cropState.y,
            width: cropState.width,
            height: cropState.height
        };
        
        // Désactiver le bouton
        var $btn = $(this);
        $btn.prop('disabled', true).text('Recadrage...');
        
        // Envoyer la requête AJAX
        $.ajax({
            url: wprg_cropper.ajax_url,
            type: 'POST',
            data: {
                action: 'wprg_crop_image',
                post_id: postId,
                attachment_id: attachmentId,
                crop_data: JSON.stringify(cropData),
                nonce: wprg_cropper.nonce
            },
            success: function(response) {
                if (response.success) {
                    // Mettre à jour l'aperçu
                    $('#wprg-cropper-image').attr('src', response.data.thumbnail_url + '?t=' + new Date().getTime());
                    $('#wprg-attachment-id').val('');
                    
                    // Cacher la zone de recadrage
                    $('#wprg-crop-area').hide();
                    $('.wprg-crop-selection').hide();
                    
                    // Afficher un message de succès
                    alert('✅ Image recadrée avec succès !');
                    
                    // Réinitialiser
                    cropperActive = false;
                } else {
                    alert('Erreur: ' + response.data);
                }
            },
            error: function(xhr, status, error) {
                alert('Erreur lors de la communication avec le serveur: ' + error);
            },
            complete: function() {
                $btn.prop('disabled', false).text('✅ Appliquer');
            }
        });
    });
    
    // Annuler le recadrage
    $('#wprg-cancel-crop').on('click', function() {
        $('#wprg-crop-area').hide();
        $('.wprg-crop-selection').hide();
        cropperActive = false;
    });
    
    // Empêcher la sélection de texte pendant le redimensionnement
    $(document).on('selectstart', false);
});