import { useCallback, useEffect, useRef, useState } from 'react'
import { api } from '../api'
import { navigate } from '../App'
import AnnotationCanvas from '../components/AnnotationCanvas'
import Filmstrip from '../components/Filmstrip'
import { AlertIcon, CheckIcon, XIcon } from '../components/Icons'
import QuickReclassBar from '../components/QuickReclassBar'
import ReviewSidebar from '../components/ReviewSidebar'
import ExemplarFilterPanel from '../components/ExemplarFilterPanel'
import useExemplarPool from '../hooks/useExemplarPool'

// How much bigger the seed box gets for each frame after the first, so the
// object has room to have moved. Hand-tuned, not learned (REQ-189). The box
// always derives from the drawn shape — never from a previous run's result.
const SEED_GROWTH = 1.5

// SAM3 assist wants one normalized [x0, y0, x1, y1] box (REQ-043). A bbox
// shape already is that; a polygon is reduced to its bounding box.
function shapeBox(geometry) {
  const pts = geometry?.points
  if (geometry?.type === 'bbox' && pts?.length === 4) return pts
  if (geometry?.type === 'polygon' && pts?.length) {
    let minX = 1, minY = 1, maxX = 0, maxY = 0
    for (const [x, y] of pts) {
      if (x < minX) minX = x
      if (x > maxX) maxX = x
      if (y < minY) minY = y
      if (y > maxY) maxY = y
    }
    return [minX, minY, maxX, maxY]
  }
  return null
}

function growBox([x0, y0, x1, y1], k) {
  const cx = (x0 + x1) / 2
  const cy = (y0 + y1) / 2
  const hw = ((x1 - x0) * k) / 2
  const hh = ((y1 - y0) * k) / 2
  const clamp = (v) => Math.min(1, Math.max(0, v))
  return [clamp(cx - hw), clamp(cy - hh), clamp(cx + hw), clamp(cy + hh)]
}

