document.addEventListener("DOMContentLoaded", function () {
  const closeButton = document.getElementById("close");
  const notificationTitle = document.getElementById("notification-title");
  const notificationMessage = document.getElementById("notification-message");
  const emailsContainer = document.getElementById("emails-container");
  const pagination = document.getElementById("pagination");

  const emailsPerPage = 5;
  let currentPage = 1;

  chrome.storage.local.get(
    ["notificationTitle", "notificationMessage", "phishingEmails"],
    function (items) {
      notificationTitle.textContent = items.notificationTitle;
      notificationMessage.textContent = items.notificationMessage;

      let phishingEmails = items.phishingEmails || [];

      function displayEmails(page) {
        emailsContainer.innerHTML = "";
        const start = (page - 1) * emailsPerPage;
        const end = start + emailsPerPage;
        const paginatedEmails = phishingEmails.slice(start, end);

        paginatedEmails.forEach((email) => {
          const emailDiv = document.createElement("div");
          emailDiv.className = "list-group-item";
          emailDiv.innerHTML = `
              <p><strong>From:</strong> ${email.from}</p>
              <p><strong>Subject:</strong> ${email.subject}</p>
              <p><strong>Snippet:</strong> ${email.snippet}</p>
              <button class="btn btn-success mark-safe" data-email-id="${email.id}">Mark as Safe</button>
              <button class="btn btn-danger move-trash" data-email-id="${email.id}">Move to Trash</button>
            `;
          emailsContainer.appendChild(emailDiv);
        });

        document.querySelectorAll(".mark-safe").forEach((button) => {
          button.addEventListener("click", function () {
            const emailId = this.getAttribute("data-email-id");
            chrome.runtime.sendMessage(
              {
                type: "mark-safe",
                emailId: emailId,
              },
              function (response) {
                console.log("Mark safe response:", response);
              }
            );
            phishingEmails = phishingEmails.filter(
              (email) => email.id !== emailId
            );
            updateDisplay();
          });
        });

        document.querySelectorAll(".move-trash").forEach((button) => {
          button.addEventListener("click", function () {
            const emailId = this.getAttribute("data-email-id");
            chrome.runtime.sendMessage(
              {
                type: "move-trash",
                emailId: emailId,
              },
              function (response) {
                console.log("Move to trash response:", response);
              }
            );
            phishingEmails = phishingEmails.filter(
              (email) => email.id !== emailId
            );
            updateDisplay();
          });
        });
      }

      function setupPagination(totalEmails) {
        const pageCount = Math.ceil(totalEmails / emailsPerPage);
        pagination.innerHTML = "";

        for (let i = 1; i <= pageCount; i++) {
          const li = document.createElement("li");
          li.className = "page-item";
          li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
          li.addEventListener("click", function () {
            currentPage = i;
            displayEmails(currentPage);
            document
              .querySelectorAll(".page-item")
              .forEach((item) => item.classList.remove("active"));
            li.classList.add("active");
          });
          pagination.appendChild(li);
        }

        if (pagination.firstChild) {
          pagination.firstChild.classList.add("active");
        }
      }

      function updateDisplay() {
        if (phishingEmails.length === 0) {
          notificationMessage.textContent = "No phishing emails detected.";
          emailsContainer.innerHTML = "";
          pagination.innerHTML = "";
        } else {
          notificationMessage.textContent = `Detected ${phishingEmails.length} suspicious email(s).`;
          setupPagination(phishingEmails.length);
          displayEmails(currentPage);
        }
      }

      updateDisplay();

      closeButton.addEventListener("click", function () {
        console.log("Close button clicked");
        window.close();
      });
    }
  );
});