class TopPanel extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 32px;
                    background: linear-gradient(to bottom, #27272a, #18181b);
                    border-bottom: 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 8px;
                }
                
                .left-section, .right-section {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }
                
                .menu-button {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    padding: 4px 8px;
                    background: linear-gradient(to bottom, #ef4444, #dc2626);
                    border: 1px solid #b91c1c;
                    border-radius: 3px;
                    color: white;
                    font-size: 12px;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.2s;
                }
                
                .menu-button:hover {
                    background: linear-gradient(to bottom, #f87171, #ef4444);
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
                }
                
                .menu-button:active {
                    background: linear-gradient(to bottom, #dc2626, #b91c1c);
                }
                
                .panel-button {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 28px;
                    height: 22px;
                    background: transparent;
                    border: none;
                    border-radius: 3px;
                    color: #d4d4d8;
                    cursor: pointer;
                    transition: all 0.2s;
                }
                
                .panel-button:hover {
                    background: #3f3f46;
                    color: #f4f4f5;
                }
                
                .clock {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    color: #d4d4d8;
                    font-size: 10px;
                    padding: 2px 6px;
                }
            </style>
            
            <div class="panel-content">
                <div class="left-section">
                    <button id="menu-button" class="menu-button">
                        <i data-feather="grid" style="width: 12px; height: 12px;"></i>
                        <span>Aplicações</span>
                    </button>
                    
                    <button class="panel-button" title="Navegador de Arquivos">
                        <i data-feather="folder" style="width: 14px; height: 14px;"></i>
                    </button>
                    
                    <button class="panel-button" title="Navegador Web">
                        <i data-feather="globe" style="width: 14px; height: 14px;"></i>
                    </button>
                    
                    <button class="panel-button" title="Terminal">
                        <i data-feather="terminal" style="width: 14px; height: 14px;"></i>
                    </button>
                </div>
                
                <div class="right-section">
                    <button class="panel-button" title="Conexões de Rede">
                        <i data-feather="wifi" style="width: 14px; height: 14px;"></i>
                    </button>
                    
                    <button class="panel-button" title="Volume">
                        <i data-feather="volume-2" style="width: 14px; height: 14px;"></i>
                    </button>
                    
                    <button class="panel-button" title="Bateria">
                        <i data-feather="zap" style="width: 14px; height: 14px;"></i>
                    </button>
                    
                    <div id="clock" class="clock"></div>
                </div>
            </div>
        `;
        
        this.initializeEventListeners();
    }
    
    initializeEventListeners() {
        const menuButton = this.shadowRoot.getElementById('menu-button');
        const terminalButton = this.shadowRoot.querySelector('[title="Terminal"]');
        const browserButton = this.shadowRoot.querySelector('[title="Navegador Web"]');
        const fileBrowserButton = this.shadowRoot.querySelector('[title="Navegador de Arquivos"]');
        
        menuButton.addEventListener('click', (e) => {
            e.stopPropagation();
            this.showAppMenu();
        });
        
        terminalButton.addEventListener('click', () => {
            this.createTerminal();
        });
        
        browserButton.addEventListener('click', () => {
            this.createBrowser();
        });
        
        fileBrowserButton.addEventListener('click', () => {
            this.createFileBrowser();
        });
    }
    
    showAppMenu() {
        const appMenu = document.getElementById('app-menu');
        const rect = this.shadowRoot.getElementById('menu-button').getBoundingClientRect();
        
        appMenu.style.top = '32px';
        appMenu.style.left = `${rect.left}px`;
        appMenu.classList.remove('hidden');
        appMenu.classList.add('menu-enter');
        
        setTimeout(() => {
            const menuRect = appMenu.getBoundingClientRect();
            if (menuRect.right > window.innerWidth) {
                appMenu.style.left = `${window.innerWidth - menuRect.width - 5}px`;
            }
        }, 0);
    }
    
    createTerminal() {
        const content = `<div class="bg-black h-full p-4 font-mono text-sm text-green-400 overflow-auto">
            <div>mate@mate-desktop:~$ clear</div>
            <div>mate@mate-desktop:~$ ls -la</div>
            <div>total 48</div>
            <div>drwxr-xr-x 12 mate mate 4096 Dez 15 10:30 .</div>
            <div>drwxr-xr-x  3 root root 4096 Dez 14 09:00 ..</div>
            <div>-rw-------  1 mate mate  421 Dez 15 10:30 .bash_history</div>
            <div>-rw-r--r--  1 mate mate  220 Dez 14 09:00 .bash_logout</div>
            <div>-rw-r--r--  1 mate mate 3771 Dez 14 09:00 .bashrc</div>
            <div>drwx------  7 mate mate 4096 Dez 14 09:15 .cache</div>
            <div>mate@mate-desktop:~$ _</div>
        </div>`;
        
        createNewWindow('Terminal', 'terminal', 650, 450, content, 100, 150);
    }
    
    createBrowser() {
        const content = `<div class="bg-zinc-800 h-full flex flex-col">
            <div class="bg-zinc-700 p-2 flex items-center gap-2">
                <button class="text-zinc-300 hover:text-white"><i data-feather="arrow-left" style="width: 16px; height: 16px;"></i></button>
                <button class="text-zinc-300 hover:text-white"><i data-feather="arrow-right" style="width: 16px; height: 16px;"></i></button>
                <button class="text-zinc-300 hover:text-white"><i data-feather="refresh-cw" style="width: 16px; height: 16px;"></i></button>
                <input type="text" value="https://www.google.com" class="flex-1 bg-zinc-800 text-zinc-200 px-3 py-1 rounded text-sm outline-none">
            </div>
            <iframe src="https://www.google.com" class="flex-1 bg-white"></iframe>
        </div>`;
        
        createNewWindow('Navegador Web', 'globe', 800, 600, content, 200, 100);
    }
    
    createFileBrowser() {
        const content = `<div class="bg-zinc-800 h-full flex flex-col">
            <div class="bg-zinc-700 p-2 flex items-center gap-2 border-b border-zinc-600">
                <i data-feather="folder" class="text-zinc-300" style="width: 16px; height: 16px;"></i>
                <span class="text-zinc-200 text-sm">/home/mate</span>
            </div>
            <div class="flex-1 p-4 grid grid-cols-5 gap-4 overflow-auto">
                ${this.generateFolderIcons()}
            </div>
        </div>`;
        
        createNewWindow('Navegador de Arquivos', 'folder', 700, 500, content, 150, 120);
    }
    
    generateFolderIcons() {
        const folders = ['Documentos', 'Imagens', 'Música', 'Vídeos', 'Downloads', 'Desktop', 'Modelos', 'Público', 'Projetos', 'Backup'];
        const colors = ['text-blue-400', 'text-green-400', 'text-purple-400', 'text-red-400', 'text-yellow-400', 'text-cyan-400', 'text-pink-400', 'text-orange-400', 'text-indigo-400', 'text-teal-400'];
        
        return folders.map((folder, index) => `
            <div class="flex flex-col items-center p-2 hover:bg-zinc-700 rounded cursor-pointer">
                <i data-feather="folder" class="${colors[index % colors.length]}" style="width: 32px; height: 32px;"></i>
                <span class="text-zinc-300 text-xs mt-1">${folder}</span>
            </div>
        `).join('');
    }
}

customElements.define('top-panel', TopPanel);