// Implementação do serviço de envio de e-mail usando EmailJS
// Este script complementa o main.js para adicionar a funcionalidade de envio de e-mail

// Configurações do EmailJS
const emailjsConfig = {
    serviceID: 'service_wedding',
    templateID: 'template_wedding',
    userID: 'user_YOUR_USER_ID', // Será substituído pelo ID real quando o usuário criar uma conta
    toEmail: 'jrfilho@outlook.com.br'
};

// Função para inicializar o EmailJS
function initEmailJS() {
    // Carregar o script do EmailJS dinamicamente
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js';
    script.async = true;
    
    script.onload = function() {
        // Inicializar EmailJS com o userID
        emailjs.init(emailjsConfig.userID);
        console.log('EmailJS inicializado com sucesso');
    };
    
    document.head.appendChild(script);
}

// Função para enviar e-mail com os dados do formulário
function sendEmail(formData) {
    // Preparar os dados para envio
    const templateParams = {
        to_email: emailjsConfig.toEmail,
        from_name: formData.name,
        from_email: formData.email,
        phone: formData.phone,
        guests: formData.guests,
        message: formData.message || 'Sem mensagem adicional'
    };
    
    // Enviar e-mail usando EmailJS
    return emailjs.send(
        emailjsConfig.serviceID,
        emailjsConfig.templateID,
        templateParams
    ).then(function(response) {
        console.log('E-mail enviado com sucesso!', response.status, response.text);
        return true;
    }).catch(function(error) {
        console.error('Erro ao enviar e-mail:', error);
        return false;
    });
}

// Função para capturar o QR Code como imagem e anexar ao e-mail
function captureQRCodeImage() {
    const qrcodeElement = document.getElementById('qrcode').querySelector('img');
    
    if (qrcodeElement) {
        return qrcodeElement.src; // Retorna o data URL da imagem
    }
    
    return null;
}

// Sobrescrever a função de envio de confirmação do main.js
const originalSendConfirmationEmail = window.sendConfirmationEmail;

window.sendConfirmationEmail = function(name, email, phone, guests, message) {
    // Chamar a função original para manter o log
    if (originalSendConfirmationEmail) {
        originalSendConfirmationEmail(name, email, phone, guests, message);
    }
    
    // Preparar os dados do formulário
    const formData = {
        name,
        email,
        phone,
        guests,
        message,
        qrcode: captureQRCodeImage()
    };
    
    // Enviar e-mail com os dados
    sendEmail(formData).then(function(success) {
        if (success) {
            // Mostrar mensagem de sucesso
            const successMessage = document.createElement('div');
            successMessage.className = 'success-message';
            successMessage.innerHTML = '<p>Confirmação enviada com sucesso! Um e-mail foi enviado para o organizador do evento.</p>';
            
            // Inserir mensagem após o QR code
            const qrcodeContainer = document.getElementById('qrcodeContainer');
            qrcodeContainer.appendChild(successMessage);
            
            // Limpar mensagem após 5 segundos
            setTimeout(function() {
                successMessage.style.opacity = '0';
                setTimeout(function() {
                    successMessage.remove();
                }, 1000);
            }, 5000);
        } else {
            // Mostrar mensagem de erro
            alert('Ocorreu um erro ao enviar o e-mail. Por favor, tente novamente mais tarde.');
        }
    });
};

// Inicializar EmailJS quando o documento estiver carregado
document.addEventListener('DOMContentLoaded', function() {
    initEmailJS();
    
    // Adicionar estilos para a mensagem de sucesso
    const style = document.createElement('style');
    style.textContent = `
        .success-message {
            background-color: #dff0d8;
            color: #3c763d;
            padding: 15px;
            margin-top: 20px;
            border-radius: 5px;
            transition: opacity 1s ease;
        }
    `;
    document.head.appendChild(style);
});