export default function ReviewPage({ batchId: rawBatchId, projectId, onProject }) {
  const [batch, setBatch] = useState(null)
  const [project, setProject] = useState(null)
  const [frames, setFrames] = useState([])
  const [index, setIndex] = useState(0)
  const [annotations, setAnnotations] = useState([])
  const [selectedId, setSelectedId] = useState(null)
  const [mode, setMode] = useState('draw')
  const [markedIds, setMarkedIds] = useState([])
  const [activeClass, setActiveClass] = useState(0)
  const [assistMode, setAssistMode] = useState(false)
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState('')
  const [activeJob, setActiveJob] = useState(null)
  const [hiddenClasses, setHiddenClasses] = useState(() => new Set())
  const [hiddenShapeIds, setHiddenShapeIds] = useState(() => new Set())
  const [overriddenShapeIds, setOverriddenShapeIds] = useState(() => new Set())

  const batchId = batch?.id || rawBatchId
  const stripRef = useRef(null)
  const hasInitialAutoJump = useRef(false)
  const frame = frames[index]

  const reload = useCallback(async () => {
    let targetBatchId = rawBatchId
    if (!targetBatchId && projectId) {
      const bList = await api.listBatches(projectId)
      if (bList?.batches?.length > 0) targetBatchId = bList.batches[0].id
    }
    if (!targetBatchId) throw new Error('No batch found to review')

    const loaded = await api.getBatch(targetBatchId)
    setBatch(loaded)
    const payload = await api.listFrames(targetBatchId)
    setFrames(payload.frames)
    if (!hasInitialAutoJump.current && payload.frames?.length > 0) {
      hasInitialAutoJump.current = true
      const firstAnnotated = payload.frames.findIndex((f) => (f.annotation_count ?? 0) > 0)
      if (firstAnnotated > 0) setIndex(firstAnnotated)
    }
    const jobsPayload = await api.listJobs(loaded.project_id).catch(() => ({ jobs: [] }))
    const currentJob = jobsPayload.jobs?.find(
      (j) => j.batch_id === Number(targetBatchId) && ['queued', 'running'].includes(j.status)
    )
    setActiveJob(currentJob || null)
    return loaded
  }, [rawBatchId, projectId])

  useEffect(() => {
    reload().then((loaded) => api.getProject(loaded.project_id)).then((loadedProject) => {
      setProject(loadedProject)
      onProject?.(loadedProject)
    }).catch((exc) => setError(exc.message))
  }, [rawBatchId, projectId, reload])

  const prevJobId = useRef(activeJob?.id)
  useEffect(() => {
    if (prevJobId.current && !activeJob) {
      hasInitialAutoJump.current = false
      reload().catch(() => {})
    }
    prevJobId.current = activeJob?.id

    if (!activeJob) return
    const timer = setInterval(() => {
      reload().catch(() => {})
      if (frame) api.frameAnnotations(frame.id).then((p) => setAnnotations(p.annotations)).catch(() => {})
    }, 2000)
    return () => clearInterval(timer)
  }, [activeJob, reload, frame?.id])

  useEffect(() => {
    if (!frame) return
    let cancelled = false
    api.frameAnnotations(frame.id).then((payload) => !cancelled && setAnnotations(payload.annotations)).catch((exc) => !cancelled && setError(exc.message))
    setSelectedId(null)
    setMarkedIds([])
    return () => { cancelled = true }
  }, [frame?.id])

  useEffect(() => {
    const active = stripRef.current?.querySelector('[aria-current="true"]')
    active?.scrollIntoView({ block: 'nearest', inline: 'center' })
  }, [index])

  function patchFrameLocally(frameId, patch) {
    setFrames((rows) => rows.map((row) => (row.id === frameId ? { ...row, ...patch } : row)))
  }

  const setStatus = useCallback(async (status) => {
    if (!frame) return
    patchFrameLocally(frame.id, { review_status: status })
    try {
      await api.setFrameStatus(frame.id, status)
      setBatch(await api.getBatch(batchId))
    } catch (exc) { setError(exc.message) }
    setIndex((current) => Math.min(current + 1, frames.length - 1))
  }, [frame, frames.length, batchId])

  async function createShape(geometry) {
    try {
      const created = await api.addAnnotation(frame.id, { class_id: activeClass, geometry })
      setAnnotations((rows) => [...rows, created])
      setSelectedId(created.id)
      if (hiddenClasses.has(created.class_id)) setOverriddenShapeIds((current) => new Set(current).add(created.id))
      patchFrameLocally(frame.id, { annotation_count: (frame.annotation_count ?? 0) + 1 })
    } catch (exc) { setError(exc.message) }
  }

  // The exemplar pool (REQ-173/174/175) owns the drag gesture in draw mode.
  const onExemplarApplied = useCallback((rows) => {
    setAnnotations(rows)
    setSelectedId(null)
    if (frame) patchFrameLocally(frame.id, { annotation_count: rows.length })
  }, [frame])
  const pool = useExemplarPool({
    frameId: frame?.id, classId: activeClass,
    onApplied: onExemplarApplied, onError: setError, onBusy: setBusy,
  })

  async function assist(box) {
    setBusy(true); setError('')
    try {
      const created = await api.assist(frame.id, { box, class_id: activeClass })
      setAnnotations((rows) => [...rows, created])
      setSelectedId(created.id)
      if (hiddenClasses.has(created.class_id)) setOverriddenShapeIds((current) => new Set(current).add(created.id))
    } catch (exc) { setError(exc.message) } finally { setBusy(false) }
  }

  async function updateShape(id, geometry, { local, commit } = {}) {
    if (local && geometry) {
      setAnnotations((rows) => rows.map((row) => (row.id === id ? { ...row, geometry } : row)))
      return
    }
    if (!commit) return
    const previous = annotations.find((row) => row.id === id)
    if (!previous) return
    // A commit may carry its own geometry (delete-vertex sends the shortened
    // polygon); falling back to the row's geometry covers drag/resize, which
    // already wrote through the {local:true} path.
    const next = geometry ?? previous.geometry
    setAnnotations((rows) => rows.map((row) => (row.id === id ? { ...row, geometry: next } : row)))
    try {
      await api.patchAnnotation(id, { geometry: next })
    } catch (exc) {
      setAnnotations((rows) => rows.map((row) => (row.id === id ? previous : row)))
      setError(exc.message)
    }
  }

  const removeAnnotation = useCallback(async (id) => {
    if (id == null || !frame) return
    const previous = annotations.find((row) => row.id === id)
    if (!previous) return
    setAnnotations((rows) => rows.filter((row) => row.id !== id))
    setSelectedId((current) => (current === id ? null : current))
    setFrames((rows) => rows.map((row) => (row.id === frame.id ? { ...row, annotation_count: Math.max(0, (row.annotation_count ?? 1) - 1) } : row)))
    try {
      await api.deleteAnnotation(id)
    } catch (exc) {
      setAnnotations((rows) => [...rows, previous])
      setFrames((rows) => rows.map((row) => (row.id === frame.id ? { ...row, annotation_count: (row.annotation_count ?? 0) + 1 } : row)))
      setError(exc.message)
    }
  }, [annotations, frame])

  const removeSelected = useCallback(() => removeAnnotation(selectedId), [removeAnnotation, selectedId])

  const onMarquee = useCallback((ids, { add = false, toggle = false } = {}) => {
    setMarkedIds((current) => {
      if (toggle) {
        const id = ids[0]
        return current.includes(id) ? current.filter((row) => row !== id) : [...current, id]
      }
      if (!add) return ids
      return [...new Set([...current, ...ids])]
    })
  }, [])

  const toggleHide = useCallback((classId) => {
    setHiddenClasses((current) => {
      const next = new Set(current)
      if (next.has(classId)) next.delete(classId)
      else next.add(classId)
      return next
    })
    // REQ-185: toggling a class drops its per-shape overrides — re-hiding a
    // class starts from a clean slate.
    const classShapeIds = annotations.filter((row) => row.class_id === classId).map((row) => row.id)
    setOverriddenShapeIds((current) => {
      if (!classShapeIds.some((id) => current.has(id))) return current
      const next = new Set(current)
      classShapeIds.forEach((id) => next.delete(id))
      return next
    })
  }, [annotations])

  // REQ-185: the eye first un-hides an H-hidden shape, otherwise it overrides
  // the class hide — one rule, in one place.
  function restoreShape(id) {
    if (hiddenShapeIds.has(id)) {
      setHiddenShapeIds((current) => {
        const next = new Set(current)
        next.delete(id)
        return next
      })
    } else {
      setOverriddenShapeIds((current) => (current.has(id) ? current : new Set(current).add(id)))
    }
  }

  // REQ-185: neither the shape's own hide nor its class's hide (without an
  // override) may reach the canvas. Session-only, never persisted.
  const isShapeVisible = (row) =>
    !hiddenShapeIds.has(row.id) &&
    (!hiddenClasses.has(row.class_id) || overriddenShapeIds.has(row.id))

  const visibleAnnotations = annotations.filter(isShapeVisible)

  // REQ-185: H toggles hide on the single selection and every marked shape.
  function toggleHideSelected() {
    const ids = [...new Set([selectedId, ...markedIds].filter((id) => id != null))]
    const rows = ids.map((id) => annotations.find((row) => row.id === id)).filter(Boolean)
    if (!rows.length) return
    const toHide = rows.filter((row) => isShapeVisible(row)).map((row) => row.id)
    const toUnhide = rows.filter((row) => !isShapeVisible(row)).map((row) => row.id)
    if (toHide.length) {
      setHiddenShapeIds((current) => {
        const next = new Set(current)
        toHide.forEach((id) => next.add(id))
        return next
      })
      // Flags must not contradict: hiding drops any class-hide override.
      setOverriddenShapeIds((current) => {
        if (!toHide.some((id) => current.has(id))) return current
        const next = new Set(current)
        toHide.forEach((id) => next.delete(id))
        return next
      })
    }
    if (toUnhide.length) {
      setHiddenShapeIds((current) => {
        if (!toUnhide.some((id) => current.has(id))) return current
        const next = new Set(current)
        toUnhide.forEach((id) => next.delete(id))
        return next
      })
    }
  }

  const markAll = useCallback(() => setMarkedIds(visibleAnnotations.map((row) => row.id)), [visibleAnnotations])

  const removeMarked = useCallback(async () => {
    if (!markedIds.length || !frame) return
    if (!window.confirm(`Delete ${markedIds.length} selected shape(s) on this frame?`)) return
    const previous = annotations
    const doomed = new Set(markedIds)
    setAnnotations((rows) => rows.filter((row) => !doomed.has(row.id)))
    setMarkedIds([])
    patchFrameLocally(frame.id, {
      annotation_count: Math.max(0, (frame.annotation_count ?? doomed.size) - doomed.size),
    })
    try {
      await api.bulkDeleteAnnotations([...doomed])
      setBatch(await api.getBatch(batchId))
    } catch (exc) {
      setAnnotations(previous)
      patchFrameLocally(frame.id, { annotation_count: previous.length })
      setError(exc.message)
    }
  }, [markedIds, annotations, frame, batchId])

  const reclassMarked = useCallback(async (classId) => {
    if (!markedIds.length) return
    const previous = annotations
    const targets = new Set(markedIds)
    setAnnotations((rows) => rows.map((row) => (targets.has(row.id) ? { ...row, class_id: classId } : row)))
    try {
      await api.bulkReclassAnnotations([...targets], classId)
    } catch (exc) {
      setAnnotations(previous)
      setError(exc.message)
    }
  }, [markedIds, annotations])

  const reclass = useCallback(async (classId) => {
    setActiveClass(classId)
    if (selectedId == null) return
    try {
      const updated = await api.patchAnnotation(selectedId, { class_id: classId })
      setAnnotations((rows) => rows.map((row) => (row.id === updated.id ? updated : row)))
    } catch (exc) { setError(exc.message) }
  }, [selectedId])

  // Review signs frames off; it no longer merges. Data Prep is the gate that
  // turns a selection of batches into a dataset (REQ-131).
  function toDataPrep() {
    navigate(`/projects/${batch.project_id}/data-prep?batches=${batchId}`)
  }

  async function jumpToPending() {
    try {
      const { frame_id: frameId } = await api.nextPending(batchId, frame?.idx ?? -1)
      const position = frames.findIndex((row) => row.id === frameId)
      if (position >= 0) setIndex(position)
    } catch (exc) { setError(exc.message) }
  }

  const jumpToNextAnnotated = useCallback(() => {
    if (!frames?.length) return
    const nextIdx = frames.findIndex((f, idx) => idx > index && (f.annotation_count ?? 0) > 0)
    if (nextIdx >= 0) setIndex(nextIdx)
    else {
      const firstIdx = frames.findIndex((f) => (f.annotation_count ?? 0) > 0)
      if (firstIdx >= 0) setIndex(firstIdx)
    }
  }, [frames, index])

  const copyPrevious = useCallback(async () => {
    if (!frames?.length || index === 0 || !frame) return
    const prevFrame = frames[index - 1]
    if (!prevFrame || (prevFrame.annotation_count ?? 0) === 0) return
    try {
      const payload = await api.frameAnnotations(prevFrame.id)
      if (!payload.annotations?.length) return
      
      const created = await Promise.all(
        payload.annotations.map(a => api.addAnnotation(frame.id, { class_id: a.class_id, geometry: a.geometry }))
      )
      
      setAnnotations(rows => [...rows, ...created])
      patchFrameLocally(frame.id, { annotation_count: (frame.annotation_count ?? 0) + created.length })
      if (created.length > 0) setSelectedId(created[0].id)
      const overridden = created.filter((row) => hiddenClasses.has(row.class_id)).map((row) => row.id)
      if (overridden.length) setOverriddenShapeIds((current) => {
        const next = new Set(current)
        overridden.forEach((id) => next.add(id))
        return next
      })
    } catch (exc) {
      setError(exc.message)
    }
  }, [frames, index, frame, hiddenClasses])

  const trackForward = useCallback(async () => {
    if (busy) return
    if (!frames?.length) return
    if (selectedId == null) {
      setError('Select a shape first — Track 5 Frames follows one shape forward.')
      return
    }
    const current = annotations.find((a) => a.id === selectedId)
    if (!current) {
      setError('That shape is gone — select another one.')
      return
    }

    const firstBox = shapeBox(current.geometry)
    if (!firstBox) {
      setError('That shape has no usable box — Track 5 Frames needs one.')
      return
    }
    const ahead = frames.slice(index + 1, index + 6)
    if (!ahead.length) {
      setError('Last frame — Track 5 Frames has no frames ahead to follow into.')
      return
    }

    setBusy(true)
    setError('')
    try {
      let tracked = 0
      const failures = []
      for (let i = 0; i < ahead.length; i++) {
        const targetFrame = ahead[i]
        // Every frame is seeded from the drawn box, never from a previous
        // result, so a bad read on one frame cannot carry into the next.
        // Frames 2-5 get it grown about its centre — the object has had
        // time to move by then.
        const seedBox = i === 0 ? firstBox : growBox(firstBox, SEED_GROWTH)
        try {
          await api.assist(targetFrame.id, {
            box: seedBox, class_id: current.class_id,
          })
          tracked++
          patchFrameLocally(targetFrame.id, { annotation_count: (targetFrame.annotation_count ?? 0) + 1 })
        } catch (exc) {
          failures.push(`frame ${index + i + 2}: ${exc.message}`)
        }
      }
      if (failures.length) {
        setError(`Tracked ${tracked} of ${ahead.length} — ${failures.join(' · ')}`)
      }
    } finally {
      setBusy(false)
    }
  }, [annotations, selectedId, index, frames, busy])

  const stateRef = useRef({})
  stateRef.current = { frames, index, project, selectedId, setStatus, removeSelected, reclass, jumpToPending, jumpToNextAnnotated, setAssistMode, copyPrevious, trackForward, mode, setMode, markedIds, removeMarked, reclassMarked, setMarkedIds, toggleHideSelected }

  useEffect(() => {
    function onKeyDown(event) {
      if (event.target?.matches?.('input, textarea, select, [contenteditable="true"]')) return
      // Ctrl/Cmd/Alt combos belong to the browser and the OS: without this,
      // Ctrl+S approves the frame and Ctrl+A/C/X/N/T all fire review actions.
      if (event.ctrlKey || event.metaKey || event.altKey) return
      const { frames, project, setStatus, removeSelected, reclass, jumpToPending, jumpToNextAnnotated, setAssistMode, copyPrevious, trackForward, mode, setMode, markedIds, removeMarked, reclassMarked, setMarkedIds, toggleHideSelected } = stateRef.current
      const key = event.key
      const isShortcutKey = /^[1-9]$/.test(key) || ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete', 'Backspace', 'a', 'A', 'x', 'X', 'u', 'U', 's', 'S', 'n', 'N', 'c', 'C', 't', 'T', 'v', 'V', 'h', 'H', 'Escape'].includes(key)
      if (isShortcutKey) { event.preventDefault(); event.stopPropagation() }

      // In select mode the marquee owns Delete and the digits, otherwise a
      // 40-box selection would be thrown away by one keystroke meant for it.
      if (mode === 'select') {
        if (key === 'v' || key === 'V') { setMode?.('draw'); setMarkedIds?.([]); return }
        if (key === 'Escape') { setMarkedIds?.([]); return }
        if ((key === 'Delete' || key === 'Backspace') && markedIds?.length) { removeMarked?.(); return }
        if (/^[1-9]$/.test(key) && markedIds?.length) {
          const classId = Number(key) - 1
          if (project && classId < project.classes.length) reclassMarked?.(classId)
          return
        }
      } else if (key === 'v' || key === 'V') { setMode?.('select'); return }

      if (key === 's' || key === 'S') setAssistMode?.(true)
      else if (key === 'ArrowLeft') setIndex((i) => Math.max(0, i - 1))
      else if (key === 'ArrowRight') setIndex((i) => Math.min((frames?.length || 1) - 1, i + 1))
      else if (key === 'a' || key === 'A') setStatus?.('approved')
      else if (key === 'x' || key === 'X') setStatus?.('rejected')
      else if (key === 'u' || key === 'U') jumpToPending?.()
      else if (key === 'n' || key === 'N') jumpToNextAnnotated?.()
      else if (key === 'c' || key === 'C') copyPrevious?.()
      else if (key === 't' || key === 'T') trackForward?.()
      else if (key === 'h' || key === 'H') toggleHideSelected?.()
      else if (key === 'Delete' || key === 'Backspace') removeSelected?.()
      else if (/^[1-9]$/.test(key)) {
        const classId = Number(key) - 1
        if (project && classId < project.classes.length) reclass?.(classId)
      }
    }

    function onKeyUp(event) {
      if (event.target?.matches?.('input, textarea, select, [contenteditable="true"]')) return
      if (event.key === 's' || event.key === 'S') { event.preventDefault(); event.stopPropagation(); stateRef.current.setAssistMode?.(false) }
    }

    document.addEventListener('keydown', onKeyDown, true)
    document.addEventListener('keyup', onKeyUp, true)
    return () => {
      document.removeEventListener('keydown', onKeyDown, true)
      document.removeEventListener('keyup', onKeyUp, true)
    }
  }, [])

  if (error && !batch) return <p className="error-banner" style={{ margin: 20 }}><AlertIcon size={14} /> {error}</p>
  if (!batch || !project) return <p className="empty" style={{ margin: 20, color: 'var(--text-muted)' }}>Loading batch data…</p>

  const reviewed = (batch.review?.approved ?? 0) + (batch.review?.rejected ?? 0)
  const classesList = project.classes ?? []
  const activeClassName =
    classesList.find((item) => item.class_id === activeClass)?.name ?? 'this class'

  async function approveAllFrames() {
    if (!window.confirm(`Mark all ${batch.review?.pending ?? 0} pending frames as approved?`)) return
    try { await api.approveAllBatchFrames(batchId); await reload() } catch (exc) { setError(exc.message) }
  }

  async function clearClassInBatch(item) {
    if (!window.confirm(`Clear all shapes of class "${item.name}" across ALL frames in this batch?`)) return
    try {
      await api.clearBatchClassAnnotations(batchId, item.class_id)
      await reload()
      if (frame) {
        const payload = await api.frameAnnotations(frame.id)
        setAnnotations(payload.annotations)
      }
    } catch (exc) { setError(exc.message) }
  }

  async function clearClassInFrame(item) {
    const doomed = annotations.filter((row) => row.class_id === item.class_id)
    if (!doomed.length || !frame) return
    const ids = new Set(doomed.map((row) => row.id))
    const previous = annotations
    const previousCount = frame.annotation_count ?? 0
    setAnnotations((rows) => rows.filter((row) => !ids.has(row.id)))
    setMarkedIds((rows) => rows.filter((id) => !ids.has(id)))
    patchFrameLocally(frame.id, { annotation_count: Math.max(0, previousCount - doomed.length) })
    try {
      await api.bulkDeleteAnnotations(doomed.map((row) => row.id))
      setBatch(await api.getBatch(batchId))
    } catch (exc) {
      setAnnotations(previous)
      setMarkedIds((rows) => [...rows, ...doomed.filter((row) => !rows.includes(row.id)).map((row) => row.id)])
      patchFrameLocally(frame.id, { annotation_count: previousCount })
      setError(exc.message)
    }
  }

  return (
    <>
      <div className="page-head">
        <div>
          <h1>{batch.date_label} · {batch.batch_label}</h1>
          <p className="muted">
            {batch.frame_count} frames · {reviewed}/{batch.frame_count} reviewed ·
            {' '}<strong style={{ color: batch.annotation_count > 0 ? '#c084fc' : '#a1a1aa' }}>{batch.annotation_count} shapes</strong> · status {batch.status}
          </p>
        </div>
        <span className="spacer" />
        {(batch.review?.pending ?? 0) > 0 && batch.status !== 'merged' && (
          <button className="btn" style={{ marginRight: 8 }} title="Mark all pending frames in this batch as approved" onClick={approveAllFrames}>
            Approve All Frames ({batch.review?.pending})
          </button>
        )}
        <button
          className="btn btn-primary"
          disabled={(batch.review?.pending ?? 0) > 0 || batch.status === 'merged'}
          title={(batch.review?.pending ?? 0) > 0 ? `${batch.review?.pending} frame(s) still pending` : 'Tune the filter for this batch, then merge it into a dataset'}
          onClick={toDataPrep}
        >
          {batch.status === 'merged' ? 'Merged' : 'Prepare & merge'}
        </button>
      </div>

      {activeJob && (
        <div className="panel side-panel" style={{ marginBottom: 12, border: '1px solid rgba(168, 85, 247, 0.4)', background: 'rgba(24, 24, 27, 0.8)' }}>
          <div className="row" style={{ fontSize: '0.85rem' }}>
            <span className="dot ok" />
            <strong style={{ textTransform: 'capitalize' }}>Auto-labeling in progress…</strong>
            <span className="spacer" />
            <span className="mono">{activeJob.progress}/{activeJob.total || '—'} frames</span>
          </div>
          <div className="progress" style={{ margin: '6px 0' }}>
            <span style={{ width: `${activeJob.total ? (activeJob.progress / activeJob.total) * 100 : 50}%` }} />
          </div>
        </div>
      )}

      {error && <p className="error-banner" style={{ marginBottom: 12 }}><AlertIcon size={14} /> {error}</p>}

      <div className="review">
        <div className="review-main">
          {frame && (
            <AnnotationCanvas
              frame={frame}
              imageUrl={api.frameUrl(frame.id)}
              annotations={visibleAnnotations}
              selectedId={selectedId}
              activeClass={activeClass}
              assistMode={assistMode}
              classes={classesList}
              mode={mode}
              selectedIds={markedIds}
              exemplars={pool.exemplars}
              preview={pool.preview?.shapes ?? null}
              onSelect={setSelectedId}
              onCreate={createShape}
              onUpdate={updateShape}
              onAssist={assist}
              onExemplar={pool.add}
              onMarquee={onMarquee}
            />
          )}

          <div className="frame-bar" style={{ gap: 8 }}>
            <div className="mode-switch" role="group" aria-label="Canvas mode">
              {[['draw', 'Draw'], ['select', 'Select']].map(([value, label]) => (
                <button
                  key={value}
                  type="button"
                  className={`btn${mode === value ? ' btn-primary' : ''}`}
                  aria-pressed={mode === value}
                  style={{ padding: '2px 10px', fontSize: '0.78rem' }}
                  onClick={() => { setMode(value); setMarkedIds([]) }}
                  title={value === 'draw'
                    ? 'Drag on empty canvas to draw a new box [V to switch]'
                    : 'Drag to select every box you touch, then delete or reclass them at once [V to switch]'}
                >
                  {label}
                </button>
              ))}
            </div>
            {mode === 'select' && (
              <>
                <button
                  type="button"
                  className="btn"
                  style={{ padding: '2px 8px', fontSize: '0.78rem' }}
                  onClick={markAll}
                  disabled={!visibleAnnotations.length}
                >
                  Select all ({visibleAnnotations.length})
                </button>
                <span className="muted" style={{ fontSize: '0.78rem' }}>
                  {markedIds.length
                    ? `${markedIds.length} selected · Shift-drag adds · Esc clears`
                    : 'Drag across the boxes you want'}
                </span>
              </>
            )}
            {mode === 'draw' && (
              <span className="muted" style={{ fontSize: '0.78rem' }}>
                {pool.exemplars.length
                  ? `${pool.exemplars.filter((e) => e.positive).length} example(s), `
                    + `${pool.exemplars.filter((e) => !e.positive).length} negative — `
                    + 'tune the filters, then Apply'
                  : 'Drag or double-click an example · Shift-drag/click = not this'}
              </span>
            )}
          </div>

          {mode === 'select' && markedIds.length > 0 && (
            <div className="frame-bar" style={{ gap: 8, borderColor: 'rgba(56, 189, 248, 0.4)' }}>
              <strong style={{ fontSize: '0.82rem', color: '#38bdf8' }}>
                {markedIds.length} shape{markedIds.length === 1 ? '' : 's'}
              </strong>
              <span className="muted" style={{ fontSize: '0.78rem' }}>reclass to</span>
              {classesList.map((item) => (
                <button
                  key={item.class_id}
                  type="button"
                  className="btn"
                  style={{ padding: '2px 8px', fontSize: '0.78rem' }}
                  onClick={() => reclassMarked(item.class_id)}
                  title={`Move all ${markedIds.length} into "${item.name}" [${item.class_id + 1}]`}
                >
                  [{item.class_id + 1}] {item.name}
                </button>
              ))}
              <span className="spacer" />
              <button type="button" className="btn" style={{ padding: '2px 8px', fontSize: '0.78rem' }} onClick={() => setMarkedIds([])}>
                Clear [Esc]
              </button>
              <button type="button" className="btn btn-danger" style={{ padding: '2px 8px', fontSize: '0.78rem' }} onClick={removeMarked}>
                <XIcon size={13} /> Delete {markedIds.length} [Del]
              </button>
            </div>
          )}

          <div className="frame-bar">
            <button className="btn" onClick={() => setIndex((i) => Math.max(0, i - 1))} disabled={index === 0}>←</button>
            <span className="mono">
              {index + 1} / {frames.length}
              {frame && <span className={`status-pill ${frame.review_status}`}>{frame.review_status}</span>}
            </span>
            <button className="btn" onClick={() => setIndex((i) => Math.min(frames.length - 1, i + 1))} disabled={index >= frames.length - 1}>→</button>
            <button
              type="button"
              className="btn"
              style={{ padding: '2px 8px', fontSize: '0.78rem', borderColor: 'rgba(168, 85, 247, 0.5)', color: '#c084fc', background: 'rgba(168, 85, 247, 0.1)' }}
              onClick={jumpToNextAnnotated}
              title="Jump to next frame with annotations [N]"
            >
              🏷️ Next Shape [N]
            </button>
            <button
              type="button"
              className="btn"
              style={{ padding: '2px 8px', fontSize: '0.78rem', borderColor: 'rgba(168, 85, 247, 0.5)', color: '#c084fc', background: 'rgba(168, 85, 247, 0.1)' }}
              onClick={copyPrevious}
              disabled={index === 0 || !(frames?.[index - 1]?.annotation_count > 0)}
              title="Copy all annotations from the previous frame [C]"
            >
              📋 Copy Prev [C]
            </button>
            <button
              type="button"
              className="btn"
              style={{ padding: '2px 8px', fontSize: '0.78rem', borderColor: 'rgba(56, 189, 248, 0.5)', color: '#38bdf8', background: 'rgba(56, 189, 248, 0.1)' }}
              onClick={trackForward}
              disabled={selectedId == null || index >= frames.length - 1}
              title="SAM3 auto-track selected shape for next 5 frames [T]"
            >
              🚀 Track 5 Frames [T]
            </button>
            <span className="spacer" />
            {busy && <span className="muted">asking SAM3…</span>}
            <button className="btn btn-danger" onClick={() => setStatus('rejected')}><XIcon size={14} /> Reject [X]</button>
            <button className="btn btn-primary" onClick={() => setStatus('approved')}><CheckIcon size={14} /> Approve [A]</button>
          </div>

          {selectedId != null && (
            <QuickReclassBar classesList={classesList} reclass={reclass} removeSelected={removeSelected} />
          )}

          <Filmstrip frames={frames} index={index} onSelectIndex={setIndex} stripRef={stripRef} />
        </div>

        <ReviewSidebar
          exemplarPanel={mode === 'draw' && pool.active && (
            <ExemplarFilterPanel
              filters={pool.filters}
              preview={pool.preview}
              busy={busy}
              className={activeClassName}
              negatives={pool.exemplars.filter((item) => !item.positive).length}
              replacing={annotations.filter((row) => row.class_id === activeClass).length}
              onFilter={pool.setFilter}
              onReset={pool.resetFilters}
              onApply={pool.apply}
              onDiscard={pool.discard}
              onUndo={pool.undo}
            />
          )}
          classesList={classesList}
          activeClass={activeClass}
          reclass={reclass}
          clearClassInBatch={clearClassInBatch}
          clearClassInFrame={clearClassInFrame}
          hiddenClasses={hiddenClasses}
          onToggleHide={toggleHide}
          hiddenShapeIds={hiddenShapeIds}
          overriddenShapeIds={overriddenShapeIds}
          onRestoreShape={restoreShape}
          annotations={annotations}
          selectedId={selectedId}
          setSelectedId={setSelectedId}
          removeAnnotation={removeAnnotation}
          project={project}
          jumpToNextAnnotated={jumpToNextAnnotated}
          batchAnnotationCount={batch?.annotation_count ?? 0}
        />
      </div>
    </>
  )
}