// frontend\src\components\ui\FinishedDownloadsGalleryCard.tsx

'use client'

import { useState, useMemo, useCallback, memo, type ReactNode, type SyntheticEvent } from 'react'
import type {
  RecordJob,
  GalleryModelFlags,
  FinishedPostworkSummary,
} from '../../types'
import FinishedVideoPreview from './FinishedVideoPreview'
import RecordJobActions from './RecordJobActions'
import TagOverflowRow from './TagOverflowRow'
import { isHotName, stripHotPrefix } from './hotName'
import PreviewScrubber from './PreviewScrubber'
import type { FinishedDownloadsTeaserState } from './teaserPlayback'
import {
  shouldAnimateTeaser,
  shouldEnableTeaserAudio,
} from './teaserPlayback'
import Checkbox from './Checkbox'
import {
  buildSpriteFrameStyle,
  parseJobMeta,
  readPreviewSpriteInfo,
  scrubProgressRatioFromIndex,
} from './previewSprite'
import ModelGenderIcon from './ModelGenderIcon'
import { resolveFinishedModelFlags } from './finishedModelFlags'
import CountryFlag, { resolveFinishedCountry } from './CountryFlag'
import SpritePreloader from './SpritePreloader'
import PreviewRatingOverlay from './PreviewRatingOverlay'
import PreviewMetaOverlay from './PreviewMetaOverlay'

function normalizeDurationSeconds(value: unknown): number | undefined {
  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) return undefined
  return value > 24 * 60 * 60 ? value / 1000 : value
}

type Props = {
  job: RecordJob
  selectedKeys: Set<string>
  selectionModeActive: boolean
  rowKey: string
  isPreviewActive: boolean
  forcePreviewMuted?: boolean
  blurPreviews?: boolean

  postworkByFile: Record<string, FinishedPostworkSummary>
  getPostworkSummaryForOutput: (
    output: string | undefined,
    summaries: Record<string, FinishedPostworkSummary>
  ) => FinishedPostworkSummary | undefined
  renderPostworkBadge?: (badge?: FinishedPostworkSummary) => ReactNode

  durationSeconds?: number
  teaserState: FinishedDownloadsTeaserState

  baseName: (p: string) => string
  modelNameFromOutput: (output?: string) => string
  runtimeOf: (job: RecordJob) => string
  sizeBytesOf: (job: RecordJob) => number | null
  formatBytes: (bytes?: number | null) => string
  lower: (s: string) => string

  modelsByKey: Record<string, GalleryModelFlags>
  activeTagSet: Set<string>

  deletingKeys: Set<string>
  keepingKeys: Set<string>
  removingKeys: Set<string>

  registerTeaserHost: (key: string) => (el: HTMLDivElement | null) => void

  onToggleSelected: (job: RecordJob) => void
  onSelectOnly: (job: RecordJob) => void
  onHoverPreviewKeyChange?: (key: string | null) => void
  onToggleTagFilter: (tag: string) => void
  onOpenPlayer: (job: RecordJob) => void
  handleDuration: (job: RecordJob, seconds: number) => void
  handleResolution: (job: RecordJob, w: number, h: number) => void
  resolutionLabelOf: (job: RecordJob) => string
  handleScrubberClickIndex: (job: RecordJob, segmentIndex: number, segmentCount: number) => void
  deleteVideo: (job: RecordJob) => Promise<boolean>
  keepVideo: (job: RecordJob) => Promise<boolean>
  onToggleHot: (job: RecordJob) => void | Promise<void>
  onToggleFavorite?: (job: RecordJob) => void | Promise<void>
  onToggleLike?: (job: RecordJob) => void | Promise<void>
  onToggleWatch?: (job: RecordJob) => void | Promise<void>
  onSplit?: (job: RecordJob) => void | Promise<void>
  onAddToDownloads?: (job: RecordJob) => void | Promise<boolean>
  jobForDetails: (job: RecordJob) => RecordJob
  renderIntegrityBadge?: (job: RecordJob) => ReactNode
  renderRatingOverlay?: (job: RecordJob) => ReactNode

  contentPaddingClass: string
  footerMinHeightClass: string
  titleClass: string
  sublineClass: string
  assetNonce?: number
}

