/* Tweaks panel for Precision Psychotherapy.
   Applies choices to CSS custom properties on :root. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#2A8B86", "#1A6562"],
  "displayFont": "Spectral",
  "bodyFont": "Hanken Grotesk",
  "edge": "soft"
}/*EDITMODE-END*/;

const ACCENTS = [
  ["#2A8B86", "#1A6562"], // teal (default)
  ["#2F7E8C", "#1E5C68"], // blue-teal
  ["#3A8F6E", "#246B50"], // green
  ["#1F6E78", "#134E55"], // deep sea
];

const RADII = { sharp: "2px", soft: "12px" };
const RADII_CARD = { sharp: "4px", soft: "18px" };

function applyTweaks(t) {
  const root = document.documentElement.style;
  const acc = Array.isArray(t.accent) ? t.accent : ACCENTS[0];
  root.setProperty("--accent", acc[0]);
  root.setProperty("--accent-deep", acc[1]);
  root.setProperty("--serif", `"${t.displayFont}", Georgia, serif`);
  root.setProperty("--sans", `"${t.bodyFont}", system-ui, sans-serif`);
}

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

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

  // edge style affects a couple of radii via a style tag
  React.useEffect(() => {
    let el = document.getElementById("__edge-style");
    if (!el) { el = document.createElement("style"); el.id = "__edge-style"; document.head.appendChild(el); }
    const r = RADII[t.edge] || RADII.sharp;
    const rc = RADII_CARD[t.edge] || RADII_CARD.sharp;
    el.textContent = `
      .btn{border-radius:${r}} .modCard{border-radius:${rc}}
      .waveCard,.feeCard,.profile{border-radius:${rc}}
      .credChip,.tag{border-radius:${t.edge === "soft" ? "100px" : "2px"}}
    `;
  }, [t.edge]);

  return (
    <TweaksPanel>
      <TweakSection label="Accent" />
      <TweakColor
        label="Brand accent"
        value={t.accent}
        options={ACCENTS}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Typography" />
      <TweakRadio
        label="Display"
        value={t.displayFont}
        options={["Spectral", "Newsreader", "Libre Caslon Text"]}
        onChange={(v) => setTweak("displayFont", v)}
      />
      <TweakRadio
        label="Body"
        value={t.bodyFont}
        options={["Hanken Grotesk", "Schibsted Grotesk"]}
        onChange={(v) => setTweak("bodyFont", v)}
      />
      <TweakSection label="Form" />
      <TweakRadio
        label="Edges"
        value={t.edge}
        options={["sharp", "soft"]}
        onChange={(v) => setTweak("edge", v)}
      />
    </TweaksPanel>
  );
}

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