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'));
    $('#BgcolorCode').val(extractColor($title, 'bg'));
    $('#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 {
            alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733).");
        }
    } 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 {
            alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733).");
        }
    }
}

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

    if (type == 'text') {
        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);
    }
}



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