/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle */

const TWEAK_DEFAULTS = window.__TWEAKS_DEFAULTS || {
  accent: "#A8552F",
  density: "standard",
  serif: "Newsreader",
  showTalks: true,
  showOss: true,
};

const ACCENT_OPTIONS = [
  "#A8552F", // warm terracotta (default)
  "#7A5230", // muted bronze
  "#3F5A4A", // forest sage
  "#26416B", // ink blue
  "#7A2E2A", // burgundy
];

const SERIF_OPTIONS = [
  "Newsreader",
  "Instrument Serif",
  "EB Garamond",
  "Cormorant Garamond",
  "Crimson Pro",
  "Source Serif 4",
  "Spectral",
  "IBM Plex Serif",
];
const DENSITY_OPTIONS = ["compact", "standard", "airy"];

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty("--accent", t.accent);
  root.setAttribute("data-density", t.density);

  // Swap serif by injecting a stylesheet link the first time it's requested
  ensureSerifLoaded(t.serif);
  root.style.setProperty(
    "--serif",
    `"${t.serif}", "Source Serif Pro", Georgia, serif`
  );

  document.querySelectorAll("[data-tweak-talks]").forEach((el) => {
    el.style.display = t.showTalks ? "" : "none";
  });
  document.querySelectorAll("[data-tweak-oss]").forEach((el) => {
    el.style.display = t.showOss ? "" : "none";
  });
}

// Stylesheet loader for serif families. Pre-loaded: Newsreader (in HTML head).
const _loadedFonts = new Set(["Newsreader"]);
const _fontHrefs = {
  "Instrument Serif": "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap",
  "EB Garamond": "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap",
  "Cormorant Garamond": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap",
  "Crimson Pro": "https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400&display=swap",
  "Source Serif 4": "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap",
  "Spectral": "https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap",
  "IBM Plex Serif": "https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&display=swap",
};
function ensureSerifLoaded(family) {
  if (_loadedFonts.has(family)) return;
  _loadedFonts.add(family);
  const href = _fontHrefs[family];
  if (!href) return;
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = href;
  document.head.appendChild(link);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    applyTweaks(t);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Visual" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={ACCENT_OPTIONS}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakRadio
        label="Density"
        value={t.density}
        options={DENSITY_OPTIONS}
        onChange={(v) => setTweak("density", v)}
      />
      <TweakSection label="Typography" />
      <TweakRadio
        label="Serif"
        value={t.serif}
        options={SERIF_OPTIONS}
        onChange={(v) => setTweak("serif", v)}
      />
      <TweakSection label="Sections" />
      <TweakToggle
        label="Show talks & writing"
        value={t.showTalks}
        onChange={(v) => setTweak("showTalks", v)}
      />
      <TweakToggle
        label="Show open source"
        value={t.showOss}
        onChange={(v) => setTweak("showOss", v)}
      />
    </TweaksPanel>
  );
}

// Apply persisted defaults at startup, before the panel mounts.
applyTweaks(TWEAK_DEFAULTS);

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<App />);