/* Tweaks panel: expose FV variant, accent color, header copy */

const { useEffect, useState: useStateT } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#a87544",
  "inkColor": "#1a1613",
  "paperColor": "#f7f2e9",
  "showFloatingCta": true,
  "fvVariant": 0
}/*EDITMODE-END*/;

function useTweaks() {
  const [tw, setTw] = useStateT(TWEAK_DEFAULTS);
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--wood', tw.accentColor);
    root.style.setProperty('--ink', tw.inkColor);
    root.style.setProperty('--paper', tw.paperColor);
  }, [tw]);
  return [tw, setTw];
}

function TweaksPanel({ tw, setTw, visible }) {
  if (!visible) return null;
  const commit = (edits) => {
    setTw(prev => ({ ...prev, ...edits }));
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
    } catch(e){}
  };
  const panel = {
    position:'fixed', bottom: 24, right: 24, zIndex: 100,
    width: 320, background: '#fbf7ef', color:'#1a1613',
    border: '1px solid #d9cfbe', borderRadius: 4,
    boxShadow: '0 30px 60px -20px rgba(0,0,0,.35)',
    padding: '20px 22px', fontFamily:'system-ui, sans-serif', fontSize: 13,
  };
  const row = { display:'flex', justifyContent:'space-between', alignItems:'center', padding: '10px 0', borderBottom:'1px solid #ebe3d5' };
  const swatches = ['#a87544', '#7a5530', '#3c5a3a', '#6b8e7a', '#c6892a', '#8b5a3c'];
  return (
    <div style={panel}>
      <div style={{ fontFamily:'Shippori Mincho, serif', fontSize: 15, letterSpacing:'.15em', paddingBottom: 12, borderBottom: '1px solid #1a1613' }}>
        Tweaks
      </div>

      <div style={row}>
        <span>FV コピー案</span>
        <div style={{ display:'flex', gap: 6 }}>
          {['A','B','C'].map((L, i) => (
            <button key={L} onClick={() => commit({ fvVariant: i })}
              style={{
                width: 28, height: 28, border: '1px solid #1a1613',
                background: tw.fvVariant === i ? '#1a1613' : 'transparent',
                color: tw.fvVariant === i ? '#fbf7ef' : '#1a1613',
                fontFamily: 'Shippori Mincho, serif', fontSize: 12,
              }}>{L}</button>
          ))}
        </div>
      </div>

      <div style={row}>
        <span>アクセント色</span>
        <div style={{ display:'flex', gap: 6 }}>
          {swatches.map(c => (
            <button key={c} onClick={() => commit({ accentColor: c })}
              style={{
                width: 22, height: 22, background: c,
                border: tw.accentColor === c ? '2px solid #1a1613' : '1px solid #d9cfbe',
              }} aria-label={c}/>
          ))}
        </div>
      </div>

      <div style={row}>
        <span>紙色（背景）</span>
        <div style={{ display:'flex', gap: 6 }}>
          {['#f7f2e9','#efe7d7','#fbf7ef','#ede7dc'].map(c => (
            <button key={c} onClick={() => commit({ paperColor: c })}
              style={{
                width: 22, height: 22, background: c,
                border: tw.paperColor === c ? '2px solid #1a1613' : '1px solid #d9cfbe',
              }}/>
          ))}
        </div>
      </div>

      <div style={{ ...row, borderBottom: 0 }}>
        <span>追従CTAボタン</span>
        <button onClick={() => commit({ showFloatingCta: !tw.showFloatingCta })}
          style={{
            padding: '6px 12px', border: '1px solid #1a1613',
            background: tw.showFloatingCta ? '#1a1613' : 'transparent',
            color: tw.showFloatingCta ? '#fbf7ef' : '#1a1613',
            fontFamily: 'Shippori Mincho, serif', fontSize: 12, letterSpacing:'.1em'
          }}>{tw.showFloatingCta ? 'ON' : 'OFF'}</button>
      </div>

      <div style={{ marginTop: 12, fontSize: 11, color:'#6b6560', lineHeight: 1.7 }}>
        ツールバーの「Tweaks」で表示／非表示を切り替えられます。
      </div>
    </div>
  );
}

Object.assign(window, { useTweaks, TweaksPanel });