class EmotionAnalysis extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin: 1rem 0;
        }
        .container {
          background: rgba(15, 23, 42, 0.7);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 0.5rem;
          padding: 1rem;
        }
        .metrics {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
          gap: 1rem;
          margin-top: 1rem;
        }
        .metric {
          text-align: center;
        }
        .metric-value {
          font-size: 1.2rem;
          font-weight: bold;
          color: #7c3aed;
        }
        .metric-label {
          font-size: 0.8rem;
          color: #94a3b8;
        }
        .confidence-score {
          font-size: 1.5rem;
          font-weight: bold;
          text-align: center;
          margin: 1rem 0;
          background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
      </style>
      <div class="container">
        <h3>Emotion Analysis</h3>
        <div class="confidence-score">
          Confidence Score: <span id="score">0</span>/100
        </div>
        <div class="metrics">
          <div class="metric">
            <div class="metric-value" id="confidence">0%</div>
            <div class="metric-label">Confidence</div>
          </div>
          <div class="metric">
            <div class="metric-value" id="clarity">0%</div>
            <div class="metric-label">Clarity</div>
          </div>
          <div class="metric">
            <div class="metric-value" id="fluency">0%</div>
            <div class="metric-label">Fluency</div>
          </div>
          <div class="metric">
            <div class="metric-value" id="emotional">0%</div>
            <div class="metric-label">Emotional Impact</div>
          </div>
        </div>
      </div>
    `;
  }

  updateAnalysis(data) {
    if (!this.shadowRoot) return;
    
    const { confidence, clarity, fluency, emotionalImpact, confidenceScore } = data;
    this.shadowRoot.getElementById('score').textContent = confidenceScore;
    this.shadowRoot.getElementById('confidence').textContent = `${confidence}%`;
    this.shadowRoot.getElementById('clarity').textContent = `${clarity}%`;
    this.shadowRoot.getElementById('fluency').textContent = `${fluency}%`;
    this.shadowRoot.getElementById('emotional').textContent = `${emotionalImpact}%`;
  }
}

customElements.define('emotion-analysis', EmotionAnalysis);