/* Tweaks panel */
function TweaksPanel({ tweaks, setTweak }) {
  const [on, setOn] = React.useState(false);

  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setOn(true);
      if (d.type === "__deactivate_edit_mode") setOn(false);
    };
    window.addEventListener("message", onMsg);
    try { window.parent?.postMessage({type:"__edit_mode_available"}, "*"); } catch(_){}
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const Row = ({ label, k, options }) => (
    <div className="tweak-row">
      <span className="lab">— {label}</span>
      <div className="tweak-opts">
        {options.map(o => (
          <div
            key={o.v}
            className={"tweak-opt " + (tweaks[k] === o.v ? "active" : "")}
            onClick={()=>setTweak(k, o.v)}
            data-cursor="hover"
          >{o.label}</div>
        ))}
      </div>
    </div>
  );

  return (
    <div className={"tweaks " + (on ? "on" : "")}>
      <h4>Tweaks <span className="dot"/></h4>
      <Row label="Hero variant" k="heroVariant" options={HERO_VARIANTS.map(h => ({v:h.id, label:h.label}))}/>
      <Row label="Theme" k="theme" options={[{v:"light",label:"Paper"},{v:"dark",label:"Ink"}]}/>
      <Row label="Accent" k="accent" options={[
        {v:"acid",label:"Acid"},{v:"electric",label:"Electric"},{v:"blood",label:"Blood"},{v:"chrome",label:"Chrome"}
      ]}/>
      <Row label="Motion" k="motion" options={[
        {v:"full",label:"Full send"},{v:"subtle",label:"Subtle"},{v:"off",label:"Off"}
      ]}/>
      <Row label="Cursor labels" k="cursorLabels" options={[{v:true,label:"On"},{v:false,label:"Off"}]}/>
      <div className="mono" style={{color:"var(--smoke-2)", marginTop: 12, fontSize: 9}}>
        212 · design system · v0.1
      </div>
    </div>
  );
}
Object.assign(window, { TweaksPanel });