class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .sidebar {
                    background: white;
                    border-radius: 12px;
                    padding: 1.5rem;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                }
                
                .sidebar-section {
                    margin-bottom: 2rem;
                }
                
                .sidebar-title {
                    font-size: 1.125rem;
                    font-weight: 600;
                    color: #1f2937;
                    margin-bottom: 1rem;
                    display: flex;
                    align-items: center;
                }
                
                .sidebar-title i {
                    margin-right: 0.5rem;
                }
                
                .element-btn {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    padding: 0.75rem 1rem;
                    border: 1px solid #e5e7eb;
                    border-radius: 8px;
                    margin-bottom: 0.5rem;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    background: white;
                }
                
                .element-btn:hover {
                    background: #f3f4f6;
                    border-color: #3B82F6;
                }
                
                .element-btn i {
                    margin-right: 0.5rem;
                }
                
                .slide-thumbnail {
                    width: 100%;
                    aspect-ratio: 16/9;
                    background: #f8fafc;
                    border: 2px dashed #cbd5e1;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 0.75rem;
                    cursor: pointer;
                    transition: all 0.2s ease;
                }
                
                .slide-thumbnail:hover {
                    border-color: #3B82F6;
                    background: #eff6ff;
                }
                
                .slide-thumbnail.active {
                    border-color: #1E40AF;
                    background: #dbeafe;
                }
            </style>
            <div class="sidebar">
                <div class="sidebar-section">
                    <h3 class="sidebar-title">
                        <i data-feather="plus"></i>
                        Add Elements
                    </h3>
                    <button class="element-btn" data-type="text">
                        <i data-feather="type"></i>
                        Text Box
                    </button>
                    <button class="element-btn" data-type="image">
                        <i data-feather="image"></i>
                        Image
                    </button>
                    <button class="element-btn" data-type="shape">
                        <i data-feather="square"></i>
                        Shape
                    </button>
                    <button class="element-btn" data-type="chart">
                        <i data-feather="bar-chart-2"></i>
                        Chart
                    </button>
                </div>
                
                <div class="sidebar-section">
                    <h3 class="sidebar-title">
                        <i data-feather="layers"></i>
                        Slides
                    </h3>
                    <div class="slide-thumbnail active">
                        <i data-feather="file-text" class="text-gray-400"></i>
                    </div>
                    <div class="slide-thumbnail">
                        <i data-feather="file-text" class="text-gray-400"></i>
                    </div>
                    <div class="slide-thumbnail">
                        <i data-feather="file-text" class="text-gray-400"></i>
                    </div>
                </div>
                
                <div class="sidebar-section">
                    <h3 class="sidebar-title">
                        <i data-feather="settings"></i>
                        Properties
                    </h3>
                    <div class="property-control">
                        <label class="block text-sm text-gray-600 mb-1">Font Size</label>
                        <input type="range" min="8" max="72" value="16" class="w-full">
                    </div>
                </div>
            </div>
        `;
        
        // Add event listeners for element buttons
        setTimeout(() => {
            const buttons = this.shadowRoot.querySelectorAll('.element-btn');
            buttons.forEach(button => {
                button.addEventListener('click', () => {
                    const type = button.getAttribute('data-type');
                    this.addElement(type);
                });
            }, 100);
        });
    }
    
    addElement(type) {
        const canvasContainer = document.getElementById('canvasContainer');
        let newElement;
        
        switch(type) {
            case 'text':
                newElement = document.createElement('div');
                newElement.className = 'editable-element';
                newElement.setAttribute('contenteditable', 'true');
                newElement.style.position = 'absolute';
                newElement.style.left = '100px';
                newElement.style.top = '100px';
                newElement.style.padding = '10px';
                newElement.style.background = 'white';
                newElement.style.border = '1px solid #e5e7eb';
                newElement.style.borderRadius = '6px';
                newElement.style.minWidth = '200px';
                newElement.style.minHeight = '40px';
                newElement.style.zIndex = '1000';
                newElement.textContent = 'Double click to edit text';
                break;
                
            case 'image':
                newElement = document.createElement('div');
                newElement.className = 'editable-element';
                newElement.style.position = 'absolute';
                newElement.style.left = '150px';
                newElement.style.top = '150px';
                newElement.style.width = '200px';
                newElement.style.height = '150px';
                newElement.style.background = '#f3f4f6';
                newElement.style.border = '2px dashed #d1d5db';
                newElement.style.borderRadius = '6px';
                newElement.style.display = 'flex';
                newElement.style.alignItems = 'center';
                newElement.style.justifyContent = 'center';
                newElement.innerHTML = `
                    <i data-feather="image" class="text-gray-400"></i>
                    <span class="ml-2 text-gray-500">Add Image</span>
                `;
                break;
                
            case 'chart':
                newElement = document.createElement('div');
                newElement.className = 'editable-element';
                newElement.style.position = 'absolute';
                newElement.style.left = '200px';
                newElement.style.top = '200px';
                newElement.style.width = '300