(function() {
  'use strict';

  var VOXTRA_CONFIG = {
    eventId: '69bc1c920017217c61f1',
    apiUrl: 'https://voxtra.app/api/widget/submit',
    buttonColor: '#dc2311',
    textColor: '#000000',
    backgroundColor: '#ffffff'
  };

  window.VoxtraWidget = {
    init: function(selector) {
      var container = document.querySelector(selector);
      if (!container) {
        console.error('VoxtraWidget: Container not found:', selector);
        return;
      }

      var style = document.createElement('style');
      style.textContent = `
        .voxtra-widget { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
        .voxtra-widget * { box-sizing: border-box; margin: 0; padding: 0; }
        .voxtra-widget-form {
          background: ${VOXTRA_CONFIG.backgroundColor};
          border-radius: 12px;
          padding: 24px;
          max-width: 480px;
          width: 100%;
        }
        .voxtra-widget-title {
          color: ${VOXTRA_CONFIG.textColor};
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 16px;
        }
        .voxtra-widget-input {
          width: 100%;
          padding: 10px 14px;
          border: 1px solid rgba(255,255,255,0.15);
          border-radius: 8px;
          background: rgba(255,255,255,0.08);
          color: ${VOXTRA_CONFIG.textColor};
          font-size: 14px;
          outline: none;
          transition: border-color 0.2s;
          margin-bottom: 12px;
        }
        .voxtra-widget-input:focus {
          border-color: ${VOXTRA_CONFIG.buttonColor};
        }
        .voxtra-widget-input::placeholder {
          color: rgba(255,255,255,0.4);
        }
        .voxtra-widget-textarea {
          width: 100%;
          padding: 10px 14px;
          border: 1px solid rgba(255,255,255,0.15);
          border-radius: 8px;
          background: rgba(255,255,255,0.08);
          color: ${VOXTRA_CONFIG.textColor};
          font-size: 14px;
          outline: none;
          transition: border-color 0.2s;
          margin-bottom: 16px;
          min-height: 80px;
          resize: vertical;
          font-family: inherit;
        }
        .voxtra-widget-textarea:focus {
          border-color: ${VOXTRA_CONFIG.buttonColor};
        }
        .voxtra-widget-textarea::placeholder {
          color: rgba(255,255,255,0.4);
        }
        .voxtra-widget-btn {
          width: 100%;
          padding: 12px 20px;
          background: ${VOXTRA_CONFIG.buttonColor};
          color: ${VOXTRA_CONFIG.textColor};
          border: none;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          transition: opacity 0.2s, transform 0.1s;
        }
        .voxtra-widget-btn:hover { opacity: 0.9; }
        .voxtra-widget-btn:active { transform: scale(0.98); }
        .voxtra-widget-btn:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          transform: none;
        }
        .voxtra-widget-btn--success {
          background: #10b981;
        }
        .voxtra-widget-btn--error {
          background: #ef4444;
        }
      `;
      document.head.appendChild(style);

      container.innerHTML = `
        <div class="voxtra-widget">
          <div class="voxtra-widget-form">
            <div class="voxtra-widget-title">Ask a Question</div>
            <input class="voxtra-widget-input" type="text" placeholder="Your name (optional)" id="voxtra-name" />
            <textarea class="voxtra-widget-textarea" placeholder="Type your question..." id="voxtra-question" rows="3"></textarea>
            <button class="voxtra-widget-btn" id="voxtra-submit">Submit Question</button>
          </div>
        </div>
      `;

      var btn = document.getElementById('voxtra-submit');
      var nameInput = document.getElementById('voxtra-name');
      var questionInput = document.getElementById('voxtra-question');

      btn.addEventListener('click', function() {
        var questionText = questionInput.value.trim();
        if (!questionText) {
          btn.textContent = 'Please enter a question';
          btn.className = 'voxtra-widget-btn voxtra-widget-btn--error';
          setTimeout(function() {
            btn.textContent = 'Submit Question';
            btn.className = 'voxtra-widget-btn';
          }, 2000);
          return;
        }

        btn.disabled = true;
        btn.textContent = 'Submitting...';

        fetch(VOXTRA_CONFIG.apiUrl, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            eventId: VOXTRA_CONFIG.eventId,
            submitterName: nameInput.value.trim() || null,
            questionText: questionText
          })
        })
        .then(function(res) { return res.json(); })
        .then(function(data) {
          if (data.success) {
            btn.textContent = 'Question Submitted!';
            btn.className = 'voxtra-widget-btn voxtra-widget-btn--success';
            nameInput.value = '';
            questionInput.value = '';
            setTimeout(function() {
              btn.textContent = 'Submit Question';
              btn.className = 'voxtra-widget-btn';
              btn.disabled = false;
            }, 3000);
          } else {
            btn.textContent = data.error || 'Failed to submit';
            btn.className = 'voxtra-widget-btn voxtra-widget-btn--error';
            setTimeout(function() {
              btn.textContent = 'Submit Question';
              btn.className = 'voxtra-widget-btn';
              btn.disabled = false;
            }, 3000);
          }
        })
        .catch(function() {
          btn.textContent = 'Error - try again';
          btn.className = 'voxtra-widget-btn voxtra-widget-btn--error';
          setTimeout(function() {
            btn.textContent = 'Submit Question';
            btn.className = 'voxtra-widget-btn';
            btn.disabled = false;
          }, 3000);
        });
      });
    }
  };
})();