// Source: index.html script block (extracted). Loaded via <script type="text/babel"> in index.html.
function Tweaks() {
  const [open, setOpen] = React.useState(false);
  const [accent, setAccent] = React.useState(window.__TWEAKS?.accent || "teal");
  const [density, setDensity] = React.useState(window.__TWEAKS?.density || "comfortable");
  const [hints, setHints] = React.useState(window.__TWEAKS?.showKeyboardHints !== false);

  React.useEffect(()=>{
    document.documentElement.setAttribute("data-accent", accent);
    document.documentElement.setAttribute("data-density", density);
    document.documentElement.setAttribute("data-hints", hints ? "on" : "off");
  }, [accent, density, hints]);

  React.useEffect(()=>{
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({type:'__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const persist = (patch) => {
    try { window.parent.postMessage({type:'__edit_mode_set_keys', edits: patch}, '*'); } catch {}
  };

  if (!open) return null;
  return (
    <div className="tweaks-panel">
      <h4>Tweaks <span style={{marginLeft:"auto", fontFamily:"var(--font-mono)", fontSize:10.5, color:"var(--ink-mute)", fontWeight:400}}>design only</span></h4>
      <div className="tweak-row">
        <span className="tweak-row-label">accent</span>
        <div className="tweak-options">
          {[["teal","Teal"],["indigo","Indigo"],["crimson","Crimson"]].map(([k,l])=>(
            <button key={k} className="tweak-opt" data-active={accent===k} onClick={()=>{setAccent(k); persist({accent:k});}}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <span className="tweak-row-label">row density</span>
        <div className="tweak-options">
          {[["comfortable","Comfortable"],["compact","Compact"]].map(([k,l])=>(
            <button key={k} className="tweak-opt" data-active={density===k} onClick={()=>{setDensity(k); persist({density:k});}}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <span className="tweak-row-label">keyboard hints</span>
        <div className="tweak-options">
          {[["on","Show"],["off","Hide"]].map(([k,l])=>(
            <button key={k} className="tweak-opt" data-active={(hints?'on':'off')===k} onClick={()=>{const v=k==='on'; setHints(v); persist({showKeyboardHints:v});}}>{l}</button>
          ))}
        </div>
      </div>
      <div style={{fontSize:10.5, color:"var(--ink-mute)", fontFamily:"var(--font-mono)", marginTop:6, paddingTop:8, borderTop:"1px dashed var(--line)"}}>
        changes persist to index.html via host
      </div>
    </div>
  );
}
window.Tweaks = Tweaks;