vfxreview/components/shots/FootageViewer.tsx

"use client";

import { useRef, useState } from "react";
import { Video, Upload, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { updateShot } from "@/actions/shots";
import { useToast } from "@/components/ui/use-toast";

interface FootageViewerProps {
  shot: {
    id: string;
    shotCode: string;
    originalFootageUrl: string | null;
    originalFootageKey: string | null;
  };
  canManage: boolean;
  onSaved?: () => void;
}

function uploadViaXhr(
  file: File,
  onProgress: (fraction: number) => void
): Promise<{ url: string; key: string }> {
  return new Promise((resolve, reject) => {
    const formData = new FormData();
    formData.append("file", file);

    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/api/upload/local");

    xhr.upload.addEventListener("progress", (e) => {
      if (e.lengthComputable) onProgress(e.loaded / e.total);
    });

    xhr.addEventListener("load", () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        try {
          const json = JSON.parse(xhr.responseText);
          if (json.url) resolve({ url: json.url, key: json.key ?? "" });
          else reject(new Error(json.error ?? "Upload failed"));
        } catch {
          reject(new Error("Invalid server response"));
        }
      } else {
        try {
          const json = JSON.parse(xhr.responseText);
          reject(new Error(json.error ?? `HTTP ${xhr.status}`));
        } catch {
          reject(new Error(`HTTP ${xhr.status}`));
        }
      }
    });

    xhr.addEventListener("error", () => reject(new Error("Network error")));
    xhr.addEventListener("abort", () => reject(new Error("Upload aborted")));
    xhr.send(formData);
  });
}

export function FootageViewer({ shot, canManage, onSaved }: FootageViewerProps) {
  const { toast } = useToast();
  const videoRef = useRef<HTMLVideoElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [footageFile, setFootageFile] = useState<File | null>(null);
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [currentUrl, setCurrentUrl] = useState<string | null>(shot.originalFootageUrl ?? null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setFootageFile(file);
    e.target.value = "";
  };

  const handleUpload = async () => {
    if (!footageFile) return;
    setUploading(true);
    setProgress(0);
    try {
      const { url, key } = await uploadViaXhr(footageFile, setProgress);
      await updateShot({
        shotId: shot.id,
        originalFootageUrl: url,
        originalFootageKey: key || undefined,
      });
      setCurrentUrl(url);
      setFootageFile(null);
      toast({ title: "Footage uploaded" });
      onSaved?.();
    } catch (e) {
      toast({
        title: "Upload failed",
        description: e instanceof Error ? e.message : undefined,
        variant: "destructive",
      });
    } finally {
      setUploading(false);
      setProgress(0);
    }
  };

  const handleRemove = async () => {
    try {
      await updateShot({ shotId: shot.id, originalFootageUrl: null, originalFootageKey: null });
      setCurrentUrl(null);
      setFootageFile(null);
      toast({ title: "Footage removed" });
      onSaved?.();
    } catch (e) {
      toast({
        title: "Failed to remove footage",
        description: e instanceof Error ? e.message : undefined,
        variant: "destructive",
      });
    }
  };

  return (
    <div className="space-y-4 max-w-4xl">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-semibold text-zinc-300 flex items-center gap-2">
          <Video className="h-4 w-4 text-amber-500" />
          Original Footage
          <span className="text-xs font-mono text-zinc-500">{shot.shotCode}</span>
        </h3>
        {canManage && currentUrl && (
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              className="text-xs"
              onClick={() => fileInputRef.current?.click()}
              disabled={uploading}
            >
              <Upload className="h-3.5 w-3.5 mr-1.5" />
              Replace
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="text-xs text-zinc-500 hover:text-red-400"
              onClick={handleRemove}
              disabled={uploading}
            >
              <X className="h-3.5 w-3.5 mr-1.5" />
              Remove
            </Button>
          </div>
        )}
      </div>

      {/* Video player */}
      {currentUrl && (
        <div className="relative w-full rounded-xl overflow-hidden bg-black border border-zinc-800 aspect-video">
          <video
            ref={videoRef}
            src={currentUrl}
            controls
            className="w-full h-full"
            preload="metadata"
          >
            Your browser does not support the video tag.
          </video>
        </div>
      )}

      {/* Empty state */}
      {!currentUrl && !footageFile && (
        <div
          className={`flex flex-col items-center justify-center py-20 gap-4 rounded-xl border-2 border-dashed border-zinc-800 text-zinc-500 ${
            canManage ? "hover:border-amber-500/40 cursor-pointer transition-colors" : ""
          }`}
          onClick={() => canManage && fileInputRef.current?.click()}
        >
          <Video className="h-12 w-12 opacity-30" />
          <p className="text-sm">No original footage uploaded yet.</p>
          {canManage && <p className="text-xs text-zinc-600">Click to select a video file</p>}
        </div>
      )}

      {/* Pending file — ready to upload */}
      {footageFile && !uploading && (
        <div className="flex items-center gap-3 p-3 rounded-lg bg-zinc-900 border border-zinc-800">
          <Video className="h-5 w-5 text-zinc-400 shrink-0" />
          <div className="flex-1 min-w-0">
            <p className="text-sm text-zinc-300 truncate">{footageFile.name}</p>
            <p className="text-xs text-zinc-500">{(footageFile.size / 1024 / 1024).toFixed(1)} MB</p>
          </div>
          <Button size="sm" onClick={handleUpload}>
            <Upload className="h-3.5 w-3.5 mr-1.5" />
            Upload
          </Button>
          <button
            type="button"
            onClick={() => setFootageFile(null)}
            className="text-zinc-500 hover:text-zinc-300"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
      )}

      {/* Upload progress */}
      {uploading && (
        <div className="space-y-2 p-3 rounded-lg bg-zinc-900 border border-zinc-800">
          <div className="flex items-center justify-between text-xs text-zinc-400">
            <span>Uploading footage…</span>
            <span>{Math.round(progress * 100)}%</span>
          </div>
          <div className="h-1.5 bg-zinc-800 rounded-full overflow-hidden">
            <div
              className="h-full bg-amber-500 transition-all duration-200"
              style={{ width: `${progress * 100}%` }}
            />
          </div>
        </div>
      )}

      <input
        ref={fileInputRef}
        type="file"
        accept="video/mp4,video/quicktime,video/x-msvideo,video/x-matroska,video/webm,video/*"
        className="hidden"
        onChange={handleFileChange}
      />
    </div>
  );
}