let fotosData = [];
let sortableFotos = null;

async function cargarFotos() {
  const res  = await apiFetch(`${API}/fotos.php`);
  if (!res) return;
  fotosData  = await res.json();
  renderFotos();
}

function renderFotos() {
  const grid    = document.getElementById('fotoGrid');
  const counter = document.getElementById('fotoCount');
  counter.textContent = `(${fotosData.length}/10)`;

  grid.innerHTML = fotosData.map(f => `
    <div class="foto-item" data-id="${f.id}">
      <img src="${f.url}" alt="Foto">
      <button class="foto-del" onclick="eliminarFoto(${f.id})" title="Eliminar">×</button>
      <div class="drag-handle">⠿ arrastra</div>
    </div>
  `).join('') || '';

  // Ocultar área de subida si se llegó al límite
  const uploadArea = document.getElementById('fotoUploadArea');
  uploadArea.style.display = fotosData.length >= 10 ? 'none' : 'block';

  // Inicializar o actualizar sortable
  if (sortableFotos) sortableFotos.destroy();
  sortableFotos = new Sortable(grid, {
    animation: 150,
    ghostClass: 'sortable-ghost',
    onEnd: guardarOrdenFotos,
  });
}

async function guardarOrdenFotos() {
  const items = document.querySelectorAll('#fotoGrid .foto-item');
  const orden = Array.from(items).map((el, i) => ({
    id:    parseInt(el.dataset.id),
    orden: i,
  }));

  await apiFetch(`${API}/fotos.php`, {
    method:  'PUT',
    headers: { 'Content-Type': 'application/json' },
    body:    JSON.stringify(orden),
  });
}

async function eliminarFoto(id) {
  if (!confirm('¿Eliminar esta foto?')) return;
  const res = await apiFetch(`${API}/fotos.php?id=${id}&_method=DELETE`, { method: 'DELETE' });
  if (!res) return;
  if (res.ok) {
    fotosData = fotosData.filter(f => f.id !== id);
    renderFotos();
  } else {
    const d = await res.json();
    showMsg('fotoMsg', d.error || 'Error al eliminar');
  }
}

// Subida de foto
document.getElementById('fotoUploadArea').addEventListener('click', () => {
  if (fotosData.length >= 10) return;
  document.getElementById('fotoInput').click();
});

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

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

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

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

  const res = await apiFetch(`${API}/fotos.php`, { method: 'POST', body: fd });
  input.value = '';
  label.innerHTML = orig;

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

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

  fotosData.push(data);
  renderFotos();
  showMsg('fotoMsg', 'Foto subida correctamente.', 'success');
});
