components/drug-interaction.js

class DrugInteractionChecker extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 1rem;
          background: white;
          border-radius: 0.5rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .container {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }
        .input-group {
          display: flex;
          gap: 0.5rem;
        }
        input {
          flex: 1;
          padding: 0.5rem;
          border: 1px solid #ccc;
          border-radius: 0.25rem;
        }
        button {
          background: #3b82f6;
          color: white;
          border: none;
          padding: 0.5rem 1rem;
          border-radius: 0.25rem;
          cursor: pointer;
        }
        .results {
          margin-top: 1rem;
          border-top: 1px solid #eee;
          padding-top: 1rem;
        }
        .interaction {
          padding: 0.5rem;
          margin-bottom: 0.5rem;
          border-radius: 0.25rem;
        }
        .severe { background: #fee2e2; border-left: 3px solid #ef4444; }
        .moderate { background: #fef3c7; border-left: 3px solid #f59e0b; }
        .minor { background: #ecfdf5; border-left: 3px solid #10b981; }
      </style>
      <div class="container">
        <h3>Drug Interaction Checker</h3>
        <div class="input-group">
          <input type="text" id="drug1" placeholder="Enter first drug name">
          <input type="text" id="drug2" placeholder="Enter second drug name">
          <button id="check-btn">Check</button>
        </div>
        <div class="results" id="results"></div>
      </div>
    `;

    this.shadowRoot.getElementById('check-btn').addEventListener('click', this.checkInteractions.bind(this));
  }

  async checkInteractions() {
    const drug1 = this.shadowRoot.getElementById('drug1').value;
    const drug2 = this.shadowRoot.getElementById('drug2').value;
    
    if (!drug1 || !drug2) {
      this.showError('Please enter both drug names');
      return;
    }

    // Simulate API call with mock data
    this.showLoading();
    
    setTimeout(() => {
      const mockResults = this.getMockInteractions(drug1, drug2);
      this.displayResults(mockResults);
    }, 1000);
  }

  showLoading() {
    this.shadowRoot.getElementById('results').innerHTML = '<p>Checking interactions...</p>';
  }

  showError(message) {
    this.shadowRoot.getElementById('results').innerHTML = `<p class="error">${message}</p>`;
  }

  getMockInteractions(drug1, drug2) {
    // This would be replaced with actual API calls in production
    const mockData = {
      "drug1": drug1,
      "drug2": drug2,
      "interactions": [
        {
          "severity": "severe",
          "description": `${drug1} may increase the hypotensive activities of ${drug2}.`,
          "action": "Monitor blood pressure and consider alternative therapy."
        },
        {
          "severity": "moderate",
          "description": `${drug1} may decrease the effectiveness of ${drug2}.`,
          "action": "Consider dose adjustment or alternative therapy."
        }
      ]
    };
    return mockData;
  }

  displayResults(data) {
    const resultsEl = this.shadowRoot.getElementById('results');
    
    if (data.interactions.length === 0) {
      resultsEl.innerHTML = `<p>No significant interactions found between ${data.drug1} and ${data.drug2}.</p>`;
      return;
    }

    let html = `<h4>Interactions between ${data.drug1} and ${data.drug2}:</h4>`;
    
    data.interactions.forEach(interaction => {
      html += `
        <div class="interaction ${interaction.severity}">
          <p><strong>Severity:</strong> ${interaction.severity.toUpperCase()}</p>
          <p><strong>Description:</strong> ${interaction.description}</p>
          <p><strong>Recommendation:</strong> ${interaction.action}</p>
        </div>
      `;
    });

    resultsEl.innerHTML = html;
  }
}

customElements.define('drug-interaction-checker', DrugInteractionChecker);