/* tweaks.jsx — control room for arodami.studio.
   Owns the tweak state, applies it to the document, and drives the
   generative canvas. Loads after react + tweaks-panel.jsx. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "nocturne",
  "motion": "full",
  "descriptions": "marker",
  "grid": true,
  "instruments": true
}/*EDITMODE-END*/;

const PALETTES = [
  { key: 'atelier',   name: 'Atelier',   sw: ['#F4EFE3', '#B85C3E', '#1A1410'] },
  { key: 'blueprint', name: 'Blueprint', sw: ['#EEEDE6', '#2D5C8F', '#B85C3E'] },
  { key: 'graphite',  name: 'Graphite',  sw: ['#ECECEA', '#34607F', '#16181A'] },
  { key: 'nocturne',  name: 'Nocturne',  sw: ['#14110C', '#DB8A5C', '#79ABA2'] },
];

// custom palette swatch grid (the hero control)
function PaletteChips({ value, onChange }) {
  return (
    <div className="twk-row">
      <div className="twk-lbl"><span>Palette</span>
        <span className="twk-val">{(PALETTES.find((p) => p.key === value) || {}).name}</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 7 }}>
        {PALETTES.map((p) => {
          const on = p.key === value;
          return (
            <button key={p.key} type="button" title={p.name} aria-label={p.name}
              onClick={() => onChange(p.key)}
              style={{
                appearance: 'none', cursor: 'default', padding: 0, overflow: 'hidden',
                borderRadius: 6, height: 40, position: 'relative', border: 0,
                background: p.sw[0],
                boxShadow: on
                  ? '0 0 0 1.5px rgba(0,0,0,.82), 0 2px 6px rgba(0,0,0,.16)'
                  : '0 0 0 .5px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.06)',
                transition: 'box-shadow .12s, transform .12s',
              }}>
              <span style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: '38%', display: 'flex', flexDirection: 'column' }}>
                <i style={{ flex: 1, background: p.sw[1] }} />
                <i style={{ flex: 1, background: p.sw[2] }} />
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const prevPalette = React.useRef(null);

  React.useEffect(() => {
    const root = document.documentElement;
    root.dataset.palette = t.palette;
    root.dataset.desc = t.descriptions;
    root.dataset.grid = t.grid ? 'on' : 'off';
    root.dataset.rail = t.instruments ? 'on' : 'off';
    root.dataset.frame = t.instruments ? 'on' : 'off';
    root.dataset.canvas = t.motion === 'off' ? 'off' : 'on';

    const recolor = prevPalette.current !== null && prevPalette.current !== t.palette;
    prevPalette.current = t.palette;

    if (window.Arodamos) {
      window.Arodamos.configure({
        motion: t.motion === 'full' ? 'full' : 'subtle',
        recolor,
      });
    }
  }, [t.palette, t.motion, t.descriptions, t.grid, t.instruments]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Direction" />
      <PaletteChips value={t.palette} onChange={(v) => setTweak('palette', v)} />

      <TweakSection label="Motion" />
      <TweakRadio label="Generative field" value={t.motion}
        options={[{ value: 'full', label: 'Grow' }, { value: 'calm', label: 'Still' }, { value: 'off', label: 'Off' }]}
        onChange={(v) => setTweak('motion', v)} />

      <TweakSection label="Section descriptions" />
      <TweakRadio label="Reveal" value={t.descriptions}
        options={[{ value: 'marker', label: 'Cue' }, { value: 'teaser', label: 'Teaser' }, { value: 'always', label: 'Open' }]}
        onChange={(v) => setTweak('descriptions', v)} />

      <TweakSection label="Instrument frame" />
      <TweakToggle label="Measurement grid" value={t.grid} onChange={(v) => setTweak('grid', v)} />
      <TweakToggle label="Marks & readouts" value={t.instruments} onChange={(v) => setTweak('instruments', v)} />
    </TweaksPanel>
  );
}

(function mount() {
  const el = document.getElementById('tweaks-root');
  if (!el) return;
  ReactDOM.createRoot(el).render(<App />);
})();