// drafting-tweaks.jsx — Tweaks island for the drawing-package pages.
// Nanowhite frost edition: accent ink, frost blur, layers, motion.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#17181B",
  "frost": 64,
  "dims": true,
  "stamps": true,
  "hatch": true,
  "crosshair": true,
  "speed": 1
}/*EDITMODE-END*/;

const INK_PRESETS = {
  '#17181B': { name: 'Graphite',      soft: 'rgba(23, 24, 27, 0.055)',  line: 'rgba(23, 24, 27, 0.32)',  glow: 'rgba(23, 24, 27, 0.10)' },
  '#2E5F8F': { name: 'Steel blue',    soft: 'rgba(46, 95, 143, 0.07)',  line: 'rgba(46, 95, 143, 0.40)', glow: 'rgba(46, 95, 143, 0.20)' },
  '#C7551F': { name: 'Safety orange', soft: 'rgba(199, 85, 31, 0.07)',  line: 'rgba(199, 85, 31, 0.42)', glow: 'rgba(199, 85, 31, 0.20)' },
};

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

  React.useEffect(() => {
    const body = document.body;
    const root = document.documentElement.style;

    // Graphite is the stylesheet default — clear inline props so the
    // stylesheet (and dark-mode's own accent) win. Other inks go inline.
    if (t.accent === '#17181B') {
      ['--accent', '--accent-soft', '--accent-line', '--accent-glow'].forEach((p) => root.removeProperty(p));
    } else {
      const preset = INK_PRESETS[t.accent] || INK_PRESETS['#17181B'];
      root.setProperty('--accent', t.accent);
      root.setProperty('--accent-soft', preset.soft);
      root.setProperty('--accent-line', preset.line);
      root.setProperty('--accent-glow', preset.glow);
    }

    root.setProperty('--frost', t.frost + 'px');

    body.classList.toggle('hide-dims', !t.dims);
    body.classList.toggle('hide-stamps', !t.stamps);
    body.classList.toggle('hide-hatch', !t.hatch);
    body.classList.toggle('hide-crosshair', !t.crosshair);
    root.setProperty('--speed', String(t.speed));
  }, [t.accent, t.frost, t.dims, t.stamps, t.hatch, t.crosshair, t.speed]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Ink" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={Object.keys(INK_PRESETS)}
        onChange={(v) => setTweak('accent', v)}
      />

      <TweakSection label="Glass" />
      <TweakSlider
        label="Frost blur"
        value={t.frost}
        min={16} max={160} step={8} unit="px"
        onChange={(v) => setTweak('frost', v)}
      />

      <TweakSection label="Layers" />
      <TweakToggle label="Dimensions" value={t.dims} onChange={(v) => setTweak('dims', v)} />
      <TweakToggle label="Stamps" value={t.stamps} onChange={(v) => setTweak('stamps', v)} />
      <TweakToggle label="Hatching" value={t.hatch} onChange={(v) => setTweak('hatch', v)} />
      <TweakToggle label="Crosshair" value={t.crosshair} onChange={(v) => setTweak('crosshair', v)} />

      <TweakSection label="Motion" />
      <TweakSlider
        label="Animation speed"
        value={t.speed}
        min={0.4} max={2} step={0.05} unit="×"
        onChange={(v) => setTweak('speed', v)}
      />
      <TweakButton label="Print the set (⌘P)" secondary onClick={() => window.print()} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-mount')).render(<DraftingTweaks />);