let historyStates = [];
let currentStateIndex = -1;
let currentElement = null;
let isEditMode = false;

// Các phần tử DOM cần thiết
const $elements = {
    toggleEditModeButton: $('#toggleEditMode'),
    tabBar: $('#tabBar'),
    textOptions: $('#textOptions'),
    imageOptions: $('#imageOptions'),
    boxOptions: $('#BoxOptions'),
    bgOptions: $('#bgOptions'),
    textColorInput: $('#textColor'),
    textBackgroundInput: $('#textBackground'),
    textContentInput: $('#textContent'),
    imageURLInput: $('#imageURL'),
    imageUploadInput: $('#imageUpload'),
    logoSizeInput: $('#logoSize'),
    sizeValueSpan: $('#sizeValue'),
    lineHeightInput: $('#lineHeight')
};

$(window).scroll(function () {
    $(".mode-edit").toggleClass('fixed', $(window).scrollTop() > 100);
});

// Chuyển đổi chế độ chỉnh sửa
$elements.toggleEditModeButton.on('click', function () {
    isEditMode = !isEditMode;
    $('.editable-element').toggleClass('editable', isEditMode);
    $elements.toggleEditModeButton.html(isEditMode ? '<i class="fas fa-sign-out-alt"></i> Thoát chỉnh sửa' : '<i class="far fa-edit"></i> Chỉnh sửa');
    $elements.tabBar.hide();
});

// Cập nhật màu sắc và ảnh
$elements.textColorInput.on('input', function () {
    updateElementColor('text', $(this).val());
});

$elements.textBackgroundInput.on('input', function () {
    updateElementColor('bg', $(this).val());
});

$elements.logoSizeInput.on('input', function () {
    updateLogoSize($(this).val());
});

$elements.lineHeightInput.on('input', function () {
    updateLineHeight($(this).val());
});

$elements.imageUploadInput.on('change', function (event) {
    handleImageUpload(event);
});

// Hàm bắt đầu chỉnh sửa
function startEditing(event, button) {
    if (!isEditMode) return;
    event.stopPropagation();
    currentElement = $(button).closest('.editable-element');
    $elements.tabBar.show();
    setupOptions();
}

// Thiết lập các tùy chọn cho các phần tử
function setupOptions() {
    const elementType = currentElement.data('type');
    const $title = currentElement.find('.title');

    if (elementType === 'box') {
        showBoxOptions();
    } else if (elementType === 'title') {
        showTextOptions($title);
    } else if (elementType === 'background') {
        showBgOptions();
    } else if (elementType === 'image') {
        showImageOptions();
    }
}

