// Tweaks panel — exposes hero variant + accent color

const { useState: useTweakState, useEffect: useTweakEffect } = React;

function TweaksPanel({ defaults, onChange }) {
  const [open, setOpen] = useTweakState(false);
  const [active, setActive] = useTweakState(false);
  const [state, setState] = useTweakState(defaults);

  useTweakEffect(() => {
    function onMsg(e) {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') { setActive(true); setOpen(true); }
      if (d.type === '__deactivate_edit_mode') { setActive(false); setOpen(false); }
    }
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  useTweakEffect(() => {
    function onKey(e) {
      const tag = (e.target && e.target.tagName) || '';
      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
      if (e.key === '`' || e.key === '~') {
        e.preventDefault();
        setActive((a) => {
          const next = !a;
          setOpen(next);
          return next;
        });
      }
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const update = (patch) => {
    const next = { ...state, ...patch };
    setState(next);
    onChange(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  if (!active) return null;

  return (
    <div className="tweaks-panel" data-open={open}>
      <header className="tweaks-head">
        <span className="label">Tweaks</span>
        <button className="tweaks-toggle" onClick={() => setOpen(!open)}>
          {open ? '—' : '+'}
        </button>
      </header>
      {open && (
        <div className="tweaks-body">
          <div className="tweak-group">
            <div className="tweak-label">Hero variant</div>
            <div className="tweak-options">
              {['stacked', 'editorial', 'marquee'].map((v) => (
                <button
                  key={v}
                  className="tweak-opt"
                  data-active={state.heroVariant === v}
                  onClick={() => update({ heroVariant: v })}
                >
                  {v}
                </button>
              ))}
            </div>
          </div>

          <div className="tweak-group">
            <div className="tweak-label">Work row size</div>
            <div className="tweak-options">
              {['compact', 'regular', 'xl'].map((v) => (
                <button
                  key={v}
                  className="tweak-opt"
                  data-active={state.workSize === v}
                  onClick={() => update({ workSize: v })}
                >
                  {v}
                </button>
              ))}
            </div>
          </div>

          <div className="tweak-group">
            <div className="tweak-label">Work scroll</div>
            <div className="tweak-options">
              {['pin-pan', 'smart-hijack'].map((v) => (
                <button
                  key={v}
                  className="tweak-opt"
                  data-active={state.workScroll === v}
                  onClick={() => update({ workScroll: v })}
                >
                  {v}
                </button>
              ))}
            </div>
          </div>

          <div className="tweak-group">
            <div className="tweak-label">Headline layout</div>
            <div className="tweak-options">
              {['original', 'snap', 'axis', 'crescendo'].map((v) => (
                <button
                  key={v}
                  className="tweak-opt"
                  data-active={state.headlineLayout === v}
                  onClick={() => update({ headlineLayout: v })}
                >
                  {v}
                </button>
              ))}
            </div>
          </div>

          <div className="tweak-group">
            <div className="tweak-label">Site grid (12-col)</div>
            <div className="tweak-options">
              {[['off', false], ['on', true]].map(([label, v]) => (
                <button
                  key={label}
                  className="tweak-opt"
                  data-active={state.showGrid === v}
                  onClick={() => update({ showGrid: v })}
                >
                  {label}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.TweaksPanel = TweaksPanel;