/**
 * CACICPC - JavaScript Principal
 * Funciones y utilidades del sistema
 * Versión: 1.0.0 BETA
 */

// =====================================================
// VARIABLES GLOBALES
// =====================================================

const CACICPC = {
    version: '1.0.0-beta',
    apiUrl: '/api',
    debug: true // Cambiar a false en producción
};

// =====================================================
// UTILIDADES GENERALES
// =====================================================

/**
 * Mostrar mensaje de alerta
 * @param {string} message - Mensaje a mostrar
 * @param {string} type - Tipo: success, error, warning, info
 * @param {number} duration - Duración en ms (0 = no auto-cerrar)
 */
function showAlert(message, type = 'info', duration = 5000) {
    // Crear contenedor de alertas si no existe
    let container = document.getElementById('alert-container');
    if (!container) {
        container = document.createElement('div');
        container.id = 'alert-container';
        container.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 9999; max-width: 400px;';
        document.body.appendChild(container);
    }

    // Crear alerta
    const alert = document.createElement('div');
    alert.className = `alert alert-${type} alert-dismissible`;
    alert.style.cssText = 'margin-bottom: 10px; animation: slideInRight 0.3s ease-out;';
    
    const icons = {
        success: '✓',
        error: '✗',
        warning: '⚠',
        info: 'ℹ'
    };
    
    alert.innerHTML = `
        <strong>${icons[type] || 'ℹ'}</strong> ${message}
        <button type="button" class="alert-close" onclick="this.parentElement.remove()">×</button>
    `;
    
    container.appendChild(alert);
    
    // Auto-cerrar
    if (duration > 0) {
        setTimeout(() => {
            alert.style.opacity = '0';
            setTimeout(() => alert.remove(), 300);
        }, duration);
    }
}

/**
 * Confirmar acción
 * @param {string} message - Mensaje de confirmación
 * @param {function} callback - Función a ejecutar si confirma
 */
function confirmAction(message, callback) {
    if (confirm(message)) {
        callback();
    }
}

/**
 * Formatear número como moneda
 * @param {number} amount - Cantidad
 * @return {string}
 */
