OneConversorTemplate/UpperFirstLetter/wwwroot/js/sentence-converter-widget.js

// Sentence Converter Widget JavaScript
window.SentenceConverterWidget = (function () {

    function initializeWidget(containerId) {
        console.log('🚀 Inicializando SentenceConverterWidget em:', containerId);

        const container = document.getElementById(containerId);
        if (!container) {
            console.error('❌ Container não encontrado:', containerId);
            return false;
        }

        const widget = container.querySelector('[data-converter-id="sentence-converter"]');
        if (!widget) {
            console.error('❌ Widget não encontrado no container');
            return false;
        }

        // Buscar configuração
        const configScript = widget.querySelector('#widget-config');
        let config = {};

        if (configScript) {
            try {
                config = JSON.parse(configScript.textContent);
                console.log('✅ Configuração carregada:', config);
            } catch (e) {
                console.warn('⚠️ Erro ao parsear configuração, usando fallback');
                config = getFallbackConfig();
            }
        } else {
            console.warn('⚠️ Configuração não encontrada, usando fallback');
            config = getFallbackConfig();
        }

        // Elementos do widget
        const elements = {
            inputText: widget.querySelector('#inputText'),
            outputText: widget.querySelector('#outputText'),
            convertBtn: widget.querySelector('#convertBtn'),
            copyBtn: widget.querySelector('#copyBtn'),
            clearBtn: widget.querySelector('#clearBtn'),
            charCount: widget.querySelector('#charCount'),
            status: widget.querySelector('#conversionStatus')
        };

        // Verificar se todos os elementos existem
        const missingElements = Object.entries(elements)
            .filter(([key, element]) => !element)
            .map(([key]) => key);

        if (missingElements.length > 0) {
            console.error('❌ Elementos não encontrados:', missingElements);
            return false;
        }

        console.log('✅ Todos os elementos encontrados');

        // Event Listeners
        setupEventListeners(elements, config);

        console.log('✅ SentenceConverterWidget inicializado com sucesso!');
        return true;
    }

    function setupEventListeners(elements, config) {
        const { inputText, outputText, convertBtn, copyBtn, clearBtn, charCount, status } = elements;

        // Contador de caracteres
        inputText.addEventListener('input', function () {
            charCount.textContent = this.value.length;
            console.log('📝 Caracteres digitados:', this.value.length);
        });

        // Converter texto
        convertBtn.addEventListener('click', async function () {
            console.log('🔄 Iniciando conversão...');

            const text = inputText.value.trim();
            if (!text) {
                showStatus(status, config.messages.enterText || 'Por favor, digite algum texto.', 'warning');
                return;
            }

            // UI Loading state
            convertBtn.disabled = true;
            const originalText = convertBtn.innerHTML;
            convertBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>' + (config.messages.converting || 'Convertendo...');

            try {
                const formData = new FormData();
                formData.append('TextInput', text);
                formData.append('Language', config.language || 'pt');

                console.log('📤 Enviando requisição para /api/converter/convert');

                const response = await fetch('/api/converter/convert', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                console.log('📥 Resposta recebida:', result);

                if (result.success) {
                    outputText.value = result.outputText;
                    copyBtn.disabled = false;
                    showStatus(status, config.messages.success || 'Conversão realizada com sucesso!', 'success');
                    console.log('✅ Conversão bem-sucedida');
                } else {
                    showStatus(status, 'Erro: ' + result.message, 'danger');
                    console.error('❌ Erro na conversão:', result.message);
                }
            } catch (error) {
                showStatus(status, config.messages.connectionError || 'Erro de conexão. Tente novamente.', 'danger');
                console.error('❌ Erro de conexão:', error);
            } finally {
                convertBtn.disabled = false;
                convertBtn.innerHTML = originalText;
            }
        });

        // Copiar resultado
        copyBtn.addEventListener('click', async function () {
            try {
                await navigator.clipboard.writeText(outputText.value);
                showStatus(status, config.messages.copied || 'Texto copiado para a área de transferência!', 'success');
                console.log('📋 Texto copiado com sucesso');
            } catch (error) {
                showStatus(status, config.messages.copyError || 'Erro ao copiar texto.', 'danger');
                console.error('❌ Erro ao copiar:', error);
            }
        });

        // Limpar campos
        clearBtn.addEventListener('click', function () {
            inputText.value = '';
            outputText.value = '';
            copyBtn.disabled = true;
            charCount.textContent = '0';
            status.innerHTML = '';
            console.log('🧹 Campos limpos');
        });

        console.log('🎯 Event listeners configurados');
    }

    function showStatus(statusElement, message, type) {
        statusElement.innerHTML = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>`;

        setTimeout(() => {
            statusElement.innerHTML = '';
        }, 5000);
    }

    function getFallbackConfig() {
        return {
            language: 'pt',
            convertButtonText: 'Converter Texto',
            messages: {
                enterText: 'Por favor, digite algum texto.',
                converting: 'Convertendo...',
                success: 'Conversão realizada com sucesso!',
                copied: 'Texto copiado para a área de transferência!',
                connectionError: 'Erro de conexão. Tente novamente.',
                copyError: 'Erro ao copiar texto.'
            }
        };
    }

    // API pública
    return {
        init: initializeWidget,
        version: '1.0.0'
    };
})();

// Auto-inicializar se encontrar widgets na página
// Auto-inicializar se encontrar widgets na página (para uso standalone)
document.addEventListener('DOMContentLoaded', function () {
    // Só auto-inicializar se não estivermos em um sistema de módulos
    if (!window.ModuleLoader && !window.ModuleSystem) {
        const widgets = document.querySelectorAll('[data-converter-id="sentence-converter"]');
        widgets.forEach((widget, index) => {
            const containerId = widget.closest('[id]')?.id || `widget-container-${index}`;
            if (!widget.closest('[id]')) {
                widget.parentElement.id = containerId;
            }
            window.SentenceConverterWidget.init(containerId);
        });
    }
});