// frontend\src\components\ui\Player.tsx
'use client'

import * as React from 'react'
import type { RecordJob } from '../../types'
import Card from './Card'
import videojs from 'video.js'
import type VideoJsPlayer from 'video.js/dist/types/player'
import 'video.js/dist/video-js.css'
import { createPortal } from 'react-dom'
import {
  ArrowsPointingOutIcon,
  ArrowsPointingInIcon,
  XMarkIcon,
} from '@heroicons/react/24/outline'
import { DEFAULT_PLAYER_START_MUTED } from './videoPolicy'
import RecordJobActions from './RecordJobActions'
import Button from './Button'
import { apiUrl, apiFetch } from '../../lib/api'
import LiveHlsVideo from './LiveHlsVideo'

const baseName = (p: string) => (p || '').replaceAll('\\', '/').split('/').pop() || ''
const stripHotPrefix = (s: string) => (s.startsWith('HOT ') ? s.slice(4) : s)
const lower = (s: string) => (s || '').trim().toLowerCase()

type StoredModelFlagsLite = {
  tags?: string
  favorite?: boolean
  liked?: boolean | null
  watching?: boolean | null
}

// Tags kommen aus dem ModelStore als String (meist komma-/semicolon-getrennt)
const parseTags = (raw?: string): string[] => {
  const s = String(raw ?? '').trim()
  if (!s) return []

  const parts = s
    .split(/[\n,;|]+/g)
    .map((p) => p.trim())
    .filter(Boolean)

  // stable dedupe (case-insensitive), aber original casing behalten
  const seen = new Set<string>()
  const out: string[] = []
  for (const p of parts) {
    const k = p.toLowerCase()
    if (seen.has(k)) continue
    seen.add(k)
    out.push(p)
  }

  // alphabetisch (case-insensitive)
  out.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
  return out
}

function formatDuration(ms: number): string {
  if (!Number.isFinite(ms) || ms <= 0) return '—'
  const totalSec = Math.floor(ms / 1000)
  const h = Math.floor(totalSec / 3600)
  const m = Math.floor((totalSec % 3600) / 60)
  const s = totalSec % 60
  if (h > 0) return `${h}h ${m}m`
  if (m > 0) return `${m}m ${s}s`
  return `${s}s`
}

function formatBytes(bytes?: number | null): string {
  if (typeof bytes !== 'number' || !Number.isFinite(bytes) || bytes <= 0) return '—'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let v = bytes
  let i = 0
  while (v >= 1024 && i < units.length - 1) {
    v /= 1024
    i++
  }
  const digits = i === 0 ? 0 : v >= 100 ? 0 : v >= 10 ? 1 : 2
  return `${v.toFixed(digits)} ${units[i]}`
}

