// Tweaks panel — activated by the design tool's edit mode iframe messages.

function TweaksPanel({ tweaks, setTweaks }) {
  const [visible, setVisible] = React.useState(false);

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

  const update = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  if (!visible) return null;

  const Label = ({ children }) => (
    <div style={{
      fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.2em',
      color: '#8a7bb0', marginBottom: 6, fontWeight: 700,
    }}>{children}</div>
  );

  const Row = ({ children, label }) => (
    <div style={{ marginBottom: 18 }}>
      <Label>{label}</Label>
      {children}
    </div>
  );

  const OptBtn = ({ active, onClick, children }) => (
    <button onClick={onClick} style={{
      padding: '8px 12px',
      borderRadius: 10,
      border: `1.5px solid ${active ? '#f096c2' : 'rgba(42, 31, 74, 0.15)'}`,
      background: active ? '#f096c2' : '#fff',
      color: active ? '#fff' : '#2a1f4a',
      fontFamily: "'Manrope', sans-serif",
      fontSize: 12, fontWeight: 600,
      cursor: 'pointer',
      textTransform: 'lowercase',
    }}>{children}</button>
  );

  return (
    <div style={{
      position: 'fixed', bottom: 20, right: 20, width: 280,
      background: '#fff4e8', borderRadius: 20, padding: 18,
      boxShadow: '0 20px 60px rgba(26, 16, 48, 0.4)',
      zIndex: 100,
      fontFamily: "'Manrope', sans-serif",
      border: '2px solid rgba(42, 31, 74, 0.08)',
    }}>
      <div className="display" style={{
        fontSize: 20, color: '#2a1f4a', marginBottom: 14,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <Sparkle size={16} color="#f096c2" />
        <span>Tweaks</span>
      </div>

      <Row label="palette">
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {[
            ['dawn', 'pastel dawn'],
            ['twilight', 'twilight'],
            ['mint', 'mint nebula'],
          ].map(([k, label]) => (
            <OptBtn key={k} active={tweaks.palette === k} onClick={() => update({ palette: k })}>
              {label}
            </OptBtn>
          ))}
        </div>
      </Row>

      <Row label="star density">
        <input
          type="range" min="30" max="300" step="10"
          value={tweaks.starDensity}
          onChange={(e) => update({ starDensity: +e.target.value })}
          style={{ width: '100%', accentColor: '#f096c2' }}
        />
        <div style={{ fontSize: 12, color: '#5b4a82' }}>{tweaks.starDensity} stars</div>
      </Row>

      <Row label="motion">
        <div style={{ display: 'flex', gap: 6 }}>
          {['low', 'medium', 'high'].map((k) => (
            <OptBtn key={k} active={tweaks.motionIntensity === k} onClick={() => update({ motionIntensity: k })}>
              {k}
            </OptBtn>
          ))}
        </div>
      </Row>

      <Row label="hero tagline">
        <textarea
          value={tweaks.heroCopy}
          onChange={(e) => update({ heroCopy: e.target.value })}
          rows={3}
          style={{
            width: '100%', padding: 8, borderRadius: 10,
            border: '1.5px solid rgba(42, 31, 74, 0.15)',
            background: '#fff', color: '#2a1f4a',
            fontFamily: "'Manrope', sans-serif", fontSize: 12,
            resize: 'vertical',
          }}
        />
      </Row>
    </div>
  );
}

Object.assign(window, { TweaksPanel });