/* Tweaks floating panel — only visible when edit mode is active */
const TweaksPanel = () => {
  const t = useTweaks();
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => window.subscribeTweakPanelVisibility(setVisible), []);
  if (!visible) return null;

  const Row = ({ label, k, opts }) => (
    <div style={{padding:'14px 0',borderBottom:'1px solid var(--line)'}}>
      <div className="eyebrow" style={{marginBottom:10}}>{label}</div>
      <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
        {opts.map(o => (
          <button key={o.v} onClick={()=>setTweak(k, o.v)}
            className="chip tweak-chip"
            style={{
              borderColor: t[k]===o.v ? 'var(--ink-2)' : 'var(--line)',
              background: t[k]===o.v ? 'var(--sage-tint)' : 'var(--canvas)',
              color: t[k]===o.v ? 'var(--moss-deep)' : 'var(--ink-2)',
              fontWeight: 500,
            }}>{o.label}</button>
        ))}
      </div>
    </div>
  );

  return (
    <div style={{
      position:'fixed',right:24,bottom:24,zIndex:200,
      width:320,background:'var(--canvas)',
      border:'1px solid var(--line-strong)',borderRadius:14,
      boxShadow:'var(--shadow-float)',padding:'18px 20px',
      fontFamily:'var(--font-sans)',
    }}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <Icon name="settings" size={14} color="var(--moss)"/>
          <div style={{fontSize:14,fontWeight:600,color:'var(--ink)',letterSpacing:'-0.01em'}}>Tweaks</div>
        </div>
        <div style={{fontSize:11,color:'var(--ink-3)'}}>live</div>
      </div>
      <Row label="Hero layout" k="heroLayout" opts={[
        {v:'split',label:'Split'},{v:'centered',label:'Centered'},{v:'editorial',label:'Editorial'},
      ]}/>
      <Row label="Coverage grid" k="coverageStyle" opts={[
        {v:'logo-cells',label:'Logos'},{v:'wordmarks',label:'Wordmarks'},{v:'list',label:'List'},
      ]}/>
      <Row label="Key insight" k="keyInsightStyle" opts={[
        {v:'single-stat',label:'Single stat'},{v:'three-column',label:'Three columns'},{v:'bar',label:'Bar'},
      ]}/>
      <Row label="Dashboard density" k="dashboardDensity" opts={[
        {v:'summary',label:'Summary'},{v:'rich',label:'Rich'},
      ]}/>
      <Row label="Accent intensity" k="accentIntensity" opts={[
        {v:'restrained',label:'Restrained'},{v:'more-green',label:'More green'},
      ]}/>
    </div>
  );
};
window.TweaksPanel = TweaksPanel;