/* ============================================================
   LedgerWise AI — Tweaks
   Bridges React tweak state -> CSS custom properties on :root
   so the vanilla page restyles live. Panel shows only in edit mode.
   ============================================================ */
const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSelect } = window;

const ACCENTS = {
  "#A87B2E": { name: "Amber",  deep: "#8C6522", soft: "rgba(168,123,46,.12)", line: "rgba(168,123,46,.32)", dk: "#C9A256", dk2: "#D9B873" },
  "#1E8A6E": { name: "Teal",   deep: "#156B55", soft: "rgba(30,138,110,.12)", line: "rgba(30,138,110,.30)", dk: "#4FB89A", dk2: "#7FD0B8" },
  "#0060A0": { name: "Navy",   deep: "#084C7C", soft: "rgba(0,96,160,.10)",   line: "rgba(0,96,160,.30)",   dk: "#6FA8D6", dk2: "#9AC4E5" },
};

const PAPERS = {
  "Warm stationery": { paper: "#FAF8F4", paper2: "#F2EEE6" },
  "Cool grey":       { paper: "#F5F7FA", paper2: "#E9EEF3" },
  "Pure white":      { paper: "#FFFFFF", paper2: "#F2F4F6" },
};

const FONTS = {
  "Source Serif 4": '"Source Serif 4", Georgia, serif',
  "Spectral":       '"Spectral", Georgia, serif',
  "Lora":           '"Lora", Georgia, serif',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0060A0",
  "paper": "Warm stationery",
  "headingFont": "Source Serif 4"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement.style;
    const a = ACCENTS[t.accent] || ACCENTS["#A87B2E"];
    root.setProperty("--accent", t.accent);
    root.setProperty("--accent-deep", a.deep);
    root.setProperty("--accent-soft", a.soft);
    root.setProperty("--accent-line", a.line);
    root.setProperty("--accent-dk", a.dk);
    root.setProperty("--accent-dk2", a.dk2);

    const p = PAPERS[t.paper] || PAPERS["Warm stationery"];
    root.setProperty("--paper", p.paper);
    root.setProperty("--paper-2", p.paper2);

    root.setProperty("--serif", FONTS[t.headingFont] || FONTS["Source Serif 4"]);
  }, [t.accent, t.paper, t.headingFont]);

  return (
    <TweaksPanel>
      <TweakSection label="Accent color" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Surface & type" />
      <TweakSelect
        label="Background"
        value={t.paper}
        options={Object.keys(PAPERS)}
        onChange={(v) => setTweak("paper", v)}
      />
      <TweakSelect
        label="Heading font"
        value={t.headingFont}
        options={Object.keys(FONTS)}
        onChange={(v) => setTweak("headingFont", v)}
      />
    </TweaksPanel>
  );
}

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