const workArea = document.getElementById('workArea');
const generalContextMenu = document.getElementById('generalContextMenu');
const toolbar = document.getElementById('toolbar'); // Reference to the toolbar
let currentElement = null; // Track the selected element

// Function to handle right-click menu display for work area
workArea.addEventListener('contextmenu', function (e) {
    e.preventDefault();
    
    // Show the general context menu at the mouse location
    generalContextMenu.style.display = 'block';
    generalContextMenu.style.left = `${e.pageX}px`;
    generalContextMenu.style.top = `${e.pageY}px`;

    // Hide the object context menu (we are not using it anymore)
    currentElement = e.target; // Store the clicked element if any
});

// Hide the context menu when clicking anywhere in the work area
workArea.addEventListener('click', function () {
    generalContextMenu.style.display = 'none'; // Hide context menu
});

// Close the context menu when clicking outside the work area
document.addEventListener('click', function (e) {
    if (!workArea.contains(e.target) && !generalContextMenu.contains(e.target)) {
        generalContextMenu.style.display = 'none';
    }
});

// Add text object
function addText() {
    const textElement = document.createElement('div');
    textElement.className = 'element text';
    textElement.contentEditable = true;
    textElement.textContent = 'New Text';
    textElement.style.position = 'absolute';
    textElement.style.left = `${parseInt(generalContextMenu.style.left) - workArea.offsetLeft}px`;
    textElement.style.top = `${parseInt(generalContextMenu.style.top) - workArea.offsetTop}px`;
    workArea.appendChild(textElement);
    makeMovable(textElement);
    addResizeHandles(textElement);
}

// Add shape object
function addShape(shape) {
    const shapeElement = document.createElement('div');
    shapeElement.className = `element ${shape}`;
    shapeElement.style.position = 'absolute';
    shapeElement.style.left = `${parseInt(generalContextMenu.style.left) - workArea.offsetLeft}px`;
    shapeElement.style.top = `${parseInt(generalContextMenu.style.top) - workArea.offsetTop}px`;

    // Set the shape-specific styles
    if (shape === 'triangle') {
        shapeElement.style.width = '0';
        shapeElement.style.height = '0';
        shapeElement.style.borderLeft = '50px solid transparent';
        shapeElement.style.borderRight = '50px solid transparent';
        shapeElement.style.borderBottom = '100px solid lightcoral'; // Default triangle color
    } else if (shape === 'circle') {
        shapeElement.style.width = '100px';
        shapeElement.style.height = '100px';
        shapeElement.style.borderRadius = '50%';
        shapeElement.style.backgroundColor = 'lightgreen'; // Default circle color
    } else if (shape === 'rectangle') {
        shapeElement.style.width = '150px';
        shapeElement.style.height = '100px';
        shapeElement.style.backgroundColor = 'lightblue'; // Default rectangle color
    }

    workArea.appendChild(shapeElement);
    makeMovable(shapeElement);
    addResizeHandles(shapeElement);
}

// Make elements movable
function makeMovable(element) {
    element.addEventListener('mousedown', function (e) {
        e.stopPropagation();
        currentElement = element;
        let startX = e.clientX - element.offsetLeft;
        let startY = e.clientY - element.offsetTop;

        function moveElement(e) {
            let newX = e.clientX - startX;
            let newY = e.clientY - startY;
            element.style.left = `${newX}px`;
            element.style.top = `${newY}px`;
        }

        document.addEventListener('mousemove', moveElement);
        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', moveElement);
        }, { once: true });
    });
}

// Add resize handles to elements
function addResizeHandles(element) {
    const handle = document.createElement('div');
    handle.className = 'resize-handle';
    element.appendChild(handle);

    handle.addEventListener('mousedown', function (e) {
        e.stopPropagation();
        let startX = e.clientX;
        let startY = e.clientY;
        let startWidth = parseInt(window.getComputedStyle(element).width, 10);
        let startHeight = parseInt(window.getComputedStyle(element).height, 10);

        function resizeElement(e) {
            element.style.width = `${startWidth + e.clientX - startX}px`;
            element.style.height = `${startHeight + e.clientY - startY}px`;
        }

        document.addEventListener('mousemove', resizeElement);
        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', resizeElement);
        }, { once: true });
    });
}

// Event listeners for adding elements from the context menu
document.getElementById('addText').addEventListener('click', function () {
    addText();
    generalContextMenu.style.display = 'none';
});

