(function(){
  if (typeof MVCHAT === 'undefined') return;

  function $(id){ return document.getElementById(id); }

  const root = document.querySelector('[data-mvchat]');
  if(!root) return;

  const ME = parseInt(MVCHAT.me, 10) || 0;

  const elSearch   = $('mvchat-search');
  const elZone     = $('mvchat-zone');
  const elResults  = $('mvchat-results');
  const elConvs    = $('mvchat-conversations');
  const elMsgs     = $('mvchat-messages');
  const elInput    = $('mvchat-input');
  const elSend     = $('mvchat-send');
  const elWho      = $('mvchat-who');
  const elWhere    = $('mvchat-where');
  const elOnline   = $('mvchat-online');
  const btnSearch  = $('mvchat-btn-search');
  const btnClear   = $('mvchat-btn-clear');

  let selectedUser = null;
  let debounceT = null;

  function api(path){
    return fetch(MVCHAT.rest + path, {
      headers: { 'X-WP-Nonce': MVCHAT.nonce }
    }).then(r => r.json());
  }

  function post(path, formData){
    return fetch(MVCHAT.rest + path, {
      method: 'POST',
      headers: { 'X-WP-Nonce': MVCHAT.nonce },
      body: formData
    }).then(r => r.json());
  }

  function heartbeat(){
    fetch(MVCHAT.rest + 'heartbeat', {
      method: 'POST',
      headers: { 'X-WP-Nonce': MVCHAT.nonce }
    }).catch(()=>{});
  }

  function avatarLetter(name){
    if(!name) return 'M';
    return name.trim().charAt(0).toUpperCase();
  }

  function renderList(container, list, onClick){
    container.innerHTML = '';

    if(!list || list.length === 0){
      container.innerHTML = '<div class="mvchat-empty">Sin resultados.</div>';
      return;
    }

    list.forEach(u => {
      const div = document.createElement('div');
      div.className = 'mvchat-item';

      div.innerHTML = `
        <div class="mvchat-avatar">${avatarLetter(u.display_name)}</div>
        <div class="mvchat-meta">
          <div class="mvchat-name">
            ${u.display_name}
            <span class="mvchat-status">${u.online ? '🟢 Online' : '⚪ Offline'}</span>
            ${parseInt(u.unread || 0, 10) > 0 ? `<span class="mvchat-unread">${u.unread}</span>` : ''}
          </div>
          <div class="mvchat-sub">
            📍 ${u.city || 'Zona no definida'}${u.province ? ' · ' + u.province : ''}
          </div>
        </div>
      `;

      div.addEventListener('click', () => onClick(u));
      container.appendChild(div);
    });
  }

  function setActiveUser(u){
    selectedUser = u.ID;
    elWho.textContent = u.display_name || 'Usuario';
    elWhere.textContent = '📍 ' + (u.city || 'Zona no definida') + (u.province ? ' · ' + u.province : '');
    elOnline.textContent = u.online ? '🟢 Online' : '⚪ Offline';
    elInput.disabled = false;
    elSend.disabled = false;
    loadMessages();
  }

  function loadZones(){
    api('zones').then(list => {
      elZone.innerHTML = '<option value="">Todas las zonas</option>';
      (list || []).forEach(z => {
        const opt = document.createElement('option');
        opt.value = z.city;
        opt.textContent = z.city;
        elZone.appendChild(opt);
      });
    }).catch(() => {
      elZone.innerHTML = '<option value="">Todas las zonas</option>';
    });
  }

  function loadConversations(){
    api('conversations').then(list => {
      if(!list || list.length === 0){
        elConvs.innerHTML = '<div class="mvchat-empty">Aún no tienes conversaciones.</div>';
        return;
      }
      renderList(elConvs, list, setActiveUser);
    }).catch(() => {
      elConvs.innerHTML = '<div class="mvchat-empty">No se pudieron cargar conversaciones.</div>';
    });
  }

  function doSearch(){
    const q = (elSearch.value || '').trim();
    const zone = (elZone.value || '').trim();

    if(q.length < 2 && zone !== ''){
      api('search?q=&zone=' + encodeURIComponent(zone))
        .then(list => renderList(elResults, list, setActiveUser))
        .catch(() => {
          elResults.innerHTML = '<div class="mvchat-empty">Error buscando usuarios.</div>';
        });
      return;
    }

    if(q.length < 2){
      elResults.innerHTML = '<div class="mvchat-empty">Escribe al menos 2 letras o selecciona zona.</div>';
      return;
    }

    api('search?q=' + encodeURIComponent(q) + '&zone=' + encodeURIComponent(zone))
      .then(list => renderList(elResults, list, setActiveUser))
      .catch(() => {
        elResults.innerHTML = '<div class="mvchat-empty">Error buscando usuarios.</div>';
      });
  }

  function clearSearch(){
    elSearch.value = '';
    elZone.value = '';
    elResults.innerHTML = '<div class="mvchat-empty">Busca un usuario para empezar.</div>';
  }

  function loadMessages(){
    if(!selectedUser) return;

    api('messages?receiver_id=' + selectedUser).then(list => {
      elMsgs.innerHTML = '';

      if(!list || list.length === 0){
        elMsgs.innerHTML = '<div class="mvchat-empty">No hay mensajes todavía. Envía el primero 👇</div>';
        loadConversations();
        return;
      }

      list.forEach(m => {
        const div = document.createElement('div');
        div.className = 'mvchat-bubble ' + (parseInt(m.sender_id, 10) === ME ? 'mvchat-me' : 'mvchat-other');
        div.textContent = m.message;
        elMsgs.appendChild(div);
      });

      elMsgs.scrollTop = elMsgs.scrollHeight;
      loadConversations();
    }).catch(()=>{});
  }

  function sendMessage(){
    if(!selectedUser) return;

    const msg = (elInput.value || '').trim();
    if(!msg) return;

    const fd = new FormData();
    fd.append('receiver_id', selectedUser);
    fd.append('message', msg);

    post('send', fd).then(() => {
      elInput.value = '';
      loadMessages();
      loadConversations();
    }).catch(() => {
      alert('No se pudo enviar el mensaje.');
    });
  }

  btnSearch.addEventListener('click', doSearch);
  btnClear.addEventListener('click', clearSearch);

  elZone.addEventListener('change', () => {
    doSearch();
  });

  elSearch.addEventListener('keyup', () => {
    clearTimeout(debounceT);
    debounceT = setTimeout(() => {
      if((elSearch.value || '').trim().length >= 2 || (elZone.value || '').trim() !== ''){
        doSearch();
      }
    }, 350);
  });

  elSend.addEventListener('click', sendMessage);

  elInput.addEventListener('keydown', (e) => {
    if(e.key === 'Enter'){
      e.preventDefault();
      sendMessage();
    }
  });

  heartbeat();
  setInterval(heartbeat, 30000);
  setInterval(() => {
    if(selectedUser) loadMessages();
    else loadConversations();
  }, 5000);

  elResults.innerHTML = '<div class="mvchat-empty">Busca un usuario para empezar.</div>';
  loadZones();
  loadConversations();
})();