// ── QUILL EDITORS ───────────────────────────────────────
const toolbarOptions = [
  [{ header: [1, 2, 3, false] }],
  ['bold', 'italic', 'underline'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['clean'],
];

const quill = new Quill('#quillEditor', {
  theme: 'snow',
  placeholder: 'Escribe aquí la descripción en español…',
  modules: { toolbar: toolbarOptions },
});

const quillEn = new Quill('#quillEditorEn', {
  theme: 'snow',
  placeholder: 'Write here the description in English…',
  modules: { toolbar: toolbarOptions },
});

// ── SWITCH TABS ES/EN ────────────────────────────────────
function switchDescTab(lang) {
  const isEs = lang === 'es';
  document.getElementById('panelDescEs').style.display = isEs ? 'block' : 'none';
  document.getElementById('panelDescEn').style.display = isEs ? 'none'  : 'block';
  document.getElementById('tabDescEs').style.borderBottomColor = isEs ? 'var(--primary-light)' : 'transparent';
  document.getElementById('tabDescEs').style.color             = isEs ? 'var(--primary-light)' : 'var(--text-muted)';
  document.getElementById('tabDescEn').style.borderBottomColor = isEs ? 'transparent' : 'var(--primary-light)';
  document.getElementById('tabDescEn').style.color             = isEs ? 'var(--text-muted)' : 'var(--primary-light)';
}

// ── CARGAR INFO DEL NEGOCIO ─────────────────────────────
async function cargarInfoNegocio() {
  const res = await apiFetch(`${API}/perfil.php`);
  if (!res) return;
  const data = await res.json();

  renderLogo(data.logo_url, data.nombre);
  renderPortada(data.imagen_portada || null);
  initClientMap(data.latitud ? parseFloat(data.latitud) : null, data.longitud ? parseFloat(data.longitud) : null);

  // Editores de descripción
  if (data.descripcion)    quill.root.innerHTML   = data.descripcion;
  if (data.descripcion_en) quillEn.root.innerHTML = data.descripcion_en;

  // Redes sociales
  document.getElementById('sFacebook').value  = data.facebook  || '';
  document.getElementById('sInstagram').value = data.instagram || '';
  document.getElementById('sYoutube').value   = data.youtube   || '';
  document.getElementById('sTiktok').value    = data.tiktok    || '';
}

// ── GUARDAR INFO (DESCRIPCIÓN + REDES) ──────────────────
async function guardarInfo() {
  const body = {
    descripcion:    quill.root.innerHTML   === '<p><br></p>' ? '' : quill.root.innerHTML,
    descripcion_en: quillEn.root.innerHTML === '<p><br></p>' ? '' : quillEn.root.innerHTML,
    facebook:    document.getElementById('sFacebook').value.trim(),
    instagram:   document.getElementById('sInstagram').value.trim(),
    youtube:     document.getElementById('sYoutube').value.trim(),
    tiktok:      document.getElementById('sTiktok').value.trim(),
  };

  const res = await apiFetch(`${API}/perfil.php?accion=actualizar_info`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });
  if (!res) return;
  const data = await res.json();

  if (!res.ok) {
    showMsg('infoMsg', data.error || 'Error al guardar');
    return;
  }
  showMsg('infoMsg', 'Información guardada correctamente.', 'success');
}

// ── PORTADA ─────────────────────────────────────────────
function renderPortada(url) {
  const img         = document.getElementById('portadaActual');
  const placeholder = document.getElementById('portadaPlaceholder');
  const delBtn      = document.getElementById('portadaDelBtn');

  if (url) {
    img.src               = url;
    img.style.display     = 'block';
    placeholder.style.display = 'none';
    delBtn.style.display  = 'inline-flex';
  } else {
    img.style.display     = 'none';
    placeholder.style.display = 'flex';
    delBtn.style.display  = 'none';
  }
}

