// Sistema de Edição de Imagem no Editor
// Variável para imagem selecionada
let selectedImageWrapper = null;

// Função para inserir imagem no editor com wrapper de redimensionamento
function insertImageInEditor(url) {
    const editor = document.getElementById('pageContentEditor');
    editor.focus();

    // Criar wrapper de redimensionamento
    const wrapper = document.createElement('div');
    wrapper.className = 'img-resize-wrapper';
    wrapper.contentEditable = 'false';
    
    // Criar imagem
    const img = document.createElement('img');
    img.src = url;
    img.style.maxWidth = '100%';
    img.style.height = 'auto';
    img.draggable = false;
    
    // Criar handles de redimensionamento
    const handles = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'];
    handles.forEach(function(pos) {
        const handle = document.createElement('div');
        handle.className = 'img-resize-handle ' + pos;
        handle.dataset.handle = pos;
        wrapper.appendChild(handle);
    });
    
    // Criar toolbar flutuante
    const toolbar = document.createElement('div');
    toolbar.className = 'img-toolbar';
    toolbar.innerHTML = '<button type="button" onclick="alignImage(this, \'left\')" title="Alinhar à esquerda"><iconify-icon icon="mdi:format-align-left"></iconify-icon></button>' +
        '<button type="button" onclick="alignImage(this, \'center\')" title="Centralizar"><iconify-icon icon="mdi:format-align-center"></iconify-icon></button>' +
        '<button type="button" onclick="alignImage(this, \'right\')" title="Alinhar à direita"><iconify-icon icon="mdi:format-align-right"></iconify-icon></button>' +
        '<div class="separator"></div>' +
        '<button type="button" onclick="resizeImagePercent(this, 25)" title="25%">25%</button>' +
        '<button type="button" onclick="resizeImagePercent(this, 50)" title="50%">50%</button>' +
        '<button type="button" onclick="resizeImagePercent(this, 75)" title="75%">75%</button>' +
        '<button type="button" onclick="resizeImagePercent(this, 100)" title="100%">100%</button>' +
        '<div class="separator"></div>' +
        '<button type="button" onclick="deleteImage(this)" title="Remover imagem"><iconify-icon icon="mdi:delete"></iconify-icon></button>';
    
    wrapper.appendChild(img);
    wrapper.appendChild(toolbar);
    
    // Evento de clique para selecionar
    wrapper.addEventListener('click', function(e) {
        e.stopPropagation();
        selectImageWrapper(wrapper);
    });

    // Inserir no final do editor
    editor.appendChild(wrapper);
    
    // Adicionar quebra de linha após
    const br = document.createElement('br');
    editor.appendChild(br);
    
    // Inicializar redimensionamento
    initImageResize(wrapper);
    
    // Selecionar a imagem inserida
    selectImageWrapper(wrapper);
}

// Selecionar wrapper de imagem
function selectImageWrapper(wrapper) {
    // Desselecionar anterior
    if (selectedImageWrapper) {
        selectedImageWrapper.classList.remove('selected');
    }
    
    wrapper.classList.add('selected');
    selectedImageWrapper = wrapper;
}

// Desselecionar ao clicar fora
document.addEventListener('click', function(e) {
    if (selectedImageWrapper) {
        if (!selectedImageWrapper.contains(e.target)) {
            selectedImageWrapper.classList.remove('selected');
            selectedImageWrapper = null;
        }
    }
});

// Alinhar imagem
function alignImage(btn, alignment) {
    const wrapper = btn.closest('.img-resize-wrapper');
    if (!wrapper) return;
    
    wrapper.classList.remove('align-left', 'align-center', 'align-right');
    wrapper.classList.add('align-' + alignment);
    
    // Atualizar botões ativos
    const buttons = wrapper.querySelectorAll('.img-toolbar button');
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].classList.remove('active');
    }
    btn.classList.add('active');
}

// Redimensionar imagem por porcentagem
function resizeImagePercent(btn, percent) {
    const wrapper = btn.closest('.img-resize-wrapper');
    if (!wrapper) return;
    
    const img = wrapper.querySelector('img');
    if (!img) return;
    
    wrapper.style.width = percent + '%';
    img.style.width = '100%';
    img.style.height = 'auto';
}

// Deletar imagem
function deleteImage(btn) {
    const wrapper = btn.closest('.img-resize-wrapper');
    if (!wrapper) return;
    
    if (confirm('Deseja remover esta imagem?')) {
        wrapper.remove();
        selectedImageWrapper = null;
    }
}

// Inicializar redimensionamento por arrasto
function initImageResize(wrapper) {
    const handles = wrapper.querySelectorAll('.img-resize-handle');
    const img = wrapper.querySelector('img');
    
    let isResizing = false;
    let currentHandle = null;
    let startX, startY, startWidth, startHeight;
    
    handles.forEach(function(handle) {
        handle.addEventListener('mousedown', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            isResizing = true;
            currentHandle = handle.dataset.handle;
            startX = e.clientX;
            startY = e.clientY;
            startWidth = wrapper.offsetWidth;
            startHeight = img.offsetHeight;
            
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        });
    });
    
    function onMouseMove(e) {
        if (!isResizing) return;
        
        const dx = e.clientX - startX;
        const dy = e.clientY - startY;
        
        let newWidth = startWidth;
        
        // Calcular novo tamanho baseado no handle
        if (currentHandle.includes('e')) {
            newWidth = startWidth + dx;
        }
        if (currentHandle.includes('w')) {
            newWidth = startWidth - dx;
        }
        
        // Limites mínimos
        newWidth = Math.max(50, newWidth);
        
        // Aplicar tamanho
        wrapper.style.width = newWidth + 'px';
        img.style.width = '100%';
        img.style.height = 'auto';
    }
    
    function onMouseUp() {
        isResizing = false;
        currentHandle = null;
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
    }
}