document.getElementById('addCircle').addEventListener('click', function () {
    addShape('circle');
    generalContextMenu.style.display = 'none';
});

document.getElementById('addRectangle').addEventListener('click', function () {
    addShape('rectangle');
    generalContextMenu.style.display = 'none';
});

document.getElementById('addTriangle').addEventListener('click', function () {
    addShape('triangle');
    generalContextMenu.style.display = 'none';
});


// Function to display the toolbar when an element is clicked
workArea.addEventListener('click', function (e) {
    if (e.target.classList.contains('element')) {
        currentElement = e.target; // Set the current element
        showToolbar(); // Display the toolbar
    } else {
        hideToolbar(); // Hide the toolbar if clicked outside an element
    }
});

// Function to show the toolbar at the top
function showToolbar() {
    toolbar.style.display = 'block';
    toolbar.style.top = '0'; // Position toolbar at the top of the work area
    updateToolbar(); // Update the toolbar with the current element's properties
}

// Function to hide the toolbar
function hideToolbar() {
    toolbar.style.display = 'none';
    currentElement = null; // Clear the selected element
}

// Function to update the toolbar based on the selected element's properties
function updateToolbar() {
    if (currentElement.classList.contains('text')) {
        // Example of updating the toolbar for text elements
        document.getElementById('textOptions').style.display = 'block';
        document.getElementById('shapeOptions').style.display = 'none';
        
        // Update toolbar values for text properties
        document.getElementById('fontSize').value = window.getComputedStyle(currentElement).fontSize.replace('px', '');
        document.getElementById('fontColor').value = rgbToHex(window.getComputedStyle(currentElement).color);
    } else {
        // Example of updating the toolbar for shape elements
        document.getElementById('textOptions').style.display = 'none';
        document.getElementById('shapeOptions').style.display = 'block';
        
        // Update toolbar values for shape properties (color, etc.)
        if (currentElement.classList.contains('triangle')) {
            document.getElementById('shapeColor').value = rgbToHex(window.getComputedStyle(currentElement).borderBottomColor);
        } else {
            document.getElementById('shapeColor').value = rgbToHex(window.getComputedStyle(currentElement).backgroundColor);
        }
    }
    // Update toolbar values for text properties including font family

    if (currentElement.classList.contains('text')) {
        document.getElementById('textOptions').style.display = 'block';
        document.getElementById('shapeOptions').style.display = 'none';

        // Update toolbar values for text properties
        document.getElementById('fontSize').value = window.getComputedStyle(currentElement).fontSize.replace('px', '');
        document.getElementById('fontColor').value = rgbToHex(window.getComputedStyle(currentElement).color);
        
        // Set the selected font family
        const fontFamily = window.getComputedStyle(currentElement).fontFamily.replace(/['"]/g, "").split(",")[0];
        document.getElementById('fontFamily').value = fontFamily;
    } else {
        document.getElementById('textOptions').style.display = 'none';
        document.getElementById('shapeOptions').style.display = 'block';

        // Shape properties (color, etc.)
        if (currentElement.classList.contains('triangle')) {
            document.getElementById('shapeColor').value = rgbToHex(window.getComputedStyle(currentElement).borderBottomColor);
        } else {
            document.getElementById('shapeColor').value = rgbToHex(window.getComputedStyle(currentElement).backgroundColor);
        }
    }
}

// Event listener for font family change
document.getElementById('fontFamily').addEventListener('change', function () {
    if (currentElement && currentElement.classList.contains('text')) {
        currentElement.style.fontFamily = this.value; // Set the font family of the current text element
    }
});

// Utility function to convert RGB to Hex color
function rgbToHex(rgb) {
    const result = rgb.match(/\d+/g).map(function (x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    });
    return `#${result.join('')}`;
}

// Event listeners to update the selected element's properties via the toolbar
document.getElementById('fontSize').addEventListener('input', function () {
    if (currentElement && currentElement.classList.contains('text')) {
        currentElement.style.fontSize = `${this.value}px`;
    }
});

document.getElementById('fontColor').addEventListener('input', function () {
    if (currentElement && currentElement.classList.contains('text')) {
        currentElement.style.color = this.value;
    }
});

document.getElementById('shapeColor').addEventListener('input', function () {
    if (currentElement && currentElement.classList.contains('triangle')) {
        currentElement.style.borderBottomColor = this.value;
    } else if (currentElement && (currentElement.classList.contains('circle') || currentElement.classList.contains('rectangle'))) {
        currentElement.style.backgroundColor = this.value;
    }
});

// Add resize handles to elements
function addResizeHandles(element) {
    const handle = document.createElement('div');
    handle.className = 'resize-handle';
    element.appendChild(handle);

    handle.addEventListener('mousedown', function (e) {
        e.stopPropagation(); // Prevent triggering other event listeners

        // Store initial dimensions and mouse position
        const startX = e.clientX;
        const startY = e.clientY;
        const startWidth = parseInt(window.getComputedStyle(element).width, 10);
        const startHeight = parseInt(window.getComputedStyle(element).height, 10);

        function resizeElement(e) {
            // Calculate new dimensions
            const newWidth = Math.max(startWidth + (e.clientX - startX), 20); // Minimum width
            const newHeight = Math.max(startHeight + (e.clientY - startY), 20); // Minimum height

            // Apply new dimensions
            element.style.width = `${newWidth}px`;
            element.style.height = `${newHeight}px`;
        }

        // Add event listeners for resizing
        document.addEventListener('mousemove', resizeElement);
        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', resizeElement); // Clean up
        }, { once: true });
    });
}
// Function to show the toolbar when an element is clicked
function showToolbar() {
    toolbar.style.display = 'flex'; // Ensure toolbar is displayed as flex
    toolbar.style.top = '68px'; // Slide down to the top of the work area
    updateToolbar(); // Update the toolbar with the current element's properties
}

