[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { SiteHeader } from "@/components/site-header" import { VideoGrid } from "@/components/video-grid" export default function Home() { return (

Discover videos

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/video-comments.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { formatDistanceToNow } from "date-fns" import { MessageSquare, ThumbsUp, ThumbsDown } from "lucide-react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" // Mock comments data const mockComments = [ { id: "c1", content: "This was really helpful, thanks for sharing!", createdAt: "2023-05-16T08:30:00Z", likes: 24, user: { id: "u1", name: "Jane Smith", avatar: "/placeholder.svg?height=40&width=40", }, }, { id: "c2", content: "Great tutorial! Could you make one about authentication next?", createdAt: "2023-05-16T10:15:00Z", likes: 12, user: { id: "u2", name: "Mike Johnson", avatar: "/placeholder.svg?height=40&width=40", }, }, { id: "c3", content: "I've been looking for a clear explanation of this topic for ages. Finally found it!", createdAt: "2023-05-17T14:20:00Z", likes: 8, user: { id: "u3", name: "Sarah Williams", avatar: "/placeholder.svg?height=40&width=40", }, }, ] interface VideoCommentsProps { videoId: string } export function VideoComments({ videoId }: VideoCommentsProps) { const [comments, setComments] = useState(mockComments) const [isLoading, setIsLoading] = useState(true) const [newComment, setNewComment] = useState("") const [isLoggedIn, setIsLoggedIn] = useState(false) useEffect(() => { // Simulate API call const fetchComments = async () => { try { // In a real app, you would fetch from your API // const response = await fetch(`/api/videos/${videoId}/comments`) // const data = await response.json() // setComments(data) // Using mock data for now setTimeout(() => { setComments(mockComments) setIsLoading(false) }, 1000) } catch (error) { console.error("Error fetching comments:", error) setIsLoading(false) } } fetchComments() }, [videoId]) const handleSubmitComment = async (e: React.FormEvent) => { e.preventDefault() if (!newComment.trim()) return // In a real app, you would call your API // const response = await fetch(`/api/videos/${videoId}/comments`, { // method: 'POST', // headers: { 'Content-Type': 'application/json' }, // body: JSON.stringify({ content: newComment }) // }) // Simulate API call const newCommentObj = { id: `c${comments.length + 1}`, content: newComment, createdAt: new Date().toISOString(), likes: 0, user: { id: "current-user", name: "Current User", avatar: "/placeholder.svg?height=40&width=40", }, } setComments([newCommentObj, ...comments]) setNewComment("") } return (

{comments.length} Comments

{isLoggedIn ? (

setNewComment(e.target.value)}
              className="min-h-[80px]"
            />
            <div className="flex justify-end gap-2">
              <Button variant="ghost" onClick={() => setNewComment("")}>
                Cancel
              </Button>
              <Button type="submit" disabled={!newComment.trim()}>
                Comment
              </Button>
            </div>
          </div>
        </form>
      ) : (
        <div className="flex items-center justify-between p-4 border rounded-lg">
          <p>Sign in to add a comment</p>
          <Button onClick={() => setIsLoggedIn(true)}>Sign in</Button>
        </div>
      )}

{isLoading ? (
        <div className="space-y-4">
          {Array(3)
            .fill(0)
            .map((_, index) => (
              <div key={index} className="flex gap-4">
                <div className="h-10 w-10 rounded-full bg-muted animate-pulse" />
                <div className="flex-1 space-y-2">
                  <div className="h-4 bg-muted rounded animate-pulse w-1/4" />
                  <div className="h-3 bg-muted rounded animate-pulse w-full" />
                  <div className="h-3 bg-muted rounded animate-pulse w-5/6" />
                </div>
              </div>
            ))}
        </div>
      ) : (
        <div className="space-y-6">
          {comments.map((comment) => (
            <div key={comment.id} className="flex gap-4">
              <Avatar className="h-10 w-10">
                <AvatarImage src={comment.user.avatar || "/placeholder.svg"} alt={comment.user.name} />
                <AvatarFallback>{comment.user.name[0]}</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <h4 className="font-semibold">{comment.user.name}</h4>
                  <span className="text-xs text-muted-foreground">
                    {formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
                  </span>
                </div>
                <p className="mt-1">{comment.content}</p>
                <div className="flex items-center gap-4 mt-2">
                  <Button variant="ghost" size="sm" className="h-8 px-2">
                    <ThumbsUp className="h-4 w-4 mr-1" />
                    <span>{comment.likes}</span>
                  </Button>
                  <Button variant="ghost" size="sm" className="h-8 px-2">
                    <ThumbsDown className="h-4 w-4" />
                  </Button>
                  <Button variant="ghost" size="sm" className="h-8 px-2">
                    Reply
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="server/models/Comment.js" isMerged="true"
import mongoose from "mongoose"

const commentSchema = new mongoose.Schema({
  content: {
    type: String,
    required: true,
    trim: true,
  },
  user: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User",
    required: true,
  },
  video: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "Video",
    required: true,
  },
  likes: {
    type: Number,
    default: 0,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
})

const Comment = mongoose.model("Comment", commentSchema)

export default Comment
[V0_FILE]typescriptreact:file="server/models/Subscription.js" isMerged="true"
import mongoose from "mongoose"

const subscriptionSchema = new mongoose.Schema({
  subscriber: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User",
    required: true,
  },
  channel: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User",
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
})

// Ensure a user can only subscribe to a channel once
subscriptionSchema.index({ subscriber: 1, channel: 1 }, { unique: true })

const Subscription = mongoose.model("Subscription", subscriptionSchema)

export default Subscription
[V0_FILE]typescriptreact:file="server/services/googleDriveService.js" isMerged="true"
import { google } from "googleapis"
import fs from "fs"

// Initialize Google Drive API
const initDriveClient = () => {
  const oauth2Client = new google.auth.OAuth2(
    process.env.GDRIVE_CLIENT_ID,
    process.env.GDRIVE_CLIENT_SECRET,
    process.env.GDRIVE_REDIRECT_URI,
  )

oauth2Client.setCredentials({
    refresh_token: process.env.GDRIVE_REFRESH_TOKEN,
  })

return google.drive({
    version: "v3",
    auth: oauth2Client,
  })
}

// Upload a file to Google Drive
export const uploadFile = async (filePath, fileName, mimeType) => {
  const drive = initDriveClient()

try {
    const fileMetadata = {
      name: fileName,
      parents: ["root"], // Upload to root folder, change as needed
    }

const media = {
      mimeType,
      body: fs.createReadStream(filePath),
    }

const response = await drive.files.create({
      resource: fileMetadata,
      media: media,
      fields: "id, webViewLink",
    })

// Make the file viewable with a link
    await drive.permissions.create({
      fileId: response.data.id,
      requestBody: {
        role: "reader",
        type: "anyone",
      },
    })

return {
      fileId: response.data.id,
      webViewLink: response.data.webViewLink,
    }
  } catch (error) {
    console.error("Error uploading to Google Drive:", error)
    throw error
  }
}

// Get a file from Google Drive
export const getFile = async (fileId) => {
  const drive = initDriveClient()

try {
    const response = await drive.files.get({
      fileId,
      fields: "id, name, mimeType, webViewLink, webContentLink, thumbnailLink",
    })

return response.data
  } catch (error) {
    console.error("Error getting file from Google Drive:", error)
    throw error
  }
}

// Delete a file from Google Drive
export const deleteFile = async (fileId) => {
  const drive = initDriveClient()

try {
    await drive.files.delete({
      fileId,
    })

return true
  } catch (error) {
    console.error("Error deleting file from Google Drive:", error)
    throw error
  }
}

export default {
  uploadFile,
  getFile,
  deleteFile,
}
[V0_FILE]typescriptreact:file="app/studio/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { formatDistanceToNow } from "date-fns"
import { Edit, Trash2, MoreVertical, Eye, ThumbsUp } from "lucide-react"

import { SiteHeader } from "@/components/site-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useAuth } from "@/contexts/auth-context"
import { useToast } from "@/components/ui/use-toast"

// Mock videos data
const mockVideos = [
  {
    id: "1",
    title: "How to Build a Next.js App",
    thumbnail: "/placeholder.svg?height=180&width=320",
    views: 1200,
    likes: 120,
    createdAt: "2023-05-15T10:30:00Z",
    privacy: "public",
  },
  {
    id: "2",
    title: "React Hooks Explained",
    thumbnail: "/placeholder.svg?height=180&width=320",
    views: 3500,
    likes: 280,
    createdAt: "2023-05-10T14:20:00Z",
    privacy: "public",
  },
  {
    id: "3",
    title: "CSS Grid Layout Tutorial",
    thumbnail: "/placeholder.svg?height=180&width=320",
    views: 2800,
    likes: 210,
    createdAt: "2023-05-05T09:15:00Z",
    privacy: "private",
  },
]

export default function StudioPage() {
  const router = useRouter()
  const { user, isAuthenticated } = useAuth()
  const { toast } = useToast()
  const [videos, setVideos] = useState(mockVideos)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Redirect if not authenticated
    if (!isAuthenticated && !isLoading) {
      router.push("/login")
    }
  }, [isAuthenticated, isLoading, router])

useEffect(() => {
    // Fetch user's videos
    const fetchVideos = async () => {
      try {
        // In a real app, you would fetch from your API
        // const data = await getVideos({ user: user?.id })
        // setVideos(data)

// Using mock data for now
        setTimeout(() => {
          setVideos(mockVideos)
          setIsLoading(false)
        }, 1000)
      } catch (error) {
        console.error("Error fetching videos:", error)
        setIsLoading(false)
      }
    }

if (isAuthenticated) {
      fetchVideos()
    }
  }, [isAuthenticated, user])

const handleDeleteVideo = async (videoId: string) => {
    try {
      // In a real app, you would call your API
      // await deleteVideo(videoId)

// Update local state
      setVideos(videos.filter((video) => video.id !== videoId))

toast({
        title: "Video deleted",
        description: "Your video has been successfully deleted.",
      })
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Delete failed",
        description: "There was a problem deleting your video.",
      })
    }
  }

if (!isAuthenticated) {
    return null // Will redirect in useEffect
  }

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />
      <main className="flex-1 container py-6">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold">Creator Studio</h1>
          <Button onClick={() => router.push("/studio/upload")}>Upload Video</Button>
        </div>

<Tabs defaultValue="videos">
          <TabsList className="mb-6">
            <TabsTrigger value="videos">Videos</TabsTrigger>
            <TabsTrigger value="analytics">Analytics</TabsTrigger>
            <TabsTrigger value="comments">Comments</TabsTrigger>
          </TabsList>

<TabsContent value="videos">
            <div className="grid gap-6">
              {isLoading ? (
                Array(3)
                  .fill(0)
                  .map((_, index) => <div key={index} className="h-24 bg-muted rounded-lg animate-pulse" />)
              ) : videos.length > 0 ? (
                videos.map((video) => (
                  <Card key={video.id}>
                    <CardContent className="p-4">
                      <div className="flex items-center gap-4">
                        <div className="relative w-40 h-24 rounded-md overflow-hidden bg-muted">
                          <img
                            src={video.thumbnail || "/placeholder.svg"}
                            alt={video.title}
                            className="object-cover w-full h-full"
                          />
                        </div>
                        <div className="flex-1 min-w-0">
                          <h3 className="font-semibold truncate">{video.title}</h3>
                          <div className="flex items-center gap-4 mt-1 text-sm text-muted-foreground">
                            <div className="flex items-center gap-1">
                              <Eye className="h-4 w-4" />
                              <span>{video.views.toLocaleString()}</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <ThumbsUp className="h-4 w-4" />
                              <span>{video.likes.toLocaleString()}</span>
                            </div>
                            <span>{formatDistanceToNow(new Date(video.createdAt), { addSuffix: true })}</span>
                            <span className="capitalize">{video.privacy}</span>
                          </div>
                        </div>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreVertical className="h-4 w-4" />
                              <span className="sr-only">Actions</span>
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => router.push(`/watch/${video.id}`)}>View</DropdownMenuItem>
                            <DropdownMenuItem onClick={() => router.push(`/studio/edit/${video.id}`)}>
                              <Edit className="h-4 w-4 mr-2" />
                              Edit
                            </DropdownMenuItem>
                            <DropdownMenuItem
                              className="text-destructive focus:text-destructive"
                              onClick={() => handleDeleteVideo(video.id)}
                            >
                              <Trash2 className="h-4 w-4 mr-2" />
                              Delete
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </CardContent>
                  </Card>
                ))
              ) : (
                <div className="text-center py-12">
                  <h3 className="text-lg font-medium mb-2">No videos yet</h3>
                  <p className="text-muted-foreground mb-6">Upload your first video to get started</p>
                  <Button onClick={() => router.push("/studio/upload")}>Upload Video</Button>
                </div>
              )}
            </div>
          </TabsContent>

<TabsContent value="analytics">
            <Card>
              <CardHeader>
                <CardTitle>Analytics</CardTitle>
                <CardDescription>View your channel performance and audience metrics</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center border rounded-md">
                  <p className="text-muted-foreground">Analytics dashboard coming soon</p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="comments">
            <Card>
              <CardHeader>
                <CardTitle>Comments</CardTitle>
                <CardDescription>Manage comments on your videos</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center border rounded-md">
                  <p className="text-muted-foreground">Comments management coming soon</p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]markdown:file="README.md" isMerged="true"
# VideoHub - YouTube-like Platform

A modern video sharing platform built with Next.js, Express, MongoDB, and Google Drive API.

## Features

- User authentication with JWT
- Video uploading to Google Drive
- Video playback
- Comments and likes
- Creator studio
- Responsive design

## Tech Stack

### Frontend
- Next.js (App Router)
- React
- Tailwind CSS
- shadcn/ui components

### Backend
- Node.js
- Express
- MongoDB with Mongoose
- JWT for authentication
- Google Drive API for video storage

## Getting Started

### Prerequisites

- Node.js 18+ and npm
- MongoDB database
- Google Cloud Platform account with Drive API enabled

### Environment Variables

Create a `.env` file in the root directory with the following variables:

\`\`\`
# MongoDB
MONGODB_URI=your_mongodb_connection_string

# JWT
JWT_SECRET=your_jwt_secret

# Google Drive API
GDRIVE_CLIENT_ID=your_client_id
GDRIVE_CLIENT_SECRET=your_client_secret
GDRIVE_REDIRECT_URI=your_redirect_uri
GDRIVE_REFRESH_TOKEN=your_refresh_token

# Email (optional)
VITE_RESEND_API_KEY=your_resend_api_key
\`\`\`

### Installation

1. Clone the repository
   \`\`\`
   git clone https://github.com/yourusername/videohub.git
   cd videohub
   \`\`\`

2. Install frontend dependencies
   \`\`\`
   npm install
   \`\`\`

3. Install backend dependencies
   \`\`\`
   cd server
   npm install
   \`\`\`

4. Start the development servers

Frontend:
   \`\`\`
   npm run dev
   \`\`\`

Backend:
   \`\`\`
   cd server
   npm run dev
   \`\`\`

5. Open [http://localhost:3000](http://localhost:3000) in your browser

## Project Structure

\`\`\`
├── app/                  # Next.js app directory
│   ├── api/              # API routes
│   ├── login/            # Login page
│   ├── register/         # Register page
│   ├── studio/           # Creator studio
│   ├── watch/            # Video watch page
│   └── ...
├── components/           # React components
├── contexts/             # React contexts
├── lib/                  # Utility functions
├── public/               # Static assets
├── server/               # Express backend
│   ├── models/           # Mongoose models
│   ├── routes/           # API routes
│   ├── services/         # Services
│   └── index.js          # Server entry point
└── ...
\`\`\`

## Deployment

### Frontend
Deploy the Next.js frontend to Vercel:

\`\`\`
vercel
\`\`\`

### Backend
Deploy the Express backend to Render or Heroku.

## License

This project is licensed under the MIT License.
\`\`\`

Let's create a .env.example file:
[V0_FILE]plaintext:file=".env.example" isMerged="true"
# MongoDB
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/videohub

# JWT
JWT_SECRET=your_jwt_secret_key_here

# Google Drive API
GDRIVE_CLIENT_ID=your_client_id_here
GDRIVE_CLIENT_SECRET=your_client_secret_here
GDRIVE_REDIRECT_URI=http://localhost:3000/api/auth/google/callback
GDRIVE_REFRESH_TOKEN=your_refresh_token_here

# Email (optional)
VITE_RESEND_API_KEY=your_resend_api_key_here
[V0_FILE]typescriptreact:file="components/video-player.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Play, Pause, Volume2, VolumeX, Maximize, SkipBack, SkipForward } from "lucide-react"
import { Slider } from "@/components/ui/slider"
import { cn } from "@/lib/utils"

interface VideoPlayerProps {
  videoId: string
  fileId: string
  onEnded?: () => void
  autoPlay?: boolean
}

export function VideoPlayer({ videoId, fileId, onEnded, autoPlay = false }: VideoPlayerProps) {
  const videoRef = useRef<HTMLVideoElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const [isPlaying, setIsPlaying] = useState(false)
  const [isMuted, setIsMuted] = useState(false)
  const [duration, setDuration] = useState(0)
  const [currentTime, setCurrentTime] = useState(0)
  const [volume, setVolume] = useState(1)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [isControlsVisible, setIsControlsVisible] = useState(true)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

// Hide controls timer
  const controlsTimerRef = useRef<NodeJS.Timeout | null>(null)

// Construct video URL from Google Drive fileId
  const videoUrl = fileId
    ? `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&key=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}`
    : ""

useEffect(() => {
    const video = videoRef.current
    if (!video) return

const handleLoadedMetadata = () => {
      setDuration(video.duration)
      setIsLoading(false)
    }

const handleTimeUpdate = () => {
      setCurrentTime(video.currentTime)
    }

const handleEnded = () => {
      setIsPlaying(false)
      if (onEnded) onEnded()
    }

const handleError = () => {
      setIsLoading(false)
      setError("Error loading video. Please try again later.")
    }

video.addEventListener("loadedmetadata", handleLoadedMetadata)
    video.addEventListener("timeupdate", handleTimeUpdate)
    video.addEventListener("ended", handleEnded)
    video.addEventListener("error", handleError)

return () => {
      video.removeEventListener("loadedmetadata", handleLoadedMetadata)
      video.removeEventListener("timeupdate", handleTimeUpdate)
      video.removeEventListener("ended", handleEnded)
      video.removeEventListener("error", handleError)
    }
  }, [onEnded])

// Auto-play when component mounts
  useEffect(() => {
    if (autoPlay && videoRef.current) {
      videoRef.current
        .play()
        .then(() => setIsPlaying(true))
        .catch((err) => console.error("Autoplay prevented:", err))
    }
  }, [autoPlay])

// Handle controls visibility
  useEffect(() => {
    const showControls = () => {
      setIsControlsVisible(true)

if (controlsTimerRef.current) {
        clearTimeout(controlsTimerRef.current)
      }

if (isPlaying) {
        controlsTimerRef.current = setTimeout(() => {
          setIsControlsVisible(false)
        }, 3000)
      }
    }

const container = containerRef.current
    if (container) {
      container.addEventListener("mousemove", showControls)
      container.addEventListener("mouseenter", showControls)
      container.addEventListener("mouseleave", () => {
        if (isPlaying) setIsControlsVisible(false)
      })
    }

return () => {
      if (container) {
        container.removeEventListener("mousemove", showControls)
        container.removeEventListener("mouseenter", showControls)
        container.removeEventListener("mouseleave", () => {
          if (isPlaying) setIsControlsVisible(false)
        })
      }

if (controlsTimerRef.current) {
        clearTimeout(controlsTimerRef.current)
      }
    }
  }, [isPlaying])

const togglePlay = () => {
    const video = videoRef.current
    if (!video) return

if (isPlaying) {
      video.pause()
      setIsPlaying(false)
    } else {
      video
        .play()
        .then(() => setIsPlaying(true))
        .catch((err) => console.error("Play prevented:", err))
    }
  }

const toggleMute = () => {
    const video = videoRef.current
    if (!video) return

if (isMuted) {
      video.muted = false
      setIsMuted(false)
      setVolume(video.volume)
    } else {
      video.muted = true
      setIsMuted(true)
    }
  }

const handleVolumeChange = (value: number[]) => {
    const newVolume = value[0]
    const video = videoRef.current
    if (!video) return

video.volume = newVolume
    setVolume(newVolume)

if (newVolume === 0) {
      video.muted = true
      setIsMuted(true)
    } else if (isMuted) {
      video.muted = false
      setIsMuted(false)
    }
  }

const handleSeek = (value: number[]) => {
    const newTime = value[0]
    const video = videoRef.current
    if (!video) return

video.currentTime = newTime
    setCurrentTime(newTime)
  }

const toggleFullscreen = () => {
    const container = containerRef.current
    if (!container) return

if (!isFullscreen) {
      if (container.requestFullscreen) {
        container.requestFullscreen()
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      }
    }
  }

useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement)
    }

document.addEventListener("fullscreenchange", handleFullscreenChange)

return () => {
      document.removeEventListener("fullscreenchange", handleFullscreenChange)
    }
  }, [])

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins}:${secs < 10 ? "0" : ""}${secs}`
  }

const skipForward = () => {
    const video = videoRef.current
    if (!video) return

video.currentTime = Math.min(video.currentTime + 10, video.duration)
  }

const skipBackward = () => {
    const video = videoRef.current
    if (!video) return

video.currentTime = Math.max(video.currentTime - 10, 0)
  }

return (
    <div
      ref={containerRef}
      className="relative w-full aspect-video bg-black rounded-lg overflow-hidden"
      onDoubleClick={toggleFullscreen}
      onClick={togglePlay}
    >
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
        </div>
      )}

{error && (
        <div className="absolute inset-0 flex items-center justify-center bg-black/80 text-white">
          <div className="text-center p-4">
            <p className="text-lg font-medium">{error}</p>
            <button
              className="mt-4 px-4 py-2 bg-primary text-white rounded-md"
              onClick={() => window.location.reload()}
            >
              Retry
            </button>
          </div>
        </div>
      )}

<video ref={videoRef} src={videoUrl} className="w-full h-full" playsInline onClick={(e) => e.stopPropagation()} />

<div
        className={cn(
          "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 transition-opacity duration-300",
          isControlsVisible ? "opacity-100" : "opacity-0",
        )}
      >
        {/* Progress bar */}
        <div className="mb-2">
          <Slider
            value={[currentTime]}
            min={0}
            max={duration || 100}
            step={0.1}
            onValueChange={handleSeek}
            className="cursor-pointer"
          />
          <div className="flex justify-between text-xs text-white mt-1">
            <span>{formatTime(currentTime)}</span>
            <span>{formatTime(duration)}</span>
          </div>
        </div>

{/* Controls */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <button
              onClick={(e) => {
                e.stopPropagation()
                togglePlay()
              }}
              className="p-1 rounded-full hover:bg-white/20"
              aria-label={isPlaying ? "Pause" : "Play"}
            >
              {isPlaying ? <Pause className="h-6 w-6 text-white" /> : <Play className="h-6 w-6 text-white" />}
            </button>

<button
              onClick={(e) => {
                e.stopPropagation()
                skipBackward()
              }}
              className="p-1 rounded-full hover:bg-white/20"
              aria-label="Skip backward 10 seconds"
            >
              <SkipBack className="h-5 w-5 text-white" />
            </button>

<button
              onClick={(e) => {
                e.stopPropagation()
                skipForward()
              }}
              className="p-1 rounded-full hover:bg-white/20"
              aria-label="Skip forward 10 seconds"
            >
              <SkipForward className="h-5 w-5 text-white" />
            </button>

<div className="flex items-center space-x-2" onClick={(e) => e.stopPropagation()}>
              <button
                onClick={toggleMute}
                className="p-1 rounded-full hover:bg-white/20"
                aria-label={isMuted ? "Unmute" : "Mute"}
              >
                {isMuted || volume === 0 ? (
                  <VolumeX className="h-5 w-5 text-white" />
                ) : (
                  <Volume2 className="h-5 w-5 text-white" />
                )}
              </button>

<button
            onClick={(e) => {
              e.stopPropagation()
              toggleFullscreen()
            }}
            className="p-1 rounded-full hover:bg-white/20"
            aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
          >
            <Maximize className="h-5 w-5 text-white" />
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]javascript:file="server/routes/search.js" isMerged="true"
import express from "express"
import Video from "../models/Video.js"
import User from "../models/User.js"

const router = express.Router()

