function TweaksPanel({ tweaks, setTweaks, persist }) {
  const [open, setOpen] = React.useState(true);
  const [enabled, setEnabled] = React.useState(false);

  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setEnabled(true);
      if (e.data?.type === '__deactivate_edit_mode') setEnabled(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({type: '__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  if (!enabled) return null;

  const setKey = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    persist({ [k]: v });
  };

  const Group = ({ label, children }) => (
    <div className="tweak-group">
      <div className="tweak-label">{label}</div>
      {children}
    </div>
  );

  const Chips = ({ options, value, onChange }) => (
    <div className="tweak-options">
      {options.map(o => (
        <button key={o.value} className={"tweak-chip " + (value === o.value ? "is-active" : "")} onClick={() => onChange(o.value)}>
          {o.label}
        </button>
      ))}
    </div>
  );

  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <span>Tweaks</span>
        <button onClick={() => setOpen(!open)} style={{color:'#fff'}}>
          {open ? "+" : "+"}
        </button>
      </div>
      {open && (
        <div className="tweaks-body">
          <Group label="Hero Headline">
            <textarea className="tweak-input" value={tweaks.heroHeadline} onChange={e => setKey("heroHeadline", e.target.value)} />
          </Group>

          <Group label="Hero Layout">
            <Chips
              value={tweaks.heroLayout}
              onChange={v => setKey("heroLayout", v)}
              options={[
                {value:"split", label:"Split"},
                {value:"centered", label:"Centered"},
                {value:"fullbleed", label:"Full bleed"},
              ]}
            />
          </Group>

          <Group label="Accent Intensity">
            <Chips
              value={tweaks.accentIntensity}
              onChange={v => setKey("accentIntensity", v)}
              options={[
                {value:"soft", label:"Soft"},
                {value:"balanced", label:"Balanced"},
                {value:"bold", label:"Bold"},
              ]}
            />
          </Group>

          <Group label="Form Submit CTA">
            <input className="tweak-input" style={{minHeight:'auto', padding:'10px 12px'}} value={tweaks.formCta} onChange={e => setKey("formCta", e.target.value)} />
          </Group>

          <Group label="Section Order">
            <Chips
              value={tweaks.sectionOrder}
              onChange={v => setKey("sectionOrder", v)}
              options={[
                {value:"default", label:"Default (Guarantees first)"},
                {value:"social-first", label:"Reviews first"},
                {value:"gallery-first", label:"Gallery first"},
              ]}
            />
          </Group>
        </div>
      )}
    </div>
  );
}
window.TweaksPanel = TweaksPanel;