// Tweaks panel — in-design controls
function TweaksPanel({ tweaks, setTweak }) {
  const [active, setActive] = useState(false);
  const [open, setOpen] = useState(true);

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

  if (!active) return null;

  const update = (k, v) => {
    setTweak(k, v);
    window.parent.postMessage({type:'__edit_mode_set_keys', edits: {[k]: v}}, '*');
  };

  return (
    <div style={{
      position:'fixed', bottom: '24px', right:'24px', zIndex: 200,
      background: 'var(--bg-cream)', color:'var(--ink)',
      border:'1px solid var(--ink)', boxShadow:'0 24px 60px rgba(0,0,0,0.18)',
      width: open ? '320px':'auto',
      fontFamily:'Manrope, sans-serif',
    }}>
      <button onClick={()=>setOpen(!open)} style={{
        display:'flex', justifyContent:'space-between', alignItems:'center', width:'100%',
        background:'var(--ink)', color:'var(--bg-cream)', border:'none', padding:'14px 18px',
        cursor:'pointer', fontFamily:'Manrope, sans-serif',
        fontSize:'11px', letterSpacing:'0.22em', textTransform:'uppercase',
      }}>
        Tweaks
        <span>{open?'–':'+'}</span>
      </button>
      {open && (
        <div style={{padding:'20px'}}>
          <TweakGroup label="Palette">
            <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:'8px'}}>
              {[
                ['blush','#f6ece3'],
                ['ivory','#f9f3ea'],
                ['stone','#ecebe6'],
                ['mauve','#efe6e4'],
              ].map(([k, c]) => (
                <button key={k} onClick={()=>update('palette', k)} title={k} style={{
                  height:'40px', background: c,
                  border:'1px solid ' + (tweaks.palette===k?'var(--ink)':'var(--rule)'),
                  cursor:'pointer', padding: 0,
                  boxShadow: tweaks.palette===k ? 'inset 0 0 0 2px var(--bg-cream)':'none',
                }}/>
              ))}
            </div>
          </TweakGroup>

          <TweakGroup label="Display font">
            {['Cormorant','Italiana'].map(f => (
              <MiniChip key={f} sel={tweaks.displayFont===f} onClick={()=>update('displayFont', f)}>{f}</MiniChip>
            ))}
          </TweakGroup>

          <TweakGroup label="Script font">
            {['Parisienne','Dancing'].map(f => (
              <MiniChip key={f} sel={tweaks.scriptFont===f} onClick={()=>update('scriptFont', f)}>{f}</MiniChip>
            ))}
          </TweakGroup>

          <TweakGroup label="Paper grain">
            <MiniChip sel={tweaks.grainy} onClick={()=>update('grainy', true)}>On</MiniChip>
            <MiniChip sel={!tweaks.grainy} onClick={()=>update('grainy', false)}>Off</MiniChip>
          </TweakGroup>

          <TweakGroup label="Custom cursor">
            <MiniChip sel={tweaks.showCursor} onClick={()=>update('showCursor', true)}>On</MiniChip>
            <MiniChip sel={!tweaks.showCursor} onClick={()=>update('showCursor', false)}>Off</MiniChip>
          </TweakGroup>
        </div>
      )}
    </div>
  );
}

function TweakGroup({ label, children }) {
  return (
    <div style={{marginBottom:'16px'}}>
      <div className="eyebrow" style={{fontSize:'9px', marginBottom:'8px'}}>{label}</div>
      <div style={{display:'flex', gap:'6px', flexWrap:'wrap'}}>{children}</div>
    </div>
  );
}

function MiniChip({ sel, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      padding:'8px 12px', fontSize:'11px', letterSpacing:'0.08em',
      border:'1px solid ' + (sel?'var(--ink)':'var(--rule)'),
      background: sel ? 'var(--ink)':'transparent', color: sel?'var(--bg-cream)':'var(--ink)',
      cursor:'pointer', fontFamily:'Manrope, sans-serif',
    }}>{children}</button>
  );
}

Object.assign(window, { TweaksPanel });