document.getElementById('portadaInput').addEventListener('change', () => {
  const input = document.getElementById('portadaInput');
  const file  = input.files[0];
  if (!file) return;

  if (file.size > 3 * 1024 * 1024) {
    showMsg('portadaMsg', 'El archivo supera los 3 MB.');
    input.value = '';
    return;
  }

  const bar      = document.getElementById('portadaBar');
  const barWrap  = document.getElementById('portadaProgressBar');
  const barLabel = document.getElementById('portadaProgressLabel');
  barWrap.style.display  = 'block';
  barLabel.style.display = 'block';
  bar.style.width        = '0%';
  barLabel.textContent   = 'Subiendo… 0%';

  const fd = new FormData();
  fd.append('portada', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', `${API}/perfil.php?accion=subir_portada`);
  xhr.setRequestHeader('Authorization', `Bearer ${getToken()}`);
  xhr.upload.onprogress = e => {
    if (!e.lengthComputable) return;
    const pct = Math.round(e.loaded / e.total * 100);
    bar.style.width      = pct + '%';
    barLabel.textContent = `Subiendo… ${pct}%`;
  };
  xhr.onload = () => {
    input.value = '';
    barWrap.style.display  = 'none';
    barLabel.style.display = 'none';
    if (xhr.status === 401) { cerrarSesion(); return; }
    const data = JSON.parse(xhr.responseText);
    if (xhr.status !== 200) { showMsg('portadaMsg', data.error || 'Error al subir'); return; }
    renderPortada(data.imagen_portada);
    showMsg('portadaMsg', 'Foto de portada actualizada.', 'success');
  };
  xhr.onerror = () => {
    barWrap.style.display  = 'none';
    barLabel.style.display = 'none';
    showMsg('portadaMsg', 'Error de conexión.');
  };
  xhr.send(fd);
});

async function eliminarPortada() {
  if (!confirm('¿Quitar la foto de portada?')) return;
  const res = await apiFetch(`${API}/perfil.php?accion=eliminar_portada`, { method: 'DELETE' });
  if (!res) return;
  if (res.ok) {
    renderPortada(null);
    showMsg('portadaMsg', 'Foto de portada eliminada.', 'success');
  }
}

// ── LOGO ────────────────────────────────────────────────
function renderLogo(logoUrl, nombre) {
  const placeholder = document.getElementById('logoPlaceholder');
  const imgEl       = document.getElementById('logoActual');
  const delBtn      = document.getElementById('logoDelBtn');
  const inicial     = (nombre || '?')[0].toUpperCase();

  if (logoUrl) {
    imgEl.src             = logoUrl;
    imgEl.style.display   = 'block';
    placeholder.style.display = 'none';
    delBtn.style.display  = 'inline-flex';
  } else {
    placeholder.textContent    = inicial;
    placeholder.style.display  = 'flex';
    imgEl.style.display        = 'none';
    delBtn.style.display       = 'none';
  }
}

document.getElementById('logoInput').addEventListener('change', async () => {
  const input = document.getElementById('logoInput');
  const file  = input.files[0];
  if (!file) return;

  if (file.size > 3 * 1024 * 1024) {
    showMsg('logoMsg', 'El archivo supera los 3 MB.');
    input.value = '';
    return;
  }

  const label = document.getElementById('logoLabel');
  label.innerHTML = '<span class="spinner" style="border-color:var(--primary);border-top-color:transparent;display:inline-block;"></span> Subiendo…';

  const fd = new FormData();
  fd.append('logo', file);

  const res = await apiFetch(`${API}/perfil.php`, { method: 'POST', body: fd });
  input.value = '';
  label.textContent = '📷 Subir logo (JPG/PNG)';

  if (!res) return;
  const data = await res.json();

  if (!res.ok) {
    showMsg('logoMsg', data.error || 'Error al subir logo');
    return;
  }

  renderLogo(data.logo_url, localStorage.getItem('nombre'));
  showMsg('logoMsg', 'Logo actualizado correctamente.', 'success');
});

async function eliminarLogo() {
  if (!confirm('¿Quitar el logo del negocio?')) return;
  const res = await apiFetch(`${API}/perfil.php?_method=DELETE`, { method: 'DELETE' });
  if (!res) return;
  if (res.ok) {
    renderLogo(null, localStorage.getItem('nombre'));
    showMsg('logoMsg', 'Logo eliminado.', 'success');
  }
}

// ── CAMBIAR CONTRASEÑA ───────────────────────────────────
async function cambiarPassword() {
  const actual    = document.getElementById('cpActual').value;
  const nueva     = document.getElementById('cpNueva').value.trim();
  const confirmar = document.getElementById('cpConfirmar').value.trim();

  if (!actual || !nueva || !confirmar) {
    showMsg('cpMsg', 'Completa todos los campos'); return;
  }
  if (nueva !== confirmar) {
    showMsg('cpMsg', 'Las contraseñas no coinciden'); return;
  }
  if (nueva.length < 8) {
    showMsg('cpMsg', 'Mínimo 8 caracteres'); return;
  }

  const res = await apiFetch(`${API}/perfil.php?accion=cambiar_password`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      password_actual:    actual,
      password_nueva:     nueva,
      password_confirmar: confirmar,
    }),
  });
  if (!res) return;
  const data = await res.json();
  if (!res.ok) { showMsg('cpMsg', data.error); return; }

  showMsg('cpMsg', 'Contraseña actualizada correctamente.', 'success');
  document.getElementById('cpActual').value   = '';
  document.getElementById('cpNueva').value    = '';
  document.getElementById('cpConfirmar').value = '';
  setTimeout(() => cerrarModal('modalCambiarPass'), 1500);
}

