// Tweaks panel — exposes variations per system prompt protocol

const TweaksPanel = ({ tweaks, setTweaks }) => {
  const [open, setOpen] = React.useState(true);

  const headlines = [
    { id: 'a', label: 'A · actually run' },
    { id: 'b', label: 'B · deployed, not demoed' },
    { id: 'c', label: 'C · for African realities' },
  ];

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

  if (!open) {
    return (
      <button onClick={() => setOpen(true)} style={{
        position: 'fixed', right: 20, bottom: 20, zIndex: 100,
        padding: '10px 14px', borderRadius: 999, background: 'var(--green)', color: 'var(--on-accent)',
        fontSize: 12, fontWeight: 500, boxShadow: '0 10px 40px -10px rgba(0,0,0,0.6)'
      }}>Tweaks</button>
    );
  }

  return (
    <div style={{
      position: 'fixed', right: 20, bottom: 20, zIndex: 100,
      width: 280, background: 'var(--bg-1)', border: '1px solid var(--line-2)',
      borderRadius: 16, padding: 16,
      boxShadow: '0 30px 80px -30px rgba(0,0,0,0.7)', backdropFilter: 'blur(8px)'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--fg-3)' }}>◆ TWEAKS</div>
        <button onClick={() => setOpen(false)} style={{ color: 'var(--fg-3)', padding: 4 }}>
          <Icon name="close" size={16} />
        </button>
      </div>

      {/* Headline variant */}
      <div style={{ marginBottom: 14 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--fg-4)', marginBottom: 8 }}>
          HERO HEADLINE
        </div>
        <div style={{ display: 'grid', gap: 4 }}>
          {headlines.map(h => (
            <button key={h.id} onClick={() => set('headline', h.id)} style={{
              padding: '8px 10px', fontSize: 12, borderRadius: 8, textAlign: 'left',
              color: tweaks.headline === h.id ? 'var(--on-accent)' : 'var(--fg-2)',
              background: tweaks.headline === h.id ? 'var(--green)' : 'var(--bg-2)',
              border: '1px solid ' + (tweaks.headline === h.id ? 'var(--green)' : 'var(--line)')
            }}>{h.label}</button>
          ))}
        </div>
      </div>

      {/* Accent */}
      <div style={{ marginBottom: 14 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--fg-4)', marginBottom: 8 }}>
          ACCENT
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {[
            { id: 'green', c: '#A2BB55', l: 'EARN green' },
            { id: 'blue',  c: '#00AFEF', l: 'EARN blue' },
            { id: 'mono',  c: '#E9ECEE', l: 'Mono white' },
          ].map(o => (
            <button key={o.id} onClick={() => set('accent', o.id)} title={o.l} style={{
              flex: 1, padding: '18px 0', borderRadius: 8,
              background: o.c,
              border: '2px solid ' + (tweaks.accent === o.id ? '#fff' : 'transparent')
            }} />
          ))}
        </div>
      </div>

      {/* Density */}
      <div>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--fg-4)', marginBottom: 8 }}>
          GRID DENSITY
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          {['comfortable', 'editorial'].map(d => (
            <button key={d} onClick={() => set('density', d)} style={{
              flex: 1, padding: '8px', fontSize: 11.5, borderRadius: 8,
              color: tweaks.density === d ? 'var(--on-accent)' : 'var(--fg-2)',
              background: tweaks.density === d ? 'var(--green)' : 'var(--bg-2)',
              border: '1px solid ' + (tweaks.density === d ? 'var(--green)' : 'var(--line)'),
              textTransform: 'capitalize'
            }}>{d}</button>
          ))}
        </div>
      </div>
    </div>
  );
};

window.TweaksPanel = TweaksPanel;