/**
 * CRM - Form Embed Script
 * Uso: <script src="https://seudominio.com.br/form.js?id=FORM_ID"></script>
 * Ou:  <script src="https://seudominio.com.br/form.js?id=FORM_ID&container=meu-div"></script>
 */
(function() {
  const script = document.currentScript;
  const params = new URLSearchParams(script.src.split('?')[1] || '');
  const formId = params.get('id');
  const containerId = params.get('container');
  const API_BASE = script.src.split('/form.js')[0];

  if (!formId) { console.error('[CRM] form.js: parâmetro id não informado'); return; }

  // Cria container se não especificado
  let container;
  if (containerId) {
    container = document.getElementById(containerId);
    if (!container) { console.error('[CRM] Container não encontrado: ' + containerId); return; }
  } else {
    container = document.createElement('div');
    script.parentNode.insertBefore(container, script.nextSibling);
  }

  // Estilos do form
  const style = document.createElement('style');
  style.textContent = `
    .crm-form { font-family: system-ui, -apple-system, sans-serif; max-width: 520px; margin: 0 auto; padding: 24px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
    .crm-form h3 { margin: 0 0 20px; font-size: 20px; color: #1e293b; }
    .crm-form .field { margin-bottom: 16px; }
    .crm-form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #475569; }
    .crm-form input, .crm-form select, .crm-form textarea { width: 100%; padding: 10px 13px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; transition: .2s; box-sizing: border-box; }
    .crm-form input:focus, .crm-form select:focus, .crm-form textarea:focus { border-color: #4f7cff; box-shadow: 0 0 0 3px rgba(79,124,255,.15); }
    .crm-form button { width: 100%; padding: 12px; background: #4f7cff; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: .18s; }
    .crm-form button:hover { background: #3a63e0; transform: translateY(-1px); }
    .crm-form button:disabled { opacity: .6; cursor: not-allowed; transform: none; }
    .crm-form .success { text-align: center; padding: 24px; color: #16a34a; }
    .crm-form .success-icon { font-size: 40px; margin-bottom: 8px; }
    .crm-form .error-msg { color: #dc2626; font-size: 12px; margin-top: 4px; }
    .crm-form .req { color: #ef4444; }
  `;
  document.head.appendChild(style);

  // Carrega definição do formulário
  fetch(`${API_BASE}/api/forms/${formId}/public`)
    .then(r => r.json())
    .then(res => {
      if (!res.data) { container.innerHTML = '<p style="color:red">Formulário não encontrado</p>'; return; }
      renderForm(res.data);
    })
    .catch(() => { container.innerHTML = '<p style="color:red">Erro ao carregar formulário</p>'; });

  function renderForm(form) {
    const wrapper = document.createElement('div');
    wrapper.className = 'crm-form';

    const title = document.createElement('h3');
    title.textContent = form.name;
    wrapper.appendChild(title);

    const formEl = document.createElement('form');
    const fields = form.fields || [];

    fields.forEach(field => {
      const div = document.createElement('div');
      div.className = 'field';

      const label = document.createElement('label');
      label.innerHTML = field.label + (field.required ? ' <span class="req">*</span>' : '');
      div.appendChild(label);

      let input;
      if (field.type === 'textarea') {
        input = document.createElement('textarea');
        input.rows = 3;
      } else if (field.type === 'select') {
        input = document.createElement('select');
        (field.options || []).forEach(opt => {
          const o = document.createElement('option');
          o.value = opt; o.textContent = opt;
          input.appendChild(o);
        });
      } else {
        input = document.createElement('input');
        input.type = field.type || 'text';
      }

      input.name = field.name;
      input.placeholder = field.placeholder || '';
      if (field.required) input.required = true;
      div.appendChild(input);
      formEl.appendChild(div);
    });

    const btn = document.createElement('button');
    btn.type = 'submit';
    btn.textContent = (form.settings && form.settings.button_text) || 'Enviar';
    formEl.appendChild(btn);

    formEl.addEventListener('submit', async (e) => {
      e.preventDefault();
      btn.disabled = true; btn.textContent = 'Enviando...';

      const data = {};
      fields.forEach(f => {
        const el = formEl.elements[f.name];
        if (el) data[f.name] = el.value;
      });

      try {
        const res = await fetch(`${API_BASE}/api/forms/${formId}/submit`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data),
        });
        const json = await res.json();
        wrapper.innerHTML = `<div class="success"><div class="success-icon">✅</div><h3>${json.message || 'Enviado com sucesso!'}</h3><p style="color:#64748b;font-size:14px;margin-top:6px">Entraremos em contato em breve.</p></div>`;
      } catch {
        btn.disabled = false; btn.textContent = (form.settings && form.settings.button_text) || 'Enviar';
        const err = document.createElement('p'); err.className = 'error-msg'; err.textContent = 'Erro ao enviar. Tente novamente.';
        formEl.appendChild(err);
      }
    });

    wrapper.appendChild(formEl);
    container.appendChild(wrapper);
  }
})();