class DesktopHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          -webkit-app-region: drag;
        }
        
        .header {
          background: rgba(15, 23, 42, 0.9);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(6, 182, 212, 0.2);
          height: 40px;
          padding: 0 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        
        .logo {
          display: flex;
          align-items: center;
          gap: 12px;
        }
        
        .logo-icon {
          width: 24px;
          height: 24px;
          border-radius: 6px;
          background: linear-gradient(135deg, #06b6d4, #3b82f6);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .logo-text {
          font-size: 14px;
          font-weight: 600;
          background: linear-gradient(90deg, #06b6d4, #3b82f6);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        
        .window-controls {
          display: flex;
          gap: 8px;
          -webkit-app-region: no-drag;
        }
        
        .window-btn {
          width: 32px;
          height: 32px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #9ca3af;
          transition: all 0.2s ease;
          cursor: pointer;
        }
        
        .window-btn:hover {
          background: rgba(255, 255, 255, 0.1);
          color: #ffffff;
        }
        
        .close-btn:hover {
          background: #ef4444;
          color: #ffffff;
        }
      </style>
      
      <div class="header">
        <div class="logo">
          <div class="logo-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
            </svg>
          </div>
          <div class="logo-text">SpotSync Alpha</div>
        </div>
        
        <div class="window-controls">
          <div class="window-btn" id="minimize-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
          </div>
          <div class="window-btn" id="maximize-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
            </svg>
          </div>
          <div class="window-btn close-btn" id="close-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </div>
        </div>
      </div>
    `;
    
    // Add event listeners
    this.shadowRoot.getElementById('minimize-btn').addEventListener('click', () => {
      if (typeof require !== 'undefined') {
        const { ipcRenderer } = require('electron');
        ipcRenderer.send('window-minimize');
      }
    });
    
    this.shadowRoot.getElementById('maximize-btn').addEventListener('click', () => {
      if (typeof require !== 'undefined') {
        const { ipcRenderer } = require('electron');
        ipcRenderer.send('window-maximize');
      }
    });
    
    this.shadowRoot.getElementById('close-btn').addEventListener('click', () => {
      if (typeof require !== 'undefined') {
        const { ipcRenderer } = require('electron');
        ipcRenderer.send('window-close');
      }
    });
  }
}

customElements.define('desktop-header', DesktopHeader);