'use client'

import {
  Download,
  Loader2,
  Maximize2,
  Pause,
  Play,
  Upload,
  ZoomIn,
  ZoomOut,
} from 'lucide-react'
import * as React from 'react'
import { ThumbnailStrip } from '@/components/thumbnail-strip'
import { TimelinePlayhead } from '@/components/timeline-playhead'
import { TimelineRuler } from '@/components/timeline-ruler'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardFooter } from '@/components/ui/card'
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Skeleton } from '@/components/ui/skeleton'
import { Slider } from '@/components/ui/slider'
import { VideoThumbnailCache } from '@/lib/video-thumbnail-cache'

const SAMPLE_VIDEO_URL =
  'https://hj-video.zeroaigen.cn/prod/AI/VIDEO/f4e7fdc9807348eedc1e64a963c7433e.mp4'

type Format = 'png' | 'jpeg'

interface SourceMeta {
  blob: Blob
  url: string
  cache: VideoThumbnailCache
  duration: number
  width: number
  height: number
}

const FORMAT_LABEL: Record<Format, string> = { png: 'PNG', jpeg: 'JPEG' }

const STRIP_HEIGHT = 72
const RULER_HEIGHT = 24
const ZOOM_MIN = 0.5
const ZOOM_MAX = 4
// Matches TimelinePlayhead's knob diameter — the track is padded by half this
// on each side so the knob stays fully visible at either end.
const PLAYHEAD_KNOB = 12

/** `mm:ss.s` timestamp, e.g. `00:15.5`. */
function formatTime(seconds: number): string {
  const m = Math.floor(seconds / 60)
  const s = seconds % 60
  return `${String(m).padStart(2, '0')}:${s.toFixed(1).padStart(4, '0')}`
}

/** Linear slider position (0–1) → exponential zoom, so low values step gently. */
function sliderToZoom(position: number, min: number, max: number): number {
  if (max <= min) return min
  const p = Math.max(0, Math.min(1, position))
  return min * (max / min) ** p
}

/** Inverse of `sliderToZoom`. */
function zoomToSlider(zoom: number, min: number, max: number): number {
  if (max <= min) return 0
  const z = Math.max(min, Math.min(max, zoom))
  return Math.log(z / min) / Math.log(max / min)
}

export interface VideoFrameExtractorProps {
  /** Video to load and extract from. Falls back to a bundled sample. */
  videoUrl?: string
  /** Output image format for downloaded stills. Default: `'png'`. */
  format?: Format
  /** Base pixels per second at zoom = 1 — sets the timeline scale. Default: `50`. */
  pixelsPerSecond?: number
}

/**
 * Video frame extractor — load a video (or use the sample) and grab the still
 * **under the playhead**. A time ruler runs across the top aligned to the real
 * duration; beneath it a continuous filmstrip (mediabunny-decoded thumbnails)
 * carries a playhead that tracks playback. Play/pause lives outside the video —
 * the `<video>` itself has no native controls — so wherever it plays (or you
 * drag the playhead) to, one button saves that exact frame at native
 * resolution. The zoom slider sets how dense the timeline is for fine scrubbing.
 */