// Cập nhật màu sắc cho phần tử
function updateElementColor(type, color) {
    if (!currentElement) return;
    const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`;
    currentElement.find('.title').attr('class', function (i, c) {
        return c.split(' ').filter(cls => !cls.startsWith(type)).concat(className).join(' ');
    });
}

// Cập nhật kích thước logo
function updateLogoSize(size) {
    $elements.sizeValueSpan.text(`${size}px`);
    currentElement.find('img').css('width', `${size}px`);
}

// Cập nhật chiều cao dòng cho phần tử tiêu đề
function updateLineHeight(height) {
    if (currentElement && currentElement.data('type') === 'title') {
        currentElement.find('.title').css('line-height', `${height}px`);
    }
}

// Xử lý tải ảnh lên
function handleImageUpload(event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function () {
        currentElement.find('img').attr('src', reader.result);
    };
    reader.readAsDataURL(file);
}

// Áp dụng các thay đổi
function applyChanges() {
    if (!currentElement) return;
    const elementType = currentElement.data('type');

    if (elementType === 'title') {
        updateTextStyles();
    } else if (elementType === 'image') {
        updateImage();
    } else if (elementType === 'background') {
        updateBgStyles();
    }

    saveCurrentState();
    $elements.tabBar.hide();
}

// Cập nhật các thuộc tính kiểu chữ cho tiêu đề
function updateTextStyles() {
    const $title = currentElement.find('.title');
    $title.text($elements.textContentInput.val());
    updateElementColor('text', $elements.textColorInput.val());
    updateElementColor('bg', $elements.textBackgroundInput.val());
}

// Cập nhật ảnh
function updateImage() {
    const $img = currentElement.find('img');
    $img.attr('src', $elements.imageURLInput.val() || $img.attr('src'));
}

// Cập nhật background
function updateBgStyles() {
    updateElementColor('bg', $elements.textBackgroundInput.val());
}

// Lưu trạng thái hiện tại của trang
function saveCurrentState() {
    const currentHTML = document.documentElement.innerHTML;

    if (currentStateIndex < historyStates.length - 1) {
        historyStates = historyStates.slice(0, currentStateIndex + 1);
    }

    historyStates.push(currentHTML);
    currentStateIndex++;
}

// Quay lại trạng thái trước đó
function goBack() {
    if (currentStateIndex > 0) {
        currentStateIndex--;
        document.documentElement.innerHTML = historyStates[currentStateIndex];
    }
}

// Tiến về trạng thái sau
function goForward() {
    if (currentStateIndex < historyStates.length - 1) {
        currentStateIndex++;
        document.documentElement.innerHTML = historyStates[currentStateIndex];
    }
}


function showTextOptions($title) {
    $elements.textOptions.show();  // Hiển thị các tùy chọn văn bản
    $elements.boxOptions.hide();   // Ẩn các tùy chọn hộp
    $elements.imageOptions.hide(); // Ẩn các tùy chọn hình ảnh
    $elements.bgOptions.hide();    // Ẩn các tùy chọn nền

    // Điền các giá trị vào các ô input
    $elements.textContentInput.val($title.text().trim());  // Điền nội dung văn bản
    $elements.textColorInput.val(extractColor($title, 'text')); // Điền màu chữ
    $elements.textBackgroundInput.val(extractColor($title, 'bg')); // Điền màu nền
    $elements.lineHeightInput.val(parseFloat($title.css('line-height'))); // Điền chiều cao dòng
    $('#fontSize').val(parseFloat($title.css('font-size'))); // Điền cỡ chữ
    $('#fontFamily').val($title.css('font-family'));  // Điền font chữ
    $('#BgcolorCode').val(extractColor($title, 'bg')); // Điền màu nền vào ô input
    $('#colorCodeTitle').val(extractColor($title, 'text')); // Điền mã màu chữ vào ô input
}


function showBgOptions() {
    $elements.textOptions.hide();  // Ẩn các tùy chọn văn bản
    $elements.boxOptions.hide();   // Ẩn các tùy chọn hộp
    $elements.imageOptions.hide(); // Ẩn các tùy chọn hình ảnh
    $elements.bgOptions.show();    // Hiển thị các tùy chọn nền

    const bgColor = extractColor(currentElement, 'bg');  // Trích xuất màu nền hiện tại
    $('#changeInputBg').val(bgColor);  // Điền vào ô input thay đổi màu nền
    $('#InputCodeBg').val(bgColor);   // Điền vào ô input màu nền
    $('#borderColorBg').val(extractColor(currentElement, 'border'))
}


function showImageOptions() {
    $elements.textOptions.hide();  // Ẩn các tùy chọn văn bản
    $elements.boxOptions.hide();   // Ẩn các tùy chọn hộp
    $elements.bgOptions.hide();    // Ẩn các tùy chọn nền
    $elements.imageOptions.show(); // Hiển thị các tùy chọn hình ảnh

    const $img = currentElement.find('img');  // Lấy phần tử hình ảnh
    $elements.imageURLInput.attr('src', $img.attr('src'));  // Điền URL của hình ảnh vào ô input
    $elements.imageUploadInput.val('');  // Xóa giá trị của ô input tải ảnh lên
    $elements.logoSizeInput.val($img.width());  // Điền kích thước logo vào ô input
    $elements.sizeValueSpan.text(`${$img.width()}px`);  // Hiển thị kích thước logo
}

function showBoxOptions() {
    $elements.boxOptions.show();
    $elements.textOptions.hide();
    $elements.imageOptions.hide();
    const $title = currentElement.find('.title');
    $('#BackgroundColor').val(extractColor(currentElement, 'bg'));
    $('#InputCodeBox').val(extractColor(currentElement, 'bg'));
    $('#changeInputBox').val(extractColor(currentElement, 'bg'));
    $elements.textContentInput.val($title.text().trim());
    $elements.textColorInput.val(extractColor($title, 'text'));
    $elements.textBackgroundInput.val(extractColor($title, 'bg'));
    $elements.lineHeightInput.val(parseFloat($title.css('line-height')));
    $('#fontSize').val(parseFloat($title.css('font-size')));
    $('#fontFamily').val($title.css('font-family'));
    var a = $('#BgcolorCode').val(extractColor($title, 'bg'));
    console.log(a)
    $('#colorCodeTitle').val(extractColor($title, 'text'));
    $('#borderColorBox').val(extractColor(currentElement, 'border'))
}


function extractColor($element, type) {
    // Tạo regex để tìm các lớp màu (chẳng hạn như text-[#FF5733])
    const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`);

    // Tìm kiếm lớp màu trong các lớp của phần tử
    const match = $element.attr('class').match(regex);

    // Nếu tìm thấy lớp phù hợp, trả về màu sắc, nếu không trả về màu mặc định là #000000
    return match ? match[1] : '#000000';
}

