class DocWizard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          max-width: 800px;
          margin: 2rem auto;
          padding: 1.5rem;
          background: white;
          border-radius: 8px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        h2 {
          color: #4f46e5;
          margin-bottom: 1.5rem;
          text-align: center;
        }
        .form-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1rem;
        }
        .form-group {
          margin-bottom: 1rem;
        }
        label {
          display: block;
          margin-bottom: 0.5rem;
          font-weight: 500;
          color: #374151;
        }
        input, select, textarea {
          width: 100%;
          padding: 0.5rem;
          border: 1px solid #d1d5db;
          border-radius: 4px;
          font-size: 1rem;
        }
        .full-width {
          grid-column: 1 / -1;
        }
        button {
          background: #4f46e5;
          color: white;
          border: none;
          padding: 0.75rem 1.5rem;
          border-radius: 4px;
          cursor: pointer;
          font-size: 1rem;
          transition: background 0.2s;
        }
        button:hover {
          background: #4338ca;
        }
        .actions {
          display: flex;
          justify-content: flex-end;
          gap: 1rem;
          margin-top: 1.5rem;
        }
        .error {
          color: #dc2626;
          margin-top: 0.25rem;
          font-size: 0.875rem;
        }
      </style>
      <h2>Document Generator Wizard</h2>
      <form id="docForm">
        <div class="form-grid">
          <div class="form-group">
            <label for="agreement_date">Agreement Date</label>
            <input type="date" id="agreement_date" required>
          </div>
          
          <div class="form-group">
            <label for="territory">Territory</label>
            <input type="text" id="territory" value="State of Qatar" required>
          </div>
          
          <div class="form-group">
            <label for="vendor_name_en">Vendor Name (English)</label>
            <input type="text" id="vendor_name_en" required>
          </div>
          
          <div class="form-group">
            <label for="vendor_name_ar">Vendor Name (Arabic)</label>
            <input type="text" id="vendor_name_ar" dir="rtl" required>
          </div>
          
          <div class="form-group">
            <label for="vendor_cr">Vendor CR Number</label>
            <input type="text" id="vendor_cr" required>
          </div>
          
          <div class="form-group">
            <label for="delivery_mode">Delivery Mode</label>
            <select id="delivery_mode" required>
              <option value="aldobi_delivery">Aldobi Delivery (30% commission)</option>
              <option value="vendor_delivery">Vendor Delivery (15% commission)</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="commission_pct">Commission % (override)</label>
            <input type="number" id="commission_pct" min="0" max="100">
          </div>
          
          <div class="form-group full-width">
            <label for="vendor_address">Vendor Address</label>
            <textarea id="vendor_address" rows="2"></textarea>
          </div>
          
          <div class="form-group">
            <label for="start_date">Start Date</label>
            <input type="date" id="start_date" required>
          </div>
          
          <div class="form-group">
            <label for="term_months">Contract Duration (months)</label>
            <input type="number" id="term_months" value="12" min="1" required>
          </div>
          
          <div class="form-group">
            <label for="auto_renewal">Auto-Renewal</label>
            <select id="auto_renewal">
              <option value="Yes">Yes</option>
              <option value="No" selected>No</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="payment_terms">Payment Terms</label>
            <input type="text" id="payment_terms" value="Net 15–30 days (preferred first week of month)">
          </div>
        </div>
        
        <h3>Signatory Details</h3>
        <div class="form-grid">
          <div class="form-group">
            <label for="aldobi_sign_name">Aldobi Signatory Name</label>
            <input type="text" id="aldobi_sign_name" required>
          </div>
          
          <div class="form-group">
            <label for="aldobi_sign_title">Aldobi Signatory Title</label>
            <input type="text" id="aldobi_sign_title" placeholder="e.g., Chairman">
          </div>
          
          <div class="form-group">
            <label for="vendor_sign_name">Vendor Signatory Name</label>
            <input type="text" id="vendor_sign_name" required>
          </div>
          
          <div class="form-group">
            <label for="vendor_sign_title">Vendor Signatory Title</label>
            <input type="text" id="vendor_sign_title">
          </div>
        </div>
        
        <div class="actions">
          <button type="button" id="generateBtn">Generate Document</button>
          <button type="reset">Reset Form</button>
        </div>
      </form>
    `;

    this.shadowRoot.getElementById('generateBtn').addEventListener('click', this.handleGenerate.bind(this));
  }

  handleGenerate() {
    const form = this.shadowRoot.getElementById('docForm');
    if (!form.checkValidity()) {
      form.reportValidity();
      return;
    }

    const formData = {
      agreement_date: this.shadowRoot.getElementById('agreement_date').value,
      territory: this.shadowRoot.getElementById('territory').value,
      vendor_name_en: this.shadowRoot.getElementById('vendor_name_en').value,
      vendor_name_ar: this.shadowRoot.getElementById('vendor_name_ar').value,
      vendor_cr: this.shadowRoot.getElementById('vendor_cr').value,
      vendor_address: this.shadowRoot.getElementById('vendor_address').value,
      delivery_mode: this.shadowRoot.getElementById('delivery_mode').value,
      commission_pct: this.shadowRoot.getElementById('commission_pct').value,
      payment_terms: this.shadowRoot.getElementById('payment_terms').value,
      start_date: this.shadowRoot.getElementById('start_date').value,
      term_months: this.shadowRoot.getElementById('term_months').value,
      auto_renewal: this.shadowRoot.getElementById('auto_renewal').value,
      aldobi_sign_name: this.shadowRoot.getElementById('aldobi_sign_name').value,
      aldobi_sign_title: this.shadowRoot.getElementById('aldobi_sign_title').value,
      vendor_sign_name: this.shadowRoot.getElementById('vendor_sign_name').value,
      vendor_sign_title: this.shadowRoot.getElementById('vendor_sign_title').value,
      enable_social_media: 'true',
      enable_data_minimization: 'true',
      enable_delay_policy: 'true',
      enable_dispute_policy: 'true'
    };

    // Apply business rules for default values
    if (!formData.commission_pct) {
      formData.commission_pct = formData.delivery_mode === 'aldobi_delivery' ? '30' : '15';
    }

    // Dispatch custom event with form data
    this.dispatchEvent(new CustomEvent('generate-document', {
      bubbles: true,
      composed: true,
      detail: formData
    }));
  }
}

customElements.define('doc-wizard', DocWizard);