document.addEventListener('DOMContentLoaded', function () {
    const componentList = document.getElementById('component-list');
    const canvas = document.getElementById('canvas');
    const initialCanvasMessage = canvas.querySelector('div');

    let componentCounter = 0;

    function clearInitialMessage() {
        if (canvas.contains(initialCanvasMessage)) {
            canvas.innerHTML = '';
        }
    }

    function addComponent(componentName) {
        fetch(`components/${componentName}.php`)
            .then(response => response.text())
            .then(html => {
                clearInitialMessage();

                componentCounter++;
                const componentId = `component-${componentCounter}`;

                const wrapper = document.createElement('div');
                wrapper.classList.add('component-wrapper');
                wrapper.id = componentId;
                wrapper.innerHTML = `
                    <div class="component-controls">
                        <button class="btn btn-sm btn-outline-secondary move-up">↑ Move Up</button>
                        <button class="btn btn-sm btn-outline-danger delete-component">Delete</button>
                    </div>
                    <div class="component-content">
                        ${html}
                    </div>
                `;
                canvas.appendChild(wrapper);
            });
    }

    componentList.addEventListener('click', function (e) {
        const navItem = e.target.closest('.nav-item');
        if (navItem) {
            e.preventDefault();
            const componentName = navItem.dataset.component;
            addComponent(componentName);
        }
    });

    canvas.addEventListener('click', function (e) {
        if (e.target.classList.contains('delete-component')) {
            const wrapper = e.target.closest('.component-wrapper');
            if (wrapper) {
                wrapper.remove();
            }
        }

        if (e.target.classList.contains('move-up')) {
            const wrapper = e.target.closest('.component-wrapper');
            if (wrapper && wrapper.previousElementSibling) {
                wrapper.parentNode.insertBefore(wrapper, wrapper.previousElementSibling);
            }
        }
    });
});