class VibeEngine extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .vibe-container {
          position: fixed;
          bottom: 2rem;
          right: 2rem;
          z-index: 1000;
          background: rgba(255,255,255,0.9);
          border-radius: 1rem;
          padding: 1rem;
          box-shadow: 0 4px 20px rgba(0,0,0,0.1);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(0,0,0,0.05);
          transition: all 0.3s ease;
        }
        .vibe-meter {
          width: 100%;
          height: 12px;
          background: linear-gradient(90deg, #10b981, #d946ef);
          border-radius: 6px;
          margin: 1rem 0;
          overflow: hidden;
        }
        .vibe-level {
          height: 100%;
          width: 50%;
          background: white;
          border-radius: 6px;
          transition: width 0.5s ease;
        }
        .vibe-display {
          font-family: monospace;
          font-size: 0.9rem;
          color: #4b5563;
        }
        .vibe-title {
          font-weight: bold;
          margin-bottom: 0.5rem;
          color: #10b981;
        }
      </style>
      <div class="vibe-container">
        <div class="vibe-title">VIBE ENGINE ⚡</div>
        <div class="vibe-meter">
          <div class="vibe-level" id="vibeLevel"></div>
        </div>
        <div class="vibe-display">
          Current Vibe: <span id="currentVibe">Neutral</span>
        </div>
      </div>
    `;

    this.initVibeTracking();
  }

  initVibeTracking() {
    const vibeLevel = this.shadowRoot.getElementById('vibeLevel');
    const currentVibe = this.shadowRoot.getElementById('currentVibe');

    // Simulate vibe changes (would connect to actual sensors/API in production)
    const vibes = ['Chill 😌', 'Focused 🎯', 'Creative 🎨', 'Energized ⚡', 'Neutral'];
    const intervals = [3000, 5000, 4000, 2000, 3000];

    let counter = 0;
    const updateVibe = () => {
      const index = counter % vibes.length;
      const level = 20 + Math.random() * 80;
      
      vibeLevel.style.width = `${level}%`;
      currentVibe.textContent = vibes[index];
      
      counter++;
      setTimeout(updateVibe, intervals[index]);
    };

    setTimeout(updateVibe, 1000);
  }
}
customElements.define('vibe-engine', VibeEngine);