From 02280200414f98e6482ffbea464a32a323a2decb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C4=B0pek?= <yusufipek@protonmail.com>
Date: Sat, 7 Feb 2026 08:17:25 +0300
Subject: [PATCH] feat(video-card): add edit, versioning, and delete
 functionality with dialogs

- Implemented edit dialog for updating video title and description.
- Added functionality to create new video versions with URL validation.
- Included delete confirmation dialog for video removal.
- Enhanced UI with loading indicators and error handling.
- Updated video card layout for better user interaction.

feat(youtube): extend YT namespace with playback rate methods

- Added methods to set and get playback rate.
- Included method to retrieve available playback rates.
---
 app/(dashboard)/projects/[projectId]/page.tsx |    4 +-
 .../videos/[videoId]/compare/page.tsx         |  281 +++++
 .../[projectId]/videos/[videoId]/page.tsx     | 1064 ++++++++++++-----
 .../projects/[projectId]/videos/new/page.tsx  |  103 +-
 app/api/comments/[commentId]/route.ts         |    4 +-
 .../[projectId]/videos/[videoId]/route.ts     |    4 +-
 .../videos/[videoId]/versions/route.ts        |    4 +-
 app/api/projects/[projectId]/videos/route.ts  |    4 +-
 .../versions/[versionId]/comments/route.ts    |    4 +-
 app/api/watch/[videoId]/route.ts              |   64 +
 app/watch/[videoId]/page.tsx                  |  757 +++++++-----
 components/video-card.tsx                     |  390 +++++-
 types/youtube.d.ts                            |    3 +
 13 files changed, 1982 insertions(+), 704 deletions(-)
 create mode 100644 app/(dashboard)/projects/[projectId]/videos/[videoId]/compare/page.tsx
 create mode 100644 app/api/watch/[videoId]/route.ts

diff --git a/app/(dashboard)/projects/[projectId]/page.tsx b/app/(dashboard)/projects/[projectId]/page.tsx
index be42a0b..dcfde3d 100644
--- a/app/(dashboard)/projects/[projectId]/page.tsx
+++ b/app/(dashboard)/projects/[projectId]/page.tsx
@@ -92,7 +92,7 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
   // Check access
   const isOwner = session?.user?.id === project.ownerId;
   const isMember = project.members.length > 0;
-  const isPublicOrLink = project.visibility !== 'PRIVATE';
+  const isPublic = project.visibility === 'PUBLIC';
 
   // Check workspace membership
   let isWorkspaceMember = false;
@@ -116,7 +116,7 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
     }
   }
 