// Function to hide the toolbar
function hideToolbar() {
    toolbar.style.top = '10px'; // Move the toolbar back up (off-screen)
    currentElement = null; // Clear the selected element
}

// Hide the toolbar initially
hideToolbar();

// Event listener for clicks inside the work area
workArea.addEventListener('click', function(e) {
    if (e.target.classList.contains('element')) {
        currentElement = e.target; // Set the clicked element as current
        showToolbar(); // Show the toolbar when an element is clicked
    }
});

// Event listener for clicks outside the work area and the toolbar
document.addEventListener('click', function(e) {
    const clickedInsideWorkArea = workArea.contains(e.target);
    const clickedInsideToolbar = toolbar.contains(e.target);
    
    // If clicked outside both work area and toolbar, hide the toolbar
    if (!clickedInsideWorkArea && !clickedInsideToolbar) {
        hideToolbar();
    }
});
// Event listener for increasing font size
document.getElementById('increaseFontSize').addEventListener('click', function() {
    let fontSizeInput = document.getElementById('fontSizeInput');
    fontSizeInput.value = parseInt(fontSizeInput.value) + 1; // Increment by 1
    updateFontSize(fontSizeInput.value); // Apply the change
});

// Event listener for decreasing font size
document.getElementById('decreaseFontSize').addEventListener('click', function() {
    let fontSizeInput = document.getElementById('fontSizeInput');
    if (fontSizeInput.value > 1) {
        fontSizeInput.value = parseInt(fontSizeInput.value) - 1; // Decrease by 1
        updateFontSize(fontSizeInput.value); // Apply the change
    }
});

// Apply font size when the user presses Enter or clicks outside the input box (blur event)
const fontSizeInput = document.getElementById('fontSizeInput');

// Event listener for blur (click outside the input field)
fontSizeInput.addEventListener('blur', function() {
    applyFontSize();
});

// Event listener for pressing "Enter" (key press inside the input field)
fontSizeInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') { // Check if "Enter" key is pressed
        applyFontSize();
    }
});

// Function to apply the font size
function applyFontSize() {
    let fontSizeValue = fontSizeInput.value;

    // Check if the entered value is a valid number and greater than 0
    if (fontSizeValue && !isNaN(fontSizeValue) && fontSizeValue > 0) {
        updateFontSize(fontSizeValue); // Apply the new font size if valid
    } else {
        // If the value is invalid (<= 0), reset the input to the current font size
        fontSizeInput.value = parseInt(window.getComputedStyle(currentElement).fontSize, 10);
    }
}


// Function to apply the font size to the current element
function updateFontSize(size) {
    if (currentElement && currentElement.classList.contains('text')) {
        currentElement.style.fontSize = `${size}px`; // Apply new font size
    }
}
// Add this block after the font size, font color, and font family event listeners

