const passwordInput = document.getElementById("password");
const submitPasswordButton = document.getElementById("submit-password");
const date = new Date();
let activities = JSON.parse(localStorage.getItem("activities")) || {};
let isAuthenticated = false;

const renderCalendar = () => {
  date.setDate(1);

  const monthDays = document.querySelector(".days");

  const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
  const prevLastDay = new Date(date.getFullYear(), date.getMonth(), 0).getDate();
  const firstDayIndex = date.getDay();
  const lastDayIndex = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDay();
  const nextDays = 7 - lastDayIndex - 1;

  const months = [
    "januar", "februar", "marec", "april", "maj", "junij",
    "julij", "avgust", "september", "oktober", "november", "december"
  ];

  // Update this line to include the year next to the month name
  document.querySelector(".date h1").innerHTML = `${months[date.getMonth()]} ${date.getFullYear()}`;
  document.querySelector(".date p").innerHTML = new Date().toDateString();

  let days = "";

  for (let x = firstDayIndex; x > 0; x--) {
    days += `<div class="prev-date">${prevLastDay - x + 1}</div>`;
  }

  for (let i = 1; i <= lastDay; i++) {
    const fullDate = `${date.getFullYear()}-${date.getMonth() + 1}-${i}`;
    const activityExists = activities[fullDate];

    if (activityExists) {
      days += `<div class="selected" ${isAuthenticated ? `data-activity="${activityExists}"` : ""}>${i}</div>`;
    } else if (i === new Date().getDate() && date.getMonth() === new Date().getMonth()) {
      days += `<div class="today">${i}</div>`;
    } else {
      days += `<div>${i}</div>`;
    }
  }

  for (let j = 1; j <= nextDays; j++) {
    days += `<div class="next-date">${j}</div>`;
  }

  monthDays.innerHTML = days;

  document.querySelectorAll(".days div").forEach(day => {
    day.addEventListener("click", function () {
      if (isAuthenticated) {
        const dayNumber = this.innerText;
        const fullDate = `${date.getFullYear()}-${date.getMonth() + 1}-${dayNumber}`;

        let activity = prompt("Vpiši dejavnost za ta dan:", this.getAttribute('data-activity') || "");

        if (activity) {
          activities[fullDate] = activity;
          this.classList.add("selected");
          this.setAttribute("data-activity", activity);
        } else {
          delete activities[fullDate];
          this.classList.remove("selected");
          this.removeAttribute("data-activity");
        }

        localStorage.setItem("activities", JSON.stringify(activities));
      } else {
        alert("Potrebuješ geslo, da pogledaš ali dodaš dejavnost.");
      }
    });

    day.addEventListener("mouseover", function () {
      if (isAuthenticated) {
        const activity = this.getAttribute('data-activity');
        if (activity) {
          this.setAttribute("title", activity);
        }
      }
    });
  });
};

document.querySelector(".prev").addEventListener("click", () => {
  date.setMonth(date.getMonth() - 1);
  renderCalendar();
});

document.querySelector(".next").addEventListener("click", () => {
  date.setMonth(date.getMonth() + 1);
  renderCalendar();
});

passwordInput.addEventListener("keypress", (event) => {
  if (event.key === "Enter") {
    submitPasswordButton.click();
  }
});

submitPasswordButton.addEventListener("click", () => {
  const password = document.getElementById("password").value;
  if (password === "matematik") {
    isAuthenticated = true;
    document.querySelector(".password-section").style.display = "none";
    renderCalendar();
    alert("Uspešno vpisani");
  } else {
    alert("Napačno geslo. Puskusi znova!");
  }
});

renderCalendar();