function FinishedDownloadsGalleryCardInner({
  job: j,
  selectedKeys,
  selectionModeActive,
  rowKey,
  isPreviewActive,
  forcePreviewMuted,
  blurPreviews,
  postworkByFile,
  getPostworkSummaryForOutput,
  renderPostworkBadge,
  durationSeconds,
  teaserState,
  baseName,
  modelNameFromOutput,
  runtimeOf,
  sizeBytesOf,
  formatBytes,
  lower,
  modelsByKey,
  activeTagSet,
  deletingKeys,
  keepingKeys,
  removingKeys,
  registerTeaserHost,
  onToggleSelected,
  onHoverPreviewKeyChange,
  onToggleTagFilter,
  onOpenPlayer,
  handleDuration,
  handleResolution,
  resolutionLabelOf,
  handleScrubberClickIndex,
  deleteVideo,
  keepVideo,
  onToggleHot,
  onToggleFavorite,
  onToggleLike,
  onToggleWatch,
  onSplit,
  onAddToDownloads,
  jobForDetails,
  renderIntegrityBadge,
  renderRatingOverlay,
  contentPaddingClass,
  footerMinHeightClass,
  titleClass,
  sublineClass,
  assetNonce
}: Props) {
  const k = rowKey
  const checked = selectedKeys.has(rowKey)

  const [scrubIndexByKey, setScrubIndexByKey] = useState<Record<string, number | undefined>>({})
  const [hoveredThumbKey, setHoveredThumbKey] = useState<string | null>(null)

  const handlePrimaryClick = useCallback(
    (e?: SyntheticEvent) => {
      e?.preventDefault()
      e?.stopPropagation()

      if (selectionModeActive) {
        onToggleSelected(j)
        return
      }

      onOpenPlayer(j)
    },
    [selectionModeActive, onToggleSelected, onOpenPlayer, j]
  )

  const setScrubIndexForKey = useCallback((key: string, index: number | undefined) => {
    setScrubIndexByKey((prev) => {
      if (index === undefined) {
        if (!(key in prev)) return prev
        const next = { ...prev }
        delete next[key]
        return next
      }
      if (prev[key] === index) return prev
      return { ...prev, [key]: index }
    })
  }, [])

  const clearScrubIndex = useCallback((key: string) => {
    setScrubIndexForKey(key, undefined)
  }, [setScrubIndexForKey])

  const allowSound = shouldEnableTeaserAudio({
    state: teaserState,
    itemKey: k,
  })
  const previewMuted = forcePreviewMuted ? true : !allowSound

  const model = modelNameFromOutput(j.output)

  const { flags } = resolveFinishedModelFlags(
    j,
    modelsByKey,
    modelNameFromOutput,
    lower
  )

  const tags = useMemo(() => {
    const s = String(flags?.tags ?? '').trim()
    if (!s) return [] as string[]
    const parts = s.split(/[\n,;|]+/g).map((p) => p.trim()).filter(Boolean)
    const seen = new Set<string>()
    const out: string[] = []
    for (const p of parts) {
      const kk = p.toLowerCase()
      if (seen.has(kk)) continue
      seen.add(kk)
      out.push(p)
    }
    return out
  }, [flags?.tags])

  const isFav = Boolean(flags?.favorite)
  const isLiked = flags?.liked === true
  const isWatching = Boolean(flags?.watching)

  const country = resolveFinishedCountry(flags, j)

  const fileRaw = baseName(j.output || '')
  const isHot = isHotName(fileRaw)
  const file = stripHotPrefix(fileRaw)

  const postworkBadge = getPostworkSummaryForOutput(j.output, postworkByFile)
  const showPostworkBadge = !!postworkBadge

  const dur = runtimeOf(j)
  const size = formatBytes(sizeBytesOf(j))

  const meta = useMemo(() => parseJobMeta((j as any)?.meta), [(j as any)?.meta])

  const resObj = useMemo(() => {
    const w = meta?.media?.video?.width ?? meta?.file?.video?.width
    const h = meta?.media?.video?.height ?? meta?.file?.video?.height
    if (
      typeof w === 'number' && Number.isFinite(w) && w > 0 &&
      typeof h === 'number' && Number.isFinite(h) && h > 0
    ) {
      return { w, h }
    }
    return null
  }, [meta])

  const resLabelRaw = resolutionLabelOf(j)
  const resLabel = resLabelRaw && resLabelRaw !== '—' ? resLabelRaw : ''

  const isRemoving = removingKeys.has(k)
  const isDeleting = deletingKeys.has(k)
  const isKeeping = keepingKeys.has(k)
  const busy = isDeleting || isKeeping || isRemoving

  const sprite = useMemo(
    () =>
      readPreviewSpriteInfo((j as any)?.meta, {
        fallbackPath: flags?.previewScrubberPath,
        fallbackCount: flags?.previewScrubberCount,
        versionFallback: assetNonce ?? 0,
      }),
    [(j as any)?.meta, flags?.previewScrubberPath, flags?.previewScrubberCount, assetNonce]
  )

  const spriteUrl = sprite.url
  const hasScrubberUi = sprite.hasScrubberUi
  const hasSpriteScrubber = sprite.hasSpriteScrubber
  const scrubberCount = sprite.count
  const scrubberStepSeconds = sprite.stepSeconds
  const hasScrubber = hasScrubberUi
  const shouldPreloadSprite = Boolean(hasSpriteScrubber && spriteUrl)

  const activeScrubIndex = scrubIndexByKey[k]
  const scrubProgressRatio = scrubProgressRatioFromIndex(activeScrubIndex, scrubberCount)

  const spriteFrameStyle = useMemo(
    () =>
      buildSpriteFrameStyle({
        spriteUrl,
        spriteCols: sprite.cols,
        spriteRows: sprite.rows,
        spriteCount: sprite.count,
        activeIndex: activeScrubIndex,
      }),
    [spriteUrl, sprite.cols, sprite.rows, sprite.count, activeScrubIndex]
  )

  const showScrubberSpriteInThumb = Boolean(spriteFrameStyle)

  const previewDurationSeconds =
    durationSeconds ??
    normalizeDurationSeconds(meta?.media?.durationSeconds) ??
    normalizeDurationSeconds(meta?.file?.durationSeconds)

  const spriteScrubbingActive =
    hasSpriteScrubber && typeof activeScrubIndex === 'number'

  return (
    <div className="relative">
      <div
        role="button"
        tabIndex={0}
        data-finished-hover-key={k}
        className="group relative focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500"
        onClick={(e) => {
          handlePrimaryClick(e)
        }}
        onMouseEnter={() => onHoverPreviewKeyChange?.(k)}
        onMouseLeave={() => {
          onHoverPreviewKeyChange?.(null)
          setHoveredThumbKey((prev) => (prev === k ? null : prev))
          clearScrubIndex(k)
        }}
        onKeyDown={(e) => {
          if (e.key !== 'Enter' && e.key !== ' ') return
          handlePrimaryClick(e)
        }}
      >
        <div
          className={[
            'relative rounded-lg overflow-visible outline-1 outline-black/5 dark:-outline-offset-1 dark:outline-white/10',
            'bg-white dark:bg-gray-900/40',
            'transition-[transform,opacity,box-shadow,background-color] duration-180 ease-out',
            'will-change-[transform,opacity]',
            !busy && 'hover:-translate-y-0.5 hover:shadow-md dark:hover:shadow-none',
            busy && !isRemoving && 'pointer-events-none opacity-70',
            isDeleting && 'ring-1 ring-red-300 bg-red-50/60 dark:bg-red-500/10 dark:ring-red-500/30',
            isKeeping && 'ring-1 ring-emerald-300 bg-emerald-50/60 dark:bg-emerald-500/10 dark:ring-emerald-500/30',
            isRemoving ? 'pointer-events-none opacity-0 translate-y-2 scale-[0.98]' : 'opacity-100 translate-y-0 scale-100',
          ].filter(Boolean).join(' ')}
        >
          <div
            className={[
              'absolute left-3 top-3 z-20 transition-opacity duration-150',
              checked ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100',
            ].join(' ')}
            onClick={(e) => e.stopPropagation()}
            onPointerDown={(e) => e.stopPropagation()}
          >
            <Checkbox
              checked={checked}
              ariaLabel={`${checked ? 'Abwählen' : 'Auswählen'}: ${baseName(j.output || '') || 'Download'}`}
              onChange={() => onToggleSelected(j)}
            />
          </div>

          <div
            className="group/thumb relative aspect-video rounded-t-lg bg-black/5 dark:bg-white/5"
            ref={registerTeaserHost(k)}
            onMouseEnter={() => setHoveredThumbKey(k)}
            onMouseLeave={() => {
              setHoveredThumbKey((prev) => (prev === k ? null : prev))
              clearScrubIndex(k)
            }}
          >
            <div className="absolute inset-0 overflow-hidden rounded-t-lg">
              <div className="absolute inset-0">
                <FinishedVideoPreview
                  job={j}
                  getFileName={(p) => stripHotPrefix(baseName(p))}
                  durationSeconds={previewDurationSeconds}
                  onDuration={handleDuration}
                  onResolution={handleResolution}
                  variant="fill"
                  showPopover={false}
                  blur={blurPreviews}
                  animated={shouldAnimateTeaser({
                    state: teaserState,
                    itemKey: k,
                    disabled: spriteScrubbingActive,
                  })}
                  animatedMode="teaser"
                  animatedTrigger="always"
                  muted={previewMuted}
                  popoverMuted={previewMuted}
                  assetNonce={assetNonce ?? 0}
                  scrubProgressRatio={hasSpriteScrubber ? undefined : scrubProgressRatio}
                  preferScrubProgress={!hasSpriteScrubber && typeof activeScrubIndex === 'number'}
                  forceActive={isPreviewActive}
                  teaserPreloadEnabled
                />
              </div>

              <PreviewRatingOverlay>
                {renderRatingOverlay ? renderRatingOverlay(j) : null}
              </PreviewRatingOverlay>

              <PreviewMetaOverlay
                dur={dur}
                resObj={resObj}
                resLabel={resLabel}
                size={size}
              />

              <SpritePreloader
                src={spriteUrl}
                enabled={shouldPreloadSprite}
              />

              {showScrubberSpriteInThumb && spriteFrameStyle ? (
                <div className="absolute inset-x-0 top-0 bottom-[6px] z-[5]" aria-hidden="true">
                  <div className="h-full w-full" style={spriteFrameStyle} />
                </div>
              ) : null}

              {hasScrubber && hoveredThumbKey === k ? (
                <div
                  className="absolute inset-x-0 bottom-0 z-30 pointer-events-none opacity-100 transition-opacity duration-150"
                  onClick={(e) => e.stopPropagation()}
                  onMouseDown={(e) => e.stopPropagation()}
                >
                  <PreviewScrubber
                    className="pointer-events-auto px-1"
                    imageCount={scrubberCount}
                    activeIndex={activeScrubIndex}
                    onActiveIndexChange={(idx) => setScrubIndexForKey(k, idx)}
                    onIndexClick={(index) => {
                      setScrubIndexForKey(k, index)
                      handleScrubberClickIndex(j, index, scrubberCount)
                    }}
                    stepSeconds={scrubberStepSeconds}
                  />
                </div>
              ) : null}
            </div>
          </div>

          <div
            className={[
              'relative flex flex-col rounded-b-lg border-t border-black/5 bg-white dark:border-white/10 dark:bg-gray-900',
              footerMinHeightClass,
              contentPaddingClass,
            ].join(' ')}
            onClick={(e) => {
              handlePrimaryClick(e)
            }}
          >
            <div className="min-w-0">
              <div className="mt-0.5 flex min-h-6 items-center justify-between gap-2 min-w-0">
                <div className="min-w-0 flex items-center gap-1.5">
                  <div className={['min-w-0 truncate font-semibold text-gray-900 dark:text-white', titleClass].join(' ')}>
                    {model}
                  </div>

                  <ModelGenderIcon
                    gender={flags?.gender}
                    className="shrink-0"
                  />

                  <CountryFlag
                    country={country}
                    size="sm"
                    className="shrink-0"
                  />
                </div>

                {(renderIntegrityBadge || (showPostworkBadge && renderPostworkBadge)) ? (
                  <div className="relative z-20 shrink-0 flex h-6 items-center gap-2">
                    {renderIntegrityBadge ? renderIntegrityBadge(j) : null}
                    {showPostworkBadge && renderPostworkBadge ? renderPostworkBadge(postworkBadge) : null}
                  </div>
                ) : null}
              </div>

              <div className="mt-0.5 flex min-h-[18px] items-start gap-2 min-w-0">
                {isHot ? (
                  <span className="shrink-0 self-start rounded bg-amber-500/15 px-1.5 py-0.5 text-[11px] leading-none font-semibold text-amber-800 dark:text-amber-300">
                    HOT
                  </span>
                ) : null}

                <span
                  className={['min-w-0 truncate text-gray-500 dark:text-gray-400', sublineClass].join(' ')}
                  title={stripHotPrefix(file) || '—'}
                >
                  {stripHotPrefix(file) || '—'}
                </span>
              </div>
            </div>

            <div
              className="mt-2 shrink-0"
              onClick={(e) => e.stopPropagation()}
              onMouseDown={(e) => e.stopPropagation()}
            >
              <div className="w-full">
                <div className="w-full rounded-md bg-gray-50/70 p-1 ring-1 ring-black/5 dark:bg-white/5 dark:ring-white/10">
                  <RecordJobActions
                    job={jobForDetails(j)}
                    variant="table"
                    busy={busy}
                    collapseToMenu
                    compact={true}
                    isHot={isHot}
                    isFavorite={isFav}
                    isLiked={isLiked}
                    isWatching={isWatching}
                    onToggleWatch={onToggleWatch}
                    onToggleFavorite={onToggleFavorite}
                    onToggleLike={onToggleLike}
                    onToggleHot={onToggleHot}
                    onKeep={keepVideo}
                    onDelete={deleteVideo}
                    onSplit={onSplit}
                    onAddToDownloads={onAddToDownloads}
                    order={['watch', 'favorite', 'like', 'hot', 'keep', 'delete', 'split', 'details', 'add']}
                    className="w-full gap-1.5"
                  />
                </div>
              </div>
            </div>

            <div className="mt-2" onClick={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()}>
              <TagOverflowRow
                rowKey={k}
                tags={tags}
                activeTagSet={activeTagSet}
                lower={lower}
                onToggleTagFilter={onToggleTagFilter}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const FinishedDownloadsGalleryCard = memo(FinishedDownloadsGalleryCardInner)
export default FinishedDownloadsGalleryCard