/**
 * AKITRIPS CONTACT FORM WIDGET
 *
 * Exposes global: AkiForm.open(), AkiForm.close(), AkiForm.next(),
 *                 AkiForm.prev(), AkiForm.clearCountry()
 *
 * 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 AkiForm = (() => {
  'use strict';

  // ==========================================
  // CONFIG — Edit per deployment
  // ==========================================
  const CONFIG = {
    formName: 'contacto-akitrips',
    endpoint: '/api/form-submission',
    tokenUrl: '/api/form-submission/token',
  };

  // ==========================================
  // DATA
  // ==========================================
  const INTERESTS = {
    agencia: [
      'Revender experiencias de Akitrips',
      'Crear paquetes turísticos combinados',
      'Establecer una alianza comercial',
    ],
    gobierno: [
      'Promover experiencias turísticas de mi región',
      'Incluir emprendedores locales en la plataforma',
      'Conocer el modelo de turismo sostenible',
      'Explorar oportunidades de cooperación',
    ],
    operador: [
      'Publicar mis experiencias en Akitrips',
      'Llegar a nuevos mercados y viajeros',
      'Digitalizar la gestión de mis reservas',
    ],
    viajero: [
      'Conocer experiencias culturales auténticas',
      'Recibir ofertas y novedades',
      'Planear un próximo viaje a Colombia',
    ],
    otro: [
      'Alianza estratégica',
      'Cobertura de prensa o medios',
      'Investigación o academia',
      'Oportunidad de inversión',
    ],
  };

  const COUNTRIES = [
    'Afganistán', 'Albania', 'Alemania', 'Andorra', 'Angola',
    'Antigua y Barbuda', 'Arabia Saudita', 'Argelia', 'Argentina',
    'Armenia', 'Australia', 'Austria', 'Azerbaiyán',
    'Bahamas', 'Bangladés', 'Barbados', 'Baréin', 'Bélgica',
    'Belice', 'Benín', 'Bielorrusia', 'Birmania (Myanmar)', 'Bolivia',
    'Bosnia y Herzegovina', 'Botsuana', 'Brasil', 'Brunéi', 'Bulgaria',
    'Burkina Faso', 'Burundi',
    'Cabo Verde', 'Camboya', 'Camerún', 'Canadá', 'Catar',
    'Chad', 'Chile', 'China', 'Chipre', 'Colombia', 'Comoras',
    'Corea del Norte', 'Corea del Sur', 'Costa de Marfil', 'Costa Rica',
    'Croacia', 'Cuba',
    'Dinamarca', 'Dominica',
    'Ecuador', 'Egipto', 'El Salvador', 'Emiratos Árabes Unidos',
    'Eritrea', 'Eslovaquia', 'Eslovenia', 'España', 'Estados Unidos',
    'Estonia', 'Esuatini', 'Etiopía',
    'Filipinas', 'Finlandia', 'Fiyi', 'Francia',
    'Gabón', 'Gambia', 'Georgia', 'Ghana', 'Granada', 'Grecia',
    'Guatemala', 'Guinea', 'Guinea-Bisáu', 'Guinea Ecuatorial', 'Guyana',
    'Haití', 'Honduras', 'Hungría',
    'India', 'Indonesia', 'Irak', 'Irán', 'Irlanda', 'Islandia',
    'Islas Marshall', 'Islas Salomón', 'Israel', 'Italia',
    'Jamaica', 'Japón', 'Jordania',
    'Kazajistán', 'Kenia', 'Kirguistán', 'Kiribati', 'Kuwait',
    'Laos', 'Lesoto', 'Letonia', 'Líbano', 'Liberia', 'Libia',
    'Liechtenstein', 'Lituania', 'Luxemburgo',
    'Macedonia del Norte', 'Madagascar', 'Malasia', 'Malaui',
    'Maldivas', 'Malí', 'Malta', 'Marruecos', 'Mauricio', 'Mauritania',
    'México', 'Micronesia', 'Moldavia', 'Mónaco', 'Mongolia',
    'Montenegro', 'Mozambique',
    'Namibia', 'Nauru', 'Nepal', 'Nicaragua', 'Níger', 'Nigeria',
    'Noruega', 'Nueva Zelanda',
    'Omán',
    'Países Bajos', 'Pakistán', 'Palaos', 'Palestina', 'Panamá',
    'Papúa Nueva Guinea', 'Paraguay', 'Perú', 'Polonia', 'Portugal',
    'Puerto Rico',
    'Reino Unido', 'República Centroafricana', 'República Checa',
    'República del Congo', 'República Democrática del Congo',
    'República Dominicana', 'Ruanda', 'Rumanía', 'Rusia',
    'Samoa', 'San Cristóbal y Nieves', 'San Marino',
    'San Vicente y las Granadinas', 'Santa Lucía',
    'Santo Tomé y Príncipe', 'Senegal', 'Serbia', 'Seychelles',
    'Sierra Leona', 'Singapur', 'Siria', 'Somalia', 'Sri Lanka',
    'Sudáfrica', 'Sudán', 'Sudán del Sur', 'Suecia', 'Suiza',
    'Surinam',
    'Tailandia', 'Tanzania', 'Tayikistán', 'Timor Oriental', 'Togo',
    'Tonga', 'Trinidad y Tobago', 'Túnez', 'Turkmenistán', 'Turquía',
    'Tuvalu',
    'Ucrania', 'Uganda', 'Uruguay', 'Uzbekistán',
    'Vanuatu', 'Vaticano', 'Venezuela', 'Vietnam',
    'Yemen',
    'Yibuti',
    'Zambia', 'Zimbabue',
    'Otro',
  ];

  // ==========================================
  // STATE
  // ==========================================
  let state = {
    step: 1,
    role: null,
    interests: [],
    country: null,
    name: null,
    email: null,
    phone: null,
    org: null,
    comment: null,
  };

  // ==========================================
  // DOM HELPERS
  // ==========================================
  const $ = function(sel) { return document.querySelector(sel); };
  const $$ = function(sel) { return document.querySelectorAll(sel); };
  const norm = function(s) { return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); };

  /**
   * Fetch a fresh CSRF token from the server.
   * This avoids stale tokens when the page is cached.
   */
  async function fetchCsrfToken() {
    var res = await fetch(CONFIG.tokenUrl, {
      method: 'GET',
      credentials: 'same-origin',
    });
    if (!res.ok) throw new Error('Could not fetch CSRF token');
    var data = await res.json();
    return data.token;
  }

  // ==========================================
  // OPEN / CLOSE
  // ==========================================
  function open() {
    $('#akiform-overlay').classList.add('active');
    document.body.style.overflow = 'hidden';
  }

  function close() {
    $('#akiform-overlay').classList.remove('active');
    document.body.style.overflow = '';
    setTimeout(resetForm, 400);
  }

  function resetForm() {
    state = {
      step: 1, role: null, interests: [], country: null,
      name: null, email: null, phone: null, org: null, comment: null,
    };
    goToStep(1);
    $$('.akiform-role').forEach(function(r) { r.classList.remove('selected'); });
    $('#akiform-success').classList.remove('active');
    $('#akiform-footer').style.display = 'flex';
    ['name', 'email', 'phone', 'org'].forEach(function(f) {
      var el = $('#akiform-' + f);
      el.value = '';
      el.classList.remove('error');
    });
    $('#akiform-comment').value = '';
    ['name', 'email'].forEach(function(f) {
      var err = $('#akiform-' + f + '-error');
      if (err) err.classList.remove('visible');
    });
    clearCountry();
    $('#akiform-progress').style.display = '';
  }

  // ==========================================
  // NAVIGATION
  // ==========================================
  function goToStep(n) {
    state.step = n;
    $$('.akiform-step').forEach(function(s) { s.classList.remove('active'); });
    var target = $('[data-step="' + n + '"]');
    if (target) target.classList.add('active');

    $('#akiform-progress-fill').style.width = (n / 4 * 100) + '%';
    $('#akiform-progress-text').textContent = 'Paso ' + n + ' de 4';
    $('#akiform-btn-back').style.display = n > 1 ? '' : 'none';
    $('#akiform-btn-next').querySelector('.btn-text').textContent = n === 4 ? 'Enviar' : 'Siguiente';

    updateNextState();
    $('#akiform-body').scrollTop = 0;
  }

  function next() {
    if (state.step === 4) { submit(); return; }
    if (!validateStep(state.step)) return;

    goToStep(state.step + 1);
    if (state.step === 2) renderInterests();
  }

  function prev() {
    if (state.step > 1) goToStep(state.step - 1);
  }

  function validateStep(n) {
    if (n === 1) return !!state.role;
    if (n === 2) return state.interests.length > 0;
    if (n === 3) return !!state.country;
    return true;
  }

  function updateNextState() {
    $('#akiform-btn-next').disabled = !validateStep(state.step);
  }

  // ==========================================
  // STEP 1 — ROLES
  // ==========================================
  function initRoles() {
    $$('.akiform-role').forEach(function(el) {
      el.addEventListener('click', function() {
        $$('.akiform-role').forEach(function(r) { r.classList.remove('selected'); });
        el.classList.add('selected');
        state.role = el.dataset.role;
        state.interests = [];
        updateNextState();
      });
    });
  }

  // ==========================================
  // STEP 2 — INTERESTS
  // ==========================================
  function renderInterests() {
    var container = $('#akiform-interests');
    var items = INTERESTS[state.role] || [];
    container.innerHTML = '';
    state.interests = [];

    items.forEach(function(label) {
      var el = document.createElement('div');
      el.className = 'akiform-check';
      el.innerHTML =
        '<div class="akiform-checkbox">' +
          '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>' +
        '</div>' +
        '<span class="akiform-check-label">' + label + '</span>';

      el.addEventListener('click', function() {
        el.classList.toggle('selected');
        var idx = state.interests.indexOf(label);
        if (idx === -1) state.interests.push(label);
        else state.interests.splice(idx, 1);
        updateNextState();
      });

      container.appendChild(el);
    });
    updateNextState();
  }

  // ==========================================
  // STEP 3 — COUNTRY
  // ==========================================
  function initCountrySearch() {
    var input = $('#akiform-country-input');
    var dropdown = $('#akiform-country-dropdown');

    input.addEventListener('focus', function() { renderCountryDropdown(input.value); dropdown.classList.add('open'); });
    input.addEventListener('input', function() { renderCountryDropdown(input.value); dropdown.classList.add('open'); });
    document.addEventListener('click', function(e) { if (!e.target.closest('#akiform-country-search')) dropdown.classList.remove('open'); });
  }

  function renderCountryDropdown(query) {
    var dropdown = $('#akiform-country-dropdown');
    var filtered = COUNTRIES.filter(function(c) { return norm(c).includes(norm(query)); });

    if (!filtered.length) {
      dropdown.innerHTML = '<div class="akiform-dropdown-empty">Sin resultados</div>';
      return;
    }
    dropdown.innerHTML = filtered.map(function(c) {
      return '<div class="akiform-dropdown-item' + (state.country === c ? ' selected' : '') + '" data-value="' + c + '">' + c + '</div>';
    }).join('');

    dropdown.querySelectorAll('.akiform-dropdown-item').forEach(function(item) {
      item.addEventListener('click', function() { selectCountry(item.dataset.value); });
    });
  }

  function selectCountry(value) {
    state.country = value;
    $('#akiform-country-dropdown').classList.remove('open');
    var input = $('#akiform-country-input');
    input.value = ''; input.style.display = 'none';
    $('#akiform-country-tag').classList.add('visible');
    $('#akiform-country-tag-text').textContent = value;
    updateNextState();
  }

  function clearCountry() {
    state.country = null;
    var input = $('#akiform-country-input');
    if (input) { input.style.display = ''; input.value = ''; }
    $('#akiform-country-tag').classList.remove('visible');
    updateNextState();
  }

  // ==========================================
  // STEP 4 — VALIDATION
  // ==========================================
  function initContactValidation() {
    ['#akiform-name', '#akiform-email'].forEach(function(sel) {
      $(sel).addEventListener('input', function() {
        $(sel).classList.remove('error');
        var err = $(sel + '-error');
        if (err) err.classList.remove('visible');
        updateNextState();
      });
    });
  }

  function validateStep4() {
    var name = $('#akiform-name').value.trim();
    var email = $('#akiform-email').value.trim();
    var valid = true;

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

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

    state.name = $('#akiform-name').value.trim();
    state.email = $('#akiform-email').value.trim();
    state.phone = $('#akiform-phone').value.trim() || null;
    state.org = $('#akiform-org').value.trim() || null;
    state.comment = $('#akiform-comment').value.trim() || null;

    var payload = {
      formName: CONFIG.formName,
      email: state.email,
      website: $('#akiform-hp') ? $('#akiform-hp').value : '',
      data: {
        role: state.role,
        interests: state.interests,
        location: {
          country: state.country,
        },
        contact: {
          name: state.name,
          email: state.email,
          phone: state.phone,
          organization: state.org,
          comment: state.comment,
        }
      },
    };

    var btn = $('#akiform-btn-next');
    btn.classList.add('loading');
    btn.disabled = true;

    try {
      // 1) Fetch a fresh CSRF token (avoids stale cached tokens)
      var csrfToken = await fetchCsrfToken();

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

      var result = await res.json();

      if (!res.ok) {
        throw new Error(result.message || 'Server error');
      }

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

  function showSuccess() {
    $$('.akiform-step').forEach(function(s) { s.classList.remove('active'); });
    $('#akiform-success').classList.add('active');
    $('#akiform-footer').style.display = 'none';
    $('#akiform-progress').style.display = 'none';
  }

  // ==========================================
  // INIT
  // ==========================================
  function init() {
    initRoles();
    initCountrySearch();
    initContactValidation();

    document.addEventListener('keydown', function(e) {
      if (!$('#akiform-overlay').classList.contains('active')) return;
      if (e.key === 'Escape') close();
      if (e.key === 'Enter' && !$('#akiform-btn-next').disabled) { e.preventDefault(); next(); }
    });

    var ctaCard = $('.akitrips-cta-card');
    if (ctaCard) {
      ctaCard.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); }
      });
    }
  }

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

  return { open, close, next, prev, clearCountry };
})();