breakpilot-lehrer/admin-lehrer/components/ocr-overlay/useSlideWordPositions.ts

import { useEffect, useState } from 'react'
import type { GridCell } from '@/app/(admin)/ai/ocr-overlay/types'

export interface WordPosition {
  xPct: number
  wPct: number
  text: string
  fontRatio: number
}

/**
 * "Slide from left" positioning algorithm.
 *
 * Takes ALL recognised words per cell and slides them left-to-right across
 * the row's dark-pixel projection until each word "locks" onto its ink.
 *
 * Key design: font size is determined GLOBALLY (median cell height),
 * NOT per-token.  The slide only determines the x-position.  Token width
 * is derived from the global font size + canvas measureText, ensuring
 * consistent sizing across all cells.
 *
 * Algorithm per cell:
 * 1. Build horizontal dark-pixel projection.
 * 2. Find dark-pixel clusters (contiguous inked regions).
 * 3. Split cell text into tokens.
 * 4. Compute a global scale: median cell height → reference font → pixel widths.
 * 5. For each token, slide from cursor position until ink coverage is found.
 * 6. Place token at that x with width from measureText * globalScale.
 *
 * Guarantees: no words dropped, no complex matching rules needed.
 */
export function useSlideWordPositions(
  imageUrl: string,
  cells: GridCell[],
  active: boolean,
  rotation: 0 | 180 = 0,
): Map<string, WordPosition[]> {
  const [result, setResult] = useState<Map<string, WordPosition[]>>(new Map())

  useEffect(() => {
    if (!active || cells.length === 0 || !imageUrl) return

    const img = new Image()
    img.crossOrigin = 'anonymous'
    img.onload = () => {
      const imgW = img.naturalWidth
      const imgH = img.naturalHeight

      const canvas = document.createElement('canvas')
      canvas.width = imgW
      canvas.height = imgH
      const ctx = canvas.getContext('2d')
      if (!ctx) return

      if (rotation === 180) {
        ctx.translate(imgW, imgH)
        ctx.rotate(Math.PI)
        ctx.drawImage(img, 0, 0)
        ctx.setTransform(1, 0, 0, 1, 0, 0)
      } else {
        ctx.drawImage(img, 0, 0)
      }

      const refFontSize = 40
      const fontFam = "'Liberation Sans', Arial, sans-serif"
      ctx.font = `${refFontSize}px ${fontFam}`

      // --- Compute a GLOBAL scale from median cell height ---
      // This ensures all tokens across all cells get the same font size.
      const cellHeights = cells
        .filter(c => c.bbox_pct && c.bbox_pct.h > 0)
        .map(c => Math.round(c.bbox_pct.h / 100 * imgH))
        .sort((a, b) => a - b)
      const medianCh = cellHeights.length > 0
        ? cellHeights[Math.floor(cellHeights.length / 2)]
        : 30

      // Target font size in image pixels = fraction of median cell height.
      // Typical printed text fills ~60-70% of the row height.
      const targetFontPx = medianCh * 0.65
      // globalScale maps measureText pixels (at refFontSize) → image pixels
      const globalScale = targetFontPx / refFontSize
      // fontRatio for the renderer (medianCellHeightPx * fontRatio * fontScale = fontSize)
      // We want autoFontPx = targetFontPx, renderer does medianCh * fontRatio * fontScale
      // with fontScale=0.7 default → fontRatio = targetFontPx / (medianCh * 0.7)
      // But we don't know fontScale here. So just set fontRatio = targetFontPx / medianCh
      // and let the user's fontScale slider adjust.
      const globalFontRatio = Math.min(targetFontPx / medianCh, 1.0)

      const positions = new Map<string, WordPosition[]>()

      for (const cell of cells) {
        if (!cell.bbox_pct || !cell.text) continue

        // --- Cell rectangle in image pixels ---
        let cx: number, cy: number
        const cw = Math.round(cell.bbox_pct.w / 100 * imgW)
        const ch = Math.round(cell.bbox_pct.h / 100 * imgH)

        if (rotation === 180) {
          cx = Math.round((100 - cell.bbox_pct.x - cell.bbox_pct.w) / 100 * imgW)
          cy = Math.round((100 - cell.bbox_pct.y - cell.bbox_pct.h) / 100 * imgH)
        } else {
          cx = Math.round(cell.bbox_pct.x / 100 * imgW)
          cy = Math.round(cell.bbox_pct.y / 100 * imgH)
        }
        if (cw <= 0 || ch <= 0) continue
        if (cx < 0) cx = 0
        if (cy < 0) cy = 0
        if (cx + cw > imgW || cy + ch > imgH) continue

        // --- Dark-pixel projection ---
        const imageData = ctx.getImageData(cx, cy, cw, ch)
        const proj = new Float32Array(cw)
        for (let y = 0; y < ch; y++) {
          for (let x = 0; x < cw; x++) {
            const idx = (y * cw + x) * 4
            const lum = 0.299 * imageData.data[idx] + 0.587 * imageData.data[idx + 1] + 0.114 * imageData.data[idx + 2]
            if (lum < 128) proj[x]++
          }
        }

        const threshold = Math.max(1, ch * 0.03)

        // Binary ink mask
        const ink = new Uint8Array(cw)
        for (let x = 0; x < cw; x++) {
          ink[x] = proj[x] >= threshold ? 1 : 0
        }

        if (rotation === 180) {
          ink.reverse()
        }

        // --- Tokens ---
        const tokens = cell.text.split(/\s+/).filter(Boolean)
        if (tokens.length === 0) continue

        // Token widths in image pixels (using global scale)
        const tokenWidthsPx = tokens.map(t => Math.round(ctx.measureText(t).width * globalScale))
        const spaceWidthPx = Math.round(ctx.measureText(' ').width * globalScale)

        // --- Slide each token left-to-right ---
        const wordPos: WordPosition[] = []
        let cursor = 0

        for (let ti = 0; ti < tokens.length; ti++) {
          const tokenW = Math.max(1, tokenWidthsPx[ti])

          // Find first x from cursor where ≥15% of span has ink
          const coverageNeeded = Math.max(1, Math.round(tokenW * 0.15))
          let bestX = cursor

          // Don't search beyond cell width
          const searchLimit = Math.min(cw - 1, cw - tokenW)

          for (let x = cursor; x <= searchLimit; x++) {
            let inkCount = 0
            const end = Math.min(x + tokenW, cw)
            for (let dx = 0; dx < end - x; dx++) {
              inkCount += ink[x + dx]
            }
            if (inkCount >= coverageNeeded) {
              bestX = x
              break
            }
            // Safety: don't scan more than 40% of cell width past cursor
            // to avoid tokens jumping far right when there's a large gap
            if (x > cursor + cw * 0.4 && ti > 0) {
              bestX = cursor
              break
            }
          }

          // Clamp to cell bounds
          if (bestX + tokenW > cw) {
            bestX = Math.max(0, cw - tokenW)
          }

          // Convert to percentage
          wordPos.push({
            xPct: cell.bbox_pct.x + (bestX / cw) * cell.bbox_pct.w,
            wPct: (tokenW / cw) * cell.bbox_pct.w,
            text: tokens[ti],
            fontRatio: globalFontRatio,
          })

          // Advance cursor: past this token + space
          cursor = bestX + tokenW + spaceWidthPx
        }

        if (wordPos.length > 0) {
          positions.set(cell.cell_id, wordPos)
        }
      }

      setResult(positions)
    }
    img.src = imageUrl
  }, [active, cells, imageUrl, rotation])

  return result
}