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 appearance = useAppearance();
  // M6 骨架：默认关闭，外观面板后续接入选择
  useEffect(() => {
    if (!ref.current) return;
    const eng = new EffectEngine();
    eng.attach(ref.current);
    eng.setColor(appearance.draft.accent);
    eng.setType('off'); // 默认关闭，待外观面板接入开启
    engineRef.current = eng;
    return () => eng.detach();
  }, []);
  return <canvas ref={ref} style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 9999 }} />;
}