// frontend/src/components/ui/ModelPreview.tsx
'use client'

import { useEffect, useMemo, useRef, useState } from 'react'
import HoverPopover from './HoverPopover'
import LiveHlsVideo from './LiveHlsVideo'
import { XMarkIcon } from '@heroicons/react/24/outline'

type Props = {
  jobId: string
  // Optional: wird von außen hochgezählt (z.B. alle 5s). Wenn nicht gesetzt,
  // tickt die Komponente selbst (weniger Re-Renders im Parent).
  thumbTick?: number
  // wie oft (ms) der Thumbnail neu geladen werden soll, wenn thumbTick nicht gesetzt ist
  autoTickMs?: number
  blur?: boolean
}

export default function ModelPreview({ jobId, thumbTick, autoTickMs = 30000, blur = false }: Props) {
  const blurCls = blur ? 'blur-md' : ''
  const [localTick, setLocalTick] = useState(0)
  const [imgError, setImgError] = useState(false)
  const rootRef = useRef<HTMLDivElement | null>(null)
  const [inView, setInView] = useState(false)

  useEffect(() => {
    // Wenn Parent tickt, kein lokales Ticken
    if (typeof thumbTick === 'number') return

    // Nur animieren, wenn im Sichtbereich UND Tab sichtbar
    if (!inView || document.hidden) return

    const id = window.setInterval(() => {
      setLocalTick((t) => t + 1)
    }, autoTickMs)

    return () => window.clearInterval(id)
  }, [thumbTick, autoTickMs, inView])

  useEffect(() => {
    const el = rootRef.current
    if (!el) return

    const obs = new IntersectionObserver(
      (entries) => {
        const entry = entries[0]
        setInView(Boolean(entry?.isIntersecting))
      },
      {
        root: null,
        threshold: 0.1,
      }
    )

    obs.observe(el)
    return () => obs.disconnect()
  }, [])

  const tick = typeof thumbTick === 'number' ? thumbTick : localTick

  // bei neuem Tick Error-Flag zurücksetzen (damit wir retries erlauben)
  useEffect(() => {
    setImgError(false)
  }, [tick])

  // Thumbnail mit Cache-Buster (?v=...)
  const thumb = useMemo(
    () => `/api/record/preview?id=${encodeURIComponent(jobId)}&v=${tick}`,
    [jobId, tick]
  )

  // HLS nur für große Vorschau im Popover
  const hq = useMemo(
    () =>
      `/api/record/preview?id=${encodeURIComponent(jobId)}&file=index_hq.m3u8`,
    [jobId]
  )

  return (
    <HoverPopover
      content={(open, { close }) =>
        open && (
          <div className="w-[420px] max-w-[calc(100vw-1.5rem)]">
            <div className="relative aspect-video overflow-hidden rounded-lg bg-black">
              <LiveHlsVideo src={hq} muted={false} className={['w-full h-full relative z-0', blurCls].filter(Boolean).join(' ')} />

              {/* LIVE badge */}
              <div className="absolute left-2 top-2 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>

              {/* Close */}
              <button
                type="button"
                className="absolute right-2 top-2 z-20 inline-flex items-center justify-center rounded-md bg-black/45 p-1.5 text-white hover:bg-black/65 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70"
                aria-label="Live-Vorschau schließen"
                title="Vorschau schließen"
                onClick={(e) => {
                  e.preventDefault()
                  e.stopPropagation()
                  close()
                }}
              >
                <XMarkIcon className="h-4 w-4" />
              </button>
            </div>
          </div>
        )
      }
    >
      <div
        ref={rootRef}
        className="w-20 h-16 rounded bg-gray-100 dark:bg-white/5 overflow-hidden flex items-center justify-center"
      >
        {!imgError ? (
          <img
            src={thumb}
            loading="lazy"
            alt=""
            className={['w-full h-full object-cover', blurCls].filter(Boolean).join(' ')}
            onError={() => setImgError(true)}
            onLoad={() => setImgError(false)}
          />
        ) : (
          <div className="text-[10px] text-gray-500 dark:text-gray-400 px-1 text-center">
            keine Vorschau
          </div>
        )}
      </div>
    </HoverPopover>
  )
}