app/frontend/src/components/Dashboard/MediaWidget.tsx

import { LoaderCircle, Radio, X } from "lucide-react"
import { type ReactNode, useEffect, useRef } from "react"

import { useOnScreen } from "@/hooks/useOnScreen"
import { isRef, useArtifactUrl } from "@/lib/media"
import { cn } from "@/lib/utils"
import { useBoundValue } from "./dataContext"
import { config, text } from "./ui/core/config"
import { useLiveDevice, useLiveView } from "./useLiveView"
import type { WidgetProps } from "./widgets"

/**
 * What a message's bytes look like: a frame, a clip, a segment.
 *
 * Media never travels as a message — the reference does. The bytes come down
 * the socket in front of it where the engine is holding the frame in memory,
 * and are fetched from the artifact store otherwise; either way this tile only
 * asks for what it is drawing. A camera serving its own stream is still played
 * from source: point `stream_url` at it and the browser does the work.
 */
export function MediaWidget({ widget }: WidgetProps) {
  const cfg = config(widget)
  return (
    <MediaView
      message={text(cfg.message)}
      stream={text(cfg.stream_url)}
      dtype={text(cfg.dtype)}
      fit={text(cfg.fit) === "contain" ? "contain" : "cover"}
      autoplay={Boolean(cfg.autoplay)}
      label={widget.title}
    />
  )
}

/**
 * The tile's body, for anywhere a message's media is shown.
 *
 * Frames are asked for only while the tile is on screen, in a tab being
 * looked at: a camera is only sent while somebody watches it, and a tile
 * scrolled away or behind another tab is nobody. A clip keeps playing either
 * way.
 *
 * A camera whose device streams live is tapped for it. Frames pause while
 * the live view plays, so the device encodes one picture rather than two,
 * and come back when it ends.
 */
export function MediaView({
  message,
  stream = "",
  dtype = "",
  fit = "cover",
  autoplay = false,
  label,
}: {
  message: string
  stream?: string
  dtype?: string
  fit?: "cover" | "contain"
  autoplay?: boolean
  label?: string
}) {
  const box = useRef<HTMLDivElement>(null)
  const shown = useOnScreen(box)
  const bound = useBoundValue(message || undefined)
  const value = bound?.value
  const ref = isRef(value) ? value : null
  const kind = (ref?.media_type ?? dtype).split("/")[0]
  const playing = kind === "audio" || kind === "video"
  const camera = useLiveDevice(stream ? "" : message)
  const live = useLiveView(camera)
  const onAir = live.phase === "playing"
  const active = (shown || playing) && !onAir
  const url = useArtifactUrl(
    active ? ref : null,
    active ? message || undefined : undefined,
  )

  const objectFit = fit === "contain" ? "object-contain" : "object-cover"
  const alt = label || ref?.name || message

  // Scrolled away, or the tab hidden: nobody is watching.
  const { stop } = live
  useEffect(() => {
    if (!shown) stop()
  }, [shown, stop])

  return (
    <div
      ref={box}
      className="flex min-h-0 w-full flex-1 flex-col justify-center"
    >
      {camera ? (
        <LiveFrame live={live} label={alt} fit={objectFit}>
          {body()}
        </LiveFrame>
      ) : (
        body()
      )}
    </div>
  )

  function body() {
    // A camera serving its own stream is played from source: the engine
    // carries references at whatever rate the flow publishes them, which is
    // not video.
    if (stream && kind !== "audio") {
      return (
        <img
          src={stream}
          alt={alt}
          className={cn("h-full w-full rounded-md", objectFit)}
        />
      )
    }

    if (!message && !stream) {
      return <p className="text-muted-foreground">Pick a message.</p>
    }
    if (!ref) {
      return <p className="text-muted-foreground">Nothing published yet.</p>
    }
    if (!url) {
      return <p className="text-muted-foreground">Loading…</p>
    }

    if (kind === "audio") {
      return (
        <audio
          // Keyed on the digest so a new clip replaces the element rather than
          // leaving the last one's playhead on it.
          key={ref.digest}
          src={url}
          controls
          autoPlay={autoplay}
          className="w-full"
        >
          <track kind="captions" />
        </audio>
      )
    }

    if (kind === "video") {
      return (
        <video
          key={ref.digest}
          src={url}
          controls
          autoPlay={autoplay}
          className={cn("h-full w-full rounded-md", objectFit)}
        >
          <track kind="captions" />
        </video>
      )
    }

    return (
      <img
        src={url}
        alt={alt}
        className={cn("h-full w-full rounded-md", objectFit)}
      />
    )
  }
}

/**
 * A camera tile that streams live when tapped, and stops when tapped again.
 *
 * The whole tile is the control, so it is as easy to hit on a wall panel as
 * on a desk. The video waits under the frames until its first picture, then
 * takes their place.
 */
function LiveFrame({
  live,
  label,
  fit,
  children,
}: {
  live: ReturnType<typeof useLiveView>
  label: string
  fit: string
  children: ReactNode
}) {
  const { phase, stream, note } = live
  const onAir = phase === "playing"
  const chip =
    "pointer-events-none absolute z-20 flex items-center gap-1 rounded-full border border-border px-2.5 py-1 text-xs font-medium shadow-e2"
  const frosted = "bg-card/80 text-foreground backdrop-blur-md"

  return (
    <button
      type="button"
      onClick={phase === "off" ? live.start : live.stop}
      aria-label={
        phase === "off" ? `Watch ${label} live` : `Stop watching ${label} live`
      }
      aria-pressed={phase !== "off"}
      data-testid="media-live"
      data-live={phase}
      className="relative isolate flex min-h-0 w-full flex-1 cursor-pointer flex-col justify-center rounded-md text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
    >
      <span
        className={cn(
          "relative z-10 flex min-h-0 w-full flex-1 flex-col justify-center",
          onAir && "invisible",
        )}
      >
        {children}
      </span>
      {stream ? (
        <video
          ref={(element) => {
            if (element && element.srcObject !== stream)
              element.srcObject = stream
          }}
          autoPlay
          muted
          playsInline
          onPlaying={live.played}
          className={cn("absolute inset-0 h-full w-full rounded-md", fit)}
        />
      ) : null}
      {onAir ? (
        <span
          className={cn(
            chip,
            "right-2 top-2 border-transparent bg-primary text-primary-foreground",
          )}
        >
          Live
          <X className="size-3.5" aria-hidden />
        </span>
      ) : (
        <span className={cn(chip, frosted, "right-2 top-2")}>
          {phase === "connecting" ? (
            <LoaderCircle
              className="size-3.5 motion-safe:animate-spin"
              aria-hidden
            />
          ) : (
            <Radio className="size-3.5" aria-hidden />
          )}
          {phase === "connecting" ? "Connecting" : "Live"}
        </span>
      )}
      {note ? (
        <output
          className={cn(chip, frosted, "bottom-2 left-2 text-muted-foreground")}
          data-testid="media-live-note"
        >
          {note}
        </output>
      ) : null}
    </button>
  )
}