function formatMoney(amount) {
    return '$' + parseFloat(amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}

/**
 * Formatear fecha
 * @param {string} date - Fecha en formato YYYY-MM-DD
 * @return {string}
 */
function formatDate(date) {
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    return new Date(date).toLocaleDateString('es-ES', options);
}

/**
 * Validar email
 * @param {string} email
 * @return {boolean}
 */
function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

/**
 * Validar cédula venezolana
 * @param {string} cedula
 * @return {boolean}
 */
function validateCedula(cedula) {
    const re = /^[VEJPGvejpg]-?\d{6,8}$/;
    return re.test(cedula);
}

/**
 * Hacer petición AJAX
 * @param {string} url
 * @param {object} options
 * @return {Promise}
 */
async function ajax(url, options = {}) {
    const defaultOptions = {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    };
    
    const config = { ...defaultOptions, ...options };
    
    try {
        const response = await fetch(url, config);
        const data = await response.json();
        
        if (!response.ok) {
            throw new Error(data.message || 'Error en la petición');
        }
        
        return data;
    } catch (error) {
        console.error('Error AJAX:', error);
        throw error;
    }
}

// =====================================================
// FORMULARIOS
// =====================================================

/**
 * Validar formulario
 * @param {HTMLFormElement} form
 * @return {boolean}
 */
function validateForm(form) {
    let isValid = true;
    const inputs = form.querySelectorAll('input[required], select[required], textarea[required]');
    
    inputs.forEach(input => {
        if (!input.value.trim()) {
            isValid = false;
            input.classList.add('is-invalid');
            showInputError(input, 'Este campo es requerido');
        } else {
            input.classList.remove('is-invalid');
            hideInputError(input);
        }
        
        // Validaciones específicas
        if (input.type === 'email' && input.value) {
            if (!validateEmail(input.value)) {
                isValid = false;
                input.classList.add('is-invalid');
                showInputError(input, 'Email inválido');
            }
        }
    });
    
    return isValid;
}

/**
 * Mostrar error en input
 * @param {HTMLElement} input
 * @param {string} message
 */
function showInputError(input, message) {
    let error = input.parentElement.querySelector('.input-error');
    if (!error) {
        error = document.createElement('div');
        error.className = 'input-error';
        error.style.cssText = 'color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;';
        input.parentElement.appendChild(error);
    }
    error.textContent = message;
}

/**
 * Ocultar error en input
 * @param {HTMLElement} input
 */
function hideInputError(input) {
    const error = input.parentElement.querySelector('.input-error');
    if (error) {
        error.remove();
    }
}

/**
 * Enviar formulario por AJAX
 * @param {HTMLFormElement} form
 * @param {function} callback
 */
async function submitFormAjax(form, callback) {
    if (!validateForm(form)) {
        showAlert('Por favor completa todos los campos requeridos', 'error');
        return;
    }
    
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    
    try {
        const result = await ajax(form.action, {
            method: form.method || 'POST',
            body: JSON.stringify(data)
        });
        
        if (callback) {
            callback(result);
        }
    } catch (error) {
        showAlert(error.message, 'error');
    }
}

// =====================================================
// CALCULADORA DE CRÉDITOS
// =====================================================

/**
 * Calcular cuota mensual de crédito
 * @param {number} monto - Monto del crédito
 * @param {number} plazo - Plazo en meses
 * @param {number} tasaAnual - Tasa de interés anual (%)
 * @return {number}
 */
function calcularCuotaMensual(monto, plazo, tasaAnual) {
    const tasaMensual = (tasaAnual / 100) / 12;
    
    if (tasaMensual === 0) {
        return monto / plazo;
    }
    
    const cuota = monto * (tasaMensual * Math.pow(1 + tasaMensual, plazo)) / 
                  (Math.pow(1 + tasaMensual, plazo) - 1);
    
    return Math.round(cuota * 100) / 100;
}

/**
 * Calcular total a pagar
 * @param {number} cuota - Cuota mensual
 * @param {number} plazo - Plazo en meses
 * @return {number}
 */
function calcularTotalPagar(cuota, plazo) {
    return cuota * plazo;
}

/**
 * Calcular intereses totales
 * @param {number} totalPagar - Total a pagar
 * @param {number} monto - Monto del crédito
 * @return {number}
 */
function calcularIntereses(totalPagar, monto) {
    return totalPagar - monto;
}

/**
 * Simulador de crédito
 * @param {number} monto
 * @param {number} plazo
 * @param {number} tasaAnual
 * @return {object}
 */
function simularCredito(monto, plazo, tasaAnual) {
    const cuota = calcularCuotaMensual(monto, plazo, tasaAnual);
    const totalPagar = calcularTotalPagar(cuota, plazo);
    const intereses = calcularIntereses(totalPagar, monto);
    
    return {
        monto: monto,
        plazo: plazo,
        tasaAnual: tasaAnual,
        cuotaMensual: cuota,
        totalPagar: totalPagar,
        totalIntereses: intereses
    };
}

// =====================================================
// NAVEGACIÓN Y UI
// =====================================================

/**
 * Toggle para menú móvil
 */
function initNavbar() {
    const toggle = document.getElementById('navbarToggle');
    const menu = document.getElementById('navbarMenu');
    
    if (toggle && menu) {
        toggle.addEventListener('click', function() {
            menu.classList.toggle('active');
            toggle.classList.toggle('active');
        });
        
        // Cerrar al hacer clic fuera
        document.addEventListener('click', function(e) {
            if (!toggle.contains(e.target) && !menu.contains(e.target)) {
                menu.classList.remove('active');
                toggle.classList.remove('active');
            }
        });
    }
}

/**
 * Toggle para mostrar/ocultar contraseña
 */
function togglePassword() {
    const passwordInput = document.getElementById('password');
    const eyeIcon = document.getElementById('eyeIcon');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        if (eyeIcon) {
            eyeIcon.innerHTML = `
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
            `;
        }
    } else {
        passwordInput.type = 'password';
        if (eyeIcon) {
            eyeIcon.innerHTML = `
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
            `;
        }
    }
}

/**
 * Scroll suave a elemento
 * @param {string} elementId
 */
function scrollToElement(elementId) {
    const element = document.getElementById(elementId);
    if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}

/**
 * Modal simple
 */
class Modal {
    constructor(id) {
        this.modal = document.getElementById(id);
        this.init();
    }
    
    init() {
        if (!this.modal) return;
        
        // Cerrar al hacer clic en el overlay
        this.modal.addEventListener('click', (e) => {
            if (e.target === this.modal) {
                this.close();
            }
        });
        
        // Cerrar con tecla ESC
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.isOpen()) {
                this.close();
            }
        });
    }
    
    open() {
        if (this.modal) {
            this.modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
    }
    
    close() {
        if (this.modal) {
            this.modal.classList.remove('active');
            document.body.style.overflow = '';
        }
    }
    
    isOpen() {
        return this.modal && this.modal.classList.contains('active');
    }
}

// =====================================================
// TABLAS Y DATATABLES
// =====================================================

/**
 * Filtrar tabla
 * @param {string} tableId - ID de la tabla
 * @param {string} searchValue - Valor a buscar
 */
function filterTable(tableId, searchValue) {
    const table = document.getElementById(tableId);
    if (!table) return;
    
    const rows = table.querySelectorAll('tbody tr');
    const search = searchValue.toLowerCase();
    
    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(search) ? '' : 'none';
    });
}

