import { useEffect, useRef } from 'react';
import { EffectEngine } from '../effects/effect-engine';
import { useAppearance } from '../appearance/appearance-store';

export function EffectLayer() {
  const ref = useRef<HTMLCanvasElement>(null);
  const engineRef = useRef<EffectEngine | null>(null);
  const effect = useAppearance(s => s.effect);
  const accent = useAppearance(s => s.draft.accent);

  // 建引擎一次
  useEffect(() => {
    if (!ref.current) return;
    const eng = new EffectEngine();
    eng.attach(ref.current);
    engineRef.current = eng;
    return () => eng.detach();
  }, []);

  // effect/accent 变化时同步引擎（FR-A11 接线）
  useEffect(() => {
    const eng = engineRef.current;
    if (!eng) return;
    eng.setColor(accent);
    eng.setType(effect);
  }, [effect, accent]);

  return <canvas ref={ref} data-effect={effect} style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 9999 }} />;
}