const DEFAULT_SETTINGS = {
  uploadMode: "desktop",
  apiUrl: "https://f0ckm.com/api/v2/upload",
  apiKey: "",
  rating: "s",
  tags: "",
  visibility: "0",
  isOc: false,
  urlType: "post"
};

document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("settings-form");
  const modeDesktop = document.getElementById("mode-desktop");
  const modeDirect = document.getElementById("mode-direct");
  const apiUrl = document.getElementById("apiUrl");
  const apiKey = document.getElementById("apiKey");
  const rating = document.getElementById("rating");
  const visibility = document.getElementById("visibility");
  const tags = document.getElementById("tags");
  const isOc = document.getElementById("isOc");
  const urlType = document.getElementById("urlType");
  const saveToast = document.getElementById("save-toast");

  // Load existing settings
  chrome.storage.sync.get(DEFAULT_SETTINGS, (items) => {
    if (items.uploadMode === "direct") {
      modeDirect.checked = true;
    } else {
      modeDesktop.checked = true;
    }

    apiUrl.value = items.apiUrl || "";
    apiKey.value = items.apiKey || "";
    rating.value = items.rating || "s";
    visibility.value = items.visibility !== undefined ? String(items.visibility) : "0";
    tags.value = items.tags || "";
    isOc.checked = !!items.isOc;
    urlType.value = items.urlType || "post";
  });

  // Save settings on form submit
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const newSettings = {
      uploadMode: modeDirect.checked ? "direct" : "desktop",
      apiUrl: apiUrl.value.trim(),
      apiKey: apiKey.value.trim(),
      rating: rating.value,
      visibility: visibility.value,
      tags: tags.value.trim(),
      isOc: isOc.checked,
      urlType: urlType.value
    };

    chrome.storage.sync.set(newSettings, () => {
      saveToast.classList.remove("hidden");
      setTimeout(() => {
        saveToast.classList.add("hidden");
      }, 2500);
    });
  });
});