/**
 * VIAJAMOS.COM — NEWSLETTER SUBSCRIPTION WIDGET
 *
 * Exposes global: VjsNewsletter.submit(), VjsNewsletter.reset()
 *
 * Configuration:
 *   - CONFIG.formName   : Identifier stored in form_submission.form_name
 *   - CONFIG.endpoint   : POST URL for submissions
 *   - CONFIG.tokenUrl   : GET URL to fetch a fresh CSRF token
 */
const VjsNewsletter = (() => {
  'use strict';

  // ==========================================
  // CONFIG
  // ==========================================
  const CONFIG = {
    formName: 'newsletter',
    endpoint: '/api/form-submission',
    tokenUrl: '/api/form-submission/token',
  };

  // ==========================================
  // DOM HELPERS
  // ==========================================
  const $ = (sel) => document.querySelector(sel);

  async function fetchCsrfToken() {
    const res = await fetch(CONFIG.tokenUrl, {
      method: 'GET',
      credentials: 'same-origin',
    });
    if (!res.ok) throw new Error('Could not fetch CSRF token');
    const data = await res.json();
    return data.token;
  }

  // ==========================================
  // VALIDATION
  // ==========================================
  function clearErrors() {
    ['vjs-name', 'vjs-lastname', 'vjs-email'].forEach((id) => {
      $(`#${id}`).classList.remove('error');
      $(`#${id}-error`).classList.remove('visible');
    });
  }

  function validate() {
    clearErrors();
    let valid = true;

    const name = $('#vjs-name').value.trim();
    const lastname = $('#vjs-lastname').value.trim();
    const email = $('#vjs-email').value.trim();

    if (!name) {
      $('#vjs-name').classList.add('error');
      $('#vjs-name-error').classList.add('visible');
      valid = false;
    }
    if (!lastname) {
      $('#vjs-lastname').classList.add('error');
      $('#vjs-lastname-error').classList.add('visible');
      valid = false;
    }
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      $('#vjs-email').classList.add('error');
      $('#vjs-email-error').classList.add('visible');
      valid = false;
    }

    return valid;
  }

  // ==========================================
  // SUBMIT
  // ==========================================
  async function submit() {
    if (!validate()) return;

    const payload = {
      formName: CONFIG.formName,
      email: $('#vjs-email').value.trim(),
      website: $('#vjs-hp') ? $('#vjs-hp').value : '',
      data: {
        name: $('#vjs-name').value.trim(),
        lastname: $('#vjs-lastname').value.trim(),
        email: $('#vjs-email').value.trim(),
      },
    };

    const btn = $('#vjs-submit');
    btn.classList.add('loading');
    btn.disabled = true;

    try {
      const csrfToken = await fetchCsrfToken();

      const res = await fetch(CONFIG.endpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': csrfToken,
        },
        credentials: 'same-origin',
        body: JSON.stringify(payload),
      });

      const result = await res.json();
      if (!res.ok) throw new Error(result.message || 'Server error');

      showSuccess();
    } catch (err) {
      console.error('Newsletter submit error:', err);
      btn.classList.remove('loading');
      btn.disabled = false;
      alert('Hubo un error al suscribirte. Por favor intenta de nuevo.');
    }
  }

  function showSuccess() {
    $('#vjs-form').style.display = 'none';
    $('#vjs-success').classList.add('active');
  }

  // ==========================================
  // RESET
  // ==========================================
  function reset() {
    $('#vjs-form').style.display = '';
    $('#vjs-success').classList.remove('active');
    ['vjs-name', 'vjs-lastname', 'vjs-email'].forEach((id) => {
      $(`#${id}`).value = '';
    });
    clearErrors();
    const btn = $('#vjs-submit');
    btn.classList.remove('loading');
    btn.disabled = false;
  }

  // ==========================================
  // INIT
  // ==========================================
  function init() {
    // Clear errors on input
    ['#vjs-name', '#vjs-lastname', '#vjs-email'].forEach((sel) => {
      $(sel).addEventListener('input', () => {
        $(sel).classList.remove('error');
        const err = $(`${sel}-error`);
        if (err) err.classList.remove('visible');
      });
    });

    // Submit on click
    $('#vjs-submit').addEventListener('click', submit);

    // Submit on Enter
    ['#vjs-name', '#vjs-lastname', '#vjs-email'].forEach((sel) => {
      $(sel).addEventListener('keydown', (e) => {
        if (e.key === 'Enter') { e.preventDefault(); submit(); }
      });
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  return { submit, reset };
})();