$(document).ready(function () {
    loadColors();
    setupColorPicker();
    setupColorNameGenerator();
});

function loadColors() {
    $.ajax({
        url: 'database/model/colores.php',
        type: 'POST',
        data: { "action": "getColores" },
        success: function (response) {
            let colors = JSON.parse(response);
            $('#marcasTable').DataTable({
                "paging": true,
                "pageLength": 5,
                "lengthMenu": [5, 10, 50, 100],
                "searching": true,
                "info": true,
                "ordering": true,
                "processing": true,
                "data": colors,
                "columns": [
                    {
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    { "data": "nombre" },
                    { "data": "codigo_hex" },
                    {
                        "data": "codigo_hex",
                        "render": function (data, type, row) {
                            return `<div style="width: 30px; height: 30px; background-color: ${data}; border: 1px solid #ddd; border-radius: 3px; display: inline-block;"></div>`;
                        }
                    },
                    {
                        "data": "status",
                        "render": function (data, type, row) {
                            if (data == 1) {
                                return '<span class="badge text-bg-success">Activo</span>';
                            } else {
                                return '<span class="badge text-bg-danger">No Activo</span>';
                            }
                        }
                    },
                    {
                        "data": null,
                        "render": function (data, type, row) {
                            return `<div class="buttons" role="group" aria-label="Basic example">
                                <button class="btn btn-primary btn-sm" onclick="editColor(${row.id})"><i class="fa-solid fa-pen-to-square"></i></button>
                                <button class="btn btn-danger btn-sm" onclick="deleteColor(${row.id})"><i class="fa-solid fa-trash"></i></button>
                            </div>`;
                        }
                    }
                ],
                "language": {
                    "url": "es-ES.json"
                }
            });
        },
        error: function (xhr, status, error) {
            console.error("AJAX error:", xhr.responseText);
        }
    });
}

function setupColorPicker() {
    // Sincronizar color picker con input de texto
    $('#color_picker').on('input', function() {
        const hexValue = $(this).val();
        $('#codigo_hex').val(hexValue);
        updateColorPreview(hexValue);
    });

    // Validar y actualizar cuando se escribe manualmente
    $('#codigo_hex').on('input', function() {
        let hexValue = $(this).val();
        
        // Agregar # si no lo tiene
        if (hexValue && !hexValue.startsWith('#')) {
            hexValue = '#' + hexValue;
            $(this).val(hexValue);
        }
        
        // Validar formato hex
        if (isValidHex(hexValue)) {
            $('#color_picker').val(hexValue);
            updateColorPreview(hexValue);
        }
    });
}

function setupColorNameGenerator() {
    // Generar código hex automáticamente basado en el nombre del color
    $('#nombre').on('input', function() {
        const colorName = $(this).val().toLowerCase().trim();
        
        if (colorName && !$('#id_color').val()) { // Solo generar si es nuevo color
            const hexColor = generateHexFromColorName(colorName);
            $('#codigo_hex').val(hexColor);
            $('#color_picker').val(hexColor);
            updateColorPreview(hexColor);
        }
    });
}

function generateHexFromColorName(colorName) {
    const colorMap = {
        // Colores básicos
        'rojo': '#FF0000',
        'azul': '#0000FF',
        'verde': '#00FF00',
        'amarillo': '#FFFF00',
        'negro': '#000000',
        'blanco': '#FFFFFF',
        'gris': '#808080',
        'rosa': '#FFC0CB',
        'morado': '#800080',
        'naranja': '#FFA500',
        'marrón': '#A52A2A',
        'café': '#A52A2A',
        'violeta': '#8A2BE2',
        'turquesa': '#40E0D0',
        'coral': '#FF7F50',
        'lima': '#00FF00',
        'dorado': '#FFD700',
        'plateado': '#C0C0C0',
        'beige': '#F5F5DC',
        'crema': '#FFFDD0',
        
        // Variaciones de azul
        'azul marino': '#000080',
        'azul cielo': '#87CEEB',
        'azul claro': '#ADD8E6',
        'azul oscuro': '#00008B',
        'azul real': '#4169E1',
        'celeste': '#87CEEB',
        
        // Variaciones de rojo
        'rojo claro': '#FF6B6B',
        'rojo oscuro': '#8B0000',
        'bermellón': '#E34234',
        'carmesí': '#DC143C',
        'granate': '#800000',
        
        // Variaciones de verde
        'verde claro': '#90EE90',
        'verde oscuro': '#006400',
        'verde lima': '#32CD32',
        'verde oliva': '#808000',
        'esmeralda': '#50C878',
        
        // Otros
        'púrpura': '#800080',
        'índigo': '#4B0082',
        'magenta': '#FF00FF',
        'cian': '#00FFFF',
        'aqua': '#00FFFF'
    };
    
    // Buscar coincidencia exacta
    if (colorMap[colorName]) {
        return colorMap[colorName];
    }
    
    // Buscar coincidencia parcial
    for (const [name, hex] of Object.entries(colorMap)) {
        if (colorName.includes(name) || name.includes(colorName)) {
            return hex;
        }
    }
    
    // Si no se encuentra, generar un color basado en el hash del nombre
    return generateHashColor(colorName);
}

function generateHashColor(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    
    const color = (hash & 0x00FFFFFF).toString(16).toUpperCase();
    return '#' + '00000'.substring(0, 6 - color.length) + color;
}

function updateColorPreview(hexColor) {
    const preview = $('#color_preview');
    if (isValidHex(hexColor)) {
        preview.css('background-color', hexColor);
        
        // Determinar si usar texto claro u oscuro
        const isDark = isColorDark(hexColor);
        preview.css('color', isDark ? '#ffffff' : '#000000');
        preview.text(hexColor);
    } else {
        preview.css('background-color', '#ffffff');
        preview.css('color', '#666');
        preview.text('Color no válido');
    }
}

function isValidHex(hex) {
    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(hex);
}

function isColorDark(hex) {
    // Convertir hex a RGB
    const r = parseInt(hex.substr(1, 2), 16);
    const g = parseInt(hex.substr(3, 2), 16);
    const b = parseInt(hex.substr(5, 2), 16);
    
    // Calcular luminancia
    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    return luminance < 0.5;
}

$("#addColor").on("submit", function (e) {
    e.preventDefault();

    let nombre = $("#nombre").val().trim();
    let codigoHex = $("#codigo_hex").val().trim();

    if (!nombre || !codigoHex) {
        Swal.fire({
            icon: "error",
            title: "Error",
            text: "Todos los campos son obligatorios"
        });
        return;
    }

    if (!isValidHex(codigoHex)) {
        Swal.fire({
            icon: "error",
            title: "Error",
            text: "El código hex no es válido"
        });
        return;
    }

    let formData = new FormData(this);
    let action = $("#id_color").val() ? "updateColor" : "createColor";
    formData.append("action", action);

    $.ajax({
        url: "database/model/colores.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            try {
                let result = JSON.parse(response);
                Swal.fire({
                    icon: result.status,
                    title: result.message,
                    showConfirmButton: false,
                    timer: 1500
                }).then(() => {
                    if (result.status === "success") {
                        location.reload();
                    }
                });
            } catch (e) {
                console.error(e);
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: "Error al procesar la respuesta"
                });
            }
        },
        error: function (xhr, status, error) {
            console.error("Error:", status, error, xhr);
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Ocurrió un error al guardar el color"
            });
        }
    });
});

