const DEFAULT_LIGHT_THEME = "vendor/highlightjs/styles/github.min.css";
const DEFAULT_DARK_THEME = "vendor/highlightjs/styles/github-dark.min.css";

const THEME_FILES = [
  "vendor/highlightjs/styles/1c-light.min.css",
  "vendor/highlightjs/styles/a11y-dark.min.css",
  "vendor/highlightjs/styles/a11y-light.min.css",
  "vendor/highlightjs/styles/agate.min.css",
  "vendor/highlightjs/styles/androidstudio.min.css",
  "vendor/highlightjs/styles/an-old-hope.min.css",
  "vendor/highlightjs/styles/arduino-light.min.css",
  "vendor/highlightjs/styles/arta.min.css",
  "vendor/highlightjs/styles/ascetic.min.css",
  "vendor/highlightjs/styles/atom-one-dark-reasonable.min.css",
  "vendor/highlightjs/styles/atom-one-dark.min.css",
  "vendor/highlightjs/styles/atom-one-light.min.css",
  "vendor/highlightjs/styles/brown-paper.min.css",
  "vendor/highlightjs/styles/codepen-embed.min.css",
  "vendor/highlightjs/styles/color-brewer.min.css",
  "vendor/highlightjs/styles/cybertopia-cherry.min.css",
  "vendor/highlightjs/styles/cybertopia-dimmer.min.css",
  "vendor/highlightjs/styles/cybertopia-icecap.min.css",
  "vendor/highlightjs/styles/cybertopia-saturated.min.css",
  "vendor/highlightjs/styles/dark.min.css",
  "vendor/highlightjs/styles/default.min.css",
  "vendor/highlightjs/styles/devibeans.min.css",
  "vendor/highlightjs/styles/docco.min.css",
  "vendor/highlightjs/styles/far.min.css",
  "vendor/highlightjs/styles/felipec.min.css",
  "vendor/highlightjs/styles/foundation.min.css",
  "vendor/highlightjs/styles/github-dark-dimmed.min.css",
  "vendor/highlightjs/styles/github-dark.min.css",
  "vendor/highlightjs/styles/github.min.css",
  "vendor/highlightjs/styles/gml.min.css",
  "vendor/highlightjs/styles/googlecode.min.css",
  "vendor/highlightjs/styles/gradient-dark.min.css",
  "vendor/highlightjs/styles/gradient-light.min.css",
  "vendor/highlightjs/styles/grayscale.min.css",
  "vendor/highlightjs/styles/hybrid.min.css",
  "vendor/highlightjs/styles/idea.min.css",
  "vendor/highlightjs/styles/intellij-light.min.css",
  "vendor/highlightjs/styles/ir-black.min.css",
  "vendor/highlightjs/styles/isbl-editor-dark.min.css",
  "vendor/highlightjs/styles/isbl-editor-light.min.css",
  "vendor/highlightjs/styles/kimbie-dark.min.css",
  "vendor/highlightjs/styles/kimbie-light.min.css",
  "vendor/highlightjs/styles/lightfair.min.css",
  "vendor/highlightjs/styles/lioshi.min.css",
  "vendor/highlightjs/styles/magula.min.css",
  "vendor/highlightjs/styles/mono-blue.min.css",
  "vendor/highlightjs/styles/monokai-sublime.min.css",
  "vendor/highlightjs/styles/monokai.min.css",
  "vendor/highlightjs/styles/night-owl.min.css",
  "vendor/highlightjs/styles/nnfx-dark.min.css",
  "vendor/highlightjs/styles/nnfx-light.min.css",
  "vendor/highlightjs/styles/nord.min.css",
  "vendor/highlightjs/styles/obsidian.min.css",
  "vendor/highlightjs/styles/panda-syntax-dark.min.css",
  "vendor/highlightjs/styles/panda-syntax-light.min.css",
  "vendor/highlightjs/styles/paraiso-dark.min.css",
  "vendor/highlightjs/styles/paraiso-light.min.css",
  "vendor/highlightjs/styles/pojoaque.min.css",
  "vendor/highlightjs/styles/purebasic.min.css",
  "vendor/highlightjs/styles/qtcreator-dark.min.css",
  "vendor/highlightjs/styles/qtcreator-light.min.css",
  "vendor/highlightjs/styles/rainbow.min.css",
  "vendor/highlightjs/styles/rose-pine-dawn.min.css",
  "vendor/highlightjs/styles/rose-pine-moon.min.css",
  "vendor/highlightjs/styles/rose-pine.min.css",
  "vendor/highlightjs/styles/routeros.min.css",
  "vendor/highlightjs/styles/school-book.min.css",
  "vendor/highlightjs/styles/shades-of-purple.min.css",
  "vendor/highlightjs/styles/srcery.min.css",
  "vendor/highlightjs/styles/stackoverflow-dark.min.css",
  "vendor/highlightjs/styles/stackoverflow-light.min.css",
  "vendor/highlightjs/styles/sunburst.min.css",
  "vendor/highlightjs/styles/tokyo-night-dark.min.css",
  "vendor/highlightjs/styles/tokyo-night-light.min.css",
  "vendor/highlightjs/styles/tomorrow-night-blue.min.css",
  "vendor/highlightjs/styles/tomorrow-night-bright.min.css",
  "vendor/highlightjs/styles/vs.min.css",
  "vendor/highlightjs/styles/vs2015.min.css",
  "vendor/highlightjs/styles/xcode.min.css",
  "vendor/highlightjs/styles/xt256.min.css",
  "vendor/highlightjs/styles/base16/3024.min.css",
  "vendor/highlightjs/styles/base16/apathy.min.css",
  "vendor/highlightjs/styles/base16/apprentice.min.css",
  "vendor/highlightjs/styles/base16/ashes.min.css",
  "vendor/highlightjs/styles/base16/atelier-cave-light.min.css",
  "vendor/highlightjs/styles/base16/atelier-cave.min.css",
  "vendor/highlightjs/styles/base16/atelier-dune-light.min.css",
  "vendor/highlightjs/styles/base16/atelier-dune.min.css",
  "vendor/highlightjs/styles/base16/atelier-estuary-light.min.css",
  "vendor/highlightjs/styles/base16/atelier-estuary.min.css",
  "vendor/highlightjs/styles/base16/atelier-forest-light.min.css",
  "vendor/highlightjs/styles/base16/atelier-forest.min.css",
  "vendor/highlightjs/styles/base16/atelier-heath-light.min.css",
  "vendor/highlightjs/styles/base16/atelier-heath.min.css",
  "vendor/highlightjs/styles/base16/atelier-lakeside-light.min.css",
  "vendor/highlightjs/styles/base16/atelier-lakeside.min.css",
  "vendor/highlightjs/styles/base16/atelier-plateau-light.min.css",
  "vendor/highlightjs/styles/base16/atelier-plateau.min.css",
  "vendor/highlightjs/styles/base16/atelier-savanna-light.min.css",
  "vendor/highlightjs/styles/base16/atelier-savanna.min.css",
  "vendor/highlightjs/styles/base16/atelier-seaside-light.min.css",
  "vendor/highlightjs/styles/base16/atelier-seaside.min.css",
  "vendor/highlightjs/styles/base16/atelier-sulphurpool-light.min.css",
  "vendor/highlightjs/styles/base16/atelier-sulphurpool.min.css",
  "vendor/highlightjs/styles/base16/atlas.min.css",
  "vendor/highlightjs/styles/base16/bespin.min.css",
  "vendor/highlightjs/styles/base16/black-metal-bathory.min.css",
  "vendor/highlightjs/styles/base16/black-metal-burzum.min.css",
  "vendor/highlightjs/styles/base16/black-metal-dark-funeral.min.css",
  "vendor/highlightjs/styles/base16/black-metal-gorgoroth.min.css",
  "vendor/highlightjs/styles/base16/black-metal-immortal.min.css",
  "vendor/highlightjs/styles/base16/black-metal-khold.min.css",
  "vendor/highlightjs/styles/base16/black-metal-marduk.min.css",
  "vendor/highlightjs/styles/base16/black-metal-mayhem.min.css",
  "vendor/highlightjs/styles/base16/black-metal-nile.min.css",
  "vendor/highlightjs/styles/base16/black-metal-venom.min.css",
  "vendor/highlightjs/styles/base16/black-metal.min.css",
  "vendor/highlightjs/styles/base16/bright.min.css",
  "vendor/highlightjs/styles/base16/brewer.min.css",
  "vendor/highlightjs/styles/base16/brogrammer.min.css",
  "vendor/highlightjs/styles/base16/brush-trees-dark.min.css",
  "vendor/highlightjs/styles/base16/brush-trees.min.css",
  "vendor/highlightjs/styles/base16/chalk.min.css",
  "vendor/highlightjs/styles/base16/circus.min.css",
  "vendor/highlightjs/styles/base16/classic-dark.min.css",
  "vendor/highlightjs/styles/base16/classic-light.min.css",
  "vendor/highlightjs/styles/base16/codeschool.min.css",
  "vendor/highlightjs/styles/base16/colors.min.css",
  "vendor/highlightjs/styles/base16/cupcake.min.css",
  "vendor/highlightjs/styles/base16/cupertino.min.css",
  "vendor/highlightjs/styles/base16/danqing.min.css",
  "vendor/highlightjs/styles/base16/darcula.min.css",
  "vendor/highlightjs/styles/base16/dark-violet.min.css",
  "vendor/highlightjs/styles/base16/darkmoss.min.css",
  "vendor/highlightjs/styles/base16/darktooth.min.css",
  "vendor/highlightjs/styles/base16/decaf.min.css",
  "vendor/highlightjs/styles/base16/default-dark.min.css",
  "vendor/highlightjs/styles/base16/default-light.min.css",
  "vendor/highlightjs/styles/base16/dirtysea.min.css",
  "vendor/highlightjs/styles/base16/dracula.min.css",
  "vendor/highlightjs/styles/base16/edge-dark.min.css",
  "vendor/highlightjs/styles/base16/edge-light.min.css",
  "vendor/highlightjs/styles/base16/eighties.min.css",
  "vendor/highlightjs/styles/base16/embers.min.css",
  "vendor/highlightjs/styles/base16/equilibrium-dark.min.css",
  "vendor/highlightjs/styles/base16/equilibrium-gray-dark.min.css",
  "vendor/highlightjs/styles/base16/equilibrium-gray-light.min.css",
  "vendor/highlightjs/styles/base16/equilibrium-light.min.css",
  "vendor/highlightjs/styles/base16/espresso.min.css",
  "vendor/highlightjs/styles/base16/eva-dim.min.css",
  "vendor/highlightjs/styles/base16/eva.min.css",
  "vendor/highlightjs/styles/base16/flat.min.css",
  "vendor/highlightjs/styles/base16/framer.min.css",
  "vendor/highlightjs/styles/base16/fruit-soda.min.css",
  "vendor/highlightjs/styles/base16/gigavolt.min.css",
  "vendor/highlightjs/styles/base16/google-dark.min.css",
  "vendor/highlightjs/styles/base16/google-light.min.css",
  "vendor/highlightjs/styles/base16/green-screen.min.css",
  "vendor/highlightjs/styles/base16/grayscale-dark.min.css",
  "vendor/highlightjs/styles/base16/grayscale-light.min.css",
  "vendor/highlightjs/styles/base16/gruvbox-dark-hard.min.css",
  "vendor/highlightjs/styles/base16/gruvbox-dark-medium.min.css",
  "vendor/highlightjs/styles/base16/gruvbox-dark-pale.min.css",
  "vendor/highlightjs/styles/base16/gruvbox-dark-soft.min.css",
  "vendor/highlightjs/styles/base16/gruvbox-light-hard.min.css",
  "vendor/highlightjs/styles/base16/gruvbox-light-medium.min.css",
  "vendor/highlightjs/styles/base16/gruvbox-light-soft.min.css",
  "vendor/highlightjs/styles/base16/hardcore.min.css",
  "vendor/highlightjs/styles/base16/harmonic16-dark.min.css",
  "vendor/highlightjs/styles/base16/harmonic16-light.min.css",
  "vendor/highlightjs/styles/base16/heetch-dark.min.css",
  "vendor/highlightjs/styles/base16/heetch-light.min.css",
  "vendor/highlightjs/styles/base16/helios.min.css",
  "vendor/highlightjs/styles/base16/hopscotch.min.css",
  "vendor/highlightjs/styles/base16/horizon-dark.min.css",
  "vendor/highlightjs/styles/base16/horizon-light.min.css",
  "vendor/highlightjs/styles/base16/humanoid-dark.min.css",
  "vendor/highlightjs/styles/base16/humanoid-light.min.css",
  "vendor/highlightjs/styles/base16/ia-dark.min.css",
  "vendor/highlightjs/styles/base16/ia-light.min.css",
  "vendor/highlightjs/styles/base16/icy-dark.min.css",
  "vendor/highlightjs/styles/base16/ir-black.min.css",
  "vendor/highlightjs/styles/base16/isotope.min.css",
  "vendor/highlightjs/styles/base16/kimber.min.css",
  "vendor/highlightjs/styles/base16/london-tube.min.css",
  "vendor/highlightjs/styles/base16/macintosh.min.css",
  "vendor/highlightjs/styles/base16/marrakesh.min.css",
  "vendor/highlightjs/styles/base16/material-darker.min.css",
  "vendor/highlightjs/styles/base16/material-lighter.min.css",
  "vendor/highlightjs/styles/base16/material-palenight.min.css",
  "vendor/highlightjs/styles/base16/material-vivid.min.css",
  "vendor/highlightjs/styles/base16/material.min.css",
  "vendor/highlightjs/styles/base16/materia.min.css",
  "vendor/highlightjs/styles/base16/mellow-purple.min.css",
  "vendor/highlightjs/styles/base16/mexico-light.min.css",
  "vendor/highlightjs/styles/base16/mocha.min.css",
  "vendor/highlightjs/styles/base16/monokai.min.css",
  "vendor/highlightjs/styles/base16/nebula.min.css",
  "vendor/highlightjs/styles/base16/nord.min.css",
  "vendor/highlightjs/styles/base16/nova.min.css",
  "vendor/highlightjs/styles/base16/ocean.min.css",
  "vendor/highlightjs/styles/base16/oceanicnext.min.css",
  "vendor/highlightjs/styles/base16/onedark.min.css",
  "vendor/highlightjs/styles/base16/one-light.min.css",
  "vendor/highlightjs/styles/base16/outrun-dark.min.css",
  "vendor/highlightjs/styles/base16/papercolor-dark.min.css",
  "vendor/highlightjs/styles/base16/papercolor-light.min.css",
  "vendor/highlightjs/styles/base16/paraiso.min.css",
  "vendor/highlightjs/styles/base16/pasque.min.css",
  "vendor/highlightjs/styles/base16/phd.min.css",
  "vendor/highlightjs/styles/base16/pico.min.css",
  "vendor/highlightjs/styles/base16/pop.min.css",
  "vendor/highlightjs/styles/base16/porple.min.css",
  "vendor/highlightjs/styles/base16/qualia.min.css",
  "vendor/highlightjs/styles/base16/railscasts.min.css",
  "vendor/highlightjs/styles/base16/rebecca.min.css",
  "vendor/highlightjs/styles/base16/ros-pine-dawn.min.css",
  "vendor/highlightjs/styles/base16/ros-pine-moon.min.css",
  "vendor/highlightjs/styles/base16/ros-pine.min.css",
  "vendor/highlightjs/styles/base16/sagelight.min.css",
  "vendor/highlightjs/styles/base16/sandcastle.min.css",
  "vendor/highlightjs/styles/base16/seti-ui.min.css",
  "vendor/highlightjs/styles/base16/shapeshifter.min.css",
  "vendor/highlightjs/styles/base16/silk-dark.min.css",
  "vendor/highlightjs/styles/base16/silk-light.min.css",
  "vendor/highlightjs/styles/base16/snazzy.min.css",
  "vendor/highlightjs/styles/base16/solar-flare-light.min.css",
  "vendor/highlightjs/styles/base16/solar-flare.min.css",
  "vendor/highlightjs/styles/base16/solarized-dark.min.css",
  "vendor/highlightjs/styles/base16/solarized-light.min.css",
  "vendor/highlightjs/styles/base16/spacemacs.min.css",
  "vendor/highlightjs/styles/base16/summercamp.min.css",
  "vendor/highlightjs/styles/base16/summerfruit-dark.min.css",
  "vendor/highlightjs/styles/base16/summerfruit-light.min.css",
  "vendor/highlightjs/styles/base16/synth-midnight-terminal-dark.min.css",
  "vendor/highlightjs/styles/base16/synth-midnight-terminal-light.min.css",
  "vendor/highlightjs/styles/base16/tango.min.css",
  "vendor/highlightjs/styles/base16/tender.min.css",
  "vendor/highlightjs/styles/base16/tomorrow-night.min.css",
  "vendor/highlightjs/styles/base16/tomorrow.min.css",
  "vendor/highlightjs/styles/base16/twilight.min.css",
  "vendor/highlightjs/styles/base16/unikitty-dark.min.css",
  "vendor/highlightjs/styles/base16/unikitty-light.min.css",
  "vendor/highlightjs/styles/base16/vulcan.min.css",
  "vendor/highlightjs/styles/base16/windows-10-light.min.css",
  "vendor/highlightjs/styles/base16/windows-10.min.css",
  "vendor/highlightjs/styles/base16/windows-95-light.min.css",
  "vendor/highlightjs/styles/base16/windows-95.min.css",
  "vendor/highlightjs/styles/base16/windows-high-contrast-light.min.css",
  "vendor/highlightjs/styles/base16/windows-high-contrast.min.css",
  "vendor/highlightjs/styles/base16/windows-nt-light.min.css",
  "vendor/highlightjs/styles/base16/windows-nt.min.css",
  "vendor/highlightjs/styles/base16/woodland.min.css",
  "vendor/highlightjs/styles/base16/xcode-dusk.min.css",
  "vendor/highlightjs/styles/base16/zenburn.min.css"
];

