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 introDelay = document.getElementById("introDelay");
  const introDelayValue = document.getElementById("introDelayValue");
  const creditsDelay = document.getElementById("creditsDelay");
  const creditsDelayValue = document.getElementById("creditsDelayValue");
  const saveBtn = document.getElementById("saveBtn");
  const status = document.getElementById("status");

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

  function formatDelay(seconds) {
    return seconds + "s";
  }

  function updateDelayEnabled() {
    introDelay.disabled = !skipIntro.checked;
    creditsDelay.disabled = !skipCredits.checked;
  }

  urlPreset.addEventListener("change", toggleCustomRow);
  skipIntro.addEventListener("change", updateDelayEnabled);
  skipCredits.addEventListener("change", updateDelayEnabled);
  introDelay.addEventListener("input", () => {
    introDelayValue.textContent = formatDelay(introDelay.value);
  });
  creditsDelay.addEventListener("input", () => {
    creditsDelayValue.textContent = formatDelay(creditsDelay.value);
  });

  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;

    introDelay.value = clampDelaySeconds(settings.introDelaySeconds);
    introDelayValue.textContent = formatDelay(introDelay.value);
    creditsDelay.value = clampDelaySeconds(settings.creditsDelaySeconds);
    creditsDelayValue.textContent = formatDelay(creditsDelay.value);

    toggleCustomRow();
    updateDelayEnabled();
  });

  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,
        introDelaySeconds: clampDelaySeconds(introDelay.value),
        creditsDelaySeconds: clampDelaySeconds(creditsDelay.value)
      },
      () => {
        showStatus("Saved", false);
      }
    );
  });
});