// Tweaks panel — floats bottom-right when the host toggles edit mode on.

function Tweaks({ tweaks, setTweaks }) {
  const [open, setOpen] = useState(false);
  useEffect(() => { window.__setTweaksOpen = setOpen; return () => { window.__setTweaksOpen = null; }; }, []);

  if (!open) return null;

  const row = { display:'flex', alignItems:'center', justifyContent:'space-between', gap: 14, padding: '10px 0' };
  const label = { fontSize: 13, color: 'var(--ink-2)', fontWeight: 500 };
  const seg = (active) => ({
    padding: '6px 10px', borderRadius: 8,
    fontSize: 12, border: '1px solid var(--line)',
    background: active ? 'var(--ink)' : '#fff',
    color: active ? '#fff' : 'var(--ink)',
    cursor: 'pointer',
  });

  return (
    <div style={{
      position: 'fixed', right: 20, bottom: 20, zIndex: 100,
      width: 300,
      background: '#fff', color: 'var(--ink)',
      border: '1px solid var(--line)',
      borderRadius: 14,
      boxShadow: '0 10px 40px rgba(0,0,0,0.15)',
      padding: '14px 16px',
      fontFamily: 'var(--sans)',
    }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 6 }}>
        <div style={{ fontWeight: 600, fontSize: 14 }}>Tweaks</div>
        <button onClick={() => setOpen(false)} style={{ background:'none', border:'none', cursor:'pointer', color:'var(--muted)' }}>
          <Icon.Close/>
        </button>
      </div>

      <div style={row}>
        <span style={label}>Accent</span>
        <div style={{ display:'flex', gap: 6 }}>
          {['blue','teal','graphite','red'].map(v => (
            <button key={v} style={seg(tweaks.accent === v)} onClick={() => setTweaks({ accent: v })}>{v}</button>
          ))}
        </div>
      </div>

      <div style={row}>
        <span style={label}>Hero background</span>
        <div style={{ display:'flex', gap: 6 }}>
          {['light','soft','dark'].map(v => (
            <button key={v} style={seg(tweaks.heroBg === v)} onClick={() => setTweaks({ heroBg: v })}>{v}</button>
          ))}
        </div>
      </div>

      <div style={row}>
        <span style={label}>Price density</span>
        <div style={{ display:'flex', gap: 6 }}>
          {['comfortable','compact'].map(v => (
            <button key={v} style={seg(tweaks.density === v)} onClick={() => setTweaks({ density: v })}>{v}</button>
          ))}
        </div>
      </div>

      <div style={row}>
        <span style={label}>Emergency bar</span>
        <div style={{ display:'flex', gap: 6 }}>
          {[true,false].map(v => (
            <button key={String(v)} style={seg(tweaks.showEmergencyBanner === v)} onClick={() => setTweaks({ showEmergencyBanner: v })}>{v ? 'on' : 'off'}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks });