class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          left: 0;
          top: 0;
          height: 100vh;
          width: 16rem;
          background: #1a1e2e;
          border-right: 1px solid #2d3748;
          z-index: 40;
          transition: transform 0.3s ease;
        }
        
        .sidebar-content {
          padding: 1.5rem;
          height: 100%;
          display: flex;
          flex-direction: column;
        }
        
        .logo {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          margin-bottom: 2rem;
          padding-bottom: 1rem;
          border-bottom: 1px solid #2d3748;
        }
        
        .logo-icon {
          width: 2rem;
          height: 2rem;
          background: linear-gradient(135deg, #ff580f 0%, #ff8c66 100%);
          border-radius: 0.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
        }
        
        .logo-text {
          font-weight: 700;
          font-size: 1.25rem;
          background: linear-gradient(135deg, #ff580f 0%, #ff8c66 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        
        .nav-items {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          flex: 1;
        }
        
        .nav-item {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem 1rem;
          border-radius: 0.5rem;
          color: #a0aec0;
          text-decoration: none;
          transition: all 0.2s ease;
        }
        
        .nav-item:hover {
          background: #21223a;
          color: white;
        }
        
        .nav-item.active {
          background: #21223a;
          color: #ff580f;
        }
        
        .nav-item i {
          width: 1.25rem;
          height: 1.25rem;
        }
        
        .sidebar-footer {
          margin-top: auto;
          padding-top: 1rem;
          border-top: 1px solid #2d3748;
        }
        
        .user-profile {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem;
          border-radius: 0.5rem;
          transition: background 0.2s ease;
        }
        
        .user-profile:hover {
          background: #21223a;
        }
        
        .user-avatar {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          background: #2d3748;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ff580f;
        }
        
        .user-info {
          flex: 1;
        }
        
        .user-name {
          font-weight: 600;
          font-size: 0.875rem;
          color: white;
        }
        
        .user-role {
          font-size: 0.75rem;
          color: #a0aec0;
        }
        
        @media (max-width: 768px) {
          :host {
            transform: translateX(-100%);
          }
          
          :host(.open) {
            transform: translateX(0);
          }
        }
      </style>
      
      <div class="sidebar-content">
        <div class="logo">
          <div class="logo-icon">
            <i data-feather="smartphone"></i>
          </div>
          <div class="logo-text">Mobile Test Pilot</div>
</div>
        <nav class="nav-items">
          <a href="index.html" class="nav-item">
            <i data-feather="home"></i>
            <span>Dashboard</span>
          </a>
          
          <a href="chatbot.html" class="nav-item">
            <i data-feather="home"></i>
            <span>Dashboard</span>
          </a>
          
          <a href="active-tests.html" class="nav-item">
            <i data-feather="activity"></i>
            <span>Testes Ativos</span>
          </a>
          
          <a href="cenarios.html" class="nav-item">
            <i data-feather="git-branch"></i>
            <span>Cenários</span>
          </a>
          
          <a href="historico.html" class="nav-item">
            <i data-feather="clock"></i>
            <span>Histórico</span>
          </a>
          <a href="relatorios.html" class="nav-item">
            <i data-feather="pie-chart"></i>
            <span>Relatórios</span>
          </a>
<a href="configuracao.html" class="nav-item">
            <i data-feather="sliders"></i>
            <span>Configurações</span>
          </a>
<a href="#" class="nav-item">
            <i data-feather="help-circle"></i>
            <span>Ajuda</span>
          </a>
          
          <a href="#" class="nav-item">
            <i data-feather="book"></i>
            <span>Documentação</span>
          </a>
        </nav>
<div class="sidebar-footer">
          <div class="user-profile">
            <div class="user-avatar">
              <i data-feather="user"></i>
            </div>
            <div class="user-info">
              <div class="user-name">Carlos Silva</div>
              <div class="user-role">QA Engineer</div>
            </div>
          </div>
        </div>
      </div>
    `;
    // Inicializar feather icons no shadow DOM
    this.shadowRoot.querySelectorAll('[data-feather]').forEach(icon => {
      const iconName = icon.getAttribute('data-feather');
      if (window.feather) {
        const svg = window.feather.icons[iconName].toSvg();
        icon.outerHTML = svg;
      }
    });
}
}

customElements.define('custom-sidebar', CustomSidebar);