// Tweaks panel — palette / displayFont / density / dark

const TweaksPanel = ({ open, tweaks, setTweaks }) => {
  if (!open) return null;
  const set = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  const pill = (active) => ({
    padding: '6px 10px',
    fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase',
    border: '1.5px solid #111',
    background: active ? '#111' : '#fff',
    color: active ? '#fff' : '#111',
    cursor: 'pointer',
    borderRadius: 3,
    fontFamily: 'Azeret Mono, monospace',
  });

  return (
    <div style={{
      position: 'fixed', right: 16, bottom: 16, zIndex: 100,
      width: 280,
      background: '#fff',
      border: '2px solid #111',
      borderRadius: 6,
      boxShadow: '4px 4px 0 #111',
      padding: 14,
      fontFamily: 'Azeret Mono, monospace',
      color: '#111',
    }}>
      <div style={{
        fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase',
        marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        Tweaks
        <span style={{ fontWeight: 400, opacity: 0.5 }}>v1</span>
      </div>

      <Field label="Palette">
        {['cyan','sunset','acid','mono'].map(k => (
          <button key={k} onClick={() => set({ palette: k })} style={pill(tweaks.palette === k)}>{k}</button>
        ))}
      </Field>

      <Field label="Display font">
        {[['rubik-mono','Rubik'],['marker','Marker'],['shrikhand','Shrikhand']].map(([k,l]) => (
          <button key={k} onClick={() => set({ displayFont: k })} style={pill(tweaks.displayFont === k)}>{l}</button>
        ))}
      </Field>

      <Field label="Doodle density">
        {['calm','medium','busy'].map(k => (
          <button key={k} onClick={() => set({ doodleDensity: k })} style={pill(tweaks.doodleDensity === k)}>{k}</button>
        ))}
      </Field>

      <Field label="Theme">
        {[['false','Light'],['true','Dark']].map(([k,l]) => (
          <button key={k} onClick={() => set({ dark: k === 'true' })} style={pill(String(!!tweaks.dark) === k)}>{l}</button>
        ))}
      </Field>
    </div>
  );
};

const Field = ({ label, children }) => (
  <div style={{ marginBottom: 12 }}>
    <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.6, marginBottom: 6 }}>
      {label}
    </div>
    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
      {children}
    </div>
  </div>
);

Object.assign(window, { TweaksPanel });