const TweakDefaults = /*EDITMODE-BEGIN*/{
  "primary": "#2f6b42",
  "heroLayout": "right-image",
  "titleStyle": "mark-highlight",
  "fontSerif": "Noto Serif JP"
}/*EDITMODE-END*/;

const Tweaks = () => {
  const [on, setOn] = React.useState(false);
  const [vals, setVals] = React.useState(TweakDefaults);

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

  React.useEffect(() => {
    // Apply primary color
    const root = document.documentElement;
    if (vals.primary) {
      // Convert hex to oklch-ish green shift by just using variable overrides
      root.style.setProperty('--green-700', vals.primary);
    }
    // Title highlight style
    document.body.dataset.titleStyle = vals.titleStyle || 'mark-highlight';
    // Serif font
    if (vals.fontSerif) {
      root.style.setProperty('--font-serif', `"${vals.fontSerif}", "Noto Serif JP", serif`);
    }
    // Hero layout
    document.body.dataset.heroLayout = vals.heroLayout || 'right-image';
  }, [vals]);

  const update = (k, v) => {
    const next = { ...vals, [k]: v };
    setVals(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  return (
    <div className={"tweaks-panel " + (on ? 'on' : '')}>
      <h4>Tweaks</h4>
      <div className="tweaks-row">
        <label>プライマリ色</label>
        <div className="tweaks-swatch-row">
          {[
            ['#2f6b42','緑'],
            ['#8b2e2e','赤'],
            ['#1d4e89','紺'],
            ['#5b4a82','紫'],
          ].map(([c])=>(
            <button key={c} onClick={()=>update('primary', c)}
              className={vals.primary === c ? 'active' : ''}
              style={{background:c}} title={c}/>
          ))}
        </div>
      </div>
      <div className="tweaks-row">
        <label>タイトル強調</label>
        <select value={vals.titleStyle} onChange={e=>update('titleStyle', e.target.value)}>
          <option value="mark-highlight">マーカー</option>
          <option value="brush-under">筆下線</option>
          <option value="plain">なし</option>
        </select>
      </div>
      <div className="tweaks-row">
        <label>明朝書体</label>
        <select value={vals.fontSerif} onChange={e=>update('fontSerif', e.target.value)}>
          <option>Noto Serif JP</option>
          <option>Shippori Mincho</option>
          <option>Zen Old Mincho</option>
          <option>Kaisei Decol</option>
        </select>
      </div>
      <div className="tweaks-row">
        <label>ヒーロー画像</label>
        <select value={vals.heroLayout} onChange={e=>update('heroLayout', e.target.value)}>
          <option value="right-image">右配置</option>
          <option value="full-bleed">フルブリード</option>
          <option value="framed">枠あり</option>
        </select>
      </div>
    </div>
  );
};

window.Tweaks = Tweaks;
window.TweakDefaults = TweakDefaults;