/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakRadio */
const { useEffect } = React;

// Curated typeface options. Each maps a label -> { stack, google } where
// `google` is the Google Fonts family query to inject on demand (null = already
// loaded via tokens.css). Overrides flow through --pn-display / --pn-mono so
// every slide updates at once. The color spec is never touched.
const DISPLAY_FACES = {
  "Fraunces": { stack: '"Fraunces", "Georgia", serif', google: null },
  "Playfair Display": { stack: '"Playfair Display", "Georgia", serif', google: "Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600" },
  "DM Serif Display": { stack: '"DM Serif Display", "Georgia", serif', google: "DM+Serif+Display:ital@0;1" },
  "Cormorant": { stack: '"Cormorant", "Georgia", serif', google: "Cormorant:ital,wght@0,400;0,600;0,700;1,400;1,600" },
};

const LABEL_FACES = {
  "DM Mono": { stack: '"DM Mono", ui-monospace, monospace', google: null },
  "Space Mono": { stack: '"Space Mono", ui-monospace, monospace', google: "Space+Mono:ital,wght@0,400;0,700;1,400" },
  "IBM Plex Mono": { stack: '"IBM Plex Mono", ui-monospace, monospace', google: "IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400" },
};

const LETTERBOX = {
  "Black": "#111111",
  "Charcoal": "#2C312F",
  "Aloe": "#1A2310",
};

const BG_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "display": "Fraunces",
  "label": "DM Mono",
  "letterbox": "Black"
}/*EDITMODE-END*/;

const injected = {};
function ensureFont(query) {
  if (!query || injected[query]) return;
  injected[query] = true;
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "https://fonts.googleapis.com/css2?family=" + query + "&display=swap";
  document.head.appendChild(link);
}

function BrandTweaks() {
  const [t, setTweak] = useTweaks(BG_TWEAK_DEFAULTS);

  useEffect(() => {
    const face = DISPLAY_FACES[t.display] || DISPLAY_FACES["Fraunces"];
    ensureFont(face.google);
    document.documentElement.style.setProperty("--pn-display", face.stack);
  }, [t.display]);

  useEffect(() => {
    const face = LABEL_FACES[t.label] || LABEL_FACES["DM Mono"];
    ensureFont(face.google);
    document.documentElement.style.setProperty("--pn-mono", face.stack);
  }, [t.label]);

  useEffect(() => {
    document.body.style.background = LETTERBOX[t.letterbox] || LETTERBOX["Black"];
  }, [t.letterbox]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Typefaces" />
      <TweakSelect
        label="Display (headlines)"
        value={t.display}
        options={Object.keys(DISPLAY_FACES)}
        onChange={(v) => setTweak("display", v)}
      />
      <TweakSelect
        label="Label (mono accents)"
        value={t.label}
        options={Object.keys(LABEL_FACES)}
        onChange={(v) => setTweak("label", v)}
      />
      <p style={{ margin: "4px 2px 0", fontSize: 11, lineHeight: 1.45, opacity: 0.6 }}>
        Swaps the display and label faces across every slide. Body text (DM Sans) and the color spec stay fixed.
      </p>

      <TweakSection label="Presentation" />
      <TweakRadio
        label="Letterbox"
        value={t.letterbox}
        options={["Black", "Charcoal", "Aloe"]}
        onChange={(v) => setTweak("letterbox", v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweak-root")).render(<BrandTweaks />);