/**
 * AKITRIPS FAIR FORM WIDGET
 *
 * Exposes global: AkiForm.open(), AkiForm.close(), AkiForm.next(),
 *                 AkiForm.prev(), AkiForm.clearCity(), AkiForm.clearCountry()
 *
 * Configuration:
 *   - CONFIG.eventName  : Tag submissions with the fair/event name
 *   - 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 event / deployment
  // ==========================================
  const CONFIG = {
    eventName: 'Vitrina Turística de Anato 2026',
    formName: 'feria-anato-2026',
    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 COLOMBIAN_CITIES = [
    'Bogotá', 'Medellín', 'Cali', 'Barranquilla', 'Cartagena',
    'Bucaramanga', 'Pereira', 'Santa Marta', 'Manizales', 'Cúcuta',
    'Ibagué', 'Villavicencio', 'Pasto', 'Neiva', 'Armenia',
    'Montería', 'Popayán', 'Valledupar', 'Sincelejo', 'Tunja',
    'Florencia', 'Riohacha', 'Quibdó', 'Yopal', 'Mocoa',
    'Leticia', 'San Andrés', 'Buenaventura', 'Barichara', 'Girón',
    'Villa de Leyva', 'Salento', 'Guatapé', 'Filandia', 'Jardín',
    'Mompox', 'San Gil', 'Nuquí', 'Bahía Solano', 'Providencia',
    '— Otra ciudad de Colombia',
    '— Otro país',
  ];

  const COUNTRIES = [
    'Argentina', 'Bolivia', 'Brasil', 'Chile', 'Costa Rica',
    'Cuba', 'Ecuador', 'El Salvador', 'España', 'Estados Unidos',
    'Guatemala', 'Honduras', 'México', 'Nicaragua', 'Panamá',
    'Paraguay', 'Perú', 'Puerto Rico', 'República Dominicana',
    'Uruguay', 'Venezuela', 'Otro',
  ];

  // ==========================================
  // STATE
  // ==========================================
  let state = {
    step: 1,
    role: null,
    interests: [],
    city: null,
    otherCity: null,
    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: [], city: null, otherCity: null,
      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');
    });
    clearCity();
    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;

    if (state.step === 3 && state.city === '— Otra ciudad de Colombia') {
      state.otherCity = $('#akiform-other-city').value.trim();
    }

    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) {
      if (!state.city && !state.country) return false;
      if (state.city === '— Otro país' && !state.country) return false;
      return true;
    }
    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 — LOCATION
  // ==========================================
  function initCitySearch() {
    var input = $('#akiform-city-input');
    var dropdown = $('#akiform-city-dropdown');

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

  function renderCityDropdown(query) {
    var dropdown = $('#akiform-city-dropdown');
    var filtered = COLOMBIAN_CITIES.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.city === c ? ' selected' : '') + '" data-value="' + c + '">' + c + '</div>';
    }).join('');

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

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

    $('#akiform-other-city-field').classList.toggle('visible', value === '— Otra ciudad de Colombia');
    $('#akiform-country-wrapper').classList.toggle('visible', value === '— Otro país');

    if (value === '— Otro país') state.city = null;
    updateNextState();
  }

  function clearCity() {
    state.city = null; state.otherCity = null; state.country = null;
    var input = $('#akiform-city-input');
    input.style.display = ''; input.value = '';
    $('#akiform-city-tag').classList.remove('visible');
    $('#akiform-other-city-field').classList.remove('visible');
    $('#akiform-country-wrapper').classList.remove('visible');
    $('#akiform-other-city').value = '';
    clearCountry();
    updateNextState();
  }

  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-wrapper')) 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: {
        event: CONFIG.eventName,
        role: state.role,
        interests: state.interests,
        location: {
          city: state.city === '— Otra ciudad de Colombia'
            ? (state.otherCity || 'Otra ciudad')
            : state.city,
          country: state.country || 'Colombia',
        },
        contact: {
          name: state.name,
          email: state.email,
          phone: state.phone,
          organization: state.org,
          comment: state.comment,
        },
        submitted_at: new Date().toISOString(),
      },
    };

    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();
    initCitySearch();
    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, clearCity, clearCountry };
})();