const Tweaks = () => {
  const t = window.t || (k => k);
  const {tweaks, setTweaks} = useApp();
  const [open, setOpen] = useState(false);
  const [edit, setEdit] = useState(false);
  useEffect(()=>{
    const onMsg = (e) => { const d=e.data||{}; if (d.type==='__activate_edit_mode'){setEdit(true);setOpen(true)} if (d.type==='__deactivate_edit_mode'){setEdit(false);setOpen(false)} };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({type:'__edit_mode_available'}, '*');
    return ()=>window.removeEventListener('message', onMsg);
  }, []);
  const up = (patch) => { const next={...tweaks,...patch}; setTweaks(next); window.parent.postMessage({type:'__edit_mode_set_keys',edits:patch}, '*'); };
  if (!edit) return null;
  return <div className="tweaks" style={{display:open?'block':'none'}}>
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}><div style={{fontWeight:600}}>{t('settings.tweaks') || 'Tweaks'}</div><button onClick={()=>setOpen(false)} style={{color:'var(--ink-dim)'}}><Icon name="x" size={15}/></button></div>
    <div style={{display:'flex',flexDirection:'column',gap:14}}>
      <div>
        <label className="label">{t('settings.language')}</label>
        <div style={{display:'flex',gap:6}}>
          {[{v:'es',l:'Español'},{v:'en',l:'English'}].map(l=><button key={l.v} className={`btn btn-sm ${tweaks.lang===l.v?'btn-primary':'btn-ghost'}`} style={{flex:1}} onClick={()=>up({lang:l.v})}>{l.l}</button>)}
        </div>
      </div>
      <div>
        <label className="label">{t('settings.theme')}</label>
        <div style={{display:'flex',gap:6}}>
          {[{v:'light',i:'sun',l:t('settings.light')},{v:'dark',i:'moon',l:t('settings.dark')}].map(o=><button key={o.v} className={`btn btn-sm ${tweaks.theme===o.v?'btn-primary':'btn-ghost'}`} style={{flex:1}} onClick={()=>up({theme:o.v})}><Icon name={o.i} size={13}/> {o.l}</button>)}
        </div>
      </div>
      <div>
        <label className="label">Radio {tweaks.radius}px</label>
        <input type="range" min="6" max="24" value={tweaks.radius} onChange={e=>up({radius:+e.target.value})} style={{width:'100%',accentColor:'var(--accent)'}}/>
      </div>
    </div>
  </div>;
};
window.Tweaks = Tweaks;