/* global React, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSlider */
const { useEffect } = React;

const PN_ACCENTS = {
  "Dragon Fruit": "#EF317D",
  "Juicy Fruit": "#FF565D",
  "Mango": "#FF8B31",
};

const PN_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "surface": "Light",
  "accent": "Dragon Fruit",
  "markSize": 30
}/*EDITMODE-END*/;

// Logo rule: cream-fill wordmark is the main mark on light surfaces;
// the green-fill wordmark is used on dark surfaces.
const LOGO_MAIN = "assets/PN_Wordmark.svg";
const LOGO_INVERSE = "assets/PN_Wordmark-Green.png";

function PNTweaks() {
  const [t, setTweak] = useTweaks(PN_TWEAK_DEFAULTS);

  useEffect(() => {
    const dark = t.surface === "Dark";
    document.body.classList.toggle("pn-dark", dark);
    const mark = document.querySelector(".ds-top .mark");
    if (mark) mark.src = dark ? LOGO_INVERSE : LOGO_MAIN;
  }, [t.surface]);

  useEffect(() => {
    const hex = PN_ACCENTS[t.accent] || PN_ACCENTS["Dragon Fruit"];
    document.documentElement.style.setProperty("--tw-accent", hex);
  }, [t.accent]);

  useEffect(() => {
    document.documentElement.style.setProperty("--tw-mark-h", t.markSize + "px");
  }, [t.markSize]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Surface" />
      <TweakRadio
        label="Theme"
        value={t.surface}
        options={["Light", "Dark"]}
        onChange={(v) => setTweak("surface", v)}
      />
      <p style={{ margin: "2px 2px 0", fontSize: 11, lineHeight: 1.45, opacity: 0.6 }}>
        Logo follows the surface: green wordmark is the main mark on light, the cream inverse appears only on dark.
      </p>

      <TweakSection label="Accent" />
      <TweakColor
        label="Accent color"
        value={PN_ACCENTS[t.accent]}
        options={[PN_ACCENTS["Dragon Fruit"], PN_ACCENTS["Juicy Fruit"], PN_ACCENTS["Mango"]]}
        onChange={(hex) => {
          const name = Object.keys(PN_ACCENTS).find((k) => PN_ACCENTS[k] === hex) || "Dragon Fruit";
          setTweak("accent", name);
        }}
      />

      <TweakSection label="Wordmark" />
      <TweakSlider
        label="Header logo height"
        value={t.markSize}
        min={22}
        max={48}
        unit="px"
        onChange={(v) => setTweak("markSize", v)}
      />
    </TweaksPanel>
  );
}

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