const input = document.getElementById("autoFormat");
const lineNumbersInput = document.getElementById("lineNumbers");
const langJsonInput = document.getElementById("langJson");
const langMarkdownInput = document.getElementById("langMarkdown");
const langPlaintextInput = document.getElementById("langPlaintext");
const langXmlInput = document.getElementById("langXml");
const langYamlInput = document.getElementById("langYaml");
const themeModeSelect = document.getElementById("themeMode");
const lightThemeSelect = document.getElementById("lightTheme");
const darkThemeSelect = document.getElementById("darkTheme");
const saveBtn = document.getElementById("save");

function themeLabel(file) {
  const trimmed = file
    .replace(/^vendor\/highlightjs\/styles\//, "")
    .replace(/\.min\.css$/, "")
    .replace(/\.css$/, "");
  const parts = trimmed.split("/");
  const name = parts.pop() || trimmed;
  const base = name
    .split("-")
    .map((chunk) =>
      chunk.length ? chunk[0].toUpperCase() + chunk.slice(1) : chunk
    )
    .join(" ");
  if (parts[0] === "base16") return `Base16: ${base}`;
  return base;
}

function populateThemeSelect(select, selected) {
  const entries = THEME_FILES.map((file) => ({
    file,
    label: themeLabel(file)
  })).sort((a, b) => a.label.localeCompare(b.label));

  select.innerHTML = "";
  entries.forEach((entry) => {
    const option = document.createElement("option");
    option.value = entry.file;
    option.textContent = entry.label;
    select.appendChild(option);
  });

  select.value = selected;
  if (!select.value && entries.length) {
    select.value = entries[0].file;
  }
}

chrome.storage.sync.get(
  {
    autoFormat: false,
    themeMode: null,
    theme: null,
    lightTheme: DEFAULT_LIGHT_THEME,
    darkTheme: DEFAULT_DARK_THEME,
    lineNumbers: false,
    langJson: true,
    langMarkdown: false,
    langPlaintext: false,
    langXml: false,
    langYaml: false
  },
  (data) => {
    const mode = data.themeMode || data.theme || "system";
    input.checked = data.autoFormat;
    themeModeSelect.value = mode;
    populateThemeSelect(lightThemeSelect, data.lightTheme || DEFAULT_LIGHT_THEME);
    populateThemeSelect(darkThemeSelect, data.darkTheme || DEFAULT_DARK_THEME);
    lineNumbersInput.checked = Boolean(data.lineNumbers);
    langJsonInput.checked = Boolean(data.langJson);
    langMarkdownInput.checked = Boolean(data.langMarkdown);
    langPlaintextInput.checked = Boolean(data.langPlaintext);
    langXmlInput.checked = Boolean(data.langXml);
    langYamlInput.checked = Boolean(data.langYaml);
  }
);

saveBtn.addEventListener("click", async () => {
  const wantAuto = input.checked;
  const themeMode = themeModeSelect.value;
  const lightTheme = lightThemeSelect.value;
  const darkTheme = darkThemeSelect.value;
  const lineNumbers = lineNumbersInput.checked;
  const langJson = langJsonInput.checked;
  const langMarkdown = langMarkdownInput.checked;
  const langPlaintext = langPlaintextInput.checked;
  const langXml = langXmlInput.checked;
  const langYaml = langYamlInput.checked;

  if (wantAuto) {
    const granted = await chrome.permissions.request({ origins: ["<all_urls>"] });
    if (!granted) {
      alert("Auto-Format benötigt Seitenzugriff (Host-Permission). Wurde abgelehnt.");
      input.checked = false;
      return;
    }
  } else {
    // Optional: Permissions wieder zurückgeben
    // Achtung: Entfernt ALLE origins in diesem Satz.
    await chrome.permissions.remove({ origins: ["<all_urls>"] }).catch(() => {});
  }

  await chrome.storage.sync.set({
    autoFormat: wantAuto,
    themeMode,
    lightTheme,
    darkTheme,
    lineNumbers,
    langJson,
    langMarkdown,
    langPlaintext,
    langXml,
    langYaml
  });
  saveBtn.textContent = "Gespeichert!";
  setTimeout(() => (saveBtn.textContent = "Speichern"), 1200);
});