export function createEventCard(event) {

  const article = document.createElement("article");
  article.className = "event-card";

  const title = document.createElement("h3");
  title.className = "event-card__title";
  title.textContent = event.name;

  const formattedDate = event.date
    ? new Date(event.date).toLocaleDateString("de-CH", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric"
      })
    : "Date not available";

  const formattedTime = event.time
    ? event.time.slice(0, 5)
    : "";

  const dateTime = formattedTime
    ? `${formattedDate}, ${formattedTime}`
    : formattedDate;

  const date = document.createElement("p");
  date.className = "event-card__date";
  date.textContent = dateTime;

  const venue = document.createElement("p");
  venue.className = "event-card__venue";
  venue.textContent = event.venue;

  article.append(title, date, venue);

  // =========================
  // BUTTON CONTAINER
  // =========================
  const buttonContainer = document.createElement("div");
  buttonContainer.className = "d-flex gap-2 mt-2";

  // =========================
  // SAVE BUTTON
  // =========================
  const saveBtn = document.createElement("button");
  saveBtn.textContent = "Save";
  saveBtn.className = "btn btn-outline-primary btn-sm";

  saveBtn.addEventListener("click", () => {

    if (!window.currentUser) {
      alert("Please login to save events");
      return;
    }

    const saved = JSON.parse(localStorage.getItem("savedEvents") || "[]");

    // prevent duplicates
    if (saved.find(e => e.id === event.id)) {
      alert("Event already saved");
      return;
    }

    saved.push(event);
    localStorage.setItem("savedEvents", JSON.stringify(saved));

    alert("Event saved!");
  });

  saveBtn.disabled = !window.currentUser;

  // =========================
  // INVITE BUTTON 
  // =========================
  const inviteBtn = document.createElement("button");
  inviteBtn.textContent = "Invite";
  inviteBtn.className = "btn btn-primary btn-sm";

  inviteBtn.addEventListener("click", async () => {

    if (!window.currentUser) {
      alert("Please login to invite users");
      return;
    }

    const toUser = prompt("Enter username to invite:");
    if (!toUser) return;

    await fetch("http://localhost:3000/api/invitation", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Username": window.currentUser
      },
      body: JSON.stringify({
        toUser,
        eventId: event.id,
        eventName: event.name
      })
    });

    alert("Invitation sent!");
  });

  inviteBtn.disabled = !window.currentUser;

  // =========================
  // APPEND BUTTONS
  // =========================
  buttonContainer.append(saveBtn, inviteBtn);
  article.appendChild(buttonContainer);

  return article;
}