// venus-rain.jsx
// AGENT_TARGET: venus-rain — acid rain overlay triggered by tapping Venus in the solar system view

const VENUS_DROP_COUNT = 52;

function VenusRain({ onDismiss }) {
  const overlayRef = React.useRef(null);
  const drops = React.useMemo(() => {
    return Array.from({ length: VENUS_DROP_COUNT }, (_, i) => ({
      id: i,
      x: Math.random() * 97 + 1.5,
      delay: Math.random() * 2.2,
      dur: 0.5 + Math.random() * 0.75,
      w: 2 + Math.random() * 3,
      h: 10 + Math.random() * 16,
    }));
  }, []);

  React.useEffect(() => {
    if (overlayRef.current) overlayRef.current.focus();
    // Hissing acid-rain sound via Web Audio API
    try {
      const ctx = new (window.AudioContext || window.webkitAudioContext)();
      const dur = 2.4;
      const sr = ctx.sampleRate;
      const buf = ctx.createBuffer(1, Math.floor(sr * dur), sr);
      const data = buf.getChannelData(0);
      for (let i = 0; i < data.length; i++) {
        const env =
          Math.min(1, (data.length - i) / (sr * 0.55)) *
          Math.min(1, i / (sr * 0.08));
        data[i] = (Math.random() * 2 - 1) * env * 0.32;
      }
      const src = ctx.createBufferSource();
      src.buffer = buf;
      const bpf = ctx.createBiquadFilter();
      bpf.type = "bandpass";
      bpf.frequency.value = 4200;
      bpf.Q.value = 0.7;
      const gain = ctx.createGain();
      gain.gain.setValueAtTime(1, ctx.currentTime);
      gain.gain.linearRampToValueAtTime(0, ctx.currentTime + dur);
      src.connect(bpf);
      bpf.connect(gain);
      gain.connect(ctx.destination);
      src.start();
      setTimeout(
        () => {
          try {
            ctx.close();
          } catch (_) {}
        },
        (dur + 0.6) * 1000,
      );
    } catch (_) {}

    const t = setTimeout(() => onDismiss && onDismiss(), 3600);
    return () => clearTimeout(t);
  }, [onDismiss]);
  const handleKeyDown = (event) => {
    if (event.key !== "Escape") return;
    event.preventDefault();
    event.stopPropagation();
    if (onDismiss) onDismiss();
  };

  return (
    <div
      ref={overlayRef}
      className="venus-rain-overlay"
      onClick={onDismiss}
      role="dialog"
      aria-label="Venus acid rain — tap to dismiss"
      tabIndex="-1"
      onKeyDownCapture={handleKeyDown}
    >
      <div className="venus-rain-banner">
        <span className="venus-rain-clouds">☁️ ☁️ ☁️</span>
        <strong>Venus acid clouds!</strong>
        <span className="venus-rain-fact">
          Venus clouds drip sulfuric acid — harmless up here, fascinating from
          afar
        </span>
        <span className="venus-rain-sequence" aria-label="Venus cloud sequence">
          <b>Clouds</b>
          <b>Acid drops</b>
          <b>Study far away</b>
        </span>
      </div>
      {drops.map((d) => (
        <div
          key={d.id}
          className="venus-rain-drop"
          style={{
            left: `${d.x}%`,
            width: d.w,
            height: d.h,
            animationDelay: `${d.delay}s`,
            animationDuration: `${d.dur}s`,
          }}
        />
      ))}
      <div className="venus-rain-dismiss">tap anywhere to clear</div>
    </div>
  );
}