// components/MaskLayer.ts
// 2-Layer Rendering: bg = Pattern/Grid, fg = Original * (weiche Maske)

export async function loadImageFromDataUrl(dataUrl: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.crossOrigin = 'anonymous'
    img.onload = () => resolve(img)
    img.onerror = reject
    img.src = dataUrl
  })
}

export async function drawForegroundWithMask(
  fgCanvas: HTMLCanvasElement,
  originalImg: HTMLImageElement,
  maskDataUrl: string,
  blurPx = 2
) {
  const w = (originalImg as any).naturalWidth || originalImg.width
  const h = (originalImg as any).naturalHeight || originalImg.height
  fgCanvas.width = w
  fgCanvas.height = h

  const ctx = fgCanvas.getContext('2d')!
  ctx.clearRect(0, 0, w, h)

  const maskImg = await loadImageFromDataUrl(maskDataUrl)

  // 1) Original zeichnen
  ctx.drawImage(originalImg, 0, 0, w, h)

  // 2) Maske weich anwenden
  ctx.save()
  ctx.globalCompositeOperation = 'destination-in'
  // Achtung: Canvas-Filter wird auf drawImage angewandt
  ctx.filter = blurPx > 0 ? `blur(${blurPx}px)` : 'none'
  ctx.drawImage(maskImg, 0, 0, w, h)
  ctx.restore()
}

type RenderAllParams = {
  bgCanvas: HTMLCanvasElement
  fgCanvas: HTMLCanvasElement
  originalImg: HTMLImageElement
  maskDataUrl: string
  drawPatternFn: (ctx: CanvasRenderingContext2D, w: number, h: number) => void
  drawGroutFn?: (ctx: CanvasRenderingContext2D, w: number, h: number) => void
  overlayAlpha?: number
  blurPx?: number
}

export async function renderAll({
  bgCanvas,
  fgCanvas,
  originalImg,
  maskDataUrl,
  drawPatternFn,
  drawGroutFn,
  overlayAlpha = 0.6,
  blurPx = 2
}: RenderAllParams) {
  const w = (originalImg as any).naturalWidth || originalImg.width
  const h = (originalImg as any).naturalHeight || originalImg.height

  // Hintergrund
  bgCanvas.width = w
  bgCanvas.height = h
  const bg = bgCanvas.getContext('2d')!
  bg.clearRect(0, 0, w, h)

  // Pattern
  bg.save()
  bg.globalAlpha = overlayAlpha
  drawPatternFn(bg, w, h)
  bg.restore()

  // Fugen/Linien
  if (drawGroutFn) drawGroutFn(bg, w, h)

  // Vordergrund
  await drawForegroundWithMask(fgCanvas, originalImg, maskDataUrl, blurPx)
}

export async function drawMaskTint(
  targetCanvas: HTMLCanvasElement,
  maskDataUrl: string,
  tint = 'rgba(255,0,0,0.25)'
) {
  const ctx = targetCanvas.getContext('2d')!
  const w = targetCanvas.width
  const h = targetCanvas.height
  const maskImg = await loadImageFromDataUrl(maskDataUrl)

  // Maske laden und einfärben
  const tmp = document.createElement('canvas')
  tmp.width = w; tmp.height = h
  const tctx = tmp.getContext('2d')!
  tctx.drawImage(maskImg, 0, 0, w, h)
  tctx.globalCompositeOperation = 'source-in'
  tctx.fillStyle = tint
  tctx.fillRect(0, 0, w, h)

  ctx.drawImage(tmp, 0, 0)
}