/* global React */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "motionType": "harmonograph",
  "speed": 1.0,
  "density": 1.0
}/*EDITMODE-END*/;

function App() {
  const [tw, setTw] = useState(TWEAK_DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const mountedRef = useRef(false);

  // Edit-mode protocol
  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMsg);
    if (!mountedRef.current) {
      mountedRef.current = true;
      window.parent.postMessage({type: '__edit_mode_available'}, '*');
    }
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const update = (key, value) => {
    setTw(prev => {
      const next = {...prev, [key]: value};
      window.parent.postMessage({type: '__edit_mode_set_keys', edits: {[key]: value}}, '*');
      return next;
    });
  };

  return (
    <React.Fragment>
      <Nav/>
      <main>
        <Hero motionType={tw.motionType} speed={tw.speed} density={tw.density} onCycle={(v) => update('motionType', v)}/>
        <Mission/>
        <Services motionType={tw.motionType} speed={tw.speed} density={tw.density}/>
        <FrameworkBar/>
        <Platform/>
        <POV/>
        <CTA motionType={tw.motionType} speed={tw.speed} density={tw.density}/>
      </main>
      <Footer/>

      <div className={`tw-panel ${tweaksOpen ? 'on' : ''}`}>
        <div className="tw-panel__hd">
          <div className="title">Tweaks · Motion</div>
          <button className="close" onClick={() => setTweaksOpen(false)}>×</button>
        </div>

        <div className="tw-panel__row">
          <label>Motion graphic</label>
          <div className="tw-panel__opts">
            {['harmonograph','lissajous','field','torus','lorenz','rose','fourier','dejong','phyllotaxis'].map(opt => (
              <button key={opt} className={`tw-panel__opt ${tw.motionType===opt?'on':''}`} onClick={() => update('motionType', opt)}>{opt}</button>
            ))}
          </div>
        </div>

        <div className="tw-panel__row">
          <label>Animation speed · {tw.speed.toFixed(1)}×</label>
          <input type="range" className="tw-panel__slider"
            min="0.2" max="2.5" step="0.1" value={tw.speed}
            onChange={e => update('speed', parseFloat(e.target.value))}/>
        </div>

        <div className="tw-panel__row">
          <label>Density · {tw.density.toFixed(1)}</label>
          <input type="range" className="tw-panel__slider"
            min="0.4" max="1.6" step="0.1" value={tw.density}
            onChange={e => update('density', parseFloat(e.target.value))}/>
        </div>
      </div>
    </React.Fragment>
  );
}

/* Apply tweaks that affect motion components by setting CSS custom props
   and re-rendering via key. Simpler: pass speed/density through provider. */
window.App = App;