function editColor(id) {
    $.ajax({
        url: "database/model/colores.php",
        type: "POST",
        data: { "action": "getColor", "id": id },
        success: function (response) {
            let color = JSON.parse(response);
            if (color) {
                $("#id_color").val(color.id);
                $("#nombre").val(color.nombre);
                $("#codigo_hex").val(color.codigo_hex);
                $("#color_picker").val(color.codigo_hex);
                updateColorPreview(color.codigo_hex);
                $("#addColorModalLabel").text("Editar color");
                $("#addColorModal").modal("show");
                $("#btn-save-color").text("Actualizar color");
            }
        },
        error: function (error) {
            console.log(error);
        }
    });
}

function deleteColor(id) {
    Swal.fire({
        title: "¿Estás seguro?",
        text: "No podrás revertir esto",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Sí, eliminar",
        cancelButtonText: "Cancelar"
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: "database/model/colores.php",
                type: "POST",
                data: { "action": "deleteColor", "id": id },
                success: function (response) {
                    let result = JSON.parse(response);
                    Swal.fire({
                        icon: result.status,
                        title: result.message,
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        if (result.status === "success") {
                            location.reload();
                        }
                    });
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
    });
}

// Limpiar formulario al cerrar modal
$('#addColorModal').on('hidden.bs.modal', function () {
    $(this).find('form')[0].reset();
    $("#addColorModalLabel").text("Añadir color");
    $("#btn-save-color").text("Guardar color");
    $("#id_color").val("");
    updateColorPreview('#ffffff');
});