new Vue({
    el: '#app',
    data() {
        return {
            inputData: '',
            inputFormat: 'auto',
            outputFormat: 'json',
            outputData: '',
            loading: false,
            message: '',
            success: false,
            darkMode: false // para el modo oscuro
        };
    },
    methods: {
        // function para auto-detectar el formato de los datos de entrada
        detectFormat(input) {
            try {
                JSON.parse(input);
                return 'json';
            } catch (e) {
                // No es JSON
            }

            if (input.trim().startsWith('<') && input.trim().endsWith('>')) {
                return 'xml';
            }

            if (/^a:\d+:\{.*\}$/.test(input)) {
                return 'phpSerialized';
            }

            return 'unknown';
        },
        toggleDarkMode() {
            this.darkMode = !this.darkMode; // Invertir el valor de darkMode
        },
        async convertData() {
            this.message = '';

            if (!this.inputData.trim()) {
                this.showAlert('Por favor, ingrese los datos de entrada.', false);
                return;
            }

            // Si el usuario seleccionó "auto", detectar el formato
            if (this.inputFormat === 'auto') {
                const detectedFormat = this.detectFormat(this.inputData);
                if (detectedFormat === 'unknown') {
                    this.showAlert('No se pudo detectar el formato de entrada.', false);
                    return;
                }
                this.inputFormat = detectedFormat;
                this.showAlert(`Formato detectado: ${detectedFormat.toUpperCase()}.`, true);
            }

            if (this.inputFormat === this.outputFormat) {
                this.showAlert('Seleccione formatos diferentes para la conversión.', false);
                return;
            }

            this.loading = true;

            try {
                const response = await fetch('/index.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        inputData: this.inputData,
                        inputFormat: this.inputFormat,
                        outputFormat: this.outputFormat
                    })
                });
            
                const result = await response.json();
            
                if (response.ok) {
                    this.outputData = result.data.convertedData;
                    this.$nextTick(() => hljs.highlightElement(this.$refs.outputData));
                    this.showAlert('Conversión exitosa.', true);
                } else {
                    this.outputData = 'Error en la conversión.';
                    this.showAlert(result.message || 'Error desconocido.', false);
                }
            } catch (error) {
                console.error('Error:', error);
                this.outputData = 'Error al convertir los datos.';
                this.showAlert('Ocurrió un error al convertir los datos.', false);
            } finally {
                this.loading = false;
            }            
        },
        showAlert(message, success) {
            this.message = message;
            this.success = success;
        }
    },
    watch: {
        darkMode(val) {
            if (val) {
                document.body.classList.add('dark-mode');
            } else {
                document.body.classList.remove('dark-mode');
            }
        }
    }
});