class AutomationDashboard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .dashboard-container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 2rem;
        }
        .dashboard-header {
          background: white;
          padding: 2rem;
          border-radius: 1rem;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          margin-bottom: 2rem;
        }
        .strategy-form {
          background: white;
          padding: 2rem;
          border-radius: 1rem;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          margin-bottom: 2rem;
        }
        .results-section {
          background: white;
          padding: 2rem;
          border-radius: 1rem;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .form-group {
          margin-bottom: 1.5rem;
        }
        label {
          display: block;
          font-weight: 500;
          color: #374151;
          margin-bottom: 0.5rem;
        }
        input, select, textarea {
          width: 100%;
          padding: 0.75rem;
          border: 1px solid #d1d5db;
          border-radius: 0.5rem;
          font-size: 0.875rem;
        }
        button {
          background: #4f46e5;
          color: white;
          padding: 0.75rem 1.5rem;
          border: none;
          border-radius: 0.5rem;
          font-weight: 500;
          cursor: pointer;
          transition: background-color 0.2s;
        }
        button:hover {
          background: #4338ca;
        }
        .code-output {
          background: #1f2937;
          color: #e5e7eb;
          padding: 1rem;
          border-radius: 0.5rem;
          margin-top: 1rem;
        }
        pre {
          background: #111827;
          color: #e5e7eb;
          padding: 1rem;
          border-radius: 0.5rem;
          overflow-x: auto;
        }
      </style>
      <div class="dashboard-container">
        <div class="dashboard-header">
          <h1>E-commerce Automation Code Generator</h1>
          <p>Generate custom automation scripts powered by predictive AI</p>
        <div class="strategy-form">
          <form id="automationForm">
            <div class="form-group">
              <label for="businessName">Business Name</label>
          <input type="text" id="businessName" placeholder="Enter your business name" required>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div class="form-group">
              <label for="monthlyRevenue">Monthly Revenue ($)</label>
              <input type="number" id="monthlyRevenue" placeholder="50000" required>
            </div>
            <div class="form-group">
              <label for="orderVolume">Monthly Order Volume</label>
              <input type="number" id="orderVolume" placeholder="1000" required>
            </div>
            <div class="form-group">
              <label for="inventoryTurnover">Inventory Turnover Rate</label>
              <input type="number" id="inventoryTurnover" placeholder="4.0" step="0.1" required>
            </div>
            <div class="form-group">
              <label for="businessType">Business Type</label>
              <select id="businessType" required>
                <option value="">Select business type</option>
                <option value="clothing">Clothing & Apparel</option>
                <option value="electronics">Electronics</option>
                <option value="home_goods">Home Goods</option>
                <option value="beauty">Beauty & Cosmetics</option>
                <option value="sports">Sports & Outdoors</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div class="form-group">
              <label for="customParams">Custom Parameters (JSON)</label>
              <textarea id="customParams" placeholder='{"api_key": "your_key"}'></textarea>
            </div>
            <button type="submit">Generate Automation Code</button>
          </form>
          <div class="results-section">
            <h2>Generated Automation System</h2>
            <div id="codeOutput" class="code-output">
              <p>Your custom automation code will appear here...</p>
          </div>
        </div>
      </div>
    `;

    // Add event listeners
    this.shadowRoot.getElementById('automationForm').addEventListener('submit', async (e) => {
          e.preventDefault();
          
          const formData = {
            business_name: this.shadowRoot.getElementById('businessName').value,
            monthly_revenue: parseFloat(this.shadowRoot.getElementById('monthlyRevenue').value,
          order_volume: parseInt(this.shadowRoot.getElementById('orderVolume').value,
          inventory_turnover: parseFloat(this.shadowRoot.getElementById('inventoryTurnover').value,
          business_type: this.shadowRoot.getElementById('businessType').value,
          custom_params: JSON.parse(this.shadowRoot.getElementById('customParams').value || {}
          };

          try {
            const response = await fetch('/api/generate-automation', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
          });

          const result = await response.json();

          if (result.success) {
            this.shadowRoot.getElementById('codeOutput').innerHTML = `
            <h3>${result.strategy} Automation System</h3>
            <p><strong>Description:</strong> ${result.generated_code.description}
            <pre><code>${result.generated_code.code}</code></pre>
          `;
          } catch (error) {
            console.error('Error:', error);
            alert('Failed to generate automation code');
          }
        });
  }
}

customElements.define('automation-dashboard', AutomationDashboard);