document.addEventListener("DOMContentLoaded", () => {
  const urlPreset = document.getElementById("urlPreset");
  const customUrlRow = document.getElementById("customUrlRow");
  const customUrl = document.getElementById("customUrl");
  const skipIntro = document.getElementById("skipIntro");
  const skipCredits = document.getElementById("skipCredits");
  const saveBtn = document.getElementById("saveBtn");
  const status = document.getElementById("status");

  function toggleCustomRow() {
    customUrlRow.style.display = urlPreset.value === "custom" ? "block" : "none";
  }

  urlPreset.addEventListener("change", toggleCustomRow);

  chrome.storage.sync.get(DEFAULT_SETTINGS, (settings) => {
    if (settings.plexUrl === DEFAULT_SETTINGS.plexUrl) {
      urlPreset.value = "default";
    } else {
      urlPreset.value = "custom";
      customUrl.value = settings.plexUrl.replace(/^https?:\/\//, "");
    }
    skipIntro.checked = settings.skipIntro;
    skipCredits.checked = settings.skipCredits;
    toggleCustomRow();
  });

  function showStatus(message, isError) {
    status.textContent = message;
    status.style.color = isError ? "#c0392b" : "#2a8f2a";
    setTimeout(() => {
      status.textContent = "";
    }, 1500);
  }

  saveBtn.addEventListener("click", () => {
    const isCustom = urlPreset.value === "custom";
    let plexUrl = DEFAULT_SETTINGS.plexUrl;

    if (isCustom) {
      const trimmed = customUrl.value.trim();
      if (!trimmed) {
        showStatus("Enter a URL first", true);
        return;
      }
      plexUrl = normalizePlexUrl(trimmed);
      if (!getHostFromUrl(plexUrl)) {
        showStatus("That URL doesn't look valid", true);
        return;
      }
    }

    chrome.storage.sync.set(
      {
        plexUrl: plexUrl,
        skipIntro: skipIntro.checked,
        skipCredits: skipCredits.checked
      },
      () => {
        showStatus("Saved", false);
      }
    );
  });
});