my_app_remote_server_ui_app/server/frontend/app.js

import {
  login,
  register,
  getLinks,
  createLink,
  deleteLink,
  updateLink
} from "./api.js";

const authSection = document.getElementById("authSection");
const linkSection = document.getElementById("linkSection");
const authStatus = document.getElementById("authStatus");
const list = document.getElementById("list");
const editModal = document.getElementById("editModal");
const editForm = document.getElementById("editForm");
const closeModal = document.getElementById("closeModal");

let editingId = null;
let token = null;

// ======================================================
// AUTH
// ======================================================

function setToken(t) {
  token = t;

  if (token) {
    authSection.style.display = "none";
    linkSection.style.display = "block";
    loadLinks();
  } else {
    authSection.style.display = "block";
    linkSection.style.display = "none";
  }
}

document.getElementById("loginForm").addEventListener("submit", async e => {
  e.preventDefault();
  const email = e.target.email.value;
  const password = e.target.password.value;

  try {
    const t = await login(email, password);
    setToken(t);
  } catch (err) {
    authStatus.textContent = err.message;
  }
});

document.getElementById("registerForm").addEventListener("submit", async e => {
  e.preventDefault();
  const email = e.target.email.value;
  const password = e.target.password.value;

  try {
    await register(email, password);
    authStatus.textContent = "Registrato! Ora effettua il login.";
  } catch (err) {
    authStatus.textContent = err.message;
  }
});

// ======================================================
// LINKS
// ======================================================

async function loadLinks() {
  const links = await getLinks(token);

  list.innerHTML = links
    .map(
      link => `
      <div class="item" data-id="${link._id}">
        ${link.icon ? `<img src="http://192.168.1.3:3000${link.icon}">` : ""}
        
        <div class="info">
          <strong>${link.name}</strong><br>
          <a href="${link.url}" target="_blank">${link.url}</a>
        </div>

        <div class="actions">
          <button class="editBtn" data-id="${link._id}">Modifica</button>
          <button class="deleteBtn" data-id="${link._id}">Elimina</button>
        </div>
      </div>
    `
    )
    .join("");
}

// ======================================================
// CREAZIONE LINK
// ======================================================

document.getElementById("linkForm").addEventListener("submit", async e => {
  e.preventDefault();

  const formData = new FormData(e.target);
  const iconFile = formData.get("icon");

  await createLink(token, {
    name: formData.get("name"),
    url: formData.get("url"),
    iconFile: iconFile.size > 0 ? iconFile : null
  });

  e.target.reset();
  loadLinks();
});

// ======================================================
// AZIONI: MODIFICA + ELIMINA
// ======================================================

list.addEventListener("click", async e => {
  const id = e.target.dataset.id;
  if (!id) return;

  // -------------------------
  // ELIMINA
  // -------------------------
  if (e.target.classList.contains("deleteBtn")) {
    if (confirm("Vuoi davvero eliminare questo link?")) {
      await deleteLink(token, id);
      loadLinks();
    }
    return;
  }

  // -------------------------
  // MODIFICA
  // -------------------------
/*  if (e.target.classList.contains("editBtn")) {
    const newName = prompt("Nuovo nome:");
    const newUrl = prompt("Nuovo URL:");

    if (!newName && !newUrl) return;

    await updateLink(token, id, {
      name: newName,
      url: newUrl
    });

    loadLinks();
  }*/

if (e.target.classList.contains("editBtn")) {
  const id = e.target.dataset.id;
  editingId = id;

  // Precompila i campi
  const item = e.target.closest(".item");
  const name = item.querySelector("strong").textContent;
  const url = item.querySelector("a").textContent;

  editForm.name.value = name;
  editForm.url.value = url;
  editForm.icon.value = ""; // reset file input

  editModal.style.display = "flex";
}

closeModal.addEventListener("click", () => {
  editModal.style.display = "none";
});

editForm.addEventListener("submit", async e => {
  e.preventDefault();

  const name = editForm.name.value;
  const url = editForm.url.value;
  const iconFile = editForm.icon.files[0] || null;

  await updateLink(token, editingId, {
    name,
    url,
    iconFile
  });

  editModal.style.display = "none";
  loadLinks();
});

});

// ======================================================
// INIT
// ======================================================

setToken(null);