// Tweaks floating panel

const Tweaks = ({state, setState, open, setOpen}) => {
  return (
    <>
      {/* toggle hidden — panel opens only via host edit-mode messages */}

      <div className={`tweaks ${open?"show":""}`} style={{bottom:70}}>
        <h4>Tweaks <button onClick={()=>setOpen(false)} className="icon-btn" style={{width:24,height:24}}><Icon name="x" size={14}/></button></h4>

        <div className="group">
          <label>Persona<div className="seg">
            <button className={state.role==="user"?"on":""} onClick={()=>setState(s=>({...s,role:"user"}))}>User</button>
            <button className={state.role==="hr"?"on":""} onClick={()=>setState(s=>({...s,role:"hr"}))}>HR</button>
          </div></label>
        </div>

        <div className="group">
          <label>Styl czatu<div className="seg">
            <button className={state.chat==="visual-novel"?"on":""} onClick={()=>setState(s=>({...s,chat:"visual-novel"}))}>Visual</button>
            <button className={state.chat==="slack"?"on":""} onClick={()=>setState(s=>({...s,chat:"slack"}))}>Slack</button>
          </div></label>
          <label>Portret NPC<div className="seg">
            <button className={state.hue==="default"?"on":""} onClick={()=>setState(s=>({...s,hue:"default"}))}>Fiolet</button>
            <button className={state.hue==="teal"?"on":""} onClick={()=>setState(s=>({...s,hue:"teal"}))}>Teal</button>
            <button className={state.hue==="amber"?"on":""} onClick={()=>setState(s=>({...s,hue:"amber"}))}>Amber</button>
          </div></label>
        </div>

        <div className="group">
          <label>Stan przypisania<div className="seg">
            <button className={state.assigned?"on":""} onClick={()=>setState(s=>({...s,assigned:true}))}>HR-assigned</button>
            <button className={!state.assigned?"on":""} onClick={()=>setState(s=>({...s,assigned:false}))}>Self-browse</button>
          </div></label>
        </div>

        <div className="group">
          <label>Akcent<div className="seg">
            <button className={state.accentHue===295?"on":""} onClick={()=>setState(s=>({...s,accentHue:295}))}>Fiolet</button>
            <button className={state.accentHue===255?"on":""} onClick={()=>setState(s=>({...s,accentHue:255}))}>Indigo</button>
            <button className={state.accentHue===200?"on":""} onClick={()=>setState(s=>({...s,accentHue:200}))}>Cyan</button>
          </div></label>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { Tweaks });