/* ============================================================
   NeuralScout — Tweaks panel
   ============================================================ */
function Tweaks({ values, onChange }) {
  const [open, setOpen] = React.useState(true);
  const [visible, setVisible] = React.useState(false);

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

  const set = (key, val) => {
    onChange({ ...values, [key]: val });
    window.parent.postMessage({type:'__edit_mode_set_keys', edits: { [key]: val }}, '*');
  };

  if (!visible) return null;

  const accents = [
    ['Cyan', '#22e3ff', '#22e3ff26'],
    ['Lime', '#b6f569', '#b6f56922'],
    ['Amber', '#ffb547', '#ffb54722'],
    ['Violet', '#b794ff', '#b794ff22'],
    ['Coral', '#ff6b6b', '#ff6b6b22'],
  ];

  return (
    <div style={tweakStyles.panel}>
      <div style={tweakStyles.head} onClick={() => setOpen(o => !o)}>
        <div style={{display:'flex', alignItems:'center', gap: 8}}>
          <span style={{width:6, height:6, borderRadius:99, background:'var(--ns-accent)', boxShadow:'0 0 8px var(--ns-accent)'}}/>
          <span style={{fontFamily:'var(--ns-mono)', fontSize: 11, letterSpacing:'0.12em', color:'var(--ns-fg)'}}>TWEAKS</span>
        </div>
        <span style={{fontFamily:'var(--ns-mono)', fontSize: 12, color:'var(--ns-fg-dim)'}}>{open ? '–' : '+'}</span>
      </div>
      {open && (
        <div style={tweakStyles.body}>
          <Row label="Theme">
            <Seg opts={[['Dark','dark'],['Light','light']]} val={values.theme} onClick={v => set('theme', v)} />
          </Row>
          <Row label="Accent">
            <div style={{display:'flex', gap: 6, flexWrap:'wrap'}}>
              {accents.map(([n,c,s]) => (
                <button key={n} onClick={() => set('accent', n.toLowerCase())} style={{
                  width: 24, height: 24, borderRadius: 4,
                  background: c, border: values.accent === n.toLowerCase() ? '2px solid var(--ns-fg)' : '1px solid var(--ns-line-2)',
                  cursor:'pointer', padding: 0,
                }} title={n}/>
              ))}
            </div>
          </Row>
          <Row label="Motion">
            <Seg opts={[['Play','on'],['Pause','off']]} val={values.motion} onClick={v => set('motion', v)} />
          </Row>
          <Row label="Headline">
            <Seg opts={[['Default','default'],['Direct','direct'],['Bold','bold']]} val={values.headline} onClick={v => set('headline', v)} />
          </Row>
          <Row label="Feature layout">
            <Seg opts={[['3 cols','grid'],['2 cols','wide']]} val={values.featLayout} onClick={v => set('featLayout', v)} />
          </Row>
        </div>
      )}
    </div>
  );
}

function Row({ label, children }) {
  return (
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap: 16, paddingBlock: 2}}>
      <span style={{fontFamily:'var(--ns-mono)', fontSize: 10, letterSpacing:'0.1em', color:'var(--ns-fg-dimmer)', textTransform:'uppercase'}}>{label}</span>
      {children}
    </div>
  );
}

function Seg({ opts, val, onClick }) {
  return (
    <div style={{display:'flex', border:'1px solid var(--ns-line-2)', borderRadius: 4, overflow:'hidden'}}>
      {opts.map(([label, v]) => (
        <button key={v} onClick={() => onClick(v)} style={{
          padding:'4px 10px', fontFamily:'var(--ns-mono)', fontSize: 10,
          background: val === v ? 'var(--ns-fg)' : 'transparent',
          color: val === v ? 'var(--ns-bg)' : 'var(--ns-fg-dim)',
          border:'none', cursor:'pointer',
          letterSpacing:'0.06em',
        }}>{label}</button>
      ))}
    </div>
  );
}

const tweakStyles = {
  panel: {
    position:'fixed', bottom: 20, right: 20, zIndex: 100,
    width: 280,
    background:'rgba(11,14,19,0.92)',
    backdropFilter:'blur(12px)',
    border:'1px solid var(--ns-line-2)',
    borderRadius: 8,
    boxShadow:'0 20px 60px rgba(0,0,0,0.6)',
  },
  head: {
    padding:'10px 14px', cursor:'pointer',
    display:'flex', justifyContent:'space-between', alignItems:'center',
    borderBottom:'1px solid var(--ns-line)',
  },
  body: {
    padding:'14px', display:'flex', flexDirection:'column', gap: 12,
  },
};

window.Tweaks = Tweaks;