class RAMMonitor extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .ram-container {
          display: flex;
          flex-direction: column;
          background-color: #1A1A2E;
          padding: 10px;
          border-radius: 10px;
          border: 1px solid #FF9966;
          font-family: 'Arial', sans-serif;
        }
        
        .ram-title {
          color: #FFCC00;
          font-weight: bold;
          margin-bottom: 5px;
          font-size: 14px;
        }
        
        .ram-display {
          display: flex;
          justify-content: space-between;
          color: #FFFFFF;
          font-size: 12px;
        }
        
        .ram-usage {
          width: 100%;
          height: 8px;
          background-color: #2A2A3E;
          border-radius: 4px;
          margin-top: 5px;
          overflow: hidden;
        }
        
        .ram-used {
          height: 100%;
          background-color: #FF9966;
          border-radius: 4px;
          transition: width 0.3s ease;
        }
      </style>
      
      <div class="ram-container">
        <div class="ram-title">RAM MONITOR</div>
        <div class="ram-display">
          <span id="ram-text">0.0GB / 0.0GB</span>
          <span id="ram-percent">0%</span>
        </div>
        <div class="ram-usage">
          <div class="ram-used" id="ram-bar"></div>
        </div>
      </div>
    `;
    
    this.updateRAM();
    setInterval(() => this.updateRAM(), 3000);
  }

  updateRAM() {
    if (!window.performance || !window.performance.memory) return;
    
    const usedMB = window.performance.memory.usedJSHeapSize / (1024 * 1024);
    const totalMB = window.performance.memory.jsHeapSizeLimit / (1024 * 1024);
    const percent = Math.round((usedMB / totalMB) * 100);
    
    const ramText = this.shadowRoot.getElementById('ram-text');
    const ramPercent = this.shadowRoot.getElementById('ram-percent');
    const ramBar = this.shadowRoot.getElementById('ram-bar');
    
    ramText.textContent = `${usedMB.toFixed(1)}GB / ${totalMB.toFixed(1)}GB`;
    ramPercent.textContent = `${percent}%`;
    ramBar.style.width = `${percent}%`;
    
    // Color coding based on usage
    if (percent > 75) {
      ramBar.style.backgroundColor = '#FF6666'; // LCARS red
      ramPercent.style.color = '#FF6666';
    } else if (percent > 50) {
      ramBar.style.backgroundColor = '#FF9966'; // LCARS orange
      ramPercent.style.color = '#FF9966';
    } else {
      ramBar.style.backgroundColor = '#99CC99'; // LCARS green
      ramPercent.style.color = '#99CC99';
    }
  }
}

customElements.define('ram-monitor', RAMMonitor);