// Event listener for increasing font size
document.getElementById('increaseFontSize').addEventListener('click', function() {
    let fontSizeInput = document.getElementById('fontSizeInput');
    fontSizeInput.value = parseInt(fontSizeInput.value) + 1; // Increment by 1
    updateFontSize(fontSizeInput.value); // Apply the change
});

// Event listener for decreasing font size
document.getElementById('decreaseFontSize').addEventListener('click', function() {
    let fontSizeInput = document.getElementById('fontSizeInput');
    if (fontSizeInput.value > 1) {
        fontSizeInput.value = parseInt(fontSizeInput.value) - 1; // Decrease by 1
        updateFontSize(fontSizeInput.value); // Apply the change
    }
});
window.onload = function () {
    const downloadPNGButton = document.createElement('button');
    const downloadHTMLButton = document.createElement('button');

    downloadPNGButton.textContent = 'Download PNG';


    // Style the buttons
    [downloadPNGButton, downloadHTMLButton].forEach(btn => {
        btn.style.position = 'absolute';
        btn.style.top = '6px';
        btn.style.right = btn === downloadPNGButton ? '12px' : '10px';
        btn.style.padding = '10px 12px';
        btn.style.background = '#fff';
        btn.style.color = '#000';
        btn.style.border = 'none';
        btn.style.cursor = 'pointer';
        btn.style.margin = '5px';
        btn.style.borderRadius = '5px';
        btn.style.fontWeight = 'bold';
        btn.style.fontFamily = 'Poppins';
    });

    document.body.appendChild(downloadPNGButton);


    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
    document.head.appendChild(script);

    function disableEditing() {
        const moveableElements = document.querySelectorAll('.moveable');
        moveableElements.forEach(el => {
            el.style.pointerEvents = 'none';
            el.classList.remove('resizable');
        });

        const resizeHandles = document.querySelectorAll('.resize-handle');
        resizeHandles.forEach(handle => handle.style.display = 'none');

        const editableTextElements = document.querySelectorAll('[contenteditable="true"]');
        editableTextElements.forEach(el => el.setAttribute('contenteditable', 'false'));
    }

    function restoreEditing() {
        const moveableElements = document.querySelectorAll('.moveable');
        moveableElements.forEach(el => {
            el.style.pointerEvents = 'auto';
            el.classList.add('resizable');
        });

        const resizeHandles = document.querySelectorAll('.resize-handle');
        resizeHandles.forEach(handle => handle.style.display = 'block');

        const editableTextElements = document.querySelectorAll('[contenteditable="false"]');
        editableTextElements.forEach(el => el.setAttribute('contenteditable', 'true'));
    }

    // Download PNG functionality
    downloadPNGButton.addEventListener('click', function () {
        disableEditing();

        html2canvas(document.getElementById('workArea')).then(canvas => {
            let link = document.createElement('a');
            link.download = 'design.png';
            link.href = canvas.toDataURL('image/png');
            link.click();

            restoreEditing();
        });
    });

    // Download HTML functionality
    downloadHTMLButton.addEventListener('click', function () {
        const title = prompt('Enter the title for your HTML file:', 'My Design');
        
        if (title) {
            disableEditing();

            const workArea = document.getElementById('workArea');
            let htmlContent = workArea.outerHTML;

            // Create the HTML content with required styles for full-screen fit
            htmlContent = `
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>${title}</title>
                    <style>
                        html, body {
                            height: 100%;
                            margin: 0;
                            padding: 0;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            overflow: hidden;
                        }

                        #workArea {
                            width: 100%;
                            height: 100%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: white;
                            overflow: hidden;
                            box-sizing: border-box;
                        }

                        * {
                            box-sizing: border-box;
                        }

                        /* Ensure the elements inside workArea fit within the available space */
                        .moveable {
                            position: absolute;
                        }

                        .resize-handle {
                            display: none; /* Hide resize handles after export */
                        }

                        [contenteditable="false"] {
                            pointer-events: none; /* Make text non-editable */
                        }
                    </style>
                </head>
                <body>
                    ${htmlContent}
                </body>
                </html>
            `;

            let blob = new Blob([htmlContent], { type: 'text/html' });
            let link = document.createElement('a');
            link.download = `${title}.html`;
            link.href = URL.createObjectURL(blob);
            link.click();
        }
    });
};