// Tweaks panel — hero variant + accent color + typography
const TweaksPanel = ({ config, setConfig }) => {
  const [visible, setVisible] = React.useState(false);

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

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

  if (!visible) return null;

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 20, right: 20,
        zIndex: 100,
        width: 320,
        background: 'var(--navy-900)',
        color: 'var(--bone-100)',
        border: '1px solid rgba(242,237,228,0.15)',
        boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
        fontFamily: 'var(--font-body)',
      }}
    >
      <div style={{ padding: '16px 20px', borderBottom: '1px solid rgba(242,237,228,0.15)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--brass-400)' }}>Tweaks</div>
        <div style={{ fontSize: 10, opacity: 0.5, fontFamily: 'var(--font-mono)' }}>Palmetto · 2026</div>
      </div>

      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 24 }}>
        <TweakRow label="Hero variant">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
            {[
              ['fullbleed', 'Photo'],
              ['editorial', 'Split'],
              ['typographic', 'Type'],
            ].map(([v, l]) => (
              <button
                key={v}
                onClick={() => patch('heroVariant', v)}
                style={{
                  padding: '10px 4px',
                  fontSize: 11,
                  textTransform: 'uppercase',
                  letterSpacing: '0.08em',
                  fontFamily: 'var(--font-mono)',
                  border: '1px solid rgba(242,237,228,0.2)',
                  background: config.heroVariant === v ? 'var(--brass-500)' : 'transparent',
                  color: config.heroVariant === v ? 'var(--navy-900)' : 'var(--bone-100)',
                  transition: 'all 0.2s',
                }}
              >
                {l}
              </button>
            ))}
          </div>
        </TweakRow>

        <TweakRow label="Accent color">
          <div style={{ display: 'flex', gap: 8 }}>
            {[
              { k: 'brass', c: '#B8975A' },
              { k: 'coral', c: '#C46B4A' },
              { k: 'sage', c: '#7A8C6E' },
              { k: 'sky', c: '#6B8BA8' },
            ].map(a => (
              <button
                key={a.k}
                onClick={() => patch('accent', a.k)}
                title={a.k}
                style={{
                  width: 32, height: 32,
                  background: a.c,
                  border: config.accent === a.k ? '2px solid var(--bone-100)' : '2px solid transparent',
                  outline: config.accent === a.k ? '1px solid ' + a.c : 'none',
                  outlineOffset: 2,
                  transition: 'all 0.2s',
                }}
              />
            ))}
          </div>
        </TweakRow>

        <TweakRow label="Display type">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {[
              ['canela', 'Editorial Serif'],
              ['sohne', 'Industrial Sans'],
            ].map(([v, l]) => (
              <button
                key={v}
                onClick={() => patch('displayFont', v)}
                style={{
                  padding: '10px 8px',
                  fontSize: 11,
                  fontFamily: v === 'canela' ? 'var(--font-display)' : 'var(--font-body)',
                  border: '1px solid rgba(242,237,228,0.2)',
                  background: config.displayFont === v ? 'rgba(184,151,90,0.15)' : 'transparent',
                  color: config.displayFont === v ? 'var(--brass-400)' : 'var(--bone-100)',
                  transition: 'all 0.2s',
                }}
              >
                {l}
              </button>
            ))}
          </div>
        </TweakRow>

        <TweakRow label="Color mode">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {[
              ['dark', 'After Dark'],
              ['light', 'Bone + Navy'],
            ].map(([v, l]) => (
              <button
                key={v}
                onClick={() => patch('mode', v)}
                style={{
                  padding: '10px 8px',
                  fontSize: 11,
                  textTransform: 'uppercase',
                  letterSpacing: '0.08em',
                  fontFamily: 'var(--font-mono)',
                  border: '1px solid rgba(242,237,228,0.2)',
                  background: config.mode === v ? 'var(--brass-500)' : 'transparent',
                  color: config.mode === v ? 'var(--navy-900)' : 'var(--bone-100)',
                  transition: 'all 0.2s',
                }}
              >
                {l}
              </button>
            ))}
          </div>
        </TweakRow>
      </div>
    </div>
  );
};

const TweakRow = ({ label, children }) => (
  <div>
    <div className="mono" style={{ fontSize: 10, opacity: 0.65, marginBottom: 10 }}>{label}</div>
    {children}
  </div>
);

window.TweaksPanel = TweaksPanel;