function updateColorPicker(event, type) {
    const textColor = $("#textColor");
    const textCodeColor = $("#colorCodeTitle");
    const BgColor = $("#textBackground");
    let element = '';
    if (currentElement.data('type') === 'title') {
        element = currentElement.find('.title');

    } else {
        element = currentElement;
    }

    if (type === 'text') {
        const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test(textCodeColor.val());
        if (isValidHex) {
            textColor.val(textCodeColor.val());
            element.css('color', textCodeColor.val());
        }
    } else if (type === 'background') {
        const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test($(event.target).val());
        if (isValidHex) {
            BgColor.val($(event.target).val());
            element.css('background', $(event.target).val());
        }
    } else if (type === 'box') {
        const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test($(event.target).val());
        if (isValidHex) {
            BgColor.val($(event.target).val());
            element.find('.title').css('background', $(event.target).val());
        }
    }
}

function syncColorInputs(event, type) {
    const inputColorText = $('#colorCodeTitle');
    let inputBg = '';
    let Bg = '';
    if (currentElement.data('type') === 'title' || currentElement.data('type') === 'box') {
        inputBg = $('#BgcolorCode');
        bg = $(currentElement).find('.title');
    } else {
        inputBg = $('#InputCodeBg');
        bg = $(currentElement);
    }

    if (type == 'text' || currentElement.data('type') === 'box') {
        inputColorText.val($(event.target).val());
    } else {
        inputBg.val($(event.target).val());
        bg.css('background', $(event.target).val());
    }

}

function updateBorder(type, key, value) {
    let element = '';
    if (key == 'background') {
        element = currentElement;
    } else if (key == 'text') {
        element = currentElement.find('.title');
    }

    if (type == 'border-width') {
        element.css('border-width', value + 'px');
    } else if (type == 'border-color') {
        element.css('border-color', value);
    } else if (type == 'border-style') {
        element.css('border-style', value);
    }
}


function updatePosition(event, action) {
    $('.edit-position').removeClass('active')
    $(event.target).addClass('active');
    console.log(action)
    if (action == 'left') {
        currentElement.find('.title').css({ 'margin': 'auto auto auto 0', 'justify-content': 'start' });
    } else if (action == 'center') {
        currentElement.find('.title').css({ 'margin': '0 auto', 'justify-content': 'center' });
    } else if (action == 'right') {
        console.log('aaa', currentElement)
        currentElement.find('.title').css({ 'margin': 'auto 0 auto auto', 'justify-content': 'end' });
    }
}


function updateSizeBox(type, value) {
    if (type == 'width') {
        currentElement.find('.title').css('width', value + 'px')
    } else if (type == 'height') {
        currentElement.find('.title').css('height', value + 'px')
    }
}


function updateBoderRadius(type, key, value) {
    let element = '';
    if (key == 'background') {
        element = currentElement;
    } else if (key == 'text') {
        element = currentElement.find('.title');
    }

    if (type == 'top-left') {
        element.css('border-top-left-radius', value + 'px');
    } else if (type == 'top-right') {
        element.css('border-top-right-radius', value + 'px');
    } else if (type == 'bottom-left') {
        element.css('border-bottom-left-radius', value + 'px');
    } else if (type == 'bottom-right') {
        element.css('border-bottom-right-radius', value + 'px');
    }
}


function formatText(command, value) {
    let $title = '';
    if (currentElement.data('type') === 'title' || currentElement.data('type') == 'box') {
        $title = currentElement.find('.title');
    } else {
        $title = currentElement;
    }
    switch (command) {
        case 'size':
            $title.css('font-size', `${value}px`);
            break;
        case 'bold':
            $title.toggleClass('font-bold');
            break;
        case 'italic':
            $title.toggleClass('italic');
            break;
        case 'underline':
            $title.toggleClass('underline');
            break;
        case 'line-through':
            $title.toggleClass('line-through');
            break;
        case 'justifyLeft':
            $title.removeClass('text-center text-right text-justify').addClass('text-left');
            break;
        case 'justifyCenter':
            $title.removeClass('text-left text-right text-justify').addClass('text-center');
            break;
        case 'justifyRight':
            $title.removeClass('text-left text-center text-justify').addClass('text-right');
            break;
        case 'justifyFull':
            $title.removeClass('text-left text-center text-right').addClass('text-justify');
            break;
    }
}

// hủy chỉnh sửa
function cancelEdit() {
    $elements.tabBar.hide();
}