// ============ TWEAKS PANEL ============
function TweaksPanel({ tweaks, setTweaks }) {
  const [active, setActive] = React.useState(false);

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

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

  if (!active) return null;

  return (
    <div style={{
      position:'fixed', bottom:24, right:24, zIndex:9999,
      width:320, padding:24,
      background:'rgba(17,20,28,0.96)',
      border:'1px solid rgba(255,31,61,0.4)',
      backdropFilter:'blur(12px)',
      color:'#eef0f5',
      fontFamily:'Barlow Condensed, sans-serif',
      maxHeight:'calc(100vh - 48px)',
      overflowY:'auto',
    }}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:20}}>
        <div className="display" style={{fontSize:20, letterSpacing:'0.08em'}}>TWEAKS</div>
        <div className="mono" style={{fontSize:10, color:'#ff1f3d', letterSpacing:'0.2em'}}>● LIVE</div>
      </div>

      <TweakRow label="Accent Red">
        <input type="color" value={tweaks.accentRed} onChange={(e)=>update('accentRed', e.target.value)} style={inputS}/>
      </TweakRow>
      <TweakRow label="Accent Blue">
        <input type="color" value={tweaks.accentBlue} onChange={(e)=>update('accentBlue', e.target.value)} style={inputS}/>
      </TweakRow>
      <TweakRow label="Subtitle">
        <input type="text" value={tweaks.subtitle} onChange={(e)=>update('subtitle', e.target.value)}
               style={{...inputS, width:'100%', padding:'6px 8px', color:'#eef0f5', background:'rgba(238,240,245,0.05)', border:'1px solid rgba(238,240,245,0.2)', fontFamily:'inherit'}}/>
      </TweakRow>
      <TweakRow label="Hero Style">
        <select value={tweaks.heroStyle} onChange={(e)=>update('heroStyle', e.target.value)}
                style={{...inputS, width:'100%', padding:'6px 8px', color:'#eef0f5', background:'rgba(238,240,245,0.05)', border:'1px solid rgba(238,240,245,0.2)'}}>
          <option value="stage">Stage Beams</option>
          <option value="grid">Grid Floor</option>
          <option value="minimal">Minimal</option>
        </select>
      </TweakRow>
      <TweakRow label="Spike Intensity">
        <input type="range" min="0" max="100" value={tweaks.spikeIntensity} onChange={(e)=>update('spikeIntensity', +e.target.value)} style={{width:'100%'}}/>
      </TweakRow>
    </div>
  );
}
const inputS = { cursor:'pointer' };

function TweakRow({ label, children }) {
  return (
    <div style={{marginBottom:16}}>
      <div className="mono" style={{fontSize:10, color:'#8f95a5', letterSpacing:'0.2em', marginBottom:8, textTransform:'uppercase'}}>{label}</div>
      {children}
    </div>
  );
}
window.TweaksPanel = TweaksPanel;