class VoiceControl extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-top: 1rem;
        }
        .voice-controls {
          display: flex;
          gap: 0.5rem;
          align-items: center;
        }
        button {
          background: #6366f1;
          color: white;
          border: none;
          border-radius: 50%;
          width: 2.5rem;
          height: 2.5rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        button:hover {
          background: #4f46e5;
        }
        .status {
          font-size: 0.8rem;
          color: #64748b;
        }
      </style>
      <div class="voice-controls">
        <button id="micButton" title="Micro">
          <i class="fas fa-microphone"></i>
        </button>
        <div class="status" id="status">Prêt</div>
      </div>
    `;

    this.micButton = this.shadowRoot.getElementById('micButton');
    this.status = this.shadowRoot.getElementById('status');

    this.micButton.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('voice-toggle'));
    });
  }

  setStatus(text) {
    this.status.textContent = text;
  }

  setRecording(isRecording) {
    if (isRecording) {
      this.micButton.innerHTML = '<i class="fas fa-stop"></i>';
      this.micButton.style.background = '#ef4444';
    } else {
      this.micButton.innerHTML = '<i class="fas fa-microphone"></i>';
      this.micButton.style.background = '#6366f1';
    }
  }
}

customElements.define('voice-control', VoiceControl);