if (typeof browser === "undefined") {
  var browser = chrome;
}

document.addEventListener('DOMContentLoaded', function() {
  // Authentication elements
  const authSection = document.getElementById('authSection');
  const loginSection = document.getElementById('loginSection');
  const registerSection = document.getElementById('registerSection');
  const loginBtn = document.getElementById('loginBtn');
  const loginUsernameInput = document.getElementById('loginUsername');
  const loginPasswordInput = document.getElementById('loginPassword');
  const showRegisterLink = document.getElementById('showRegisterLink');
  const registerBtn = document.getElementById('registerBtn');
  const registerUsernameInput = document.getElementById('registerUsername');
  const registerPasswordInput = document.getElementById('registerPassword');
  const registerConfirmPasswordInput = document.getElementById('registerConfirmPassword');
  const showLoginLink = document.getElementById('showLoginLink');

  // Recorder and list elements
  const recorderSection = document.getElementById('recorderSection');
  const autoRecordToggle = document.getElementById('autoRecordToggle');
  const allowedPrefixesInput = document.getElementById('allowedPrefixes');
  const logoutBtn = document.getElementById('logoutBtn');
  const openResizableBtn = document.getElementById('openResizableBtn');
  const chapterListSection = document.getElementById('chapterListSection');
  const searchQueryInput = document.getElementById('searchQuery');
  const excludeWordsInput = document.getElementById('excludeWords');
  const chapterListElement = document.getElementById('chapterList');
  const statusDiv = document.getElementById('status');

  // Load stored allowedPrefixes from browser.storage
  browser.storage.local.get('allowedPrefixes', function(result) {
    if (result.allowedPrefixes) {
      allowedPrefixesInput.value = result.allowedPrefixes;
    }
  });
  allowedPrefixesInput.addEventListener('change', function() {
    const allowedPrefixes = allowedPrefixesInput.value.trim();
    browser.storage.local.set({ allowedPrefixes: allowedPrefixes });
  });

  // Toggle between login and registration views
  showRegisterLink.addEventListener('click', function(e) {
    e.preventDefault();
    loginSection.style.display = "none";
    registerSection.style.display = "block";
  });
  showLoginLink.addEventListener('click', function(e) {
    e.preventDefault();
    registerSection.style.display = "none";
    loginSection.style.display = "block";
  });

  // Check login status on load
  fetch("http://192.168.0.226:25570/api/status", {
    method: "GET",
    credentials: "include"
  })
    .then(response => response.json())
    .then(data => {
      if (data.loggedIn) {
        authSection.style.display = "none";
        recorderSection.style.display = "block";
        chapterListSection.style.display = "block";
        statusDiv.textContent = "Logged in as " + data.username;
      } else {
        authSection.style.display = "block";
        recorderSection.style.display = "none";
        chapterListSection.style.display = "none";
      }
    })
    .catch(err => {
      console.error("Error checking login status:", err);
    });

  // Login handler
  loginBtn.addEventListener('click', function() {
    const username = loginUsernameInput.value.trim();
    const password = loginPasswordInput.value.trim();
    if (!username || !password) {
      statusDiv.textContent = "Please enter username and password.";
      return;
    }
    browser.runtime.sendMessage({ action: "login", username, password }, (response) => {
      console.log("Login response:", response);
      if (response.success) {
        statusDiv.textContent = response.message;
        authSection.style.display = "none";
        recorderSection.style.display = "block";
        chapterListSection.style.display = "block";
      } else {
        statusDiv.textContent = response.message || "Login failed.";
      }
    });
  });

  // Registration handler
  registerBtn.addEventListener('click', function() {
    const username = registerUsernameInput.value.trim();
    const password = registerPasswordInput.value.trim();
    const confirmPassword = registerConfirmPasswordInput.value.trim();
    if (!username || !password || !confirmPassword) {
      statusDiv.textContent = "Please fill in all registration fields.";
      return;
    }
    if (password !== confirmPassword) {
      statusDiv.textContent = "Passwords do not match.";
      return;
    }
    browser.runtime.sendMessage({ action: "register", username, password }, (response) => {
      console.log("Registration response:", response);
      if (response.success) {
        statusDiv.textContent = response.message;
        authSection.style.display = "none";
        recorderSection.style.display = "block";
        chapterListSection.style.display = "block";
      } else {
        statusDiv.textContent = response.message || "Registration failed.";
      }
    });
  });

  // Auto record toggle handler
  autoRecordToggle.addEventListener('change', function(e) {
    if (e.target.checked) {
      const allowedPrefixes = allowedPrefixesInput.value.trim();
      browser.runtime.sendMessage({ action: "startAutoRecord", interval: 10000, allowedPrefixes }, (response) => {
        statusDiv.textContent = response.message || response.error;
      });
    } else {
      browser.runtime.sendMessage({ action: "stopAutoRecord" }, (response) => {
        statusDiv.textContent = response.message || response.error;
      });
    }
  });

  // Open resizable window button
  openResizableBtn.addEventListener('click', function() {
    browser.windows.create({
      url: browser.runtime.getURL("popup.html"),
      type: "popup",
      width: 600,
      height: 600
    });
  });

  // Logout handler
  logoutBtn.addEventListener('click', function() {
    window.location.href = "http://192.168.0.226:25570/logout";
  });

  // Function to update the chapter list
  function updateChapterList() {
    fetch("http://192.168.0.226:25570/logs", {
      method: "GET",
      credentials: "include"
    })
      .then(response => response.json())
      .then(data => {
        let chapters = data.updates || [];
        // Sort alphabetically by URL
        chapters.sort((a, b) => a.url.localeCompare(b.url));
        // Filter by search query (case-insensitive)
        const searchQuery = searchQueryInput.value.trim().toLowerCase();
        if (searchQuery) {
          chapters = chapters.filter(item => item.url.toLowerCase().includes(searchQuery));
        }
        // Filter out entries with excluded words
        const excludeWordsStr = excludeWordsInput.value.trim().toLowerCase();
        if (excludeWordsStr) {
          const excludeWords = excludeWordsStr.split(",").map(s => s.trim()).filter(s => s.length > 0);
          if (excludeWords.length > 0) {
            chapters = chapters.filter(item => {
              for (const word of excludeWords) {
                if (item.url.toLowerCase().includes(word)) {
                  return false;
                }
              }
              return true;
            });
          }
        }
        // Update the chapter list UI
        chapterListElement.innerHTML = "";
        chapters.forEach(item => {
          const li = document.createElement("li");
          li.textContent = item.url + " (" + new Date(item.timestamp).toLocaleTimeString() + ")";
          chapterListElement.appendChild(li);
        });
      })
      .catch(err => {
        console.error("Error fetching logs:", err);
      });
  }

  setInterval(updateChapterList, 5000);
  searchQueryInput.addEventListener('input', updateChapterList);
  excludeWordsInput.addEventListener('input', updateChapterList);
});