const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tagline": "Hukukta yapay zeka çağı."
}/*EDITMODE-END*/;

function Tweaks() {
  const [open, setOpen] = React.useState(false);
  const [show, setShow] = React.useState(false);
  const [tagline, setTagline] = React.useState(TWEAK_DEFAULTS.tagline);

  const taglines = [
    'Hukukta yapay zeka çağı.',
    'Dava dosyanız artık düşünüyor.',
    'Hukuk büronuzun yapay zekası.',
    'Modern büro, klasik miras.',
  ];

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

  React.useEffect(() => {
    window.__tagline = tagline;
  }, [tagline]);

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

  if (!show) return null;

  return (
    <>
      <button className="tweaks-btn" onClick={()=>setOpen(!open)}>
        ⚙ Tweaks {open ? '▾' : '▴'}
      </button>
      {open && (
        <div className="tweaks-panel">
          <h4>Tweaks</h4>
          <div className="tweak-row">
            <span className="tweak-label">Hero tagline</span>
            <div className="tweak-opts" style={{flexDirection:'column',alignItems:'stretch'}}>
              {taglines.map(t => (
                <button key={t} className={'tweak-opt ' + (tagline===t?'active':'')} style={{textAlign:'left'}} onClick={()=>{setTagline(t);persist({tagline:t});location.reload();}}>{t}</button>
              ))}
            </div>
          </div>
          <div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--ink-dim)',lineHeight:1.5}}>
            Tagline değişikliği sayfayı yeniler.
          </div>
        </div>
      )}
    </>
  );
}
window.Tweaks = Tweaks;