// tweaks-app.jsx — shared Loxnote tweak controls (mounts into #tweaks-root)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#1d7a5c", "#176349", "#e7f2ed", "#f1f8f5"],
  "display": "serif",
  "surface": "cool",
  "radius": "soft"
}/*EDITMODE-END*/;

const ACCENTS = [
  ["#1d7a5c", "#176349", "#e7f2ed", "#f1f8f5"], // green (safe)
  ["#2a5db0", "#21498c", "#e7eef8", "#f1f5fb"], // nordic blue
  ["#5a4fcf", "#483fa8", "#ecebfa", "#f4f3fc"], // indigo
  ["#b4541f", "#8f4218", "#f7e9e0", "#fbf4ef"], // clay
];

const SURFACES = {
  cool: { paper: "#fbfcfe", p2: "#f4f6fa", p3: "#eaeef4", line: "#e4e9f0", line2: "#d2dae4", text: "#18283b", muted: "#566779" },
  warm: { paper: "#fcfbf7", p2: "#f5f2ea", p3: "#ece6da", line: "#e9e2d5", line2: "#ddd4c4", text: "#23252b", muted: "#5f5c54" },
};

const RADII = {
  soft:  { xs: "6px", sm: "9px", md: "13px", lg: "18px", xl: "26px" },
  sharp: { xs: "3px", sm: "4px", md: "6px",  lg: "9px",  xl: "13px" },
};

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    const a = t.accent;
    r.setProperty('--accent', a[0]);
    r.setProperty('--accent-strong', a[1]);
    r.setProperty('--accent-soft', a[2]);
    r.setProperty('--accent-tint', a[3]);
    r.setProperty('--display-font', t.display === 'sans'
      ? "'Hanken Grotesk', system-ui, sans-serif"
      : "'Newsreader', Georgia, serif");
    const s = SURFACES[t.surface] || SURFACES.cool;
    r.setProperty('--paper', s.paper);
    r.setProperty('--paper-2', s.p2);
    r.setProperty('--paper-3', s.p3);
    r.setProperty('--line', s.line);
    r.setProperty('--line-2', s.line2);
    r.setProperty('--text', s.text);
    r.setProperty('--muted', s.muted);
    const rad = RADII[t.radius] || RADII.soft;
    r.setProperty('--r-xs', rad.xs);
    r.setProperty('--r-sm', rad.sm);
    r.setProperty('--r-md', rad.md);
    r.setProperty('--r-lg', rad.lg);
    r.setProperty('--r-xl', rad.xl);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent" />
      <TweakColor label="Accent color" value={t.accent} options={ACCENTS}
                  onChange={(v) => setTweak('accent', v)} />
      <TweakSection label="Typography" />
      <TweakRadio label="Display font" value={t.display} options={['serif', 'sans']}
                  onChange={(v) => setTweak('display', v)} />
      <TweakSection label="Surface" />
      <TweakRadio label="Paper tone" value={t.surface} options={['cool', 'warm']}
                  onChange={(v) => setTweak('surface', v)} />
      <TweakRadio label="Corners" value={t.radius} options={['soft', 'sharp']}
                  onChange={(v) => setTweak('radius', v)} />
    </TweaksPanel>
  );
}

const _tr = document.getElementById('tweaks-root');
if (_tr) ReactDOM.createRoot(_tr).render(<LoxTweaks />);