// ── MAPA (CLIENTE) ───────────────────────────────────────
let clientMap, clientMarker;

function initClientMap(lat, lng) {
  const center = (lat && lng) ? [lat, lng] : [35.1495, -90.0490];
  if (clientMap) { clientMap.remove(); clientMap = null; }
  clientMap = L.map('clientMap').setView(center, lat ? 15 : 12);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap'
  }).addTo(clientMap);

  clientMarker = L.marker(center, { draggable: true }).addTo(clientMap);
  if (lat && lng) actualizarCoordsCliente(lat, lng);

  clientMarker.on('dragend', () => {
    const p = clientMarker.getLatLng();
    actualizarCoordsCliente(p.lat, p.lng);
  });
  clientMap.on('click', e => {
    clientMarker.setLatLng(e.latlng);
    actualizarCoordsCliente(e.latlng.lat, e.latlng.lng);
  });
}

function actualizarCoordsCliente(lat, lng) {
  document.getElementById('cLat').value = lat.toFixed(7);
  document.getElementById('cLng').value = lng.toFixed(7);
  document.getElementById('clientCoordsDisplay').textContent = `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
}

async function buscarDireccionCliente() {
  const q = document.getElementById('clientMapSearch').value.trim();
  if (!q) return;
  const res  = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(q)}&limit=1`, { headers: { 'Accept-Language': 'es' } });
  const data = await res.json();
  if (!data.length) { showMsg('ubicacionMsg', 'Dirección no encontrada'); return; }
  const lat = parseFloat(data[0].lat);
  const lng = parseFloat(data[0].lon);
  clientMap.setView([lat, lng], 16);
  clientMarker.setLatLng([lat, lng]);
  actualizarCoordsCliente(lat, lng);
}

document.getElementById('clientMapSearch').addEventListener('keydown', e => {
  if (e.key === 'Enter') { e.preventDefault(); buscarDireccionCliente(); }
});

async function guardarUbicacion() {
  const lat = document.getElementById('cLat').value;
  const lng = document.getElementById('cLng').value;
  if (!lat || !lng) { showMsg('ubicacionMsg', 'Coloca el pin en el mapa primero'); return; }

  const res = await apiFetch(`${API}/perfil.php?accion=guardar_ubicacion`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ latitud: lat, longitud: lng }),
  });
  if (!res) return;
  const data = await res.json();
  if (!res.ok) { showMsg('ubicacionMsg', data.error || 'Error'); return; }
  showMsg('ubicacionMsg', 'Ubicación guardada correctamente.', 'success');
}

// Iniciar
cargarInfoNegocio();