// Search videos and channels
router.get("/", async (req, res) => {
  try {
    const { q, type = "all", sort = "relevance" } = req.query

if (!q) {
      return res.status(400).json({ message: "Search query is required" })
    }

const searchQuery = { $text: { $search: q } }

// Handle different search types
    if (type === "video") {
      // Search only videos
      const videos = await Video.find(searchQuery).populate("user", "name avatar").sort(getSortOptions(sort)).limit(20)

return res.json({ videos, channels: [] })
    } else if (type === "channel") {
      // Search only channels
      const channels = await User.find({
        $text: { $search: q },
        role: { $in: ["creator", "user"] },
      })
        .select("name avatar subscribers createdAt")
        .limit(20)

return res.json({ videos: [], channels })
    } else {
      // Search both videos and channels
      const [videos, channels] = await Promise.all([
        Video.find(searchQuery).populate("user", "name avatar").sort(getSortOptions(sort)).limit(15),

User.find({
          $text: { $search: q },
          role: { $in: ["creator", "user"] },
        })
          .select("name avatar subscribers createdAt")
          .limit(5),
      ])

return res.json({ videos, channels })
    }
  } catch (error) {
    console.error("Search error:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Helper function to get sort options based on sort parameter
function getSortOptions(sort) {
  switch (sort) {
    case "date":
      return { createdAt: -1 }
    case "views":
      return { views: -1 }
    case "rating":
      return { likes: -1 }
    case "relevance":
    default:
      return { score: { $meta: "textScore" } }
  }
}

export default router
[V0_FILE]typescriptreact:file="app/search/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useSearchParams } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { formatDistanceToNow } from "date-fns"

import { SiteHeader } from "@/components/site-header"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

// Mock search results
const mockVideos = [
  {
    id: "1",
    title: "How to Build a Next.js App",
    thumbnail: "/placeholder.svg?height=180&width=320",
    duration: "12:34",
    views: 1200,
    createdAt: "2023-05-15T10:30:00Z",
    description: "Learn how to build a modern web application using Next.js, React, and Tailwind CSS.",
    channel: {
      id: "c1",
      name: "Tech Tutorials",
      avatar: "/placeholder.svg?height=40&width=40",
    },
  },
  {
    id: "2",
    title: "React Hooks Explained",
    thumbnail: "/placeholder.svg?height=180&width=320",
    duration: "8:22",
    views: 3500,
    createdAt: "2023-05-10T14:20:00Z",
    description: "A comprehensive guide to React Hooks with practical examples and best practices.",
    channel: {
      id: "c2",
      name: "React Masters",
      avatar: "/placeholder.svg?height=40&width=40",
    },
  },
  {
    id: "3",
    title: "CSS Grid Layout Tutorial",
    thumbnail: "/placeholder.svg?height=180&width=320",
    duration: "15:45",
    views: 2800,
    createdAt: "2023-05-05T09:15:00Z",
    description: "Master CSS Grid Layout with this step-by-step tutorial for modern web layouts.",
    channel: {
      id: "c1",
      name: "Tech Tutorials",
      avatar: "/placeholder.svg?height=40&width=40",
    },
  },
]

const mockChannels = [
  {
    id: "c1",
    name: "Tech Tutorials",
    avatar: "/placeholder.svg?height=40&width=40",
    subscribers: 25000,
    createdAt: "2022-01-15T10:30:00Z",
  },
  {
    id: "c2",
    name: "React Masters",
    avatar: "/placeholder.svg?height=40&width=40",
    subscribers: 42000,
    createdAt: "2021-06-10T14:20:00Z",
  },
]

export default function SearchPage() {
  const searchParams = useSearchParams()
  const query = searchParams.get("q") || ""
  const [searchType, setSearchType] = useState("all")
  const [sortBy, setSortBy] = useState("relevance")
  const [videos, setVideos] = useState(mockVideos)
  const [channels, setChannels] = useState(mockChannels)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    if (!query) return

// Simulate API call
    const fetchSearchResults = async () => {
      setIsLoading(true)
      try {
        // In a real app, you would fetch from your API
        // const response = await fetch(`/api/search?q=${query}&type=${searchType}&sort=${sortBy}`)
        // const data = await response.json()
        // setVideos(data.videos)
        // setChannels(data.channels)

// Using mock data for now
        setTimeout(() => {
          // Filter mock data based on query
          const filteredVideos = mockVideos.filter(
            (video) =>
              video.title.toLowerCase().includes(query.toLowerCase()) ||
              video.description.toLowerCase().includes(query.toLowerCase()),
          )

const filteredChannels = mockChannels.filter((channel) =>
            channel.name.toLowerCase().includes(query.toLowerCase()),
          )

setVideos(filteredVideos)
          setChannels(filteredChannels)
          setIsLoading(false)
        }, 1000)
      } catch (error) {
        console.error("Error fetching search results:", error)
        setIsLoading(false)
      }
    }

fetchSearchResults()
  }, [query, searchType, sortBy])

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />
      <main className="flex-1 container py-6">
        <div className="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
          <h1 className="text-2xl font-bold">
            Search results for <span className="text-primary">"{query}"</span>
          </h1>
          <div className="flex items-center gap-2">
            <Select value={sortBy} onValueChange={setSortBy}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Sort by" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="relevance">Relevance</SelectItem>
                <SelectItem value="date">Upload date</SelectItem>
                <SelectItem value="views">View count</SelectItem>
                <SelectItem value="rating">Rating</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

<Tabs defaultValue="all" value={searchType} onValueChange={setSearchType}>
          <TabsList className="mb-6">
            <TabsTrigger value="all">All</TabsTrigger>
            <TabsTrigger value="video">Videos</TabsTrigger>
            <TabsTrigger value="channel">Channels</TabsTrigger>
          </TabsList>

<TabsContent value="all">
            {isLoading ? (
              <div className="space-y-6">
                {Array(3)
                  .fill(0)
                  .map((_, index) => (
                    <div key={index} className="flex gap-4">
                      <div className="w-64 aspect-video bg-muted rounded-lg animate-pulse" />
                      <div className="flex-1 space-y-2">
                        <div className="h-5 bg-muted rounded animate-pulse w-3/4" />
                        <div className="h-4 bg-muted rounded animate-pulse w-1/2" />
                        <div className="h-4 bg-muted rounded animate-pulse w-5/6" />
                      </div>
                    </div>
                  ))}
              </div>
            ) : (
              <div className="space-y-8">
                {channels.length > 0 && (
                  <div>
                    <h2 className="text-lg font-semibold mb-4">Channels</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                      {channels.map((channel) => (
                        <Link key={channel.id} href={`/channel/${channel.id}`}>
                          <div className="flex items-center gap-4 p-4 rounded-lg border hover:bg-muted/50 transition-colors">
                            <Avatar className="h-16 w-16">
                              <AvatarImage src={channel.avatar || "/placeholder.svg"} alt={channel.name} />
                              <AvatarFallback>{channel.name[0]}</AvatarFallback>
                            </Avatar>
                            <div>
                              <h3 className="font-semibold">{channel.name}</h3>
                              <p className="text-sm text-muted-foreground">
                                {new Intl.NumberFormat("en-US", {
                                  notation: "compact",
                                  compactDisplay: "short",
                                }).format(channel.subscribers)}{" "}
                                subscribers
                              </p>
                              <p className="text-xs text-muted-foreground">
                                Joined {formatDistanceToNow(new Date(channel.createdAt), { addSuffix: true })}
                              </p>
                            </div>
                          </div>
                        </Link>
                      ))}
                    </div>
                    <Separator className="my-6" />
                  </div>
                )}

{videos.length > 0 ? (
                  <div>
                    <h2 className="text-lg font-semibold mb-4">Videos</h2>
                    <div className="space-y-6">
                      {videos.map((video) => (
                        <Link key={video.id} href={`/watch/${video.id}`} className="flex gap-4 group">
                          <div className="relative w-64 aspect-video rounded-lg overflow-hidden">
                            <Image
                              src={video.thumbnail || "/placeholder.svg"}
                              alt={video.title}
                              fill
                              className="object-cover transition-transform group-hover:scale-105"
                            />
                            <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-1 rounded">
                              {video.duration}
                            </div>
                          </div>
                          <div className="flex-1">
                            <h3 className="font-semibold text-lg group-hover:text-primary transition-colors">
                              {video.title}
                            </h3>
                            <div className="flex items-center text-sm text-muted-foreground mt-1">
                              <span>
                                {new Intl.NumberFormat("en-US", {
                                  notation: "compact",
                                  compactDisplay: "short",
                                }).format(video.views)}{" "}
                                views
                              </span>
                              <span className="mx-1">•</span>
                              <span>{formatDistanceToNow(new Date(video.createdAt), { addSuffix: true })}</span>
                            </div>
                            <div className="flex items-center gap-2 mt-2">
                              <Avatar className="h-6 w-6">
                                <AvatarImage
                                  src={video.channel.avatar || "/placeholder.svg"}
                                  alt={video.channel.name}
                                />
                                <AvatarFallback>{video.channel.name[0]}</AvatarFallback>
                              </Avatar>
                              <span className="text-sm">{video.channel.name}</span>
                            </div>
                            <p className="text-sm text-muted-foreground mt-2 line-clamp-2">{video.description}</p>
                          </div>
                        </Link>
                      ))}
                    </div>
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <h3 className="text-lg font-medium mb-2">No results found</h3>
                    <p className="text-muted-foreground">Try different keywords or check your spelling</p>
                  </div>
                )}
              </div>
            )}
          </TabsContent>

<TabsContent value="video">
            {isLoading ? (
              <div className="space-y-6">
                {Array(5)
                  .fill(0)
                  .map((_, index) => (
                    <div key={index} className="flex gap-4">
                      <div className="w-64 aspect-video bg-muted rounded-lg animate-pulse" />
                      <div className="flex-1 space-y-2">
                        <div className="h-5 bg-muted rounded animate-pulse w-3/4" />
                        <div className="h-4 bg-muted rounded animate-pulse w-1/2" />
                        <div className="h-4 bg-muted rounded animate-pulse w-5/6" />
                      </div>
                    </div>
                  ))}
              </div>
            ) : videos.length > 0 ? (
              <div className="space-y-6">
                {videos.map((video) => (
                  <Link key={video.id} href={`/watch/${video.id}`} className="flex gap-4 group">
                    <div className="relative w-64 aspect-video rounded-lg overflow-hidden">
                      <Image
                        src={video.thumbnail || "/placeholder.svg"}
                        alt={video.title}
                        fill
                        className="object-cover transition-transform group-hover:scale-105"
                      />
                      <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-1 rounded">
                        {video.duration}
                      </div>
                    </div>
                    <div className="flex-1">
                      <h3 className="font-semibold text-lg group-hover:text-primary transition-colors">
                        {video.title}
                      </h3>
                      <div className="flex items-center text-sm text-muted-foreground mt-1">
                        <span>
                          {new Intl.NumberFormat("en-US", {
                            notation: "compact",
                            compactDisplay: "short",
                          }).format(video.views)}{" "}
                          views
                        </span>
                        <span className="mx-1">•</span>
                        <span>{formatDistanceToNow(new Date(video.createdAt), { addSuffix: true })}</span>
                      </div>
                      <div className="flex items-center gap-2 mt-2">
                        <Avatar className="h-6 w-6">
                          <AvatarImage src={video.channel.avatar || "/placeholder.svg"} alt={video.channel.name} />
                          <AvatarFallback>{video.channel.name[0]}</AvatarFallback>
                        </Avatar>
                        <span className="text-sm">{video.channel.name}</span>
                      </div>
                      <p className="text-sm text-muted-foreground mt-2 line-clamp-2">{video.description}</p>
                    </div>
                  </Link>
                ))}
              </div>
            ) : (
              <div className="text-center py-12">
                <h3 className="text-lg font-medium mb-2">No videos found</h3>
                <p className="text-muted-foreground">Try different keywords or check your spelling</p>
              </div>
            )}
          </TabsContent>

<TabsContent value="channel">
            {isLoading ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {Array(6)
                  .fill(0)
                  .map((_, index) => (
                    <div key={index} className="flex items-center gap-4 p-4 rounded-lg border">
                      <div className="h-16 w-16 rounded-full bg-muted animate-pulse" />
                      <div className="space-y-2">
                        <div className="h-5 bg-muted rounded animate-pulse w-32" />
                        <div className="h-4 bg-muted rounded animate-pulse w-24" />
                      </div>
                    </div>
                  ))}
              </div>
            ) : channels.length > 0 ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {channels.map((channel) => (
                  <Link key={channel.id} href={`/channel/${channel.id}`}>
                    <div className="flex items-center gap-4 p-4 rounded-lg border hover:bg-muted/50 transition-colors">
                      <Avatar className="h-16 w-16">
                        <AvatarImage src={channel.avatar || "/placeholder.svg"} alt={channel.name} />
                        <AvatarFallback>{channel.name[0]}</AvatarFallback>
                      </Avatar>
                      <div>
                        <h3 className="font-semibold">{channel.name}</h3>
                        <p className="text-sm text-muted-foreground">
                          {new Intl.NumberFormat("en-US", {
                            notation: "compact",
                            compactDisplay: "short",
                          }).format(channel.subscribers)}{" "}
                          subscribers
                        </p>
                        <p className="text-xs text-muted-foreground">
                          Joined {formatDistanceToNow(new Date(channel.createdAt), { addSuffix: true })}
                        </p>
                      </div>
                    </div>
                  </Link>
                ))}
              </div>
            ) : (
              <div className="text-center py-12">
                <h3 className="text-lg font-medium mb-2">No channels found</h3>
                <p className="text-muted-foreground">Try different keywords or check your spelling</p>
              </div>
            )}
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/search/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/site-header.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Search } from "lucide-react"
import { MainNav } from "@/components/main-nav"
import { ThemeToggle } from "@/components/theme-toggle"
import { UserNav } from "@/components/user-nav"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

export function SiteHeader() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [isScrolled, setIsScrolled] = useState(false)

useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (searchQuery.trim()) {
      router.push(`/search?q=${encodeURIComponent(searchQuery.trim())}`)
    }
  }

return (
    <header
      className={`sticky top-0 z-50 w-full border-b backdrop-blur supports-[backdrop-filter]:bg-background/60 ${
        isScrolled ? "shadow-sm" : ""
      }`}
    >
      <div className="container flex h-16 items-center">
        <MainNav />
        <div className="flex flex-1 items-center justify-end space-x-4">
          <form onSubmit={handleSearch} className="relative w-full max-w-sm">
            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search videos..."
              className="pl-8 pr-10"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
            <Button
              type="submit"
              variant="ghost"
              size="sm"
              className="absolute right-0 top-0 h-full px-3"
              disabled={!searchQuery.trim()}
            >
              <Search className="h-4 w-4" />
              <span className="sr-only">Search</span>
            </Button>
          </form>
          <nav className="flex items-center space-x-2">
            <ThemeToggle />
            <UserNav />
          </nav>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/channel/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { formatDistanceToNow } from "date-fns"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { SiteHeader } from "@/components/site-header"
import { VideoGrid } from "@/components/video-grid"
import { useAuth } from "@/contexts/auth-context"
import { useToast } from "@/components/ui/use-toast"

// Mock channel data
const mockChannel = {
  id: "c1",
  name: "Tech Tutorials",
  avatar: "/placeholder.svg?height=120&width=120",
  banner: "/placeholder.svg?height=280&width=1920",
  subscribers: 25000,
  videos: 120,
  description:
    "Welcome to Tech Tutorials! We create in-depth tutorials on web development, programming, and modern tech stacks.",
  createdAt: "2022-01-15T10:30:00Z",
}

export default function ChannelPage() {
  const params = useParams()
  const channelId = params.id as string
  const { isAuthenticated } = useAuth()
  const { toast } = useToast()
  const [channel, setChannel] = useState(mockChannel)
  const [isLoading, setIsLoading] = useState(true)
  const [isSubscribed, setIsSubscribed] = useState(false)
  const [activeTab, setActiveTab] = useState("videos")

useEffect(() => {
    // Simulate API call
    const fetchChannel = async () => {
      try {
        // In a real app, you would fetch from your API
        // const response = await fetch(`/api/channels/${channelId}`)
        // const data = await response.json()
        // setChannel(data)

// Using mock data for now
        setTimeout(() => {
          setChannel(mockChannel)
          setIsLoading(false)
        }, 1000)
      } catch (error) {
        console.error("Error fetching channel:", error)
        setIsLoading(false)
      }
    }

fetchChannel()
  }, [channelId])

const handleSubscribe = () => {
    if (!isAuthenticated) {
      toast({
        title: "Authentication required",
        description: "Please sign in to subscribe to channels",
      })
      return
    }

setIsSubscribed(!isSubscribed)

// In a real app, you would call your API
    // const subscribeToChannel = async () => {
    //   try {
    //     const response = await fetch(`/api/subscriptions/${channelId}`, {
    //       method: 'POST',
    //     })
    //     const data = await response.json()
    //     setIsSubscribed(data.subscribed)
    //   } catch (error) {
    //     console.error('Error subscribing to channel:', error)
    //   }
    // }
    // subscribeToChannel()
  }

if (isLoading) {
    return (
      <div className="flex min-h-screen flex-col">
        <SiteHeader />
        <div className="h-[280px] bg-muted animate-pulse" />
        <main className="flex-1 container py-6">
          <div className="flex flex-col md:flex-row md:items-end gap-6 -mt-16 mb-6">
            <div className="h-[120px] w-[120px] rounded-full bg-muted animate-pulse" />
            <div className="flex-1 space-y-2">
              <div className="h-8 bg-muted rounded animate-pulse w-1/4" />
              <div className="h-4 bg-muted rounded animate-pulse w-1/6" />
            </div>
          </div>
          <div className="h-8 bg-muted rounded animate-pulse w-full mb-8" />
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {Array(8)
              .fill(0)
              .map((_, index) => (
                <div key={index} className="space-y-3">
                  <div className="aspect-video bg-muted rounded-lg animate-pulse" />
                  <div className="space-y-2">
                    <div className="h-4 bg-muted rounded animate-pulse w-5/6" />
                    <div className="h-4 bg-muted rounded animate-pulse w-4/6" />
                  </div>
                </div>
              ))}
          </div>
        </main>
      </div>
    )
  }

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />

{/* Channel Banner */}
      <div className="h-[280px] bg-cover bg-center" style={{ backgroundImage: `url(${channel.banner})` }} />

<main className="flex-1 container py-6">
        {/* Channel Info */}
        <div className="flex flex-col md:flex-row md:items-end gap-6 -mt-16 mb-6">
          <Avatar className="h-[120px] w-[120px] border-4 border-background">
            <AvatarImage src={channel.avatar || "/placeholder.svg"} alt={channel.name} />
            <AvatarFallback className="text-4xl">{channel.name[0]}</AvatarFallback>
          </Avatar>

<div className="flex-1">
            <h1 className="text-3xl font-bold">{channel.name}</h1>
            <div className="flex items-center gap-2 text-muted-foreground mt-1">
              <span>
                {new Intl.NumberFormat("en-US", {
                  notation: "compact",
                  compactDisplay: "short",
                }).format(channel.subscribers)}{" "}
                subscribers
              </span>
              <span>•</span>
              <span>{channel.videos} videos</span>
            </div>
          </div>

<Button variant={isSubscribed ? "default" : "outline"} onClick={handleSubscribe} className="md:self-center">
            {isSubscribed ? "Subscribed" : "Subscribe"}
          </Button>
        </div>

<p className="mb-8">{channel.description}</p>

{/* Channel Content */}
        <Tabs defaultValue="videos" value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-6">
            <TabsTrigger value="videos">Videos</TabsTrigger>
            <TabsTrigger value="playlists">Playlists</TabsTrigger>
            <TabsTrigger value="about">About</TabsTrigger>
          </TabsList>

<TabsContent value="playlists">
            <div className="text-center py-12">
              <h3 className="text-lg font-medium mb-2">Playlists coming soon</h3>
              <p className="text-muted-foreground">This feature is under development</p>
            </div>
          </TabsContent>

<TabsContent value="about">
            <div className="max-w-3xl space-y-6">
              <div>
                <h3 className="text-lg font-semibold mb-2">Description</h3>
                <p>{channel.description}</p>
              </div>

<div>
                <h3 className="text-lg font-semibold mb-2">Stats</h3>
                <p>Joined {formatDistanceToNow(new Date(channel.createdAt), { addSuffix: true })}</p>
                <p>{new Intl.NumberFormat().format(channel.subscribers)} subscribers</p>
                <p>{channel.videos} videos</p>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/video-grid.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { VideoCard } from "@/components/video-card"

// Mock data for videos
const mockVideos = [
  {
    id: "1",
    title: "How to Build a Next.js App",
    thumbnail: "/placeholder.svg?height=180&width=320",
    duration: "12:34",
    views: 1200,
    createdAt: "2023-05-15T10:30:00Z",
    channel: {
      id: "c1",
      name: "Tech Tutorials",
      avatar: "/placeholder.svg?height=40&width=40",
    },
  },
  {
    id: "2",
    title: "React Hooks Explained",
    thumbnail: "/placeholder.svg?height=180&width=320",
    duration: "8:22",
    views: 3500,
    createdAt: "2023-05-10T14:20:00Z",
    channel: {
      id: "c2",
      name: "React Masters",
      avatar: "/placeholder.svg?height=40&width=40",
    },
  },
  {
    id: "3",
    title: "CSS Grid Layout Tutorial",
    thumbnail: "/placeholder.svg?height=180&width=320",
    duration: "15:45",
    views: 2800,
    createdAt: "2023-05-05T09:15:00Z",
    channel: {
      id: "c1",
      name: "Tech Tutorials",
      avatar: "/placeholder.svg?height=40&width=40",
    },
  },
  {
    id: "4",
    title: "JavaScript Array Methods",
    thumbnail: "/placeholder.svg?height=180&width=320",
    duration: "10:12",
    views: 4200,
    createdAt: "2023-04-28T16:45:00Z",
    channel: {
      id: "c3",
      name: "JS Wizards",
      avatar: "/placeholder.svg?height=40&width=40",
    },
  },
  {
    id: "5",
    title: "Building a REST API with Node.js",
    thumbnail: "/placeholder.svg?height=180&width=320",
    duration: "18:30",
    views: 1800,
    createdAt: "2023-04-22T11:30:00Z",
    channel: {
      id: "c4",
      name: "Backend Dev",
      avatar: "/placeholder.svg?height=40&width=40",
    },
  },
  {
    id: "6",
    title: "TypeScript for Beginners",
    thumbnail: "/placeholder.svg?height=180&width=320",
    duration: "14:15",
    views: 2100,
    createdAt: "2023-04-18T13:20:00Z",
    channel: {
      id: "c2",
      name: "React Masters",
      avatar: "/placeholder.svg?height=40&width=40",
    },
  },
]

interface VideoGridProps {
  channelId?: string
  limit?: number
}

export function VideoGrid({ channelId, limit }: VideoGridProps) {
  const [videos, setVideos] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Simulate API call
    const fetchVideos = async () => {
      try {
        // In a real app, you would fetch from your API
        // const url = channelId
        //   ? `/api/channels/${channelId}/videos${limit ? `?limit=${limit}` : ''}`
        //   : `/api/videos${limit ? `?limit=${limit}` : ''}`
        // const response = await fetch(url)
        // const data = await response.json()
        // setVideos(data)

// Using mock data for now
        setTimeout(() => {
          let filteredVideos = [...mockVideos]

// Filter by channel if channelId is provided
          if (channelId) {
            filteredVideos = filteredVideos.filter((video) => video.channel.id === channelId)
          }

// Apply limit if provided
          if (limit && limit > 0) {
            filteredVideos = filteredVideos.slice(0, limit)
          }

setVideos(filteredVideos)
          setIsLoading(false)
        }, 1000)
      } catch (error) {
        console.error("Error fetching videos:", error)
        setIsLoading(false)
      }
    }

fetchVideos()
  }, [channelId, limit])

if (isLoading) {
    return (
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {Array(6)
          .fill(0)
          .map((_, index) => (
            <div key={index} className="space-y-3">
              <div className="aspect-video bg-muted rounded-lg animate-pulse" />
              <div className="space-y-2">
                <div className="h-4 bg-muted rounded animate-pulse w-5/6" />
                <div className="h-4 bg-muted rounded animate-pulse w-4/6" />
              </div>
            </div>
          ))}
      </div>
    )
  }

if (videos.length === 0) {
    return (
      <div className="text-center py-12">
        <h3 className="text-lg font-medium mb-2">No videos found</h3>
        <p className="text-muted-foreground">This channel hasn't uploaded any videos yet</p>
      </div>
    )
  }

return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      {videos.map((video) => (
        <VideoCard key={video.id} video={video} />
      ))}
    </div>
  )
}
[V0_FILE]javascript:file="server/middleware/auth.js" isMerged="true"
import jwt from "jsonwebtoken"