export function VideoFrameExtractor({
  videoUrl = SAMPLE_VIDEO_URL,
  format: initialFormat = 'png',
  pixelsPerSecond = 50,
}: VideoFrameExtractorProps) {
  const [file, setFile] = React.useState<File | null>(null)
  const [meta, setMeta] = React.useState<SourceMeta | null>(null)
  const [format, setFormat] = React.useState<Format>(initialFormat)
  const [zoom, setZoom] = React.useState(1)
  const [containerWidth, setContainerWidth] = React.useState(0)
  const [currentTime, setCurrentTime] = React.useState(0)
  const [playing, setPlaying] = React.useState(false)
  const [downloading, setDownloading] = React.useState(false)
  const [error, setError] = React.useState<string | null>(null)

  const videoRef = React.useRef<HTMLVideoElement>(null)
  // Auto-fit the zoom once per source, after the width is known.
  const didFitRef = React.useRef(false)
  const resizeObserverRef = React.useRef<ResizeObserver | null>(null)

  // Measure the available width (callback ref re-attaches when the node mounts).
  const measureRef = React.useCallback((el: HTMLDivElement | null) => {
    resizeObserverRef.current?.disconnect()
    if (!el) return
    setContainerWidth(el.clientWidth)
    const ro = new ResizeObserver(() => setContainerWidth(el.clientWidth))
    ro.observe(el)
    resizeObserverRef.current = ro
  }, [])

  // Resolve the source to a Blob (uploaded File or fetched URL), build the
  // thumbnail cache, and read duration + intrinsic size off its metadata. The
  // same blob feeds native-resolution decoding on download. Switching sources
  // disposes the previous cache, rewinds the playhead, and re-arms the auto-fit.
  React.useEffect(() => {
    let cancelled = false
    let objectUrl: string | null = null
    let cache: VideoThumbnailCache | null = null
    setMeta(null)
    setError(null)
    setCurrentTime(0)
    setPlaying(false)
    didFitRef.current = false
    void (async () => {
      try {
        const blob = file ?? (await (await fetch(videoUrl)).blob())
        if (cancelled) return
        cache = new VideoThumbnailCache({ source: blob, thumbnailHeight: 96 })
        const { duration, width, height } = await cache.initialize()
        if (cancelled) {
          cache.dispose()
          return
        }
        if (duration <= 0) throw new Error('no duration')
        objectUrl = URL.createObjectURL(blob)
        setMeta({ blob, url: objectUrl, cache, duration, width, height })
      } catch {
        cache?.dispose()
        if (!cancelled) setError('Could not load the video.')
      }
    })()
    return () => {
      cancelled = true
      if (objectUrl) URL.revokeObjectURL(objectUrl)
      cache?.dispose()
    }
  }, [file, videoUrl])

  // Tile geometry derived from zoom; the filmstrip cells keep the source aspect.
  const aspect =
    meta && meta.width > 0 && meta.height > 0
      ? meta.width / meta.height
      : 16 / 9
  const tileWidth = Math.max(1, Math.round(STRIP_HEIGHT * aspect))
  const pps = pixelsPerSecond * zoom
  const total = meta?.duration ?? 0
  const contentWidth = total * pps

  // Zoom that fits the whole video in the available width. Subtract the track
  // padding (half a knob each side) so the filled timeline lands exactly on the
  // viewport edge instead of leaving a sliver of scrollable overflow.
  const fitZoom =
    total > 0 && containerWidth > 0
      ? Math.min(
          ZOOM_MAX,
          (containerWidth - PLAYHEAD_KNOB) / (total * pixelsPerSecond),
        )
      : 1
  const minZoom = Math.min(ZOOM_MIN, fitZoom)
  const maxZoom = Math.max(ZOOM_MAX, fitZoom)
  const sliderPos = zoomToSlider(zoom, minZoom, maxZoom)

  // Fit once, when the width and duration first become known.
  React.useEffect(() => {
    if (!total || containerWidth <= 0 || didFitRef.current) return
    setZoom(fitZoom)
    didFitRef.current = true
  }, [total, containerWidth, fitZoom])

  // While playing, drive the playhead off a rAF loop so it tracks smoothly
  // (the `timeupdate` event only fires a few times a second).
  React.useEffect(() => {
    if (!playing) return
    let raf = 0
    const tick = () => {
      const video = videoRef.current
      if (video) setCurrentTime(video.currentTime)
      raf = requestAnimationFrame(tick)
    }
    raf = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(raf)
  }, [playing])

  const applySlider = (next: number) => {
    didFitRef.current = true
    setZoom(sliderToZoom(next, minZoom, maxZoom))
  }
  const stepZoom = (delta: number) => applySlider(sliderPos + delta)
  const fit = () => {
    didFitRef.current = true
    setZoom(fitZoom)
  }

  // Seek both the playhead and the underlying video (the only way to move the
  // playhead, since the `<video>` exposes no native scrubber).
  const seek = (time: number) => {
    const clamped = Math.min(total, Math.max(0, time))
    setCurrentTime(clamped)
    const video = videoRef.current
    if (video) video.currentTime = clamped
  }

  // Click the ruler / filmstrip to jump the playhead there. The inner track's
  // left edge is time 0, so the pointer x maps straight to a time. (Dragging
  // the playhead knob is handled by TimelinePlayhead itself.)
  const scrubFrom = (event: React.PointerEvent<HTMLDivElement>) => {
    const rect = event.currentTarget.getBoundingClientRect()
    seek((event.clientX - rect.left) / pps)
  }

  const togglePlay = () => {
    const video = videoRef.current
    if (!video) return
    if (video.paused) void video.play()
    else video.pause()
  }

  // Decode a single timestamp at native resolution and hand back the still. A
  // fresh mediabunny input keeps full-res export off the (downscaled) preview
  // cache.
  const decodeFrame = React.useCallback(
    async (blob: Blob, time: number): Promise<Blob | null> => {
      const { Input, BlobSource, VideoSampleSink, ALL_FORMATS } = await import(
        'mediabunny'
      )
      const input = new Input({
        source: new BlobSource(blob),
        formats: ALL_FORMATS,
      })
      const track = await input.getPrimaryVideoTrack()
      if (!track || !(await track.canDecode())) throw new Error('undecodable')
      const sink = new VideoSampleSink(track)
      const sample = await sink.getSample(time)
      if (!sample) return null
      try {
        const canvas = new OffscreenCanvas(
          sample.codedWidth,
          sample.codedHeight,
        )
        const ctx = canvas.getContext('2d')
        if (!ctx) return null
        sample.draw(ctx, 0, 0, sample.codedWidth, sample.codedHeight)
        const mime = format === 'png' ? 'image/png' : 'image/jpeg'
        const quality = format === 'jpeg' ? 0.92 : undefined
        return await canvas.convertToBlob({ type: mime, quality })
      } finally {
        sample.close()
      }
    },
    [format],
  )

  const baseName = (file?.name ?? 'video').replace(/\.[^.]+$/, '')
  const save = (blob: Blob, time: number) => {
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `${baseName}-${time.toFixed(1)}s.${format}`
    a.click()
    URL.revokeObjectURL(url)
  }

  // Grab the frame sitting under the playhead, at native resolution.
  const downloadFrame = async () => {
    if (!meta || downloading) return
    setDownloading(true)
    setError(null)
    try {
      const blob = await decodeFrame(meta.blob, currentTime)
      if (blob) save(blob, currentTime)
    } catch {
      setError('Extraction failed — this codec may be unsupported here.')
    } finally {
      setDownloading(false)
    }
  }

  if (!meta) {
    if (error) {
      return (
        <Card className="w-full">
          <CardContent className="flex flex-col items-center gap-4 pt-(--card-spacing)">
            <p className="text-destructive text-sm">{error}</p>
            <Button render={<label />} nativeButton={false} variant="outline">
              <Upload />
              Load video
              <input
                type="file"
                accept="video/*"
                className="hidden"
                onChange={(event) => {
                  const next = event.target.files?.[0]
                  if (next) setFile(next)
                }}
              />
            </Button>
          </CardContent>
        </Card>
      )
    }
    return (
      <Card className="w-full">
        <CardContent className="flex flex-col gap-4 pt-(--card-spacing)">
          <Skeleton className="mx-auto aspect-video w-full max-w-md" />
          <Skeleton className="h-8 w-full" />
          <Skeleton className="h-28 w-full rounded-lg" />
        </CardContent>
        <CardFooter className="items-center justify-between gap-2">
          <Skeleton className="h-9 w-28" />
          <Skeleton className="h-9 w-36" />
        </CardFooter>
      </Card>
    )
  }

  return (
    <Card className="w-full">
      <CardContent className="flex flex-col gap-4 pt-(--card-spacing)">
        <video
          ref={videoRef}
          src={meta.url}
          playsInline
          style={{ aspectRatio: aspect }}
          className="bg-muted/30 mx-auto max-h-64 max-w-full rounded-lg"
          onPlay={() => setPlaying(true)}
          onPause={() => setPlaying(false)}
          onEnded={() => setPlaying(false)}
          onLoadedMetadata={(event) =>
            setCurrentTime(event.currentTarget.currentTime)
          }
        />

        {/* Toolbar — transport on the left, zoom controls on the right. */}
        <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
          <Button
            type="button"
            size="icon-lg"
            className="rounded-full"
            onClick={togglePlay}
            aria-label={playing ? 'Pause' : 'Play'}
          >
            {playing ? <Pause /> : <Play className="translate-x-px" />}
          </Button>
          <span className="text-muted-foreground text-xs tabular-nums">
            <span className="text-foreground font-medium">
              {formatTime(currentTime)}
            </span>{' '}
            / {formatTime(total)}
          </span>

          <div className="ml-auto flex items-center gap-1">
            <Button
              variant="ghost"
              size="icon-sm"
              title="Zoom out"
              onClick={() => stepZoom(-0.1)}
            >
              <ZoomOut />
            </Button>
            <div className="w-28">
              <Slider
                min={0}
                max={100}
                value={[sliderPos * 100]}
                onValueChange={(value) =>
                  applySlider((Array.isArray(value) ? value[0] : value) / 100)
                }
              />
            </div>
            <Button
              variant="ghost"
              size="icon-sm"
              title="Zoom in"
              onClick={() => stepZoom(0.1)}
            >
              <ZoomIn />
            </Button>
            <Button
              variant="ghost"
              size="icon-sm"
              title="Fit to width"
              onClick={fit}
            >
              <Maximize2 />
            </Button>
            <span className="text-muted-foreground w-9 text-right text-xs tabular-nums">
              {Math.max(1, Math.round(sliderPos * 100))}%
            </span>
          </div>
        </div>

        {/* Timeline — ruler aligned to the real duration, a continuous filmstrip
            beneath it, and a playhead that tracks playback. Click anywhere to
            jump, or drag the playhead to scrub. */}
        <div className="bg-muted/30 rounded-lg p-3">
          <div ref={measureRef}>
            <ScrollArea
              style={{
                height: RULER_HEIGHT + 8 + STRIP_HEIGHT + PLAYHEAD_KNOB + 8,
              }}
            >
              {/* Pad the scroll content by half a knob on every side so the
                  playhead circle stays fully visible at the start, end and top
                  instead of being clipped by the viewport. The inner track is
                  the positioning origin shared by the ruler, strip and
                  playhead, so they all stay aligned. */}
              <div
                style={{
                  width: contentWidth + PLAYHEAD_KNOB,
                  minWidth: '100%',
                  padding: PLAYHEAD_KNOB / 2,
                  boxSizing: 'border-box',
                }}
              >
                <div
                  style={{
                    position: 'relative',
                    width: contentWidth,
                    minWidth: '100%',
                    cursor: 'pointer',
                  }}
                  onPointerDown={scrubFrom}
                >
                  <TimelineRuler
                    duration={total}
                    pixelsPerSecond={pixelsPerSecond}
                    zoom={zoom}
                    height={RULER_HEIGHT}
                  />

                  <div
                    className="bg-background/40 mt-2 overflow-hidden rounded-md border"
                    style={{
                      position: 'relative',
                      width: contentWidth,
                      height: STRIP_HEIGHT,
                    }}
                  >
                    <ThumbnailStrip
                      cache={meta.cache}
                      duration={total}
                      totalWidth={contentWidth}
                      tileWidth={tileWidth}
                      tileHeight={STRIP_HEIGHT}
                    />
                  </div>

                  <TimelinePlayhead
                    currentTime={currentTime}
                    duration={total}
                    pixelsPerSecond={pixelsPerSecond}
                    zoom={zoom}
                    color="var(--color-primary)"
                    onSeek={seek}
                  />
                </div>
              </div>
              <ScrollBar orientation="horizontal" />
            </ScrollArea>
          </div>
        </div>

        {error && <p className="text-destructive text-sm">{error}</p>}
      </CardContent>

      {/* Footer — output format on the left, source / download on the right. */}
      <CardFooter className="items-center gap-4">
        <div className="flex items-center gap-2 text-sm">
          <span className="text-muted-foreground">Format</span>
          <Select
            value={format}
            disabled={downloading}
            onValueChange={(value) => setFormat(value as Format)}
          >
            <SelectTrigger>
              <SelectValue>
                {(value: Format) => FORMAT_LABEL[value]}
              </SelectValue>
            </SelectTrigger>
            <SelectContent>
              {(Object.keys(FORMAT_LABEL) as Format[]).map((f) => (
                <SelectItem key={f} value={f}>
                  {FORMAT_LABEL[f]}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="ml-auto flex items-center gap-2">
          <Button render={<label />} nativeButton={false} variant="outline">
            <Upload />
            Load video
            <input
              type="file"
              accept="video/*"
              className="hidden"
              onChange={(event) => {
                const next = event.target.files?.[0]
                if (next) setFile(next)
              }}
            />
          </Button>
          <Button type="button" disabled={downloading} onClick={downloadFrame}>
            {downloading ? <Loader2 className="animate-spin" /> : <Download />}
            Download frame
          </Button>
        </div>
      </CardFooter>
    </Card>
  )
}

export default VideoFrameExtractor

'use client'

import {
  Download,
  Loader2,
  Maximize2,
  Pause,
  Play,
  Upload,
  ZoomIn,
  ZoomOut,
} from 'lucide-react'
import * as React from 'react'
import { ThumbnailStrip } from '@/components/thumbnail-strip'
import type { TimelineElementResize } from '@/components/timeline-element'
import { TimelineElement } from '@/components/timeline-element'
import { TimelinePlayhead } from '@/components/timeline-playhead'
import { TimelineRuler } from '@/components/timeline-ruler'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardFooter } from '@/components/ui/card'
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
import { Skeleton } from '@/components/ui/skeleton'
import { Slider } from '@/components/ui/slider'
import { VideoThumbnailCache } from '@/lib/video-thumbnail-cache'

const SAMPLE_VIDEO_URL =
  'https://hj-video.zeroaigen.cn/prod/AI/VIDEO/f4e7fdc9807348eedc1e64a963c7433e.mp4'

const ZOOM_MAX = 10
// Floor for the slider so you can always zoom out past fit-to-screen and give
// the trim handles breathing room. Lowered to `fitZoom` when a clip is so long
// it only fits below this — so "Fit" stays reachable. (bycut uses a fixed range.)
const ZOOM_MIN = 0.5
const RULER_HEIGHT = 24
// Matches TimelinePlayhead's knob diameter — the track is padded by half this
// on each side so the knob stays fully visible at either end.
const PLAYHEAD_KNOB = 12

export interface VideoTrimmerProps {
  /** Video to load, visualize and trim. Falls back to a bundled sample. */
  videoUrl?: string
  /** Base pixels per second at zoom = 1. Default: `50`. */
  pixelsPerSecond?: number
  /** Thumbnail track height in CSS px. Default: `64`. */
  height?: number
  /** Fired with the trimmed selection while dragging the handles. */
  onChange?: (selection: TimelineElementResize) => void
  /** Fired with the exported MP4 blob after a trim. */
  onExport?: (blob: Blob) => void
}

/** `mm:ss.s` timestamp, e.g. `00:15.5`. */
function formatTime(seconds: number): string {
  const m = Math.floor(seconds / 60)
  const s = seconds % 60
  return `${String(m).padStart(2, '0')}:${s.toFixed(1).padStart(4, '0')}`
}

/** Linear slider position (0–1) → exponential zoom, so low values step gently. */
function sliderToZoom(position: number, min: number, max: number): number {
  if (max <= min) return min
  const p = Math.max(0, Math.min(1, position))
  return min * (max / min) ** p
}

/** Inverse of `sliderToZoom`. */
function zoomToSlider(zoom: number, min: number, max: number): number {
  if (max <= min) return 0
  const z = Math.max(min, Math.min(max, zoom))
  return Math.log(z / min) / Math.log(max / min)
}

/** A small labelled, monospaced readout — used in the footer status bar. */
function Stat({ label, value }: { label: string; value: string }) {
  return (
    <span className="flex flex-col leading-tight">
      <span className="text-muted-foreground/70 text-[10px] font-medium uppercase tracking-wide">
        {label}
      </span>
      <span className="text-foreground text-sm font-medium tabular-nums">
        {value}
      </span>
    </span>
  )
}

/**
 * Video trimmer — a business composition built from the timeline primitives.
 * The thumbnail strip visualizes the frames, drag the clip's handles to set
 * in / out points, play back only the trimmed `[startTime, startTime + duration]`
 * window in the preview, then **export the cut as an MP4** via mediabunny's
 * `Conversion({ trim })`. Zoom + scroll the timeline; load your own video with
 * the picker.
 */
export function VideoTrimmer({
  videoUrl = SAMPLE_VIDEO_URL,
  pixelsPerSecond = 50,
  height = 64,
  onChange,
  onExport,
}: VideoTrimmerProps) {
  // The source: an uploaded file (preferred) or the `videoUrl` prop.
  const [file, setFile] = React.useState<File | null>(null)
  const [objectUrl, setObjectUrl] = React.useState<string | null>(null)
  const src = objectUrl ?? videoUrl

  const [cache, setCache] = React.useState<VideoThumbnailCache | null>(null)
  const [total, setTotal] = React.useState(0)
  const [clip, setClip] = React.useState<TimelineElementResize | null>(null)
  const [time, setTime] = React.useState(0)
  const [playing, setPlaying] = React.useState(false)
  const [exporting, setExporting] = React.useState(false)
  const [progress, setProgress] = React.useState(0)
  const [zoom, setZoom] = React.useState(1)
  const [containerWidth, setContainerWidth] = React.useState(0)

  const videoRef = React.useRef<HTMLVideoElement | null>(null)
  const onChangeRef = React.useRef(onChange)
  onChangeRef.current = onChange
  // Auto-fit the zoom once per source, after the width is known.
  const didFitRef = React.useRef(false)
  const resizeObserverRef = React.useRef<ResizeObserver | null>(null)

  // Measure the available width (callback ref re-attaches when the node mounts).
  const measureRef = React.useCallback((el: HTMLDivElement | null) => {
    resizeObserverRef.current?.disconnect()
    if (!el) return
    setContainerWidth(el.clientWidth)
    const ro = new ResizeObserver(() => setContainerWidth(el.clientWidth))
    ro.observe(el)
    resizeObserverRef.current = ro
  }, [])

  // Object URL lifecycle for an uploaded file.
  React.useEffect(() => {
    if (!file) return
    const url = URL.createObjectURL(file)
    setObjectUrl(url)
    return () => {
      URL.revokeObjectURL(url)
      setObjectUrl(null)
    }
  }, [file])

  // Decode the video into a thumbnail cache and read its duration, then reset
  // the selection to the full clip.
  React.useEffect(() => {
    setTotal(0)
    setClip(null)
    setTime(0)
    setPlaying(false)
    setCache(null)
    didFitRef.current = false
    let cancelled = false
    let created: VideoThumbnailCache | null = null
    void VideoThumbnailCache.fromUrl(src)
      .then((c) => {
        if (cancelled) {
          c.dispose()
          return
        }
        created = c
        const meta = c.getMetadata()
        if (!meta) return
        setCache(c)
        setTotal(meta.duration)
        setClip({ startTime: 0, duration: meta.duration })
      })
      .catch(() => undefined)
    return () => {
      cancelled = true
      created?.dispose()
    }
  }, [src])

  const handleTimeUpdate = () => {
    const video = videoRef.current
    if (video) setTime(video.currentTime)
  }

  // Zoom that fits the whole clip in the available width. Subtract the track
  // padding (half a knob each side) so the filled timeline lands exactly on the
  // viewport edge instead of leaving a sliver of scrollable overflow.
  const fitZoom =
    total > 0 && containerWidth > 0
      ? Math.min(
          ZOOM_MAX,
          (containerWidth - PLAYHEAD_KNOB) / (total * pixelsPerSecond),
        )
      : 1
  const minZoom = Math.min(ZOOM_MIN, fitZoom)
  const maxZoom = Math.max(ZOOM_MAX, fitZoom)

  // Fit once, when the width and duration first become known for a source.
  React.useEffect(() => {
    if (!total || containerWidth <= 0 || didFitRef.current) return
    setZoom(fitZoom)
    didFitRef.current = true
  }, [total, containerWidth, fitZoom])

  const updateClip = (next: TimelineElementResize) => {
    setClip(next)
    onChangeRef.current?.(next)
  }

  // Trim the selected window to an MP4 blob with mediabunny, then download it.
  const exportClip = async () => {
    if (!clip) return
    setExporting(true)
    setProgress(0)
    try {
      const {
        Input,
        Output,
        Conversion,
        BlobSource,
        BufferTarget,
        Mp4OutputFormat,
        ALL_FORMATS,
      } = await import('mediabunny')

      let source: Blob
      if (file) {
        source = file
      } else {
        source = await (await fetch(src)).blob()
      }
      const input = new Input({
        source: new BlobSource(source),
        formats: ALL_FORMATS,
      })
      const output = new Output({
        format: new Mp4OutputFormat(),
        target: new BufferTarget(),
      })
      const conversion = await Conversion.init({
        input,
        output,
        trim: { start: clip.startTime, end: clip.startTime + clip.duration },
      })
      conversion.onProgress = setProgress
      await conversion.execute()

      const mp4 = new Blob([output.target.buffer as ArrayBuffer], {
        type: 'video/mp4',
      })
      onExport?.(mp4)

      const name = (file?.name ?? 'video').replace(/\.[^.]+$/, '')
      const url = URL.createObjectURL(mp4)
      const a = document.createElement('a')
      a.href = url
      a.download = `${name}-trimmed.mp4`
      a.click()
      URL.revokeObjectURL(url)
    } finally {
      setExporting(false)
    }
  }

  if (!cache || !total || !clip) {
    return (
      <Card className="w-full">
        <CardContent className="flex flex-col gap-4 pt-(--card-spacing)">
          {/* Preview — the video frame. */}
          <Skeleton className="mx-auto aspect-video w-full max-w-md" />

          {/* Toolbar — play + time on the left, zoom on the right. */}
          <div className="flex items-center gap-3">
            <Skeleton className="size-9 rounded-full" />
            <Skeleton className="h-4 w-24" />
            <Skeleton className="ml-auto h-7 w-44" />
          </div>

          {/* Timeline — ruler over the thumbnail strip. */}
          <div className="bg-muted/30 flex flex-col gap-2 rounded-lg p-3">
            <Skeleton className="bg-muted-foreground/15 h-3 w-full" />
            <Skeleton
              className="bg-muted-foreground/15 w-full"
              style={{ height }}
            />
          </div>
        </CardContent>

        {/* Footer — selection stats on the left, actions on the right. */}
        <CardFooter className="gap-6">
          <Skeleton className="h-8 w-12" />
          <Skeleton className="h-8 w-12" />
          <Skeleton className="h-8 w-12" />
          <div className="ml-auto flex items-center gap-2">
            <Skeleton className="h-8 w-24" />
            <Skeleton className="h-8 w-24" />
          </div>
        </CardFooter>
      </Card>
    )
  }

  const out = clip.startTime + clip.duration
  const pps = pixelsPerSecond * zoom
  const width = total * pps
  const sliderPos = zoomToSlider(zoom, minZoom, maxZoom)

  const applySlider = (next: number) => {
    didFitRef.current = true
    setZoom(sliderToZoom(next, minZoom, maxZoom))
  }
  const stepZoom = (delta: number) => applySlider(sliderPos + delta)
  const fit = () => {
    didFitRef.current = true
    setZoom(fitZoom)
  }

  const seek = (next: number) => {
    const video = videoRef.current
    if (video) video.currentTime = next
    setTime(next)
  }

  // Click / drag anywhere on the timeline to move the playhead and scrub.
  // Pointer-downs on the playhead and trim handles stop propagation, so those
  // gestures still win over seeking.
  const scrubFrom = (event: React.PointerEvent<HTMLDivElement>) => {
    const el = event.currentTarget
    const toTime = (clientX: number) => {
      const rect = el.getBoundingClientRect()
      return Math.min(total, Math.max(0, (clientX - rect.left) / pps))
    }
    seek(toTime(event.clientX))
    const onMove = (e: PointerEvent) => seek(toTime(e.clientX))
    const onUp = () => {
      window.removeEventListener('pointermove', onMove)
      window.removeEventListener('pointerup', onUp)
    }
    window.addEventListener('pointermove', onMove)
    window.addEventListener('pointerup', onUp)
  }

  const togglePlay = () => {
    const video = videoRef.current
    if (!video) return
    if (playing) {
      video.pause()
      setPlaying(false)
      return
    }
    // Restart from the top when parked at the end.
    if (time >= total) {
      video.currentTime = 0
      setTime(0)
    }
    void video.play()
    setPlaying(true)
  }

  return (
    <Card className="w-full">
      <CardContent className="flex flex-col gap-4 pt-(--card-spacing)">
        {/* Preview — plays back only the trimmed window. */}
        <div className="bg-muted/30 mx-auto flex aspect-video w-full max-w-md items-center justify-center overflow-hidden rounded-lg">
          <video
            ref={videoRef}
            src={src}
            playsInline
            onTimeUpdate={handleTimeUpdate}
            onEnded={() => setPlaying(false)}
            className="h-full w-full object-contain"
          />
        </div>

        {/* Toolbar — transport on the left, zoom + fit on the right. */}
        <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
          <Button
            type="button"
            size="icon-lg"
            onClick={togglePlay}
            aria-label={playing ? 'Pause' : 'Play selection'}
            className="rounded-full"
          >
            {playing ? <Pause /> : <Play className="translate-x-px" />}
          </Button>

          <span className="text-muted-foreground text-xs tabular-nums">
            <span className="text-foreground font-medium">
              {formatTime(time)}
            </span>{' '}
            / {formatTime(total)}
          </span>

          <div className="ml-auto flex items-center gap-1">
            <Button
              variant="ghost"
              size="icon-sm"
              title="Zoom out"
              onClick={() => stepZoom(-0.1)}
            >
              <ZoomOut />
            </Button>
            <div className="w-28">
              <Slider
                min={0}
                max={100}
                value={[sliderPos * 100]}
                onValueChange={(value) =>
                  applySlider((Array.isArray(value) ? value[0] : value) / 100)
                }
              />
            </div>
            <Button
              variant="ghost"
              size="icon-sm"
              title="Zoom in"
              onClick={() => stepZoom(0.1)}
            >
              <ZoomIn />
            </Button>
            <Button
              variant="ghost"
              size="icon-sm"
              title="Fit to width"
              onClick={fit}
            >
              <Maximize2 />
            </Button>
            <span className="text-muted-foreground w-9 text-right text-xs tabular-nums">
              {Math.max(1, Math.round(sliderPos * 100))}%
            </span>
          </div>
        </div>

        {/* Timeline — the hero; scrolls horizontally when zoomed past the view. */}
        <div className="bg-muted/30 rounded-lg p-3">
          <div ref={measureRef}>
            <ScrollArea
              style={{ height: RULER_HEIGHT + 8 + height + PLAYHEAD_KNOB + 8 }}
            >
              {/* Pad the scroll content by half a knob on every side so the
                  playhead circle stays fully visible at the start, end and top.
                  The inner track is the positioning origin shared by the ruler,
                  strip and playhead, so they all stay aligned. */}
              <div
                style={{
                  width: width + PLAYHEAD_KNOB,
                  minWidth: '100%',
                  padding: PLAYHEAD_KNOB / 2,
                  boxSizing: 'border-box',
                }}
              >
                <div
                  style={{
                    position: 'relative',
                    width,
                    minWidth: '100%',
                    cursor: 'pointer',
                  }}
                  onPointerDown={scrubFrom}
                >
                  <TimelineRuler
                    duration={total}
                    pixelsPerSecond={pixelsPerSecond}
                    zoom={zoom}
                    height={RULER_HEIGHT}
                  />
                  <div
                    className="mt-2"
                    style={{
                      position: 'relative',
                      width,
                      height,
                      overflow: 'hidden',
                    }}
                  >
                    {/* Full thumbnail strip — always visible, so you can see what
                      is being cut away. */}
                    <ThumbnailStrip
                      cache={cache}
                      duration={total}
                      totalWidth={Math.ceil(width)}
                      tileWidth={Math.round((height * 16) / 9)}
                      tileHeight={height}
                    />

                    {/* Spotlight — dim everything outside the selection instead of
                      hiding it. The large spread shadow follows the rounded
                      corners, so the dim hugs the selection frame exactly (no
                      square-vs-rounded notch at the corners). Clipped to the
                      strip band by the parent's overflow. */}
                    <div
                      style={{
                        position: 'absolute',
                        top: 0,
                        bottom: 0,
                        left: clip.startTime * pps,
                        width: clip.duration * pps,
                        borderRadius: 8,
                        boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.45)',
                        pointerEvents: 'none',
                      }}
                    />

                    {/* Selection window — a transparent frame (border + draggable
                      trim handles only) so the thumbnails inside stay visible. */}
                    <TimelineElement
                      startTime={clip.startTime}
                      duration={clip.duration}
                      pixelsPerSecond={pixelsPerSecond}
                      zoom={zoom}
                      height={height}
                      minDuration={0.5}
                      maxEnd={total}
                      selected
                      movable
                      color="transparent"
                      onResize={updateClip}
                    />
                  </div>
                  <TimelinePlayhead
                    currentTime={time}
                    duration={total}
                    pixelsPerSecond={pixelsPerSecond}
                    zoom={zoom}
                    onSeek={seek}
                  />
                </div>
              </div>
              <ScrollBar orientation="horizontal" />
            </ScrollArea>
          </div>
        </div>
      </CardContent>

      {/* Footer — selection summary on the left, source / export on the right. */}
      <CardFooter className="gap-4">
        <Stat label="In" value={formatTime(clip.startTime)} />
        <Stat label="Out" value={formatTime(out)} />
        <Stat label="Length" value={formatTime(clip.duration)} />

        <div className="ml-auto flex items-center gap-2">
          <Button render={<label />} nativeButton={false} variant="outline">
            <Upload />
            Load video
            <input
              type="file"
              accept="video/*"
              className="hidden"
              onChange={(event) => {
                const next = event.target.files?.[0]
                if (next) setFile(next)
              }}
            />
          </Button>
          <Button
            type="button"
            onClick={() => void exportClip()}
            disabled={exporting}
          >
            {exporting ? (
              <>
                <Loader2 className="animate-spin" />
                {Math.round(progress * 100)}%
              </>
            ) : (
              <>
                <Download />
                Export clip
              </>
            )}
          </Button>
        </div>
      </CardFooter>
    </Card>
  )
}

export default VideoTrimmer

'use client'

import {
  Film,
  ImageIcon,
  Maximize2,
  Pause,
  Play,
  ZoomIn,
  ZoomOut,
} from 'lucide-react'
import * as React from 'react'
import { ThumbnailStrip } from '@/components/thumbnail-strip'
import { TimelinePlayhead } from '@/components/timeline-playhead'
import { TimelineRuler } from '@/components/timeline-ruler'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
import { Skeleton } from '@/components/ui/skeleton'
import { Slider } from '@/components/ui/slider'
import { VideoThumbnailCache } from '@/lib/video-thumbnail-cache'

/** A storyboard shot: a video (duration from metadata) or a still image shown for `duration` seconds. */
export type StoryboardSource =
  | { kind: 'video'; url: string }
  | { kind: 'image'; url: string; duration?: number }

const DEFAULT_IMAGE_DURATION = 3

const SAMPLE_SOURCES: StoryboardSource[] = [
  {
    kind: 'video',
    url: 'https://hj-video.zeroaigen.cn/prod/AI/VIDEO/53e46f7949f0d57b77b0cfe47ecf0301.mp4',
  },
  {
    kind: 'image',
    url: 'https://hj-img.zeroaigen.cn/prod/USER/IMAGE/bb281336e56e4ef166493e6bb6b83f46.png',
  },
  {
    kind: 'video',
    url: 'https://hj-video.zeroaigen.cn/prod/AI/VIDEO/f4e7fdc9807348eedc1e64a963c7433e.mp4',
  },
]

const RULER_HEIGHT = 24
const CARD_HEADER_HEIGHT = 22
const STRIP_HEIGHT = 56
const CARD_GAP = 10
// Matches TimelinePlayhead's knob diameter — the track is padded by half this
// on each side so the knob stays fully visible at either end.
const PLAYHEAD_KNOB = 12
const ZOOM_MIN = 0.5
const ZOOM_MAX = 4

type VideoItem = {
  kind: 'video'
  id: string
  url: string
  cache: VideoThumbnailCache
  duration: number
}
type ImageItem = { kind: 'image'; id: string; url: string; duration: number }
type Item = VideoItem | ImageItem

type LoadState =
  | { kind: 'loading' }
  | { kind: 'error'; message: string }
  | { kind: 'ready'; items: Item[] }

/** `mm:ss.s` timestamp, e.g. `00:15.5`. */
function formatTime(seconds: number): string {
  const m = Math.floor(seconds / 60)
  const s = seconds % 60
  return `${String(m).padStart(2, '0')}:${s.toFixed(1).padStart(4, '0')}`
}

/** Absolute time -> item index + item-local time. */
function locate(abs: number, durations: number[]) {
  let acc = 0
  for (let i = 0; i < durations.length; i++) {
    if (abs < acc + durations[i] || i === durations.length - 1)
      return { index: i, local: Math.max(0, abs - acc) }
    acc += durations[i]
  }
  return { index: 0, local: 0 }
}

/** Linear slider position (0–1) → exponential zoom, so low values step gently. */
function sliderToZoom(position: number, min: number, max: number): number {
  if (max <= min) return min
  const p = Math.max(0, Math.min(1, position))
  return min * (max / min) ** p
}

/** Inverse of `sliderToZoom`. */
function zoomToSlider(zoom: number, min: number, max: number): number {
  if (max <= min) return 0
  const z = Math.max(min, Math.min(max, zoom))
  return Math.log(z / min) / Math.log(max / min)
}

export interface StoryboardTimelineProps {
  /** Shots to lay out end-to-end — videos and/or still images. Defaults to a built-in sample set (remote demo videos + a local still). */
  sources?: StoryboardSource[]
  /** Base pixels per second at zoom = 1. Default: `50`. */
  pixelsPerSecond?: number
}

export function StoryboardTimeline({
  sources = SAMPLE_SOURCES,
  pixelsPerSecond = 50,
}: StoryboardTimelineProps) {
  const [state, setState] = React.useState<LoadState>({ kind: 'loading' })
  const [currentTime, setCurrentTime] = React.useState(0) // absolute
  const [playing, setPlaying] = React.useState(false)
  const [zoom, setZoom] = React.useState(1)
  const [containerWidth, setContainerWidth] = React.useState(0)
  const videoRef = React.useRef<HTMLVideoElement>(null)
  const contentRef = React.useRef<HTMLDivElement>(null)
  const pendingSeekRef = React.useRef<number | null>(null)
  const wantsPlayRef = React.useRef(false)
  // Mirror of currentTime so the image-clock rAF loop reads the latest value.
  const currentTimeRef = React.useRef(0)
  currentTimeRef.current = currentTime
  // Auto-fit the zoom once per load, after the width is known.
  const didFitRef = React.useRef(false)
  const resizeObserverRef = React.useRef<ResizeObserver | null>(null)

  // Measure the available width (callback ref re-attaches when the node mounts).
  const measureRef = React.useCallback((el: HTMLDivElement | null) => {
    resizeObserverRef.current?.disconnect()
    if (!el) return
    setContainerWidth(el.clientWidth)
    const ro = new ResizeObserver(() => setContainerWidth(el.clientWidth))
    ro.observe(el)
    resizeObserverRef.current = ro
  }, [])

  React.useEffect(() => {
    let cancelled = false
    let acquired: Item[] = []

    const disposeVideos = (items: Item[]) => {
      for (const it of items) if (it.kind === 'video') it.cache.dispose()
    }

    void (async () => {
      const results = await Promise.allSettled(
        sources.map(async (source, i): Promise<Item> => {
          const id = `${i}-${source.url}`
          if (source.kind === 'image') {
            return {
              kind: 'image',
              id,
              url: source.url,
              duration: source.duration ?? DEFAULT_IMAGE_DURATION,
            }
          }
          const cache = await VideoThumbnailCache.fromUrl(source.url)
          const meta = cache.getMetadata()
          if (!meta) throw new Error('metadata missing after init')
          return {
            kind: 'video',
            id,
            url: source.url,
            cache,
            duration: meta.duration,
          }
        }),
      )

      // Caches that decoded before any rejection still hold ImageBitmaps —
      // dispose them so a partial failure (or unmount) doesn't leak.
      const items = results
        .filter(
          (r): r is PromiseFulfilledResult<Item> => r.status === 'fulfilled',
        )
        .map((r) => r.value)
      const rejected = results.find(
        (r): r is PromiseRejectedResult => r.status === 'rejected',
      )

      if (cancelled || rejected) {
        disposeVideos(items)
        if (cancelled) return
        const reason = rejected?.reason
        setState({
          kind: 'error',
          message: reason instanceof Error ? reason.message : String(reason),
        })
        return
      }

      acquired = items
      setState({ kind: 'ready', items })
    })()

    return () => {
      cancelled = true
      disposeVideos(acquired)
    }
  }, [sources])

  const durations = React.useMemo(
    () => (state.kind === 'ready' ? state.items.map((it) => it.duration) : []),
    [state],
  )
  const starts = React.useMemo(() => {
    const out: number[] = []
    let acc = 0
    for (const d of durations) {
      out.push(acc)
      acc += d
    }
    return out
  }, [durations])

  const total = durations.reduce((s, d) => s + d, 0)
  const pps = pixelsPerSecond * zoom
  const contentWidth = total * pps
  const { index: currentIndex } = locate(currentTime, durations)

  // Zoom that fits the whole storyboard in the available width. Subtract the
  // track padding (half a knob each side) so the filled timeline lands exactly
  // on the viewport edge instead of leaving a sliver of scrollable overflow.
  const fitZoom =
    total > 0 && containerWidth > 0
      ? Math.min(
          ZOOM_MAX,
          (containerWidth - PLAYHEAD_KNOB) / (total * pixelsPerSecond),
        )
      : 1
  const minZoom = Math.min(ZOOM_MIN, fitZoom)
  const maxZoom = Math.max(ZOOM_MAX, fitZoom)
  const sliderPos = zoomToSlider(zoom, minZoom, maxZoom)

  // Fit once, when the width and duration first become known.
  React.useEffect(() => {
    if (!total || containerWidth <= 0 || didFitRef.current) return
    setZoom(fitZoom)
    didFitRef.current = true
  }, [total, containerWidth, fitZoom])

  // Video clock: while a video shot is active, the <video> drives currentTime.
  React.useEffect(() => {
    if (state.kind !== 'ready') return
    const active = state.items[currentIndex]
    if (!active || active.kind !== 'video') return
    const video = videoRef.current
    if (!video) return

    const onTime = () =>
      setCurrentTime(starts[currentIndex] + video.currentTime)
    const onPlay = () => setPlaying(true)
    // A natural end fires `pause` then `ended`; don't stop there — let `ended`
    // hand off to the next shot (incl. the image rAF clock). Only a real manual
    // pause (not at the end) should halt playback.
    const onPause = () => {
      if (!video.ended) setPlaying(false)
    }
    const onEnded = () => {
      if (currentIndex < state.items.length - 1) {
        wantsPlayRef.current = true
        pendingSeekRef.current = 0
        setCurrentTime(starts[currentIndex + 1])
      } else {
        setPlaying(false)
      }
    }

    video.addEventListener('timeupdate', onTime)
    video.addEventListener('play', onPlay)
    video.addEventListener('pause', onPause)
    video.addEventListener('ended', onEnded)
    return () => {
      video.removeEventListener('timeupdate', onTime)
      video.removeEventListener('play', onPlay)
      video.removeEventListener('pause', onPause)
      video.removeEventListener('ended', onEnded)
    }
  }, [state, currentIndex, starts])

  // Image clock: stills have no media element, so advance currentTime by rAF
  // while playing, and hand off to the next shot when the still's time is up.
  React.useEffect(() => {
    if (state.kind !== 'ready') return
    const active = state.items[currentIndex]
    if (!active || !playing || active.kind !== 'image') return
    const localEnd = starts[currentIndex] + active.duration
    let raf = 0
    // Seed `last` from the first frame's timestamp, not performance.now() — the
    // rAF clock can report a `now` slightly *before* a performance.now() taken
    // here, which would make the first dt negative and nudge currentTime back
    // across the shot boundary, bouncing the playhead onto the previous shot.
    let last: number | null = null
    const tick = (now: number) => {
      const dt = last === null ? 0 : (now - last) / 1000
      last = now
      const next = currentTimeRef.current + dt
      if (next >= localEnd) {
        if (currentIndex < state.items.length - 1) {
          wantsPlayRef.current = true
          pendingSeekRef.current = 0
          setCurrentTime(starts[currentIndex + 1])
        } else {
          setCurrentTime(localEnd)
          setPlaying(false)
        }
        return
      }
      setCurrentTime(next)
      raf = requestAnimationFrame(tick)
    }
    raf = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(raf)
  }, [playing, currentIndex, state, starts])

  const togglePlay = () => {
    if (state.kind !== 'ready') return
    const active = state.items[currentIndex]
    if (!active) return
    if (active.kind === 'video') {
      const video = videoRef.current
      if (!video) return
      if (video.paused) {
        wantsPlayRef.current = true
        void video.play()
      } else {
        wantsPlayRef.current = false
        video.pause()
      }
    } else {
      setPlaying((p) => {
        const next = !p
        wantsPlayRef.current = next
        return next
      })
    }
  }

  const seek = (abs: number) => {
    const { index, local } = locate(abs, durations)
    setCurrentTime(abs)
    if (state.kind !== 'ready') return
    if (index === currentIndex) {
      const active = state.items[index]
      if (active.kind === 'video') {
        const video = videoRef.current
        if (video) video.currentTime = local
      }
    } else {
      pendingSeekRef.current = local
    }
  }

  const scrubFrom = (event: React.PointerEvent<HTMLDivElement>) => {
    if (!contentRef.current) return
    const rect = contentRef.current.getBoundingClientRect()
    seek(Math.min(total, Math.max(0, (event.clientX - rect.left) / pps)))
  }

  const handleLoadedMetadata = () => {
    const video = videoRef.current
    if (!video) return
    if (pendingSeekRef.current !== null) {
      video.currentTime = pendingSeekRef.current
      pendingSeekRef.current = null
    }
    if (wantsPlayRef.current) void video.play()
  }

  const applySlider = (next: number) => {
    didFitRef.current = true
    setZoom(sliderToZoom(next, minZoom, maxZoom))
  }
  const stepZoom = (delta: number) => applySlider(sliderPos + delta)
  const fit = () => {
    didFitRef.current = true
    setZoom(fitZoom)
  }

  if (state.kind === 'loading') {
    return (
      <Card className="w-full">
        <CardContent className="flex flex-col gap-4 pt-(--card-spacing)">
          <Skeleton className="h-64 w-full rounded-md" />
          <Skeleton className="h-24 w-full rounded-md" />
        </CardContent>
      </Card>
    )
  }
  if (state.kind === 'error') {
    return (
      <Card className="w-full">
        <CardContent className="pt-(--card-spacing)">
          <p className="text-destructive text-sm">
            Could not load the storyboard.
          </p>
        </CardContent>
      </Card>
    )
  }

  if (state.items.length === 0) {
    return (
      <Card className="w-full">
        <CardContent className="pt-(--card-spacing)">
          <p className="text-muted-foreground text-sm">No shots to display.</p>
        </CardContent>
      </Card>
    )
  }

  const trackHeight = CARD_HEADER_HEIGHT + STRIP_HEIGHT
  const stripTileWidth = Math.round((STRIP_HEIGHT * 16) / 9)
  const active = state.items[currentIndex]

  return (
    <Card className="w-full">
      <CardContent className="flex flex-col gap-4 pt-(--card-spacing)">
        {active.kind === 'video' ? (
          <video
            key={currentIndex}
            ref={videoRef}
            src={active.url}
            crossOrigin="anonymous"
            playsInline
            onLoadedMetadata={handleLoadedMetadata}
            className="h-64 w-full rounded-md bg-black object-contain"
          >
            <track kind="captions" />
          </video>
        ) : (
          // biome-ignore lint/performance/noImgElement: shots take arbitrary / blob URLs, next/image would not fit a copyable block
          <img
            key={currentIndex}
            src={active.url}
            alt={`Shot ${currentIndex + 1}`}
            className="h-64 w-full rounded-md bg-black object-contain"
          />
        )}

        <div className="flex flex-wrap items-center gap-x-4 gap-y-3 text-sm">
          <Button
            type="button"
            size="icon-lg"
            className="rounded-full"
            onClick={togglePlay}
            aria-label={playing ? 'Pause' : 'Play'}
          >
            {playing ? <Pause /> : <Play className="translate-x-px" />}
          </Button>
          <span className="text-muted-foreground text-xs tabular-nums">
            <span className="text-foreground font-medium">
              {formatTime(currentTime)}
            </span>{' '}
            / {formatTime(total)}
          </span>
          <span className="text-muted-foreground">
            shot {currentIndex + 1} of {state.items.length}
          </span>

          <div className="ml-auto flex items-center gap-1">
            <Button
              variant="ghost"
              size="icon-sm"
              title="Zoom out"
              onClick={() => stepZoom(-0.1)}
            >
              <ZoomOut />
            </Button>
            <div className="w-28">
              <Slider
                min={0}
                max={100}
                value={[sliderPos * 100]}
                onValueChange={(value) =>
                  applySlider((Array.isArray(value) ? value[0] : value) / 100)
                }
              />
            </div>
            <Button
              variant="ghost"
              size="icon-sm"
              title="Zoom in"
              onClick={() => stepZoom(0.1)}
            >
              <ZoomIn />
            </Button>
            <Button
              variant="ghost"
              size="icon-sm"
              title="Fit to width"
              onClick={fit}
            >
              <Maximize2 />
            </Button>
            <span className="text-muted-foreground w-9 text-right text-xs tabular-nums">
              {Math.max(1, Math.round(sliderPos * 100))}%
            </span>
          </div>
        </div>

        {/* Storyboard timeline — each shot is its own card on a shared ruler. */}
        <div className="bg-muted/30 rounded-lg p-3">
          <div ref={measureRef}>
            <ScrollArea
              style={{
                height: RULER_HEIGHT + 8 + trackHeight + PLAYHEAD_KNOB + 8,
              }}
            >
              {/* Pad the scroll content by half a knob on every side so the
                  playhead circle stays fully visible at the start, end and top.
                  The inner track is the positioning origin shared by the ruler,
                  cards and playhead, so they all stay aligned. */}
              <div
                style={{
                  width: contentWidth + PLAYHEAD_KNOB,
                  minWidth: '100%',
                  padding: PLAYHEAD_KNOB / 2,
                  boxSizing: 'border-box',
                }}
              >
                <div
                  ref={contentRef}
                  style={{
                    position: 'relative',
                    width: contentWidth,
                    minWidth: '100%',
                    cursor: 'pointer',
                  }}
                  onPointerDown={scrubFrom}
                >
                  <TimelineRuler
                    duration={total}
                    pixelsPerSecond={pixelsPerSecond}
                    zoom={zoom}
                    height={RULER_HEIGHT}
                  />

                  <div
                    className="mt-2"
                    style={{
                      position: 'relative',
                      width: contentWidth,
                      height: trackHeight,
                    }}
                  >
                    {state.items.map((item, i) => {
                      const slotLeft = starts[i] * pps
                      const slotWidth = item.duration * pps
                      const cardWidth = Math.max(0, slotWidth - CARD_GAP)
                      const isActive = i === currentIndex
                      return (
                        <div
                          key={item.id}
                          className="bg-card overflow-hidden rounded-md border"
                          style={{
                            position: 'absolute',
                            top: 0,
                            left: slotLeft + CARD_GAP / 2,
                            width: cardWidth,
                            height: trackHeight,
                            borderColor: isActive
                              ? 'var(--primary)'
                              : 'var(--border)',
                            boxShadow: isActive
                              ? '0 0 0 1px var(--primary)'
                              : undefined,
                          }}
                        >
                          <div
                            className="text-muted-foreground flex items-center gap-1.5 overflow-hidden whitespace-nowrap px-2 text-[11px]"
                            style={{
                              height: CARD_HEADER_HEIGHT,
                              lineHeight: `${CARD_HEADER_HEIGHT}px`,
                            }}
                          >
                            <span className="text-foreground font-medium">
                              Shot {i + 1}
                            </span>
                            <span className="tabular-nums">
                              {formatTime(item.duration)}
                            </span>
                            <span className="ml-auto inline-flex items-center gap-1">
                              {item.kind === 'video' ? (
                                <>
                                  <Film className="size-3" />
                                  video
                                </>
                              ) : (
                                <>
                                  <ImageIcon className="size-3" />
                                  image
                                </>
                              )}
                            </span>
                          </div>
                          {item.kind === 'video' ? (
                            <ThumbnailStrip
                              cache={item.cache}
                              duration={item.duration}
                              totalWidth={cardWidth}
                              tileWidth={stripTileWidth}
                              tileHeight={STRIP_HEIGHT}
                            />
                          ) : (
                            <div
                              style={{
                                width: cardWidth,
                                height: STRIP_HEIGHT,
                                backgroundImage: `url(${item.url})`,
                                backgroundSize: `${stripTileWidth}px ${STRIP_HEIGHT}px`,
                                backgroundRepeat: 'repeat-x',
                                backgroundPosition: 'left center',
                              }}
                            />
                          )}
                        </div>
                      )
                    })}
                  </div>

                  <TimelinePlayhead
                    currentTime={currentTime}
                    duration={total}
                    pixelsPerSecond={pixelsPerSecond}
                    zoom={zoom}
                    onSeek={seek}
                  />
                </div>
              </div>
              <ScrollBar orientation="horizontal" />
            </ScrollArea>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

export default StoryboardTimeline