/* eslint-disable react-hooks/set-state-in-effect -- pre-existing pattern flagged by the React
   Compiler rules added in eslint-plugin-react-hooks v7; refactoring it is
   out of scope for the lint toolchain upgrade. */
import { useCallback, useEffect, useState } from 'react'

const clamp = (value: number, min: number, max: number) =>
  Math.min(Math.max(value, min), max)

export interface UseCarouselOptions {
  /** Total number of items in the carousel. */
  length: number
  /** Index to display when the carousel first opens / re-opens. */
  initialIndex: number
  /** When `false`, the keyboard listener is detached. */
  open: boolean
}

export interface UseCarouselResult {
  /** Currently displayed index (clamped to `[0, length - 1]`). */
  index: number
  /** Step one item back, wrapping at the start. */
  prev: () => void
  /** Step one item forward, wrapping at the end. */
  next: () => void
}

/**
 * Tiny carousel state used by `ImageViewer`, `VideoViewer`, and
 * `PdfViewer` when their items array has more than one entry.
 *
 *   - Resets to `initialIndex` whenever the viewer (re-)opens, so
 *     clicking a different tile on the bubble surface lands on that
 *     item rather than restoring the last-viewed position.
 *   - Clamps defensively when `length` shrinks below the active index
 *     (server push / optimistic update / stack edit) so the viewer
 *     gracefully falls back instead of dereferencing `undefined`.
 *   - Listens for `ArrowLeft` / `ArrowRight` while the viewer is open,
 *     but yields when the focused element is a `<video>` / `<audio>`
 *     element so the native media controls can use the same keys for
 *     seek / volume.
 */
export const useCarousel = ({
  length,
  initialIndex,
  open,
}: UseCarouselOptions): UseCarouselResult => {
  const safeInitial = clamp(initialIndex, 0, Math.max(length - 1, 0))
  const [index, setIndex] = useState(safeInitial)

  // Snap the active index back to whatever the caller asked for every
  // time the viewer (re)opens or its initial target / length changes.
  // Without this the viewer would remember the last index across
  // open/close cycles, which is wrong for a chat lightbox where each
  // tile click should land on that tile.
  useEffect(() => {
    if (!open) return
    setIndex(clamp(initialIndex, 0, Math.max(length - 1, 0)))
  }, [open, initialIndex, length])

  // Re-clamp on length change so a stale index doesn't dereference
  // past the new array bounds (e.g. items shrank while the viewer is
  // open). The `Math.max(..., 0)` keeps the index at `0` when the
  // array empties out so callers can render an empty-state instead of
  // a runtime crash.
  useEffect(() => {
    setIndex((i) => clamp(i, 0, Math.max(length - 1, 0)))
  }, [length])

  const prev = useCallback(() => {
    if (length <= 1) return
    setIndex((i) => (i <= 0 ? length - 1 : i - 1))
  }, [length])

  const next = useCallback(() => {
    if (length <= 1) return
    setIndex((i) => (i >= length - 1 ? 0 : i + 1))
  }, [length])

  useEffect(() => {
    if (!open || length <= 1) return undefined

    const onKey = (e: KeyboardEvent) => {
      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return
      // Don't hijack arrow keys when a native media element is
      // focused — the browser's own controls already use them for
      // seek / volume, and stealing them would feel broken.
      const active = document.activeElement
      if (
        active &&
        (active.tagName === 'VIDEO' || active.tagName === 'AUDIO')
      ) {
        return
      }
      e.preventDefault()
      if (e.key === 'ArrowLeft') prev()
      else next()
    }

    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [open, length, prev, next])

  return { index, prev, next }
}