"use client";

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { useState } from "react";

type Timelapse = {
  s3Key: string;
  fileName: string | null;
  mimeType: string | null;
  sizeBytes: number | null;
};

export default function ArtworkTimelapseViewer({
  timelapse,
  artworkName,
  trigger,
}: {
  timelapse: Timelapse;
  artworkName?: string | null;
  trigger: React.ReactNode;
}) {
  const [open, setOpen] = useState(false);

  const src = `/api/image/${encodeURI(timelapse.s3Key)}`;

  // Minimal empty captions track (satisfies jsx-a11y/media-has-caption)
  const emptyVtt = "data:text/vtt;charset=utf-8,WEBVTT%0A%0A";

  const title = artworkName ? `Timelapse — ${artworkName}` : "Timelapse";

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{trigger}</DialogTrigger>

      <DialogContent className="max-w-3xl">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
        </DialogHeader>

        {open ? (
          <div className="space-y-2">
            <video
              className="w-full rounded-md border bg-black"
              controls
              preload="metadata"
              playsInline
            >
              <source src={src} type={timelapse.mimeType ?? "video/mp4"} />
              <track kind="captions" src={emptyVtt} srcLang="en" label="Captions" default />
              Your browser does not support the video tag.
            </video>

            <div className="text-xs text-muted-foreground">
              {/* {timelapse.fileName ? timelapse.fileName : timelapse.s3Key} */}
            </div>
          </div>
        ) : null}
      </DialogContent>
    </Dialog>
  );
}