// Blur Background — full-image Gaussian-style blur (no segmentation).

window.TOOL_HANDLERS['blur-background'] = function BlurTool() {
  const [file, setFile] = React.useState(null);
  const [src, setSrc] = React.useState('');
  const [radius, setRadius] = React.useState(10);
  const [outUrl, setOutUrl] = React.useState('');
  const imgRef = React.useRef(null);

  const handleFile = async (f) => {
    if (!f || !f.type.startsWith('image/')) return;
    const { img, url } = await window.loadImageFromFile(f);
    imgRef.current = img;
    setFile(f); setSrc(url);
  };

  React.useEffect(() => {
    if (!imgRef.current) return;
    const img = imgRef.current;
    const c = document.createElement('canvas');
    c.width = img.width; c.height = img.height;
    const ctx = c.getContext('2d');
    ctx.filter = `blur(${radius}px)`;
    ctx.drawImage(img, 0, 0);
    c.toBlob((blob) => {
      if (!blob) return;
      if (outUrl) URL.revokeObjectURL(outUrl);
      setOutUrl(URL.createObjectURL(blob));
    }, 'image/jpeg', 0.9);
  }, [radius, src]);

  const download = () => {
    if (!outUrl) return;
    const a = document.createElement('a'); a.href = outUrl;
    a.download = file.name.replace(/\.[^.]+$/, '') + '-blurred.jpg'; a.click();
  };

  if (!file) return <window.Dropzone onFile={handleFile} title="Drop an image here" hint="we'll add a soft blur" accept="image/*" />;

  return (
    <div>
      <window.BeforeAfterSlider
        before={src}
        after={outUrl || src}
        labelBefore="Original"
        labelAfter={`Blur ${radius}px`}
      />
      <div className="cmp-slider-row">
        <div className="cmp-label"><span>Blur strength</span><span className="val">{radius}px</span></div>
        <input type="range" min="1" max="40" value={radius} onChange={(e) => setRadius(+e.target.value)} className="cmp-slider" />
      </div>
      <div className="cmp-actions">
        <button className="btn btn-secondary" onClick={() => { setFile(null); setSrc(''); setOutUrl(''); }}><window.Icon name="upload" size={16} /> Another</button>
        <button className="btn btn-primary" onClick={download}><window.Icon name="download" size={16} /> Download JPG</button>
      </div>
    </div>
  );
};