function formatDateTime(v?: string | number | Date | null): string {
  if (!v) return '—'
  const d = v instanceof Date ? v : new Date(v)
  const t = d.getTime()
  if (!Number.isFinite(t)) return '—'
  return d.toLocaleString(undefined, {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

const pickNum = (...vals: any[]): number | null => {
  for (const v of vals) {
    const n = typeof v === 'string' ? Number(v) : v
    if (typeof n === 'number' && Number.isFinite(n) && n > 0) return n
  }
  return null
}

function formatFps(n?: number | null): string {
  if (!n || !Number.isFinite(n)) return '—'
  const digits = n >= 10 ? 0 : 2
  return `${n.toFixed(digits)} fps`
}

function formatResolution(h?: number | null): string {
  if (!h || !Number.isFinite(h)) return '—'
  return `${Math.round(h)}p`
}

function parseDateFromOutput(output?: string): Date | null {
  const fileRaw = baseName(output || '')
  const file = stripHotPrefix(fileRaw)

  if (!file) return null

  const stem = file.replace(/\.[^.]+$/, '')
  // model_MM_DD_YYYY__HH-MM-SS
  const m = stem.match(/_(\d{1,2})_(\d{1,2})_(\d{4})__(\d{1,2})-(\d{2})-(\d{2})$/)
  if (!m) return null

  const mm = Number(m[1])
  const dd = Number(m[2])
  const yyyy = Number(m[3])
  const hh = Number(m[4])
  const mi = Number(m[5])
  const ss = Number(m[6])

  if (![mm, dd, yyyy, hh, mi, ss].every((n) => Number.isFinite(n))) return null
  return new Date(yyyy, mm - 1, dd, hh, mi, ss)
}

const modelNameFromOutput = (output?: string) => {
  const fileRaw = baseName(output || '')
  const file = stripHotPrefix(fileRaw)
  if (!file) return '—'

  const stem = file.replace(/\.[^.]+$/, '')
  const m = stem.match(/^(.*?)_\d{1,2}_\d{1,2}_\d{4}__\d{1,2}-\d{2}-\d{2}$/)
  if (m?.[1]) return m[1]

  const i = stem.lastIndexOf('_')
  return i > 0 ? stem.slice(0, i) : stem
}

const sizeBytesOf = (job: RecordJob): number | null => {
  const anyJob = job as any
  const v = anyJob.sizeBytes ?? anyJob.fileSizeBytes ?? anyJob.bytes ?? anyJob.size ?? null
  return typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : null
}

function cn(...parts: Array<string | false | null | undefined>) {
  return parts.filter(Boolean).join(' ')
}

function useMediaQuery(query: string) {
  const [matches, setMatches] = React.useState(false)

  React.useEffect(() => {
    if (typeof window === 'undefined') return
    const mql = window.matchMedia(query)
    const onChange = () => setMatches(mql.matches)
    onChange()

    if (mql.addEventListener) mql.addEventListener('change', onChange)
    else mql.addListener(onChange)

    return () => {
      if (mql.removeEventListener) mql.removeEventListener('change', onChange)
      else mql.removeListener(onChange)
    }
  }, [query])

  return matches
}

function installAbsoluteTimelineShim(p: any) {
  if (!p || p.__absTimelineShimInstalled) return
  p.__absTimelineShimInstalled = true

  // Originale Methoden sichern
  p.__origCurrentTime = p.currentTime.bind(p)
  p.__origDuration = p.duration.bind(p)

  // Helper: relative Zeit (innerhalb des aktuell geladenen Segments) setzen,
  // OHNE server-seek auszulösen.
  p.__setRelativeTime = (rel: number) => {
    try {
      p.__origCurrentTime(Math.max(0, rel || 0))
    } catch {}
  }

  // currentTime(): GET => absolute Zeit, SET => absolute Zeit (-> server seek falls vorhanden)
  p.currentTime = function (v?: number) {
    const off = Number(this.__timeOffsetSec ?? 0) || 0

    // SET (Seekbar / API)
    if (typeof v === 'number' && Number.isFinite(v)) {
      const abs = Math.max(0, v)

      // Wenn wir server-seek können: als absolute Zeit interpretieren
      if (typeof this.__serverSeekAbs === 'function') {
        this.__serverSeekAbs(abs)
        return abs
      }

      // Fallback: innerhalb aktueller Datei relativ setzen
      return this.__origCurrentTime(Math.max(0, abs - off))
    }

    // GET
    const rel = Number(this.__origCurrentTime() ?? 0) || 0
    return Math.max(0, off + rel)
  }

  // duration(): immer volle Original-Dauer zurückgeben, wenn bekannt
  p.duration = function () {
    const full = Number(this.__fullDurationSec ?? 0) || 0
    if (full > 0) return full

    // Fallback: offset + segment-dauer
    const off = Number(this.__timeOffsetSec ?? 0) || 0
    const relDur = Number(this.__origDuration() ?? 0) || 0
    return Math.max(0, off + relDur)
  }
}

export type PlayerProps = {
  job: RecordJob
  expanded: boolean
  onClose: () => void
  onToggleExpand: () => void
  className?: string
  modelKey?: string

  // ✅ neu: ModelStore für Tags wie FinishedDownloads
  modelsByKey?: Record<string, StoredModelFlagsLite>

  // states für Buttons
  isHot?: boolean
  isFavorite?: boolean
  isLiked?: boolean
  isWatching?: boolean

  // actions
  onKeep?: (job: RecordJob) => void | Promise<void>
  onDelete?: (job: RecordJob) => void | Promise<void>
  onToggleHot?: (
  job: RecordJob
  ) =>
    | void
    | { ok?: boolean; oldFile?: string; newFile?: string }
    | Promise<void | { ok?: boolean; oldFile?: string; newFile?: string }>
  onToggleFavorite?: (job: RecordJob) => void | Promise<void>
  onToggleLike?: (job: RecordJob) => void | Promise<void>
  onToggleWatch?: (job: RecordJob) => void | Promise<void>

  // ✅ neu: laufenden Download stoppen
  onStopJob?: (id: string) => void | Promise<void>

  startMuted?: boolean
  startAtSec?: number
}

export default function Player({
  job,
  expanded,
  onClose,
  onToggleExpand,
  modelKey,
  modelsByKey,
  isHot = false,
  isFavorite = false,
  isLiked = false,
  isWatching = false,
  onKeep,
  onDelete,
  onToggleHot,
  onToggleFavorite,
  onToggleLike,
  onToggleWatch,
  onStopJob,
  startMuted = DEFAULT_PLAYER_START_MUTED,
  startAtSec = 0
}: PlayerProps) {
  const title = React.useMemo(
    () => baseName(job.output?.trim() || '') || job.id,
    [job.output, job.id]
  )

  const fileRaw = React.useMemo(() => baseName(job.output?.trim() || ''), [job.output])
  const playName = React.useMemo(() => baseName(job.output?.trim() || ''), [job.output])
  const sizeLabel = React.useMemo(() => formatBytes(sizeBytesOf(job)), [job])
  const anyJob = job as any

  const [fullDurationSec, setFullDurationSec] = React.useState<number>(() => {
    return (
      Number((job as any)?.meta?.durationSeconds) ||
      Number((job as any)?.durationSeconds) ||
      0
    )
  })

  const [metaReady, setMetaReady] = React.useState<boolean>(() => {
    // live ist egal, finished: erst mal false (wir holen gleich)
    return job.status === 'running'
  })

  const [metaDims, setMetaDims] = React.useState<{ h: number; fps: number | null }>(() => ({
    h: 0,
    fps: null,
  }))

  // ✅ Live nur, wenn es wirklich Preview/HLS-Assets gibt (nicht nur status==="running")
  const isRunning = job.status === 'running'
  const [hlsReady, setHlsReady] = React.useState(false)
  const isLive = isRunning && hlsReady

  // ✅ Backend erwartet "id=" (nicht "name=")
  // running: echte job.id (jobs-map lookup)
  // finished: Dateiname ohne Extension als Stem (wenn dein Backend finished so mapped)
  const finishedStem = React.useMemo(() => (playName || '').replace(/\.[^.]+$/, ''), [playName])

  const previewId = React.useMemo(
    () => (isRunning ? job.id : finishedStem || job.id),
    [isRunning, job.id, finishedStem]
  )

  React.useEffect(() => {
    if (isRunning) return
    if (fullDurationSec > 0) return

    const fileName = baseName(job.output?.trim() || '')
    if (!fileName) return

    let alive = true
    const ctrl = new AbortController()

    ;(async () => {
      try {
        // ✅ Backend-Endpoint existiert bei dir bereits: /api/record/done/meta
        // Ich gebe hier file mit, weil du finished oft darüber mapst.
        const url = apiUrl(`/api/record/done/meta?file=${encodeURIComponent(fileName)}`)
        const res = await apiFetch(url, { signal: ctrl.signal, cache: 'no-store' })
        if (!res.ok) return

        const j = await res.json()
        const dur = Number(j?.durationSeconds || j?.meta?.durationSeconds || 0) || 0
        if (!alive || dur <= 0) return

        setFullDurationSec(dur)

        // ✅ Video.js Duration-Shim nachträglich füttern + UI refreshen
        const p: any = playerRef.current
        if (p && !p.isDisposed?.()) {
          try {
            p.__fullDurationSec = dur
            p.trigger?.('durationchange')
            p.trigger?.('timeupdate')
          } catch {}
        }
      } catch {}
    })()

    return () => {
      alive = false
      ctrl.abort()
    }
  }, [isRunning, fullDurationSec, job.output])

  const isHotFile = fileRaw.startsWith('HOT ')
  const model = React.useMemo(() => {
    const k = (modelKey || '').trim()
    return k ? k : modelNameFromOutput(job.output)
  }, [modelKey, job.output])
  const file = React.useMemo(() => stripHotPrefix(fileRaw), [fileRaw])

  const runtimeLabel = React.useMemo(() => {
    const sec = Number(fullDurationSec || 0) || 0
    return sec > 0 ? formatDuration(sec * 1000) : '—'
  }, [fullDurationSec])

  // Datum: bevorzugt aus Dateiname, sonst startedAt/endedAt/createdAt — ✅ inkl. Uhrzeit
  const dateLabel = React.useMemo(() => {
    const fromName = parseDateFromOutput(job.output)
    if (fromName) return formatDateTime(fromName)

    const fallback =
      anyJob.startedAt ??
      anyJob.endedAt ??
      anyJob.createdAt ??
      anyJob.fileCreatedAt ??
      anyJob.ctime ??
      null

    const d = fallback ? new Date(fallback) : null
    return formatDateTime(d && Number.isFinite(d.getTime()) ? d : null)
  }, [job.output, anyJob.startedAt, anyJob.endedAt, anyJob.createdAt, anyJob.fileCreatedAt, anyJob.ctime])

  // ✅ Tags wie in FinishedDownloads: aus ModelStore (modelsByKey)
  const effectiveModelKey = React.useMemo(() => lower((modelKey || model || '').trim()), [modelKey, model])

  const tags = React.useMemo(() => {
    const flags = modelsByKey?.[effectiveModelKey]
    return parseTags(flags?.tags)
  }, [modelsByKey, effectiveModelKey])

  // Vorschaubild oben
  const previewA = React.useMemo(
    () => apiUrl(`/api/preview?id=${encodeURIComponent(previewId)}&file=thumbs.webp`),
    [previewId]
  )

  // ✅ Live-Stream URL (Playback) -> play=1 hält Preview sicher am Leben
  const liveHlsSrc = React.useMemo(
    () => apiUrl(`/api/preview?id=${encodeURIComponent(previewId)}&play=1&file=index_hq.m3u8`),
    [previewId]
  )

  const [previewSrc, setPreviewSrc] = React.useState(previewA)

  React.useEffect(() => {
    setPreviewSrc(previewA)
  }, [previewA])

  const videoH = React.useMemo(
    () => pickNum(metaDims.h, anyJob.videoHeight, anyJob.height, anyJob.meta?.height),
    [metaDims.h, anyJob.videoHeight, anyJob.height, anyJob.meta?.height]
  )

  const fps = React.useMemo(
    () => pickNum(metaDims.fps, anyJob.fps, anyJob.frameRate, anyJob.meta?.fps, anyJob.meta?.frameRate),
    [metaDims.fps, anyJob.fps, anyJob.frameRate, anyJob.meta?.fps, anyJob.meta?.frameRate]
  )

  const [intrH, setIntrH] = React.useState<number | null>(null)

  const resolutionLabel = React.useMemo(() => formatResolution(intrH ?? videoH), [intrH, videoH])
  const fpsLabel = React.useMemo(() => formatFps(fps), [fps])

  React.useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => e.key === 'Escape' && onClose()
    window.addEventListener('keydown', onKeyDown)
    return () => window.removeEventListener('keydown', onKeyDown)
  }, [onClose])

  const hlsIndexUrl = React.useMemo(() => {
    const u = `/api/preview?id=${encodeURIComponent(previewId)}&file=index_hq.m3u8&play=1`
    return apiUrl(isRunning ? `${u}&t=${Date.now()}` : u)
  }, [previewId, isRunning])

  React.useEffect(() => {
    if (!isRunning) {
      setHlsReady(false)
      return
    }

    let alive = true
    const ctrl = new AbortController()
    setHlsReady(false)

    const poll = async () => {
      for (let i = 0; i < 120 && alive && !ctrl.signal.aborted; i++) {
        try {
          const res = await apiFetch(hlsIndexUrl, {
            method: 'GET',
            cache: 'no-store',
            signal: ctrl.signal,
            headers: { 'cache-control': 'no-cache' },
          })

          if (res.ok) {
            const text = await res.text()

            // ✅ muss wirklich wie eine m3u8 aussehen und mindestens 1 Segment enthalten
            const hasM3u = text.includes('#EXTM3U')
            const hasSegment =
              /#EXTINF:/i.test(text) || /\.ts(\?|$)/i.test(text) || /\.m4s(\?|$)/i.test(text)

            if (hasM3u && hasSegment) {
              if (alive) setHlsReady(true)
              return
            }
          }
        } catch {}
        await new Promise((r) => setTimeout(r, 500))
      }
    }

    poll()
    return () => {
      alive = false
      ctrl.abort()
    }
  }, [isRunning, hlsIndexUrl])

  const buildVideoSrc = React.useCallback(
    (params: { file?: string; id?: string }) => {
      const qp = new URLSearchParams()
      if (params.file) qp.set('file', params.file)
      if (params.id) qp.set('id', params.id)
      return apiUrl(`/api/record/video?${qp.toString()}`)
    },
    []
  )

  const media = React.useMemo(() => {
    // ✅ Live wird NICHT mehr über Video.js gespielt
    if (isRunning) return { src: '', type: '' }

    // ✅ Warten bis meta.json existiert + Infos geladen
    if (!metaReady) return { src: '', type: '' }

    const file = baseName(job.output?.trim() || '')

    if (file) {
      const ext = file.toLowerCase().split('.').pop()
      const type =
        ext === 'mp4' ? 'video/mp4' : ext === 'ts' ? 'video/mp2t' : 'application/octet-stream'
      return { src: buildVideoSrc({ file }), type }
    }

    return { src: buildVideoSrc({ id: job.id }), type: 'video/mp4' }
  }, [isRunning, metaReady, job.output, job.id, buildVideoSrc])

  const containerRef = React.useRef<HTMLDivElement | null>(null)
  const playerRef = React.useRef<VideoJsPlayer | null>(null)
  const videoNodeRef = React.useRef<HTMLVideoElement | null>(null)

  const [mounted, setMounted] = React.useState(false)

  const updateIntrinsicDims = React.useCallback(() => {
    const p: any = playerRef.current
    if (!p || p.isDisposed?.()) return
    const h = typeof p.videoHeight === 'function' ? p.videoHeight() : 0
    if (typeof h === 'number' && h > 0 && Number.isFinite(h)) {
      setIntrH(h)
    }
  }, [])

  const captureGhostFrame = React.useCallback(() => {
    try {
      // Bevorzugt das echte HTMLVideoElement von Video.js
      const v =
        (playerRef.current as any)?.tech?.(true)?.el?.() ||
        (playerRef.current as any)?.el?.()?.querySelector?.('video.vjs-tech') ||
        videoNodeRef.current

      if (!v || !(v instanceof HTMLVideoElement)) return null

      // Muss Daten haben
      const vw = Number(v.videoWidth || 0)
      const vh = Number(v.videoHeight || 0)
      if (!Number.isFinite(vw) || !Number.isFinite(vh) || vw <= 0 || vh <= 0) return null

      // Canvas wiederverwenden
      let canvas = ghostFrameCanvasRef.current
      if (!canvas) {
        canvas = document.createElement('canvas')
        ghostFrameCanvasRef.current = canvas
      }

      // Kleine Größe reicht für Ghost (Performance)
      const MAX_W = 640
      const scale = Math.min(1, MAX_W / vw)
      const cw = Math.max(1, Math.round(vw * scale))
      const ch = Math.max(1, Math.round(vh * scale))

      if (canvas.width !== cw) canvas.width = cw
      if (canvas.height !== ch) canvas.height = ch

      const ctx = canvas.getContext('2d', { alpha: false })
      if (!ctx) return null

      // Frame zeichnen
      ctx.drawImage(v, 0, 0, cw, ch)

      // toDataURL kann bei CORS/tainted canvas werfen
      return canvas.toDataURL('image/jpeg', 0.78)
    } catch {
      return null
    }
  }, [])

  const playbackKey = React.useMemo(() => {
    return baseName(job.output?.trim() || '') || job.id
  }, [job.output, job.id])

  const normalizedStartAtSec = React.useMemo(() => {
    const n = Number(startAtSec)
    return Number.isFinite(n) && n >= 0 ? n : 0
  }, [startAtSec])

  // Merkt sich, für welchen "Open-Zustand" wir den initialen Seek schon angewendet haben
  const appliedStartSeekRef = React.useRef<string>('')

  React.useEffect(() => {
    if (isRunning) {
      setMetaReady(true)
      return
    }

    const fileName = baseName(job.output?.trim() || '')
    if (!fileName) {
      // wenn kein file → fail-open
      setMetaReady(true)
      return
    }

    let alive = true
    const ctrl = new AbortController()

    setMetaReady(false)

    ;(async () => {
      // Poll bis metaExists=true (oder fail-open nach N Versuchen)
      for (let i = 0; i < 80 && alive && !ctrl.signal.aborted; i++) {
        try {
          const url = apiUrl(`/api/record/done/meta?file=${encodeURIComponent(fileName)}`)
          const res = await apiFetch(url, { signal: ctrl.signal, cache: 'no-store' })

          if (res.ok) {
            const j = await res.json()

            const exists = Boolean(j?.metaExists)
            const dur = Number(j?.durationSeconds || 0) || 0
            const h = Number(j?.height || 0) || 0
            const fps = Number(j?.fps || 0) || 0

            // ✅ Infos neu in den Player-State übernehmen
            if (dur > 0) {
              setFullDurationSec(dur)
              const p: any = playerRef.current
              if (p && !p.isDisposed?.()) {
                try {
                  p.__fullDurationSec = dur
                  p.trigger?.('durationchange')
                  p.trigger?.('timeupdate')
                } catch {}
              }
            }

            if (h > 0) {
              setMetaDims({ h, fps: fps > 0 ? fps : null })
            }

            if (exists) {
              setMetaReady(true)
              return
            }
          }
        } catch {}

        await new Promise((r) => setTimeout(r, 250))
      }

      // fail-open (damit der Player nicht “für immer” blockiert)
      if (alive) setMetaReady(true)
    })()

    return () => {
      alive = false
      ctrl.abort()
    }
  }, [isRunning, playbackKey, job.output])

  // ✅ iOS Safari: visualViewport changes (address bar / bottom bar / keyboard) need a rerender
  const [, setVvTick] = React.useState(0)

  React.useEffect(() => {
    if (typeof window === 'undefined') return
    const vv = window.visualViewport
    if (!vv) return

    const bump = () => setVvTick((x) => x + 1)

    bump()
    vv.addEventListener('resize', bump)
    vv.addEventListener('scroll', bump)
    window.addEventListener('resize', bump)
    window.addEventListener('orientationchange', bump)

    return () => {
      vv.removeEventListener('resize', bump)
      vv.removeEventListener('scroll', bump)
      window.removeEventListener('resize', bump)
      window.removeEventListener('orientationchange', bump)
    }
  }, [])

  const [controlBarH, setControlBarH] = React.useState(30)
  const [portalTarget, setPortalTarget] = React.useState<HTMLElement | null>(null)

  const mini = !expanded

  type WinRect = { x: number; y: number; w: number; h: number }
  type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw'

  const isDesktop = useMediaQuery('(min-width: 640px)')
  const miniDesktop = mini && isDesktop
  const usePortal = expanded || miniDesktop

  const WIN_KEY = 'player_window_v1'

  const DEFAULT_W = 420
  const DEFAULT_H = 280
  const MARGIN = 12
  const MIN_W = 320
  const MIN_H = 200

  React.useEffect(() => {
    if (!mounted) return
    const p = playerRef.current
    if (!p || (p as any).isDisposed?.()) return

    const root = p.el() as HTMLElement | null
    if (!root) return

    const bar = root.querySelector('.vjs-control-bar') as HTMLElement | null
    if (!bar) return

    const update = () => {
      const h = Math.round(bar.getBoundingClientRect().height || 0)
      if (h > 0) setControlBarH(h)
    }

    update()

    let ro: ResizeObserver | null = null
    if (typeof ResizeObserver !== 'undefined') {
      ro = new ResizeObserver(update)
      ro.observe(bar)
    }

    window.addEventListener('resize', update)
    return () => {
      window.removeEventListener('resize', update)
      ro?.disconnect()
    }
  }, [mounted, expanded])

  React.useEffect(() => setMounted(true), [])

  React.useEffect(() => {
    if (!usePortal) {
      setPortalTarget(null)
      return
    }

    let el = document.getElementById('player-root') as HTMLElement | null
    if (!el) {
      el = document.createElement('div')
      el.id = 'player-root'
    }

    // Desktop / Expanded: im Top-Layer (Dialog) oder body
    let host: HTMLElement | null = null

    if (isDesktop) {
      const dialogs = Array.from(document.querySelectorAll('dialog[open]')) as HTMLElement[]
      host = dialogs.length ? dialogs[dialogs.length - 1] : null
    }

    host = host ?? document.body
    host.appendChild(el)

    el.style.position = 'relative'
    el.style.zIndex = '2147483647'

    setPortalTarget(el)
  }, [isDesktop, usePortal])

  React.useEffect(() => {
    const p: any = playerRef.current
    if (!p || p.isDisposed?.()) return
    if (isRunning) return // live nutzt Video.js nicht

    installAbsoluteTimelineShim(p)

    const fileName = baseName(job.output?.trim() || '')
    if (!fileName) return

    // volle Dauer: nimm was du hast (durationSeconds ist bei finished normalerweise da)
    const knownFull = Number(fullDurationSec || 0) || 0
    if (knownFull > 0) p.__fullDurationSec = knownFull

    // absolute server-seek
    p.__serverSeekAbs = (absSec: number) => {
      const abs = Math.max(0, Number(absSec) || 0)
      try {
        p.__origCurrentTime?.(abs)
        try {
          p.trigger?.('timeupdate')
        } catch {}
      } catch {
        try {
          p.currentTime?.(abs)
        } catch {}
      }
    }

    return () => {
      try {
        delete p.__serverSeekAbs
      } catch {}
    }
  }, [job.output, isRunning])

  React.useLayoutEffect(() => {
    if (!mounted) return
    if (!containerRef.current) return
    if (playerRef.current) return
    if (isRunning) return // ✅ neu: für Live keinen Video.js mounten
    if (!metaReady) return

    const videoEl = document.createElement('video')
    videoEl.className = 'video-js vjs-big-play-centered w-full h-full'
    videoEl.setAttribute('playsinline', 'true')

    containerRef.current.appendChild(videoEl)
    videoNodeRef.current = videoEl

    const p = videojs(videoEl, {
      autoplay: true,
      muted: startMuted,
      controls: true,
      preload: 'metadata',
      playsinline: true,
      responsive: true,
      fluid: false,
      fill: true,
      liveui: false,

      html5: {
        vhs: { lowLatencyMode: true },
      },

      inactivityTimeout: 0,

      controlBar: {
        skipButtons: { backward: 10, forward: 10 },
        volumePanel: { inline: false },
        children: [
          'skipBackward',
          'playToggle',
          'skipForward',
          'volumePanel',
          'currentTimeDisplay',
          'timeDivider',
          'durationDisplay',
          'progressControl',
          'spacer',
          'playbackRateMenuButton',
          'fullscreenToggle',
        ],
      },
      playbackRates: [0.5, 1, 1.25, 1.5, 2],
    })

    playerRef.current = p

    p.one('loadedmetadata', () => {
      updateIntrinsicDims()
    })

    p.userActive(true)
    p.on('userinactive', () => p.userActive(true))

    return () => {
      try {
        if (playerRef.current) {
          playerRef.current.dispose()
          playerRef.current = null
        }
      } finally {
        if (videoNodeRef.current) {
          videoNodeRef.current.remove()
          videoNodeRef.current = null
        }
      }
    }
  }, [mounted, startMuted, isRunning, metaReady, videoH, updateIntrinsicDims])

  React.useEffect(() => {
    const p = playerRef.current
    if (!p || (p as any).isDisposed?.()) return

    const el = p.el() as HTMLElement | null
    if (!el) return

    el.classList.toggle('is-live-download', Boolean(isLive))
  }, [isLive])

  const releaseMedia = React.useCallback(() => {
    const p = playerRef.current
    if (!p || (p as any).isDisposed?.()) return

    try {
      p.pause()
      ;(p as any).reset?.()
    } catch {}

    try {
      p.src({ src: '', type: 'video/mp4' } as any)
      ;(p as any).load?.()
    } catch {}
  }, [])

  const seekPlayerToAbsolute = React.useCallback((absSec: number) => {
    const p: any = playerRef.current
    if (!p || p.isDisposed?.()) return

    const target = Math.max(0, Number(absSec) || 0)

    try {
      // Shim ist installiert -> p.currentTime(...) interpretiert absolute Zeit korrekt
      const dur = Number(p.duration?.() ?? 0)
      const maxSeek = Number.isFinite(dur) && dur > 0 ? Math.max(0, dur - 0.05) : target
      p.currentTime(Math.min(target, maxSeek))
      p.trigger?.('timeupdate')
    } catch {
      try {
        p.currentTime(target)
      } catch {}
    }
  }, [])

  React.useEffect(() => {
    if (!mounted) return
    if (!isRunning && !metaReady) {
      releaseMedia()
      return
    }

    const p = playerRef.current
    if (!p || (p as any).isDisposed?.()) return

    const t = p.currentTime() || 0
    p.muted(startMuted)

    if (!media.src) {
      try {
        p.pause()
        ;(p as any).reset?.()
        p.error(null as any) // Video.js Error-State leeren
      } catch {}
      return
    }

    ;(p as any).__timeOffsetSec = 0

    // volle Dauer kennen wir bei finished meistens schon:
    const knownFull = Number(fullDurationSec || 0) || 0
    ;(p as any).__fullDurationSec = knownFull

    // ✅ NICHT neu setzen, wenn Source identisch ist (verhindert "cancelled" durch unnötige Reloads)
    const curSrc = String((p as any).currentSrc?.() || '')

    // ✅ immer zurücksetzen, sobald der Effekt für diese media.src läuft
    // (auch wenn wir die gleiche Source behalten)
    appliedStartSeekRef.current = ''

    if (curSrc && curSrc === media.src) {
      const ret = p.play?.()
      if (ret && typeof (ret as any).catch === 'function') (ret as Promise<void>).catch(() => {})
      return
    }

    p.src({ src: media.src, type: media.type })

    const tryPlay = () => {
      const ret = p.play?.()
      if (ret && typeof (ret as any).catch === 'function') {
        ;(ret as Promise<void>).catch(() => {})
      }
    }

    p.one('loadedmetadata', () => {
      if ((p as any).isDisposed?.()) return
      updateIntrinsicDims()

      // ✅ volle Dauer: aus bekannten Daten (nicht aus p.duration())
      try {
        const knownFull = Number(fullDurationSec || 0) || 0
        if (knownFull > 0) (p as any).__fullDurationSec = knownFull
      } catch {}

      try {
        p.playbackRate(1)
      } catch {}

      const isHls = /mpegurl/i.test(media.type)

      // ✅ initiale Position wiederherstellen, aber RELATIV (ohne server-seek)
      if (t > 0 && !isHls) {
        try {
          const off = Number((p as any).__timeOffsetSec ?? 0) || 0
          const rel = Math.max(0, t - off)
          ;(p as any).__setRelativeTime?.(rel)
        } catch {}
      }

      try {
        p.trigger?.('timeupdate')
      } catch {}

      tryPlay()
    })

    tryPlay()
  }, [mounted, isRunning, metaReady, media.src, media.type, startMuted, updateIntrinsicDims, fullDurationSec, releaseMedia])

  React.useEffect(() => {
    if (!mounted) return
    if (isRunning) return // Live spielt nicht über Video.js
    if (!metaReady) return
    if (!media.src) return

    const p: any = playerRef.current
    if (!p || p.isDisposed?.()) return

    // Nur seeken, wenn wirklich eine Startzeit angefordert wurde
    if (!(normalizedStartAtSec > 0)) {
      appliedStartSeekRef.current = ''
      return
    }

    const seekSig = `${playbackKey}|${media.src}|${normalizedStartAtSec.toFixed(3)}`
    if (appliedStartSeekRef.current === seekSig) return

    let cancelled = false

    const apply = () => {
      if (cancelled) return

      const pp: any = playerRef.current
      if (!pp || pp.isDisposed?.()) return

      // ✅ nur seeken, wenn die AKTUELLE source wirklich geladen ist
      const currentSrc = String(pp.currentSrc?.() || '')
      if (!currentSrc || currentSrc !== media.src) return

      // readyState >= 1 => metadata verfügbar
      const techEl =
        pp.tech?.(true)?.el?.() ||
        pp.el?.()?.querySelector?.('video.vjs-tech')

      const readyState =
        techEl instanceof HTMLVideoElement ? Number(techEl.readyState || 0) : 0

      if (readyState < 1) return

      seekPlayerToAbsolute(normalizedStartAtSec)
      appliedStartSeekRef.current = seekSig

      try {
        const ret = pp.play?.()
        if (ret && typeof ret.catch === 'function') ret.catch(() => {})
      } catch {}
    }

    // ✅ Erst versuchen (falls schon geladen)
    apply()
    if (appliedStartSeekRef.current === seekSig) return

    // ✅ Dann auf Events warten (neue Source lädt noch)
    const onLoaded = () => apply()
    p.one?.('loadedmetadata', onLoaded)
    p.one?.('canplay', onLoaded)
    p.one?.('durationchange', onLoaded)

    // Extra fallback (manche Browser/Event-Reihenfolgen zickig)
    const t1 = window.setTimeout(apply, 0)
    const t2 = window.setTimeout(apply, 120)

    return () => {
      cancelled = true
      window.clearTimeout(t1)
      window.clearTimeout(t2)
      try { p.off?.('loadedmetadata', onLoaded) } catch {}
      try { p.off?.('canplay', onLoaded) } catch {}
      try { p.off?.('durationchange', onLoaded) } catch {}
    }
  }, [
    mounted,
    isRunning,
    metaReady,
    media.src,
    playbackKey,
    normalizedStartAtSec,
    seekPlayerToAbsolute,
  ])

  React.useEffect(() => {
    if (!mounted) return
    const p = playerRef.current
    if (!p || (p as any).isDisposed?.()) return

    const onErr = () => {
      if (job.status === 'running') setHlsReady(false)
    }

    p.on('error', onErr)
    return () => {
      try {
        p.off('error', onErr)
      } catch {}
    }
  }, [mounted, job.status])

  React.useEffect(() => {
    const p = playerRef.current
    if (!p || (p as any).isDisposed?.()) return
    queueMicrotask(() => p.trigger('resize'))
  }, [expanded])

  React.useEffect(() => {
    const onRelease = (ev: Event) => {
      const detail = (ev as CustomEvent<{ file?: string }>).detail
      const file = (detail?.file ?? '').trim()
      if (!file) return

      const current = baseName(job.output?.trim() || '')
      if (current && current === file) releaseMedia()
    }

    window.addEventListener('player:release', onRelease as EventListener)
    return () => window.removeEventListener('player:release', onRelease as EventListener)
  }, [job.output, releaseMedia])

  React.useEffect(() => {
    const onCloseIfFile = (ev: Event) => {
      const detail = (ev as CustomEvent<{ file?: string }>).detail
      const file = (detail?.file ?? '').trim()
      if (!file) return

      const current = baseName(job.output?.trim() || '')
      if (current && current === file) {
        releaseMedia()
        onClose()
      }
    }

    window.addEventListener('player:close', onCloseIfFile as EventListener)
    return () => window.removeEventListener('player:close', onCloseIfFile as EventListener)
  }, [job.output, releaseMedia, onClose])

  const getViewport = () => {
    if (typeof window === 'undefined') return { w: 0, h: 0, ox: 0, oy: 0, bottomInset: 0 }

    const vv = window.visualViewport
    if (vv && Number.isFinite(vv.width) && Number.isFinite(vv.height)) {
      const w = Math.floor(vv.width)
      const h = Math.floor(vv.height)

      const ox = Math.floor(vv.offsetLeft || 0)
      const oy = Math.floor(vv.offsetTop || 0)

      // Space below the visual viewport (Safari bottom bar / keyboard)
      const bottomInset = Math.max(0, Math.floor(window.innerHeight - (vv.height + vv.offsetTop)))

      return { w, h, ox, oy, bottomInset }
    }

    const de = document.documentElement
    const w = de?.clientWidth || window.innerWidth
    const h = de?.clientHeight || window.innerHeight
    return { w, h, ox: 0, oy: 0, bottomInset: 0 }
  }

  const prevViewportRef = React.useRef<{ w: number; h: number } | null>(null)

  React.useEffect(() => {
    if (typeof window === 'undefined') return
    const { w, h } = getViewport()
    prevViewportRef.current = { w, h }
  }, [])

  const getVideoAspectRatio = React.useCallback(() => {
    // bevorzugt echtes Video (intrinsic), dann Meta, fallback 16:9
    const anyJob = job as any

    const w =
      pickNum(
        (playerRef.current as any)?.videoWidth?.(),
        anyJob.videoWidth,
        anyJob.width,
        anyJob.meta?.width
      ) ?? 0

    const h =
      pickNum(
        intrH,
        (playerRef.current as any)?.videoHeight?.(),
        anyJob.videoHeight,
        anyJob.height,
        anyJob.meta?.height
      ) ?? 0

    if (w > 0 && h > 0) return w / h

    // Fallback wenn nur Höhe bekannt ist
    // (lieber stabiler fallback als kaputt)
    return 16 / 9
  }, [job, intrH])

  const clampMiniRect = React.useCallback(
    (r: { x: number; y: number; w: number; h: number }) => {
      if (typeof window === 'undefined') return r

      const ratio = getVideoAspectRatio()
      const BAR_H = 30 // gewünschter fixer Platz unter dem Video für die Controlbar

      const { w: vw, h: vh } = getViewport()
      const maxW = vw - MARGIN * 2

      // Höhe darf nur so groß werden, dass Video + 30px reinpasst
      const maxVideoH = Math.max(1, vh - MARGIN * 2 - BAR_H)
      const minVideoH = Math.max(1, MIN_H - BAR_H)

      let w = Math.max(MIN_W, Math.min(r.w, maxW))
      let videoH = w / ratio

      if (videoH < minVideoH) {
        videoH = minVideoH
        w = videoH * ratio
      }

      if (videoH > maxVideoH) {
        videoH = maxVideoH
        w = videoH * ratio
      }

      // final width nochmal an viewport clampen
      if (w > maxW) {
        w = maxW
        videoH = w / ratio
      }

      const h = Math.round(videoH + BAR_H)

      const x = Math.max(MARGIN, Math.min(r.x, vw - w - MARGIN))
      const y = Math.max(MARGIN, Math.min(r.y, vh - h - MARGIN))

      return { x, y, w: Math.round(w), h }
    },
    [getVideoAspectRatio]
  )

  const loadRect = React.useCallback(() => {
    if (typeof window === 'undefined') return { x: MARGIN, y: MARGIN, w: DEFAULT_W, h: DEFAULT_H }

    try {
      const raw = window.localStorage.getItem(WIN_KEY)
      if (raw) {
        const v = JSON.parse(raw) as Partial<{ x: number; y: number; w: number; h: number }>
        if (typeof v.x === 'number' && typeof v.y === 'number' && typeof v.w === 'number' && typeof v.h === 'number') {
          return clampMiniRect({ x: v.x, y: v.y, w: v.w, h: v.h })
        }
      }
    } catch {}

    const { w: vw, h: vh } = getViewport()
    const w = DEFAULT_W
    const h = DEFAULT_H // wird gleich in clampMiniRect korrekt berechnet

    const x = Math.max(MARGIN, vw - w - MARGIN)
    const y = Math.max(MARGIN, vh - h - MARGIN)
    return clampMiniRect({ x, y, w, h })
  }, [clampMiniRect])

  const [win, setWin] = React.useState<WinRect>(() => loadRect())
  const isNarrowMini = miniDesktop && win.w < 380

  const saveRect = React.useCallback((r: WinRect) => {
    if (typeof window === 'undefined') return
    try {
      window.localStorage.setItem(WIN_KEY, JSON.stringify(r))
    } catch {}
  }, [])

  const winRef = React.useRef(win)
  React.useEffect(() => {
    winRef.current = win
  }, [win])

  React.useEffect(() => {
    if (!miniDesktop) return
    setWin(loadRect())
  }, [miniDesktop, loadRect])

  React.useEffect(() => {
    if (!miniDesktop) return

    const onResize = () => {
      const prev = prevViewportRef.current
      const { w: newVw, h: newVh } = getViewport()

      setWin((r) => {
        // Falls wir keinen vorherigen Viewport haben: einfach clampen
        if (!prev) {
          return clampMiniRect(r)
        }

        const EDGE_SNAP = 24

        // ✅ Kantenabstand gegen den VORHERIGEN Viewport prüfen
        const leftDist = r.x - MARGIN
        const rightDist = (prev.w - MARGIN) - (r.x + r.w)
        const bottomDist = (prev.h - MARGIN) - (r.y + r.h)

        const wasDockedLeft = Math.abs(leftDist) <= EDGE_SNAP
        const wasDockedRight = Math.abs(rightDist) <= EDGE_SNAP
        const wasDockedBottom = Math.abs(bottomDist) <= EDGE_SNAP

        let next = clampMiniRect(r)

        if (wasDockedBottom) {
          next = { ...next, y: Math.max(MARGIN, newVh - next.h - MARGIN) }
        }

        if (wasDockedRight) {
          next = { ...next, x: Math.max(MARGIN, newVw - next.w - MARGIN) }
        } else if (wasDockedLeft) {
          next = { ...next, x: MARGIN }
        }

        return clampMiniRect(next)
      })

      // ✅ neuen Viewport für das nächste Resize merken
      prevViewportRef.current = { w: newVw, h: newVh }
    }

    // Falls der Effect neu aktiviert wird (z.B. Wechsel auf Desktop), initialen Viewport setzen
    prevViewportRef.current = (() => {
      const { w, h } = getViewport()
      return { w, h }
    })()

    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [miniDesktop, clampMiniRect])

  // Video.js resize triggern, wenn sich Fenstergröße ändert
  const vjsResizeRafRef = React.useRef<number | null>(null)
  React.useEffect(() => {
    const p = playerRef.current
    if (!p || (p as any).isDisposed?.()) return

    if (vjsResizeRafRef.current != null) cancelAnimationFrame(vjsResizeRafRef.current)
    vjsResizeRafRef.current = requestAnimationFrame(() => {
      vjsResizeRafRef.current = null
      try {
        p.trigger('resize')
      } catch {}
    })

    return () => {
      if (vjsResizeRafRef.current != null) {
        cancelAnimationFrame(vjsResizeRafRef.current)
        vjsResizeRafRef.current = null
      }
    }
  }, [miniDesktop, win.w, win.h])

  const [isResizing, setIsResizing] = React.useState(false)
  const [isDragging, setIsDragging] = React.useState(false)
  const [snapPreviewRect, setSnapPreviewRect] = React.useState<WinRect | null>(null)
  const [ghostFrameSrc, setGhostFrameSrc] = React.useState<string | null>(null)
  const ghostFrameCanvasRef = React.useRef<HTMLCanvasElement | null>(null)

  // pointermove sehr häufig -> 1x pro Frame committen
  const dragRafRef = React.useRef<number | null>(null)
  const pendingPosRef = React.useRef<{ x: number; y: number } | null>(null)
  const draggingRef = React.useRef<null | { sx: number; sy: number; start: WinRect }>(null)

  const applySnap = React.useCallback((r: WinRect): WinRect => {
    const { w: vw, h: vh } = getViewport()
    const leftEdge = MARGIN
    const rightEdge = vw - r.w - MARGIN
    const bottomEdge = vh - r.h - MARGIN
    const centerX = r.x + r.w / 2
    const dockLeft = centerX < vw / 2
    return { ...r, x: dockLeft ? leftEdge : rightEdge, y: bottomEdge }
  }, [])

  const onDragMove = React.useCallback(
    (ev: PointerEvent) => {
      const s = draggingRef.current
      if (!s) return

      const dx = ev.clientX - s.sx
      const dy = ev.clientY - s.sy

      const start = s.start
      const next = clampMiniRect({ x: start.x + dx, y: start.y + dy, w: start.w, h: start.h })

      pendingPosRef.current = { x: next.x, y: next.y }

      // ✅ Snap-Vorschau (wohin beim Loslassen gedockt wird)
      setSnapPreviewRect(applySnap(next))

      if (dragRafRef.current == null) {
        dragRafRef.current = requestAnimationFrame(() => {
          dragRafRef.current = null
          const p = pendingPosRef.current
          if (!p) return
          setWin((cur) => ({ ...cur, x: p.x, y: p.y }))
        })
      }
    },
    [clampMiniRect, applySnap]
  )

  const endDrag = React.useCallback(() => {
    if (!draggingRef.current) return
    setIsDragging(false)
    setSnapPreviewRect(null)

    if (dragRafRef.current != null) {
      cancelAnimationFrame(dragRafRef.current)
      dragRafRef.current = null
    }

    draggingRef.current = null
    window.removeEventListener('pointermove', onDragMove)
    window.removeEventListener('pointerup', endDrag)

    setWin((cur) => {
      const snapped = applySnap(clampMiniRect(cur))
      queueMicrotask(() => saveRect(snapped))
      return snapped
    })
  }, [onDragMove, applySnap, clampMiniRect, saveRect])

  const beginDrag = React.useCallback(
    (e: React.PointerEvent) => {
      if (!miniDesktop) return
      if (isResizing) return
      if (e.button !== 0) return

      e.preventDefault()
      e.stopPropagation()

      const start = winRef.current
      draggingRef.current = { sx: e.clientX, sy: e.clientY, start }
      setIsDragging(true)

      // ✅ möglichst echten aktuellen Frame für Ghost verwenden (Fallback bleibt previewSrc)
      const frame = captureGhostFrame()
      setGhostFrameSrc(frame)

      // ✅ sofortige Vorschau anzeigen
      setSnapPreviewRect(applySnap(start))

      window.addEventListener('pointermove', onDragMove)
      window.addEventListener('pointerup', endDrag)
    },
    [miniDesktop, isResizing, onDragMove, endDrag, applySnap, captureGhostFrame]
  )

  // pointermove kommt extrem oft -> wir committen max. 1x pro Frame
  const resizeRafRef = React.useRef<number | null>(null)
  const pendingRectRef = React.useRef<WinRect | null>(null)
  const resizingRef = React.useRef<null | { dir: ResizeDir; sx: number; sy: number; start: WinRect; ratio: number }>(null)

  const onResizeMove = React.useCallback(
    (ev: PointerEvent) => {
      const s = resizingRef.current
      if (!s) return

      const dx = ev.clientX - s.sx
      const dy = ev.clientY - s.sy
      const ratio = s.ratio

      const fromW = s.dir.includes('w')
      const fromE = s.dir.includes('e')
      const fromN = s.dir.includes('n')
      const fromS = s.dir.includes('s')

      let w = s.start.w
      let h = s.start.h
      let x = s.start.x
      let y = s.start.y

      const { w: vw, h: vh } = getViewport()
      const EDGE_SNAP = 24

      const startRight = s.start.x + s.start.w
      const startBottom = s.start.y + s.start.h

      const anchoredRight = Math.abs(vw - MARGIN - startRight) <= EDGE_SNAP
      const anchoredBottom = Math.abs(vh - MARGIN - startBottom) <= EDGE_SNAP

      const fitFromW = (newW: number) => {
        newW = Math.max(MIN_W, newW)
        let newH = newW / ratio
        if (newH < MIN_H) {
          newH = MIN_H
          newW = newH * ratio
        }
        return { newW, newH }
      }

      const fitFromH = (newH: number) => {
        newH = Math.max(MIN_H, newH)
        let newW = newH * ratio
        if (newW < MIN_W) {
          newW = MIN_W
          newH = newW / ratio
        }
        return { newW, newH }
      }

      const isCorner = (fromE || fromW) && (fromN || fromS)

      if (isCorner) {
        const useWidth = Math.abs(dx) >= Math.abs(dy)
        if (useWidth) {
          const rawW = fromE ? s.start.w + dx : s.start.w - dx
          const { newW, newH } = fitFromW(rawW)
          w = newW
          h = newH
        } else {
          const rawH = fromS ? s.start.h + dy : s.start.h - dy
          const { newW, newH } = fitFromH(rawH)
          w = newW
          h = newH
        }
        if (fromW) x = s.start.x + (s.start.w - w)
        if (fromN) y = s.start.y + (s.start.h - h)
      } else if (fromE || fromW) {
        const rawW = fromE ? s.start.w + dx : s.start.w - dx
        const { newW, newH } = fitFromW(rawW)
        w = newW
        h = newH
        if (fromW) x = s.start.x + (s.start.w - w)
        y = anchoredBottom ? s.start.y + (s.start.h - h) : s.start.y
      } else if (fromN || fromS) {
        const rawH = fromS ? s.start.h + dy : s.start.h - dy
        const { newW, newH } = fitFromH(rawH)
        w = newW
        h = newH
        if (fromN) y = s.start.y + (s.start.h - h)
        if (anchoredRight) x = s.start.x + (s.start.w - w)
        else x = s.start.x
      }

      const next = clampMiniRect({ x, y, w, h })
      pendingRectRef.current = next

      if (resizeRafRef.current == null) {
        resizeRafRef.current = requestAnimationFrame(() => {
          resizeRafRef.current = null
          const r = pendingRectRef.current
          if (r) setWin(r)
        })
      }
    },
    [clampMiniRect]
  )

  const endResize = React.useCallback(() => {
    if (!resizingRef.current) return
    setIsResizing(false)
    setSnapPreviewRect(null)
    setGhostFrameSrc(null)

    if (resizeRafRef.current != null) {
      cancelAnimationFrame(resizeRafRef.current)
      resizeRafRef.current = null
    }

    resizingRef.current = null
    window.removeEventListener('pointermove', onResizeMove)
    window.removeEventListener('pointerup', endResize)
    saveRect(winRef.current)
  }, [onResizeMove, saveRect])

  const beginResize = React.useCallback(
    (dir: ResizeDir) => (e: React.PointerEvent) => {
      if (!miniDesktop) return
      if (e.button !== 0) return
      e.preventDefault()
      e.stopPropagation()

      const start = winRef.current
      resizingRef.current = { dir, sx: e.clientX, sy: e.clientY, start, ratio: start.w / start.h }
      setIsResizing(true)

      window.addEventListener('pointermove', onResizeMove)
      window.addEventListener('pointerup', endResize)
    },
    [miniDesktop, onResizeMove, endResize]
  )

  const [canHover, setCanHover] = React.useState(false)
  const [chromeHover, setChromeHover] = React.useState(false)

  React.useEffect(() => {
    const mq = window.matchMedia?.('(hover: hover) and (pointer: fine)')
    const update = () => setCanHover(Boolean(mq?.matches))
    update()
    mq?.addEventListener?.('change', update)
    return () => mq?.removeEventListener?.('change', update)
  }, [])

  const dragUiActive = miniDesktop && (chromeHover || isDragging || isResizing)
  const [stopPending, setStopPending] = React.useState(false)

  React.useEffect(() => {
    if (job.status !== 'running') setStopPending(false)
  }, [job.id, job.status])

  if (!mounted) return null
  if (usePortal && !portalTarget) return null

  const overlayBtn =
    'inline-flex items-center justify-center rounded-md p-2 transition ' +
    'bg-white/75 text-gray-900 ring-1 ring-black/10 hover:bg-white/90 active:scale-[0.98] ' +
    'dark:bg-black/45 dark:text-white dark:ring-white/10 dark:hover:bg-black/60 ' +
    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500'

  const phaseRaw = String((job as any).phase ?? '')
  const phase = phaseRaw.toLowerCase()
  const isStoppingLike = phase === 'stopping' || phase === 'remuxing' || phase === 'moving'
  const stopDisabled = !onStopJob || !isRunning || isStoppingLike || stopPending

  const footerRight = (
    <div className="flex items-center gap-1 min-w-0">
      {isRunning ? (
        <>
          <Button
            variant="primary"
            color="red"
            size="sm"
            rounded="md"
            disabled={stopDisabled}
            title={isStoppingLike || stopPending ? 'Stoppe…' : 'Stop'}
            aria-label={isStoppingLike || stopPending ? 'Stoppe…' : 'Stop'}
            onClick={async (e) => {
              e.preventDefault()
              e.stopPropagation()
              if (stopDisabled) return
              try {
                setStopPending(true)
                await onStopJob?.(job.id)
              } finally {
                setStopPending(false)
              }
            }}
            className={cn('shadow-none shrink-0', miniDesktop && isNarrowMini && 'px-2')}
          >
            <span className="whitespace-nowrap">
              {isStoppingLike || stopPending ? 'Stoppe…' : miniDesktop && isNarrowMini ? 'Stop' : 'Stoppen'}
            </span>
          </Button>

          <RecordJobActions
            job={job}
            variant="overlay"
            collapseToMenu
            busy={isStoppingLike || stopPending}
            isFavorite={isFavorite}
            isLiked={isLiked}
            isWatching={isWatching}
            onToggleWatch={onToggleWatch ? (j) => onToggleWatch(j) : undefined}
            onToggleFavorite={onToggleFavorite ? (j) => onToggleFavorite(j) : undefined}
            onToggleLike={onToggleLike ? (j) => onToggleLike(j) : undefined}
            order={['watch', 'favorite', 'like', 'details']}
            className="gap-1 min-w-0 flex-1"
          />
        </>
      ) : (
        <RecordJobActions
          job={job}
          variant="overlay"
          collapseToMenu
          isHot={isHot || isHotFile}
          isFavorite={isFavorite}
          isLiked={isLiked}
          isWatching={isWatching}
          onToggleWatch={onToggleWatch ? (j) => onToggleWatch(j) : undefined}
          onToggleFavorite={onToggleFavorite ? (j) => onToggleFavorite(j) : undefined}
          onToggleLike={onToggleLike ? (j) => onToggleLike(j) : undefined}
          onToggleHot={
            onToggleHot
              ? async (j) => {
                  releaseMedia()
                  await new Promise((r) => setTimeout(r, 150))
                  await onToggleHot(j)
                  await new Promise((r) => setTimeout(r, 0))
                  const p = playerRef.current
                  if (p && !(p as any).isDisposed?.()) {
                    const ret = p.play?.()
                    if (ret && typeof (ret as any).catch === 'function') {
                      ;(ret as Promise<void>).catch(() => {})
                    }
                  }
                }
              : undefined
          }
          onKeep={
            onKeep
              ? async (j) => {
                  releaseMedia()
                  onClose()
                  await new Promise((r) => setTimeout(r, 150))
                  await onKeep(j)
                }
              : undefined
          }
          onDelete={
            onDelete
              ? async (j) => {
                  releaseMedia()
                  onClose()
                  await new Promise((r) => setTimeout(r, 150))
                  await onDelete(j)
                }
              : undefined
          }
          order={['watch', 'favorite', 'like', 'hot', 'keep', 'delete', 'details']}
          className="gap-1 min-w-0 flex-1"
        />
      )}
    </div>
  )

  const fullSize = expanded || miniDesktop

  const metaBottom = isRunning
    ? `calc(4px + env(safe-area-inset-bottom))`
    : `calc(${controlBarH + 2}px + env(safe-area-inset-bottom))`

  const topOverlayTop = miniDesktop ? 'top-2' : 'top-2'
  const showSideInfo = expanded && isDesktop

  const videoChrome = (
    <div
      className={cn(
        'relative overflow-visible',
        expanded ? 'flex-1 min-h-0' : miniDesktop ? 'flex-1 min-h-0' : 'aspect-video'
      )}
      onMouseEnter={() => {
        if (!miniDesktop || !canHover) return
        setChromeHover(true)
      }}
      onMouseLeave={() => {
        if (!miniDesktop || !canHover) return
        setChromeHover(false)
      }}
    >
      <div
        className={cn('relative w-full h-full', miniDesktop && 'vjs-mini')}
        style={{ ['--vjs-controlbar-h' as any]: `${controlBarH}px` }}
      >
        {isRunning ? (
          <div className="absolute inset-0 bg-black">
            <LiveHlsVideo
              src={liveHlsSrc}
              muted={startMuted}
              className="w-full h-full object-contain object-bottom"
            />

            <div className="absolute right-2 bottom-2 z-[60] pointer-events-none inline-flex items-center gap-1.5 rounded-full bg-red-600/90 px-2 py-1 text-[11px] font-semibold text-white shadow-sm">
              <span className="inline-block size-1.5 rounded-full bg-white animate-pulse" />
              Live
            </div>
          </div>
        ) : (
          <div ref={containerRef} className="absolute inset-0" />
        )}

        {/* ✅ Top overlay */}
        <div
          className={cn(
            'absolute inset-x-0 z-30 pointer-events-none',
            topOverlayTop === 'top-2' ? 'top-0' : 'top-0'
          )}
        >
          <div className="pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-black/35 to-transparent" />
          <div className={cn('absolute inset-x-2', topOverlayTop)}>
            <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-start gap-2">
              <div className="min-w-0 pointer-events-auto overflow-visible">{showSideInfo ? null : footerRight}</div>

              {miniDesktop ? (
                <button
                  type="button"
                  aria-label="Player-Fenster verschieben"
                  title="Ziehen zum Verschieben"
                  onPointerDown={beginDrag}
                  onClick={(e) => {
                    e.preventDefault()
                    e.stopPropagation()
                  }}
                  className={cn(
                    overlayBtn,
                    'px-3 gap-1 cursor-grab active:cursor-grabbing select-none',
                    dragUiActive ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none -translate-y-1',
                    isDragging && 'scale-[0.98] opacity-90'
                  )}
                >
                  <span className="h-1 w-1 rounded-full bg-black/35 dark:bg-white/35" />
                  <span className="h-1 w-1 rounded-full bg-black/35 dark:bg-white/35" />
                  <span className="h-1 w-1 rounded-full bg-black/35 dark:bg-white/35" />
                </button>
              ) : null}

              <div className="shrink-0 flex items-center gap-1 pointer-events-auto">
                <button
                  type="button"
                  className={overlayBtn}
                  onClick={onToggleExpand}
                  aria-label={expanded ? 'Minimieren' : 'Maximieren'}
                  title={expanded ? 'Minimieren' : 'Maximieren'}
                >
                  {expanded ? <ArrowsPointingInIcon className="h-5 w-5" /> : <ArrowsPointingOutIcon className="h-5 w-5" />}
                </button>

                <button type="button" className={overlayBtn} onClick={onClose} aria-label="Schließen" title="Schließen">
                  <XMarkIcon className="h-5 w-5" />
                </button>
              </div>
            </div>
          </div>
        </div>

        <div
          className={cn(
            'player-ui pointer-events-none absolute inset-x-2 z-50',
            'flex items-end justify-between gap-2',
            'transition-all duration-200 ease-out'
          )}
          style={{ bottom: metaBottom }}
        >
          <div className="min-w-0">
            <div className="truncate text-sm font-semibold text-white">{model}</div>
            <div className="truncate text-[11px] text-white/80">
              <span className="inline-flex items-center gap-1 min-w-0 align-middle">
                <span className="truncate">{file || title}</span>

                {isHot || isHotFile ? (
                  <span className="shrink-0 rounded bg-amber-500/25 px-1.5 py-0.5 font-semibold text-white">HOT</span>
                ) : null}
              </span>
            </div>
          </div>

          <div className="shrink-0 flex items-center gap-1.5 text-[11px] text-white">
            {resolutionLabel !== '—' ? (
              <span className="rounded bg-black/40 px-1.5 py-0.5 font-medium">{resolutionLabel}</span>
            ) : null}

            {!isRunning ? (
              <span className="rounded bg-black/40 px-1.5 py-0.5 font-medium">{runtimeLabel}</span>
            ) : null}

            {sizeLabel !== '—' ? <span className="rounded bg-black/40 px-1.5 py-0.5 font-medium">{sizeLabel}</span> : null}
          </div>
        </div>
      </div>
    </div>
  )

  const sidePanel = (
    <div className="w-[360px] shrink-0 border-r border-white/10 bg-black/40 text-white">
      <div className="h-full p-4 flex flex-col gap-3 overflow-y-auto">
        <div className="rounded-lg overflow-hidden ring-1 ring-white/10 bg-black/30">
          <div className="relative aspect-video">
            {/* Snapshot-Frame bevorzugen, sonst Preview-Fallback */}
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={previewSrc}
              alt=""
              className="absolute inset-0 h-full w-full object-contain opacity-80"
              draggable={false}
              onError={() => {
                // Wenn Snapshot ungültig wäre, fällt ghostFrameSrc || previewSrc automatisch auf previewSrc zurück,
                // sobald ghostFrameSrc null ist. Hier kein State-Zwang nötig.
              }}
            />
          </div>
        </div>

        <div className="space-y-1">
          <div className="text-lg font-semibold truncate">{model}</div>
          <div className="text-xs text-white/70 break-all">{file || title}</div>
        </div>

        <div className="pointer-events-auto">
          <div className="flex items-center justify-center gap-2 flex-wrap">
            {isRunning ? (
              <Button
                variant="primary"
                color="red"
                size="sm"
                rounded="md"
                disabled={stopDisabled}
                title={isStoppingLike || stopPending ? 'Stoppe…' : 'Stop'}
                aria-label={isStoppingLike || stopPending ? 'Stoppe…' : 'Stop'}
                onClick={async (e) => {
                  e.preventDefault()
                  e.stopPropagation()
                  if (stopDisabled) return
                  try {
                    setStopPending(true)
                    await onStopJob?.(job.id)
                  } finally {
                    setStopPending(false)
                  }
                }}
                className="shadow-none"
              >
                {isStoppingLike || stopPending ? 'Stoppe…' : 'Stoppen'}
              </Button>
            ) : null}

            <RecordJobActions
              job={job}
              variant="table"
              collapseToMenu={false}
              busy={isStoppingLike || stopPending}
              isHot={isHot || isHotFile}
              isFavorite={isFavorite}
              isLiked={isLiked}
              isWatching={isWatching}
              onToggleWatch={onToggleWatch ? (j) => onToggleWatch(j) : undefined}
              onToggleFavorite={onToggleFavorite ? (j) => onToggleFavorite(j) : undefined}
              onToggleLike={onToggleLike ? (j) => onToggleLike(j) : undefined}
              onToggleHot={
                onToggleHot
                  ? async (j) => {
                      releaseMedia()
                      await new Promise((r) => setTimeout(r, 150))
                      await onToggleHot(j)
                      await new Promise((r) => setTimeout(r, 0))
                      const p = playerRef.current
                      if (p && !(p as any).isDisposed?.()) {
                        const ret = p.play?.()
                        if (ret && typeof (ret as any).catch === 'function') {
                          ;(ret as Promise<void>).catch(() => {})
                        }
                      }
                    }
                  : undefined
              }
              onKeep={
                onKeep
                  ? async (j) => {
                      releaseMedia()
                      onClose()
                      await new Promise((r) => setTimeout(r, 150))
                      await onKeep(j)
                    }
                  : undefined
              }
              onDelete={
                onDelete
                  ? async (j) => {
                      releaseMedia()
                      onClose()
                      await new Promise((r) => setTimeout(r, 150))
                      await onDelete(j)
                    }
                  : undefined
              }
              order={isRunning ? ['watch', 'favorite', 'like', 'details'] : ['watch', 'favorite', 'like', 'hot', 'details', 'keep', 'delete']}
              className="flex items-center justify-start gap-1"
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-x-3 gap-y-2 text-sm">
          <div className="text-white/60">Status</div>
          <div className="font-medium">{job.status}</div>

          <div className="text-white/60">Auflösung</div>
          <div className="font-medium">{resolutionLabel}</div>

          <div className="text-white/60">FPS</div>
          <div className="font-medium">{fpsLabel}</div>

          <div className="text-white/60">Laufzeit</div>
          <div className="font-medium">{runtimeLabel}</div>

          <div className="text-white/60">Größe</div>
          <div className="font-medium">{sizeLabel}</div>

          <div className="text-white/60">Datum</div>
          <div className="font-medium">{dateLabel}</div>

          <div className="col-span-2">
            {tags.length ? (
              <div className="flex flex-wrap gap-1.5">
                {tags.map((t) => (
                  <span key={t} className="rounded bg-white/10 px-2 py-0.5 text-xs text-white/90">
                    {t}
                  </span>
                ))}
              </div>
            ) : (
              <span className="text-white/50">—</span>
            )}
          </div>
        </div>
      </div>
    </div>
  )

  const snapGhostEl =
    miniDesktop && isDragging && snapPreviewRect ? (
      <div
        className="pointer-events-none absolute z-0 player-snap-ghost overflow-hidden rounded-lg border-2 border-dashed border-white/70 bg-black/55 shadow-2xl dark:border-white/60"
        style={{
          left: snapPreviewRect.x - win.x,
          top: snapPreviewRect.y - win.y,
          width: snapPreviewRect.w,
          height: snapPreviewRect.h,
        }}
        aria-hidden="true"
      >
        {/* Video/Preview Fläche */}
        <div className="absolute inset-0 bg-black">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={ghostFrameSrc || previewSrc}
            alt=""
            className="absolute inset-0 h-full w-full object-contain opacity-80"
            draggable={false}
            onError={() => {
              // kein State-Update nötig hier; echter Player kümmert sich schon um fallback
            }}
          />

          {/* Top gradient */}
          <div className="absolute inset-x-0 top-0 h-14 bg-gradient-to-b from-black/55 to-transparent" />

          {/* Fake top controls / grip */}
          <div className="absolute top-2 right-2 flex items-center gap-1.5 opacity-80">
            <div className="h-8 w-8 rounded-md bg-white/15 ring-1 ring-white/20" />
            <div className="h-8 w-8 rounded-md bg-white/15 ring-1 ring-white/20" />
          </div>

          {/* Mini "drag grip" Andeutung */}
          <div className="absolute top-2 left-2 h-8 rounded-md bg-white/12 px-2 flex items-center gap-1 ring-1 ring-white/15">
            <span className="h-1 w-1 rounded-full bg-white/50" />
            <span className="h-1 w-1 rounded-full bg-white/50" />
            <span className="h-1 w-1 rounded-full bg-white/50" />
          </div>

          {/* Bottom meta bar (angelehnt an echten Player) */}
          <div className="absolute inset-x-2 bottom-2 flex items-end justify-between gap-2">
            <div className="min-w-0">
              <div className="truncate text-sm font-semibold text-white/95">{model}</div>
              <div className="truncate text-[11px] text-white/75">
                {file || title}
                {(isHot || isHotFile) ? (
                  <span className="ml-1.5 rounded bg-amber-500/30 px-1.5 py-0.5 text-white">HOT</span>
                ) : null}
              </div>
            </div>

            <div className="shrink-0 flex items-center gap-1 text-[10px] text-white/90">
              {resolutionLabel !== '—' ? (
                <span className="rounded bg-black/45 px-1.5 py-0.5">{resolutionLabel}</span>
              ) : null}
              {!isRunning && runtimeLabel !== '—' ? (
                <span className="rounded bg-black/45 px-1.5 py-0.5">{runtimeLabel}</span>
              ) : null}
            </div>
          </div>

          {/* Dock-Hinweis */}
          <div className="absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-white/8 to-transparent" />
        </div>
      </div>
  ) : null

  const cardEl = (
    <Card
      edgeToEdgeMobile
      noBodyPadding
      className={cn(
        'relative z-10 flex flex-col shadow-2xl ring-1 ring-black/10 dark:ring-white/10',
        'w-full',
        fullSize ? 'h-full' : 'h-[220px] max-h-[40vh]',
        expanded ? 'rounded-2xl' : miniDesktop ? 'rounded-lg' : 'rounded-none'
      )}
      bodyClassName="flex flex-col flex-1 min-h-0 p-0"
    >
      <div className="flex flex-1 min-h-0">
        {showSideInfo ? sidePanel : null}
        {videoChrome}
      </div>
    </Card>
  )

  const { w: vw, h: vh, ox, oy, bottomInset } = getViewport()

  const expandedRect = {
    left: ox + 16,
    top: oy + 16,
    width: Math.max(0, vw - 32),
    height: Math.max(0, vh - 32),
  }

  const wrapStyle = expanded
    ? expandedRect
    : miniDesktop
      ? { left: win.x, top: win.y, width: win.w, height: win.h }
      : undefined

  const content = (
    <>
      <style>{`
        /* Live-Download: Progress/Seek-Bar ausblenden */
        .is-live-download .vjs-progress-control {
          display: none !important;
        }

        /* ---------- Video.js Layout-Fix (Finished Player) ----------
          Ziel:
          - Video endet immer direkt über der Controlbar
          - Aspect Ratio bleibt erhalten
          - Resize stabil (kein "Wandern")
        */

        /* Container schwarz, falls Letterboxing sichtbar wird */
        .vjs-mini .video-js,
        .vjs-mini .video-js .vjs-tech,
        .vjs-mini .video-js .vjs-poster {
          background-color: transparent !important;
        }

        /* ECHTES Video (<video class="vjs-tech">) */
        .vjs-mini .video-js .vjs-tech {
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;

          width: 100% !important;
          height: 100% !important;

          /* Seitenverhältnis beibehalten + unten an die Controlbar "anlehnen" */
          object-fit: contain !important;
          object-position: center top !important;
        }

        /* Poster genauso behandeln (falls sichtbar) */
        .vjs-mini .video-js .vjs-poster {
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;

          width: 100% !important;
          height: 100% !important;

          background-position: center bottom !important;
          background-size: contain !important;
          background-repeat: no-repeat !important;
        }

        /* Untertitel-/Texttrack-Layer darf ebenfalls nicht in die Controlbar laufen */
        .vjs-mini .video-js .vjs-text-track-display {
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: var(--vjs-controlbar-h, 30px) !important;
          inset: 0 0 var(--vjs-controlbar-h, 30px) 0 !important;
        }

        /* Sicherheitsnetz: Controlbar immer wirklich unten */
        .vjs-mini .video-js .vjs-control-bar {
          bottom: 0 !important;
        }

        .player-snap-ghost {
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
        }

        .player-snap-ghost::after {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: inherit;
          box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
          pointer-events: none;
        }
      `}</style>

      {expanded || miniDesktop ? (
      <div
        className={cn(
          'fixed z-[2147483647]',
          !isResizing && !isDragging && 'transition-[left,top,width,height] duration-300 ease-[cubic-bezier(.2,.9,.2,1)]'
        )}
        style={{
          ...(wrapStyle as any),
          willChange: isResizing ? 'left, top, width, height' : undefined,
        }}
      >
        {snapGhostEl}

        {cardEl}

        {miniDesktop ? (
          <div className="pointer-events-none absolute inset-0">
            <div className="pointer-events-auto absolute -left-1 bottom-2 top-2 w-3 cursor-ew-resize" onPointerDown={beginResize('w')} />
            <div className="pointer-events-auto absolute -right-1 bottom-2 top-2 w-3 cursor-ew-resize" onPointerDown={beginResize('e')} />
            <div className="pointer-events-auto absolute left-2 right-2 -top-1 h-3 cursor-ns-resize" onPointerDown={beginResize('n')} />
            <div className="pointer-events-auto absolute left-2 right-2 -bottom-1 h-3 cursor-ns-resize" onPointerDown={beginResize('s')} />

            <div className="pointer-events-auto absolute -left-1 -top-1 h-4 w-4 cursor-nwse-resize" onPointerDown={beginResize('nw')} />
            <div className="pointer-events-auto absolute -right-1 -top-1 h-4 w-4 cursor-nesw-resize" onPointerDown={beginResize('ne')} />
            <div className="pointer-events-auto absolute -left-1 -bottom-1 h-4 w-4 cursor-nesw-resize" onPointerDown={beginResize('sw')} />
            <div className="pointer-events-auto absolute -right-1 -bottom-1 h-4 w-4 cursor-nwse-resize" onPointerDown={beginResize('se')} />
          </div>
        ) : null}
      </div>
      ) : (
        <div
          className="
            fixed z-[2147483647] inset-x-0 w-full
            shadow-2xl
            md:bottom-4 md:left-1/2 md:right-auto md:inset-x-auto md:w-[min(760px,calc(100vw-32px))] md:-translate-x-1/2
          "
          style={{
            bottom: `calc(${bottomInset}px + env(safe-area-inset-bottom))`,
          }}
        >
          {cardEl}
        </div>
      )}
    </>
  )

  if (usePortal) {
    return createPortal(content, portalTarget!)
  }

  return content
}