class TokenOptimizer extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin: 4rem 0;
        }
        .optimizer-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
          max-width: 1200px;
          margin: 0 auto;
        }
        .control-panel, .output-panel {
          background: white;
          border: 1px solid #E0E0E0;
          border-radius: 8px;
          padding: 2rem;
          box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }
        .panel-header {
          font-family: 'EB Garamond', serif;
          font-size: 1.5rem;
          margin-bottom: 1.5rem;
          color: #202124;
        }
        textarea {
          width: 100%;
          min-height: 120px;
          padding: 1rem;
          border: 1px solid #E0E0E0;
          border-radius: 4px;
          font-family: 'Inter', sans-serif;
          margin-bottom: 1.5rem;
          resize: vertical;
        }
        .toggle-group {
          margin-bottom: 1.5rem;
        }
        .toggle-item {
          display: flex;
          align-items: center;
          margin-bottom: 1rem;
        }
        .toggle-label {
          margin-left: 0.5rem;
          font-family: 'Inter', sans-serif;
          color: #5F6368;
        }
        .slider-group {
          margin-bottom: 1.5rem;
        }
        .slider-label {
          display: flex;
          justify-content: space-between;
          font-family: 'Inter', sans-serif;
          color: #5F6368;
          margin-bottom: 0.5rem;
        }
        .slider-value {
          font-family: 'Fira Code', monospace;
          color: #202124;
        }
        input[type="range"] {
          width: 100%;
          height: 4px;
          -webkit-appearance: none;
          background: #E0E0E0;
          border-radius: 2px;
        }
        input[type="range"]::-webkit-slider-thumb {
          -webkit-appearance: none;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #4285F4;
          cursor: pointer;
        }
        .output-content {
          font-family: 'Fira Code', monospace;
          font-size: 0.9rem;
          line-height: 1.6;
          white-space: pre-wrap;
          background: #FAFAF8;
          padding: 1rem;
          border-radius: 4px;
          min-height: 200px;
        }
        .vague {
          color: #EA4335;
          background-color: rgba(234, 67, 53, 0.1);
        }
        .specific {
          color: #4285F4;
          background-color: rgba(66, 133, 244, 0.1);
        }
        .optimized {
          box-shadow: 0 0 0 2px #E0C3FC, 0 0 0 4px #8EC5FC;
          transition: all 0.4s ease-out;
        }
        @media (max-width: 768px) {
          .optimizer-container {
            grid-template-columns: 1fr;
          }
        }
      </style>
      <div class="optimizer-container">
        <div class="control-panel">
          <h3 class="panel-header">Prompt Controls</h3>
          <textarea id="userInput" placeholder="Enter IT support issue (e.g. 'Wifi is broken')"></textarea>
          
          <div class="toggle-group">
            <div class="toggle-item">
              <input type="checkbox" id="personaToggle" checked>
              <label for="personaToggle" class="toggle-label">Add System Persona</label>
            </div>
            <div class="toggle-item">
              <input type="checkbox" id="formatToggle" checked>
              <label for="formatToggle" class="toggle-label">Enforce Formatting</label>
            </div>
            <div class="toggle-item">
              <input type="checkbox" id="chainToggle">
              <label for="chainToggle" class="toggle-label">Chain-of-Thought Reasoning</label>
            </div>
          </div>
          
          <div class="slider-group">
            <div class="slider-label">
              <span>Temperature (Creativity)</span>
              <span class="slider-value" id="tempValue">0.7</span>
            </div>
            <input type="range" id="tempSlider" min="0" max="1" step="0.1" value="0.7">
          </div>
          
          <div class="slider-group">
            <div class="slider-label">
              <span>Specificity</span>
              <span class="slider-value" id="specValue">Medium</span>
            </div>
            <input type="range" id="specSlider" min="0" max="2" step="1" value="1">
          </div>
        </div>
        
        <div class="output-panel" id="outputPanel">
          <h3 class="panel-header">Model Output Preview</h3>
          <div class="output-content" id="outputContent"></div>
        </div>
      </div>
    `;

    // Initialize elements
    const userInput = this.shadowRoot.getElementById('userInput');
    const personaToggle = this.shadowRoot.getElementById('personaToggle');
    const formatToggle = this.shadowRoot.getElementById('formatToggle');
    const chainToggle = this.shadowRoot.getElementById('chainToggle');
    const tempSlider = this.shadowRoot.getElementById('tempSlider');
    const tempValue = this.shadowRoot.getElementById('tempValue');
    const specSlider = this.shadowRoot.getElementById('specSlider');
    const specValue = this.shadowRoot.getElementById('specValue');
    const outputPanel = this.shadowRoot.getElementById('outputPanel');
    const outputContent = this.shadowRoot.getElementById('outputContent');

    // Update output when controls change
    const updateOutput = () => {
      const inputText = userInput.value || 'Wifi is broken';
      const temp = parseFloat(tempSlider.value);
      const spec = parseInt(specSlider.value);
      
      // Update displayed values
      tempValue.textContent = temp.toFixed(1);
      specValue.textContent = ['Low', 'Medium', 'High'][spec];
      
      // Generate output based on controls
      let output = '';
      
      if (personaToggle.checked) {
        output += `[System Persona: Senior IT Support Engineer with 10+ years experience]\n\n`;
      }
      
      if (inputText.toLowerCase().includes('wifi')) {
        if (spec === 0) {
          output += `This appears to be a network connectivity issue. Try restarting your router and device.`;
        } else if (spec === 1) {
          output += `1. First, verify if other devices can connect to the same WiFi network\n`;
          output += `2. Check if the router lights indicate normal operation (usually solid green)\n`;
          output += `3. Try restarting both your device and the router\n`;
          output += `4. If issue persists, check for IP address conflicts (ipconfig /release, /renew)`;
        } else {
          output += `1. [Triage] Confirm scope:\n   - Single device or multiple affected?\n   - Wired connections working?\n`;
          output += `2. [Diagnostics]:\n   - Run 'ping 8.8.8.8' to test basic connectivity\n   - Check 'ipconfig /all' for valid DHCP lease\n`;
          output += `3. [Resolution Paths]:\n   - If DHCP issue: ipconfig /release && /renew\n   - If DNS: try flushing cache (ipconfig /flushdns)\n`;
          output += `4. [Escalation Points]:\n   - Contact ISP if modem lights abnormal\n   - Check enterprise RADIUS logs if applicable`;
        }
      } else {
        output += `Please describe your IT issue in more detail for specific troubleshooting steps.`;
      }
      
      if (chainToggle.checked) {
        output += `\n\n[Reasoning Chain]\n1. User reports "${inputText}"\n`;
        output += `2. Most common causes for this symptom are...\n`;
        output += `3. Recommended diagnostic steps prioritize quickest resolution first\n`;
        output += `4. Final recommendation based on most probable root cause`;
      }
      
      if (formatToggle.checked) {
        output = output.replace(/\n/g, '\n\n');
        output = output.replace(/(\d+\.)/g, '\n$1');
      }
      
      // Apply highlighting based on specificity
      outputContent.innerHTML = output;
      const textNodes = outputContent.childNodes;
      
      if (spec === 0) {
        outputContent.innerHTML = output.replace(/(network|try|check|issue)/gi, 
          match => `<span class="vague">${match}</span>`);
      } else if (spec === 2) {
        outputContent.innerHTML = output.replace(/(Triage|Diagnostics|Resolution|Escalation|ipconfig|ping)/gi, 
          match => `<span class="specific">${match}</span>`);
      }
      
      // Check if optimized (all toggles on)
      if (personaToggle.checked && formatToggle.checked && chainToggle.checked) {
        outputPanel.classList.add('optimized');
      } else {
        outputPanel.classList.remove('optimized');
      }
    };
    
    // Add event listeners
    [userInput, personaToggle, formatToggle, chainToggle, tempSlider, specSlider].forEach(el => {
      el.addEventListener('input', updateOutput);
      el.addEventListener('change', updateOutput);
    });
    
    // Initial update
    updateOutput();
  }
}
customElements.define('token-optimizer', TokenOptimizer);