class BottomPanel extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 32px;
                    background: linear-gradient(to top, #27272a, #18181b);
                    border-top: 1px solid #3f3f46;
                    z-index: 1000;
                    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
                }
                
                .panel-content {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 100%;
                    padding: 0 4px;
                }
                
                .taskbar-section {
                    display: flex;
                    align-items: center;
                    gap: 2px;
                    flex: 1;
                    overflow: hidden;
                }
                
                .show-desktop {
                    width: 8px;
                    height: 24px;
                    background: linear-gradient(to right, transparent, #3f3f46);
                    cursor: pointer;
                    margin: 0 8px;
                    border-radius: 2px;
                }
                
                .show-desktop:hover {
                    background: linear-gradient(to right, transparent, #52525b);
                }
                
                .taskbar-item {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    padding: 4px 8px;
                    background: transparent;
                    border: none;
                    border-radius: 3px;
                    color: #d4d4d8;
                    font-size: 11px;
                    cursor: pointer;
                    white-space: nowrap;
                    transition: all 0.2s;
                    min-width: 0;
                    max-width: 150px;
                }
                
                .taskbar-item:hover {
                    background: #3f3f46;
                }
                
                .taskbar-active {
                    background: linear-gradient(to bottom, #ef4444, #dc2626);
                    color: white;
                }
                
                .taskbar-item-icon {
                    flex-shrink: 0;
                }
                
                .taskbar-item-text {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    min-width: 0;
                }
                
                .right-section {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                }
                
                .workspace-indicator {
                    display: flex;
                    align-items: center;
                    gap: 2px;
                    padding: 2px 6px;
                    background: #3f3f46;
                    border-radius: 3px;
                }
                
                .workspace-dot {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: #71717a;
                }
                
                .workspace-dot.active {
                    background: #ef4444;
                }
                
                .system-tray {
                    display: flex;
                    align-items: center;
                    gap: 2px;
                }
                
                .tray-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 24px;
                    height: 24px;
                    color: #d4d4d8;
                    cursor: pointer;
                    border-radius: 3px;
                    transition: all 0.2s;
                }
                
                .tray-item:hover {
                    background: #3f3f46;
                    color: #f4f4f5;
                }
            </style>
            
            <div class="panel-content">
                <div class="taskbar-section" id="taskbar">
                    <!-- Window buttons will be added here -->
                </div>
                
                <button class="show-desktop" title="Mostrar Área de Trabalho" onclick="toggleDesktop()"></button>
                
                <div class="right-section">
                    <div class="workspace-indicator">
                        <div class="workspace-dot active"></div>
                        <div class="workspace-dot"></div>
                        <div class="workspace-dot"></div>
                        <div class="workspace-dot"></div>
                    </div>
                    
                    <div class="system-tray">
                        <div class="tray-item" title="Bloquear Tela">
                            <i data-feather="lock" style="width: 14px; height: 14px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        this.taskbar = this.shadowRoot.getElementById('taskbar');
    }
    
    addWindowToTaskbar(windowId, title, icon) {
        const button = document.createElement('button');
        button.className = 'taskbar-item';
        button.dataset.windowId = windowId;
        button.innerHTML = `
            <i data-feather="${icon}" class="taskbar-item-icon" style="width: 14px; height: 14px;"></i>
            <span class="taskbar-item-text">${title}</span>
        `;
        
        button.addEventListener('click', () => {
            const window = document.getElementById(windowId);
            if (window) {
                if (window.style.display === 'none') {
                    restoreWindow(windowId);
                } else {
                    minimizeWindow(windowId);
                }
            }
        });
        
        button.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            // Could add context menu here
        });
        
        this.taskbar.appendChild(button);
        
        // Re-render feather icons
        setTimeout(() => feather.replace(), 0);
    }
    
    removeWindowFromTaskbar(windowId) {
        const button = this.taskbar.querySelector(`[data-window-id="${windowId}"]`);
        if (button) {
            button.remove();
        }
    }
}

customElements.define('bottom-panel', BottomPanel);