// Minimal tweaks panel stub — exposes useTweaks and TweaksPanel globally

function useTweaks(defaults) {
  const [values, setValues] = React.useState(defaults);
  const setTweak = React.useCallback((keyOrEdits, val) => {
    const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
      ? keyOrEdits : { [keyOrEdits]: val };
    setValues(prev => ({ ...prev, ...edits }));
  }, []);
  return [values, setTweak];
}

function TweaksPanel({ title='Tweaks', children }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <button onClick={() => setOpen(o => !o)} style={{ position:'fixed', bottom:16, right:16, zIndex:9999, width:44, height:44, borderRadius:22, background:'#fff', border:'none', cursor:'pointer', boxShadow:'0 4px 16px rgba(0,0,0,0.15)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:20 }}>⚙️</button>
      {open && (
        <div style={{ position:'fixed', bottom:70, right:16, zIndex:9998, width:280, maxHeight:'70vh', overflowY:'auto', background:'rgba(250,249,247,0.95)', backdropFilter:'blur(24px)', border:'0.5px solid rgba(255,255,255,0.6)', borderRadius:14, boxShadow:'0 12px 40px rgba(0,0,0,0.18)', padding:'12px 14px 14px', fontFamily:'ui-sans-serif,system-ui,sans-serif', fontSize:12 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
            <b style={{ fontSize:13 }}>{title}</b>
            <button onClick={() => setOpen(false)} style={{ background:'none', border:'none', cursor:'pointer', fontSize:16, color:'#666' }}>✕</button>
          </div>
          {children}
        </div>
      )}
    </>
  );
}

function TweakSection({ title }) {
  return <div style={{ fontSize:10, fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase', color:'rgba(41,38,27,0.45)', padding:'8px 0 4px' }}>{title}</div>;
}

function TweakRadio({ label, value, onChange, options }) {
  return (
    <div style={{ marginBottom:8 }}>
      <div style={{ fontSize:11, color:'rgba(41,38,27,0.7)', marginBottom:4 }}>{label}</div>
      <div style={{ display:'flex', gap:4 }}>
        {options.map(o => {
          const v = typeof o==='object' ? o.value : o;
          const l = typeof o==='object' ? o.label : o;
          return <button key={v} onClick={()=>onChange(v)} style={{ flex:1, padding:'5px 0', borderRadius:7, border:'none', cursor:'pointer', background:value===v?'rgba(0,0,0,0.78)':'rgba(0,0,0,0.06)', color:value===v?'#fff':'inherit', fontWeight:500, fontSize:11, fontFamily:'inherit' }}>{l}</button>;
        })}
      </div>
    </div>
  );
}

function TweakColor({ label, value, onChange }) {
  return (
    <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8 }}>
      <span style={{ fontSize:11, color:'rgba(41,38,27,0.7)' }}>{label}</span>
      <input type="color" value={value} onChange={e=>onChange(e.target.value)} style={{ width:56, height:22, borderRadius:6, border:'0.5px solid rgba(0,0,0,0.1)', padding:0, cursor:'pointer' }}/>
    </div>
  );
}

function TweakSelect({ label, value, onChange, options }) {
  return (
    <div style={{ marginBottom:8 }}>
      <div style={{ fontSize:11, color:'rgba(41,38,27,0.7)', marginBottom:4 }}>{label}</div>
      <select value={value} onChange={e=>onChange(e.target.value)} style={{ width:'100%', height:26, borderRadius:7, border:'0.5px solid rgba(0,0,0,0.1)', background:'rgba(255,255,255,0.6)', fontFamily:'inherit', fontSize:11, padding:'0 8px' }}>
        {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
    </div>
  );
}

Object.assign(window, { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect });
