import * as pdfjsLib from 'pdfjs-dist'
import pdfWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
import type { Worker } from 'tesseract.js'

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker

type RegionType = 'ocr' | 'barcode' | 'ignore'
type RegionTarget =
  | 'palletCard'
  | 'origin'
  | 'variety'
  | 'brand'
  | 'class'
  | 'base'
  | 'pack'
  | 'grower'
  | 'packrun'
  | 'size'
  | 'qty'
  | 'pickDate'
  | 'packDate'
  | 'total'
  | 'custom'

type Box = { x: number; y: number; w: number; h: number }

type RegionSettings = {
  psm: '3' | '6' | '7' | '11'
  grayscale: boolean
  contrast: number
  threshold: number
  whitelist: string
  barcodeFormats: string[]
  firstMatch: boolean
}

type RefinementRegion = {
  id: string
  name: string
  type: RegionType
  target: RegionTarget
  enabled: boolean
  box: Box
  settings: RegionSettings
  lastText?: string
  confidence?: number
}

type RefinementProfile = {
  schemaVersion: 1
  id: string
  name: string
  revision: number
  savedAt?: string
  page: {
    rotation: 0 | 90 | 180 | 270
    renderDpi: number
    zoom: number
  }
  regions: RefinementRegion[]
}

type RecentCapture = {
  name: string
  mime: string
  dataBase64: string
}

async function loadPdf(data: ArrayBuffer) {
  return pdfjsLib.getDocument({ data }).promise
}

type LoadedPdf = Awaited<ReturnType<typeof loadPdf>>

type DocumentSource =
  | { kind: 'pdf'; name: string; document: LoadedPdf }
  | { kind: 'image'; name: string; bitmap: ImageBitmap }

const TARGET_OPTIONS: Array<{ value: RegionTarget; label: string }> = [
  { value: 'palletCard', label: 'Pallet card block' },
  { value: 'origin', label: 'Origin' },
  { value: 'variety', label: 'Variety' },
  { value: 'brand', label: 'Brand' },
  { value: 'class', label: 'Class' },
  { value: 'base', label: 'Base' },
  { value: 'pack', label: 'Pack' },
  { value: 'grower', label: 'Grower' },
  { value: 'packrun', label: 'Packrun' },
  { value: 'size', label: 'Size' },
  { value: 'qty', label: 'Qty' },
  { value: 'pickDate', label: 'Pick date' },
  { value: 'packDate', label: 'Pack date' },
  { value: 'total', label: 'Total' },
  { value: 'custom', label: 'Custom text' },
]

const DEFAULT_SETTINGS: RegionSettings = {
  psm: '6',
  grayscale: true,
  contrast: 1.5,
  threshold: 0,
  whitelist: '',
  barcodeFormats: ['CODE_128'],
  firstMatch: true,
}

function defaultProfile(): RefinementProfile {
  return {
    schemaVersion: 1,
    id: 'avocado-pallet-card',
    name: 'Avocado pallet card',
    revision: 0,
    page: { rotation: 0, renderDpi: 200, zoom: 0.82 },
    regions: [],
  }
}

function cloneSettings(): RegionSettings {
  return {
    ...DEFAULT_SETTINGS,
    barcodeFormats: [...DEFAULT_SETTINGS.barcodeFormats],
  }
}

function clamp(value: number, min = 0, max = 1) {
  return Math.max(min, Math.min(max, value))
}

function decodeBase64(value: string) {
  const binary = atob(value)
  const bytes = new Uint8Array(binary.length)
  for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index)
  return bytes
}

function escapeHtml(value: string) {
  return value.replace(/[&<>"']/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }[char]!))
}

let ocrWorkerPromise: Promise<Worker> | null = null

async function getOcrWorker(updateStatus: (message: string) => void) {
  if (!ocrWorkerPromise) {
    ocrWorkerPromise = (async () => {
      const { createWorker, OEM } = await import('tesseract.js')
      return createWorker('eng', OEM.LSTM_ONLY, {
        logger: (message) => {
          if (typeof message.progress === 'number') {
            updateStatus((message.status || 'OCR') + ' · ' + Math.round(message.progress * 100) + '%')
          } else if (message.status) {
            updateStatus(message.status)
          }
        },
      })
    })().catch((error) => {
      ocrWorkerPromise = null
      throw error
    })
  }
  return ocrWorkerPromise
}

export function initOcrRefinement(root: HTMLElement, invoke: <T>(command: string, args?: Record<string, unknown>) => Promise<T>) {
  root.innerHTML = [
    '<div class="ocr-workbench">',
      '<section class="card ocr-toolbar-card">',
        '<div class="ocr-toolbar">',
          '<div class="ocr-profile-title">',
            '<span class="eyebrow">OCR REFINEMENT</span>',
            '<div class="ocr-profile-row">',
              '<input id="ocr-profile-name" value="Avocado pallet card" aria-label="OCR profile name" />',
              '<span id="ocr-profile-version" class="profile-version">v1 · unsaved</span>',
            '</div>',
          '</div>',
          '<div class="inline-actions">',
            '<input id="ocr-file-input" type="file" accept="application/pdf,image/png,image/jpeg,image/webp" hidden />',
            '<button class="btn ghost" id="ocr-load-document" type="button">Load document</button>',
            '<button class="btn ghost" id="ocr-load-recent" type="button">Use recent capture</button>',
            '<button class="btn ghost" id="ocr-rotate" type="button">Rotate 90°</button>',
            '<button class="btn primary" id="ocr-save-profile" type="button">Save profile</button>',
            '<button class="btn blue" id="ocr-run-all" type="button">Run all</button>',
          '</div>',
        '</div>',
        '<div class="ocr-document-meta">',
          '<span id="ocr-document-name">No document loaded</span>',
          '<label>Zoom <input id="ocr-zoom" type="range" min="0.35" max="1.5" step="0.05" value="0.82" /></label>',
          '<label>DPI <select id="ocr-dpi"><option>150</option><option selected>200</option><option>250</option><option>300</option></select></label>',
          '<span id="ocr-status">Load a PDF or image, then draw target regions.</span>',
        '</div>',
      '</section>',
      '<div class="ocr-layout">',
        '<aside class="card ocr-regions-card">',
          '<div class="card-head"><div><span class="eyebrow">REGIONS</span><h2>Target areas</h2></div><span id="ocr-region-count" class="muted">0</span></div>',
          '<div class="card-body ocr-region-sidebar">',
            '<div class="ocr-add-region">',
              '<button class="btn ghost" data-add-region="ocr" type="button">+ OCR area</button>',
              '<button class="btn ghost" data-add-region="barcode" type="button">+ Barcode</button>',
              '<button class="btn ghost" data-add-region="ignore" type="button">+ Ignore</button>',
            '</div>',
            '<div id="ocr-region-list" class="ocr-region-list"></div>',
            '<div class="ocr-region-help">Choose a type, then drag a box over the document. Coordinates are stored relative to the whole page.</div>',
          '</div>',
        '</aside>',
        '<section class="card ocr-preview-card">',
          '<div class="card-head">',
            '<div><span class="eyebrow">DOCUMENT</span><h2>Preview & box drawer</h2></div>',
            '<span id="ocr-draw-mode" class="muted">Select “+ OCR area” to draw</span>',
          '</div>',
          '<div class="ocr-preview-scroll" id="ocr-preview-scroll">',
            '<div class="ocr-preview-empty" id="ocr-preview-empty"><strong>No document loaded</strong><span>Load the production PDF, a screenshot, or the most recent captured document.</span></div>',
            '<div class="ocr-page-frame" id="ocr-page-frame" hidden>',
              '<canvas id="ocr-document-canvas"></canvas>',
              '<div id="ocr-overlay" class="ocr-overlay"></div>',
            '</div>',
          '</div>',
        '</section>',
        '<aside class="card ocr-settings-card">',
          '<div class="card-head"><div><span class="eyebrow">SELECTION</span><h2>Region settings</h2></div><button id="ocr-delete-region" class="btn ghost danger" type="button" disabled>Delete</button></div>',
          '<div class="card-body ocr-settings-body">',
            '<div id="ocr-no-selection" class="ocr-no-selection">Select or draw a region to tune its settings.</div>',
            '<div id="ocr-selection-settings" hidden>',
              '<div class="ocr-setting-grid">',
                '<label>Name<input id="ocr-region-name" /></label>',
                '<label>Type<select id="ocr-region-type"><option value="ocr">OCR</option><option value="barcode">Barcode</option><option value="ignore">Ignore</option></select></label>',
                '<label class="full">Target<select id="ocr-region-target"></select></label>',
              '</div>',
              '<div id="ocr-ocr-settings" class="ocr-setting-section">',
                '<label>Page segmentation<select id="ocr-psm"><option value="3">Auto</option><option value="6">Single block</option><option value="7">Single line</option><option value="11">Sparse text</option></select></label>',
                '<label class="ocr-check"><input id="ocr-grayscale" type="checkbox" /> Grayscale</label>',
                '<label>Contrast <span id="ocr-contrast-value">1.5×</span><input id="ocr-contrast" type="range" min="0.8" max="2.5" step="0.1" /></label>',
                '<label>Threshold <span id="ocr-threshold-value">Off</span><input id="ocr-threshold" type="range" min="0" max="240" step="5" /></label>',
                '<label>Character whitelist<input id="ocr-whitelist" placeholder="Optional, e.g. 0123456789/" /></label>',
              '</div>',
              '<div id="ocr-barcode-settings" class="ocr-setting-section" hidden>',
                '<label>Formats<input id="ocr-barcode-formats" value="CODE_128" /></label>',
                '<label class="ocr-check"><input id="ocr-first-match" type="checkbox" /> First valid barcode is enough</label>',
              '</div>',
              '<div class="ocr-coordinates" id="ocr-coordinates"></div>',
              '<div class="actions"><button class="btn blue" id="ocr-run-region" type="button">Run region</button><button class="btn ghost" id="ocr-copy-region" type="button">Duplicate</button></div>',
              '<div class="ocr-crop-panel">',
                '<div class="ocr-crop-head"><strong>Processed crop</strong><span id="ocr-confidence" class="muted"></span></div>',
                '<canvas id="ocr-region-preview"></canvas>',
              '</div>',
              '<div class="ocr-output-panel">',
                '<div class="ocr-crop-head"><strong>Raw OCR</strong><span id="ocr-region-status" class="muted">Not run</span></div>',
                '<pre id="ocr-raw-output">—</pre>',
              '</div>',
            '</div>',
          '</div>',
        '</aside>',
      '</div>',
    '</div>',
  ].join('')

  const byId = <T extends HTMLElement>(id: string) => root.querySelector<T>('#' + id)!
  const canvas = byId<HTMLCanvasElement>('ocr-document-canvas')
  const overlay = byId<HTMLDivElement>('ocr-overlay')
  const pageFrame = byId<HTMLDivElement>('ocr-page-frame')
  const previewEmpty = byId<HTMLDivElement>('ocr-preview-empty')
  const cropCanvas = byId<HTMLCanvasElement>('ocr-region-preview')
  const profileNameInput = byId<HTMLInputElement>('ocr-profile-name')
  const regionTargetSelect = byId<HTMLSelectElement>('ocr-region-target')
  regionTargetSelect.innerHTML = TARGET_OPTIONS.map((option) => '<option value="' + option.value + '">' + option.label + '</option>').join('')

  let profile = defaultProfile()
  let source: DocumentSource | null = null
  let selectedId: string | null = null
  let pendingDrawType: RegionType | null = null
  let dragState: {
    kind: 'draw' | 'move' | 'resize'
    regionId: string
    startX: number
    startY: number
    initial: Box
  } | null = null
  let renderGeneration = 0

  function selectedRegion() {
    return profile.regions.find((region) => region.id === selectedId) ?? null
  }

  function setStatus(message: string) {
    byId('ocr-status').textContent = message
  }

  function normalizeProfile(value: unknown): RefinementProfile {
    if (!value || typeof value !== 'object') return defaultProfile()
    const candidate = value as Partial<RefinementProfile>
    if (candidate.schemaVersion !== 1 || !Array.isArray(candidate.regions)) return defaultProfile()
    return {
      ...defaultProfile(),
      ...candidate,
      page: { ...defaultProfile().page, ...candidate.page },
      regions: candidate.regions.map((region) => ({
        ...region,
        settings: {
          ...cloneSettings(),
          ...region.settings,
          barcodeFormats: [...(region.settings?.barcodeFormats ?? DEFAULT_SETTINGS.barcodeFormats)],
        },
      })),
    } as RefinementProfile
  }

  function updateProfileHeader() {
    profileNameInput.value = profile.name
    const version = byId('ocr-profile-version')
    version.textContent = profile.revision > 0
      ? 'v1 · revision ' + profile.revision
      : 'v1 · unsaved'
    byId<HTMLInputElement>('ocr-zoom').value = String(profile.page.zoom)
    byId<HTMLSelectElement>('ocr-dpi').value = String(profile.page.renderDpi)
  }

  async function renderDocument() {
    if (!source) return
    const generation = ++renderGeneration
    const context = canvas.getContext('2d')
    if (!context) return

    if (source.kind === 'pdf') {
      const page = await source.document.getPage(1)
      if (generation !== renderGeneration) return
      const pointsPerInch = 72
      const scale = profile.page.renderDpi / pointsPerInch
      const viewport = page.getViewport({ scale, rotation: profile.page.rotation })
      const maxDimension = 1600
      const renderScale = Math.min(1, maxDimension / Math.max(viewport.width, viewport.height))
      const finalViewport = page.getViewport({
        scale: scale * renderScale,
        rotation: profile.page.rotation,
      })
      canvas.width = Math.max(1, Math.round(finalViewport.width))
      canvas.height = Math.max(1, Math.round(finalViewport.height))
      await page.render({ canvasContext: context, viewport: finalViewport }).promise
    } else {
      const bitmap = source.bitmap
      const rotated = profile.page.rotation === 90 || profile.page.rotation === 270
      const maxDimension = 1600
      const scale = Math.min(1, maxDimension / Math.max(bitmap.width, bitmap.height))
      const sourceWidth = bitmap.width * scale
      const sourceHeight = bitmap.height * scale
      canvas.width = Math.max(1, Math.round(rotated ? sourceHeight : sourceWidth))
      canvas.height = Math.max(1, Math.round(rotated ? sourceWidth : sourceHeight))
      context.clearRect(0, 0, canvas.width, canvas.height)
      context.save()
      if (profile.page.rotation === 90) {
        context.translate(canvas.width, 0)
        context.rotate(Math.PI / 2)
      } else if (profile.page.rotation === 180) {
        context.translate(canvas.width, canvas.height)
        context.rotate(Math.PI)
      } else if (profile.page.rotation === 270) {
        context.translate(0, canvas.height)
        context.rotate(-Math.PI / 2)
      }
      context.drawImage(bitmap, 0, 0, sourceWidth, sourceHeight)
      context.restore()
    }

    pageFrame.hidden = false
    previewEmpty.hidden = true
    applyZoom()
    renderRegions()
    updateCropPreview()
  }

  function applyZoom() {
    if (!canvas.width || !canvas.height) return
    const width = canvas.width * profile.page.zoom
    const height = canvas.height * profile.page.zoom
    canvas.style.width = width + 'px'
    canvas.style.height = height + 'px'
    overlay.style.width = width + 'px'
    overlay.style.height = height + 'px'
    pageFrame.style.width = width + 'px'
    pageFrame.style.height = height + 'px'
  }

  async function loadBlob(blob: Blob, name: string) {
    setStatus('Loading ' + name + '…')
    selectedId = null
    if (source?.kind === 'image') source.bitmap.close()

    if (blob.type === 'application/pdf' || name.toLowerCase().endsWith('.pdf')) {
      source = { kind: 'pdf', name, document: await loadPdf(await blob.arrayBuffer()) }
    } else if (blob.type.startsWith('image/')) {
      source = { kind: 'image', name, bitmap: await createImageBitmap(blob) }
    } else {
      throw new Error('Use a PDF, PNG, JPEG or WebP document.')
    }

    byId('ocr-document-name').textContent = name
    setStatus('Document loaded. Draw or adjust target regions.')
    await renderDocument()
  }

  function overlayPoint(event: PointerEvent) {
    const rect = overlay.getBoundingClientRect()
    return {
      x: clamp((event.clientX - rect.left) / rect.width),
      y: clamp((event.clientY - rect.top) / rect.height),
    }
  }

  function newRegion(type: RegionType, box: Box): RefinementRegion {
    const number = profile.regions.filter((region) => region.type === type).length + 1
    return {
      id: crypto.randomUUID(),
      name: type === 'ocr' ? 'OCR area ' + number : type === 'barcode' ? 'Barcode area ' + number : 'Ignore area ' + number,
      type,
      target: type === 'ocr' ? 'palletCard' : 'custom',
      enabled: true,
      box,
      settings: cloneSettings(),
    }
  }

  function beginDraw(type: RegionType) {
    if (!source) {
      setStatus('Load a document before drawing regions.')
      return
    }
    pendingDrawType = type
    byId('ocr-draw-mode').textContent = 'Drawing ' + type + ' region · drag on document'
    overlay.classList.add('drawing')
  }

  function renderRegions() {
    overlay.innerHTML = ''
    for (const region of profile.regions) {
      if (!region.enabled) continue
      const node = document.createElement('div')
      node.className = 'ocr-region-box type-' + region.type + (region.id === selectedId ? ' selected' : '')
      node.dataset.regionId = region.id
      node.style.left = (region.box.x * 100) + '%'
      node.style.top = (region.box.y * 100) + '%'
      node.style.width = (region.box.w * 100) + '%'
      node.style.height = (region.box.h * 100) + '%'
      const label = document.createElement('span')
      label.textContent = region.name
      node.append(label)
      const handle = document.createElement('i')
      handle.className = 'ocr-resize-handle'
      node.append(handle)

      node.addEventListener('pointerdown', (event) => {
        if (pendingDrawType) return
        event.preventDefault()
        event.stopPropagation()
        selectedId = region.id
        const point = overlayPoint(event)
        dragState = {
          kind: event.target === handle ? 'resize' : 'move',
          regionId: region.id,
          startX: point.x,
          startY: point.y,
          initial: { ...region.box },
        }
        overlay.setPointerCapture(event.pointerId)
        renderRegions()
        renderRegionList()
        renderSelectedSettings()
      })
      overlay.append(node)
    }
  }

  function renderRegionList() {
    const list = byId('ocr-region-list')
    byId('ocr-region-count').textContent = String(profile.regions.length)
    if (!profile.regions.length) {
      list.innerHTML = '<div class="ocr-region-list-empty">No regions yet.</div>'
      return
    }

    list.innerHTML = profile.regions.map((region) => {
      const result = region.lastText
        ? '<span class="region-result-ok">' + Math.round(region.confidence ?? 0) + '%</span>'
        : ''
      return [
        '<button type="button" class="ocr-region-item ' + (region.id === selectedId ? 'active' : '') + '" data-region-select="' + region.id + '">',
          '<span class="region-kind type-' + region.type + '"></span>',
          '<span><strong>' + escapeHtml(region.name) + '</strong><small>' + escapeHtml(region.type === 'ocr' ? region.target : region.type) + '</small></span>',
          result,
        '</button>',
      ].join('')
    }).join('')

    list.querySelectorAll<HTMLButtonElement>('[data-region-select]').forEach((button) => {
      button.addEventListener('click', () => {
        selectedId = button.dataset.regionSelect ?? null
        renderRegions()
        renderRegionList()
        renderSelectedSettings()
      })
    })
  }

  function renderSelectedSettings() {
    const region = selectedRegion()
    byId<HTMLButtonElement>('ocr-delete-region').disabled = !region
    byId('ocr-no-selection').hidden = Boolean(region)
    byId('ocr-selection-settings').hidden = !region
    if (!region) {
      cropCanvas.width = 1
      cropCanvas.height = 1
      return
    }

    byId<HTMLInputElement>('ocr-region-name').value = region.name
    byId<HTMLSelectElement>('ocr-region-type').value = region.type
    regionTargetSelect.value = region.target
    byId<HTMLSelectElement>('ocr-psm').value = region.settings.psm
    byId<HTMLInputElement>('ocr-grayscale').checked = region.settings.grayscale
    byId<HTMLInputElement>('ocr-contrast').value = String(region.settings.contrast)
    byId<HTMLInputElement>('ocr-threshold').value = String(region.settings.threshold)
    byId<HTMLInputElement>('ocr-whitelist').value = region.settings.whitelist
    byId<HTMLInputElement>('ocr-barcode-formats').value = region.settings.barcodeFormats.join(', ')
    byId<HTMLInputElement>('ocr-first-match').checked = region.settings.firstMatch
    byId('ocr-contrast-value').textContent = region.settings.contrast.toFixed(1) + '×'
    byId('ocr-threshold-value').textContent = region.settings.threshold > 0 ? String(region.settings.threshold) : 'Off'
    byId('ocr-ocr-settings').hidden = region.type !== 'ocr'
    byId('ocr-barcode-settings').hidden = region.type !== 'barcode'
    regionTargetSelect.closest('label')!.toggleAttribute('hidden', region.type !== 'ocr')
    byId('ocr-coordinates').textContent =
      'x ' + (region.box.x * 100).toFixed(1) + '% · y ' + (region.box.y * 100).toFixed(1) +
      '% · w ' + (region.box.w * 100).toFixed(1) + '% · h ' + (region.box.h * 100).toFixed(1) + '%'
    byId('ocr-confidence').textContent = region.confidence === undefined ? '' : Math.round(region.confidence) + '% confidence'
    byId('ocr-raw-output').textContent = region.lastText || '—'
    byId('ocr-region-status').textContent = region.lastText ? 'Last result' : 'Not run'
    updateCropPreview()
  }

  function updateCropPreview() {
    const region = selectedRegion()
    if (!region || !canvas.width || !canvas.height) return

    const sx = Math.max(0, Math.floor(region.box.x * canvas.width))
    const sy = Math.max(0, Math.floor(region.box.y * canvas.height))
    const sw = Math.max(1, Math.floor(region.box.w * canvas.width))
    const sh = Math.max(1, Math.floor(region.box.h * canvas.height))
    const maxWidth = 520
    const scale = Math.min(1, maxWidth / sw)
    cropCanvas.width = Math.max(1, Math.round(sw * scale))
    cropCanvas.height = Math.max(1, Math.round(sh * scale))
    const context = cropCanvas.getContext('2d', { willReadFrequently: true })
    if (!context) return
    context.clearRect(0, 0, cropCanvas.width, cropCanvas.height)
    context.filter = (region.settings.grayscale ? 'grayscale(1) ' : '') + 'contrast(' + region.settings.contrast + ')'
    context.drawImage(canvas, sx, sy, sw, sh, 0, 0, cropCanvas.width, cropCanvas.height)
    context.filter = 'none'

    if (region.settings.threshold > 0) {
      const image = context.getImageData(0, 0, cropCanvas.width, cropCanvas.height)
      for (let index = 0; index < image.data.length; index += 4) {
        const luminance = image.data[index] * 0.299 + image.data[index + 1] * 0.587 + image.data[index + 2] * 0.114
        const value = luminance >= region.settings.threshold ? 255 : 0
        image.data[index] = value
        image.data[index + 1] = value
        image.data[index + 2] = value
      }
      context.putImageData(image, 0, 0)
    }
  }

  function updateRegionFromControls() {
    const region = selectedRegion()
    if (!region) return
    region.name = byId<HTMLInputElement>('ocr-region-name').value.trim() || region.name
    region.type = byId<HTMLSelectElement>('ocr-region-type').value as RegionType
    region.target = regionTargetSelect.value as RegionTarget
    region.settings.psm = byId<HTMLSelectElement>('ocr-psm').value as RegionSettings['psm']
    region.settings.grayscale = byId<HTMLInputElement>('ocr-grayscale').checked
    region.settings.contrast = Number(byId<HTMLInputElement>('ocr-contrast').value)
    region.settings.threshold = Number(byId<HTMLInputElement>('ocr-threshold').value)
    region.settings.whitelist = byId<HTMLInputElement>('ocr-whitelist').value
    region.settings.barcodeFormats = byId<HTMLInputElement>('ocr-barcode-formats').value
      .split(',')
      .map((value) => value.trim().toUpperCase())
      .filter(Boolean)
    region.settings.firstMatch = byId<HTMLInputElement>('ocr-first-match').checked
    renderRegions()
    renderRegionList()
    renderSelectedSettings()
  }

  async function runRegion(regionId: string) {
    const region = profile.regions.find((candidate) => candidate.id === regionId)
    if (!region || !region.enabled) return
    selectedId = region.id
    renderRegions()
    renderRegionList()
    renderSelectedSettings()
    updateCropPreview()

    if (region.type !== 'ocr') {
      byId('ocr-region-status').textContent = region.type === 'barcode'
        ? 'Preview ready · production barcode decoder handles this region'
        : 'Ignored region'
      return
    }

    const status = byId('ocr-region-status')
    status.textContent = 'Preparing OCR…'
    try {
      const worker = await getOcrWorker((message) => { status.textContent = message })
      const { PSM } = await import('tesseract.js')
      const psm = {
        '3': PSM.AUTO,
        '6': PSM.SINGLE_BLOCK,
        '7': PSM.SINGLE_LINE,
        '11': PSM.SPARSE_TEXT,
      }[region.settings.psm]
      await worker.setParameters({
        tessedit_pageseg_mode: psm,
        tessedit_char_whitelist: region.settings.whitelist,
        preserve_interword_spaces: '1',
      })
      const result = await worker.recognize(cropCanvas)
      region.lastText = result.data.text.trim()
      region.confidence = result.data.confidence
      status.textContent = 'OCR complete'
      renderRegionList()
      renderSelectedSettings()
    } catch (error) {
      status.textContent = 'OCR failed'
      setStatus('OCR failed: ' + String(error))
    }
  }

  async function loadSavedProfile() {
    try {
      const saved = await invoke<unknown>('load_ocr_profile')
      if (saved) profile = normalizeProfile(saved)
    } catch {
      profile = defaultProfile()
    }
    updateProfileHeader()
    renderRegionList()
    renderSelectedSettings()
  }

  byId<HTMLButtonElement>('ocr-load-document').addEventListener('click', () => byId<HTMLInputElement>('ocr-file-input').click())
  byId<HTMLInputElement>('ocr-file-input').addEventListener('change', (event) => {
    const file = (event.currentTarget as HTMLInputElement).files?.[0]
    if (!file) return
    void loadBlob(file, file.name).catch((error) => setStatus('Document load failed: ' + String(error)))
  })

  byId<HTMLButtonElement>('ocr-load-recent').addEventListener('click', () => {
    setStatus('Loading most recent captured document…')
    void invoke<RecentCapture>('get_recent_capture')
      .then((capture) => loadBlob(new Blob([decodeBase64(capture.dataBase64)], { type: capture.mime }), capture.name))
      .catch((error) => setStatus('Recent capture unavailable: ' + String(error)))
  })

  byId<HTMLButtonElement>('ocr-rotate').addEventListener('click', () => {
    profile.page.rotation = ((profile.page.rotation + 90) % 360) as RefinementProfile['page']['rotation']
    void renderDocument()
  })

  byId<HTMLInputElement>('ocr-zoom').addEventListener('input', (event) => {
    profile.page.zoom = Number((event.currentTarget as HTMLInputElement).value)
    applyZoom()
  })

  byId<HTMLSelectElement>('ocr-dpi').addEventListener('change', (event) => {
    profile.page.renderDpi = Number((event.currentTarget as HTMLSelectElement).value)
    void renderDocument()
  })

  root.querySelectorAll<HTMLButtonElement>('[data-add-region]').forEach((button) => {
    button.addEventListener('click', () => beginDraw(button.dataset.addRegion as RegionType))
  })

  overlay.addEventListener('pointerdown', (event) => {
    if (!pendingDrawType) {
      if (event.target === overlay) {
        selectedId = null
        renderRegions()
        renderRegionList()
        renderSelectedSettings()
      }
      return
    }

    event.preventDefault()
    event.stopPropagation()
    const point = overlayPoint(event)
    const region = newRegion(pendingDrawType, { x: point.x, y: point.y, w: 0.001, h: 0.001 })
    profile.regions.push(region)
    selectedId = region.id
    dragState = {
      kind: 'draw',
      regionId: region.id,
      startX: point.x,
      startY: point.y,
      initial: { ...region.box },
    }
    pendingDrawType = null
    overlay.classList.remove('drawing')
    byId('ocr-draw-mode').textContent = 'Drag to move · lower-right handle to resize'
    overlay.setPointerCapture(event.pointerId)
    renderRegions()
    renderRegionList()
    renderSelectedSettings()
  }, true)

  overlay.addEventListener('pointermove', (event) => {
    if (!dragState) return
    const region = profile.regions.find((candidate) => candidate.id === dragState?.regionId)
    if (!region) return
    const point = overlayPoint(event)
    const dx = point.x - dragState.startX
    const dy = point.y - dragState.startY

    if (dragState.kind === 'draw') {
      region.box.x = Math.min(dragState.startX, point.x)
      region.box.y = Math.min(dragState.startY, point.y)
      region.box.w = Math.max(0.005, Math.abs(point.x - dragState.startX))
      region.box.h = Math.max(0.005, Math.abs(point.y - dragState.startY))
    } else if (dragState.kind === 'move') {
      region.box.x = clamp(dragState.initial.x + dx, 0, 1 - region.box.w)
      region.box.y = clamp(dragState.initial.y + dy, 0, 1 - region.box.h)
    } else {
      region.box.w = clamp(dragState.initial.w + dx, 0.01, 1 - region.box.x)
      region.box.h = clamp(dragState.initial.h + dy, 0.01, 1 - region.box.y)
    }
    renderRegions()
    renderSelectedSettings()
  })

  overlay.addEventListener('pointerup', () => {
    dragState = null
    updateCropPreview()
  })
  overlay.addEventListener('pointercancel', () => { dragState = null })

  const controlIds = [
    'ocr-region-name',
    'ocr-region-type',
    'ocr-region-target',
    'ocr-psm',
    'ocr-grayscale',
    'ocr-contrast',
    'ocr-threshold',
    'ocr-whitelist',
    'ocr-barcode-formats',
    'ocr-first-match',
  ]
  controlIds.forEach((id) => {
    byId(id).addEventListener('input', updateRegionFromControls)
    byId(id).addEventListener('change', updateRegionFromControls)
  })

  byId<HTMLButtonElement>('ocr-delete-region').addEventListener('click', () => {
    if (!selectedId) return
    profile.regions = profile.regions.filter((region) => region.id !== selectedId)
    selectedId = null
    renderRegions()
    renderRegionList()
    renderSelectedSettings()
  })

  byId<HTMLButtonElement>('ocr-copy-region').addEventListener('click', () => {
    const region = selectedRegion()
    if (!region) return
    const copy: RefinementRegion = {
      ...region,
      id: crypto.randomUUID(),
      name: region.name + ' copy',
      box: {
        x: clamp(region.box.x + 0.02, 0, 1 - region.box.w),
        y: clamp(region.box.y + 0.02, 0, 1 - region.box.h),
        w: region.box.w,
        h: region.box.h,
      },
      settings: { ...region.settings, barcodeFormats: [...region.settings.barcodeFormats] },
      lastText: undefined,
      confidence: undefined,
    }
    profile.regions.push(copy)
    selectedId = copy.id
    renderRegions()
    renderRegionList()
    renderSelectedSettings()
  })

  byId<HTMLButtonElement>('ocr-run-region').addEventListener('click', () => {
    if (selectedId) void runRegion(selectedId)
  })

  byId<HTMLButtonElement>('ocr-run-all').addEventListener('click', async () => {
    const runnable = profile.regions.filter((region) => region.enabled && region.type === 'ocr')
    if (!source) {
      setStatus('Load a document before running OCR.')
      return
    }
    if (!runnable.length) {
      setStatus('Draw at least one OCR region first.')
      return
    }
    setStatus('Running ' + runnable.length + ' OCR region' + (runnable.length === 1 ? '' : 's') + '…')
    for (const region of runnable) await runRegion(region.id)
    setStatus('OCR pass complete. Review each region result, then save the profile.')
  })

  byId<HTMLButtonElement>('ocr-save-profile').addEventListener('click', async () => {
    profile.name = profileNameInput.value.trim() || 'OCR profile'
    const next = {
      ...profile,
      revision: profile.revision + 1,
      savedAt: new Date().toISOString(),
    }
    setStatus('Saving OCR profile…')
    try {
      const saved = await invoke<RefinementProfile>('save_ocr_profile', { profile: next })
      profile = normalizeProfile(saved)
      updateProfileHeader()
      setStatus('Profile saved. Region coordinates and OCR settings are persisted locally.')
    } catch (error) {
      setStatus('Profile save failed: ' + String(error))
    }
  })

  void loadSavedProfile()
}