-  if (!isOwner && !isMember && !isPublicOrLink && !isWorkspaceMember) {
+  if (!isOwner && !isMember && !isPublic && !isWorkspaceMember) {
     redirect('/dashboard');
   }
 
diff --git a/app/(dashboard)/projects/[projectId]/videos/[videoId]/compare/page.tsx b/app/(dashboard)/projects/[projectId]/videos/[videoId]/compare/page.tsx
new file mode 100644
index 0000000..13974a6
--- /dev/null
+++ b/app/(dashboard)/projects/[projectId]/videos/[videoId]/compare/page.tsx
@@ -0,0 +1,281 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useParams, useSearchParams } from 'next/navigation';
+import {
+  ArrowLeft,
+  MessageSquare,
+  ChevronDown,
+  Loader2,
+  GitCompareArrows,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+
+interface Version {
+  id: string;
+  versionNumber: number;
+  versionLabel: string | null;
+  providerId: string;
+  videoId: string;
+  originalUrl: string;
+  title: string | null;
+  thumbnailUrl: string | null;
+  duration: number | null;
+  isActive: boolean;
+  _count: { comments: number };
+}
+
+interface VideoData {
+  id: string;
+  title: string;
+  description: string | null;
+  projectId: string;
+  project: {
+    name: string;
+  };
+  versions: Version[];
+}
+
+function getEmbedUrl(version: Version) {
+  if (version.providerId === 'youtube') {
+    return `https://www.youtube.com/embed/${version.videoId}?enablejsapi=1&rel=0&modestbranding=1`;
+  }
+  if (version.providerId === 'vimeo') {
+    return `https://player.vimeo.com/video/${version.videoId}`;
+  }
+  return version.originalUrl;
+}
+
+export default function CompareVersionsPage() {
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const projectId = params.projectId as string;
+  const videoId = params.videoId as string;
+
+  const [video, setVideo] = useState<VideoData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const [leftVersionId, setLeftVersionId] = useState<string | null>(null);
+  const [rightVersionId, setRightVersionId] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchVideo() {
+      try {
+        const res = await fetch(`/api/projects/${projectId}/videos/${videoId}`);
+        if (!res.ok) {
+          setError('Failed to load video');
+          setLoading(false);
+          return;
+        }
+        const data = await res.json();
+        setVideo(data);
+
+        // Set initial versions from query params or defaults
+        const leftParam = searchParams.get('left');
+        const rightParam = searchParams.get('right');
+
+        if (data.versions.length >= 2) {
+          // Sort versions ascending for comparison (older on left, newer on right)
+          const sorted = [...data.versions].sort(
+            (a: Version, b: Version) => a.versionNumber - b.versionNumber
+          );
+          setLeftVersionId(
+            leftParam && sorted.find((v: Version) => v.id === leftParam)
+              ? leftParam
+              : sorted[sorted.length - 2].id
+          );
+          setRightVersionId(
+            rightParam && sorted.find((v: Version) => v.id === rightParam)
+              ? rightParam
+              : sorted[sorted.length - 1].id
+          );
+        } else if (data.versions.length === 1) {
+          setLeftVersionId(data.versions[0].id);
+          setRightVersionId(data.versions[0].id);
+        }
+      } catch {
+        setError('Failed to load video');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchVideo();
+  }, [projectId, videoId, searchParams]);
+
+  const leftVersion = video?.versions.find((v) => v.id === leftVersionId);
+  const rightVersion = video?.versions.find((v) => v.id === rightVersionId);
+
+  if (loading) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error || !video || video.versions.length < 2) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background">
+        <div className="text-center">
+          <p className="text-muted-foreground mb-4">
+            {error || 'Need at least 2 versions to compare'}
+          </p>
+          <Button asChild variant="outline">
+            <Link href={`/projects/${projectId}/videos/${videoId}`}>Back to Video</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen flex flex-col bg-background overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 flex items-center justify-between h-12 px-4 border-b bg-background/50">
+        <div className="flex items-center gap-3">
+          <Link
+            href={`/projects/${projectId}/videos/${videoId}`}
+            className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ArrowLeft className="h-4 w-4 mr-1" />
+            Back to Video
+          </Link>
+          <Separator orientation="vertical" className="h-5" />
+          <div className="flex items-center gap-2">
+            <GitCompareArrows className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">Compare Versions</span>
+            <span className="text-xs text-muted-foreground">• {video.title}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Side-by-side comparison */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left panel */}
+        <div className="flex-1 flex flex-col border-r">
+          <div className="shrink-0 flex items-center justify-between p-3 border-b bg-muted/30">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <Badge variant="secondary" className="mr-2">
+                    v{leftVersion?.versionNumber}
+                  </Badge>
+                  {leftVersion?.versionLabel || `Version ${leftVersion?.versionNumber}`}
+                  <ChevronDown className="h-4 w-4 ml-2" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                {video.versions.map((v) => (
+                  <DropdownMenuItem
+                    key={v.id}
+                    onClick={() => setLeftVersionId(v.id)}
+                    disabled={v.id === rightVersionId}
+                  >
+                    <Badge
+                      variant={v.id === leftVersionId ? 'default' : 'secondary'}
+                      className="mr-2"
+                    >
+                      v{v.versionNumber}
+                    </Badge>
+                    {v.versionLabel || `Version ${v.versionNumber}`}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <MessageSquare className="h-3 w-3" />
+              {leftVersion?._count.comments || 0} comments
+            </div>
+          </div>
+
+          <div className="flex-1 bg-black flex items-center justify-center p-2">
+            {leftVersion && (
+              <iframe
+                src={getEmbedUrl(leftVersion)}
+                className="w-full h-full"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              />
+            )}
+          </div>
+
+          {leftVersion?.duration && (
+            <div className="shrink-0 px-3 py-2 border-t text-xs text-muted-foreground text-center">
+              Duration: {Math.floor(leftVersion.duration / 60)}:
+              {(leftVersion.duration % 60).toString().padStart(2, '0')}
+            </div>
+          )}
+        </div>
+
+        {/* Right panel */}
+        <div className="flex-1 flex flex-col">
+          <div className="shrink-0 flex items-center justify-between p-3 border-b bg-muted/30">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <Badge variant="secondary" className="mr-2">
+                    v{rightVersion?.versionNumber}
+                  </Badge>
+                  {rightVersion?.versionLabel || `Version ${rightVersion?.versionNumber}`}
+                  <ChevronDown className="h-4 w-4 ml-2" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                {video.versions.map((v) => (
+                  <DropdownMenuItem
+                    key={v.id}
+                    onClick={() => setRightVersionId(v.id)}
+                    disabled={v.id === leftVersionId}
+                  >
+                    <Badge
+                      variant={v.id === rightVersionId ? 'default' : 'secondary'}
+                      className="mr-2"
+                    >
+                      v{v.versionNumber}
+                    </Badge>
+                    {v.versionLabel || `Version ${v.versionNumber}`}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <MessageSquare className="h-3 w-3" />
+              {rightVersion?._count.comments || 0} comments
+            </div>
+          </div>
+
+          <div className="flex-1 bg-black flex items-center justify-center p-2">
+            {rightVersion && (
+              <iframe
+                src={getEmbedUrl(rightVersion)}
+                className="w-full h-full"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              />
+            )}
+          </div>
+
+          {rightVersion?.duration && (
+            <div className="shrink-0 px-3 py-2 border-t text-xs text-muted-foreground text-center">
+              Duration: {Math.floor(rightVersion.duration / 60)}:
+              {(rightVersion.duration % 60).toString().padStart(2, '0')}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(dashboard)/projects/[projectId]/videos/[videoId]/page.tsx b/app/(dashboard)/projects/[projectId]/videos/[videoId]/page.tsx
index 7aff83b..50fb7e7 100644
--- a/app/(dashboard)/projects/[projectId]/videos/[videoId]/page.tsx
+++ b/app/(dashboard)/projects/[projectId]/videos/[videoId]/page.tsx
@@ -1,15 +1,17 @@
 'use client';
 
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import Link from 'next/link';
-import { useParams } from 'next/navigation';
-import { 
-  ArrowLeft, 
-  Play, 
-  Pause, 
-  Volume2, 
+import { useParams, useRouter } from 'next/navigation';
+import {
+  ArrowLeft,
+  Play,
+  Pause,
+  Volume2,
   VolumeX,
-  Maximize,
+  SkipBack,
+  SkipForward,
+  Gauge,
   MessageSquare,
   Mic,
   Send,
@@ -18,14 +20,27 @@ import {
   Circle,
   ChevronDown,
   MoreVertical,
-  User
+  Plus,
+  Loader2,
+  Link as LinkIcon,
+  AlertCircle,
+  GitCompareArrows,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Card, CardContent } from '@/components/ui/card';
 import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Separator } from '@/components/ui/separator';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -33,67 +48,53 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { cn } from '@/lib/utils';
+import { parseVideoUrl, getThumbnailUrl, fetchVideoMetadata, type VideoSource } from '@/lib/video-providers';
 
-// Mock data
-const mockVideo = {
-  id: 'v1',
-  title: 'Main Product Walkthrough',
-  description: 'Complete walkthrough of the new product features',
-  projectId: '1',
-  projectName: 'Product Demo v2',
-  versions: [
-    { id: 'ver3', number: 3, label: 'Final Cut', isActive: true },
-    { id: 'ver2', number: 2, label: 'Review Round 2', isActive: false },
-    { id: 'ver1', number: 1, label: 'First Draft', isActive: false },
-  ],
-  currentVersion: {
-    id: 'ver3',
-    number: 3,
-    label: 'Final Cut',
-    providerId: 'youtube',
-    videoId: 'dQw4w9WgXcQ', // Sample video
-    duration: 342, // 5:42
-  },
-};
+interface Version {
+  id: string;
+  versionNumber: number;
+  versionLabel: string | null;
+  providerId: string;
+  videoId: string;
+  originalUrl: string;
+  title: string | null;
+  thumbnailUrl: string | null;
+  duration: number | null;
+  isActive: boolean;
+  _count: { comments: number };
+}
 
-const mockComments = [
-  {
-    id: 'c1',
-    content: 'The transition here feels a bit abrupt. Can we add a fade?',
-    timestamp: 45.5,
-    author: { name: 'Sarah Chen', image: null },
-    createdAt: '2 hours ago',
-    isResolved: false,
-    replies: [
-      {
-        id: 'c1r1',
-        content: 'Good catch! I\'ll smooth that out in the next version.',
-        author: { name: 'Mike Johnson', image: null },
-        createdAt: '1 hour ago',
-      },
-    ],
-  },
-  {
-    id: 'c2',
-    content: 'Love this section! The pacing is perfect.',
-    timestamp: 120,
-    author: { name: 'Alex Rivera', image: null },
-    createdAt: '5 hours ago',
-    isResolved: true,
-    replies: [],
-  },
-  {
-    id: 'c3',
-    content: 'Can we add some background music here?',
-    timestamp: 200,
-    voiceUrl: '/mock-voice.mp3', // Mock voice comment
-    voiceDuration: 8.5,
-    author: { name: 'Jordan Lee', image: null },
-    createdAt: '1 day ago',
-    isResolved: false,
-    replies: [],
-  },
-];
+interface Comment {
+  id: string;
+  content: string | null;
+  timestamp: number;
+  voiceUrl: string | null;
+  voiceDuration: number | null;
+  isResolved: boolean;
+  createdAt: string;
+  author: { id: string; name: string | null; image: string | null } | null;
+  guestName: string | null;
+  replies: {
+    id: string;
+    content: string | null;
+    createdAt: string;
+    author: { id: string; name: string | null; image: string | null } | null;
+    guestName: string | null;
+  }[];
+}
+
+interface VideoData {
+  id: string;
+  title: string;
+  description: string | null;
+  projectId: string;
+  project: {
+    name: string;
+    ownerId: string;
+    members: { role: string }[];
+  };
+  versions: (Version & { comments: Comment[] })[];
+}
 
 function formatTime(seconds: number): string {
   const mins = Math.floor(seconds / 60);
@@ -101,67 +102,402 @@ function formatTime(seconds: number): string {
   return `${mins}:${secs.toString().padStart(2, '0')}`;
 }
 
+const SPEED_OPTIONS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+
 export default function VideoPage() {
   const params = useParams();
+  const router = useRouter();
   const projectId = params.projectId as string;
   const videoId = params.videoId as string;
-  
+
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
+  const playerRef = useRef<YT.Player | null>(null);
+  const timelineRef = useRef<HTMLDivElement>(null);
+  const [video, setVideo] = useState<VideoData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [activeVersionId, setActiveVersionId] = useState<string | null>(null);
+  const [isReady, setIsReady] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(mockVideo.currentVersion.duration);
+  const [videoDuration, setVideoDuration] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
   const [isMuted, setIsMuted] = useState(false);
-  
+  const [isDragging, setIsDragging] = useState(false);
+  const [playbackSpeed, setPlaybackSpeed] = useState(1);
+
   const [commentText, setCommentText] = useState('');
+  const [isSubmittingComment, setIsSubmittingComment] = useState(false);
   const [isRecording, setIsRecording] = useState(false);
   const [selectedTimestamp, setSelectedTimestamp] = useState<number | null>(null);
-  const [comments, setComments] = useState(mockComments);
   const [showResolved, setShowResolved] = useState(false);
 
-  const filteredComments = comments.filter(c => showResolved || !c.isResolved);
+  // New version dialog
+  const [showVersionDialog, setShowVersionDialog] = useState(false);
+  const [newVersionUrl, setNewVersionUrl] = useState('');
+  const [newVersionLabel, setNewVersionLabel] = useState('');
+  const [newVersionSource, setNewVersionSource] = useState<VideoSource | null>(null);
+  const [newVersionUrlError, setNewVersionUrlError] = useState('');
+  const [isCreatingVersion, setIsCreatingVersion] = useState(false);
+
+  // Fetch video data
+  useEffect(() => {
+    async function fetchVideo() {
+      try {
+        const res = await fetch(`/api/projects/${projectId}/videos/${videoId}`);
+        if (!res.ok) {
+          setError('Failed to load video');
+          setLoading(false);
+          return;
+        }
+        const data = await res.json();
+        setVideo(data);
+        const active = data.versions.find((v: Version) => v.isActive) || data.versions[0];
+        if (active) setActiveVersionId(active.id);
+      } catch {
+        setError('Failed to load video');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchVideo();
+  }, [projectId, videoId]);
+
+  const activeVersion = video?.versions.find((v) => v.id === activeVersionId);
+  const comments = activeVersion?.comments || [];
+  const filteredComments = comments.filter((c) => showResolved || !c.isResolved);
+  const duration = videoDuration || activeVersion?.duration || 0;
+
+  // Load YouTube iframe API script once
+  useEffect(() => {
+    if (window.YT) return;
+    const tag = document.createElement('script');
+    tag.src = 'https://www.youtube.com/iframe_api';
+    const firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag);
+  }, []);
+
+  // Initialize / reinitialize YouTube player when version changes
+  useEffect(() => {
+    if (!activeVersion || activeVersion.providerId !== 'youtube') return;
+
+    // Reset state for new version
+    setIsReady(false);
+    setCurrentTime(0);
+    setVideoDuration(0);
+    setIsPlaying(false);
+    setPlaybackSpeed(1);
+
+    // Destroy previous player if it exists
+    if (playerRef.current) {
+      try { playerRef.current.destroy(); } catch { /* ignore */ }
+      playerRef.current = null;
+    }
+
+    const initPlayer = () => {
+      if (!iframeRef.current) return;
+      playerRef.current = new YT.Player(iframeRef.current, {
+        events: {
+          onReady: (event: YT.PlayerEvent) => {
+            setIsReady(true);
+            const dur = event.target.getDuration();
+            if (dur > 0) setVideoDuration(dur);
+          },
+          onStateChange: (event: YT.OnStateChangeEvent) => {
+            setIsPlaying(event.data === YT.PlayerState.PLAYING);
+            // Update duration when playback starts (more reliable)
+            if (event.data === YT.PlayerState.PLAYING) {
+              const dur = event.target.getDuration();
+              if (dur > 0) setVideoDuration(dur);
+            }
+          },
+        },
+      });
+    };
+
+    // Wait a tick for the iframe to update its src before binding
+    const timeout = setTimeout(() => {
+      if (window.YT?.Player) {
+        initPlayer();
+      } else {
+        window.onYouTubeIframeAPIReady = initPlayer;
+      }
+    }, 100);
+
+    return () => {
+      clearTimeout(timeout);
+      window.onYouTubeIframeAPIReady = undefined;
+    };
+  }, [activeVersionId]);
+
+  // Update current time periodically
+  useEffect(() => {
+    if (!isReady || !playerRef.current) return;
+
+    const interval = setInterval(() => {
+      if (playerRef.current?.getCurrentTime && !isDragging) {
+        setCurrentTime(playerRef.current.getCurrentTime());
+      }
+    }, 250);
+
+    return () => clearInterval(interval);
+  }, [isReady, isDragging]);
+
+  const handlePlayPause = useCallback(() => {
+    if (!playerRef.current) return;
+    if (isPlaying) {
+      playerRef.current.pauseVideo();
+    } else {
+      playerRef.current.playVideo();
+    }
+  }, [isPlaying]);
 
   const handleSeekToTimestamp = useCallback((timestamp: number) => {
     setCurrentTime(timestamp);
-    // In real implementation, control iframe player
-    // window.postMessage to YouTube iframe API
+    if (playerRef.current?.seekTo) {
+      playerRef.current.seekTo(timestamp, true);
+    }
   }, []);
 
-  const handleAddComment = useCallback(() => {
-    if (!commentText.trim() && !isRecording) return;
-    
-    const newComment = {
-      id: `c${Date.now()}`,
-      content: commentText,
-      timestamp: selectedTimestamp ?? currentTime,
-      author: { name: 'You', image: null },
-      createdAt: 'Just now',
-      isResolved: false,
-      replies: [],
-    };
-    
-    setComments(prev => [...prev, newComment]);
-    setCommentText('');
-    setSelectedTimestamp(null);
-  }, [commentText, currentTime, selectedTimestamp, isRecording]);
+  const handleMuteToggle = useCallback(() => {
+    if (!playerRef.current) return;
+    if (isMuted) {
+      playerRef.current.unMute();
+    } else {
+      playerRef.current.mute();
+    }
+    setIsMuted(!isMuted);
+  }, [isMuted]);
 
-  const handleResolveComment = useCallback((commentId: string) => {
-    setComments(prev => prev.map(c => 
-      c.id === commentId ? { ...c, isResolved: !c.isResolved } : c
-    ));
-  }, []);
+  const handleSkip = useCallback(
+    (seconds: number) => {
+      const newTime = Math.max(0, Math.min(duration, currentTime + seconds));
+      handleSeekToTimestamp(newTime);
+    },
+    [currentTime, duration, handleSeekToTimestamp]
+  );
 
-  const embedUrl = `https://www.youtube.com/embed/${mockVideo.currentVersion.videoId}?enablejsapi=1&rel=0&modestbranding=1`;
+  const handleSpeedChange = useCallback(
+    (speed: number) => {
+      setPlaybackSpeed(speed);
+      playerRef.current?.setPlaybackRate(speed);
+    },
+    []
+  );
+
+  const handleTimelineClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!timelineRef.current) return;
+      const rect = timelineRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const percentage = Math.max(0, Math.min(1, x / rect.width));
+      const newTime = percentage * duration;
+      handleSeekToTimestamp(newTime);
+    },
+    [duration, handleSeekToTimestamp]
+  );
+
+  const handleTimelineMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      setIsDragging(true);
+      handleTimelineClick(e);
+    },
+    [handleTimelineClick]
+  );
+
+  const handleTimelineMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isDragging || !timelineRef.current) return;
+      const rect = timelineRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const percentage = Math.max(0, Math.min(1, x / rect.width));
+      setCurrentTime(percentage * duration);
+    },
+    [isDragging, duration]
+  );
+
+  const handleTimelineMouseUp = useCallback(() => {
+    if (isDragging) {
+      handleSeekToTimestamp(currentTime);
+      setIsDragging(false);
+    }
+  }, [isDragging, currentTime, handleSeekToTimestamp]);
+
+  const handleAddComment = useCallback(async () => {
+    if (!commentText.trim() || !activeVersion) return;
+    setIsSubmittingComment(true);
+
+    try {
+      const res = await fetch(`/api/versions/${activeVersion.id}/comments`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          content: commentText,
+          timestamp: selectedTimestamp ?? currentTime,
+        }),
+      });
+
+      if (res.ok) {
+        const newComment = await res.json();
+        setVideo((prev) => {
+          if (!prev) return prev;
+          return {
+            ...prev,
+            versions: prev.versions.map((v) =>
+              v.id === activeVersionId
+                ? { ...v, comments: [...v.comments, { ...newComment, replies: [] }] }
+                : v
+            ),
+          };
+        });
+        setCommentText('');
+        setSelectedTimestamp(null);
+      }
+    } catch (err) {
+      console.error('Failed to add comment:', err);
+    } finally {
+      setIsSubmittingComment(false);
+    }
+  }, [commentText, currentTime, selectedTimestamp, activeVersion, activeVersionId]);
+
+  const handleResolveComment = useCallback(
+    async (commentId: string, currentlyResolved: boolean) => {
+      try {
+        const res = await fetch(`/api/comments/${commentId}`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ isResolved: !currentlyResolved }),
+        });
+
+        if (res.ok) {
+          setVideo((prev) => {
+            if (!prev) return prev;
+            return {
+              ...prev,
+              versions: prev.versions.map((v) =>
+                v.id === activeVersionId
+                  ? {
+                      ...v,
+                      comments: v.comments.map((c) =>
+                        c.id === commentId ? { ...c, isResolved: !c.isResolved } : c
+                      ),
+                    }
+                  : v
+              ),
+            };
+          });
+        }
+      } catch (err) {
+        console.error('Failed to resolve comment:', err);
+      }
+    },
+    [activeVersionId]
+  );
+
+  // New version URL handler
+  const handleNewVersionUrlChange = (url: string) => {
+    setNewVersionUrl(url);
+    setNewVersionUrlError('');
+    if (!url.trim()) {
+      setNewVersionSource(null);
+      return;
+    }
+    const source = parseVideoUrl(url);
+    if (source) {
+      setNewVersionSource(source);
+    } else {
+      setNewVersionSource(null);
+      if (url.length > 10) setNewVersionUrlError('Unsupported URL');
+    }
+  };
+
+  const handleCreateVersion = async () => {
+    if (!newVersionSource) return;
+    setIsCreatingVersion(true);
+
+    try {
+      const meta = await fetchVideoMetadata(newVersionSource);
+      const thumbnailUrl = getThumbnailUrl(newVersionSource, 'large');
+
+      const res = await fetch(`/api/projects/${projectId}/videos/${videoId}/versions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          videoUrl: newVersionSource.originalUrl,
+          providerId: newVersionSource.providerId,
+          providerVideoId: newVersionSource.videoId,
+          versionLabel: newVersionLabel.trim() || null,
+          thumbnailUrl,
+          duration: meta?.duration || null,
+          setActive: true,
+        }),
+      });
+
+      if (res.ok) {
+        const videoRes = await fetch(`/api/projects/${projectId}/videos/${videoId}`);
+        if (videoRes.ok) {
+          const data = await videoRes.json();
+          setVideo(data);
+          const active = data.versions.find((v: Version) => v.isActive) || data.versions[0];
+          if (active) setActiveVersionId(active.id);
+        }
+        setShowVersionDialog(false);
+        setNewVersionUrl('');
+        setNewVersionLabel('');
+        setNewVersionSource(null);
+      }
+    } catch (err) {
+      console.error('Failed to create version:', err);
+    } finally {
+      setIsCreatingVersion(false);
+    }
+  };
+
+  const getEmbedUrl = (version: Version) => {
+    if (version.providerId === 'youtube') {
+      return `https://www.youtube.com/embed/${version.videoId}?enablejsapi=1&rel=0&modestbranding=1&controls=0&showinfo=0&iv_load_policy=3&disablekb=1`;
+    }
+    if (version.providerId === 'vimeo') {
+      return `https://player.vimeo.com/video/${version.videoId}`;
+    }
+    return version.originalUrl;
+  };
+
+  if (loading) {
+    return (
+      <div className="h-[calc(100vh-3.5rem)] flex items-center justify-center bg-background">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error || !video || !activeVersion) {
+    return (
+      <div className="h-[calc(100vh-3.5rem)] flex items-center justify-center bg-background">
+        <div className="text-center">
+          <p className="text-muted-foreground mb-4">{error || 'Video not found'}</p>
+          <Button asChild variant="outline">
+            <Link href={`/projects/${projectId}`}>Back to Project</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const embedUrl = getEmbedUrl(activeVersion);
 
   return (
-    <div className="h-screen flex flex-col bg-background overflow-hidden">
-      {/* Main Content - Full Width Layout */}
-      <div className="flex-1 flex overflow-hidden">
+    <div
+      className="h-[calc(100vh-3.5rem)] flex flex-col bg-background overflow-hidden"
+      onMouseUp={handleTimelineMouseUp}
+      onMouseLeave={() => isDragging && handleTimelineMouseUp()}
+    >
+      <div className="flex-1 flex overflow-hidden min-h-0">
         {/* Video Area */}
-        <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="flex-1 flex flex-col overflow-hidden min-h-0">
           {/* Compact Header Bar */}
           <div className="shrink-0 flex items-center justify-between h-12 px-4 border-b bg-background/50">
             <div className="flex items-center gap-3">
-              <Link 
+              <Link
                 href={`/projects/${projectId}`}
                 className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
               >
@@ -170,96 +506,268 @@ export default function VideoPage() {
               </Link>
               <Separator orientation="vertical" className="h-5" />
               <div className="min-w-0">
-                <span className="text-sm font-medium">{mockVideo.title}</span>
-                <span className="text-xs text-muted-foreground ml-2">• {mockVideo.projectName}</span>
+                <span className="text-sm font-medium">{video.title}</span>
+                <span className="text-xs text-muted-foreground ml-2">• {video.project.name}</span>
               </div>
             </div>
-            
-            {/* Version Selector */}
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm">
-                  <Badge variant="secondary" className="mr-2">v{mockVideo.currentVersion.number}</Badge>
-                  {mockVideo.currentVersion.label}
-                  <ChevronDown className="h-4 w-4 ml-2" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                {mockVideo.versions.map((version) => (
-                  <DropdownMenuItem key={version.id}>
-                    <Badge variant={version.isActive ? 'default' : 'secondary'} className="mr-2">
-                      v{version.number}
+
+            {/* Version Selector + Add Version */}
+            <div className="flex items-center gap-2">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    <Badge variant="secondary" className="mr-2">
+                      v{activeVersion.versionNumber}
                     </Badge>
-                    {version.label}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
+                    {activeVersion.versionLabel || `Version ${activeVersion.versionNumber}`}
+                    <ChevronDown className="h-4 w-4 ml-2" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {video.versions.map((version) => (
+                    <DropdownMenuItem
+                      key={version.id}
+                      onClick={() => setActiveVersionId(version.id)}
+                    >
+                      <Badge
+                        variant={version.id === activeVersionId ? 'default' : 'secondary'}
+                        className="mr-2"
+                      >
+                        v{version.versionNumber}
+                      </Badge>
+                      {version.versionLabel || `Version ${version.versionNumber}`}
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        {version._count.comments} comments
+                      </span>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <Dialog open={showVersionDialog} onOpenChange={setShowVersionDialog}>
+                <DialogTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    <Plus className="h-4 w-4 mr-1" />
+                    New Version
+                  </Button>
+                </DialogTrigger>
+
+              {video.versions.length >= 2 && (
+                <Button variant="outline" size="sm" asChild>
+                  <Link href={`/projects/${projectId}/videos/${videoId}/compare`}>
+                    <GitCompareArrows className="h-4 w-4 mr-1" />
+                    Compare
+                  </Link>
+                </Button>
+              )}
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Add New Version</DialogTitle>
+                    <DialogDescription>
+                      Upload a new version of this video. The new version will become active.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <div className="space-y-4 mt-2">
+                    <div className="space-y-2">
+                      <Label>Video URL</Label>
+                      <div className="relative">
+                        <LinkIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                        <Input
+                          placeholder="https://youtube.com/watch?v=..."
+                          value={newVersionUrl}
+                          onChange={(e) => handleNewVersionUrlChange(e.target.value)}
+                          className="pl-10"
+                          disabled={isCreatingVersion}
+                        />
+                      </div>
+                      {newVersionUrlError && (
+                        <p className="text-sm text-destructive flex items-center gap-1">
+                          <AlertCircle className="h-4 w-4" />
+                          {newVersionUrlError}
+                        </p>
+                      )}
+                      {newVersionSource && (
+                        <p className="text-sm text-green-600 flex items-center gap-1">
+                          <CheckCircle2 className="h-4 w-4" />
+                          {newVersionSource.providerId.charAt(0).toUpperCase() +
+                            newVersionSource.providerId.slice(1)}{' '}
+                          video detected
+                        </p>
+                      )}
+                    </div>
+                    <div className="space-y-2">
+                      <Label>Version Label (optional)</Label>
+                      <Input
+                        placeholder="e.g. Final Cut, Review Round 2"
+                        value={newVersionLabel}
+                        onChange={(e) => setNewVersionLabel(e.target.value)}
+                        disabled={isCreatingVersion}
+                      />
+                    </div>
+                    <Button
+                      onClick={handleCreateVersion}
+                      disabled={!newVersionSource || isCreatingVersion}
+                      className="w-full"
+                    >
+                      {isCreatingVersion && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                      Add Version {video.versions.length + 1}
+                    </Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </div>
           </div>
 
-          {/* Video Player - Maximized */}
-          <div className="flex-1 bg-black flex items-center justify-center p-2">
-            <div className="relative w-full h-full max-h-full">
+          {/* Video Player - click to play/pause, YouTube controls hidden */}
+          <div
+            className="flex-1 bg-black flex items-center justify-center relative cursor-pointer group min-h-0"
+            onClick={handlePlayPause}
+          >
+            <div className="relative w-full h-full">
               <iframe
+                key={activeVersionId}
                 ref={iframeRef}
                 src={embedUrl}
-                className="absolute inset-0 w-full h-full"
+                className="absolute inset-0 w-full h-full pointer-events-none"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowFullScreen
               />
+
+              {/* Play/Pause overlay */}
+              <div
+                className={cn(
+                  'absolute inset-0 flex items-center justify-center bg-black/20 transition-opacity',
+                  isPlaying ? 'opacity-0 group-hover:opacity-100' : 'opacity-100'
+                )}
+              >
+                <div className="w-16 h-16 rounded-full bg-black/60 flex items-center justify-center">
+                  {isPlaying ? (
+                    <Pause className="h-8 w-8 text-white" />
+                  ) : (
+                    <Play className="h-8 w-8 text-white ml-1" />
+                  )}
+                </div>
+              </div>
             </div>
           </div>
-          
-          {/* Timeline with comment markers */}
+
+          {/* Custom Controls Bar */}
           <div className="shrink-0 px-4 py-2 bg-background border-t">
-            <div className="relative h-8 bg-muted rounded cursor-pointer">
-              {/* Progress bar */}
-              <div 
-                className="absolute left-0 top-0 h-full bg-primary/30 rounded"
-                style={{ width: `${(currentTime / duration) * 100}%` }}
+            {/* Control buttons row */}
+            <div className="flex items-center gap-1 mb-2">
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handlePlayPause}>
+                {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4 ml-0.5" />}
+              </Button>
+
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => handleSkip(-10)}
+                title="Back 10s"
+              >
+                <SkipBack className="h-4 w-4" />
+              </Button>
+
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => handleSkip(10)}
+                title="Forward 10s"
+              >
+                <SkipForward className="h-4 w-4" />
+              </Button>
+
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleMuteToggle}
+              >
+                {isMuted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
+              </Button>
+
+              <span className="text-xs text-muted-foreground ml-1 tabular-nums">
+                {formatTime(currentTime)} / {formatTime(duration)}
+              </span>
+
+              <div className="ml-auto">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm" className="h-8 gap-1 text-xs">
+                      <Gauge className="h-3.5 w-3.5" />
+                      {playbackSpeed === 1 ? '1x' : `${playbackSpeed}x`}
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="min-w-[80px]">
+                    {SPEED_OPTIONS.map((speed) => (
+                      <DropdownMenuItem
+                        key={speed}
+                        onClick={() => handleSpeedChange(speed)}
+                        className={cn(speed === playbackSpeed && 'font-bold text-primary')}
+                      >
+                        {speed}x
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+
+            {/* Timeline with comment markers */}
+            <div
+              ref={timelineRef}
+              className="relative h-8 bg-muted rounded cursor-pointer select-none"
+              onMouseDown={handleTimelineMouseDown}
+              onMouseMove={handleTimelineMouseMove}
+            >
+              {/* Progress */}
+              <div
+                className="absolute left-0 top-0 h-full bg-primary/30 rounded pointer-events-none"
+                style={{ width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%` }}
               />
-              
+
+              {/* Playhead */}
+              <div
+                className="absolute top-0 h-full w-1 bg-primary rounded pointer-events-none"
+                style={{ left: `calc(${duration > 0 ? (currentTime / duration) * 100 : 0}% - 2px)` }}
+              />
+
               {/* Comment markers */}
               {comments.map((comment) => (
                 <button
                   key={comment.id}
-                  onClick={() => handleSeekToTimestamp(comment.timestamp)}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleSeekToTimestamp(comment.timestamp);
+                  }}
                   className={cn(
-                    "absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full transition-transform hover:scale-150 z-10",
-                    comment.isResolved ? "bg-green-500" : "bg-primary"
+                    'absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full transition-transform hover:scale-150 z-10',
+                    comment.isResolved ? 'bg-green-500' : 'bg-cyan-400'
                   )}
-                  style={{ left: `${(comment.timestamp / duration) * 100}%` }}
+                  style={{ left: `calc(${duration > 0 ? (comment.timestamp / duration) * 100 : 0}% - 6px)` }}
                   title={`${formatTime(comment.timestamp)} - ${comment.content?.substring(0, 30)}...`}
                 />
               ))}
-              
-              {/* Time display */}
-              <div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground font-medium">
-                {formatTime(currentTime)} / {formatTime(duration)}
-              </div>
             </div>
           </div>
         </div>
 
-        {/* Comments Sidebar - Fixed Right */}
+        {/* Comments Sidebar */}
         <div className="w-80 shrink-0 border-l bg-card flex flex-col overflow-hidden">
-          {/* Comments Header */}
           <div className="shrink-0 flex items-center justify-between p-4 border-b">
             <div className="flex items-center gap-2">
               <MessageSquare className="h-5 w-5" />
               <span className="font-medium">Comments</span>
               <Badge variant="secondary">{comments.length}</Badge>
             </div>
-            <Button 
-              variant="ghost" 
-              size="sm"
-              onClick={() => setShowResolved(!showResolved)}
-            >
+            <Button variant="ghost" size="sm" onClick={() => setShowResolved(!showResolved)}>
               {showResolved ? 'Hide' : 'Show'} Resolved
             </Button>
           </div>
 
-          {/* Comments List - Scrollable */}
+          {/* Comments List */}
           <div className="flex-1 overflow-y-auto p-4 space-y-3">
             {filteredComments.length === 0 ? (
               <div className="text-center py-8 text-muted-foreground">
@@ -270,128 +778,136 @@ export default function VideoPage() {
             ) : (
               filteredComments
                 .sort((a, b) => a.timestamp - b.timestamp)
-                .map((comment) => (
-                  <div 
-                    key={comment.id} 
-                    className={cn(
-                      "group rounded-lg border p-3 transition-colors hover:bg-accent/50",
-                      comment.isResolved && "opacity-60"
-                    )}
-                  >
-                    {/* Comment Header */}
-                    <div className="flex items-start justify-between gap-2 mb-2">
-                      <div className="flex items-center gap-2">
-                        <Avatar className="h-6 w-6">
-                          <AvatarImage src={comment.author.image ?? undefined} />
-                          <AvatarFallback className="text-xs">
-                            {comment.author.name.charAt(0)}
-                          </AvatarFallback>
-                        </Avatar>
-                        <span className="text-sm font-medium">{comment.author.name}</span>
-                      </div>
-                      
-                      <div className="flex items-center gap-1">
-                        <button
-                          onClick={() => handleSeekToTimestamp(comment.timestamp)}
-                          className="flex items-center gap-1 text-xs text-primary hover:underline px-1.5 py-0.5 rounded bg-primary/10"
-                        >
-                          <Clock className="h-3 w-3" />
-                          {formatTime(comment.timestamp)}
-                        </button>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-6 w-6"
-                          onClick={() => handleResolveComment(comment.id)}
-                        >
-                          {comment.isResolved ? (
-                            <CheckCircle2 className="h-4 w-4 text-green-500" />
-                          ) : (
-                            <Circle className="h-4 w-4" />
-                          )}
-                        </Button>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" size="icon" className="h-6 w-6 opacity-0 group-hover:opacity-100">
-                              <MoreVertical className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem>Reply</DropdownMenuItem>
-                            <DropdownMenuItem>Edit</DropdownMenuItem>
-                            <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </div>
-
-                    {/* Comment Content */}
-                    {comment.content && (
-                      <p className="text-sm mb-2">{comment.content}</p>
-                    )}
-                    
-                    {/* Voice Comment */}
-                    {comment.voiceUrl && (
-                      <div className="flex items-center gap-2 p-2 bg-muted rounded mb-2">
-                        <Button size="icon" variant="ghost" className="h-8 w-8">
-                          <Play className="h-4 w-4" />
-                        </Button>
-                        <div className="flex-1 h-1 bg-primary/30 rounded">
-                          <div className="w-0 h-full bg-primary rounded" />
+                .map((comment) => {
+                  const authorName =
+                    comment.author?.name || comment.guestName || 'Anonymous';
+                  return (
+                    <div
+                      key={comment.id}
+                      className={cn(
+                        'group rounded-lg border p-3 transition-colors hover:bg-accent/50',
+                        comment.isResolved && 'opacity-60'
+                      )}
+                    >
+                      <div className="flex items-start justify-between gap-2 mb-2">
+                        <div className="flex items-center gap-2">
+                          <Avatar className="h-6 w-6">
+                            <AvatarImage src={comment.author?.image ?? undefined} />
+                            <AvatarFallback className="text-xs">
+                              {authorName.charAt(0)}
+                            </AvatarFallback>
+                          </Avatar>
+                          <span className="text-sm font-medium">{authorName}</span>
                         </div>
-                        <span className="text-xs text-muted-foreground">
-                          {formatTime(comment.voiceDuration || 0)}
-                        </span>
-                      </div>
-                    )}
-                    
-                    {/* Timestamp & Meta */}
-                    <p className="text-xs text-muted-foreground">{comment.createdAt}</p>
 
-                    {/* Replies */}
-                    {comment.replies.length > 0 && (
-                      <div className="mt-3 pl-3 border-l-2 space-y-2">
-                        {comment.replies.map((reply) => (
-                          <div key={reply.id} className="text-sm">
-                            <div className="flex items-center gap-2 mb-1">
-                              <Avatar className="h-5 w-5">
-                                <AvatarFallback className="text-xs">
-                                  {reply.author.name.charAt(0)}
-                                </AvatarFallback>
-                              </Avatar>
-                              <span className="font-medium text-xs">{reply.author.name}</span>
-                              <span className="text-xs text-muted-foreground">{reply.createdAt}</span>
-                            </div>
-                            <p className="text-sm">{reply.content}</p>
-                          </div>
-                        ))}
+                        <div className="flex items-center gap-1">
+                          <button
+                            onClick={() => handleSeekToTimestamp(comment.timestamp)}
+                            className="flex items-center gap-1 text-xs text-primary hover:underline px-1.5 py-0.5 rounded bg-primary/10"
+                          >
+                            <Clock className="h-3 w-3" />
+                            {formatTime(comment.timestamp)}
+                          </button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6"
+                            onClick={() =>
+                              handleResolveComment(comment.id, comment.isResolved)
+                            }
+                          >
+                            {comment.isResolved ? (
+                              <CheckCircle2 className="h-4 w-4 text-green-500" />
+                            ) : (
+                              <Circle className="h-4 w-4" />
+                            )}
+                          </Button>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6 opacity-0 group-hover:opacity-100"
+                              >
+                                <MoreVertical className="h-4 w-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem>Reply</DropdownMenuItem>
+                              <DropdownMenuItem>Edit</DropdownMenuItem>
+                              <DropdownMenuItem className="text-destructive">
+                                Delete
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
                       </div>
-                    )}
-                  </div>
-                ))
+
+                      {comment.content && <p className="text-sm mb-2">{comment.content}</p>}
+
+                      {comment.voiceUrl && (
+                        <div className="flex items-center gap-2 p-2 bg-muted rounded mb-2">
+                          <Button size="icon" variant="ghost" className="h-8 w-8">
+                            <Play className="h-4 w-4" />
+                          </Button>
+                          <div className="flex-1 h-1 bg-primary/30 rounded">
+                            <div className="w-0 h-full bg-primary rounded" />
+                          </div>
+                          <span className="text-xs text-muted-foreground">
+                            {formatTime(comment.voiceDuration || 0)}
+                          </span>
+                        </div>
+                      )}
+
+                      <p className="text-xs text-muted-foreground">
+                        {new Date(comment.createdAt).toLocaleDateString()}
+                      </p>
+
+                      {comment.replies.length > 0 && (
+                        <div className="mt-3 pl-3 border-l-2 space-y-2">
+                          {comment.replies.map((reply) => {
+                            const replyAuthor =
+                              reply.author?.name || reply.guestName || 'Anonymous';
+                            return (
+                              <div key={reply.id} className="text-sm">
+                                <div className="flex items-center gap-2 mb-1">
+                                  <Avatar className="h-5 w-5">
+                                    <AvatarFallback className="text-xs">
+                                      {replyAuthor.charAt(0)}
+                                    </AvatarFallback>
+                                  </Avatar>
+                                  <span className="font-medium text-xs">{replyAuthor}</span>
+                                  <span className="text-xs text-muted-foreground">
+                                    {new Date(reply.createdAt).toLocaleDateString()}
+                                  </span>
+                                </div>
+                                <p className="text-sm">{reply.content}</p>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })
             )}
           </div>
 
-          {/* Comment Input - Fixed at Bottom */}
+          {/* Comment Input */}
           <div className="shrink-0 p-4 border-t bg-background">
             <div className="flex items-center gap-2 mb-2">
               <Button
                 variant="outline"
                 size="sm"
                 onClick={() => setSelectedTimestamp(currentTime)}
-                className={cn(selectedTimestamp !== null && "border-primary")}
+                className={cn(selectedTimestamp !== null && 'border-primary')}
               >
                 <Clock className="h-4 w-4 mr-1" />
-                {selectedTimestamp !== null 
-                  ? formatTime(selectedTimestamp)
-                  : formatTime(currentTime)
-                }
+                {selectedTimestamp !== null ? formatTime(selectedTimestamp) : formatTime(currentTime)}
               </Button>
-              <span className="text-xs text-muted-foreground">
-                Pin to this time
-              </span>
+              <span className="text-xs text-muted-foreground">Pin to this time</span>
             </div>
-            
+
             <div className="flex gap-2">
               <Textarea
                 placeholder="Add a comment..."
@@ -406,25 +922,27 @@ export default function VideoPage() {
                 }}
               />
               <div className="flex flex-col gap-1">
-                <Button 
-                  size="icon" 
+                <Button
+                  size="icon"
                   onClick={handleAddComment}
-                  disabled={!commentText.trim()}
+                  disabled={!commentText.trim() || isSubmittingComment}
                 >
-                  <Send className="h-4 w-4" />
+                  {isSubmittingComment ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Send className="h-4 w-4" />
+                  )}
                 </Button>
-                <Button 
-                  size="icon" 
-                  variant={isRecording ? "destructive" : "outline"}
+                <Button
+                  size="icon"
+                  variant={isRecording ? 'destructive' : 'outline'}
                   onClick={() => setIsRecording(!isRecording)}
                 >
-                  <Mic className={cn("h-4 w-4", isRecording && "animate-pulse")} />
+                  <Mic className={cn('h-4 w-4', isRecording && 'animate-pulse')} />
                 </Button>
               </div>
             </div>
-            <p className="text-xs text-muted-foreground mt-1">
-              ⌘+Enter to submit
-            </p>
+            <p className="text-xs text-muted-foreground mt-1">Cmd+Enter to submit</p>
           </div>
         </div>
       </div>
diff --git a/app/(dashboard)/projects/[projectId]/videos/new/page.tsx b/app/(dashboard)/projects/[projectId]/videos/new/page.tsx
index 0055ef4..25ec9cd 100644
--- a/app/(dashboard)/projects/[projectId]/videos/new/page.tsx
+++ b/app/(dashboard)/projects/[projectId]/videos/new/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import Link from 'next/link';
 import { ArrowLeft, Loader2, Link as LinkIcon, AlertCircle, CheckCircle2 } from 'lucide-react';
@@ -9,31 +9,59 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
-import { parseVideoUrl, getThumbnailUrl, type VideoSource } from '@/lib/video-providers';
+import { parseVideoUrl, fetchVideoMetadata, getThumbnailUrl, type VideoSource } from '@/lib/video-providers';
 
 export default function NewVideoPage() {
   const router = useRouter();
   const params = useParams();
   const projectId = params.projectId as string;
-  
+
   const [isLoading, setIsLoading] = useState(false);
+  const [isFetchingMeta, setIsFetchingMeta] = useState(false);
   const [videoUrl, setVideoUrl] = useState('');
   const [videoSource, setVideoSource] = useState<VideoSource | null>(null);
   const [urlError, setUrlError] = useState('');
+  const [submitError, setSubmitError] = useState('');
   const [formData, setFormData] = useState({
     title: '',
     description: '',
   });
 
+  // Auto-fetch metadata when a valid video source is detected
+  useEffect(() => {
+    if (!videoSource) return;
+
+    let cancelled = false;
+    setIsFetchingMeta(true);
+
+    fetchVideoMetadata(videoSource).then((meta) => {
+      if (cancelled || !meta) {
+        setIsFetchingMeta(false);
+        return;
+      }
+      if (!formData.title) {
+        setFormData((prev) => ({ ...prev, title: meta.title }));
+      }
+      setVideoSource((prev) => (prev ? { ...prev, metadata: meta } : prev));
+      setIsFetchingMeta(false);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [videoSource?.videoId, videoSource?.providerId]);
+
   const handleUrlChange = (url: string) => {
     setVideoUrl(url);
     setUrlError('');
-    
+    setSubmitError('');
+
     if (!url.trim()) {
       setVideoSource(null);
       return;
     }
-    
+
     const source = parseVideoUrl(url);
     if (source) {
       setVideoSource(source);
@@ -47,31 +75,43 @@ export default function NewVideoPage() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!videoSource) {
       setUrlError('Please enter a valid video URL');
       return;
     }
-    
+
     setIsLoading(true);
+    setSubmitError('');
 
     try {
-      // TODO: Implement actual video creation
-      // const response = await fetch(`/api/projects/${projectId}/videos`, {
-      //   method: 'POST',
-      //   headers: { 'Content-Type': 'application/json' },
-      //   body: JSON.stringify({
-      //     ...formData,
-      //     ...videoSource,
-      //   }),
-      // });
-      
-      // Simulate API call
-      await new Promise(resolve => setTimeout(resolve, 500));
-      
+      const thumbnailUrl = getThumbnailUrl(videoSource, 'large');
+      const title = formData.title.trim() || videoSource.metadata?.title || 'Untitled Video';
+
+      const response = await fetch(`/api/projects/${projectId}/videos`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title,
+          description: formData.description.trim() || null,
+          videoUrl: videoSource.originalUrl,
+          providerId: videoSource.providerId,
+          videoId: videoSource.videoId,
+          thumbnailUrl,
+          duration: videoSource.metadata?.duration || null,
+        }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        setSubmitError(data.error || 'Failed to add video');
+        return;
+      }
+
       router.push(`/projects/${projectId}`);
     } catch (error) {
       console.error('Failed to add video:', error);
+      setSubmitError('An unexpected error occurred');
     } finally {
       setIsLoading(false);
     }
@@ -80,9 +120,9 @@ export default function NewVideoPage() {
   const thumbnailUrl = videoSource ? getThumbnailUrl(videoSource, 'large') : null;
 
   return (
-    <div className="container max-w-2xl py-8">
+    <div className="container max-w-2xl mx-auto py-8">
       <div className="mb-6">
-        <Link 
+        <Link
           href={`/projects/${projectId}`}
           className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
         >
@@ -115,19 +155,19 @@ export default function NewVideoPage() {
                   disabled={isLoading}
                 />
               </div>
-              
-              {/* URL validation feedback */}
+
               {urlError && (
                 <p className="text-sm text-destructive flex items-center gap-1">
                   <AlertCircle className="h-4 w-4" />
                   {urlError}
                 </p>
               )}
-              
+
               {videoSource && (
                 <p className="text-sm text-green-600 flex items-center gap-1">
                   <CheckCircle2 className="h-4 w-4" />
                   {videoSource.providerId.charAt(0).toUpperCase() + videoSource.providerId.slice(1)} video detected
+                  {isFetchingMeta && ' — fetching metadata...'}
                 </p>
               )}
             </div>
@@ -151,9 +191,9 @@ export default function NewVideoPage() {
               <Label htmlFor="title">Title</Label>
               <Input
                 id="title"
-                placeholder="Video title (will auto-fill from video if empty)"
+                placeholder={isFetchingMeta ? 'Fetching title...' : 'Video title (will auto-fill from video if empty)'}
                 value={formData.title}
-                onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
+                onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
                 disabled={isLoading}
               />
               <p className="text-xs text-muted-foreground">
@@ -168,12 +208,19 @@ export default function NewVideoPage() {
                 id="description"
                 placeholder="Add context about this video..."
                 value={formData.description}
-                onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+                onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                 rows={3}
                 disabled={isLoading}
               />
             </div>
 
+            {submitError && (
+              <p className="text-sm text-destructive flex items-center gap-1">
+                <AlertCircle className="h-4 w-4" />
+                {submitError}
+              </p>
+            )}
+
             <div className="flex gap-3">
               <Button type="submit" disabled={isLoading || !videoSource}>
                 {isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
diff --git a/app/api/comments/[commentId]/route.ts b/app/api/comments/[commentId]/route.ts
index 7a3ffd1..3a73489 100644
--- a/app/api/comments/[commentId]/route.ts
+++ b/app/api/comments/[commentId]/route.ts
@@ -44,9 +44,9 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
         const project = comment.version.video.project;
         const isOwner = session?.user?.id === project.ownerId;
         const isMember = project.members.length > 0;
-        const isPublicOrLink = project.visibility !== 'PRIVATE';
+        const isPublic = project.visibility === 'PUBLIC';
 
-        if (!isOwner && !isMember && !isPublicOrLink) {
+        if (!isOwner && !isMember && !isPublic) {
             return NextResponse.json({ error: 'Access denied' }, { status: 403 });
         }
 
diff --git a/app/api/projects/[projectId]/videos/[videoId]/route.ts b/app/api/projects/[projectId]/videos/[videoId]/route.ts
index 23d4272..5be28cf 100644
--- a/app/api/projects/[projectId]/videos/[videoId]/route.ts
+++ b/app/api/projects/[projectId]/videos/[videoId]/route.ts
@@ -46,9 +46,9 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
         // Check access
         const isOwner = session?.user?.id === video.project.ownerId;
         const isMember = video.project.members.length > 0;
-        const isPublicOrLink = video.project.visibility !== 'PRIVATE';
+        const isPublic = video.project.visibility === 'PUBLIC';
 
-        if (!isOwner && !isMember && !isPublicOrLink) {
+        if (!isOwner && !isMember && !isPublic) {
             return NextResponse.json({ error: 'Access denied' }, { status: 403 });
         }
 
diff --git a/app/api/projects/[projectId]/videos/[videoId]/versions/route.ts b/app/api/projects/[projectId]/videos/[videoId]/versions/route.ts
index f2e1fd0..3315dc1 100644
--- a/app/api/projects/[projectId]/videos/[videoId]/versions/route.ts
+++ b/app/api/projects/[projectId]/videos/[videoId]/versions/route.ts
@@ -27,9 +27,9 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
 
         const isOwner = session?.user?.id === video.project.ownerId;
         const isMember = video.project.members.length > 0;
-        const isPublicOrLink = video.project.visibility !== 'PRIVATE';
+        const isPublic = video.project.visibility === 'PUBLIC';
 
-        if (!isOwner && !isMember && !isPublicOrLink) {
+        if (!isOwner && !isMember && !isPublic) {
             return NextResponse.json({ error: 'Access denied' }, { status: 403 });
         }
 
diff --git a/app/api/projects/[projectId]/videos/route.ts b/app/api/projects/[projectId]/videos/route.ts
index 265b420..fb6b57e 100644
--- a/app/api/projects/[projectId]/videos/route.ts
+++ b/app/api/projects/[projectId]/videos/route.ts
@@ -24,9 +24,9 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
 
         const isOwner = session?.user?.id === project.ownerId;
         const isMember = project.members.length > 0;
-        const isPublicOrLink = project.visibility !== 'PRIVATE';
+        const isPublic = project.visibility === 'PUBLIC';
 
-        if (!isOwner && !isMember && !isPublicOrLink) {
+        if (!isOwner && !isMember && !isPublic) {
             return NextResponse.json({ error: 'Access denied' }, { status: 403 });
         }
 
diff --git a/app/api/versions/[versionId]/comments/route.ts b/app/api/versions/[versionId]/comments/route.ts
index ec753e5..1c39508 100644
--- a/app/api/versions/[versionId]/comments/route.ts
+++ b/app/api/versions/[versionId]/comments/route.ts
@@ -34,9 +34,9 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
         const project = version.video.project;
         const isOwner = session?.user?.id === project.ownerId;
         const isMember = project.members.length > 0;
-        const isPublicOrLink = project.visibility !== 'PRIVATE';
+        const isPublic = project.visibility === 'PUBLIC';
 
-        if (!isOwner && !isMember && !isPublicOrLink) {
+        if (!isOwner && !isMember && !isPublic) {
             return NextResponse.json({ error: 'Access denied' }, { status: 403 });
         }
 
diff --git a/app/api/watch/[videoId]/route.ts b/app/api/watch/[videoId]/route.ts
new file mode 100644
index 0000000..2735c34
--- /dev/null
+++ b/app/api/watch/[videoId]/route.ts
@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { db } from '@/lib/db';
+import { auth } from '@/lib/auth';
+
+type RouteParams = { params: Promise<{ videoId: string }> };
+
+// GET /api/watch/[videoId] - Public watch endpoint (no projectId needed)
+export async function GET(request: NextRequest, { params }: RouteParams) {
+    try {
+        const session = await auth();
+        const { videoId } = await params;
+
+        const video = await db.video.findUnique({
+            where: { id: videoId },
+            include: {
+                project: {
+                    include: {
+                        members: { where: { userId: session?.user?.id || '' } },
+                    },
+                },
+                versions: {
+                    orderBy: { versionNumber: 'desc' },
+                    include: {
+                        comments: {
+                            orderBy: { timestamp: 'asc' },
+                            where: { parentId: null },
+                            include: {
+                                author: { select: { id: true, name: true, image: true } },
+                                replies: {
+                                    orderBy: { createdAt: 'asc' },
+                                    include: {
+                                        author: { select: { id: true, name: true, image: true } },
+                                    },
+                                },
+                            },
+                        },
+                        _count: { select: { comments: true } },
+                    },
+                },
+            },
+        });
+
+        if (!video) {
+            return NextResponse.json({ error: 'Video not found' }, { status: 404 });
+        }
+
+        // Check access
+        const isOwner = session?.user?.id === video.project.ownerId;
+        const isMember = video.project.members.length > 0;
+        const isPublic = video.project.visibility === 'PUBLIC';
+
+        if (!isOwner && !isMember && !isPublic) {
+            return NextResponse.json({ error: 'Access denied' }, { status: 403 });
+        }
+
+        return NextResponse.json(video);
+    } catch (error) {
+        console.error('Error fetching video:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch video' },
+            { status: 500 }
+        );
+    }
+}
diff --git a/app/watch/[videoId]/page.tsx b/app/watch/[videoId]/page.tsx
index bc6d09b..f97c4ab 100644
--- a/app/watch/[videoId]/page.tsx
+++ b/app/watch/[videoId]/page.tsx
@@ -3,13 +3,12 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
-import { 
-  ArrowLeft, 
-  Play, 
-  Pause, 
-  Volume2, 
+import {
+  ArrowLeft,
+  Play,
+  Pause,
+  Volume2,
   VolumeX,
-  Maximize,
   MessageSquare,
   Mic,
   Send,
@@ -18,13 +17,12 @@ import {
   Circle,
   ChevronDown,
   MoreVertical,
-  User,
   SkipBack,
-  SkipForward
+  SkipForward,
+  Loader2,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Card, CardContent } from '@/components/ui/card';
 import { Textarea } from '@/components/ui/textarea';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Separator } from '@/components/ui/separator';
@@ -36,66 +34,51 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { cn } from '@/lib/utils';
 
-// Mock data
-const mockVideo = {
-  id: 'v1',
-  title: 'Main Product Walkthrough',
-  description: 'Complete walkthrough of the new product features',
-  projectId: '1',
-  projectName: 'Product Demo v2',
-  versions: [
-    { id: 'ver3', number: 3, label: 'Final Cut', isActive: true },
-    { id: 'ver2', number: 2, label: 'Review Round 2', isActive: false },
-    { id: 'ver1', number: 1, label: 'First Draft', isActive: false },
-  ],
-  currentVersion: {
-    id: 'ver3',
-    number: 3,
-    label: 'Final Cut',
-    providerId: 'youtube',
-    videoId: 'dQw4w9WgXcQ', // Sample video
-    duration: 342, // 5:42
-  },
-};
+interface Version {
+  id: string;
+  versionNumber: number;
+  versionLabel: string | null;
+  providerId: string;
+  videoId: string;
+  originalUrl: string;
+  title: string | null;
+  thumbnailUrl: string | null;
+  duration: number | null;
+  isActive: boolean;
+  _count: { comments: number };
+}
 
-const mockComments = [
-  {
-    id: 'c1',
-    content: 'The transition here feels a bit abrupt. Can we add a fade?',
-    timestamp: 45.5,
-    author: { name: 'Sarah Chen', image: null },
-    createdAt: '2 hours ago',
-    isResolved: false,
-    replies: [
-      {
-        id: 'c1r1',
-        content: 'Good catch! I\'ll smooth that out in the next version.',
-        author: { name: 'Mike Johnson', image: null },
-        createdAt: '1 hour ago',
-      },
-    ],
-  },
-  {
-    id: 'c2',
-    content: 'Love this section! The pacing is perfect.',
-    timestamp: 120,
-    author: { name: 'Alex Rivera', image: null },
-    createdAt: '5 hours ago',
-    isResolved: true,
-    replies: [],
-  },
-  {
-    id: 'c3',
-    content: 'Can we add some background music here?',
-    timestamp: 200,
-    voiceUrl: '/mock-voice.mp3', // Mock voice comment
-    voiceDuration: 8.5,
-    author: { name: 'Jordan Lee', image: null },
-    createdAt: '1 day ago',
-    isResolved: false,
-    replies: [],
-  },
-];
+interface Comment {
+  id: string;
+  content: string | null;
+  timestamp: number;
+  voiceUrl: string | null;
+  voiceDuration: number | null;
+  isResolved: boolean;
+  createdAt: string;
+  author: { id: string; name: string | null; image: string | null } | null;
+  guestName: string | null;
+  replies: {
+    id: string;
+    content: string | null;
+    createdAt: string;
+    author: { id: string; name: string | null; image: string | null } | null;
+    guestName: string | null;
+  }[];
+}
+
+interface VideoData {
+  id: string;
+  title: string;
+  description: string | null;
+  projectId: string;
+  project: {
+    name: string;
+    ownerId: string;
+    members: { role: string }[];
+  };
+  versions: (Version & { comments: Comment[] })[];
+}
 
 function formatTime(seconds: number): string {
   const mins = Math.floor(seconds / 60);
@@ -103,32 +86,63 @@ function formatTime(seconds: number): string {
   return `${mins}:${secs.toString().padStart(2, '0')}`;
 }
 
-export default function VideoPage() {
+export default function WatchPage() {
   const params = useParams();
   const videoId = params.videoId as string;
-  
-  // In real app, fetch projectId from video data
-  const projectId = mockVideo.projectId;
-  
+
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const playerRef = useRef<any>(null);
+  const playerRef = useRef<YT.Player | null>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
+
+  const [video, setVideo] = useState<VideoData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [activeVersionId, setActiveVersionId] = useState<string | null>(null);
+
   const [isReady, setIsReady] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(mockVideo.currentVersion.duration);
   const [isMuted, setIsMuted] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
-  
+
   const [commentText, setCommentText] = useState('');
+  const [isSubmittingComment, setIsSubmittingComment] = useState(false);
   const [isRecording, setIsRecording] = useState(false);
   const [selectedTimestamp, setSelectedTimestamp] = useState<number | null>(null);
-  const [comments, setComments] = useState(mockComments);
   const [showResolved, setShowResolved] = useState(false);
 
+  // Fetch video data
+  useEffect(() => {
+    async function fetchVideo() {
+      try {
+        const res = await fetch(`/api/watch/${videoId}`);
+        if (!res.ok) {
+          setError('Video not found or access denied');
+          setLoading(false);
+          return;
+        }
+        const data = await res.json();
+        setVideo(data);
+        const active = data.versions.find((v: Version) => v.isActive) || data.versions[0];
+        if (active) setActiveVersionId(active.id);
+      } catch {
+        setError('Failed to load video');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchVideo();
+  }, [videoId]);
+
+  const activeVersion = video?.versions.find((v) => v.id === activeVersionId);
+  const comments = activeVersion?.comments || [];
+  const filteredComments = comments.filter((c) => showResolved || !c.isResolved);
+  const duration = activeVersion?.duration || 300;
+
   // Load YouTube iframe API
   useEffect(() => {
-    // Load YouTube iframe API script
+    if (!activeVersion || activeVersion.providerId !== 'youtube') return;
+
     if (!window.YT) {
       const tag = document.createElement('script');
       tag.src = 'https://www.youtube.com/iframe_api';
@@ -136,36 +150,33 @@ export default function VideoPage() {
       firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag);
     }
 
-    // Initialize player when API is ready
-    const onYouTubeIframeAPIReady = () => {
-      playerRef.current = new window.YT.Player(iframeRef.current, {
+    const initPlayer = () => {
+      if (!iframeRef.current) return;
+      playerRef.current = new YT.Player(iframeRef.current, {
         events: {
-          onReady: () => {
-            setIsReady(true);
-            setDuration(playerRef.current.getDuration() || mockVideo.currentVersion.duration);
-          },
-          onStateChange: (event: any) => {
-            setIsPlaying(event.data === window.YT.PlayerState.PLAYING);
+          onReady: () => setIsReady(true),
+          onStateChange: (event: YT.OnStateChangeEvent) => {
+            setIsPlaying(event.data === YT.PlayerState.PLAYING);
           },
         },
       });
     };
 
-    if (window.YT && window.YT.Player) {
-      onYouTubeIframeAPIReady();
+    if (window.YT?.Player) {
+      initPlayer();
     } else {
-      window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
+      window.onYouTubeIframeAPIReady = initPlayer;
     }
 
     return () => {
       window.onYouTubeIframeAPIReady = undefined;
     };
-  }, []);
+  }, [activeVersion]);
 
   // Update current time periodically
   useEffect(() => {
     if (!isReady || !playerRef.current) return;
-    
+
     const interval = setInterval(() => {
       if (playerRef.current?.getCurrentTime && !isDragging) {
         setCurrentTime(playerRef.current.getCurrentTime());
@@ -175,8 +186,6 @@ export default function VideoPage() {
     return () => clearInterval(interval);
   }, [isReady, isDragging]);
 
-  const filteredComments = comments.filter(c => showResolved || !c.isResolved);
-
   const handlePlayPause = useCallback(() => {
     if (!playerRef.current) return;
     if (isPlaying) {
@@ -193,28 +202,37 @@ export default function VideoPage() {
     }
   }, []);
 
-  const handleTimelineClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    if (!timelineRef.current) return;
-    const rect = timelineRef.current.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const percentage = Math.max(0, Math.min(1, x / rect.width));
-    const newTime = percentage * duration;
-    handleSeekToTimestamp(newTime);
-  }, [duration, handleSeekToTimestamp]);
+  const handleTimelineClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!timelineRef.current) return;
+      const rect = timelineRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const percentage = Math.max(0, Math.min(1, x / rect.width));
+      const newTime = percentage * duration;
+      handleSeekToTimestamp(newTime);
+    },
+    [duration, handleSeekToTimestamp]
+  );
 
-  const handleTimelineMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    setIsDragging(true);
-    handleTimelineClick(e);
-  }, [handleTimelineClick]);
+  const handleTimelineMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      setIsDragging(true);
+      handleTimelineClick(e);
+    },
+    [handleTimelineClick]
+  );
 
-  const handleTimelineMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    if (!isDragging || !timelineRef.current) return;
-    const rect = timelineRef.current.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const percentage = Math.max(0, Math.min(1, x / rect.width));
-    const newTime = percentage * duration;
-    setCurrentTime(newTime);
-  }, [isDragging, duration]);
+  const handleTimelineMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isDragging || !timelineRef.current) return;
+      const rect = timelineRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const percentage = Math.max(0, Math.min(1, x / rect.width));
+      const newTime = percentage * duration;
+      setCurrentTime(newTime);
+    },
+    [isDragging, duration]
+  );
 
   const handleTimelineMouseUp = useCallback(() => {
     if (isDragging) {
@@ -233,53 +251,132 @@ export default function VideoPage() {
     setIsMuted(!isMuted);
   }, [isMuted]);
 
-  const handleSkip = useCallback((seconds: number) => {
-    const newTime = Math.max(0, Math.min(duration, currentTime + seconds));
-    handleSeekToTimestamp(newTime);
-  }, [currentTime, duration, handleSeekToTimestamp]);
+  const handleSkip = useCallback(
+    (seconds: number) => {
+      const newTime = Math.max(0, Math.min(duration, currentTime + seconds));
+      handleSeekToTimestamp(newTime);
+    },
+    [currentTime, duration, handleSeekToTimestamp]
+  );
 
-  const handleAddComment = useCallback(() => {
-    if (!commentText.trim() && !isRecording) return;
-    
-    const newComment = {
-      id: `c${Date.now()}`,
-      content: commentText,
-      timestamp: selectedTimestamp ?? currentTime,
-      author: { name: 'You', image: null },
-      createdAt: 'Just now',
-      isResolved: false,
-      replies: [],
-    };
-    
-    setComments(prev => [...prev, newComment]);
-    setCommentText('');
-    setSelectedTimestamp(null);
-  }, [commentText, currentTime, selectedTimestamp, isRecording]);
+  const handleAddComment = useCallback(async () => {
+    if (!commentText.trim() || !activeVersion) return;
+    setIsSubmittingComment(true);
 
-  const handleResolveComment = useCallback((commentId: string) => {
-    setComments(prev => prev.map(c => 
-      c.id === commentId ? { ...c, isResolved: !c.isResolved } : c
-    ));
-  }, []);
+    try {
+      const res = await fetch(`/api/versions/${activeVersion.id}/comments`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          content: commentText,
+          timestamp: selectedTimestamp ?? currentTime,
+        }),
+      });
 
-  // Hide YouTube controls, enable JS API
-  const embedUrl = `https://www.youtube.com/embed/${mockVideo.currentVersion.videoId}?enablejsapi=1&rel=0&modestbranding=1&controls=0&showinfo=0&iv_load_policy=3&disablekb=1`;
+      if (res.ok) {
+        const newComment = await res.json();
+        setVideo((prev) => {
+          if (!prev) return prev;
+          return {
+            ...prev,
+            versions: prev.versions.map((v) =>
+              v.id === activeVersionId
+                ? { ...v, comments: [...v.comments, { ...newComment, replies: newComment.replies || [] }] }
+                : v
+            ),
+          };
+        });
+        setCommentText('');
+        setSelectedTimestamp(null);
+      }
+    } catch (err) {
+      console.error('Failed to add comment:', err);
+    } finally {
+      setIsSubmittingComment(false);
+    }
+  }, [commentText, currentTime, selectedTimestamp, activeVersion, activeVersionId]);
+
+  const handleResolveComment = useCallback(
+    async (commentId: string, currentlyResolved: boolean) => {
+      try {
+        const res = await fetch(`/api/comments/${commentId}`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ isResolved: !currentlyResolved }),
+        });
+
+        if (res.ok) {
+          setVideo((prev) => {
+            if (!prev) return prev;
+            return {
+              ...prev,
+              versions: prev.versions.map((v) =>
+                v.id === activeVersionId
+                  ? {
+                      ...v,
+                      comments: v.comments.map((c) =>
+                        c.id === commentId ? { ...c, isResolved: !c.isResolved } : c
+                      ),
+                    }
+                  : v
+              ),
+            };
+          });
+        }
+      } catch (err) {
+        console.error('Failed to resolve comment:', err);
+      }
+    },
+    [activeVersionId]
+  );
+
+  const getEmbedUrl = (version: Version) => {
+    if (version.providerId === 'youtube') {
+      return `https://www.youtube.com/embed/${version.videoId}?enablejsapi=1&rel=0&modestbranding=1&controls=0&showinfo=0&iv_load_policy=3&disablekb=1`;
+    }
+    if (version.providerId === 'vimeo') {
+      return `https://player.vimeo.com/video/${version.videoId}`;
+    }
+    return version.originalUrl;
+  };
+
+  if (loading) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error || !video || !activeVersion) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background">
+        <div className="text-center">
+          <p className="text-muted-foreground mb-4">{error || 'Video not found'}</p>
+          <Button asChild variant="outline">
+            <Link href="/">Go Home</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const embedUrl = getEmbedUrl(activeVersion);
 
   return (
-    <div 
+    <div
       className="h-screen flex flex-col bg-background overflow-hidden"
       onMouseUp={handleTimelineMouseUp}
       onMouseLeave={() => isDragging && handleTimelineMouseUp()}
     >
-      {/* Main Content - Full Width Layout */}
       <div className="flex-1 flex overflow-hidden">
         {/* Video Area */}
         <div className="flex-1 flex flex-col overflow-hidden">
           {/* Compact Header Bar */}
           <div className="shrink-0 flex items-center justify-between h-12 px-4 border-b bg-background/50">
             <div className="flex items-center gap-3">
-              <Link 
-                href={`/projects/${projectId}`}
+              <Link
+                href={`/projects/${video.projectId}`}
                 className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
               >
                 <ArrowLeft className="h-4 w-4 mr-1" />
@@ -287,27 +384,38 @@ export default function VideoPage() {
               </Link>
               <Separator orientation="vertical" className="h-5" />
               <div className="min-w-0">
-                <span className="text-sm font-medium">{mockVideo.title}</span>
-                <span className="text-xs text-muted-foreground ml-2">• {mockVideo.projectName}</span>
+                <span className="text-sm font-medium">{video.title}</span>
+                <span className="text-xs text-muted-foreground ml-2">• {video.project.name}</span>
               </div>
             </div>
-            
+
             {/* Version Selector */}
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="outline" size="sm">
-                  <Badge variant="secondary" className="mr-2">v{mockVideo.currentVersion.number}</Badge>
-                  {mockVideo.currentVersion.label}
+                  <Badge variant="secondary" className="mr-2">
+                    v{activeVersion.versionNumber}
+                  </Badge>
+                  {activeVersion.versionLabel || `Version ${activeVersion.versionNumber}`}
                   <ChevronDown className="h-4 w-4 ml-2" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
-                {mockVideo.versions.map((version) => (
-                  <DropdownMenuItem key={version.id}>
-                    <Badge variant={version.isActive ? 'default' : 'secondary'} className="mr-2">
-                      v{version.number}
+                {video.versions.map((version) => (
+                  <DropdownMenuItem
+                    key={version.id}
+                    onClick={() => setActiveVersionId(version.id)}
+                  >
+                    <Badge
+                      variant={version.id === activeVersionId ? 'default' : 'secondary'}
+                      className="mr-2"
+                    >
+                      v{version.versionNumber}
                     </Badge>
-                    {version.label}
+                    {version.versionLabel || `Version ${version.versionNumber}`}
+                    <span className="ml-auto text-xs text-muted-foreground">
+                      {version._count.comments} comments
+                    </span>
                   </DropdownMenuItem>
                 ))}
               </DropdownMenuContent>
@@ -315,7 +423,7 @@ export default function VideoPage() {
           </div>
 
           {/* Video Player - Maximized */}
-          <div 
+          <div
             className="flex-1 bg-black flex items-center justify-center relative cursor-pointer group"
             onClick={handlePlayPause}
           >
@@ -327,12 +435,14 @@ export default function VideoPage() {
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowFullScreen
               />
-              
+
               {/* Play/Pause overlay indicator */}
-              <div className={cn(
-                "absolute inset-0 flex items-center justify-center bg-black/20 transition-opacity",
-                isPlaying ? "opacity-0 group-hover:opacity-100" : "opacity-100"
-              )}>
+              <div
+                className={cn(
+                  'absolute inset-0 flex items-center justify-center bg-black/20 transition-opacity',
+                  isPlaying ? 'opacity-0 group-hover:opacity-100' : 'opacity-100'
+                )}
+              >
                 <div className="w-16 h-16 rounded-full bg-black/60 flex items-center justify-center">
                   {isPlaying ? (
                     <Pause className="h-8 w-8 text-white" />
@@ -343,81 +453,61 @@ export default function VideoPage() {
               </div>
             </div>
           </div>
-          
+
           {/* Custom Controls Bar */}
           <div className="shrink-0 px-4 py-3 bg-background border-t">
             {/* Control buttons */}
             <div className="flex items-center gap-2 mb-2">
-              <Button 
-                variant="ghost" 
-                size="icon" 
-                className="h-8 w-8"
-                onClick={handlePlayPause}
-              >
-                {isPlaying ? (
-                  <Pause className="h-4 w-4" />
-                ) : (
-                  <Play className="h-4 w-4 ml-0.5" />
-                )}
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handlePlayPause}>
+                {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4 ml-0.5" />}
               </Button>
-              
-              <Button 
-                variant="ghost" 
-                size="icon" 
+
+              <Button
+                variant="ghost"
+                size="icon"
                 className="h-8 w-8"
                 onClick={() => handleSkip(-10)}
               >
                 <SkipBack className="h-4 w-4" />
               </Button>
-              
-              <Button 
-                variant="ghost" 
-                size="icon" 
+
+              <Button
+                variant="ghost"
+                size="icon"
                 className="h-8 w-8"
                 onClick={() => handleSkip(10)}
               >
                 <SkipForward className="h-4 w-4" />
               </Button>
-              
-              <Button 
-                variant="ghost" 
-                size="icon" 
-                className="h-8 w-8"
-                onClick={handleMuteToggle}
-              >
-                {isMuted ? (
-                  <VolumeX className="h-4 w-4" />
-                ) : (
-                  <Volume2 className="h-4 w-4" />
-                )}
+
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleMuteToggle}>
+                {isMuted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
               </Button>
-              
+
               <span className="text-xs text-muted-foreground ml-2 tabular-nums">
                 {formatTime(currentTime)} / {formatTime(duration)}
               </span>
             </div>
-            
+
             {/* Timeline with comment markers */}
-            <div 
+            <div
               ref={timelineRef}
               className="relative h-8 bg-muted rounded cursor-pointer select-none"
               onMouseDown={handleTimelineMouseDown}
               onMouseMove={handleTimelineMouseMove}
             >
-              {/* Buffered/loaded indicator could go here */}
-              
               {/* Progress bar */}
-              <div 
+              <div
                 className="absolute left-0 top-0 h-full bg-primary/30 rounded pointer-events-none"
                 style={{ width: `${(currentTime / duration) * 100}%` }}
               />
-              
+
               {/* Playhead */}
-              <div 
+              <div
                 className="absolute top-0 h-full w-1 bg-primary rounded pointer-events-none"
                 style={{ left: `calc(${(currentTime / duration) * 100}% - 2px)` }}
               />
-              
+
               {/* Comment markers */}
               {comments.map((comment) => (
                 <button
@@ -427,8 +517,8 @@ export default function VideoPage() {
                     handleSeekToTimestamp(comment.timestamp);
                   }}
                   className={cn(
-                    "absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full transition-transform hover:scale-150 z-10",
-                    comment.isResolved ? "bg-green-500" : "bg-cyan-400"
+                    'absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full transition-transform hover:scale-150 z-10',
+                    comment.isResolved ? 'bg-green-500' : 'bg-cyan-400'
                   )}
                   style={{ left: `calc(${(comment.timestamp / duration) * 100}% - 6px)` }}
                   title={`${formatTime(comment.timestamp)} - ${comment.content?.substring(0, 30)}...`}
@@ -438,25 +528,20 @@ export default function VideoPage() {
           </div>
         </div>
 
-        {/* Comments Sidebar - Fixed Right */}
+        {/* Comments Sidebar */}
         <div className="w-80 shrink-0 border-l bg-card flex flex-col overflow-hidden">
-          {/* Comments Header */}
           <div className="shrink-0 flex items-center justify-between p-4 border-b">
             <div className="flex items-center gap-2">
               <MessageSquare className="h-5 w-5" />
               <span className="font-medium">Comments</span>
               <Badge variant="secondary">{comments.length}</Badge>
             </div>
-            <Button 
-              variant="ghost" 
-              size="sm"
-              onClick={() => setShowResolved(!showResolved)}
-            >
+            <Button variant="ghost" size="sm" onClick={() => setShowResolved(!showResolved)}>
               {showResolved ? 'Hide' : 'Show'} Resolved
             </Button>
           </div>
 
-          {/* Comments List - Scrollable */}
+          {/* Comments List */}
           <div className="flex-1 overflow-y-auto p-4 space-y-3">
             {filteredComments.length === 0 ? (
               <div className="text-center py-8 text-muted-foreground">
@@ -467,128 +552,136 @@ export default function VideoPage() {
             ) : (
               filteredComments
                 .sort((a, b) => a.timestamp - b.timestamp)
-                .map((comment) => (
-                  <div 
-                    key={comment.id} 
-                    className={cn(
-                      "group rounded-lg border p-3 transition-colors hover:bg-accent/50",
-                      comment.isResolved && "opacity-60"
-                    )}
-                  >
-                    {/* Comment Header */}
-                    <div className="flex items-start justify-between gap-2 mb-2">
-                      <div className="flex items-center gap-2">
-                        <Avatar className="h-6 w-6">
-                          <AvatarImage src={comment.author.image ?? undefined} />
-                          <AvatarFallback className="text-xs">
-                            {comment.author.name.charAt(0)}
-                          </AvatarFallback>
-                        </Avatar>
-                        <span className="text-sm font-medium">{comment.author.name}</span>
-                      </div>
-                      
-                      <div className="flex items-center gap-1">
-                        <button
-                          onClick={() => handleSeekToTimestamp(comment.timestamp)}
-                          className="flex items-center gap-1 text-xs text-primary hover:underline px-1.5 py-0.5 rounded bg-primary/10"
-                        >
-                          <Clock className="h-3 w-3" />
-                          {formatTime(comment.timestamp)}
-                        </button>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-6 w-6"
-                          onClick={() => handleResolveComment(comment.id)}
-                        >
-                          {comment.isResolved ? (
-                            <CheckCircle2 className="h-4 w-4 text-green-500" />
-                          ) : (
-                            <Circle className="h-4 w-4" />
-                          )}
-                        </Button>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" size="icon" className="h-6 w-6 opacity-0 group-hover:opacity-100">
-                              <MoreVertical className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem>Reply</DropdownMenuItem>
-                            <DropdownMenuItem>Edit</DropdownMenuItem>
-                            <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </div>
-
-                    {/* Comment Content */}
-                    {comment.content && (
-                      <p className="text-sm mb-2">{comment.content}</p>
-                    )}
-                    
-                    {/* Voice Comment */}
-                    {comment.voiceUrl && (
-                      <div className="flex items-center gap-2 p-2 bg-muted rounded mb-2">
-                        <Button size="icon" variant="ghost" className="h-8 w-8">
-                          <Play className="h-4 w-4" />
-                        </Button>
-                        <div className="flex-1 h-1 bg-primary/30 rounded">
-                          <div className="w-0 h-full bg-primary rounded" />
+                .map((comment) => {
+                  const authorName =
+                    comment.author?.name || comment.guestName || 'Anonymous';
+                  return (
+                    <div
+                      key={comment.id}
+                      className={cn(
+                        'group rounded-lg border p-3 transition-colors hover:bg-accent/50',
+                        comment.isResolved && 'opacity-60'
+                      )}
+                    >
+                      <div className="flex items-start justify-between gap-2 mb-2">
+                        <div className="flex items-center gap-2">
+                          <Avatar className="h-6 w-6">
+                            <AvatarImage src={comment.author?.image ?? undefined} />
+                            <AvatarFallback className="text-xs">
+                              {authorName.charAt(0)}
+                            </AvatarFallback>
+                          </Avatar>
+                          <span className="text-sm font-medium">{authorName}</span>
                         </div>
-                        <span className="text-xs text-muted-foreground">
-                          {formatTime(comment.voiceDuration || 0)}
-                        </span>
-                      </div>
-                    )}
-                    
-                    {/* Timestamp & Meta */}
-                    <p className="text-xs text-muted-foreground">{comment.createdAt}</p>
 
-                    {/* Replies */}
-                    {comment.replies.length > 0 && (
-                      <div className="mt-3 pl-3 border-l-2 space-y-2">
-                        {comment.replies.map((reply) => (
-                          <div key={reply.id} className="text-sm">
-                            <div className="flex items-center gap-2 mb-1">
-                              <Avatar className="h-5 w-5">
-                                <AvatarFallback className="text-xs">
-                                  {reply.author.name.charAt(0)}
-                                </AvatarFallback>
-                              </Avatar>
-                              <span className="font-medium text-xs">{reply.author.name}</span>
-                              <span className="text-xs text-muted-foreground">{reply.createdAt}</span>
-                            </div>
-                            <p className="text-sm">{reply.content}</p>
-                          </div>
-                        ))}
+                        <div className="flex items-center gap-1">
+                          <button
+                            onClick={() => handleSeekToTimestamp(comment.timestamp)}
+                            className="flex items-center gap-1 text-xs text-primary hover:underline px-1.5 py-0.5 rounded bg-primary/10"
+                          >
+                            <Clock className="h-3 w-3" />
+                            {formatTime(comment.timestamp)}
+                          </button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6"
+                            onClick={() =>
+                              handleResolveComment(comment.id, comment.isResolved)
+                            }
+                          >
+                            {comment.isResolved ? (
+                              <CheckCircle2 className="h-4 w-4 text-green-500" />
+                            ) : (
+                              <Circle className="h-4 w-4" />
+                            )}
+                          </Button>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6 opacity-0 group-hover:opacity-100"
+                              >
+                                <MoreVertical className="h-4 w-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem>Reply</DropdownMenuItem>
+                              <DropdownMenuItem>Edit</DropdownMenuItem>
+                              <DropdownMenuItem className="text-destructive">
+                                Delete
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
                       </div>
-                    )}
-                  </div>
-                ))
+
+                      {comment.content && <p className="text-sm mb-2">{comment.content}</p>}
+
+                      {comment.voiceUrl && (
+                        <div className="flex items-center gap-2 p-2 bg-muted rounded mb-2">
+                          <Button size="icon" variant="ghost" className="h-8 w-8">
+                            <Play className="h-4 w-4" />
+                          </Button>
+                          <div className="flex-1 h-1 bg-primary/30 rounded">
+                            <div className="w-0 h-full bg-primary rounded" />
+                          </div>
+                          <span className="text-xs text-muted-foreground">
+                            {formatTime(comment.voiceDuration || 0)}
+                          </span>
+                        </div>
+                      )}
+
+                      <p className="text-xs text-muted-foreground">
+                        {new Date(comment.createdAt).toLocaleDateString()}
+                      </p>
+
+                      {comment.replies.length > 0 && (
+                        <div className="mt-3 pl-3 border-l-2 space-y-2">
+                          {comment.replies.map((reply) => {
+                            const replyAuthor =
+                              reply.author?.name || reply.guestName || 'Anonymous';
+                            return (
+                              <div key={reply.id} className="text-sm">
+                                <div className="flex items-center gap-2 mb-1">
+                                  <Avatar className="h-5 w-5">
+                                    <AvatarFallback className="text-xs">
+                                      {replyAuthor.charAt(0)}
+                                    </AvatarFallback>
+                                  </Avatar>
+                                  <span className="font-medium text-xs">{replyAuthor}</span>
+                                  <span className="text-xs text-muted-foreground">
+                                    {new Date(reply.createdAt).toLocaleDateString()}
+                                  </span>
+                                </div>
+                                <p className="text-sm">{reply.content}</p>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })
             )}
           </div>
 
-          {/* Comment Input - Fixed at Bottom */}
+          {/* Comment Input */}
           <div className="shrink-0 p-4 border-t bg-background">
             <div className="flex items-center gap-2 mb-2">
               <Button
                 variant="outline"
                 size="sm"
                 onClick={() => setSelectedTimestamp(currentTime)}
-                className={cn(selectedTimestamp !== null && "border-primary")}
+                className={cn(selectedTimestamp !== null && 'border-primary')}
               >
                 <Clock className="h-4 w-4 mr-1" />
-                {selectedTimestamp !== null 
-                  ? formatTime(selectedTimestamp)
-                  : formatTime(currentTime)
-                }
+                {selectedTimestamp !== null ? formatTime(selectedTimestamp) : formatTime(currentTime)}
               </Button>
-              <span className="text-xs text-muted-foreground">
-                Pin to this time
-              </span>
+              <span className="text-xs text-muted-foreground">Pin to this time</span>
             </div>
-            
+
             <div className="flex gap-2">
               <Textarea
                 placeholder="Add a comment..."
@@ -603,28 +696,30 @@ export default function VideoPage() {
                 }}
               />
               <div className="flex flex-col gap-1">
-                <Button 
-                  size="icon" 
+                <Button
+                  size="icon"
                   onClick={handleAddComment}
-                  disabled={!commentText.trim()}
+                  disabled={!commentText.trim() || isSubmittingComment}
                 >
-                  <Send className="h-4 w-4" />
+                  {isSubmittingComment ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Send className="h-4 w-4" />
+                  )}
                 </Button>
-                <Button 
-                  size="icon" 
-                  variant={isRecording ? "destructive" : "outline"}
+                <Button
+                  size="icon"
+                  variant={isRecording ? 'destructive' : 'outline'}
                   onClick={() => setIsRecording(!isRecording)}
                 >
-                  <Mic className={cn("h-4 w-4", isRecording && "animate-pulse")} />
+                  <Mic className={cn('h-4 w-4', isRecording && 'animate-pulse')} />
                 </Button>
               </div>
             </div>
-            <p className="text-xs text-muted-foreground mt-1">
-              ⌘+Enter to submit
-            </p>
+            <p className="text-xs text-muted-foreground mt-1">Cmd+Enter to submit</p>
           </div>
         </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/components/video-card.tsx b/components/video-card.tsx
index acd8faf..a8daa8d 100644
--- a/components/video-card.tsx
+++ b/components/video-card.tsx
@@ -1,21 +1,48 @@
 'use client';
 
+import { useState } from 'react';
 import Link from 'next/link';
-import { 
+import { useRouter } from 'next/navigation';
+import {
   Play,
   MessageSquare,
   Clock,
-  MoreVertical
+  MoreVertical,
+  Loader2,
+  Link as LinkIcon,
+  AlertCircle,
+  CheckCircle2,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { parseVideoUrl, fetchVideoMetadata, getThumbnailUrl, type VideoSource } from '@/lib/video-providers';
 
 interface VideoCardProps {
   video: {
@@ -31,65 +58,308 @@ interface VideoCardProps {
 }
 
 export function VideoCard({ video, projectId }: VideoCardProps) {
+  const router = useRouter();
+
+  // Edit dialog
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [editTitle, setEditTitle] = useState(video.title);
+  const [editDescription, setEditDescription] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [editError, setEditError] = useState('');
+
+  // Add Version dialog
+  const [showVersionDialog, setShowVersionDialog] = useState(false);
+  const [versionUrl, setVersionUrl] = useState('');
+  const [versionLabel, setVersionLabel] = useState('');
+  const [versionSource, setVersionSource] = useState<VideoSource | null>(null);
+  const [versionUrlError, setVersionUrlError] = useState('');
+  const [isCreatingVersion, setIsCreatingVersion] = useState(false);
+
+  // Delete dialog
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleEdit = async () => {
+    setIsSaving(true);
+    setEditError('');
+    try {
+      const res = await fetch(`/api/projects/${projectId}/videos/${video.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: editTitle.trim(),
+          description: editDescription.trim() || null,
+        }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        setEditError(data.error || 'Failed to update video');
+        return;
+      }
+      setShowEditDialog(false);
+      router.refresh();
+    } catch {
+      setEditError('An unexpected error occurred');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleVersionUrlChange = (url: string) => {
+    setVersionUrl(url);
+    setVersionUrlError('');
+    if (!url.trim()) {
+      setVersionSource(null);
+      return;
+    }
+    const source = parseVideoUrl(url);
+    if (source) {
+      setVersionSource(source);
+    } else {
+      setVersionSource(null);
+      if (url.length > 10) setVersionUrlError('Unsupported URL');
+    }
+  };
+
+  const handleCreateVersion = async () => {
+    if (!versionSource) return;
+    setIsCreatingVersion(true);
+    try {
+      const meta = await fetchVideoMetadata(versionSource);
+      const thumbnailUrl = getThumbnailUrl(versionSource, 'large');
+
+      const res = await fetch(`/api/projects/${projectId}/videos/${video.id}/versions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          videoUrl: versionSource.originalUrl,
+          providerId: versionSource.providerId,
+          providerVideoId: versionSource.videoId,
+          versionLabel: versionLabel.trim() || null,
+          thumbnailUrl,
+          duration: meta?.duration || null,
+          setActive: true,
+        }),
+      });
+      if (res.ok) {
+        setShowVersionDialog(false);
+        setVersionUrl('');
+        setVersionLabel('');
+        setVersionSource(null);
+        router.refresh();
+      }
+    } catch (err) {
+      console.error('Failed to create version:', err);
+    } finally {
+      setIsCreatingVersion(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      const res = await fetch(`/api/projects/${projectId}/videos/${video.id}`, {
+        method: 'DELETE',
+      });
+      if (res.ok) {
+        setShowDeleteDialog(false);
+        router.refresh();
+      }
+    } catch (err) {
+      console.error('Failed to delete video:', err);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
   return (
-    <Card className="group overflow-hidden transition-colors hover:bg-accent/50 cursor-pointer">
-      <Link href={`/watch/${video.id}`}>
-        {/* Thumbnail */}
-        <div className="relative aspect-video bg-muted overflow-hidden">
-          <img
-            src={video.thumbnailUrl}
-            alt={video.title}
-            className="object-cover w-full h-full transition-transform group-hover:scale-105"
-          />
-          <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-            <Play className="h-12 w-12 text-white" fill="white" />
-          </div>
-          <Badge className="absolute bottom-2 right-2 bg-black/70">
-            {video.duration}
-          </Badge>
-        </div>
-      </Link>
-      
-      <CardContent className="p-4">
-        <div className="flex items-start justify-between gap-2">
-          <Link href={`/watch/${video.id}`} className="min-w-0 flex-1">
-            <h3 className="font-medium truncate">{video.title}</h3>
-            <div className="flex items-center gap-3 mt-1 text-sm text-muted-foreground">
-              <span className="flex items-center gap-1">
-                <Badge variant="secondary" className="text-xs">
-                  v{video.currentVersion}
-                </Badge>
-              </span>
-              <span className="flex items-center gap-1">
-                <MessageSquare className="h-3.5 w-3.5" />
-                {video.commentCount}
-              </span>
-              <span className="flex items-center gap-1">
-                <Clock className="h-3.5 w-3.5" />
-                {video.lastUpdated}
-              </span>
+    <>
+      <Card className="group overflow-hidden transition-colors hover:bg-accent/50 cursor-pointer">
+        <Link href={`/projects/${projectId}/videos/${video.id}`}>
+          {/* Thumbnail */}
+          <div className="relative aspect-video bg-muted overflow-hidden">
+            <img
+              src={video.thumbnailUrl}
+              alt={video.title}
+              className="object-cover w-full h-full transition-transform group-hover:scale-105"
+            />
+            <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+              <Play className="h-12 w-12 text-white" fill="white" />
             </div>
-          </Link>
-          
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button 
-                variant="ghost" 
-                size="icon" 
-                className="h-8 w-8 shrink-0"
-                onClick={(e) => e.stopPropagation()}
-              >
-                <MoreVertical className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem>Edit</DropdownMenuItem>
-              <DropdownMenuItem>Add Version</DropdownMenuItem>
-              <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </CardContent>
-    </Card>
+            <Badge className="absolute bottom-2 right-2 bg-black/70">{video.duration}</Badge>
+          </div>
+        </Link>
+
+        <CardContent className="p-4">
+          <div className="flex items-start justify-between gap-2">
+            <Link href={`/projects/${projectId}/videos/${video.id}`} className="min-w-0 flex-1">
+              <h3 className="font-medium truncate">{video.title}</h3>
+              <div className="flex items-center gap-3 mt-1 text-sm text-muted-foreground">
+                <span className="flex items-center gap-1">
+                  <Badge variant="secondary" className="text-xs">
+                    v{video.currentVersion}
+                  </Badge>
+                </span>
+                <span className="flex items-center gap-1">
+                  <MessageSquare className="h-3.5 w-3.5" />
+                  {video.commentCount}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Clock className="h-3.5 w-3.5" />
+                  {video.lastUpdated}
+                </span>
+              </div>
+            </Link>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 shrink-0"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onSelect={() => setShowEditDialog(true)}>
+                  Edit
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={() => setShowVersionDialog(true)}>
+                  Add Version
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className="text-destructive"
+                  onSelect={() => setShowDeleteDialog(true)}
+                >
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Edit Dialog */}
+      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit Video</DialogTitle>
+            <DialogDescription>Update the video title and description.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 mt-2">
+            <div className="space-y-2">
+              <Label>Title</Label>
+              <Input
+                value={editTitle}
+                onChange={(e) => setEditTitle(e.target.value)}
+                disabled={isSaving}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Description (optional)</Label>
+              <Textarea
+                value={editDescription}
+                onChange={(e) => setEditDescription(e.target.value)}
+                rows={3}
+                disabled={isSaving}
+              />
+            </div>
+            {editError && (
+              <p className="text-sm text-destructive flex items-center gap-1">
+                <AlertCircle className="h-4 w-4" />
+                {editError}
+              </p>
+            )}
+            <Button onClick={handleEdit} disabled={!editTitle.trim() || isSaving} className="w-full">
+              {isSaving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+              Save Changes
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Add Version Dialog */}
+      <Dialog open={showVersionDialog} onOpenChange={setShowVersionDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add New Version</DialogTitle>
+            <DialogDescription>
+              Upload a new version of &quot;{video.title}&quot;. The new version will become active.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 mt-2">
+            <div className="space-y-2">
+              <Label>Video URL</Label>
+              <div className="relative">
+                <LinkIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="https://youtube.com/watch?v=..."
+                  value={versionUrl}
+                  onChange={(e) => handleVersionUrlChange(e.target.value)}
+                  className="pl-10"
+                  disabled={isCreatingVersion}
+                />
+              </div>
+              {versionUrlError && (
+                <p className="text-sm text-destructive flex items-center gap-1">
+                  <AlertCircle className="h-4 w-4" />
+                  {versionUrlError}
+                </p>
+              )}
+              {versionSource && (
+                <p className="text-sm text-green-600 flex items-center gap-1">
+                  <CheckCircle2 className="h-4 w-4" />
+                  {versionSource.providerId.charAt(0).toUpperCase() +
+                    versionSource.providerId.slice(1)}{' '}
+                  video detected
+                </p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label>Version Label (optional)</Label>
+              <Input
+                placeholder="e.g. Final Cut, Review Round 2"
+                value={versionLabel}
+                onChange={(e) => setVersionLabel(e.target.value)}
+                disabled={isCreatingVersion}
+              />
+            </div>
+            <Button
+              onClick={handleCreateVersion}
+              disabled={!versionSource || isCreatingVersion}
+              className="w-full"
+            >
+              {isCreatingVersion && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+              Add Version {video.currentVersion + 1}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete &quot;{video.title}&quot;?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete this video, all its versions, and all comments. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isDeleting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }
diff --git a/types/youtube.d.ts b/types/youtube.d.ts
index 0108c94..b84e9f4 100644
--- a/types/youtube.d.ts
+++ b/types/youtube.d.ts
@@ -24,6 +24,9 @@ declare namespace YT {
     getCurrentTime(): number;
     getDuration(): number;
     getPlayerState(): PlayerState;
+    setPlaybackRate(suggestedRate: number): void;
+    getPlaybackRate(): number;
+    getAvailablePlaybackRates(): number[];
     destroy(): void;
   }