/* Tweaks panel */

const Tweaks = ({ values, onChange }) => {
  const [open, setOpen] = React.useState(true);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setVisible(true);
      if (d.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', onMsg);
    // Announce availability AFTER the listener is live
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const set = (k, v) => {
    onChange({ [k]: v });
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  if (!visible) return null;

  return (
    <div className={`tweaks ${open?'':'closed'}`}>
      <div className="tweaks__head" onClick={() => setOpen(!open)}>
        <span className="dot"/>
        <strong>TWEAKS</strong>
        <span style={{fontSize:11,letterSpacing:'.12em',color:'rgba(255,255,255,.6)'}}>DESIGN KNOBS</span>
        <span className="chev"><Arrow dir="d"/></span>
      </div>
      <div className="tweaks__body">
        <div className="tweaks__row">
          <label>メインコピー（3案切替）</label>
          <div className="tweaks__seg">
            {[
              {k:'a', lbl:'A ストレス消す'},
              {k:'b', lbl:'B 面倒ごと'},
              {k:'c', lbl:'C パートナー'}
            ].map(o => (
              <button key={o.k} className={values.mainCopyVariant===o.k?'on':''} onClick={() => set('mainCopyVariant', o.k)}>{o.lbl}</button>
            ))}
          </div>
        </div>

        <div className="tweaks__row">
          <label>ヒーローレイアウト</label>
          <div className="tweaks__seg">
            {['A','B'].map(o => (
              <button key={o} className={values.heroLayout===o?'on':''} onClick={() => set('heroLayout', o)}>
                {o === 'A' ? 'A フルブリード' : 'B スプリット'}
              </button>
            ))}
          </div>
        </div>

        <div className="tweaks__row">
          <label>アクセントカラー</label>
          <div className="tweaks__swatches">
            {[
              {k:'orange', c:'#e67e22'},
              {k:'green',  c:'#2f8c5f'},
              {k:'red',    c:'#c1392b'}
            ].map(s => (
              <button key={s.k}
                className={`tweaks__swatch ${values.accent===s.k?'on':''}`}
                style={{background:s.c}}
                aria-label={s.k}
                onClick={() => set('accent', s.k)}/>
            ))}
          </div>
        </div>

        <div className="tweaks__row tweaks__toggle">
          <span>実績バッジをHeroに表示</span>
          <input type="checkbox" checked={values.showBadges} onChange={e => set('showBadges', e.target.checked)}/>
        </div>

        <div className="tweaks__row tweaks__toggle">
          <span>代表あいさつセクション</span>
          <input type="checkbox" checked={values.showRep} onChange={e => set('showRep', e.target.checked)}/>
        </div>      </div>
    </div>
  );
};

window.Tweaks = Tweaks;