/**
 * Ordenar tabla
 * @param {string} tableId
 * @param {number} columnIndex
 * @param {boolean} ascending
 */
function sortTable(tableId, columnIndex, ascending = true) {
    const table = document.getElementById(tableId);
    if (!table) return;
    
    const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    
    rows.sort((a, b) => {
        const aValue = a.cells[columnIndex].textContent.trim();
        const bValue = b.cells[columnIndex].textContent.trim();
        
        // Intentar comparar como números
        const aNum = parseFloat(aValue.replace(/[^0-9.-]/g, ''));
        const bNum = parseFloat(bValue.replace(/[^0-9.-]/g, ''));
        
        if (!isNaN(aNum) && !isNaN(bNum)) {
            return ascending ? aNum - bNum : bNum - aNum;
        }
        
        // Comparar como texto
        return ascending ? 
            aValue.localeCompare(bValue) : 
            bValue.localeCompare(aValue);
    });
    
    rows.forEach(row => tbody.appendChild(row));
}

// =====================================================
// GRÁFICOS (Requiere Chart.js)
// =====================================================

/**
 * Crear gráfico de línea
 * @param {string} canvasId
 * @param {object} data
 */
function createLineChart(canvasId, data) {
    if (typeof Chart === 'undefined') {
        console.warn('Chart.js no está cargado');
        return;
    }
    
    const ctx = document.getElementById(canvasId);
    if (!ctx) return;
    
    new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

/**
 * Crear gráfico de barras
 * @param {string} canvasId
 * @param {object} data
 */
function createBarChart(canvasId, data) {
    if (typeof Chart === 'undefined') {
        console.warn('Chart.js no está cargado');
        return;
    }
    
    const ctx = document.getElementById(canvasId);
    if (!ctx) return;
    
    new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

// =====================================================
// COPIAR AL PORTAPAPELES
// =====================================================

/**
 * Copiar texto al portapapeles
 * @param {string} text
 */
async function copyToClipboard(text) {
    try {
        await navigator.clipboard.writeText(text);
        showAlert('Copiado al portapapeles', 'success', 2000);
    } catch (err) {
        // Fallback para navegadores antiguos
        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        showAlert('Copiado al portapapeles', 'success', 2000);
    }
}

// =====================================================
// LOADING SPINNER
// =====================================================

/**
 * Mostrar loading
 * @param {string} message
 */
function showLoading(message = 'Cargando...') {
    let loader = document.getElementById('global-loader');
    if (!loader) {
        loader = document.createElement('div');
        loader.id = 'global-loader';
        loader.innerHTML = `
            <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999;">
                <div style="background: white; padding: 2rem; border-radius: 0.5rem; text-align: center;">
                    <div class="spinner"></div>
                    <p style="margin-top: 1rem; color: #6b7280;">${message}</p>
                </div>
            </div>
        `;
        document.body.appendChild(loader);
    }
}

/**
 * Ocultar loading
 */
function hideLoading() {
    const loader = document.getElementById('global-loader');
    if (loader) {
        loader.remove();
    }
}

// =====================================================
// INICIALIZACIÓN
// =====================================================

/**
 * Ejecutar cuando el DOM esté listo
 */
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar navbar
    initNavbar();
    
    // Log de versión
    if (CACICPC.debug) {
        console.log('%c CACICPC v' + CACICPC.version + ' ', 'background: #2563eb; color: white; padding: 5px 10px; border-radius: 3px;');
    }
    
    // Validación automática de formularios
    const forms = document.querySelectorAll('form[data-validate]');
    forms.forEach(form => {
        form.addEventListener('submit', function(e) {
            if (!validateForm(form)) {
                e.preventDefault();
            }
        });
    });
});

// =====================================================
// EXPORTAR FUNCIONES GLOBALES
// =====================================================

window.CACICPC = CACICPC;
window.showAlert = showAlert;
window.confirmAction = confirmAction;
window.formatMoney = formatMoney;
window.formatDate = formatDate;
window.validateEmail = validateEmail;
window.validateCedula = validateCedula;
window.ajax = ajax;
window.validateForm = validateForm;
window.submitFormAjax = submitFormAjax;
window.calcularCuotaMensual = calcularCuotaMensual;
window.simularCredito = simularCredito;
window.togglePassword = togglePassword;
window.scrollToElement = scrollToElement;
window.Modal = Modal;
window.filterTable = filterTable;
window.sortTable = sortTable;
window.createLineChart = createLineChart;
window.createBarChart = createBarChart;
window.copyToClipboard = copyToClipboard;
window.showLoading = showLoading;
window.hideLoading = hideLoading;