script.js

window.addEventListener("DOMContentLoaded", () => {
  // --- Elements ---
  const timeElement = document.getElementById("time");
  const dateElement = document.getElementById("date");
  const greetingElement = document.getElementById("greeting");
  const searchBar = document.getElementById("search-bar");
  const searchButton = document.getElementById("search-button");
  const quickSitesContainer = document.getElementById("quick-sites-container");
  const modalBackdrop = document.getElementById("modal-backdrop");
  const addSiteModal = document.getElementById("add-site-modal");
  const siteNameInput = document.getElementById("site-name-input");
  const siteUrlInput = document.getElementById("site-url-input");
  const saveButton = document.getElementById("save-button");
  const cancelButton = document.getElementById("cancel-button");
  const settingsPanel = document.getElementById("settings-panel");
  const settingsButton = document.getElementById("settings-button");
  const settingsCloseButton = document.getElementById("settings-close-button");
  const settingsSitesList = document.getElementById("settings-sites-list");
  const deleteAllSitesButton = document.getElementById(
    "delete-all-sites-button"
  );
  const confirmDeleteModal = document.getElementById("confirm-delete-modal");
  const confirmDeleteButton = document.getElementById("confirm-delete-button");
  const confirmCancelButton = document.getElementById("confirm-cancel-button");
  const contextMenu = document.getElementById("context-menu");
  const deleteSiteButton = document.getElementById("delete-site-button");
  const editSiteButton = document.getElementById("edit-site-button");
  const toggleQuickSites = document.getElementById("toggle-quick-sites");
  const addSiteModalTitle = document.getElementById("add-site-modal-title");
  const toggleFooter = document.getElementById("toggle-footer");
  const settingsFooter = document.querySelector(".settings-footer");

  let draggedSite = null;
  let editingSiteUrl = null;

  // --- Time, Date, Greeting ---
  function getDayWithSuffix(day) {
    if (day > 3 && day < 21) return "th";
    switch (day % 10) {
      case 1:
        return "st";
      case 2:
        return "nd";
      case 3:
        return "rd";
      default:
        return "th";
    }
  }
  function updateClock() {
    const now = new Date();
    const minutes = now.getMinutes().toString().padStart(2, "0");
    const originalHours = now.getHours();
    const ampm = originalHours >= 12 ? "PM" : "AM";
    let hours = originalHours % 12;
    hours = hours ? hours : 12;
    timeElement.textContent = `${hours}:${minutes} ${ampm}`;
  }
  function updateDateAndGreeting() {
    const now = new Date();
    const originalHours = now.getHours();
    const dayOfWeek = now.toLocaleDateString("en-US", { weekday: "long" });
    const month = now.toLocaleDateString("en-US", { month: "long" });
    dateElement.textContent = `${dayOfWeek}, ${month} ${now.getDate()}${getDayWithSuffix(
      now.getDate()
    )}, ${now.getFullYear()}`;
    if (originalHours < 12) greetingElement.textContent = "Good morning.";
    else if (originalHours < 18)
      greetingElement.textContent = "Good afternoon.";
    else greetingElement.textContent = "Good evening.";
  }

  // --- Search Bar ---
  function performSearch() {
    const query = searchBar.value.trim();
    if (query)
      window.location.href = `https://www.google.com/search?q=${encodeURIComponent(
        query
      )}`;
  }

  // --- Quick Sites & Settings ---
  const defaultSites = [
    { name: "Google", url: "https://google.com" },
    { name: "YouTube", url: "https://youtube.com" },
    { name: "Reddit", url: "https://reddit.com" },
    { name: "GitHub", url: "https://github.com" },
  ];
  function getSites() {
    return JSON.parse(localStorage.getItem("quickSites")) || defaultSites;
  }
  function saveSites(sites) {
    localStorage.setItem("quickSites", JSON.stringify(sites));
    renderAll();
  }
  function getShowQuickSites() {
    const storedValue = localStorage.getItem("showQuickSites");
    return storedValue !== null ? JSON.parse(storedValue) : true;
  }

  function setShowQuickSites(value) {
    localStorage.setItem("showQuickSites", JSON.stringify(value));
    renderAll();
  }

  function getShowFooter() {
    const storedValue = localStorage.getItem("showFooter");
    return storedValue !== null ? JSON.parse(storedValue) : true;
  }

  function setShowFooter(value) {
    localStorage.setItem("showFooter", JSON.stringify(value));
    renderFooter();
  }

  function renderFooter() {
    if (getShowFooter()) {
      settingsFooter.classList.remove("hidden");
    } else {
      settingsFooter.classList.add("hidden");
    }
  }

  // The logic here handles GitHub separately as a quick-fix for a github-specific background transparency issue. - INVESTIGATE
  function getFaviconUrl(url) {
    if (url.includes("github.com")) {
      return "https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/github.svg";
    } else {
      return `https://www.google.com/s2/favicons?domain=${url}&sz=64`;
    }
  }

  function renderQuickSites() {
    if (!getShowQuickSites()) {
      quickSitesContainer.innerHTML = "";
      quickSitesContainer.classList.add("hidden");
      return;
    }
    quickSitesContainer.classList.remove("hidden");
    const sites = getSites();
    quickSitesContainer.innerHTML = "";
    sites.forEach((site) => {
      const siteLink = document.createElement("a");
      siteLink.href = site.url;
      siteLink.className = "site-link";
      siteLink.draggable = true;
      siteLink.dataset.url = site.url;
      siteLink.innerHTML = `<img src="${getFaviconUrl(site.url)}" class="favicon"><span class="site-name">${site.name}</span>`;
      quickSitesContainer.appendChild(siteLink);
    });
    if (sites.length < 12) {
      const addButton = document.createElement("button");
      addButton.id = "add-site-button";
      addButton.className = "site-link";
      addButton.innerHTML = `<div class="favicon">+</div><span class="site-name">Add Site</span>`;
      quickSitesContainer.appendChild(addButton);
    }
  }

  function handleSaveSite() {
    const sites = getSites();
    if (sites.length >= 12) {
      return alert("You can only have a maximum of 12 quick sites.");
    }
    const name = siteNameInput.value.trim();
    const url = siteUrlInput.value.trim();
    if (!name || !url) return alert("Please fill out both Name and URL.");
    try {
      new URL(url);
      saveSites([...sites, { name, url }]);
      closeAddSiteModal();
    } catch (error) {
      alert(
        "Invalid URL. Please enter a full URL (e.g., https://www.example.com)"
      );
    }
  }
  function renderSettings() {
    const sites = getSites();
    settingsSitesList.innerHTML = "";
    sites.forEach((site) => {
      const li = document.createElement("li");
      li.dataset.url = site.url;
      li.innerHTML = `<img src="${getFaviconUrl(site.url)}" class="settings-favicon"><span>${site.name}</span><button class="settings-site-delete-button">Delete</button>`;
      settingsSitesList.appendChild(li);
    });

    if (sites.length === 0) {
      deleteAllSitesButton.classList.add("faded-out");
    } else {
      deleteAllSitesButton.classList.remove("faded-out");
    }

    toggleQuickSites.checked = getShowQuickSites();
    toggleFooter.checked = getShowFooter();
  }
  function renderAll() {
    renderQuickSites();
    renderSettings();
    renderFooter();
  }

  // --- Modals & Panels ---
  function openSiteModal(site = null) {
    if (site) {
      addSiteModalTitle.textContent = "Edit site";
      siteNameInput.value = site.name;
      siteUrlInput.value = site.url;
      editingSiteUrl = site.url;
    } else {
      addSiteModalTitle.textContent = "Add new site";
      siteNameInput.value = "";
      siteUrlInput.value = "";
      editingSiteUrl = null;
    }
    modalBackdrop.classList.remove("hidden");
    addSiteModal.classList.remove("hidden");
  }
  function closeSiteModal() {
    addSiteModal.classList.add("hidden");
    if (settingsPanel.classList.contains("visible") === false) {
      modalBackdrop.classList.add("hidden");
    }
    editingSiteUrl = null; // Reset editing state
  }
  function handleSaveSite() {
    const name = siteNameInput.value.trim();
    const url = siteUrlInput.value.trim();
    if (!name || !url) return alert("Please fill out both Name and URL.");
    try {
      new URL(url);
      let sites = getSites();
      if (editingSiteUrl) {
        // Edit existing site
        sites = sites.map((site) =>
          site.url === editingSiteUrl ? { name, url } : site
        );
      } else {
        // Add new site
        if (sites.length >= 12) {
          return alert("You can only have a maximum of 12 quick sites.");
        }
        sites = [...sites, { name, url }];
      }
      saveSites(sites);
      closeSiteModal();
    } catch (error) {
      alert(
        "Invalid URL. Please enter a full URL (e.g., https://www.example.com)"
      );
    }
  }
  function openSettingsPanel() {
    renderSettings();
    settingsPanel.classList.add("visible");
    modalBackdrop.classList.remove("hidden");
  }
  function closeSettingsPanel() {
    settingsPanel.classList.remove("visible");
    modalBackdrop.classList.add("hidden");
  }
  function openConfirmDeleteModal() {
    confirmDeleteModal.classList.remove("hidden");
    modalBackdrop.classList.remove("hidden");
    modalBackdrop.style.zIndex = 31; // Bring backdrop above settings panel
  }
  function closeConfirmDeleteModal() {
    confirmDeleteModal.classList.add("hidden");
    // Only hide backdrop if settings panel is also closed
    if (!settingsPanel.classList.contains("visible")) {
      modalBackdrop.classList.add("hidden");
    }
    modalBackdrop.style.zIndex = 10; // Reset backdrop z-index
  }

  // --- Context Menu ---
  function showContextMenu(event, site) {
    event.preventDefault();
    contextMenu.style.top = `${event.clientY}px`;
    contextMenu.style.left = `${event.clientX}px`;
    contextMenu.classList.remove("hidden");
    contextMenu.dataset.siteUrl = site.url;
    contextMenu.dataset.siteName = site.name;
  }
  function hideContextMenu() {
    contextMenu.classList.add("hidden");
  }
  function deleteSiteFromContextMenu() {
    const urlToDelete = contextMenu.dataset.siteUrl;
    saveSites(getSites().filter((site) => site.url !== urlToDelete));
    hideContextMenu();
  }

  // --- Event Listeners ---
  updateClock();
  updateDateAndGreeting();
  setInterval(updateClock, 1000);
  setInterval(updateDateAndGreeting, 60000);
  searchButton.addEventListener("click", performSearch);
  searchBar.addEventListener("keydown", (event) => {
    if (event.key === "Enter") performSearch();
  });
  window.addEventListener("pageshow", () => {
    searchBar.value = "";
  });
  saveButton.addEventListener("click", handleSaveSite);
  cancelButton.addEventListener("click", closeSiteModal);
  settingsButton.addEventListener("click", openSettingsPanel);
  settingsCloseButton.addEventListener("click", closeSettingsPanel);
  deleteAllSitesButton.addEventListener("click", openConfirmDeleteModal);
  confirmDeleteButton.addEventListener("click", () => {
    saveSites([]);
    closeConfirmDeleteModal();
  });
  confirmCancelButton.addEventListener("click", closeConfirmDeleteModal);
  modalBackdrop.addEventListener("click", () => {
    closeSiteModal();
    closeSettingsPanel();
    closeConfirmDeleteModal();
  });
  deleteSiteButton.addEventListener("click", deleteSiteFromContextMenu);
  editSiteButton.addEventListener("click", () => {
    const site = {
      name: contextMenu.dataset.siteName,
      url: contextMenu.dataset.siteUrl,
    };
    openSiteModal(site);
    hideContextMenu();
  });
  window.addEventListener("click", hideContextMenu);
  toggleQuickSites.addEventListener("change", (e) => {
    setShowQuickSites(e.target.checked);
  });

  toggleFooter.addEventListener("change", (e) => {
    setShowFooter(e.target.checked);
  });

  // Delegated Event Listeners for performance
  quickSitesContainer.addEventListener("click", (e) => {
    if (e.target.closest("#add-site-button")) {
      openSiteModal();
    }
  });
  quickSitesContainer.addEventListener("contextmenu", (e) => {
    const siteLink = e.target.closest(".site-link");
    if (siteLink && siteLink.dataset.url) {
      e.preventDefault();
      const sites = getSites();
      const site = sites.find((s) => s.url === siteLink.dataset.url);
      if (site) {
        showContextMenu(e, site);
      }
    }
  });
  settingsSitesList.addEventListener("click", (e) => {
    if (e.target.classList.contains("settings-site-delete-button")) {
      const urlToDelete = e.target.closest("li").dataset.url;
      saveSites(getSites().filter((s) => s.url !== urlToDelete));
    }
  });

  // --- Initial Render ---
  renderAll();

  quickSitesContainer.addEventListener("dragstart", (e) => {
    draggedSite = e.target.closest(".site-link");
    // Add a class to give a visual indication of the dragged item
    draggedSite.classList.add("dragging");
  });
  
  quickSitesContainer.addEventListener("dragover", (e) => {
    e.preventDefault();
    const target = e.target.closest(".site-link");
    if (target && target !== draggedSite) {
      // Add a class to indicate a potential drop target
      target.classList.add("drag-over");
    }
  });
  
  quickSitesContainer.addEventListener("dragleave", (e) => {
    const target = e.target.closest(".site-link");
    if (target) {
      // Remove the drop target indication
      target.classList.remove("drag-over");
    }
  });
  
  quickSitesContainer.addEventListener("drop", (e) => {
    e.preventDefault();
    const dropTarget = e.target.closest(".site-link");
  
    if (dropTarget && draggedSite) {
      dropTarget.classList.remove("drag-over");
  
      const sites = getSites();
      const draggedIndex = sites.findIndex(
        (site) => site.url === draggedSite.dataset.url
      );
      let dropIndex = Array.from(quickSitesContainer.children).indexOf(
        dropTarget
      );
  
      if (draggedIndex !== -1) {
        const [draggedItem] = sites.splice(draggedIndex, 1);
        sites.splice(dropIndex, 0, draggedItem);
        saveSites(sites);
      }
    }
  });
  
  quickSitesContainer.addEventListener("dragend", () => {
    if (draggedSite) {
      // Clean up the dragging class
      draggedSite.classList.remove("dragging");
      draggedSite = null;
    }
  });
});