export const authenticateToken = (req, res, next) => {
  const authHeader = req.headers["authorization"]
  const token = authHeader && authHeader.split(" ")[1]

if (!token) return res.status(401).json({ message: "Unauthorized" })

jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
    if (err) return res.status(403).json({ message: "Forbidden" })
    req.user = user
    next()
  })
}

export const isAdmin = (req, res, next) => {
  if (req.user.role !== "admin") {
    return res.status(403).json({ message: "Requires admin privileges" })
  }
  next()
}
[V0_FILE]javascript:file="server/routes/comments.js" isMerged="true"
import express from "express"
import Comment from "../models/Comment.js"
import { authenticateToken } from "../middleware/auth.js"

const router = express.Router()

// Get comments for a video
router.get("/video/:videoId", async (req, res) => {
  try {
    const comments = await Comment.find({ video: req.params.videoId })
      .populate("user", "name avatar")
      .sort({ createdAt: -1 })

res.json(comments)
  } catch (error) {
    console.error("Error fetching comments:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Add a comment to a video
router.post("/video/:videoId", authenticateToken, async (req, res) => {
  try {
    const { content } = req.body

const comment = new Comment({
      content,
      user: req.user.id,
      video: req.params.videoId,
    })

await comment.save()

// Populate user data before sending response
    await comment.populate("user", "name avatar")

res.status(201).json(comment)
  } catch (error) {
    console.error("Error creating comment:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Delete a comment
router.delete("/:id", authenticateToken, async (req, res) => {
  try {
    const comment = await Comment.findById(req.params.id)

if (!comment) {
      return res.status(404).json({ message: "Comment not found" })
    }

// Check if user is the comment author or an admin
    if (comment.user.toString() !== req.user.id && req.user.role !== "admin") {
      return res.status(403).json({ message: "Not authorized to delete this comment" })
    }

await Comment.findByIdAndDelete(req.params.id)

res.json({ message: "Comment deleted successfully" })
  } catch (error) {
    console.error("Error deleting comment:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Like a comment
router.post("/:id/like", authenticateToken, async (req, res) => {
  try {
    const comment = await Comment.findById(req.params.id)

if (!comment) {
      return res.status(404).json({ message: "Comment not found" })
    }

// In a real app, you would track which users liked which comments
    // For simplicity, we're just incrementing the like count
    comment.likes += 1
    await comment.save()

res.json({ likes: comment.likes })
  } catch (error) {
    console.error("Error liking comment:", error)
    res.status(500).json({ message: "Server error" })
  }
})

export default router
[V0_FILE]javascript:file="server/routes/subscriptions.js" isMerged="true"
import express from "express"
import Subscription from "../models/Subscription.js"
import User from "../models/User.js"
import { authenticateToken } from "../middleware/auth.js"

const router = express.Router()

// Subscribe/unsubscribe to a channel
router.post("/:channelId", authenticateToken, async (req, res) => {
  try {
    const channelId = req.params.channelId
    const subscriberId = req.user.id

// Check if already subscribed
    const existingSubscription = await Subscription.findOne({
      subscriber: subscriberId,
      channel: channelId,
    })

if (existingSubscription) {
      // Unsubscribe
      await Subscription.deleteOne({ _id: existingSubscription._id })

// Decrement subscriber count
      await User.findByIdAndUpdate(channelId, { $inc: { subscribers: -1 } })

return res.json({ subscribed: false })
    }

// Create new subscription
    const subscription = new Subscription({
      subscriber: subscriberId,
      channel: channelId,
    })

await subscription.save()

// Increment subscriber count
    await User.findByIdAndUpdate(channelId, { $inc: { subscribers: 1 } })

res.status(201).json({ subscribed: true })
  } catch (error) {
    console.error("Error managing subscription:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Check if user is subscribed to a channel
router.get("/:channelId/check", authenticateToken, async (req, res) => {
  try {
    const subscription = await Subscription.findOne({
      subscriber: req.user.id,
      channel: req.params.channelId,
    })

res.json({ subscribed: !!subscription })
  } catch (error) {
    console.error("Error checking subscription:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Get user's subscriptions
router.get("/", authenticateToken, async (req, res) => {
  try {
    const subscriptions = await Subscription.find({ subscriber: req.user.id })
      .populate("channel", "name avatar subscribers")
      .sort({ createdAt: -1 })

res.json(subscriptions.map((sub) => sub.channel))
  } catch (error) {
    console.error("Error fetching subscriptions:", error)
    res.status(500).json({ message: "Server error" })
  }
})

export default router
[V0_FILE]javascript:file="server/routes/channels.js" isMerged="true"
import express from "express"
import User from "../models/User.js"
import Video from "../models/Video.js"
import { authenticateToken } from "../middleware/auth.js"

const router = express.Router()

// Get channel by ID
router.get("/:id", async (req, res) => {
  try {
    const channel = await User.findById(req.params.id).select("-password -email")

if (!channel) {
      return res.status(404).json({ message: "Channel not found" })
    }

// Get video count
    const videoCount = await Video.countDocuments({ user: req.params.id })

res.json({
      ...channel.toObject(),
      videos: videoCount,
    })
  } catch (error) {
    console.error("Error fetching channel:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Get channel videos
router.get("/:id/videos", async (req, res) => {
  try {
    const { limit = 20, page = 1 } = req.query

const skip = (Number.parseInt(page) - 1) * Number.parseInt(limit)

const videos = await Video.find({
      user: req.params.id,
      privacy: "public",
    })
      .populate("user", "name avatar")
      .sort({ createdAt: -1 })
      .skip(skip)
      .limit(Number.parseInt(limit))

const total = await Video.countDocuments({
      user: req.params.id,
      privacy: "public",
    })

res.json({
      videos,
      pagination: {
        total,
        page: Number.parseInt(page),
        pages: Math.ceil(total / Number.parseInt(limit)),
      },
    })
  } catch (error) {
    console.error("Error fetching channel videos:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Update channel info (for the authenticated user)
router.put("/", authenticateToken, async (req, res) => {
  try {
    const { name, description } = req.body

const user = await User.findById(req.user.id)

if (!user) {
      return res.status(404).json({ message: "User not found" })
    }

if (name) user.name = name
    if (description) user.description = description

await user.save()

res.json({
      id: user._id,
      name: user.name,
      description: user.description,
      avatar: user.avatar,
      subscribers: user.subscribers,
    })
  } catch (error) {
    console.error("Error updating channel:", error)
    res.status(500).json({ message: "Server error" })
  }
})

export default router
[V0_FILE]javascript:file="server/models/Playlist.js" isMerged="true"
import mongoose from "mongoose"

const playlistSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
    trim: true,
  },
  description: {
    type: String,
    default: "",
    trim: true,
  },
  user: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User",
    required: true,
  },
  videos: [
    {
      type: mongoose.Schema.Types.ObjectId,
      ref: "Video",
    },
  ],
  privacy: {
    type: String,
    enum: ["public", "unlisted", "private"],
    default: "public",
  },
  thumbnail: {
    type: String,
    default: "",
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
  updatedAt: {
    type: Date,
    default: Date.now,
  },
})

// Update the updatedAt field on save
playlistSchema.pre("save", function (next) {
  this.updatedAt = Date.now()
  next()
})

const Playlist = mongoose.model("Playlist", playlistSchema)

export default Playlist
[V0_FILE]javascript:file="server/routes/playlists.js" isMerged="true"
import express from "express"
import Playlist from "../models/Playlist.js"
import Video from "../models/Video.js"
import { authenticateToken } from "../middleware/auth.js"

const router = express.Router()

// Get all public playlists
router.get("/", async (req, res) => {
  try {
    const { limit = 20, page = 1 } = req.query

const skip = (Number.parseInt(page) - 1) * Number.parseInt(limit)

const playlists = await Playlist.find({ privacy: "public" })
      .populate("user", "name avatar")
      .sort({ createdAt: -1 })
      .skip(skip)
      .limit(Number.parseInt(limit))

// Get the first video thumbnail for each playlist if no thumbnail is set
    for (const playlist of playlists) {
      if (!playlist.thumbnail && playlist.videos.length > 0) {
        const firstVideo = await Video.findById(playlist.videos[0])
        if (firstVideo) {
          playlist.thumbnail = firstVideo.thumbnail
        }
      }
    }

const total = await Playlist.countDocuments({ privacy: "public" })

res.json({
      playlists,
      pagination: {
        total,
        page: Number.parseInt(page),
        pages: Math.ceil(total / Number.parseInt(limit)),
      },
    })
  } catch (error) {
    console.error("Error fetching playlists:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Get user's playlists
router.get("/me", authenticateToken, async (req, res) => {
  try {
    const playlists = await Playlist.find({ user: req.user.id }).sort({ createdAt: -1 })

res.json(playlists)
  } catch (error) {
    console.error("Error fetching user playlists:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Get a single playlist by ID
router.get("/:id", async (req, res) => {
  try {
    const playlist = await Playlist.findById(req.params.id)
      .populate("user", "name avatar")
      .populate({
        path: "videos",
        populate: {
          path: "user",
          select: "name avatar",
        },
      })

if (!playlist) {
      return res.status(404).json({ message: "Playlist not found" })
    }

// Check if the playlist is private and the user is not the owner
    if (playlist.privacy === "private") {
      // If no auth token or user is not the owner
      if (!req.user || playlist.user._id.toString() !== req.user.id) {
        return res.status(403).json({ message: "This playlist is private" })
      }
    }

res.json(playlist)
  } catch (error) {
    console.error("Error fetching playlist:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Create a new playlist
router.post("/", authenticateToken, async (req, res) => {
  try {
    const { title, description, privacy } = req.body

const playlist = new Playlist({
      title,
      description,
      privacy: privacy || "public",
      user: req.user.id,
      videos: [],
    })

await playlist.save()

res.status(201).json(playlist)
  } catch (error) {
    console.error("Error creating playlist:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Update a playlist
router.put("/:id", authenticateToken, async (req, res) => {
  try {
    const { title, description, privacy } = req.body

// Find the playlist and check ownership
    const playlist = await Playlist.findById(req.params.id)

if (!playlist) {
      return res.status(404).json({ message: "Playlist not found" })
    }

if (playlist.user.toString() !== req.user.id) {
      return res.status(403).json({ message: "Not authorized to update this playlist" })
    }

// Update the playlist
    if (title) playlist.title = title
    if (description !== undefined) playlist.description = description
    if (privacy) playlist.privacy = privacy

await playlist.save()

res.json(playlist)
  } catch (error) {
    console.error("Error updating playlist:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Delete a playlist
router.delete("/:id", authenticateToken, async (req, res) => {
  try {
    // Find the playlist and check ownership
    const playlist = await Playlist.findById(req.params.id)

if (!playlist) {
      return res.status(404).json({ message: "Playlist not found" })
    }

if (playlist.user.toString() !== req.user.id) {
      return res.status(403).json({ message: "Not authorized to delete this playlist" })
    }

await Playlist.findByIdAndDelete(req.params.id)

res.json({ message: "Playlist deleted successfully" })
  } catch (error) {
    console.error("Error deleting playlist:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Add a video to a playlist
router.post("/:id/videos/:videoId", authenticateToken, async (req, res) => {
  try {
    // Find the playlist and check ownership
    const playlist = await Playlist.findById(req.params.id)

if (!playlist) {
      return res.status(404).json({ message: "Playlist not found" })
    }

if (playlist.user.toString() !== req.user.id) {
      return res.status(403).json({ message: "Not authorized to update this playlist" })
    }

// Check if video exists
    const video = await Video.findById(req.params.videoId)
    if (!video) {
      return res.status(404).json({ message: "Video not found" })
    }

// Check if video is already in the playlist
    if (playlist.videos.includes(req.params.videoId)) {
      return res.status(400).json({ message: "Video already in playlist" })
    }

// Add video to playlist
    playlist.videos.push(req.params.videoId)
    await playlist.save()

// If this is the first video and no thumbnail is set, use this video's thumbnail
    if (playlist.videos.length === 1 && !playlist.thumbnail) {
      playlist.thumbnail = video.thumbnail
      await playlist.save()
    }

res.json(playlist)
  } catch (error) {
    console.error("Error adding video to playlist:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Remove a video from a playlist
router.delete("/:id/videos/:videoId", authenticateToken, async (req, res) => {
  try {
    // Find the playlist and check ownership
    const playlist = await Playlist.findById(req.params.id)

if (!playlist) {
      return res.status(404).json({ message: "Playlist not found" })
    }

if (playlist.user.toString() !== req.user.id) {
      return res.status(403).json({ message: "Not authorized to update this playlist" })
    }

// Remove video from playlist
    playlist.videos = playlist.videos.filter((videoId) => videoId.toString() !== req.params.videoId)
    await playlist.save()

// Update thumbnail if needed
    if (playlist.videos.length > 0 && !playlist.thumbnail) {
      const firstVideo = await Video.findById(playlist.videos[0])
      if (firstVideo) {
        playlist.thumbnail = firstVideo.thumbnail
        await playlist.save()
      }
    }

res.json(playlist)
  } catch (error) {
    console.error("Error removing video from playlist:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Reorder videos in a playlist
router.put("/:id/reorder", authenticateToken, async (req, res) => {
  try {
    const { videoIds } = req.body

if (!Array.isArray(videoIds)) {
      return res.status(400).json({ message: "videoIds must be an array" })
    }

// Find the playlist and check ownership
    const playlist = await Playlist.findById(req.params.id)

if (!playlist) {
      return res.status(404).json({ message: "Playlist not found" })
    }

if (playlist.user.toString() !== req.user.id) {
      return res.status(403).json({ message: "Not authorized to update this playlist" })
    }

// Verify all videos in the new order exist in the current playlist
    const currentVideoIds = playlist.videos.map((id) => id.toString())
    const allVideosExist = videoIds.every((id) => currentVideoIds.includes(id))

if (!allVideosExist || videoIds.length !== playlist.videos.length) {
      return res.status(400).json({ message: "Invalid video IDs provided" })
    }

// Update the order
    playlist.videos = videoIds
    await playlist.save()

res.json(playlist)
  } catch (error) {
    console.error("Error reordering playlist:", error)
    res.status(500).json({ message: "Server error" })
  }
})

export default router
[V0_FILE]typescriptreact:file="app/playlists/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Plus } from "lucide-react"

import { SiteHeader } from "@/components/site-header"
import { Button } from "@/components/ui/button"
import { PlaylistGrid } from "@/components/playlist-grid"
import { useAuth } from "@/contexts/auth-context"
import { CreatePlaylistDialog } from "@/components/create-playlist-dialog"

export default function PlaylistsPage() {
  const router = useRouter()
  const { isAuthenticated, isLoading: authLoading } = useAuth()
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)

useEffect(() => {
    // Redirect if not authenticated
    if (!isAuthenticated && !authLoading) {
      router.push("/login")
    }
  }, [isAuthenticated, authLoading, router])

if (!isAuthenticated) {
    return null // Will redirect in useEffect
  }

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />
      <main className="flex-1 container py-6">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold">Your Playlists</h1>
          <Button onClick={() => setIsCreateDialogOpen(true)}>
            <Plus className="mr-2 h-4 w-4" />
            Create Playlist
          </Button>
        </div>

<CreatePlaylistDialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen} />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/playlist-grid.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { PlaylistCard } from "@/components/playlist-card"
import { getUserPlaylists, getPlaylists } from "@/lib/api"

interface PlaylistGridProps {
  userOnly?: boolean
  limit?: number
  channelId?: string
}

export function PlaylistGrid({ userOnly = false, limit, channelId }: PlaylistGridProps) {
  const [playlists, setPlaylists] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Fetch playlists
    const fetchPlaylists = async () => {
      try {
        let data

if (userOnly) {
          data = await getUserPlaylists()
        } else {
          const params: any = {}
          if (limit) params.limit = limit
          if (channelId) params.channelId = channelId

const response = await getPlaylists(params)
          data = response.playlists
        }

setPlaylists(data)
        setIsLoading(false)
      } catch (error) {
        console.error("Error fetching playlists:", error)
        setIsLoading(false)
      }
    }

fetchPlaylists()
  }, [userOnly, limit, channelId])

if (isLoading) {
    return (
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {Array(4)
          .fill(0)
          .map((_, index) => (
            <div key={index} className="space-y-3">
              <div className="aspect-video bg-muted rounded-lg animate-pulse" />
              <div className="space-y-2">
                <div className="h-4 bg-muted rounded animate-pulse w-5/6" />
                <div className="h-4 bg-muted rounded animate-pulse w-4/6" />
              </div>
            </div>
          ))}
      </div>
    )
  }

if (playlists.length === 0) {
    return (
      <div className="text-center py-12">
        <h3 className="text-lg font-medium mb-2">No playlists found</h3>
        {userOnly && <p className="text-muted-foreground">Create your first playlist to get started</p>}
      </div>
    )
  }

return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      {playlists.map((playlist) => (
        <PlaylistCard key={playlist._id} playlist={playlist} />
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/playlist-card.tsx" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { formatDistanceToNow } from "date-fns"
import { ListMusic } from "lucide-react"

import { Card, CardContent } from "@/components/ui/card"

interface Playlist {
  _id: string
  title: string
  thumbnail?: string
  videos: any[]
  user: {
    _id: string
    name: string
    avatar?: string
  }
  createdAt: string
}

interface PlaylistCardProps {
  playlist: Playlist
}

export function PlaylistCard({ playlist }: PlaylistCardProps) {
  return (
    <Card className="border-0 shadow-none">
      <Link href={`/playlist/${playlist._id}`}>
        <div className="relative aspect-video overflow-hidden rounded-lg bg-muted">
          {playlist.thumbnail ? (
            <Image
              src={playlist.thumbnail || "/placeholder.svg"}
              alt={playlist.title}
              fill
              className="object-cover transition-transform hover:scale-105"
            />
          ) : (
            <div className="flex h-full w-full items-center justify-center bg-muted">
              <ListMusic className="h-12 w-12 text-muted-foreground" />
            </div>
          )}
          <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-1 rounded">
            {playlist.videos.length} {playlist.videos.length === 1 ? "video" : "videos"}
          </div>
        </div>
      </Link>
      <CardContent className="p-3">
        <Link href={`/playlist/${playlist._id}`}>
          <h3 className="font-semibold line-clamp-2">{playlist.title}</h3>
        </Link>
        <Link href={`/channel/${playlist.user._id}`}>
          <p className="text-sm text-muted-foreground">{playlist.user.name}</p>
        </Link>
        <p className="text-xs text-muted-foreground">
          Updated {formatDistanceToNow(new Date(playlist.createdAt), { addSuffix: true })}
        </p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/create-playlist-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { createPlaylist } from "@/lib/api"

interface CreatePlaylistDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function CreatePlaylistDialog({ open, onOpenChange }: CreatePlaylistDialogProps) {
  const router = useRouter()
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(false)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    privacy: "public",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handlePrivacyChange = (value: string) => {
    setFormData((prev) => ({ ...prev, privacy: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!formData.title.trim()) {
      toast({
        variant: "destructive",
        title: "Title required",
        description: "Please enter a title for your playlist",
      })
      return
    }

setIsLoading(true)

try {
      const playlist = await createPlaylist(formData)

toast({
        title: "Playlist created",
        description: "Your playlist has been created successfully",
      })

onOpenChange(false)
      router.push(`/playlist/${playlist._id}`)
    } catch (error) {
      console.error("Error creating playlist:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to create playlist. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <form onSubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle>Create new playlist</DialogTitle>
            <DialogDescription>Create a new playlist to organize your favorite videos.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="title">Title</Label>
              <Input
                id="title"
                name="title"
                placeholder="My Awesome Playlist"
                value={formData.title}
                onChange={handleChange}
                required
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="description">Description (optional)</Label>
              <Textarea
                id="description"
                name="description"
                placeholder="A collection of my favorite videos"
                value={formData.description}
                onChange={handleChange}
                rows={3}
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="privacy">Privacy</Label>
              <Select value={formData.privacy} onValueChange={handlePrivacyChange}>
                <SelectTrigger id="privacy">
                  <SelectValue placeholder="Select privacy setting" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="public">Public</SelectItem>
                  <SelectItem value="unlisted">Unlisted</SelectItem>
                  <SelectItem value="private">Private</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={isLoading}>
              {isLoading ? "Creating..." : "Create Playlist"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/playlist/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { formatDistanceToNow } from "date-fns"
import { ListMusic, MoreVertical, Play, Pencil, Trash2 } from "lucide-react"

import { SiteHeader } from "@/components/site-header"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/contexts/auth-context"
import { getPlaylistById, deletePlaylist } from "@/lib/api"
import { EditPlaylistDialog } from "@/components/edit-playlist-dialog"
import { PlaylistVideoList } from "@/components/playlist-video-list"

export default function PlaylistPage() {
  const params = useParams()
  const router = useRouter()
  const { toast } = useToast()
  const { user, isAuthenticated } = useAuth()
  const playlistId = params.id as string

const [playlist, setPlaylist] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [isOwner, setIsOwner] = useState(false)

useEffect(() => {
    const fetchPlaylist = async () => {
      try {
        const data = await getPlaylistById(playlistId)
        setPlaylist(data)

// Check if the current user is the owner of the playlist
        if (isAuthenticated && user && data.user._id === user.id) {
          setIsOwner(true)
        }

setIsLoading(false)
      } catch (error) {
        console.error("Error fetching playlist:", error)
        toast({
          variant: "destructive",
          title: "Error",
          description: "Failed to load playlist. It may be private or no longer exist.",
        })
        router.push("/")
      }
    }

fetchPlaylist()
  }, [playlistId, isAuthenticated, user, router, toast])

const handleDeletePlaylist = async () => {
    if (!confirm("Are you sure you want to delete this playlist?")) return

try {
      await deletePlaylist(playlistId)
      toast({
        title: "Playlist deleted",
        description: "Your playlist has been deleted successfully",
      })
      router.push("/playlists")
    } catch (error) {
      console.error("Error deleting playlist:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to delete playlist. Please try again.",
      })
    }
  }

const handlePlaylistUpdated = (updatedPlaylist: any) => {
    setPlaylist((prev: any) => ({ ...prev, ...updatedPlaylist }))
  }

if (isLoading) {
    return (
      <div className="flex min-h-screen flex-col">
        <SiteHeader />
        <main className="flex-1 container py-6">
          <div className="flex items-start gap-4 mb-6">
            <div className="w-48 aspect-video bg-muted rounded-lg animate-pulse" />
            <div className="flex-1 space-y-2">
              <div className="h-6 bg-muted rounded animate-pulse w-1/3" />
              <div className="h-4 bg-muted rounded animate-pulse w-1/4" />
              <div className="h-4 bg-muted rounded animate-pulse w-1/2" />
            </div>
          </div>
          <Separator className="my-6" />
          <div className="space-y-4">
            {Array(5)
              .fill(0)
              .map((_, index) => (
                <div key={index} className="flex gap-4">
                  <div className="w-40 aspect-video bg-muted rounded-lg animate-pulse" />
                  <div className="flex-1 space-y-2">
                    <div className="h-4 bg-muted rounded animate-pulse w-5/6" />
                    <div className="h-4 bg-muted rounded animate-pulse w-4/6" />
                  </div>
                </div>
              ))}
          </div>
        </main>
      </div>
    )
  }

if (!playlist) return null

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />
      <main className="flex-1 container py-6">
        <div className="flex flex-col md:flex-row gap-6 mb-6">
          <div className="w-full md:w-48 aspect-video rounded-lg overflow-hidden bg-muted flex items-center justify-center">
            {playlist.thumbnail ? (
              <img
                src={playlist.thumbnail || "/placeholder.svg"}
                alt={playlist.title}
                className="w-full h-full object-cover"
              />
            ) : (
              <ListMusic className="h-12 w-12 text-muted-foreground" />
            )}
          </div>

<div className="flex-1">
            <div className="flex justify-between items-start">
              <div>
                <h1 className="text-3xl font-bold">{playlist.title}</h1>
                <div className="flex items-center gap-2 mt-2">
                  <Avatar className="h-6 w-6">
                    <AvatarImage src={playlist.user.avatar || "/placeholder.svg"} alt={playlist.user.name} />
                    <AvatarFallback>{playlist.user.name[0]}</AvatarFallback>
                  </Avatar>
                  <span className="text-sm">{playlist.user.name}</span>
                </div>
                <p className="text-sm text-muted-foreground mt-2">
                  {playlist.videos.length} {playlist.videos.length === 1 ? "video" : "videos"} • Updated{" "}
                  {formatDistanceToNow(new Date(playlist.updatedAt || playlist.createdAt), { addSuffix: true })}
                </p>
                {playlist.description && <p className="mt-4">{playlist.description}</p>}
              </div>

<div className="flex items-center gap-2">
                {playlist.videos.length > 0 && (
                  <Button onClick={() => router.push(`/watch/${playlist.videos[0]._id}?playlist=${playlist._id}`)}>
                    <Play className="mr-2 h-4 w-4" />
                    Play All
                  </Button>
                )}

{isOwner && (
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreVertical className="h-4 w-4" />
                        <span className="sr-only">More options</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem onClick={() => setIsEditDialogOpen(true)}>
                        <Pencil className="mr-2 h-4 w-4" />
                        Edit
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={handleDeletePlaylist} className="text-destructive">
                        <Trash2 className="mr-2 h-4 w-4" />
                        Delete
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                )}
              </div>
            </div>
          </div>
        </div>

{isOwner && (
          <EditPlaylistDialog
            open={isEditDialogOpen}
            onOpenChange={setIsEditDialogOpen}
            playlist={playlist}
            onPlaylistUpdated={handlePlaylistUpdated}
          />
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/edit-playlist-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"

interface EditPlaylistDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  playlist: any
  onPlaylistUpdated: (playlist: any) => void
}

export function EditPlaylistDialog({ open, onOpenChange, playlist, onPlaylistUpdated }: EditPlaylistDialogProps) {
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(false)
  const [formData, setFormData] = useState({
    title: playlist?.title || "",
    description: playlist?.description || "",
    privacy: playlist?.privacy || "public",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handlePrivacyChange = (value: string) => {
    setFormData((prev) => ({ ...prev, privacy: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!formData.title.trim()) {
      toast({
        variant: "destructive",
        title: "Title required",
        description: "Please enter a title for your playlist",
      })
      return
    }

setIsLoading(true)

try {
      const updatedPlaylist = await updatePlaylist(playlist._id, formData)

toast({
        title: "Playlist updated",
        description: "Your playlist has been updated successfully",
      })

onPlaylistUpdated(updatedPlaylist)
      onOpenChange(false)
    } catch (error) {
      console.error("Error updating playlist:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to update playlist. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <form onSubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle>Edit playlist</DialogTitle>
            <DialogDescription>Make changes to your playlist details.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="title">Title</Label>
              <Input id="title" name="title" value={formData.title} onChange={handleChange} required />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="description">Description (optional)</Label>
              <Textarea
                id="description"
                name="description"
                value={formData.description}
                onChange={handleChange}
                rows={3}
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="privacy">Privacy</Label>
              <Select value={formData.privacy} onValueChange={handlePrivacyChange}>
                <SelectTrigger id="privacy">
                  <SelectValue placeholder="Select privacy setting" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="public">Public</SelectItem>
                  <SelectItem value="unlisted">Unlisted</SelectItem>
                  <SelectItem value="private">Private</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={isLoading}>
              {isLoading ? "Saving..." : "Save Changes"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/playlist-video-list.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { formatDistanceToNow } from "date-fns"
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd"
import { GripVertical, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { useToast } from "@/components/ui/use-toast"
import { removeVideoFromPlaylist, reorderPlaylistVideos } from "@/lib/api"

interface PlaylistVideoListProps {
  playlist: any
  isOwner: boolean
  onPlaylistUpdated: (playlist: any) => void
}

export function PlaylistVideoList({ playlist, isOwner, onPlaylistUpdated }: PlaylistVideoListProps) {
  const router = useRouter()
  const { toast } = useToast()
  const [videos, setVideos] = useState(playlist.videos || [])
  const [isReordering, setIsReordering] = useState(false)

const handleRemoveVideo = async (videoId: string) => {
    try {
      await removeVideoFromPlaylist(playlist._id, videoId)

// Update local state
      const updatedVideos = videos.filter((video: any) => video._id !== videoId)
      setVideos(updatedVideos)

// Update parent component
      onPlaylistUpdated({ videos: updatedVideos })

toast({
        title: "Video removed",
        description: "Video has been removed from the playlist",
      })
    } catch (error) {
      console.error("Error removing video:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to remove video. Please try again.",
      })
    }
  }

const handleDragEnd = async (result: any) => {
    // Dropped outside the list
    if (!result.destination) return

// Reorder the videos array
    const items = Array.from(videos)
    const [reorderedItem] = items.splice(result.source.index, 1)
    items.splice(result.destination.index, 0, reorderedItem)

// Update local state
    setVideos(items)

// Save the new order to the server
    try {
      await reorderPlaylistVideos(
        playlist._id,
        items.map((video: any) => video._id),
      )

// Update parent component
      onPlaylistUpdated({ videos: items })
    } catch (error) {
      console.error("Error reordering videos:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to save the new order. Please try again.",
      })
    }
  }

if (videos.length === 0) {
    return (
      <div className="text-center py-12">
        <h3 className="text-lg font-medium mb-2">This playlist has no videos</h3>
        {isOwner && (
          <p className="text-muted-foreground">Browse videos and click "Save to playlist" to add videos here</p>
        )}
      </div>
    )
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">Videos</h2>
        {isOwner && videos.length > 1 && (
          <Button variant="outline" onClick={() => setIsReordering(!isReordering)}>
            {isReordering ? "Done" : "Reorder"}
          </Button>
        )}
      </div>

<DragDropContext onDragEnd={handleDragEnd}>
        <Droppable droppableId="playlist-videos" isDropDisabled={!isReordering}>
          {(provided) => (
            <div {...provided.droppableProps} ref={provided.innerRef} className="space-y-4">
              {videos.map((video: any, index: number) => (
                <Draggable key={video._id} draggableId={video._id} index={index} isDragDisabled={!isReordering}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      className={`flex items-center gap-4 rounded-lg border p-2 ${isReordering ? "bg-muted/50" : ""}`}
                    >
                      {isReordering && (
                        <div {...provided.dragHandleProps} className="px-2">
                          <GripVertical className="h-5 w-5 text-muted-foreground" />
                        </div>
                      )}

<div className="flex-none text-sm text-muted-foreground w-6 text-center">{index + 1}</div>

<div
                        className="flex flex-1 items-center gap-4 cursor-pointer"
                        onClick={() => router.push(`/watch/${video._id}?playlist=${playlist._id}&index=${index}`)}
                      >
                        <div className="relative w-40 aspect-video rounded-lg overflow-hidden bg-muted">
                          <Image
                            src={video.thumbnail || "/placeholder.svg"}
                            alt={video.title}
                            fill
                            className="object-cover"
                          />
                          <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-1 rounded">
                            {video.duration}
                          </div>
                        </div>

<div className="flex-1 min-w-0">
                          <h3 className="font-medium line-clamp-2">{video.title}</h3>
                          <p className="text-sm text-muted-foreground">{video.user.name}</p>
                          <p className="text-xs text-muted-foreground">
                            {new Intl.NumberFormat("en-US", {
                              notation: "compact",
                              compactDisplay: "short",
                            }).format(video.views)}{" "}
                            views • {formatDistanceToNow(new Date(video.createdAt), { addSuffix: true })}
                          </p>
                        </div>
                      </div>

{isOwner && (
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleRemoveVideo(video._id)}
                          className="flex-none"
                        >
                          <X className="h-4 w-4" />
                          <span className="sr-only">Remove</span>
                        </Button>
                      )}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/save-to-playlist-dialog.tsx" isFixed="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Plus, Check } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { useToast } from "@/components/ui/use-toast"
import { getUserPlaylists, addVideoToPlaylist, removeVideoFromPlaylist, createPlaylist } from "@/lib/api"
import { Input } from "@/components/ui/input"

interface SaveToPlaylistDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  videoId: string
}

export function SaveToPlaylistDialog({ open, onOpenChange, videoId }: SaveToPlaylistDialogProps) {
  const { toast } = useToast()
  const [playlists, setPlaylists] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isCreatingNew, setIsCreatingNew] = useState(false)
  const [newPlaylistTitle, setNewPlaylistTitle] = useState("")
  const [isSaving, setIsSaving] = useState(false)

useEffect(() => {
    if (open) {
      fetchPlaylists()
    }
  }, [open])

const fetchPlaylists = async () => {
    setIsLoading(true)
    try {
      const data = await getUserPlaylists()

// Check which playlists already contain this video
      const playlistsWithVideoStatus = data.map((playlist: any) => ({
        ...playlist,
        hasVideo: playlist.videos.some((video: any) =>
          typeof video === "string" ? video === videoId : video._id === videoId,
        ),
      }))

setPlaylists(playlistsWithVideoStatus)
    } catch (error) {
      console.error("Error fetching playlists:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to load your playlists",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleTogglePlaylist = async (playlistId: string, hasVideo: boolean) => {
    try {
      if (hasVideo) {
        await removeVideoFromPlaylist(playlistId, videoId)
      } else {
        await addVideoToPlaylist(playlistId, videoId)
      }

// Update local state
      setPlaylists(
        playlists.map((playlist) => (playlist._id === playlistId ? { ...playlist, hasVideo: !hasVideo } : playlist)),
      )

toast({
        title: hasVideo ? "Removed from playlist" : "Added to playlist",
        description: hasVideo ? "Video has been removed from the playlist" : "Video has been added to the playlist",
      })
    } catch (error) {
      console.error("Error updating playlist:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to update playlist",
      })
    }
  }

const handleCreatePlaylist = async () => {
    if (!newPlaylistTitle.trim()) {
      toast({
        variant: "destructive",
        title: "Title required",
        description: "Please enter a title for your playlist",
      })
      return
    }

setIsSaving(true)

try {
      // Create new playlist
      const newPlaylist = await createPlaylist({
        title: newPlaylistTitle,
        privacy: "private",
      })

// Add video to the new playlist
      await addVideoToPlaylist(newPlaylist._id, videoId)

// Update local state
      setPlaylists([...playlists, { ...newPlaylist, hasVideo: true }])

// Reset form
      setNewPlaylistTitle("")
      setIsCreatingNew(false)

toast({
        title: "Playlist created",
        description: "Video added to your new playlist",
      })
    } catch (error) {
      console.error("Error creating playlist:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to create playlist",
      })
    } finally {
      setIsSaving(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Save to playlist</DialogTitle>
          <DialogDescription>Add this video to one of your playlists or create a new one.</DialogDescription>
        </DialogHeader>

<div className="max-h-[300px] overflow-y-auto py-4">
          {isLoading ? (
            <div className="space-y-2">
              {Array(3)
                .fill(0)
                .map((_, index) => (
                  <div key={index} className="h-10 bg-muted rounded animate-pulse" />
                ))}
            </div>
          ) : (
            <div className="space-y-2">
              {playlists.map((playlist) => (
                <div key={playlist._id} className="flex items-center justify-between p-2 rounded-md hover:bg-muted">
                  <span className="font-medium">{playlist.title}</span>
                  <Button
                    variant={playlist.hasVideo ? "default" : "outline"}
                    size="sm"
                    onClick={() => handleTogglePlaylist(playlist._id, playlist.hasVideo)}
                  >
                    {playlist.hasVideo ? (
                      <>
                        <Check className="mr-1 h-4 w-4" />
                        Added
                      </>
                    ) : (
                      "Add"
                    )}
                  </Button>
                </div>
              ))}

{isCreatingNew ? (
                <div className="border rounded-md p-3 space-y-2">
                  <Input
                    placeholder="Enter playlist title"
                    value={newPlaylistTitle}
                    onChange={(e) => setNewPlaylistTitle(e.target.value)}
                    autoFocus
                  />
                  <div className="flex justify-end gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        setIsCreatingNew(false)
                        setNewPlaylistTitle("")
                      }}
                    >
                      Cancel
                    </Button>
                    <Button size="sm" onClick={handleCreatePlaylist} disabled={isSaving || !newPlaylistTitle.trim()}>
                      {isSaving ? "Creating..." : "Create"}
                    </Button>
                  </div>
                </div>
              ) : (
                <Button variant="outline" className="w-full" onClick={() => setIsCreatingNew(true)}>
                  <Plus className="mr-2 h-4 w-4" />
                  Create new playlist
                </Button>
              )}
            </div>
          )}
        </div>

<DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Done
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/watch/[id]/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]javascript:file="server/services/recommendationService.js" isMerged="true"
import Video from "../models/Video.js"
import Subscription from "../models/Subscription.js"

// Get recommended videos for a user
export const getRecommendedVideos = async (userId, limit = 20) => {
  try {
    // If user is logged in, get personalized recommendations
    if (userId) {
      // Get user's subscriptions
      const subscriptions = await Subscription.find({ subscriber: userId }).select("channel")
      const channelIds = subscriptions.map((sub) => sub.channel)

// Get videos from subscribed channels
      if (channelIds.length > 0) {
        const subscriptionVideos = await Video.find({
          user: { $in: channelIds },
          privacy: "public",
        })
          .populate("user", "name avatar")
          .sort({ createdAt: -1 })
          .limit(Math.floor(limit / 2))

// Get trending videos excluding the ones from subscriptions
        const trendingVideos = await Video.find({
          user: { $nin: channelIds },
          privacy: "public",
        })
          .populate("user", "name avatar")
          .sort({ views: -1 })
          .limit(limit - subscriptionVideos.length)

// Combine and shuffle the results
        const combinedVideos = [...subscriptionVideos, ...trendingVideos]
        return shuffleArray(combinedVideos)
      }
    }

// Default: return trending videos
    return await Video.find({ privacy: "public" }).populate("user", "name avatar").sort({ views: -1 }).limit(limit)
  } catch (error) {
    console.error("Error getting recommended videos:", error)
    throw error
  }
}

// Get related videos for a specific video
export const getRelatedVideos = async (videoId, limit = 10) => {
  try {
    const video = await Video.findById(videoId)

if (!video) {
      throw new Error("Video not found")
    }

// Get videos with similar tags
    let relatedVideos = []

if (video.tags && video.tags.length > 0) {
      relatedVideos = await Video.find({
        _id: { $ne: videoId },
        tags: { $in: video.tags },
        privacy: "public",
      })
        .populate("user", "name avatar")
        .limit(Math.floor(limit / 2))
    }

// If not enough related videos by tags, get videos from the same channel
    if (relatedVideos.length < limit / 2) {
      const channelVideos = await Video.find({
        _id: { $ne: videoId },
        user: video.user,
        privacy: "public",
      })
        .populate("user", "name avatar")
        .limit(Math.floor(limit / 2))

// Add channel videos that aren't already in relatedVideos
      const existingIds = new Set(relatedVideos.map((v) => v._id.toString()))
      for (const v of channelVideos) {
        if (!existingIds.has(v._id.toString())) {
          relatedVideos.push(v)
          existingIds.add(v._id.toString())
        }

if (relatedVideos.length >= limit) break
      }
    }

// If still not enough, get trending videos
    if (relatedVideos.length < limit) {
      const existingIds = new Set(relatedVideos.map((v) => v._id.toString()))
      existingIds.add(videoId) // Exclude current video

const trendingVideos = await Video.find({
        _id: { $nin: Array.from(existingIds) },
        privacy: "public",
      })
        .populate("user", "name avatar")
        .sort({ views: -1 })
        .limit(limit - relatedVideos.length)

relatedVideos = [...relatedVideos, ...trendingVideos]
    }

return relatedVideos
  } catch (error) {
    console.error("Error getting related videos:", error)
    throw error
  }
}

// Helper function to shuffle an array
function shuffleArray(array) {
  const newArray = [...array]
  for (let i = newArray.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[newArray[i], newArray[j]] = [newArray[j], newArray[i]]
  }
  return newArray
}

export default {
  getRecommendedVideos,
  getRelatedVideos,
}
[V0_FILE]javascript:file="server/routes/recommendations.js" isMerged="true"
import express from "express"
import { getRecommendedVideos, getRelatedVideos } from "../services/recommendationService.js"

const router = express.Router()

// Get recommended videos (personalized if authenticated)
router.get("/", async (req, res) => {
  try {
    const { limit = 20 } = req.query
    const userId = req.user?.id || null

const videos = await getRecommendedVideos(userId, Number(limit))
    res.json(videos)
  } catch (error) {
    console.error("Error fetching recommendations:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Get related videos for a specific video
router.get("/related/:videoId", async (req, res) => {
  try {
    const { limit = 10 } = req.query
    const videos = await getRelatedVideos(req.params.videoId, Number(limit))
    res.json(videos)
  } catch (error) {
    console.error("Error fetching related videos:", error)
    res.status(500).json({ message: "Server error" })
  }
})

export default router
[V0_FILE]typescriptreact:file="components/related-videos.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { getRelatedVideos } from "@/lib/api"

interface RelatedVideosProps {
  currentVideoId: string
}

export function RelatedVideos({ currentVideoId }: RelatedVideosProps) {
  const [videos, setVideos] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Fetch related videos
    const fetchRelatedVideos = async () => {
      try {
        const data = await getRelatedVideos(currentVideoId)
        setVideos(data)
        setIsLoading(false)
      } catch (error) {
        console.error("Error fetching related videos:", error)
        setIsLoading(false)
      }
    }

fetchRelatedVideos()
  }, [currentVideoId])

if (isLoading) {
    return (
      <div className="space-y-4">
        {Array(5)
          .fill(0)
          .map((_, index) => (
            <div key={index} className="flex gap-2">
              <div className="w-40 aspect-video bg-muted rounded animate-pulse" />
              <div className="flex-1 space-y-2">
                <div className="h-4 bg-muted rounded animate-pulse w-5/6" />
                <div className="h-3 bg-muted rounded animate-pulse w-4/6" />
                <div className="h-3 bg-muted rounded animate-pulse w-3/6" />
              </div>
            </div>
          ))}
      </div>
    )
  }

return (
    <div className="space-y-4">
      {videos.map((video) => (
        <Link key={video._id} href={`/watch/${video._id}`} className="flex gap-2 group">
          <div className="relative w-40 aspect-video rounded-lg overflow-hidden">
            <Image
              src={video.thumbnail || "/placeholder.svg"}
              alt={video.title}
              fill
              className="object-cover transition-transform group-hover:scale-105"
            />
            <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-1 rounded">
              {video.duration}
            </div>
          </div>
          <div className="flex-1">
            <h3 className="font-medium line-clamp-2 group-

Let's update the main-nav component to include a link to playlists:

\
[V0_FILE]typescriptreact:file="components/main-nav.tsx" isMerged="true"
import type React from "react"
import Link from "next/link"
import { Play } from "lucide-react"

import { cn } from "@/lib/utils"

export function MainNav({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
  return (
    <div className="mr-4 flex">
      <Link href="/" className="flex items-center space-x-2">
        <Play className="h-6 w-6 text-primary" />
        <span className="font-bold inline-block">VideoHub</span>
      </Link>
      <nav className={cn("flex items-center space-x-4 lg:space-x-6 ml-6", className)} {...props}>
        <Link href="/" className="text-sm font-medium transition-colors hover:text-primary">
          Home
        </Link>
        <Link
          href="/trending"
          className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
        >
          Trending
        </Link>
        <Link
          href="/subscriptions"
          className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
        >
          Subscriptions
        </Link>
        <Link
          href="/playlists"
          className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
        >
          Playlists
        </Link>
        <Link
          href="/library"
          className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
        >
          Library
        </Link>
      </nav>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user-nav.tsx" isMerged="true"
"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useAuth } from "@/contexts/auth-context"
import { useRouter } from "next/navigation"
import { Upload, User } from "lucide-react"

export function UserNav() {
  const router = useRouter()
  const { user, isAuthenticated, logout } = useAuth()

if (!isAuthenticated) {
    return (
      <div className="flex items-center gap-2">
        <Button variant="ghost" onClick={() => router.push("/login")}>
          Sign in
        </Button>
        <Button onClick={() => router.push("/register")}>Sign up</Button>
      </div>
    )
  }

return (
    <div className="flex items-center gap-2">
      <Button variant="ghost" size="icon" onClick={() => router.push("/studio/upload")} className="relative">
        <Upload className="h-5 w-5" />
        <span className="sr-only">Upload video</span>
      </Button>

<DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" className="relative h-8 w-8 rounded-full">
            <Avatar className="h-8 w-8">
              <AvatarImage src={user?.avatar || "/placeholder.svg"} alt={user?.name || "User"} />
              <AvatarFallback>{user?.name?.[0] || "U"}</AvatarFallback>
            </Avatar>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56" align="end" forceMount>
          <DropdownMenuLabel className="font-normal">
            <div className="flex flex-col space-y-1">
              <p className="text-sm font-medium leading-none">{user?.name}</p>
              <p className="text-xs leading-none text-muted-foreground">{user?.email}</p>
            </div>
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem onClick={() => router.push("/profile")}>
              <User className="mr-2 h-4 w-4" />
              <span>Profile</span>
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => router.push("/studio")}>Creator Studio</DropdownMenuItem>
            <DropdownMenuItem onClick={() => router.push("/playlists")}>Your Playlists</DropdownMenuItem>
            <DropdownMenuItem onClick={() => router.push("/settings")}>Settings</DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem onClick={logout}>Log out</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/watch/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams, useSearchParams } from "next/navigation"
import { formatDistanceToNow } from "date-fns"
import { ThumbsUp, ThumbsDown, Share2, Flag, ListPlus } from "lucide-react"

import { SiteHeader } from "@/components/site-header"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"
import { VideoComments } from "@/components/video-comments"
import { RelatedVideos } from "@/components/related-videos"
import { VideoPlayer } from "@/components/video-player"
import { SaveToPlaylistDialog } from "@/components/save-to-playlist-dialog"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/contexts/auth-context"

// Mock video data
const mockVideo = {
  id: "1",
  title: "How to Build a Next.js App",
  description:
    "In this tutorial, we'll learn how to build a modern web application using Next.js, React, and Tailwind CSS. We'll cover routing, data fetching, and deployment to Vercel.",
  fileId: "sample-file-id", // This would be the Google Drive file ID in a real app
  views: 12500,
  likes: 1200,
  dislikes: 45,
  createdAt: "2023-05-15T10:30:00Z",
  channel: {
    id: "c1",
    name: "Tech Tutorials",
    avatar: "/placeholder.svg?height=40&width=40",
    subscribers: 25000,
  },
}

export default function WatchPage() {
  const params = useParams()
  const searchParams = useSearchParams()
  const videoId = params.id as string
  const playlistId = searchParams.get("playlist")
  const playlistIndex = searchParams.get("index")

const { toast } = useToast()
  const { isAuthenticated } = useAuth()
  const [video, setVideo] = useState(mockVideo)
  const [isLoading, setIsLoading] = useState(true)
  const [isSubscribed, setIsSubscribed] = useState(false)
  const [hasLiked, setHasLiked] = useState(false)
  const [hasDisliked, setHasDisliked] = useState(false)
  const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false)

useEffect(() => {
    // Simulate API call
    const fetchVideo = async () => {
      try {
        // In a real app, you would fetch from your API
        // const response = await fetch(`/api/videos/${videoId}`)
        // const data = await response.json()
        // setVideo(data)

// Using mock data for now
        setTimeout(() => {
          setVideo(mockVideo)
          setIsLoading(false)
        }, 1000)
      } catch (error) {
        console.error("Error fetching video:", error)
        setIsLoading(false)
      }
    }

fetchVideo()
  }, [videoId])

const handleLike = () => {
    if (!isAuthenticated) {
      toast({
        title: "Authentication required",
        description: "Please sign in to like videos",
      })
      return
    }

if (hasLiked) {
      setHasLiked(false)
    } else {
      setHasLiked(true)
      setHasDisliked(false)
    }
  }

const handleDislike = () => {
    if (!isAuthenticated) {
      toast({
        title: "Authentication required",
        description: "Please sign in to dislike videos",
      })
      return
    }

if (hasDisliked) {
      setHasDisliked(false)
    } else {
      setHasDisliked(true)
      setHasLiked(false)
    }
  }

setIsSubscribed(!isSubscribed)
  }

const handleShare = () => {
    navigator.clipboard.writeText(window.location.href)
    toast({
      title: "Link copied",
      description: "Video link copied to clipboard",
    })
  }

const handleSaveToPlaylist = () => {
    if (!isAuthenticated) {
      toast({
        title: "Authentication required",
        description: "Please sign in to save videos to playlists",
      })
      return
    }

setIsSaveDialogOpen(true)
  }

const formattedViews = new Intl.NumberFormat("en-US", {
    notation: "compact",
    compactDisplay: "short",
  }).format(video.views)

const formattedSubscribers = new Intl.NumberFormat("en-US", {
    notation: "compact",
    compactDisplay: "short",
  }).format(video.channel.subscribers)

const timeAgo = formatDistanceToNow(new Date(video.createdAt), { addSuffix: true })

if (isLoading) {
    return (
      <div className="flex min-h-screen flex-col">
        <SiteHeader />
        <main className="flex-1 container py-6">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2 space-y-4">
              <div className="aspect-video bg-muted rounded-lg animate-pulse" />
              <div className="h-8 bg-muted rounded animate-pulse w-3/4" />
              <div className="h-4 bg-muted rounded animate-pulse w-1/2" />
            </div>
            <div className="space-y-4">
              {Array(3)
                .fill(0)
                .map((_, index) => (
                  <div key={index} className="flex gap-2">
                    <div className="w-40 aspect-video bg-muted rounded animate-pulse" />
                    <div className="flex-1 space-y-2">
                      <div className="h-4 bg-muted rounded animate-pulse w-5/6" />
                      <div className="h-3 bg-muted rounded animate-pulse w-4/6" />
                    </div>
                  </div>
                ))}
            </div>
          </div>
        </main>
      </div>
    )
  }

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />
      <main className="flex-1 container py-6">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 space-y-6">
            {/* Video Player */}
            <VideoPlayer videoId={videoId} fileId={video.fileId} />

{/* Video Info */}
            <div>
              <h1 className="text-2xl font-bold">{video.title}</h1>
              <div className="flex flex-col sm:flex-row sm:items-center justify-between mt-2 gap-4">
                <div className="text-muted-foreground">
                  {formattedViews} views • {timeAgo}
                </div>
                <div className="flex items-center gap-2 flex-wrap">
                  <Button
                    variant={hasLiked ? "default" : "outline"}
                    size="sm"
                    onClick={handleLike}
                    className="flex items-center gap-1"
                  >
                    <ThumbsUp className="h-4 w-4" />
                    <span>{video.likes}</span>
                  </Button>
                  <Button
                    variant={hasDisliked ? "default" : "outline"}
                    size="sm"
                    onClick={handleDislike}
                    className="flex items-center gap-1"
                  >
                    <ThumbsDown className="h-4 w-4" />
                    <span>{video.dislikes}</span>
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    className="flex items-center gap-1"
                    onClick={handleSaveToPlaylist}
                  >
                    <ListPlus className="h-4 w-4" />
                    <span>Save</span>
                  </Button>
                  <Button variant="outline" size="sm" className="flex items-center gap-1" onClick={handleShare}>
                    <Share2 className="h-4 w-4" />
                    <span>Share</span>
                  </Button>
                  <Button variant="outline" size="sm" className="flex items-center gap-1">
                    <Flag className="h-4 w-4" />
                    <span>Report</span>
                  </Button>
                </div>
              </div>
            </div>

{/* Channel Info */}
            <div className="flex items-start justify-between">
              <div className="flex items-start gap-4">
                <Avatar className="h-12 w-12">
                  <AvatarImage src={video.channel.avatar || "/placeholder.svg"} alt={video.channel.name} />
                  <AvatarFallback>{video.channel.name[0]}</AvatarFallback>
                </Avatar>
                <div>
                  <h3 className="font-semibold">{video.channel.name}</h3>
                  <p className="text-sm text-muted-foreground">{formattedSubscribers} subscribers</p>
                  <p className="mt-2 text-sm">{video.description}</p>
                </div>
              </div>
              <Button variant={isSubscribed ? "default" : "outline"} onClick={handleSubscribe}>
                {isSubscribed ? "Subscribed" : "Subscribe"}
              </Button>
            </div>

{/* Comments */}
            <VideoComments videoId={videoId} />
          </div>

{/* Related Videos */}
          <div>
            {playlistId ? (
              <h2 className="text-lg font-semibold mb-4">Playlist</h2>
            ) : (
              <h2 className="text-lg font-semibold mb-4">Related Videos</h2>
            )}
            <RelatedVideos currentVideoId={videoId} />
          </div>
        </div>
      </main>

{/* Save to Playlist Dialog */}
      <SaveToPlaylistDialog open={isSaveDialogOpen} onOpenChange={setIsSaveDialogOpen} videoId={videoId} />
    </div>
  )
}
[V0_FILE]javascript:file="server/services/videoProcessingService.js" isMerged="true"
import fs from "fs"
import path from "path"
import { spawn } from "child_process"
import { google } from "googleapis"
import Video from "../models/Video.js"

// Initialize Google Drive API
const setupDriveClient = () => {
  const oauth2Client = new google.auth.OAuth2(
    process.env.GDRIVE_CLIENT_ID,
    process.env.GDRIVE_CLIENT_SECRET,
    process.env.GDRIVE_REDIRECT_URI,
  )

oauth2Client.setCredentials({
    refresh_token: process.env.GDRIVE_REFRESH_TOKEN,
  })

return google.drive({
    version: "v3",
    auth: oauth2Client,
  })
}

// Extract video metadata using ffmpeg
export const extractVideoMetadata = (filePath) => {
  return new Promise((resolve, reject) => {
    const ffprobe = spawn("ffprobe", [
      "-v",
      "error",
      "-show_entries",
      "format=duration:stream=width,height",
      "-of",
      "json",
      filePath,
    ])

let output = ""
    ffprobe.stdout.on("data", (data) => {
      output += data.toString()
    })

ffprobe.on("close", (code) => {
      if (code !== 0) {
        return reject(new Error(`ffprobe process exited with code ${code}`))
      }

try {
        const metadata = JSON.parse(output)
        const duration = Number.parseFloat(metadata.format.duration).toFixed(2)
        const width = metadata.streams[0]?.width || 0
        const height = metadata.streams[0]?.height || 0

// Format duration as MM:SS
        const minutes = Math.floor(duration / 60)
        const seconds = Math.floor(duration % 60)
        const formattedDuration = `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`

resolve({
          duration: formattedDuration,
          rawDuration: duration,
          resolution: `${width}x${height}`,
          width,
          height,
        })
      } catch (error) {
        reject(new Error(`Failed to parse ffprobe output: ${error.message}`))
      }
    })

ffprobe.stderr.on("data", (data) => {
      console.error(`ffprobe stderr: ${data}`)
    })

ffprobe.on("error", (error) => {
      reject(error)
    })
  })
}

// Generate thumbnail at specified timestamp
export const generateThumbnail = async (videoPath, outputPath, timeInSeconds) => {
  return new Promise((resolve, reject) => {
    const ffmpeg = spawn("ffmpeg", [
      "-ss",
      timeInSeconds.toString(),
      "-i",
      videoPath,
      "-vframes",
      "1",
      "-q:v",
      "2",
      outputPath,
    ])

ffmpeg.on("close", (code) => {
      if (code === 0) {
        resolve(outputPath)
      } else {
        reject(new Error(`ffmpeg process exited with code ${code}`))
      }
    })

ffmpeg.stderr.on("data", (data) => {
      console.error(`ffmpeg stderr: ${data}`)
    })

ffmpeg.on("error", (error) => {
      reject(error)
    })
  })
}

// Upload thumbnail to Google Drive
export const uploadThumbnailToDrive = async (thumbnailPath, fileName) => {
  const drive = setupDriveClient()

try {
    const fileMetadata = {
      name: fileName,
      parents: ["root"], // Upload to root folder, change as needed
    }

const media = {
      mimeType: "image/jpeg",
      body: fs.createReadStream(thumbnailPath),
    }

const response = await drive.files.create({
      resource: fileMetadata,
      media: media,
      fields: "id,webContentLink",
    })

// Make the file viewable with a link
    await drive.permissions.create({
      fileId: response.data.id,
      requestBody: {
        role: "reader",
        type: "anyone",
      },
    })

return {
      fileId: response.data.id,
      webContentLink: response.data.webContentLink,
    }
  } catch (error) {
    console.error("Error uploading thumbnail to Google Drive:", error)
    throw error
  }
}

// Process video after upload
export const processVideo = async (videoId, videoPath) => {
  try {
    // 1. Extract metadata
    const metadata = await extractVideoMetadata(videoPath)

// 2. Generate thumbnails at different timestamps (e.g., 0s, 25%, 50%, 75%)
    const thumbnails = []
    const thumbnailsDir = path.join(path.dirname(videoPath), "thumbnails")

if (!fs.existsSync(thumbnailsDir)) {
      fs.mkdirSync(thumbnailsDir, { recursive: true })
    }

const rawDuration = Number.parseFloat(metadata.rawDuration)
    const timestamps = [0, rawDuration * 0.25, rawDuration * 0.5, rawDuration * 0.75]

for (let i = 0; i < timestamps.length; i++) {
      const thumbnailPath = path.join(thumbnailsDir, `${videoId}_thumb_${i}.jpg`)
      await generateThumbnail(videoPath, thumbnailPath, timestamps[i])

// Upload thumbnail to Google Drive
      const thumbnailFileName = `${videoId}_thumbnail_${i}.jpg`
      const uploadResult = await uploadThumbnailToDrive(thumbnailPath, thumbnailFileName)

thumbnails.push({
        fileId: uploadResult.fileId,
        url: uploadResult.webContentLink,
        timestamp: timestamps[i],
      })

// Clean up local thumbnail file
      fs.unlinkSync(thumbnailPath)
    }

// 3. Update video document with metadata and thumbnails
    const video = await Video.findById(videoId)
    if (!video) {
      throw new Error("Video not found")
    }

video.duration = metadata.duration
    video.resolution = metadata.resolution
    video.width = metadata.width
    video.height = metadata.height
    video.thumbnails = thumbnails

// Use the first thumbnail as the default
    if (thumbnails.length > 0) {
      video.thumbnail = thumbnails[0].url
    }

// 4. Mark video as processed
    video.processed = true
    await video.save()

return {
      success: true,
      video,
    }
  } catch (error) {
    console.error("Error processing video:", error)

// Update video with error status
    try {
      await Video.findByIdAndUpdate(videoId, {
        processingError: error.message,
        processed: false,
      })
    } catch (dbError) {
      console.error("Error updating video with processing error:", dbError)
    }

throw error
  }
}

export default {
  extractVideoMetadata,
  generateThumbnail,
  uploadThumbnailToDrive,
  processVideo,
}
[V0_FILE]typescriptreact:file="server/models/Video.js" isEdit="true" isQuickEdit="true" isMerged="true"
import mongoose from "mongoose"

const videoSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
    trim: true,
  },
  description: {
    type: String,
    default: "",
    trim: true,
  },
  fileId: {
    type: String,
    required: true,
  }, // Google Drive file ID
  thumbnail: {
    type: String,
    default: "",
  },
  thumbnails: [
    {
      fileId: String,
      url: String,
      timestamp: Number,
    },
  ],
  duration: {
    type: String,
    default: "0:00",
  },
  resolution: {
    type: String,
    default: "",
  },
  width: {
    type: Number,
    default: 0,
  },
  height: {
    type: Number,
    default: 0,
  },
  processed: {
    type: Boolean,
    default: false,
  },
  processingError: {
    type: String,
    default: "",
  },
  views: {
    type: Number,
    default: 0,
  },
  likes: {
    type: Number,
    default: 0,
  },
  dislikes: {
    type: Number,
    default: 0,
  },
  privacy: {
    type: String,
    enum: ["public", "unlisted", "private"],
    default: "public",
  },
  tags: [String],
  user: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User",
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
})

// Add text index for search functionality
videoSchema.index({ title: "text", description: "text", tags: "text" })

const Video = mongoose.model("Video", videoSchema)

export default Video
[V0_FILE]typescriptreact:file="components/thumbnail-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { Check } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { selectVideoThumbnail } from "@/lib/api"

interface ThumbnailSelectorProps {
  videoId: string
  thumbnails: Array<{
    fileId: string
    url: string
    timestamp: number
  }>
  currentThumbnail: string
  onThumbnailSelected: (url: string) => void
}

export function ThumbnailSelector({
  videoId,
  thumbnails,
  currentThumbnail,
  onThumbnailSelected,
}: ThumbnailSelectorProps) {
  const { toast } = useToast()
  const [selectedThumbnail, setSelectedThumbnail] = useState<string>(currentThumbnail)
  const [isLoading, setIsLoading] = useState<boolean>(false)

const handleThumbnailSelect = async (url: string, index: number) => {
    setSelectedThumbnail(url)
    setIsLoading(true)

try {
      await selectVideoThumbnail(videoId, index)
      onThumbnailSelected(url)

toast({
        title: "Thumbnail updated",
        description: "Your video thumbnail has been updated successfully.",
      })
    } catch (error) {
      console.error("Error updating thumbnail:", error)

toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to update thumbnail. Please try again.",
      })

// Revert selection on error
      setSelectedThumbnail(currentThumbnail)
    } finally {
      setIsLoading(false)
    }
  }

// Format timestamp to MM:SS
  const formatTimestamp = (seconds: number) => {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = Math.floor(seconds % 60)
    return `${minutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}`
  }

return (
    <div className="space-y-4">
      <h3 className="text-lg font-medium">Select Thumbnail</h3>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {thumbnails.map((thumbnail, index) => (
          <div
            key={thumbnail.fileId}
            className={`relative aspect-video rounded-md overflow-hidden border-2 cursor-pointer ${
              selectedThumbnail === thumbnail.url ? "border-primary" : "border-transparent hover:border-gray-300"
            }`}
            onClick={() => handleThumbnailSelect(thumbnail.url, index)}
          >
            <Image
              src={thumbnail.url || "/placeholder.svg"}
              alt={`Thumbnail at ${formatTimestamp(thumbnail.timestamp)}`}
              fill
              className="object-cover"
            />

{selectedThumbnail === thumbnail.url && (
              <div className="absolute top-2 right-2 bg-primary text-white rounded-full p-1">
                <Check className="h-4 w-4" />
              </div>
            )}

<div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-1.5 py-0.5 rounded">
              {formatTimestamp(thumbnail.timestamp)}
            </div>
          </div>
        ))}
      </div>

<div className="text-sm text-muted-foreground">Click on a thumbnail to set it as the preview for your video.</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/studio/edit/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { FileVideo } from "lucide-react"

import { SiteHeader } from "@/components/site-header"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { ThumbnailSelector } from "@/components/thumbnail-selector"
import { getVideoById, updateVideo, getVideoProcessingStatus } from "@/lib/api"
import { useAuth } from "@/contexts/auth-context"

export default function EditVideoPage() {
  const params = useParams()
  const router = useRouter()
  const { toast } = useToast()
  const { isAuthenticated, isLoading: authLoading } = useAuth()
  const videoId = params.id as string

const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [video, setVideo] = useState<any>(null)
  const [processingStatus, setProcessingStatus] = useState<any>(null)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    privacy: "public",
    tags: "",
  })

useEffect(() => {
    // Redirect if not authenticated
    if (!isAuthenticated && !authLoading) {
      router.push("/login")
    }
  }, [isAuthenticated, authLoading, router])

useEffect(() => {
    const fetchVideo = async () => {
      try {
        const data = await getVideoById(videoId)
        setVideo(data)
        setFormData({
          title: data.title || "",
          description: data.description || "",
          privacy: data.privacy || "public",
          tags: data.tags ? data.tags.join(", ") : "",
        })
        setIsLoading(false)
      } catch (error) {
        console.error("Error fetching video:", error)
        toast({
          variant: "destructive",
          title: "Error",
          description: "Failed to load video details. Please try again.",
        })
        router.push("/studio")
      }
    }

if (isAuthenticated) {
      fetchVideo()
    }
  }, [videoId, isAuthenticated, router, toast])

useEffect(() => {
    const checkProcessingStatus = async () => {
      try {
        const status = await getVideoProcessingStatus(videoId)
        setProcessingStatus(status)
      } catch (error) {
        console.error("Error checking processing status:", error)
      }
    }

if (video && !video.processed) {
      // Check status immediately
      checkProcessingStatus()

// Then check every 10 seconds until processed
      const interval = setInterval(() => {
        checkProcessingStatus()
      }, 10000)

return () => clearInterval(interval)
    }
  }, [videoId, video])

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handlePrivacyChange = (value: string) => {
    setFormData((prev) => ({ ...prev, privacy: value }))
  }

const handleThumbnailSelected = (url: string) => {
    setVideo((prev: any) => ({
      ...prev,
      thumbnail: url,
    }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSaving(true)

try {
      const updatedVideo = await updateVideo(videoId, {
        title: formData.title,
        description: formData.description,
        privacy: formData.privacy,
        tags: formData.tags ? formData.tags.split(",").map((tag: string) => tag.trim()) : [],
      })

setVideo(updatedVideo)

toast({
        title: "Video updated",
        description: "Your video has been updated successfully.",
      })

router.push("/studio")
    } catch (error) {
      console.error("Error updating video:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to update video. Please try again.",
      })
    } finally {
      setIsSaving(false)
    }
  }

if (isLoading || !video) {
    return (
      <div className="flex min-h-screen flex-col">
        <SiteHeader />
        <main className="flex-1 container py-6">
          <div className="max-w-3xl mx-auto">
            <Card>
              <CardContent className="p-6">
                <div className="h-12 bg-muted rounded animate-pulse mb-4" />
                <div className="space-y-4">
                  <div className="h-4 bg-muted rounded animate-pulse w-3/4" />
                  <div className="h-4 bg-muted rounded animate-pulse w-full" />
                  <div className="h-4 bg-muted rounded animate-pulse w-2/3" />
                </div>
              </CardContent>
            </Card>
          </div>
        </main>
      </div>
    )
  }

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />
      <main className="flex-1 container py-6">
        <div className="max-w-3xl mx-auto">
          <h1 className="text-3xl font-bold mb-6">Edit Video</h1>

<Card>
            <form onSubmit={handleSubmit}>
              <CardHeader>
                <CardTitle>Video Details</CardTitle>
                <CardDescription>Update information about your video</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center p-4 bg-muted rounded-lg">
                  <FileVideo className="h-8 w-8 mr-4 text-primary" />
                  <div className="flex-1 min-w-0">
                    <p className="font-medium truncate">{video.title}</p>
                    {video.processed ? (
                      <p className="text-sm text-muted-foreground">
                        {video.duration} • {video.resolution}
                      </p>
                    ) : (
                      <p className="text-sm text-amber-500">
                        {processingStatus?.processingError
                          ? `Processing failed: ${processingStatus.processingError}`
                          : "Processing video..."}
                      </p>
                    )}
                  </div>
                </div>

{/* Thumbnail selector */}
                {video.processed && video.thumbnails && video.thumbnails.length > 0 && (
                  <ThumbnailSelector
                    videoId={videoId}
                    thumbnails={video.thumbnails}
                    currentThumbnail={video.thumbnail}
                    onThumbnailSelected={handleThumbnailSelected}
                  />
                )}

<div className="space-y-2">
                  <Label htmlFor="title">Title</Label>
                  <Input
                    id="title"
                    name="title"
                    placeholder="Add a title that describes your video"
                    required
                    value={formData.title}
                    onChange={handleChange}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="description">Description</Label>
                  <Textarea
                    id="description"
                    name="description"
                    placeholder="Tell viewers about your video"
                    rows={5}
                    value={formData.description}
                    onChange={handleChange}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="privacy">Privacy</Label>
                  <Select value={formData.privacy} onValueChange={handlePrivacyChange}>
                    <SelectTrigger id="privacy">
                      <SelectValue placeholder="Select privacy setting" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="public">Public</SelectItem>
                      <SelectItem value="unlisted">Unlisted</SelectItem>
                      <SelectItem value="private">Private</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="tags">Tags</Label>
                  <Input
                    id="tags"
                    name="tags"
                    placeholder="Add tags (separated by commas)"
                    value={formData.tags}
                    onChange={handleChange}
                  />
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button type="button" variant="outline" onClick={() => router.push("/studio")}>
                  Cancel
                </Button>
                <Button type="submit" disabled={isSaving}>
                  {isSaving ? "Saving..." : "Save Changes"}
                </Button>
              </CardFooter>
            </form>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/studio/upload/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Upload, X, FileVideo } from "lucide-react"

// Add this import
import { getVideoProcessingStatus } from "@/lib/api"

export default function UploadPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [isUploading, setIsUploading] = useState(false)
  const [uploadProgress, setUploadProgress] = useState(0)
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    privacy: "public",
    tags: "",
  })

// Add this state
  const [processingStatus, setProcessingStatus] = useState(null)
  const [uploadedVideoId, setUploadedVideoId] = useState("")

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file && file.type.startsWith("video/")) {
      setSelectedFile(file)
    } else {
      toast({
        variant: "destructive",
        title: "Invalid file type",
        description: "Please select a video file.",
      })
    }
  }

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handlePrivacyChange = (value: string) => {
    setFormData((prev) => ({ ...prev, privacy: value }))
  }

// Update the handleSubmit function to include the processing status check
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!selectedFile) {
      toast({
        variant: "destructive",
        title: "No file selected",
        description: "Please select a video file to upload.",
      })
      return
    }

setIsUploading(true)

// Simulate upload progress
    const interval = setInterval(() => {
      setUploadProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          return 100
        }
        return prev + 5
      })
    }, 500)

try {
      // In a real app, you would upload to Google Drive via your API
      const formDataToSend = new FormData()
      formDataToSend.append("video", selectedFile)
      formDataToSend.append("title", formData.title)
      formDataToSend.append("description", formData.description)
      formDataToSend.append("privacy", formData.privacy)
      formDataToSend.append("tags", formData.tags)

const response = await fetch("/api/videos/upload", {
        method: "POST",
        body: formDataToSend,
      })

const data = await response.json()
      setUploadedVideoId(data._id)

clearInterval(interval)
      setUploadProgress(100)

toast({
        title: "Upload successful",
        description: "Your video has been uploaded and is being processed.",
      })

// Start checking processing status
      const checkProcessingStatus = async () => {
        try {
          const status = await getVideoProcessingStatus(data._id)
          setProcessingStatus(status)

if (status.processed) {
            // If processing is complete, redirect to studio page
            router.push("/studio")
          }
        } catch (error) {
          console.error("Error checking processing status:", error)
        }
      }

// Check status every 5 seconds
      const statusInterval = setInterval(checkProcessingStatus, 5000)

// Clear interval after 2 minutes (or when component unmounts)
      setTimeout(() => {
        clearInterval(statusInterval)
        router.push("/studio")
      }, 120000)

return () => clearInterval(statusInterval)
    } catch (error) {
      clearInterval(interval)

toast({
        variant: "destructive",
        title: "Upload failed",
        description: "There was a problem uploading your video.",
      })

setIsUploading(false)
    }
  }

<Card>
            <form onSubmit={handleSubmit}>
              {!selectedFile ? (
                <CardContent className="p-6">
                  <div
                    className="border-2 border-dashed rounded-lg p-12 text-center cursor-pointer hover:bg-muted/50 transition-colors"
                    onClick={() => document.getElementById("video-upload")?.click()}
                  >
                    <Upload className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
                    <h2 className="text-xl font-semibold mb-2">Drag and drop video files to upload</h2>
                    <p className="text-muted-foreground mb-4">Your videos will be private until you publish them</p>
                    <Button type="button">SELECT FILES</Button>
                    <input
                      id="video-upload"
                      type="file"
                      accept="video/*"
                      className="hidden"
                      onChange={handleFileChange}
                    />
                  </div>
                </CardContent>
              ) : (
                <>
                  <CardHeader>
                    <CardTitle>Video Details</CardTitle>
                    <CardDescription>Provide information about your video</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex items-center p-4 bg-muted rounded-lg">
                      <FileVideo className="h-8 w-8 mr-4 text-primary" />
                      <div className="flex-1 min-w-0">
                        <p className="font-medium truncate">{selectedFile.name}</p>
                        <p className="text-sm text-muted-foreground">
                          {(selectedFile.size / (1024 * 1024)).toFixed(2)} MB
                        </p>
                      </div>
                      <Button variant="ghost" size="icon" onClick={() => setSelectedFile(null)}>
                        <X className="h-4 w-4" />
                      </Button>
                    </div>

{isUploading && (
                      <div className="space-y-2">
                        <div className="flex justify-between text-sm">
                          <span>Uploading...</span>
                          <span>{uploadProgress}%</span>
                        </div>
                        <div className="h-2 bg-muted rounded-full overflow-hidden">
                          <div
                            className="h-full bg-primary transition-all duration-300 ease-in-out"
                            style={{ width: `${uploadProgress}%` }}
                          />
                        </div>
                      </div>
                    )}

{uploadProgress === 100 && uploadedVideoId && (
                      <div className="space-y-2 mt-4">
                        <div className="flex justify-between text-sm">
                          <span>Processing video...</span>
                          <span>{processingStatus?.processed ? "Complete" : "In progress"}</span>
                        </div>
                        <div className="h-2 bg-muted rounded-full overflow-hidden">
                          <div
                            className="h-full bg-amber-500 transition-all duration-300 ease-in-out"
                            style={{ width: processingStatus?.processed ? "100%" : "50%" }}
                          />
                        </div>
                        <p className="text-xs text-muted-foreground">
                          {processingStatus?.processed
                            ? "Video processing complete! Redirecting to studio..."
                            : "Your video is being processed. This may take a few minutes depending on the file size."}
                        </p>
                      </div>
                    )}

<div className="space-y-2">
                      <Label htmlFor="title">Title</Label>
                      <Input
                        id="title"
                        name="title"
                        placeholder="Add a title that describes your video"
                        required
                        value={formData.title}
                        onChange={handleChange}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="description">Description</Label>
                      <Textarea
                        id="description"
                        name="description"
                        placeholder="Tell viewers about your video"
                        rows={5}
                        value={formData.description}
                        onChange={handleChange}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="privacy">Privacy</Label>
                      <Select value={formData.privacy} onValueChange={handlePrivacyChange}>
                        <SelectTrigger id="privacy">
                          <SelectValue placeholder="Select privacy setting" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="public">Public</SelectItem>
                          <SelectItem value="unlisted">Unlisted</SelectItem>
                          <SelectItem value="private">Private</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="tags">Tags</Label>
                      <Input
                        id="tags"
                        name="tags"
                        placeholder="Add tags (separated by commas)"
                        value={formData.tags}
                        onChange={handleChange}
                      />
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button type="button" variant="outline" onClick={() => setSelectedFile(null)}>
                      Cancel
                    </Button>
                    <Button type="submit" disabled={isUploading || !formData.title}>
                      {isUploading ? "Uploading..." : "Upload Video"}
                    </Button>
                  </CardFooter>
                </>
              )}
            </form>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/video-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { formatDistanceToNow } from "date-fns"

import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

interface Channel {
  id: string
  name: string
  avatar: string
}

interface Video {
  id: string
  title: string
  thumbnail: string
  duration: string
  resolution?: string
  processed?: boolean
  views: number
  createdAt: string
  channel: Channel
}

interface VideoCardProps {
  video: Video
}

export function VideoCard({ video }: VideoCardProps) {
  const formattedViews = new Intl.NumberFormat("en-US", {
    notation: "compact",
    compactDisplay: "short",
  }).format(video.views)

const timeAgo = formatDistanceToNow(new Date(video.createdAt), { addSuffix: true })

return (
    <Card className="border-0 shadow-none">
      <Link href={`/watch/${video.id}`}>
        <div className="relative aspect-video overflow-hidden rounded-lg">
          <Image
            src={video.thumbnail || "/placeholder.svg"}
            alt={video.title}
            fill
            className="object-cover transition-transform hover:scale-105"
          />
          <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-1 rounded">
            {video.duration}
            {video.resolution && video.processed && <span className="ml-1">• {video.resolution.split("x")[1]}p</span>}
          </div>
        </div>
      </Link>
      <CardContent className="p-3">
        <div className="flex gap-3">
          <Link href={`/channel/${video.channel.id}`}>
            <Avatar className="h-9 w-9">
              <AvatarImage src={video.channel.avatar || "/placeholder.svg"} alt={video.channel.name} />
              <AvatarFallback>{video.channel.name[0]}</AvatarFallback>
            </Avatar>
          </Link>
          <div className="space-y-1">
            <Link href={`/watch/${video.id}`}>
              <h3 className="font-semibold line-clamp-2">{video.title}</h3>
            </Link>
            <Link href={`/channel/${video.channel.id}`}>
              <p className="text-sm text-muted-foreground">{video.channel.name}</p>
            </Link>
            <p className="text-xs text-muted-foreground">
              {formattedViews} views • {timeAgo}
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isEdit="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
import { useRouter } from "next/navigation"
import { loginUser, registerUser, getUserProfile } from "@/lib/api"
import { useToast } from "@/components/ui/use-toast"

interface User {
  id: string
  name: string
  email: string
  role: string
  avatar?: string
}

interface AuthContextType {
  user: User | null
  isLoading: boolean
  isAuthenticated: boolean
  login: (email: string, password: string) => Promise<void>
  register: (name: string, email: string, password: string) => Promise<void>
  logout: () => void
  googleLogin: (tokenId: string) => Promise<void>
  updateUserData: (userData: Partial<User>) => void
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()
  const { toast } = useToast()

useEffect(() => {
    // Check if user is logged in
    const checkAuth = async () => {
      const token = localStorage.getItem("token")
      if (token) {
        try {
          setIsLoading(true)
          const userData = await getUserProfile("me")
          setUser(userData)
        } catch (error) {
          console.error("Error fetching user profile:", error)
          localStorage.removeItem("token")
        } finally {
          setIsLoading(false)
        }
      } else {
        setIsLoading(false)
      }
    }

checkAuth()
  }, [])

const fetchUserProfile = async () => {
    try {
      setIsLoading(true)
      const userData = await getUserProfile("me")
      setUser(userData)
    } catch (error) {
      console.error("Error fetching user profile:", error)
      localStorage.removeItem("token")
    } finally {
      setIsLoading(false)
    }
  }

const login = async (email: string, password: string) => {
    try {
      setIsLoading(true)
      const { token, user } = await loginUser({ email, password })
      localStorage.setItem("token", token)
      setUser(user)
      toast({
        title: "Login successful",
        description: `Welcome back, ${user.name}!`,
      })
      router.push("/")
    } catch (error: any) {
      console.error("Login error:", error)
      toast({
        variant: "destructive",
        title: "Login failed",
        description: error.response?.data?.message || "Invalid credentials",
      })
      throw error
    } finally {
      setIsLoading(false)
    }
  }

const googleLogin = async (tokenId: string) => {
    try {
      setIsLoading(true)
      const { token, user } = await loginWithGoogle(tokenId)
      localStorage.setItem("token", token)
      setUser(user)
      toast({
        title: "Login successful",
        description: `Welcome, ${user.name}!`,
      })
      router.push("/")
    } catch (error: any) {
      console.error("Google login error:", error)
      toast({
        variant: "destructive",
        title: "Login failed",
        description: error.response?.data?.message || "Google authentication failed",
      })
      throw error
    } finally {
      setIsLoading(false)
    }
  }

const register = async (name: string, email: string, password: string) => {
    try {
      setIsLoading(true)
      const { token, user } = await registerUser({ name, email, password })
      localStorage.setItem("token", token)
      setUser(user)
      toast({
        title: "Registration successful",
        description: `Welcome to VideoHub, ${user.name}!`,
      })
      router.push("/")
    } catch (error: any) {
      console.error("Registration error:", error)
      toast({
        variant: "destructive",
        title: "Registration failed",
        description: error.response?.data?.message || "Could not create account",
      })
      throw error
    } finally {
      setIsLoading(false)
    }
  }

const logout = () => {
    localStorage.removeItem("token")
    setUser(null)
    router.push("/login")
    toast({
      title: "Logged out",
      description: "You have been successfully logged out.",
    })
  }

const updateUserData = (userData: Partial<User>) => {
    if (user) {
      setUser({ ...user, ...userData })
    }
  }

return (
    <AuthContext.Provider
      value={{
        user,
        isLoading,
        isAuthenticated: !!user,
        login,
        register,
        logout,
        googleLogin,
        updateUserData,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}

// Function to handle Google login
async function loginWithGoogle(tokenId: string) {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/google`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ tokenId }),
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.message || "Google authentication failed")
  }

return response.json()
}
[V0_FILE]javascript:file="server/routes/auth.js" isEdit="true"
import express from "express"
import jwt from "jsonwebtoken"
import { OAuth2Client } from "google-auth-library"
import User from "../models/User.js"
import { authenticateToken } from "../middleware/auth.js"

const router = express.Router()
const googleClient = new OAuth2Client(process.env.GOOGLE_CLIENT_ID)

// Register a new user
router.post("/register", async (req, res) => {
  try {
    const { name, email, password } = req.body

// Check if user already exists
    const existingUser = await User.findOne({ email })
    if (existingUser) {
      return res.status(400).json({ message: "User already exists" })
    }

// Create new user
    const user = new User({
      name,
      email,
      password,
    })

await user.save()

// Generate JWT token
    const token = jwt.sign({ id: user._id, email: user.email, role: user.role }, process.env.JWT_SECRET, {
      expiresIn: "7d",
    })

res.status(201).json({
      token,
      user: {
        id: user._id,
        name: user.name,
        email: user.email,
        role: user.role,
      },
    })
  } catch (error) {
    console.error("Registration error:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Login user
router.post("/login", async (req, res) => {
  try {
    const { email, password } = req.body

// Check if user exists
    const user = await User.findOne({ email })
    if (!user) {
      return res.status(400).json({ message: "Invalid credentials" })
    }

// Validate password
    const isMatch = await user.comparePassword(password)
    if (!isMatch) {
      return res.status(400).json({ message: "Invalid credentials" })
    }

// Generate JWT token
    const token = jwt.sign({ id: user._id, email: user.email, role: user.role }, process.env.JWT_SECRET, {
      expiresIn: "7d",
    })

res.json({
      token,
      user: {
        id: user._id,
        name: user.name,
        email: user.email,
        role: user.role,
        avatar: user.avatar,
      },
    })
  } catch (error) {
    console.error("Login error:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Google Sign-In
router.post("/google", async (req, res) => {
  try {
    const { tokenId } = req.body

// Verify Google token
    const ticket = await googleClient.verifyIdToken({
      idToken: tokenId,
      audience: process.env.GOOGLE_CLIENT_ID,
    })

const payload = ticket.getPayload()
    const { email, name, picture } = payload

// Check if user exists
    let user = await User.findOne({ email })

if (!user) {
      // Create new user if not exists
      user = new User({
        name,
        email,
        password: Math.random().toString(36).slice(-8) + Math.random().toString(36).slice(-8), // Random password
        avatar: picture,
        googleId: payload.sub,
      })

await user.save()
    } else if (!user.googleId) {
      // Update existing user with Google ID if they didn't have one
      user.googleId = payload.sub
      if (!user.avatar && picture) {
        user.avatar = picture
      }
      await user.save()
    }

// Generate JWT token
    const token = jwt.sign({ id: user._id, email: user.email, role: user.role }, process.env.JWT_SECRET, {
      expiresIn: "7d",
    })

res.json({
      token,
      user: {
        id: user._id,
        name: user.name,
        email: user.email,
        role: user.role,
        avatar: user.avatar,
      },
    })
  } catch (error) {
    console.error("Google login error:", error)
    res.status(500).json({ message: "Google authentication failed" })
  }
})

// Get current user
router.get("/me", authenticateToken, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select("-password")
    if (!user) {
      return res.status(404).json({ message: "User not found" })
    }
    res.json(user)
  } catch (error) {
    console.error("Error fetching user:", error)
    res.status(500).json({ message: "Server error" })
  }
})

export default router
[V0_FILE]javascript:file="server/models/User.js" isEdit="true"
import mongoose from "mongoose"
import bcrypt from "bcrypt"

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
    trim: true,
  },
  email: {
    type: String,
    required: true,
    unique: true,
    trim: true,
    lowercase: true,
  },
  password: {
    type: String,
    required: true,
  },
  avatar: {
    type: String,
    default: "",
  },
  googleId: {
    type: String,
    default: null,
  },
  role: {
    type: String,
    enum: ["user", "creator", "admin"],
    default: "user",
  },
  subscribers: {
    type: Number,
    default: 0,
  },
  bio: {
    type: String,
    default: "",
  },
  website: {
    type: String,
    default: "",
  },
  location: {
    type: String,
    default: "",
  },
  socialLinks: {
    twitter: { type: String, default: "" },
    facebook: { type: String, default: "" },
    instagram: { type: String, default: "" },
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
})

// Hash password before saving
userSchema.pre("save", async function (next) {
  if (!this.isModified("password")) return next()

try {
    const salt = await bcrypt.genSalt(10)
    this.password = await bcrypt.hash(this.password, salt)
    next()
  } catch (error) {
    next(error)
  }
})

// Method to compare passwords
userSchema.methods.comparePassword = async function (candidatePassword) {
  return bcrypt.compare(candidatePassword, this.password)
}

const User = mongoose.model("User", userSchema)

export default User
[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Play } from "lucide-react"
import { GoogleLogin } from "@react-oauth/google"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/contexts/auth-context"
import { Separator } from "@/components/ui/separator"

export default function LoginPage() {
  const router = useRouter()
  const { login, googleLogin, isLoading, isAuthenticated } = useAuth()
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  })

useEffect(() => {
    // Redirect if already authenticated
    if (isAuthenticated) {
      router.push("/")
    }
  }, [isAuthenticated, router])

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      await login(formData.email, formData.password)
    } catch (error) {
      // Error is handled in the auth context
    }
  }

const handleGoogleSuccess = async (credentialResponse: any) => {
    try {
      await googleLogin(credentialResponse.credential)
    } catch (error) {
      // Error is handled in the auth context
    }
  }

const handleGoogleError = () => {
    console.error("Google login failed")
  }

if (isAuthenticated) {
    return null // Will redirect in useEffect
  }

return (
    <div className="flex min-h-screen flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
      <div className="w-full max-w-md">
        <div className="flex justify-center mb-6">
          <Link href="/" className="flex items-center space-x-2">
            <Play className="h-8 w-8 text-primary" />
            <span className="text-2xl font-bold">VideoHub</span>
          </Link>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Sign in</CardTitle>
            <CardDescription>Enter your email and password to access your account</CardDescription>
          </CardHeader>
          <form onSubmit={handleSubmit}>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  placeholder="name@example.com"
                  required
                  value={formData.email}
                  onChange={handleChange}
                />
              </div>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="password">Password</Label>
                  <Link href="/forgot-password" className="text-sm text-primary hover:underline">
                    Forgot password?
                  </Link>
                </div>
                <Input
                  id="password"
                  name="password"
                  type="password"
                  required
                  value={formData.password}
                  onChange={handleChange}
                />
              </div>
            </CardContent>
            <CardFooter className="flex flex-col">
              <Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? "Signing in..." : "Sign in"}
              </Button>

<p className="mt-4 text-center text-sm text-muted-foreground">
                Don't have an account?{" "}
                <Link href="/register" className="text-primary hover:underline">
                  Sign up
                </Link>
              </p>
            </CardFooter>
          </form>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/register/page.tsx" isEdit="true"
"use client"

import type React from "react"

export default function RegisterPage() {
  const router = useRouter()
  const { register, googleLogin, isLoading, isAuthenticated } = useAuth()
  const { toast } = useToast()
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  })

useEffect(() => {
    // Redirect if already authenticated
    if (isAuthenticated) {
      router.push("/")
    }
  }, [isAuthenticated, router])

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (formData.password !== formData.confirmPassword) {
      toast({
        variant: "destructive",
        title: "Passwords don't match",
        description: "Please make sure your passwords match.",
      })
      return
    }

try {
      await register(formData.name, formData.email, formData.password)
    } catch (error) {
      // Error is handled in the auth context
    }
  }

const handleGoogleError = () => {
    console.error("Google login failed")
  }

if (isAuthenticated) {
    return null // Will redirect in useEffect
  }

<Card>
          <CardHeader>
            <CardTitle>Create an account</CardTitle>
            <CardDescription>Enter your details to create a new account</CardDescription>
          </CardHeader>
          <form onSubmit={handleSubmit}>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="name">Name</Label>
                <Input
                  id="name"
                  name="name"
                  placeholder="John Doe"
                  required
                  value={formData.name}
                  onChange={handleChange}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  placeholder="name@example.com"
                  required
                  value={formData.email}
                  onChange={handleChange}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <Input
                  id="password"
                  name="password"
                  type="password"
                  required
                  value={formData.password}
                  onChange={handleChange}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="confirmPassword">Confirm Password</Label>
                <Input
                  id="confirmPassword"
                  name="confirmPassword"
                  type="password"
                  required
                  value={formData.confirmPassword}
                  onChange={handleChange}
                />
              </div>
            </CardContent>
            <CardFooter className="flex flex-col">
              <Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? "Creating account..." : "Create account"}
              </Button>

<p className="mt-4 text-center text-sm text-muted-foreground">
                Already have an account?{" "}
                <Link href="/login" className="text-primary hover:underline">
                  Sign in
                </Link>
              </p>
            </CardFooter>
          </form>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from "@/components/ui/toaster"
import { AuthProvider } from "@/contexts/auth-context"
import { GoogleOAuthProvider } from "@react-oauth/google"
import { cn } from "@/lib/utils"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "VideoHub - Share and Watch Videos",
  description: "A modern video sharing platform",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={cn("min-h-screen bg-background antialiased", inter.className)}>
        <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || ""}>
          <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
            <AuthProvider>
              {children}
              <Toaster />
            </AuthProvider>
          </ThemeProvider>
        </GoogleOAuthProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { useRouter } from "next/navigation"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Camera } from "lucide-react"

import { SiteHeader } from "@/components/site-header"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/contexts/auth-context"
import { VideoGrid } from "@/components/video-grid"
import { PlaylistGrid } from "@/components/playlist-grid"
import { updateUserProfile, uploadProfilePhoto } from "@/lib/api"

export default function ProfilePage() {
  const router = useRouter()
  const { toast } = useToast()
  const { user, isAuthenticated, isLoading: authLoading, updateUserData } = useAuth()
  const [activeTab, setActiveTab] = useState("videos")
  const [isEditing, setIsEditing] = useState(false)
  const [isSaving, setIsSaving] = useState(false)
  const [isUploading, setIsUploading] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [profileData, setProfileData] = useState({
    name: "",
    email: "",
    bio: "",
    website: "",
    location: "",
    twitter: "",
    facebook: "",
    instagram: "",
  })

useEffect(() => {
    // Redirect if not authenticated
    if (!isAuthenticated && !authLoading) {
      router.push("/login")
    }

// Initialize form with user data
    if (user) {
      setProfileData({
        name: user.name || "",
        email: user.email || "",
        bio: user.bio || "",
        website: user.website || "",
        location: user.location || "",
        twitter: user.socialLinks?.twitter || "",
        facebook: user.socialLinks?.facebook || "",
        instagram: user.socialLinks?.instagram || "",
      })
    }
  }, [isAuthenticated, authLoading, router, user])

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setProfileData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSaving(true)

try {
      const updatedData = {
        name: profileData.name,
        bio: profileData.bio,
        website: profileData.website,
        location: profileData.location,
        socialLinks: {
          twitter: profileData.twitter,
          facebook: profileData.facebook,
          instagram: profileData.instagram,
        },
      }

const updatedUser = await updateUserProfile(updatedData)
      updateUserData(updatedUser)

toast({
        title: "Profile updated",
        description: "Your profile has been updated successfully",
      })
      setIsEditing(false)
    } catch (error) {
      console.error("Error updating profile:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to update profile. Please try again.",
      })
    } finally {
      setIsSaving(false)
    }
  }

const handlePhotoClick = () => {
    fileInputRef.current?.click()
  }

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

setIsUploading(true)

try {
      const formData = new FormData()
      formData.append("photo", file)

const result = await uploadProfilePhoto(formData)
      updateUserData({ avatar: result.avatar })

toast({
        title: "Photo updated",
        description: "Your profile photo has been updated successfully",
      })
    } catch (error) {
      console.error("Error uploading photo:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to upload photo. Please try again.",
      })
    } finally {
      setIsUploading(false)
    }
  }

if (!isAuthenticated || !user) {
    return null // Will redirect in useEffect
  }

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />
      <main className="flex-1 container py-6">
        <div className="flex flex-col md:flex-row gap-6 mb-6">
          <div className="flex flex-col items-center">
            <div className="relative group">
              <Avatar className="h-32 w-32 cursor-pointer" onClick={handlePhotoClick}>
                <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
                <AvatarFallback className="text-4xl">{user.name?.[0]}</AvatarFallback>
              </Avatar>
              <div
                className="absolute inset-0 bg-black/40 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
                onClick={handlePhotoClick}
              >
                <Camera className="h-8 w-8 text-white" />
              </div>
              <input
                type="file"
                ref={fileInputRef}
                className="hidden"
                accept="image/*"
                onChange={handleFileChange}
                disabled={isUploading}
              />
            </div>
            {isUploading && <p className="text-sm text-muted-foreground mt-2">Uploading...</p>}
          </div>

<div className="flex-1">
            {isEditing ? (
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="name">Name</Label>
                  <Input id="name" name="name" value={profileData.name} onChange={handleChange} required />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input id="email" name="email" value={profileData.email} disabled className="bg-muted" />
                  <p className="text-xs text-muted-foreground">Email cannot be changed</p>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="bio">Bio</Label>
                  <Textarea
                    id="bio"
                    name="bio"
                    value={profileData.bio}
                    onChange={handleChange}
                    rows={4}
                    placeholder="Tell others about yourself"
                  />
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="website">Website</Label>
                    <Input
                      id="website"
                      name="website"
                      value={profileData.website}
                      onChange={handleChange}
                      placeholder="https://example.com"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="location">Location</Label>
                    <Input
                      id="location"
                      name="location"
                      value={profileData.location}
                      onChange={handleChange}
                      placeholder="City, Country"
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>Social Links</Label>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <Input
                      id="twitter"
                      name="twitter"
                      value={profileData.twitter}
                      onChange={handleChange}
                      placeholder="Twitter username"
                    />
                    <Input
                      id="facebook"
                      name="facebook"
                      value={profileData.facebook}
                      onChange={handleChange}
                      placeholder="Facebook username"
                    />
                    <Input
                      id="instagram"
                      name="instagram"
                      value={profileData.instagram}
                      onChange={handleChange}
                      placeholder="Instagram username"
                    />
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button type="submit" disabled={isSaving}>
                    {isSaving ? "Saving..." : "Save Changes"}
                  </Button>
                  <Button type="button" variant="outline" onClick={() => setIsEditing(false)}>
                    Cancel
                  </Button>
                </div>
              </form>
            ) : (
              <div>
                <div className="flex justify-between items-start">
                  <div>
                    <h1 className="text-3xl font-bold">{user.name}</h1>
                    <p className="text-muted-foreground">{user.email}</p>
                    {user.bio && <p className="mt-4">{user.bio}</p>}

<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-2">
                      {user.website && (
                        <div className="flex items-center gap-2">
                          <span className="font-medium">Website:</span>
                          <a
                            href={user.website}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-primary hover:underline"
                          >
                            {user.website}
                          </a>
                        </div>
                      )}
                      {user.location && (
                        <div className="flex items-center gap-2">
                          <span className="font-medium">Location:</span>
                          <span>{user.location}</span>
                        </div>
                      )}
                    </div>

{(user.socialLinks?.twitter || user.socialLinks?.facebook || user.socialLinks?.instagram) && (
                      <div className="mt-4">
                        <h3 className="font-medium mb-2">Social Links</h3>
                        <div className="flex gap-4">
                          {user.socialLinks?.twitter && (
                            <a
                              href={`https://twitter.com/${user.socialLinks.twitter}`}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="text-primary hover:underline"
                            >
                              Twitter
                            </a>
                          )}
                          {user.socialLinks?.facebook && (
                            <a
                              href={`https://facebook.com/${user.socialLinks.facebook}`}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="text-primary hover:underline"
                            >
                              Facebook
                            </a>
                          )}
                          {user.socialLinks?.instagram && (
                            <a
                              href={`https://instagram.com/${user.socialLinks.instagram}`}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="text-primary hover:underline"
                            >
                              Instagram
                            </a>
                          )}
                        </div>
                      </div>
                    )}
                  </div>
                  <Button onClick={() => setIsEditing(true)}>Edit Profile</Button>
                </div>
              </div>
            )}
          </div>
        </div>

<Tabs defaultValue="videos" value={activeTab} onValueChange={setActiveTab} className="mt-6">
          <TabsList>
            <TabsTrigger value="videos">Your Videos</TabsTrigger>
            <TabsTrigger value="playlists">Your Playlists</TabsTrigger>
            <TabsTrigger value="liked">Liked Videos</TabsTrigger>
          </TabsList>
          <TabsContent value="videos" className="mt-6">
            <VideoGrid channelId={user.id} />
          </TabsContent>
          <TabsContent value="playlists" className="mt-6">
            <PlaylistGrid userOnly={true} />
          </TabsContent>
          <TabsContent value="liked" className="mt-6">
            <div className="text-center py-12">
              <h3 className="text-lg font-medium mb-2">Liked videos coming soon</h3>
              <p className="text-muted-foreground">This feature is under development</p>
            </div>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/api.ts" isFixed="true" isEdit="true" isQuickEdit="true"
import axios from "axios"

const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"

// Create axios instance
const api = axios.create({
  baseURL: API_URL,
  headers: {
    "Content-Type": "application/json",
  },
})

// Add token to requests if available
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token")
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => Promise.reject(error),
)

// Auth API
export const registerUser = async (userData: any) => {
  const response = await api.post("/auth/register", userData)
  return response.data
}

export const loginUser = async (credentials: any) => {
  const response = await api.post("/auth/login", credentials)
  return response.data
}

export const loginWithGoogle = async (tokenId: string) => {
  const response = await api.post("/auth/google", { tokenId })
  return response.data
}

// Videos API
export const getVideos = async (params = {}) => {
  const response = await api.get("/videos", { params })
  return response.data
}

export const getVideoById = async (id: string) => {
  const response = await api.get(`/videos/${id}`)
  return response.data
}

export const uploadVideo = async (videoData: FormData, onUploadProgress: any, uploadType = "drive") => {
  const response = await api.post(`/videos/upload?type=${uploadType}`, videoData, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
    onUploadProgress,
  })
  return response.data
}

export const updateVideo = async (id: string, videoData: any) => {
  const response = await api.put(`/videos/${id}`, videoData)
  return response.data
}

export const deleteVideo = async (id: string) => {
  const response = await api.delete(`/videos/${id}`)
  return response.data
}

// Comments API
export const getComments = async (videoId: string) => {
  const response = await api.get(`/videos/${videoId}/comments`)
  return response.data
}

export const addComment = async (videoId: string, content: string) => {
  const response = await api.post(`/videos/${videoId}/comments`, { content })
  return response.data
}

// Subscriptions API
export const toggleSubscription = async (channelId: string) => {
  const response = await api.post(`/subscriptions/${channelId}`)
  return response.data
}

// User API
export const getUserProfile = async (userId: string) => {
  const response = await api.get(`/users/${userId}`)
  return response.data
}

export const updateUserProfile = async (userData: any) => {
  const response = await api.put("/users/profile", userData)
  return response.data
}

export const uploadProfilePhoto = async (formData: FormData) => {
  const response = await api.post("/users/profile/photo", formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  })
  return response.data
}

// Search API
export const searchContent = async (query: string, type = "all", sort = "relevance", source = "all") => {
  const response = await api.get(`/search`, {
    params: { q: query, type, sort, source },
  })
  return response.data
}

// YouTube API
export const getYouTubeVideos = async (params = {}) => {
  const response = await api.get("/youtube/videos", { params })
  return response.data
}

export const getYouTubeTrending = async (params = {}) => {
  const response = await api.get("/youtube/trending", { params })
  return response.data
}

export const searchYouTube = async (query: string, params = {}) => {
  const response = await api.get("/youtube/search", {
    params: {
      q: query,
      ...params,
    },
  })
  return response.data
}

// Channel API
export const getChannelById = async (id: string) => {
  const response = await api.get(`/channels/${id}`)
  return response.data
}

export const getChannelVideos = async (channelId: string, params = {}) => {
  const response = await api.get(`/channels/${channelId}/videos`, { params })
  return response.data
}

// Playlist API
export const getPlaylists = async (params = {}) => {
  const response = await api.get("/playlists", { params })
  return response.data
}

export const getUserPlaylists = async () => {
  const response = await api.get("/playlists/me")
  return response.data
}

export const getPlaylistById = async (id: string) => {
  const response = await api.get(`/playlists/${id}`)
  return response.data
}

export const createPlaylist = async (playlistData: any) => {
  const response = await api.post("/playlists", playlistData)
  return response.data
}

export const updatePlaylist = async (id: string, playlistData: any) => {
  const response = await api.put(`/playlists/${id}`, playlistData)
  return response.data
}

export const deletePlaylist = async (id: string) => {
  const response = await api.delete(`/playlists/${id}`)
  return response.data
}

export const addVideoToPlaylist = async (playlistId: string, videoId: string) => {
  const response = await api.post(`/playlists/${playlistId}/videos/${videoId}`)
  return response.data
}

export const removeVideoFromPlaylist = async (playlistId: string, videoId: string) => {
  const response = await api.delete(`/playlists/${playlistId}/videos/${videoId}`)
  return response.data
}

export const reorderPlaylistVideos = async (playlistId: string, videoIds: string[]) => {
  const response = await api.put(`/playlists/${playlistId}/reorder`, { videoIds })
  return response.data
}

// Recommendations API
export const getRecommendedVideos = async (limit = 20) => {
  const response = await api.get("/recommendations", { params: { limit } })
  return response.data
}

export const getRelatedVideos = async (videoId: string, limit = 10) => {
  const response = await api.get(`/recommendations/related/${videoId}`, { params: { limit } })
  return response.data
}

// Video processing API
export const getVideoProcessingStatus = async (id: string) => {
  const response = await api.get(`/videos/${id}/status`)
  return response.data
}

export const selectVideoThumbnail = async (id: string, thumbnailIndex: number) => {
  const response = await api.put(`/videos/${id}/thumbnail/${thumbnailIndex}`)
  return response.data
}

// Live streaming API
export const createLiveStream = async (streamData: any) => {
  const response = await api.post("/live", streamData)
  return response.data
}

export const getLiveStreams = async (params = {}) => {
  const response = await api.get("/live", { params })
  return response.data
}

export const getLiveStreamById = async (id: string) => {
  const response = await api.get(`/live/${id}`)
  return response.data
}

export const updateLiveStream = async (id: string, streamData: any) => {
  const response = await api.put(`/live/${id}`, streamData)
  return response.data
}

export const endLiveStream = async (id: string) => {
  const response = await api.post(`/live/${id}/end`)
  return response.data
}

// Analytics API
export const getVideoAnalytics = async (videoId: string, period = "30d") => {
  const response = await api.get(`/analytics/videos/${videoId}`, { params: { period } })
  return response.data
}

export const getChannelAnalytics = async (period = "30d") => {
  const response = await api.get("/analytics/channel", { params: { period } })
  return response.data
}

// Admin API
export const getAdminStats = async () => {
  const response = await api.get("/admin/stats")
  return response.data
}

export const getAdminUsers = async (params = {}) => {
  const response = await api.get("/admin/users", { params })
  return response.data
}

export const getAdminVideos = async (params = {}) => {
  const response = await api.get("/admin/videos", { params })
  return response.data
}

export const updateUserRole = async (userId: string, role: string) => {
  const response = await api.put(`/admin/users/${userId}/role`, { role })
  return response.data
}

export const deleteUser = async (userId: string) => {
  const response = await api.delete(`/admin/users/${userId}`)
  return response.data
}

export default api
[V0_FILE]javascript:file="server/routes/youtube.js"
import express from "express"
import { google } from "googleapis"
import { authenticateToken } from "../middleware/auth.js"

const router = express.Router()
const youtube = google.youtube({
  version: "v3",
  auth: process.env.YOUTUBE_API_KEY,
})

// Get YouTube videos (popular videos by default)
router.get("/videos", async (req, res) => {
  try {
    const { maxResults = 20, pageToken, regionCode = "US", videoCategoryId = "0" } = req.query

const response = await youtube.videos.list({
      part: "snippet,contentDetails,statistics",
      chart: "mostPopular",
      regionCode,
      videoCategoryId,
      maxResults,
      pageToken,
    })

res.json(response.data)
  } catch (error) {
    console.error("Error fetching YouTube videos:", error)
    res.status(500).json({ message: "Error fetching YouTube videos" })
  }
})

// Get YouTube trending videos
router.get("/trending", async (req, res) => {
  try {
    const { maxResults = 20, pageToken, regionCode = "US" } = req.query

const response = await youtube.videos.list({
      part: "snippet,contentDetails,statistics",
      chart: "mostPopular",
      regionCode,
      maxResults,
      pageToken,
    })

res.json(response.data)
  } catch (error) {
    console.error("Error fetching YouTube trending videos:", error)
    res.status(500).json({ message: "Error fetching YouTube trending videos" })
  }
})

// Search YouTube videos
router.get("/search", async (req, res) => {
  try {
    const { q, maxResults = 20, pageToken, type = "video", order = "relevance" } = req.query

if (!q) {
      return res.status(400).json({ message: "Search query is required" })
    }

const response = await youtube.search.list({
      part: "snippet",
      q,
      maxResults,
      pageToken,
      type,
      order,
    })

// If type is video, get additional details
    if (type === "video" && response.data.items.length > 0) {
      const videoIds = response.data.items.map((item) => item.id.videoId).join(",")

const videoDetails = await youtube.videos.list({
        part: "contentDetails,statistics",
        id: videoIds,
      })

// Merge the details with the search results
      const detailsMap = {}
      videoDetails.data.items.forEach((item) => {
        detailsMap[item.id] = item
      })

response.data.items = response.data.items.map((item) => {
        const details = detailsMap[item.id.videoId]
        if (details) {
          return {
            ...item,
            contentDetails: details.contentDetails,
            statistics: details.statistics,
          }
        }
        return item
      })
    }

res.json(response.data)
  } catch (error) {
    console.error("Error searching YouTube:", error)
    res.status(500).json({ message: "Error searching YouTube" })
  }
})

// Get YouTube video by ID
router.get("/videos/:id", async (req, res) => {
  try {
    const { id } = req.params

const response = await youtube.videos.list({
      part: "snippet,contentDetails,statistics",
      id,
    })

if (response.data.items.length === 0) {
      return res.status(404).json({ message: "Video not found" })
    }

res.json(response.data.items[0])
  } catch (error) {
    console.error("Error fetching YouTube video:", error)
    res.status(500).json({ message: "Error fetching YouTube video" })
  }
})

// Upload to YouTube (requires OAuth2 authentication)
router.post("/upload", authenticateToken, async (req, res) => {
  // This would require a more complex OAuth2 flow with user consent
  // For simplicity, we'll just return an error for now
  res.status(501).json({ message: "YouTube upload not implemented yet" })
})

export default router
[V0_FILE]javascript:file="server/routes/videos.js" isFixed="true" isEdit="true" isQuickEdit="true"
import express from "express"
import multer from "multer"
import path from "path"
import fs from "fs"
import { google } from "googleapis"
import Video from "../models/Video.js"
import { authenticateToken } from "../middleware/auth.js"

// Import the video processing service
import videoProcessingService from "../services/videoProcessingService.js"

const router = express.Router()

// Set up Google Drive API
const setupDriveClient = () => {
  const oauth2Client = new google.auth.OAuth2(
    process.env.GDRIVE_CLIENT_ID,
    process.env.GDRIVE_CLIENT_SECRET,
    process.env.GDRIVE_REDIRECT_URI,
  )

oauth2Client.setCredentials({
    refresh_token: process.env.GDRIVE_REFRESH_TOKEN,
  })

return google.drive({
    version: "v3",
    auth: oauth2Client,
  })
}

// Set up multer for file uploads
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const uploadDir = path.join(__dirname, "../uploads")
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir, { recursive: true })
    }
    cb(null, uploadDir)
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname))
  },
})

const upload = multer({
  storage: storage,
  limits: { fileSize: 100 * 1024 * 1024 }, // 100MB limit
  fileFilter: (req, file, cb) => {
    if (file.mimetype.startsWith("video/")) {
      cb(null, true)
    } else {
      cb(new Error("Only video files are allowed"))
    }
  },
})

// Get all videos (public)
router.get("/", async (req, res) => {
  try {
    const { limit = 20, page = 1, sort = "newest" } = req.query

const skip = (Number.parseInt(page) - 1) * Number.parseInt(limit)

let sortOption = {}
    switch (sort) {
      case "newest":
        sortOption = { createdAt: -1 }
        break
      case "oldest":
        sortOption = { createdAt: 1 }
        break
      case "popular":
        sortOption = { views: -1 }
        break
      default:
        sortOption = { createdAt: -1 }
    }

const videos = await Video.find({ privacy: "public" })
      .populate("user", "name avatar")
      .sort(sortOption)
      .skip(skip)
      .limit(Number.parseInt(limit))

const total = await Video.countDocuments({ privacy: "public" })

res.json({
      videos,
      pagination: {
        total,
        page: Number.parseInt(page),
        pages: Math.ceil(total / Number.parseInt(limit)),
      },
    })
  } catch (error) {
    console.error("Error fetching videos:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Get a single video by ID
router.get("/:id", async (req, res) => {
  try {
    const video = await Video.findById(req.params.id).populate("user", "name avatar subscribers")

if (!video) {
      return res.status(404).json({ message: "Video not found" })
    }

// Increment view count
    video.views += 1
    await video.save()

res.json(video)
  } catch (error) {
    console.error("Error fetching video:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Upload a new video
router.post("/upload", authenticateToken, upload.single("video"), async (req, res) => {
  try {
    const { title, description, privacy, tags } = req.body
    const uploadType = req.query.type || "drive" // Default to Google Drive
    const videoFile = req.file

if (!videoFile) {
      return res.status(400).json({ message: "No video file uploaded" })
    }

let fileId, videoUrl

if (uploadType === "youtube") {
      // YouTube upload logic would go here
      // This requires a more complex OAuth2 flow with user consent
      return res.status(501).json({ message: "YouTube upload not implemented yet" })
    } else {
      // Google Drive upload
      const drive = setupDriveClient()

// Upload to Google Drive
      const fileMetadata = {
        name: title || videoFile.originalname,
        parents: ["root"], // Upload to root folder, change as needed
      }

const media = {
        mimeType: videoFile.mimetype,
        body: fs.createReadStream(videoFile.path),
      }

const driveResponse = await drive.files.create({
        resource: fileMetadata,
        media: media,
        fields: "id",
      })

// Make the file viewable with a link
      await drive.permissions.create({
        fileId: driveResponse.data.id,
        requestBody: {
          role: "reader",
          type: "anyone",
        },
      })

fileId = driveResponse.data.id
      videoUrl = `https://drive.google.com/file/d/${fileId}/view`
    }

// Create video document in MongoDB
    const video = new Video({
      title: title || videoFile.originalname,
      description,
      fileId,
      videoUrl,
      uploadType,
      privacy: privacy || "public",
      tags: tags ? tags.split(",").map((tag) => tag.trim()) : [],
      user: req.user.id,
      processed: false,
    })

await video.save()

// Start video processing in the background
    videoProcessingService
      .processVideo(video._id, videoFile.path)
      .then(() => {
        console.log(`Video ${video._id} processed successfully`)
      })
      .catch((error) => {
        console.error(`Error processing video ${video._id}:`, error)
      })
      .finally(() => {
        // Clean up the temporary file after processing
        try {
          fs.unlinkSync(videoFile.path)
        } catch (err) {
          console.error(`Error deleting temporary file ${videoFile.path}:`, err)
        }
      })

res.status(201).json({
      ...video.toObject(),
      processingStatus: "processing",
    })
  } catch (error) {
    console.error("Error uploading video:", error)

// Clean up the temporary file in case of error
    if (req.file && req.file.path) {
      try {
        fs.unlinkSync(req.file.path)
      } catch (err) {
        console.error(`Error deleting temporary file ${req.file.path}:`, err)
      }
    }

res.status(500).json({ message: "Server error" })
  }
})

// Update a video
router.put("/:id", authenticateToken, async (req, res) => {
  try {
    const { title, description, privacy, tags } = req.body

// Find the video and check ownership
    const video = await Video.findById(req.params.id)

if (!video) {
      return res.status(404).json({ message: "Video not found" })
    }

if (video.user.toString() !== req.user.id) {
      return res.status(403).json({ message: "Not authorized to update this video" })
    }

// Update the video
    video.title = title || video.title
    video.description = description || video.description
    video.privacy = privacy || video.privacy

if (tags) {
      video.tags = tags.split(",").map((tag) => tag.trim())
    }

await video.save()

res.json(video)
  } catch (error) {
    console.error("Error updating video:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Delete a video
router.delete("/:id", authenticateToken, async (req, res) => {
  try {
    // Find the video and check ownership
    const video = await Video.findById(req.params.id)

if (!video) {
      return res.status(404).json({ message: "Video not found" })
    }

if (video.user.toString() !== req.user.id && req.user.role !== "admin") {
      return res.status(403).json({ message: "Not authorized to delete this video" })
    }

// Delete from Google Drive
    const drive = setupDriveClient()
    await drive.files.delete({
      fileId: video.fileId,
    })

// Delete from MongoDB
    await Video.findByIdAndDelete(req.params.id)

res.json({ message: "Video deleted successfully" })
  } catch (error) {
    console.error("Error deleting video:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Like a video
router.post("/:id/like", authenticateToken, async (req, res) => {
  try {
    const video = await Video.findById(req.params.id)

if (!video) {
      return res.status(404).json({ message: "Video not found" })
    }

// In a real app, you would track which users liked which videos
    // For simplicity, we're just incrementing the like count
    video.likes += 1
    await video.save()

res.json({ likes: video.likes })
  } catch (error) {
    console.error("Error liking video:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Add a new route to check video processing status
router.get("/:id/status", authenticateToken, async (req, res) => {
  try {
    const video = await Video.findById(req.params.id)

if (!video) {
      return res.status(404).json({ message: "Video not found" })
    }

// Check if user is authorized to view this video
    if (video.user.toString() !== req.user.id && video.privacy === "private") {
      return res.status(403).json({ message: "Not authorized to view this video" })
    }

res.json({
      processed: video.processed,
      processingError: video.processingError,
      thumbnails: video.thumbnails,
    })
  } catch (error) {
    console.error("Error checking video status:", error)
    res.status(500).json({ message: "Server error" })
  }
})

// Add a new route to select a thumbnail
router.put("/:id/thumbnail/:thumbnailIndex", authenticateToken, async (req, res) => {
  try {
    const video = await Video.findById(req.params.id)

if (!video) {
      return res.status(404).json({ message: "Video not found" })
    }

// Check if user is authorized to update this video
    if (video.user.toString() !== req.user.id) {
      return res.status(403).json({ message: "Not authorized to update this video" })
    }

const thumbnailIndex = Number.parseInt(req.params.thumbnailIndex)

if (isNaN(thumbnailIndex) || thumbnailIndex < 0 || thumbnailIndex >= video.thumbnails.length) {
      return res.status(400).json({ message: "Invalid thumbnail index" })
    }

video.thumbnail = video.thumbnails[thumbnailIndex].url
    await video.save()

res.json({ success: true, thumbnail: video.thumbnail })
  } catch (error) {
    console.error("Error selecting thumbnail:", error)
    res.status(500).json({ message: "Server error" })
  }
})

export default router
[V0_FILE]typescriptreact:file="app/admin/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { SiteHeader } from "@/components/site-header"
import { useAuth } from "@/contexts/auth-context"
import { getAdminStats, getAdminUsers, getAdminVideos } from "@/lib/api"
import { AdminUsersList } from "@/components/admin/users-list"
import { AdminVideosList } from "@/components/admin/videos-list"
import { AdminStats } from "@/components/admin/stats"

export default function AdminDashboardPage() {
  const router = useRouter()
  const { user, isAuthenticated, isLoading: authLoading } = useAuth()
  const [stats, setStats] = useState<any>(null)
  const [users, setUsers] = useState<any[]>([])
  const [videos, setVideos] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [activeTab, setActiveTab] = useState("overview")

useEffect(() => {
    // Redirect if not authenticated or not admin
    if (!authLoading && (!isAuthenticated || user?.role !== "admin")) {
      router.push("/")
    }
  }, [isAuthenticated, authLoading, router, user])

useEffect(() => {
    const fetchData = async () => {
      if (isAuthenticated && user?.role === "admin") {
        setIsLoading(true)
        try {
          const [statsData, usersData, videosData] = await Promise.all([
            getAdminStats(),
            getAdminUsers(),
            getAdminVideos(),
          ])

setStats(statsData)
          setUsers(usersData)
          setVideos(videosData)
        } catch (error) {
          console.error("Error fetching admin data:", error)
        } finally {
          setIsLoading(false)
        }
      }
    }

fetchData()
  }, [isAuthenticated, user])

if (authLoading || (isAuthenticated && user?.role !== "admin")) {
    return null // Will redirect in useEffect
  }

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />
      <main className="flex-1 container py-6">
        <h1 className="text-3xl font-bold mb-6">Admin Dashboard</h1>

<Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-6">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="users">Users</TabsTrigger>
            <TabsTrigger value="videos">Videos</TabsTrigger>
            <TabsTrigger value="reports">Reports</TabsTrigger>
          </TabsList>

<TabsContent value="overview">
            {isLoading ? (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {Array(3)
                  .fill(0)
                  .map((_, index) => (
                    <Card key={index}>
                      <CardHeader className="pb-2">
                        <CardTitle className="h-4 bg-muted rounded animate-pulse w-1/2" />
                        <CardDescription className="h-3 bg-muted rounded animate-pulse w-1/3" />
                      </CardHeader>
                      <CardContent>
                        <div className="h-8 bg-muted rounded animate-pulse w-1/4" />
                      </CardContent>
                    </Card>
                  ))}
              </div>
            ) : (
              <AdminStats stats={stats} />
            )}
          </TabsContent>

<TabsContent value="users">
            {isLoading ? (
              <div className="space-y-4">
                {Array(5)
                  .fill(0)
                  .map((_, index) => (
                    <div key={index} className="h-16 bg-muted rounded animate-pulse" />
                  ))}
              </div>
            ) : (
              <AdminUsersList users={users} />
            )}
          </TabsContent>

<TabsContent value="videos">
            {isLoading ? (
              <div className="space-y-4">
                {Array(5)
                  .fill(0)
                  .map((_, index) => (
                    <div key={index} className="h-16 bg-muted rounded animate-pulse" />
                  ))}
              </div>
            ) : (
              <AdminVideosList videos={videos} />
            )}
          </TabsContent>

<TabsContent value="reports">
            <Card>
              <CardHeader>
                <CardTitle>Content Reports</CardTitle>
                <CardDescription>Manage reported content</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="text-center py-12">
                  <p className="text-muted-foreground">No reports to display</p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/stats.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from "recharts"

interface AdminStatsProps {
  stats: any
}

export function AdminStats({ stats }: AdminStatsProps) {
  if (!stats) return null

const { totalUsers, totalVideos, totalViews, newUsers, newVideos, dailyStats } = stats

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle>Total Users</CardTitle>
            <CardDescription>All registered users</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{totalUsers.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground mt-1">+{newUsers.toLocaleString()} in the last 30 days</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle>Total Videos</CardTitle>
            <CardDescription>All uploaded videos</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{totalVideos.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground mt-1">+{newVideos.toLocaleString()} in the last 30 days</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle>Total Views</CardTitle>
            <CardDescription>All video views</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{totalViews.toLocaleString()}</div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Activity Overview</CardTitle>
          <CardDescription>User and video activity over the last 30 days</CardDescription>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={350}>
            <BarChart data={dailyStats}>
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="newUsers" name="New Users" fill="#8884d8" />
              <Bar dataKey="newVideos" name="New Videos" fill="#82ca9d" />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/users-list.tsx"
"use client"

import { useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { updateUserRole, deleteUser } from "@/lib/api"
import { MoreHorizontal, Search } from "lucide-react"

interface AdminUsersListProps {
  users: any[]
}

export function AdminUsersList({ users }: AdminUsersListProps) {
  const { toast } = useToast()
  const [searchTerm, setSearchTerm] = useState("")
  const [roleFilter, setRoleFilter] = useState("all")
  const [filteredUsers, setFilteredUsers] = useState(users)

// Apply filters when search term or role filter changes
  useState(() => {
    let result = users

if (searchTerm) {
      const term = searchTerm.toLowerCase()
      result = result.filter(
        (user) => user.name.toLowerCase().includes(term) || user.email.toLowerCase().includes(term),
      )
    }

if (roleFilter !== "all") {
      result = result.filter((user) => user.role === roleFilter)
    }

setFilteredUsers(result)
  }, [users, searchTerm, roleFilter])

const handleRoleChange = async (userId: string, newRole: string) => {
    try {
      await updateUserRole(userId, newRole)

// Update local state
      setFilteredUsers((prev) => prev.map((user) => (user._id === userId ? { ...user, role: newRole } : user)))

toast({
        title: "Role updated",
        description: "User role has been updated successfully",
      })
    } catch (error) {
      console.error("Error updating user role:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to update user role",
      })
    }
  }

const handleDeleteUser = async (userId: string) => {
    if (!confirm("Are you sure you want to delete this user? This action cannot be undone.")) {
      return
    }

try {
      await deleteUser(userId)

// Update local state
      setFilteredUsers((prev) => prev.filter((user) => user._id !== userId))

toast({
        title: "User deleted",
        description: "User has been deleted successfully",
      })
    } catch (error) {
      console.error("Error deleting user:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to delete user",
      })
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Users Management</CardTitle>
        <div className="flex flex-col sm:flex-row gap-4 mt-4">
          <div className="relative flex-1">
            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search users..."
              className="pl-8"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <Select value={roleFilter} onValueChange={setRoleFilter}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filter by role" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Roles</SelectItem>
              <SelectItem value="user">User</SelectItem>
              <SelectItem value="creator">Creator</SelectItem>
              <SelectItem value="admin">Admin</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {filteredUsers.length === 0 ? (
            <div className="text-center py-4">
              <p className="text-muted-foreground">No users found</p>
            </div>
          ) : (
            filteredUsers.map((user) => (
              <div key={user._id} className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex items-center gap-4">
                  <Avatar>
                    <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
                    <AvatarFallback>{user.name[0]}</AvatarFallback>
                  </Avatar>
                  <div>
                    <h3 className="font-medium">{user.name}</h3>
                    <p className="text-sm text-muted-foreground">{user.email}</p>
                    <div className="flex items-center mt-1">
                      <span
                        className={`text-xs px-2 py-0.5 rounded-full ${
                          user.role === "admin"
                            ? "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
                            : user.role === "creator"
                              ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
                              : "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
                        }`}
                      >
                        {user.role}
                      </span>
                    </div>
                  </div>
                </div>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon">
                      <MoreHorizontal className="h-4 w-4" />
                      <span className="sr-only">Actions</span>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem onClick={() => handleRoleChange(user._id, "user")}>Set as User</DropdownMenuItem>
                    <DropdownMenuItem onClick={() => handleRoleChange(user._id, "creator")}>
                      Set as Creator
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => handleRoleChange(user._id, "admin")}>
                      Set as Admin
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      className="text-red-600 focus:text-red-600"
                      onClick={() => handleDeleteUser(user._id)}
                    >
                      Delete User
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            ))
          )}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/admin/videos-list.tsx"
"use client"

import { useState } from "react"
import Image from "next/image"
import { formatDistanceToNow } from "date-fns"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { deleteVideo } from "@/lib/api"
import { MoreHorizontal, Search, Eye, ThumbsUp } from "lucide-react"

interface AdminVideosListProps {
  videos: any[]
}

export function AdminVideosList({ videos }: AdminVideosListProps) {
  const { toast } = useToast()
  const [searchTerm, setSearchTerm] = useState("")
  const [privacyFilter, setPrivacyFilter] = useState("all")
  const [filteredVideos, setFilteredVideos] = useState(videos)

// Apply filters when search term or privacy filter changes
  useState(() => {
    let result = videos

if (searchTerm) {
      const term = searchTerm.toLowerCase()
      result = result.filter(
        (video) =>
          video.title.toLowerCase().includes(term) ||
          video.description.toLowerCase().includes(term) ||
          video.user.name.toLowerCase().includes(term),
      )
    }

if (privacyFilter !== "all") {
      result = result.filter((video) => video.privacy === privacyFilter)
    }

setFilteredVideos(result)
  }, [videos, searchTerm, privacyFilter])

const handleDeleteVideo = async (videoId: string) => {
    if (!confirm("Are you sure you want to delete this video? This action cannot be undone.")) {
      return
    }

try {
      await deleteVideo(videoId)

// Update local state
      setFilteredVideos((prev) => prev.filter((video) => video._id !== videoId))

toast({
        title: "Video deleted",
        description: "Video has been deleted successfully",
      })
    } catch (error) {
      console.error("Error deleting video:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to delete video",
      })
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Videos Management</CardTitle>
        <div className="flex flex-col sm:flex-row gap-4 mt-4">
          <div className="relative flex-1">
            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search videos..."
              className="pl-8"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <Select value={privacyFilter} onValueChange={setPrivacyFilter}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filter by privacy" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Videos</SelectItem>
              <SelectItem value="public">Public</SelectItem>
              <SelectItem value="unlisted">Unlisted</SelectItem>
              <SelectItem value="private">Private</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {filteredVideos.length === 0 ? (
            <div className="text-center py-4">
              <p className="text-muted-foreground">No videos found</p>
            </div>
          ) : (
            filteredVideos.map((video) => (
              <div key={video._id} className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex items-center gap-4">
                  <div className="relative w-40 h-24 rounded-md overflow-hidden bg-muted">
                    <Image
                      src={video.thumbnail || "/placeholder.svg"}
                      alt={video.title}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <div>
                    <h3 className="font-medium">{video.title}</h3>
                    <p className="text-sm text-muted-foreground">By {video.user.name}</p>
                    <div className="flex items-center gap-4 mt-1 text-xs text-muted-foreground">
                      <div className="flex items-center gap-1">
                        <Eye className="h-3 w-3" />
                        <span>{video.views.toLocaleString()}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <ThumbsUp className="h-3 w-3" />
                        <span>{video.likes.toLocaleString()}</span>
                      </div>
                      <span>{formatDistanceToNow(new Date(video.createdAt), { addSuffix: true })}</span>
                      <span className="capitalize">{video.privacy}</span>
                    </div>
                  </div>
                </div>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon">
                      <MoreHorizontal className="h-4 w-4" />
                      <span className="sr-only">Actions</span>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem onClick={() => window.open(`/watch/${video._id}`, "_blank")}>
                      View
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      className="text-red-600 focus:text-red-600"
                      onClick={() => handleDeleteVideo(video._id)}
                    >
                      Delete Video
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            ))
          )}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/studio/analytics/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { SiteHeader } from "@/components/site-header"
import { useAuth } from "@/contexts/auth-context"
import { getChannelAnalytics } from "@/lib/api"
import { AnalyticsOverview } from "@/components/analytics/overview"
import { AnalyticsVideos } from "@/components/analytics/videos"
import { AnalyticsAudience } from "@/components/analytics/audience"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function AnalyticsPage() {
  const router = useRouter()
  const { isAuthenticated, isLoading: authLoading } = useAuth()
  const [analytics, setAnalytics] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [activeTab, setActiveTab] = useState("overview")
  const [period, setPeriod] = useState("30d")

useEffect(() => {
    // Redirect if not authenticated
    if (!isAuthenticated && !authLoading) {
      router.push("/login")
    }
  }, [isAuthenticated, authLoading, router])

useEffect(() => {
    const fetchAnalytics = async () => {
      if (isAuthenticated) {
        setIsLoading(true)
        try {
          const data = await getChannelAnalytics(period)
          setAnalytics(data)
        } catch (error) {
          console.error("Error fetching analytics:", error)
        } finally {
          setIsLoading(false)
        }
      }
    }

fetchAnalytics()
  }, [isAuthenticated, period])

if (!isAuthenticated) {
    return null // Will redirect in useEffect
  }

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />
      <main className="flex-1 container py-6">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold">Analytics</h1>
          <Select value={period} onValueChange={setPeriod}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select period" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7d">Last 7 days</SelectItem>
              <SelectItem value="30d">Last 30 days</SelectItem>
              <SelectItem value="90d">Last 90 days</SelectItem>
              <SelectItem value="365d">Last year</SelectItem>
            </SelectContent>
          </Select>
        </div>

<Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-6">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="videos">Videos</TabsTrigger>
            <TabsTrigger value="audience">Audience</TabsTrigger>
          </TabsList>

<TabsContent value="overview">
            {isLoading ? (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {Array(3)
                  .fill(0)
                  .map((_, index) => (
                    <Card key={index}>
                      <CardHeader className="pb-2">
                        <CardTitle className="h-4 bg-muted rounded animate-pulse w-1/2" />
                        <CardDescription className="h-3 bg-muted rounded animate-pulse w-1/3" />
                      </CardHeader>
                      <CardContent>
                        <div className="h-8 bg-muted rounded animate-pulse w-1/4" />
                      </CardContent>
                    </Card>
                  ))}
              </div>
            ) : (
              <AnalyticsOverview analytics={analytics} />
            )}
          </TabsContent>

<TabsContent value="videos">
            {isLoading ? (
              <div className="space-y-4">
                {Array(5)
                  .fill(0)
                  .map((_, index) => (
                    <div key={index} className="h-16 bg-muted rounded animate-pulse" />
                  ))}
              </div>
            ) : (
              <AnalyticsVideos analytics={analytics} />
            )}
          </TabsContent>

<TabsContent value="audience">
            {isLoading ? (
              <Card>
                <CardHeader>
                  <CardTitle className="h-4 bg-muted rounded animate-pulse w-1/3" />
                  <CardDescription className="h-3 bg-muted rounded animate-pulse w-1/2" />
                </CardHeader>
                <CardContent>
                  <div className="h-64 bg-muted rounded animate-pulse" />
                </CardContent>
              </Card>
            ) : (
              <AnalyticsAudience analytics={analytics} />
            )}
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/analytics/overview.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Line, LineChart, ResponsiveContainer, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts"

interface AnalyticsOverviewProps {
  analytics: any
}

export function AnalyticsOverview({ analytics }: AnalyticsOverviewProps) {
  if (!analytics) return null

const { totalViews, totalLikes, totalComments, viewsChange, likesChange, commentsChange, dailyStats } = analytics

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle>Total Views</CardTitle>
            <CardDescription>All video views</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{totalViews.toLocaleString()}</div>
            <p className={`text-xs ${viewsChange >= 0 ? "text-green-500" : "text-red-500"} mt-1`}>
              {viewsChange >= 0 ? "+" : ""}
              {viewsChange}% from previous period
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle>Total Likes</CardTitle>
            <CardDescription>All video likes</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{totalLikes.toLocaleString()}</div>
            <p className={`text-xs ${likesChange >= 0 ? "text-green-500" : "text-red-500"} mt-1`}>
              {likesChange >= 0 ? "+" : ""}
              {likesChange}% from previous period
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle>Total Comments</CardTitle>
            <CardDescription>All video comments</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{totalComments.toLocaleString()}</div>
            <p className={`text-xs ${commentsChange >= 0 ? "text-green-500" : "text-red-500"} mt-1`}>
              {commentsChange >= 0 ? "+" : ""}
              {commentsChange}% from previous period
            </p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Views Over Time</CardTitle>
          <CardDescription>Daily views for the selected period</CardDescription>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={350}>
            <LineChart data={dailyStats}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Line type="monotone" dataKey="views" stroke="#8884d8" name="Views" />
            </LineChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/analytics/videos.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { formatDistanceToNow } from "date-fns"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Eye, ThumbsUp, MessageSquare, Search, ArrowUpDown } from "lucide-react"

interface AnalyticsVideosProps {
  analytics: any
}

export function AnalyticsVideos({ analytics }: AnalyticsVideosProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [sortBy, setSortBy] = useState<string>("views")
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc")

if (!analytics || !analytics.videos) return null

// Filter and sort videos
  const filteredVideos = analytics.videos
    .filter((video: any) => video.title.toLowerCase().includes(searchTerm.toLowerCase()))
    .sort((a: any, b: any) => {
      const multiplier = sortOrder === "desc" ? -1 : 1
      return multiplier * (a[sortBy] - b[sortBy])
    })

const toggleSort = (field: string) => {
    if (sortBy === field) {
      setSortOrder(sortOrder === "desc" ? "asc" : "desc")
    } else {
      setSortBy(field)
      setSortOrder("desc")
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Video Performance</CardTitle>
        <div className="relative mt-4">
          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search videos..."
            className="pl-8"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b">
                <th className="text-left py-3 px-4">Video</th>
                <th className="py-3 px-4">
                  <Button variant="ghost" size="sm" onClick={() => toggleSort("views")}>
                    <Eye className="h-4 w-4 mr-1" />
                    Views
                    {sortBy === "views" && (
                      <ArrowUpDown className={`h-3 w-3 ml-1 ${sortOrder === "asc" ? "rotate-180" : ""}`} />
                    )}
                  </Button>
                </th>
                <th className="py-3 px-4">
                  <Button variant="ghost" size="sm" onClick={() => toggleSort("likes")}>
                    <ThumbsUp className="h-4 w-4 mr-1" />
                    Likes
                    {sortBy === "likes" && (
                      <ArrowUpDown className={`h-3 w-3 ml-1 ${sortOrder === "asc" ? "rotate-180" : ""}`} />
                    )}
                  </Button>
                </th>
                <th className="py-3 px-4">
                  <Button variant="ghost" size="sm" onClick={() => toggleSort("comments")}>
                    <MessageSquare className="h-4 w-4 mr-1" />
                    Comments
                    {sortBy === "comments" && (
                      <ArrowUpDown className={`h-3 w-3 ml-1 ${sortOrder === "asc" ? "rotate-180" : ""}`} />
                    )}
                  </Button>
                </th>
                <th className="py-3 px-4">Published</th>
              </tr>
            </thead>
            <tbody>
              {filteredVideos.length === 0 ? (
                <tr>
                  <td colSpan={5} className="text-center py-4 text-muted-foreground">
                    No videos found
                  </td>
                </tr>
              ) : (
                filteredVideos.map((video: any) => (
                  <tr key={video.id} className="border-b hover:bg-muted/50">
                    <td className="py-3 px-4">
                      <div className="flex items-center gap-3">
                        <div className="relative w-24 h-14 rounded overflow-hidden bg-muted">
                          <Image
                            src={video.thumbnail || "/placeholder.svg"}
                            alt={video.title}
                            fill
                            className="object-cover"
                          />
                        </div>
                        <div className="max-w-xs">
                          <h4 className="font-medium truncate">{video.title}</h4>
                          <p className="text-xs text-muted-foreground">{video.duration}</p>
                        </div>
                      </div>
                    </td>
                    <td className="text-center py-3 px-4">{video.views.toLocaleString()}</td>
                    <td className="text-center py-3 px-4">{video.likes.toLocaleString()}</td>
                    <td className="text-center py-3 px-4">{video.comments.toLocaleString()}</td>
                    <td className="text-center py-3 px-4 text-sm text-muted-foreground">
                      {formatDistanceToNow(new Date(video.createdAt), { addSuffix: true })}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/analytics/audience.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Pie, PieChart, ResponsiveContainer, Cell, Legend, Tooltip } from "recharts"

interface AnalyticsAudienceProps {
  analytics: any
}

export function AnalyticsAudience({ analytics }: AnalyticsAudienceProps) {
  if (!analytics) return null

const { demographics, deviceStats, geoStats } = analytics

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8"]

return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <Card>
        <CardHeader>
          <CardTitle>Age Demographics</CardTitle>
          <CardDescription>Age distribution of your viewers</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={demographics.age}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                  nameKey="name"
                  label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                >
                  {demographics.age.map((entry: any, index: number) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Device Usage</CardTitle>
          <CardDescription>Devices used to watch your videos</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={deviceStats}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                  nameKey="name"
                  label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                >
                  {deviceStats.map((entry: any, index: number) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>

<Card className="md:col-span-2">
        <CardHeader>
          <CardTitle>Geographic Distribution</CardTitle>
          <CardDescription>Where your viewers are located</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="text-left py-3 px-4">Country</th>
                  <th className="text-right py-3 px-4">Views</th>
                  <th className="text-right py-3 px-4">Percentage</th>
                </tr>
              </thead>
              <tbody>
                {geoStats.map((country: any) => (
                  <tr key={country.name} className="border-b hover:bg-muted/50">
                    <td className="py-3 px-4">{country.name}</td>
                    <td className="text-right py-3 px-4">{country.views.toLocaleString()}</td>
                    <td className="text-right py-3 px-4">{country.percentage}%</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/live/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { SiteHeader } from "@/components/site-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { useAuth } from "@/contexts/auth-context"
import { getLiveStreams } from "@/lib/api"
import { LiveStreamCard } from "@/components/live-stream-card"
import { Plus } from "lucide-react"

export default function LivePage() {
  const router = useRouter()
  const { isAuthenticated } = useAuth()
  const [liveStreams, setLiveStreams] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const fetchLiveStreams = async () => {
      try {
        const data = await getLiveStreams()
        setLiveStreams(data)
        setIsLoading(false)
      } catch (error) {
        console.error("Error fetching live streams:", error)
        setIsLoading(false)
      }
    }

fetchLiveStreams()
  }, [])

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />
      <main className="flex-1 container py-6">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold">Live Streams</h1>
          {isAuthenticated && (
            <Button onClick={() => router.push("/live/create")}>
              <Plus className="mr-2 h-4 w-4" />
              Go Live
            </Button>
          )}
        </div>

{isLoading ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {Array(8)
              .fill(0)
              .map((_, index) => (
                <Card key={index} className="overflow-hidden">
                  <div className="aspect-video bg-muted animate-pulse" />
                  <CardContent className="p-4">
                    <div className="h-4 bg-muted rounded animate-pulse w-3/4 mb-2" />
                    <div className="h-3 bg-muted rounded animate-pulse w-1/2" />
                  </CardContent>
                </Card>
              ))}
          </div>
        ) : liveStreams.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {liveStreams.map((stream) => (
              <LiveStreamCard key={stream._id} stream={stream} />
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <h2 className="text-xl font-semibold mb-2">No Live Streams</h2>
            <p className="text-muted-foreground mb-6">There are no live streams at the moment.</p>
            {isAuthenticated && <Button onClick={() => router.push("/live/create")}>Start Streaming</Button>}
          </div>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/live-stream-card.tsx"
import Link from "next/link"
import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"

interface LiveStreamCardProps {
  stream: {
    _id: string
    title: string
    thumbnail: string
    viewers: number
    user: {
      _id: string
      name: string
      avatar: string
    }
  }
}

export function LiveStreamCard({ stream }: LiveStreamCardProps) {
  const formattedViewers = new Intl.NumberFormat("en-US", {
    notation: "compact",
    compactDisplay: "short",
  }).format(stream.viewers)

return (
    <Card className="overflow-hidden border-0 shadow-none">
      <Link href={`/live/${stream._id}`}>
        <div className="relative aspect-video overflow-hidden rounded-lg">
          <Image
            src={stream.thumbnail || "/placeholder.svg"}
            alt={stream.title}
            fill
            className="object-cover transition-transform hover:scale-105"
          />
          <div className="absolute top-2 left-2">
            <Badge variant="destructive" className="flex items-center gap-1">
              <span className="h-2 w-2 rounded-full bg-white animate-pulse" />
              LIVE
            </Badge>
          </div>
          <div className="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-2 py-1 rounded">
            {formattedViewers} viewers
          </div>
        </div>
      </Link>
      <CardContent className="p-3">
        <div className="flex gap-3">
          <Link href={`/channel/${stream.user._id}`}>
            <Avatar className="h-9 w-9">
              <AvatarImage src={stream.user.avatar || "/placeholder.svg"} alt={stream.user.name} />
              <AvatarFallback>{stream.user.name[0]}</AvatarFallback>
            </Avatar>
          </Link>
          <div>
            <Link href={`/live/${stream._id}`}>
              <h3 className="font-semibold line-clamp-2">{stream.title}</h3>
            </Link>
            <Link href={`/channel/${stream.user._id}`}>
              <p className="text-sm text-muted-foreground">{stream.user.name}</p>
            </Link>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/live/create/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { SiteHeader } from "@/components/site-header"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/contexts/auth-context"
import { createLiveStream } from "@/lib/api"

export default function CreateLiveStreamPage() {
  const router = useRouter()
  const { toast } = useToast()
  const { isAuthenticated, isLoading: authLoading } = useAuth()
  const [isCreating, setIsCreating] = useState(false)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    privacy: "public",
    category: "gaming",
  })

useEffect(() => {
    // Redirect if not authenticated
    if (!isAuthenticated && !authLoading) {
      router.push("/login")
    }
  }, [isAuthenticated, authLoading, router])

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!formData.title.trim()) {
      toast({
        variant: "destructive",
        title: "Title required",
        description: "Please enter a title for your live stream",
      })
      return
    }

setIsCreating(true)

try {
      const stream = await createLiveStream(formData)

toast({
        title: "Live stream created",
        description: "Your live stream has been created successfully",
      })

router.push(`/live/${stream._id}/manage`)
    } catch (error) {
      console.error("Error creating live stream:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to create live stream. Please try again.",
      })
    } finally {
      setIsCreating(false)
    }
  }

if (!isAuthenticated) {
    return null // Will redirect in useEffect
  }

<Card>
            <form onSubmit={handleSubmit}>
              <CardHeader>
                <CardTitle>Stream Details</CardTitle>
                <CardDescription>Provide information about your live stream</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="title">Title</Label>
                  <Input
                    id="title"
                    name="title"
                    placeholder="Add a title that describes your stream"
                    required
                    value={formData.title}
                    onChange={handleChange}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="description">Description</Label>
                  <Textarea
                    id="description"
                    name="description"
                    placeholder="Tell viewers about your stream"
                    rows={5}
                    value={formData.description}
                    onChange={handleChange}
                  />
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="privacy">Privacy</Label>
                    <Select value={formData.privacy} onValueChange={(value) => handleSelectChange("privacy", value)}>
                      <SelectTrigger id="privacy">
                        <SelectValue placeholder="Select privacy setting" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="public">Public</SelectItem>
                        <SelectItem value="unlisted">Unlisted</SelectItem>
                        <SelectItem value="private">Private</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="category">Category</Label>
                    <Select value={formData.category} onValueChange={(value) => handleSelectChange("category", value)}>
                      <SelectTrigger id="category">
                        <SelectValue placeholder="Select category" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="gaming">Gaming</SelectItem>
                        <SelectItem value="music">Music</SelectItem>
                        <SelectItem value="tech">Technology</SelectItem>
                        <SelectItem value="education">Education</SelectItem>
                        <SelectItem value="entertainment">Entertainment</SelectItem>
                        <SelectItem value="sports">Sports</SelectItem>
                        <SelectItem value="other">Other</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button type="button" variant="outline" onClick={() => router.push("/live")}>
                  Cancel
                </Button>
                <Button type="submit" disabled={isCreating}>
                  {isCreating ? "Creating..." : "Create Stream"}
                </Button>
              </CardFooter>
            </form>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]json:file="server/package.json" isEdit="true"
{
  "name": "videohub-backend",
  "version": "1.0.0",
  "description": "Backend for VideoHub platform",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "bcrypt": "^5.1.1",
    "cors": "^2.8.5",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "fluent-ffmpeg": "^2.1.2",
    "google-auth-library": "^9.0.0",
    "googleapis": "^129.0.0",
    "jsonwebtoken": "^9.0.2",
    "mongoose": "^8.0.3",
    "multer": "^1.4.5-lts.1",
    "socket.io": "^4.7.2"
  },
  "devDependencies": {
    "nodemon": "^3.0.2"
  }
}
[V0_FILE]javascript:file="server/index.js" isEdit="true"
import express from "express"
import mongoose from "mongoose"
import cors from "cors"
import dotenv from "dotenv"
import path from "path"
import { fileURLToPath } from "url"
import { createServer } from "http"
import { Server } from "socket.io"

// Import routes
import authRoutes from "./routes/auth.js"
import videoRoutes from "./routes/videos.js"
import commentRoutes from "./routes/comments.js"
import subscriptionRoutes from "./routes/subscriptions.js"
import searchRoutes from "./routes/search.js"
import channelRoutes from "./routes/channels.js"
import playlistRoutes from "./routes/playlists.js"
import recommendationRoutes from "./routes/recommendations.js"
import youtubeRoutes from "./routes/youtube.js"
import liveRoutes from "./routes/live.js"
import analyticsRoutes from "./routes/analytics.js"
import adminRoutes from "./routes/admin.js"
import userRoutes from "./routes/users.js"

// Load environment variables
dotenv.config()

// Initialize Express app
const app = express()
const PORT = process.env.PORT || 5000

// Create HTTP server
const server = createServer(app)

// Initialize Socket.IO
const io = new Server(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
})

// Middleware
app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// Connect to MongoDB
mongoose
  .connect(process.env.MONGODB_URI)
  .then(() => console.log("Connected to MongoDB"))
  .catch((err) => console.error("MongoDB connection error:", err))

// Create uploads directory if it doesn't exist
const __dirname = path.dirname(fileURLToPath(import.meta.url))
const uploadsDir = path.join(__dirname, "uploads")
import fs from "fs"
if (!fs.existsSync(uploadsDir)) {
  fs.mkdirSync(uploadsDir, { recursive: true })
}

// Make io available to routes
app.use((req, res, next) => {
  req.io = io
  next()
})

// Routes
app.use("/api/auth", authRoutes)
app.use("/api/videos", videoRoutes)
app.use("/api/comments", commentRoutes)
app.use("/api/subscriptions", subscriptionRoutes)
app.use("/api/search", searchRoutes)
app.use("/api/channels", channelRoutes)
app.use("/api/playlists", playlistRoutes)
app.use("/api/recommendations", recommendationRoutes)
app.use("/api/youtube", youtubeRoutes)
app.use("/api/live", liveRoutes)
app.use("/api/analytics", analyticsRoutes)
app.use("/api/admin", adminRoutes)
app.use("/api/users", userRoutes)

// Health check route
app.get("/health", (req, res) => {
  res.status(200).json({ status: "ok" })
})

// Socket.IO events
io.on("connection", (socket) => {
  console.log("A user connected:", socket.id)

// Join a live stream room
  socket.on("join-stream", (streamId) => {
    socket.join(streamId)
    console.log(`User ${socket.id} joined stream ${streamId}`)
  })

// Leave a live stream room
  socket.on("leave-stream", (streamId) => {
    socket.leave(streamId)
    console.log(`User ${socket.id} left stream ${streamId}`)
  })

// Handle chat messages
  socket.on("chat-message", (data) => {
    io.to(data.streamId).emit("chat-message", data)
  })

// Handle disconnection
  socket.on("disconnect", () => {
    console.log("A user disconnected:", socket.id)
  })
})

// Start the server
server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`)
})</article></body></html>