[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { MainNav } from "@/components/main-nav" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { VideoCard } from "@/components/video-card" import { CreatorCard } from "@/components/creator-card" export default function HomePage() { return (

Premium Adult Content Platform

Subscribe to your favorite creators, watch exclusive content, and join a community of like-minded adults.

Top Creators

{Array.from({ length: 6 }).map((_, i) => ( ))}

Live Now

{Array.from({ length: 4 }).map((_, i) => ( ))}

Featured Products

{Array.from({ length: 5 }).map((_, i) => (

{`Product ${i + 1}`}

{`Category ${(i % 3) + 1}`}

${Math.floor(Math.random() * 100) + 19.99}

))}

) } [V0_FILE]typescriptreact:file="components/video-card.tsx" isEdit="true" isMerged="true" import Link from "next/link" import Image from "next/image" import { formatDistanceToNow } from "date-fns" import { Crown, Radio } from "lucide-react" import { Badge } from "@/components/ui/badge" interface VideoCardProps { id: string title: string creator: string views: number timestamp: string thumbnail: string creatorAvatar: string duration: string isPremium?: boolean isLive?: boolean viewerCount?: number } export function VideoCard({ id, title, creator, views, timestamp, thumbnail, creatorAvatar, duration, isPremium = false, isLive = false, viewerCount, }: VideoCardProps) { const formattedViews = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1, }).format(views) const timeAgo = formatDistanceToNow(new Date(timestamp), { addSuffix: true }) return (

{isPremium && ( Premium )} {isLive ? ( {viewerCount ? `${new Intl.NumberFormat("en-US").format(viewerCount)} watching` : "LIVE"} ) : ( {duration} )}

{title}

{creator}

{formattedViews} views • {timeAgo}

) } [V0_FILE]typescriptreact:file="app/watch/[id]/page.tsx" isMerged="true" isEdit="true" import Link from "next/link" import Image from "next/image" import { formatDistanceToNow } from "date-fns" import { ThumbsUp, ThumbsDown, Share2, Save, Flag } from "lucide-react" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { Textarea } from "@/components/ui/textarea" export default function WatchPage({ params }: { params: { id: string } }) { // In a real app, you would fetch the video data based on the ID const video = { id: params.id, title: "How to Build a Video Sharing Platform with Next.js", description: "In this comprehensive tutorial, we'll walk through building a complete video sharing platform using Next.js, React, and Tailwind CSS. Learn how to implement video uploads, streaming, user authentication, and more.", channel: "TechTutorials", subscribers: 250000, views: 45231, likes: 3200, timestamp: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), channelAvatar: "/placeholder.svg?height=48&width=48", } const timeAgo = formatDistanceToNow(new Date(video.timestamp), { addSuffix: true }) const formattedViews = new Intl.NumberFormat("en-US").format(video.views) const formattedLikes = new Intl.NumberFormat("en-US").format(video.likes) const formattedSubscribers = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1, }).format(video.subscribers) return (

VideoShare

{/* In a real app, this would be a video player component */}

Video Player - {video.id}

{video.title}

{formattedViews} views • {timeAgo}

{video.channel}

{formattedSubscribers} subscribers

{video.description}

Comments

<div className="flex justify-end gap-2">
                  <Button variant="ghost" size="sm">
                    Cancel
                  </Button>
                  <Button size="sm">Comment</Button>
                </div>
              </div>
            </div>
            <div className="space-y-4">
              {Array.from({ length: 3 }).map((_, i) => (
                <div key={i} className="flex gap-4">
                  <Image
                    src={`/placeholder.svg?height=40&width=40&text=User${i + 1}`}
                    alt={`User ${i + 1}`}
                    width={40}
                    height={40}
                    className="h-10 w-10 rounded-full"
                  />
                  <div>
                    <div className="flex items-center gap-2">
                      <span className="font-medium">User {i + 1}</span>
                      <span className="text-xs text-muted-foreground">
                        {formatDistanceToNow(
                          new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000),
                          { addSuffix: true },
                        )}
                      </span>
                    </div>
                    <p className="mt-1 text-sm">
                      This is a great video! I learned a lot about building video platforms.
                    </p>
                    <div className="mt-2 flex gap-4">
                      <Button variant="ghost" size="sm" className="h-auto p-0 text-xs">
                        <ThumbsUp className="mr-1 h-3 w-3" />
                        {Math.floor(Math.random() * 100)}
                      </Button>
                      <Button variant="ghost" size="sm" className="h-auto p-0 text-xs">
                        <ThumbsDown className="mr-1 h-3 w-3" />
                      </Button>
                      <Button variant="ghost" size="sm" className="h-auto p-0 text-xs">
                        Reply
                      </Button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div>
          <h3 className="mb-4 text-lg font-medium">Recommended videos</h3>
          <div className="space-y-4">
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="flex gap-2">
                <Link href={`/watch/recommended-${i}`} className="relative flex-shrink-0">
                  <Image
                    src={`/placeholder.svg?height=94&width=168&text=Video+${i + 1}`}
                    alt={`Recommended Video ${i + 1}`}
                    width={168}
                    height={94}
                    className="rounded-lg object-cover"
                  />
                  <div className="absolute bottom-1 right-1 rounded bg-black/80 px-1 py-0.5 text-xs text-white">
                    {`${Math.floor(Math.random() * 10) + 1}:${Math.floor(Math.random() * 60)
                      .toString()
                      .padStart(2, "0")}`}
                  </div>
                </Link>
                <div className="flex-1">
                  <Link href={`/watch/recommended-${i}`}>
                    <h4 className="line-clamp-2 text-sm font-medium">
                      Recommended Video {i + 1} - How to Build Amazing Web Applications
                    </h4>
                  </Link>
                  <Link href={`/channel/creator-${i + 1}`}>
                    <p className="mt-1 text-xs text-muted-foreground">{`Creator ${i + 1}`}</p>
                  </Link>
                  <p className="text-xs text-muted-foreground">
                    {`${Math.floor(Math.random() * 500)}K views • ${formatDistanceToNow(
                      new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000),
                      { addSuffix: true },
                    )}`}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/upload/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useCallback } from "react"
import { useRouter } from "next/navigation"
import { useDropzone } from "react-dropzone"
import { AlertCircle, Upload, X } from "lucide-react"
import { MainNav } from "@/components/main-nav"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/components/auth-provider"

export default function UploadPage() {
  const [file, setFile] = useState<File | null>(null)
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [category, setCategory] = useState("")
  const [tags, setTags] = useState("")
  const [visibility, setVisibility] = useState("private")
  const [isPremium, setIsPremium] = useState(false)
  const [price, setPrice] = useState(5)
  const [allowComments, setAllowComments] = useState(true)
  const [isExplicit, setIsExplicit] = useState(false)
  const [uploading, setUploading] = useState(false)
  const [uploadProgress, setUploadProgress] = useState(0)

const { user } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

const onDrop = useCallback((acceptedFiles: File[]) => {
    if (acceptedFiles.length > 0) {
      setFile(acceptedFiles[0])
    }
  }, [])

const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: { "video/*": [] },
    maxFiles: 1,
  })

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

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

if (!title) {
      toast({
        title: "Title required",
        description: "Please add a title for your video.",
        variant: "destructive",
      })
      return
    }

setUploading(true)

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

// Simulate upload process
    try {
      // In a real application, you would upload the file to a server or cloud storage here
      await new Promise((resolve) => setTimeout(resolve, 5000))

toast({
        title: "Upload successful",
        description: "Your video has been uploaded and is being processed.",
      })
      router.push("/dashboard")
    } catch (error) {
      toast({
        title: "Upload failed",
        description: "There was an error uploading your video. Please try again.",
        variant: "destructive",
      })
    } finally {
      setUploading(false)
      clearInterval(interval)
      setUploadProgress(0)
    }
  }

if (!user?.isVerified || !user?.is18Plus) {
    return (
      <div className="min-h-screen bg-background">
        <MainNav />
        <main className="container max-w-4xl px-4 py-8">
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>Account Verification Required</AlertTitle>
            <AlertDescription>You need to verify your age and identity before uploading content.</AlertDescription>
          </Alert>
        </main>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <MainNav />
      <main className="container max-w-4xl px-4 py-8">
        <h1 className="mb-6 text-3xl font-bold">Upload Video</h1>
        <form onSubmit={handleSubmit} className="space-y-8">
          <div
            {...getRootProps()}
            className={`flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-12 transition-colors ${
              isDragActive ? "border-primary bg-primary/5" : "border-muted-foreground/25"
            }`}
          >
            <input {...getInputProps()} />
            {file ? (
              <div className="flex items-center gap-4">
                <Upload className="h-8 w-8 text-muted-foreground" />
                <div>
                  <p className="font-medium">{file.name}</p>
                  <p className="text-sm text-muted-foreground">{(file.size / (1024 * 1024)).toFixed(2)} MB</p>
                </div>
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  onClick={(e) => {
                    e.stopPropagation()
                    setFile(null)
                  }}
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ) : (
              <>
                <Upload className="mb-4 h-12 w-12 text-muted-foreground" />
                <p className="mb-2 text-xl font-medium">Drag and drop video files to upload</p>
                <p className="mb-4 text-sm text-muted-foreground">Or click to select files</p>
                <Button type="button" variant="secondary">
                  Select File
                </Button>
              </>
            )}
          </div>

<div className="space-y-4">
            <div>
              <Label htmlFor="title">Title</Label>
              <Input
                id="title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="Enter video title"
                required
              />
            </div>

<div>
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Describe your video"
                rows={4}
              />
            </div>

<div>
              <Label htmlFor="category">Category</Label>
              <Select value={category} onValueChange={setCategory}>
                <SelectTrigger>
                  <SelectValue placeholder="Select a category" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="amateur">Amateur</SelectItem>
                  <SelectItem value="professional">Professional</SelectItem>
                  <SelectItem value="fetish">Fetish</SelectItem>
                  <SelectItem value="lesbian">Lesbian</SelectItem>
                  <SelectItem value="gay">Gay</SelectItem>
                  <SelectItem value="trans">Trans</SelectItem>
                  <SelectItem value="solo">Solo</SelectItem>
                  <SelectItem value="couples">Couples</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div>
              <Label htmlFor="tags">Tags</Label>
              <Input
                id="tags"
                value={tags}
                onChange={(e) => setTags(e.target.value)}
                placeholder="Enter tags separated by commas"
              />
            </div>

<div>
              <Label htmlFor="visibility">Visibility</Label>
              <Select value={visibility} onValueChange={setVisibility}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="public">Public</SelectItem>
                  <SelectItem value="unlisted">Unlisted</SelectItem>
                  <SelectItem value="private">Private</SelectItem>
                  <SelectItem value="subscribers">Subscribers Only</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="flex items-center justify-between">
              <Label htmlFor="premium">Premium Content</Label>
              <Switch id="premium" checked={isPremium} onCheckedChange={setIsPremium} />
            </div>

{isPremium && (
              <div>
                <Label htmlFor="price">Price (USD)</Label>
                <div className="flex items-center gap-4">
                  <Slider
                    id="price"
                    min={1}
                    max={100}
                    step={1}
                    value={[price]}
                    onValueChange={(value) => setPrice(value[0])}
                    className="flex-grow"
                  />
                  <span className="w-12 text-right font-medium">${price.toFixed(2)}</span>
                </div>
              </div>
            )}

<div className="flex items-center space-x-2">
              <Checkbox
                id="comments"
                checked={allowComments}
                onCheckedChange={(checked) => setAllowComments(!!checked)}
              />
              <Label htmlFor="comments">Allow comments</Label>
            </div>

<div className="flex items-center space-x-2">
              <Checkbox id="explicit" checked={isExplicit} onCheckedChange={(checked) => setIsExplicit(!!checked)} />
              <Label htmlFor="explicit">Mark as explicit content</Label>
            </div>
          </div>

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

<div className="flex justify-end gap-4">
            <Button type="button" variant="outline" disabled={uploading}>
              Save as Draft
            </Button>
            <Button type="submit" disabled={!file || uploading}>
              {uploading ? "Uploading..." : "Upload Video"}
            </Button>
          </div>
        </form>
      </main>
    </div>
  )
}

[V0_FILE]typescript:file="app/signin/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Eye, EyeOff, KeyRound, Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Checkbox } from "@/components/ui/checkbox"
import { useAuth } from "@/components/auth-provider"
import { useToast } from "@/components/ui/use-toast"

export default function SignInPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [rememberMe, setRememberMe] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const { signIn, signInWithGoogle, signInWithApple } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

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

try {
      await signIn(email, password)
      toast({
        title: "Welcome back!",
        description: "You have successfully signed in.",
      })
      router.push("/dashboard")
    } catch (error) {
      toast({
        title: "Sign in failed",
        description: "Please check your credentials and try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleGoogleSignIn = async () => {
    try {
      await signInWithGoogle()
    } catch (error) {
      toast({
        title: "Google sign in failed",
        description: "There was an error signing in with Google. Please try again.",
        variant: "destructive",
      })
    }
  }

const handleAppleSignIn = async () => {
    try {
      await signInWithApple()
    } catch (error) {
      toast({
        title: "Apple sign in failed",
        description: "There was an error signing in with Apple. Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-1 flex-col items-center justify-center px-4 py-12">
        <div className="mx-auto w-full max-w-md space-y-6">
          <div className="space-y-2 text-center">
            <h1 className="text-3xl font-bold">Sign In</h1>
            <p className="text-muted-foreground">Enter your credentials to access your account</p>
          </div>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                <Input
                  id="email"
                  placeholder="name@example.com"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </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>
              <div className="relative">
                <KeyRound className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="pl-10 pr-10"
                  required
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="absolute right-0 top-0 h-10 w-10 px-0"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? (
                    <EyeOff className="h-4 w-4 text-muted-foreground" />
                  ) : (
                    <Eye className="h-4 w-4 text-muted-foreground" />
                  )}
                  <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
                </Button>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="remember" checked={rememberMe} onCheckedChange={(checked) => setRememberMe(!!checked)} />
              <Label htmlFor="remember" className="text-sm font-medium leading-none">
                Remember me
              </Label>
            </div>
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? "Signing in..." : "Sign In"}
            </Button>
          </form>
          <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <Separator className="w-full" />
            </div>
            <div className="relative flex justify-center text-xs uppercase">
              <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <Button variant="outline" onClick={handleGoogleSignIn}>
              Google
            </Button>
            <Button variant="outline" onClick={handleAppleSignIn}>
              Apple
            </Button>
          </div>
          <div className="text-center text-sm">
            Don't have an account?{" "}
            <Link href="/signup" className="text-primary hover:underline">
              Sign up
            </Link>
          </div>
          <div className="text-center text-xs text-muted-foreground">
            By signing in, you agree to our{" "}
            <Link href="/terms" className="underline">
              Terms of Service
            </Link>{" "}
            and{" "}
            <Link href="/privacy" className="underline">
              Privacy Policy
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"
import { AuthProvider } from "@/components/auth-provider"
import { Toaster } from "@/components/ui/toaster"
import "./globals.css"

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

export const metadata: Metadata = {
  title: "AdultFlix - Premium Adult Content Platform",
  description: "A secure platform for adult content creators and viewers",
  icons: {
    icon: [
      {
        url: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DALL%C2%B7E%202025-03-01%2017.56.01%20-%20A%20professional%20and%20elegant%20logo%20design%20for%20an%20adult%20content%20platform%2C%20without%20any%20text.%20The%20logo%20features%20a%20sleek%20combination%20of%20red%2C%20gold%2C%20neon%2C%20and%20-TZDSlgxd3TPIFqUxKiwKrbLiAitIxB.webp",
        sizes: "32x32",
        type: "image/webp",
      },
    ],
    apple:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DALL%C2%B7E%202025-03-01%2017.56.01%20-%20A%20professional%20and%20elegant%20logo%20design%20for%20an%20adult%20content%20platform%2C%20without%20any%20text.%20The%20logo%20features%20a%20sleek%20combination%20of%20red%2C%20gold%2C%20neon%2C%20and%20-TZDSlgxd3TPIFqUxKiwKrbLiAitIxB.webp",
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body className={`${inter.className} min-h-screen flex flex-col`}>
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
          <AuthProvider>
            <div className="flex-grow flex flex-col">{children}</div>
            <Toaster />
          </AuthProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]css:file="app/globals.css" isMerged="true" isEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 346 100% 58%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 346 100% 58%;
    --radius: 0.5rem;
  }

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 346 100% 58%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 10% 5.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 346 100% 58%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" isEdit="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" isEdit="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

[V0_FILE]typescript:file="components/auth-provider.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"
import type { User } from "@supabase/supabase-js"
import { useRouter } from "next/navigation"
import { supabase } from "@/lib/supabase-client"

type AuthContextType = {
  user: User | null
  signUp: (email: string, password: string) => Promise<void>
  signIn: (email: string, password: string) => Promise<void>
  signInWithGoogle: () => Promise<void>
  signInWithApple: () => Promise<void>
  signOut: () => Promise<void>
}

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

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const router = useRouter()

useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(async (event, session) => {
      setUser(session?.user ?? null)
      if (event === "SIGNED_IN") {
        router.push("/dashboard")
      }
      if (event === "SIGNED_OUT") {
        router.push("/")
      }
    })

return () => {
      authListener.subscription.unsubscribe()
    }
  }, [router])

const signUp = async (email: string, password: string) => {
    const { error } = await supabase.auth.signUp({ email, password })
    if (error) throw error
  }

const signIn = async (email: string, password: string) => {
    const { error } = await supabase.auth.signInWithPassword({ email, password })
    if (error) throw error
  }

const signInWithGoogle = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: "google",
    })
    if (error) throw error
  }

const signInWithApple = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: "apple",
    })
    if (error) throw error
  }

const signOut = async () => {
    const { error } = await supabase.auth.signOut()
    if (error) throw error
  }

return (
    <AuthContext.Provider value={{ user, signUp, signIn, signInWithGoogle, signInWithApple, signOut }}>
      {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
}

[V0_FILE]typescriptreact:file="components/main-nav.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Menu, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { ModeToggle } from "@/components/mode-toggle"

export function MainNav() {
  const pathname = usePathname()

const routes = [
    {
      href: "/",
      label: "Home",
      active: pathname === "/",
    },
    {
      href: "/explore",
      label: "Explore",
      active: pathname === "/explore",
    },
    {
      href: "/live",
      label: "Live",
      active: pathname === "/live",
    },
    {
      href: "/store",
      label: "Store",
      active: pathname === "/store",
    },
  ]

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center">
        <Sheet>
          <SheetTrigger asChild>
            <Button variant="ghost" size="icon" className="mr-2 md:hidden">
              <Menu className="h-5 w-5" />
              <span className="sr-only">Toggle menu</span>
            </Button>
          </SheetTrigger>
          <SheetContent side="left" className="w-[300px] sm:w-[400px]">
            <nav className="flex flex-col gap-4 py-4">
              {routes.map((route) => (
                <Link
                  key={route.href}
                  href={route.href}
                  className={`block px-2 py-1 text-lg ${
                    route.active ? "font-medium text-primary" : "text-muted-foreground"
                  }`}
                >
                  {route.label}
                </Link>
              ))}
            </nav>
          </SheetContent>
        </Sheet>
        <Link href="/" className="mr-6 flex items-center space-x-2">
          <span className="hidden text-xl font-bold sm:inline-block">AdultFlix</span>
        </Link>
        <nav className="hidden md:flex md:gap-6">
          {routes.map((route) => (
            <Link
              key={route.href}
              href={route.href}
              className={`text-sm font-medium ${
                route.active ? "text-foreground" : "text-muted-foreground"
              } transition-colors hover:text-foreground`}
            >
              {route.label}
            </Link>
          ))}
        </nav>
        <div className="flex flex-1 items-center justify-end space-x-4">
          <div className="relative w-full max-w-sm">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              type="search"
              placeholder="Search videos, creators, products..."
              className="w-full rounded-full bg-muted pl-8 md:w-[300px] lg:w-[400px]"
            />
          </div>
          <ModeToggle />
          <div className="flex items-center gap-2">
            <Link href="/signin">
              <Button variant="ghost" size="sm">
                Sign In
              </Button>
            </Link>
            <Link href="/signup">
              <Button size="sm">Sign Up</Button>
            </Link>
          </div>
        </div>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/user-nav.tsx" isMerged="true" isEdit="true"
"use client"

import Link from "next/link"
import { CreditCard, LogOut, Settings, User } from "lucide-react"
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 "@/components/auth-provider"

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

if (!user) return null

return (
    <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?height=32&width=32"} alt={user.username} />
            <AvatarFallback>{user.username.substring(0, 2).toUpperCase()}</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.username}</p>
            <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem asChild>
            <Link href="/profile">
              <User className="mr-2 h-4 w-4" />
              <span>Profile</span>
            </Link>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <Link href="/billing">
              <CreditCard className="mr-2 h-4 w-4" />
              <span>Billing</span>
            </Link>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <Link href="/settings">
              <Settings className="mr-2 h-4 w-4" />
              <span>Settings</span>
            </Link>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={logout}>
          <LogOut className="mr-2 h-4 w-4" />
          <span>Log out</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

[V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isMerged="true" isEdit="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 ModeToggle() {
  const { setTheme } = useTheme()

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

[V0_FILE]typescriptreact:file="components/age-verification.tsx" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Shield } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { useAuth } from "@/components/auth-provider"
import { useToast } from "@/components/ui/use-toast"

export function AgeVerification() {
  const [agreed, setAgreed] = useState(false)
  const { verifyAge } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

const handleVerify = async () => {
    if (!agreed) {
      toast({
        title: "Confirmation Required",
        description: "You must confirm that you are 18+ to continue.",
        variant: "destructive",
      })
      return
    }

try {
      await verifyAge()
      toast({
        title: "Age Verified",
        description: "You now have access to all content.",
      })
      router.push("/")
    } catch (error) {
      toast({
        title: "Verification Failed",
        description: "There was an error verifying your age. Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
      <Card className="mx-auto max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
            <Shield className="h-6 w-6 text-primary" />
          </div>
          <CardTitle className="text-2xl">Age Verification Required</CardTitle>
          <CardDescription>
            This website contains adult content and is only for users who are 18 years of age or older.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="rounded-lg bg-muted p-4 text-sm">
            <p>By entering this site, you confirm that:</p>
            <ul className="ml-6 mt-2 list-disc space-y-1">
              <li>You are at least 18 years old or the age of majority in your jurisdiction</li>
              <li>You agree to our Terms of Service and Privacy Policy</li>
              <li>You understand this site contains explicit adult content that some may find offensive</li>
            </ul>
          </div>
          <div className="flex items-start space-x-2">
            <Checkbox id="age-confirmation" checked={agreed} onCheckedChange={(checked) => setAgreed(!!checked)} />
            <label
              htmlFor="age-confirmation"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              I am at least 18 years old and I accept the terms and conditions
            </label>
          </div>
        </CardContent>
        <CardFooter className="flex flex-col space-y-2">
          <Button className="w-full" onClick={handleVerify} disabled={!agreed}>
            I am 18+ - Enter Site
          </Button>
          <Button
            variant="outline"
            className="w-full"
            onClick={() => (window.location.href = "https://www.google.com")}
          >
            Exit - I am under 18
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescript:file="app/signup/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Eye, EyeOff, KeyRound, Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Checkbox } from "@/components/ui/checkbox"
import { useAuth } from "@/components/auth-provider"
import { useToast } from "@/components/ui/use-toast"

export default function SignUpPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [agreeTerms, setAgreeTerms] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const { signUp, signInWithGoogle, signInWithApple } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

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

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

if (!agreeTerms) {
      toast({
        title: "Terms agreement required",
        description: "You must agree to the terms and conditions to create an account.",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)

try {
      await signUp(email, password)
      toast({
        title: "Account created!",
        description: "Your account has been created successfully. Please verify your email to continue.",
      })
      router.push("/dashboard")
    } catch (error) {
      toast({
        title: "Registration failed",
        description: "There was an error creating your account. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleGoogleSignUp = async () => {
    try {
      await signInWithGoogle()
      router.push("/dashboard")
    } catch (error) {
      toast({
        title: "Google sign up failed",
        description: "There was an error signing up with Google. Please try again.",
        variant: "destructive",
      })
    }
  }

const handleAppleSignUp = async () => {
    try {
      await signInWithApple()
      router.push("/dashboard")
    } catch (error) {
      toast({
        title: "Apple sign up failed",
        description: "There was an error signing up with Apple. Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-1 flex-col items-center justify-center px-4 py-12">
        <div className="mx-auto w-full max-w-md space-y-6">
          <div className="space-y-2 text-center">
            <h1 className="text-3xl font-bold">Create an Account</h1>
            <p className="text-muted-foreground">Enter your information to create an account</p>
          </div>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                <Input
                  id="email"
                  placeholder="name@example.com"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <div className="relative">
                <KeyRound className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="pl-10 pr-10"
                  required
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="absolute right-0 top-0 h-10 w-10 px-0"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? (
                    <EyeOff className="h-4 w-4 text-muted-foreground" />
                  ) : (
                    <Eye className="h-4 w-4 text-muted-foreground" />
                  )}
                  <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
                </Button>
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="confirm-password">Confirm Password</Label>
              <div className="relative">
                <KeyRound className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                <Input
                  id="confirm-password"
                  type={showPassword ? "text" : "password"}
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  className="pl-10 pr-10"
                  required
                />
              </div>
            </div>
            <div className="flex items-start space-x-2">
              <Checkbox id="terms" checked={agreeTerms} onCheckedChange={(checked) => setAgreeTerms(!!checked)} />
              <label
                htmlFor="terms"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                I agree to the{" "}
                <Link href="/terms" className="text-primary hover:underline">
                  Terms of Service
                </Link>{" "}
                and{" "}
                <Link href="/privacy" className="text-primary hover:underline">
                  Privacy Policy
                </Link>
              </label>
            </div>
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? "Creating account..." : "Create Account"}
            </Button>
          </form>
          <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <Separator className="w-full" />
            </div>
            <div className="relative flex justify-center text-xs uppercase">
              <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <Button variant="outline" onClick={handleGoogleSignUp}>
              Google
            </Button>
            <Button variant="outline" onClick={handleAppleSignUp}>
              Apple
            </Button>
          </div>
          <div className="text-center text-sm">
            Already have an account?{" "}
            <Link href="/signin" className="text-primary hover:underline">
              Sign in
            </Link>
          </div>
          <div className="text-center text-xs text-muted-foreground">
            By creating an account, you confirm that you are at least 18 years of age.
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/verify-age/page.tsx" isMerged="true" isEdit="true"
import { AgeVerification } from "@/components/age-verification"

export default function VerifyAgePage() {
  return <AgeVerification />
}

[V0_FILE]typescriptreact:file="app/verify-identity/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { FileText, Shield, Upload } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { useAuth } from "@/components/auth-provider"
import { useToast } from "@/components/ui/use-toast"

export default function VerifyIdentityPage() {
  const [idType, setIdType] = useState("passport")
  const [frontImage, setFrontImage] = useState<File | null>(null)
  const [backImage, setBackImage] = useState<File | null>(null)
  const [selfieImage, setSelfieImage] = useState<File | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const { startIdVerification } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

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

if (!frontImage || !selfieImage || (idType !== "passport" && !backImage)) {
      toast({
        title: "Missing documents",
        description: "Please upload all required documents.",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)

try {
      // In a real app, you would upload these files to a secure verification service
      await startIdVerification()
      toast({
        title: "Verification submitted",
        description: "Your ID verification has been submitted and is being processed.",
      })
      router.push("/dashboard")
    } catch (error) {
      toast({
        title: "Verification failed",
        description: "There was an error submitting your verification. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="container mx-auto max-w-3xl px-4 py-12">
      <Card>
        <CardHeader className="text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
            <Shield className="h-6 w-6 text-primary" />
          </div>
          <CardTitle className="text-2xl">Verify Your Identity</CardTitle>
          <CardDescription>
            To become a creator, we need to verify your identity. This helps ensure platform safety and compliance with
            regulations.
          </CardDescription>
        </CardHeader>
        <form onSubmit={handleSubmit}>
          <CardContent className="space-y-6">
            <div className="space-y-4">
              <Label>Select ID Type</Label>
              <RadioGroup value={idType} onValueChange={setIdType} className="grid grid-cols-1 gap-4 sm:grid-cols-3">
                <div>
                  <RadioGroupItem value="passport" id="passport" className="peer sr-only" />
                  <Label
                    htmlFor="passport"
                    className="flex cursor-pointer flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                  >
                    <FileText className="mb-3 h-6 w-6" />
                    <span className="text-sm font-medium">Passport</span>
                  </Label>
                </div>
                <div>
                  <RadioGroupItem value="drivers-license" id="drivers-license" className="peer sr-only" />
                  <Label
                    htmlFor="drivers-license"
                    className="flex cursor-pointer flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                  >
                    <FileText className="mb-3 h-6 w-6" />
                    <span className="text-sm font-medium">Driver's License</span>
                  </Label>
                </div>
                <div>
                  <RadioGroupItem value="id-card" id="id-card" className="peer sr-only" />
                  <Label
                    htmlFor="id-card"
                    className="flex cursor-pointer flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                  >
                    <FileText className="mb-3 h-6 w-6" />
                    <span className="text-sm font-medium">ID Card</span>
                  </Label>
                </div>
              </RadioGroup>
            </div>

<div className="space-y-4">
              <div>
                <Label htmlFor="front-id">Front of ID</Label>
                <div className="mt-2 flex items-center gap-4">
                  <div className="relative flex h-32 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted p-4 text-center hover:bg-accent hover:text-accent-foreground">
                    <Upload className="mb-2 h-6 w-6 text-muted-foreground" />
                    <p className="text-sm font-medium">Upload front of ID</p>
                    <p className="text-xs text-muted-foreground">JPG, PNG or PDF up to 5MB</p>
                    <Input
                      id="front-id"
                      type="file"
                      accept="image/jpeg,image/png,application/pdf"
                      className="absolute inset-0 cursor-pointer opacity-0"
                      onChange={(e) => e.target.files && setFrontImage(e.target.files[0])}
                    />
                  </div>
                  {frontImage && (
                    <div className="text-sm">
                      <p className="font-medium">{frontImage.name}</p>
                      <p className="text-muted-foreground">{(frontImage.size / 1024 / 1024).toFixed(2)} MB</p>
                    </div>
                  )}
                </div>
              </div>

{idType !== "passport" && (
                <div>
                  <Label htmlFor="back-id">Back of ID</Label>
                  <div className="mt-2 flex items-center gap-4">
                    <div className="relative flex h-32 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted p-4 text-center hover:bg-accent hover:text-accent-foreground">
                      <Upload className="mb-2 h-6 w-6 text-muted-foreground" />
                      <p className="text-sm font-medium">Upload back of ID</p>
                      <p className="text-xs text-muted-foreground">JPG, PNG or PDF up to 5MB</p>
                      <Input
                        id="back-id"
                        type="file"
                        accept="image/jpeg,image/png,application/pdf"
                        className="absolute inset-0 cursor-pointer opacity-0"
                        onChange={(e) => e.target.files && setBackImage(e.target.files[0])}
                      />
                    </div>
                    {backImage && (
                      <div className="text-sm">
                        <p className="font-medium">{backImage.name}</p>
                        <p className="text-muted-foreground">{(backImage.size / 1024 / 1024).toFixed(2)} MB</p>
                      </div>
                    )}
                  </div>
                </div>
              )}

<div>
                <Label htmlFor="selfie">Selfie with ID</Label>
                <div className="mt-2 flex items-center gap-4">
                  <div className="relative flex h-32 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted p-4 text-center hover:bg-accent hover:text-accent-foreground">
                    <Upload className="mb-2 h-6 w-6 text-muted-foreground" />
                    <p className="text-sm font-medium">Upload selfie with ID</p>
                    <p className="text-xs text-muted-foreground">JPG or PNG up to 5MB</p>
                    <Input
                      id="selfie"
                      type="file"
                      accept="image/jpeg,image/png"
                      className="absolute inset-0 cursor-pointer opacity-0"
                      onChange={(e) => e.target.files && setSelfieImage(e.target.files[0])}
                    />
                  </div>
                  {selfieImage && (
                    <div className="text-sm">
                      <p className="font-medium">{selfieImage.name}</p>
                      <p className="text-muted-foreground">{(selfieImage.size / 1024 / 1024).toFixed(2)} MB</p>
                    </div>
                  )}
                </div>
              </div>
            </div>

<div className="rounded-lg bg-muted p-4 text-sm">
              <p className="font-medium">Privacy & Security</p>
              <p className="mt-1 text-muted-foreground">
                Your ID documents are securely processed and encrypted. We use industry-standard verification services
                and do not store your original documents after verification is complete.
              </p>
            </div>
          </CardContent>
          <CardFooter>
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? "Submitting..." : "Submit for Verification"}
            </Button>
          </CardFooter>
        </form>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/settings/two-factor/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Copy, KeyRound, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useAuth } from "@/components/auth-provider"
import { useToast } from "@/components/ui/use-toast"

export default function TwoFactorPage() {
  const [verificationCode, setVerificationCode] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const { enableTwoFactor } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

// In a real app, this would be generated on the server
  const secretKey = "ABCDEFGHIJKLMNOP"
  const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=otpauth://totp/AdultFlix:user123?secret=${secretKey}&issuer=AdultFlix`

const handleCopySecret = () => {
    navigator.clipboard.writeText(secretKey)
    toast({
      title: "Secret copied",
      description: "The secret key has been copied to your clipboard.",
    })
  }

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

if (verificationCode.length !== 6) {
      toast({
        title: "Invalid code",
        description: "Please enter a valid 6-digit verification code.",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)

try {
      // In a real app, you would verify the code against the secret
      await enableTwoFactor()
      toast({
        title: "Two-factor authentication enabled",
        description: "Your account is now more secure with 2FA.",
      })
      router.push("/settings")
    } catch (error) {
      toast({
        title: "Verification failed",
        description: "The code you entered is incorrect. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="container mx-auto max-w-md px-4 py-12">
      <Card>
        <CardHeader className="text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
            <KeyRound className="h-6 w-6 text-primary" />
          </div>
          <CardTitle className="text-2xl">Set Up Two-Factor Authentication</CardTitle>
          <CardDescription>
            Add an extra layer of security to your account by enabling two-factor authentication.
          </CardDescription>
        </CardHeader>
        <form onSubmit={handleSubmit}>
          <CardContent className="space-y-6">
            <div className="space-y-4">
              <div className="rounded-lg bg-muted p-4 text-sm">
                <p className="font-medium">Step 1: Scan QR Code</p>
                <p className="mt-1 text-muted-foreground">
                  Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.).
                </p>
              </div>

<div className="space-y-2">
                <Label>Secret Key</Label>
                <div className="flex items-center gap-2">
                  <Input value={secretKey} readOnly className="font-mono" />
                  <Button type="button" variant="outline" size="icon" onClick={handleCopySecret}>
                    <Copy className="h-4 w-4" />
                  </Button>
                </div>
                <p className="text-xs text-muted-foreground">
                  If you can't scan the QR code, you can manually enter this secret key into your authenticator app.
                </p>
              </div>
            </div>

<div className="space-y-4">
              <div className="rounded-lg bg-muted p-4 text-sm">
                <p className="font-medium">Step 2: Enter Verification Code</p>
                <p className="mt-1 text-muted-foreground">
                  Enter the 6-digit code from your authenticator app to verify setup.
                </p>
              </div>

<div className="space-y-2">
                <Label htmlFor="verification-code">Verification Code</Label>
                <Input
                  id="verification-code"
                  placeholder="000000"
                  value={verificationCode}
                  onChange={(e) => setVerificationCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
                  className="font-mono text-center text-lg tracking-widest"
                  maxLength={6}
                />
              </div>
            </div>

<div className="rounded-lg bg-muted p-4 text-sm">
              <p className="font-medium">Important</p>
              <p className="mt-1 text-muted-foreground">
                Store your backup codes in a safe place. If you lose access to your authenticator app, you'll need these
                codes to recover your account.
              </p>
            </div>
          </CardContent>
          <CardFooter className="flex flex-col gap-4">
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? "Verifying..." : "Enable Two-Factor Authentication"}
            </Button>
            <Button type="button" variant="outline" className="w-full">
              <RefreshCw className="mr-2 h-4 w-4" />
              Generate New QR Code
            </Button>
          </CardFooter>
        </form>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/creator-card.tsx" isMerged="true" isEdit="true"
import Link from "next/link"
import Image from "next/image"
import { BadgeCheck, Radio } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

interface CreatorCardProps {
  id: string
  name: string
  avatar: string
  subscribers: number
  contentCount: number
  isVerified?: boolean
  isOnline?: boolean
}

export function CreatorCard({
  id,
  name,
  avatar,
  subscribers,
  contentCount,
  isVerified = false,
  isOnline = false,
}: CreatorCardProps) {
  const formattedSubscribers = new Intl.NumberFormat("en-US", {
    notation: "compact",
    maximumFractionDigits: 1,
  }).format(subscribers)

return (
    <Link href={`/creator/${id}`} className="group">
      <div className="flex flex-col items-center text-center">
        <div className="relative mb-3">
          <div className="relative h-24 w-24 overflow-hidden rounded-full">
            <Image
              src={avatar || "/placeholder.svg"}
              alt={name}
              width={96}
              height={96}
              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110"
            />
          </div>
          {isVerified && (
            <div className="absolute -right-1 bottom-0 rounded-full bg-background p-0.5">
              <BadgeCheck className="h-5 w-5 text-primary" />
            </div>
          )}
          {isOnline && (
            <div className="absolute -right-1 top-0">
              <Badge variant="secondary" className="flex items-center gap-1 bg-red-500 text-white">
                <Radio className="h-2 w-2 animate-pulse" />
                <span className="text-xs">Live</span>
              </Badge>
            </div>
          )}
        </div>
        <h3 className="font-medium group-hover:text-primary">{name}</h3>
        <p className="text-xs text-muted-foreground">{formattedSubscribers} subscribers</p>
        <p className="text-xs text-muted-foreground">{contentCount} videos</p>
        <Button variant="outline" size="sm" className="mt-2">
          Subscribe
        </Button>
      </div>
    </Link>
  )
}

[V0_FILE]typescriptreact:file="app/settings/subscriptions/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import { MainNav } from "@/components/main-nav"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { useToast } from "@/components/ui/use-toast"

export default function SubscriptionsPage() {
  const [activeSubscriptions, setActiveSubscriptions] = useState([
    {
      id: "sub-1",
      creatorName: "Creator 1",
      creatorAvatar: "/placeholder.svg?height=40&width=40",
      plan: "Monthly",
      price: 9.99,
      renewDate: "2023-06-15",
      autoRenew: true,
    },
    {
      id: "sub-2",
      creatorName: "Creator 2",
      creatorAvatar: "/placeholder.svg?height=40&width=40",
      plan: "Yearly",
      price: 99.99,
      renewDate: "2023-12-01",
      autoRenew: true,
    },
    {
      id: "sub-3",
      creatorName: "Creator 3",
      creatorAvatar: "/placeholder.svg?height=40&width=40",
      plan: "Monthly",
      price: 14.99,
      renewDate: "2023-06-22",
      autoRenew: false,
    },
  ])

const [paymentHistory] = useState([
    {
      id: "payment-1",
      creatorName: "Creator 1",
      amount: 9.99,
      date: "2023-05-15",
      status: "completed",
      type: "subscription",
    },
    {
      id: "payment-2",
      creatorName: "Creator 2",
      amount: 99.99,
      date: "2023-01-01",
      status: "completed",
      type: "subscription",
    },
    {
      id: "payment-3",
      creatorName: "Creator 3",
      amount: 14.99,
      date: "2023-05-22",
      status: "completed",
      type: "subscription",
    },
    {
      id: "payment-4",
      creatorName: "Creator 4",
      amount: 4.99,
      date: "2023-05-10",
      status: "completed",
      type: "tip",
    },
    {
      id: "payment-5",
      productName: "Premium Video",
      amount: 19.99,
      date: "2023-05-05",
      status: "completed",
      type: "purchase",
    },
  ])

const { toast } = useToast()

const toggleAutoRenew = (subscriptionId: string) => {
    setActiveSubscriptions(
      activeSubscriptions.map((sub) => {
        if (sub.id === subscriptionId) {
          const newState = !sub.autoRenew
          toast({
            title: newState ? "Auto-renewal enabled" : "Auto-renewal disabled",
            description: newState
              ? `Your subscription to ${sub.creatorName} will automatically renew.`
              : `Your subscription to ${sub.creatorName} will expire on ${new Date(sub.renewDate).toLocaleDateString()}.`,
          })
          return { ...sub, autoRenew: newState }
        }
        return sub
      }),
    )
  }

const cancelSubscription = (subscriptionId: string) => {
    const subscription = activeSubscriptions.find((sub) => sub.id === subscriptionId)
    if (subscription) {
      toast({
        title: "Subscription canceled",
        description: `Your subscription to ${subscription.creatorName} has been canceled. You'll have access until ${new Date(
          subscription.renewDate,
        ).toLocaleDateString()}.`,
      })
      setActiveSubscriptions(activeSubscriptions.filter((sub) => sub.id !== subscriptionId))
    }
  }

return (
    <div className="min-h-screen bg-background">
      <MainNav />
      <main className="container px-4 py-8">
        <div className="mx-auto max-w-4xl">
          <h1 className="mb-6 text-2xl font-bold">Subscriptions & Payments</h1>

<Tabs defaultValue="active" className="mb-8">
            <TabsList className="mb-4">
              <TabsTrigger value="active">Active Subscriptions</TabsTrigger>
              <TabsTrigger value="history">Payment History</TabsTrigger>
            </TabsList>

<TabsContent value="active" className="space-y-4">
              {activeSubscriptions.length === 0 ? (
                <Card>
                  <CardContent className="flex flex-col items-center justify-center py-12 text-center">
                    <p className="mb-2 text-lg font-medium">No active subscriptions</p>
                    <p className="mb-6 text-muted-foreground">You don't have any active subscriptions at the moment.</p>
                    <Button>Explore Creators</Button>
                  </CardContent>
                </Card>
              ) : (
                activeSubscriptions.map((subscription) => (
                  <Card key={subscription.id}>
                    <CardHeader className="pb-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                          <Avatar>
                            <AvatarImage src={subscription.creatorAvatar} alt={subscription.creatorName} />
                            <AvatarFallback>{subscription.creatorName.substring(0, 2)}</AvatarFallback>
                          </Avatar>
                          <div>
                            <CardTitle className="text-lg">{subscription.creatorName}</CardTitle>
                            <CardDescription>
                              {subscription.plan} • ${subscription.price.toFixed(2)}
                            </CardDescription>
                          </div>
                        </div>
                        <Badge variant={subscription.autoRenew ? "default" : "outline"}>
                          {subscription.autoRenew ? "Active" : "Expires Soon"}
                        </Badge>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">
                        {subscription.autoRenew
                          ? `Renews on ${new Date(subscription.renewDate).toLocaleDateString()}`
                          : `Expires on ${new Date(subscription.renewDate).toLocaleDateString()}`}
                      </p>
                    </CardContent>
                    <CardFooter className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Switch
                          id={`auto-renew-${subscription.id}`}
                          checked={subscription.autoRenew}
                          onCheckedChange={() => toggleAutoRenew(subscription.id)}
                        />
                        <Label htmlFor={`auto-renew-${subscription.id}`}>Auto-renew</Label>
                      </div>
                      <Button variant="destructive" size="sm" onClick={() => cancelSubscription(subscription.id)}>
                        Cancel
                      </Button>
                    </CardFooter>
                  </Card>
                ))
              )}
            </TabsContent>

<TabsContent value="history">
              {paymentHistory.length === 0 ? (
                <Card>
                  <CardContent className="flex flex-col items-center justify-center py-12 text-center">
                    <p className="mb-2 text-lg font-medium">No payment history</p>
                    <p className="mb-6 text-muted-foreground">You don't have any payment history to display.</p>
                  </CardContent>
                </Card>
              ) : (
                <div className="grid gap-4">
                  {paymentHistory.map((payment) => (
                    <Card key={payment.id}>
                      <CardHeader>
                        <div className="flex items-center justify-between">
                          <div>
                            <CardTitle>
                              {payment.type === "subscription"
                                ? `Subscription to ${payment.creatorName}`
                                : payment.type === "tip"
                                  ? `Tip to ${payment.creatorName}`
                                  : `Purchase of ${payment.productName}`}
                            </CardTitle>
                            <CardDescription>{payment.date}</CardDescription>
                          </div>
                          <Badge variant="secondary">{payment.status}</Badge>
                        </div>
                      </CardHeader>
                      <CardContent>
                        <p className="text-lg font-semibold">${payment.amount.toFixed(2)}</p>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}
            </TabsContent>
          </Tabs>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]json:file="package.json" isMerged="true" isEdit="true"
{
  "name": "adult-content-platform",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "date-fns": "^2.30.0",
    "lucide-react": "^0.279.0",
    "next": "13.5.4",
    "next-themes": "^0.2.1",
    "react": "^18",
    "react-dom": "^18",
    "react-dropzone": "^14.2.3",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.4",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

[V0_FILE]typescriptreact:file="app/privacy/page.tsx" isMerged="true" isEdit="true"
import Link from "next/link"
import { MainNav } from "@/components/main-nav"
import { Button } from "@/components/ui/button"

export default function PrivacyPolicyPage() {
  return (
    <div className="min-h-screen bg-background">
      <MainNav />
      <main className="container max-w-4xl px-4 py-8">
        <div className="prose prose-gray dark:prose-invert max-w-none">
          <h1>Privacy Policy</h1>
          <p className="lead">Last updated: March 1, 2025</p>

<section>
            <h2>1. Introduction</h2>
            <p>
              Welcome to AdultFlix. We are committed to protecting your privacy and handling your personal data with
              transparency and care. This Privacy Policy explains how we collect, use, disclose, and safeguard your
              information.
            </p>
          </section>

<section>
            <h2>2. Information We Collect</h2>
            <h3>2.1 Personal Information</h3>
            <ul>
              <li>Account information (email, username, password)</li>
              <li>Age verification documents</li>
              <li>Payment information</li>
              <li>Profile information</li>
              <li>Content you upload or create</li>
            </ul>

<h3>2.2 Automatically Collected Information</h3>
            <ul>
              <li>Device information</li>
              <li>IP address and location data</li>
              <li>Usage data and preferences</li>
              <li>Cookies and similar technologies</li>
            </ul>
          </section>

<section>
            <h2>3. How We Use Your Information</h2>
            <ul>
              <li>Provide and improve our services</li>
              <li>Process payments and transactions</li>
              <li>Verify age and identity</li>
              <li>Communicate with you</li>
              <li>Ensure platform safety and security</li>
              <li>Comply with legal obligations</li>
            </ul>
          </section>

<section>
            <h2>4. Data Sharing and Disclosure</h2>
            <p>We may share your information with:</p>
            <ul>
              <li>Service providers and partners</li>
              <li>Payment processors</li>
              <li>Age verification services</li>
              <li>Law enforcement when required</li>
            </ul>
          </section>

<section>
            <h2>5. Data Security</h2>
            <p>
              We implement appropriate technical and organizational measures to protect your personal data against
              unauthorized access, alteration, disclosure, or destruction.
            </p>
          </section>

<section>
            <h2>6. Your Rights</h2>
            <p>You have the right to:</p>
            <ul>
              <li>Access your personal data</li>
              <li>Correct inaccurate data</li>
              <li>Request deletion of your data</li>
              <li>Object to data processing</li>
              <li>Data portability</li>
            </ul>
          </section>

<section>
            <h2>7. Contact Us</h2>
            <p>
              If you have questions about this Privacy Policy or our practices, please contact us at:
              <br />
              Email: privacy@adultflix.com
              <br />
              Address: [Company Address]
            </p>
          </section>

<div className="mt-8 flex gap-4">
            <Link href="/terms">
              <Button variant="outline">Terms of Service</Button>
            </Link>
            <Link href="/">
              <Button>Back to Home</Button>
            </Link>
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/terms/page.tsx" isMerged="true" isEdit="true"
import Link from "next/link"
import { MainNav } from "@/components/main-nav"
import { Button } from "@/components/ui/button"

export default function TermsPage() {
  return (
    <div className="min-h-screen bg-background">
      <MainNav />
      <main className="container max-w-4xl px-4 py-8">
        <div className="prose prose-gray dark:prose-invert max-w-none">
          <h1>Terms of Service</h1>
          <p className="lead">Last updated: March 1, 2025</p>

<section>
            <h2>1. Acceptance of Terms</h2>
            <p>
              By accessing or using AdultFlix, you agree to be bound by these Terms of Service. If you disagree with any
              part of the terms, you may not access the service.
            </p>
          </section>

<section>
            <h2>2. Age Requirements</h2>
            <p>
              You must be at least 18 years old (or the age of majority in your jurisdiction) to use our services. By
              using the platform, you represent and warrant that you meet these age requirements.
            </p>
          </section>

<section>
            <h2>3. Account Registration</h2>
            <ul>
              <li>You must provide accurate and complete information</li>
              <li>You are responsible for maintaining account security</li>
              <li>Age and identity verification is mandatory</li>
              <li>One person per account</li>
            </ul>
          </section>

<section>
            <h2>4. Content Guidelines</h2>
            <h3>4.1 Prohibited Content</h3>
            <ul>
              <li>Illegal content</li>
              <li>Non-consensual content</li>
              <li>Content involving minors</li>
              <li>Violent or harmful content</li>
              <li>Copyright-infringing material</li>
            </ul>

<h3>4.2 Content Rights</h3>
            <p>
              You retain rights to your content but grant us a license to use, store, and distribute it according to our
              services.
            </p>
          </section>

<section>
            <h2>5. Payment Terms</h2>
            <ul>
              <li>All fees are in USD unless stated otherwise</li>
              <li>Subscription fees are billed in advance</li>
              <li>No refunds for partial months</li>
              <li>Creator payouts follow our payment schedule</li>
            </ul>
          </section>

<section>
            <h2>6. Termination</h2>
            <p>
              We reserve the right to suspend or terminate accounts that violate these terms or for any other reason at
              our discretion.
            </p>
          </section>

<section>
            <h2>7. Disclaimer of Warranties</h2>
            <p>The service is provided "as is" without warranties of any kind, either express or implied.</p>
          </section>

<section>
            <h2>8. Limitation of Liability</h2>
            <p>We shall not be liable for any indirect, incidental, special, consequential, or punitive damages.</p>
          </section>

<section>
            <h2>9. Changes to Terms</h2>
            <p>
              We may modify these terms at any time. Continued use of the service constitutes acceptance of modified
              terms.
            </p>
          </section>

<div className="mt-8 flex gap-4">
            <Link href="/privacy">
              <Button variant="outline">Privacy Policy</Button>
            </Link>
            <Link href="/">
              <Button>Back to Home</Button>
            </Link>
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/data-table.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import {
  type ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
  getPaginationRowModel,
} from "@tanstack/react-table"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
}

export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 10,
  })

const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onPaginationChange: setPagination,
    state: {
      pagination,
    },
  })

return (
    <div>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <TableHead key={header.id}>
                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center">
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <div className="flex items-center justify-end space-x-2 py-4">
        <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
          Previous
        </Button>
        <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
          Next
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]plaintext:file=".env.local" isQuickEdit="true" isMerged="true" isEdit="true"
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

[V0_FILE]typescript:file="lib/supabase-client.ts" isMerged="true" isEdit="true"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { BadgeCheck, TrendingUp, Users, Clock } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

interface Channel {
  id: string
  name: string
  url_handle: string
  is_verified: boolean
  total_watch_time: number
  total_revenue: number
  subscribers_count: number
}

interface DashboardStats {
  totalSubscribers: number
  totalWatchTime: number
  totalRevenue: number
  channels: Channel[]
}

export default function DashboardPage() {
  const { user } = useAuth()
  const [stats, setStats] = useState<DashboardStats>({
    totalSubscribers: 0,
    totalWatchTime: 0,
    totalRevenue: 0,
    channels: [],
  })

useEffect(() => {
    if (user) {
      fetchDashboardStats()
    }
  }, [user])

const fetchDashboardStats = async () => {
    const { data: channels, error } = await supabase.from("channels").select("*").eq("user_id", user?.id)

if (error) {
      console.error("Error fetching channels:", error)
      return
    }

const stats: DashboardStats = {
      totalSubscribers: channels.reduce((sum, channel) => sum + (channel.subscribers_count || 0), 0),
      totalWatchTime: channels.reduce((sum, channel) => sum + (channel.total_watch_time || 0), 0),
      totalRevenue: channels.reduce((sum, channel) => sum + (channel.total_revenue || 0), 0),
      channels: channels,
    }

setStats(stats)
  }

const formatWatchTime = (minutes: number) => {
    const hours = Math.floor(minutes / 60)
    return `${hours.toLocaleString()} hours`
  }

const formatMoney = (amount: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(amount)
  }

return (
    <div className="p-6">
      <div className="mb-8">
        <h1 className="text-3xl font-bold">Dashboard</h1>
        <p className="text-muted-foreground">Welcome back, {user?.email}</p>
      </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Subscribers</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.totalSubscribers.toLocaleString()}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Watch Time</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatWatchTime(stats.totalWatchTime)}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatMoney(stats.totalRevenue)}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Channels</CardTitle>
            <BadgeCheck className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.channels.length}/2</div>
          </CardContent>
        </Card>
      </div>

<div className="mt-8">
        <h2 className="mb-4 text-xl font-semibold">Your Channels</h2>
        <div className="grid gap-4 md:grid-cols-2">
          {stats.channels.map((channel) => (
            <Card key={channel.id}>
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle className="flex items-center gap-2">
                  {channel.name}
                  {channel.is_verified && <BadgeCheck className="h-4 w-4 text-blue-500" />}
                </CardTitle>
                <Button variant="outline" asChild>
                  <a href={`/${channel.url_handle}`} target="_blank" rel="noopener noreferrer">
                    View Channel
                  </a>
                </Button>
              </CardHeader>
              <CardContent>
                <div className="grid gap-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">URL:</span>
                    <span className="font-medium">/{channel.url_handle}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Subscribers:</span>
                    <span className="font-medium">{channel.subscribers_count?.toLocaleString() || 0}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Watch Time:</span>
                    <span className="font-medium">{formatWatchTime(channel.total_watch_time || 0)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Revenue:</span>
                    <span className="font-medium">{formatMoney(channel.total_revenue || 0)}</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}

{stats.channels.length < 2 && (
            <Card className="flex h-[200px] flex-col items-center justify-center">
              <CardContent className="text-center">
                <p className="mb-4 text-muted-foreground">You can create one more channel</p>
                <Button asChild>
                  <a href="/dashboard/channels/create">Create Channel</a>
                </Button>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="app/create-channel/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/components/auth-provider"
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 { MainNav } from "@/components/main-nav"
import { supabase } from "@/lib/supabase-client"

export default function CreateChannelPage() {
  const [name, setName] = useState("")
  const [description, setDescription] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const { user } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!user) {
      toast({
        title: "Authentication required",
        description: "Please sign in to create a channel.",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)

try {
      const { data, error } = await supabase
        .from("channels")
        .insert([{ name, description, user_id: user.id }])
        .select()

if (error) throw error

toast({
        title: "Channel created",
        description: "Your new channel has been created successfully.",
      })
      router.push("/dashboard")
    } catch (error) {
      toast({
        title: "Error",
        description: "There was an error creating your channel. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-background">
      <MainNav />
      <main className="container max-w-md px-4 py-8">
        <h1 className="mb-6 text-3xl font-bold">Create a New Channel</h1>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">Channel Name</Label>
            <Input id="name" value={name} onChange={(e) => setName(e.target.value)} required />
          </div>
          <div className="space-y-2">
            <Label htmlFor="description">Channel Description</Label>
            <Textarea id="description" value={description} onChange={(e) => setDescription(e.target.value)} required />
          </div>
          <Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? "Creating..." : "Create Channel"}
          </Button>
        </form>
      </main>
    </div>
  )
}

[V0_FILE]typescript:file="app/go-live/[channelId]/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { useAuth } from "@/components/auth-provider"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/components/ui/use-toast"
import { MainNav } from "@/components/main-nav"
import { supabase } from "@/lib/supabase-client"

export default function GoLivePage() {
  const [title, setTitle] = useState("")
  const [isLive, setIsLive] = useState(false)
  const [channelName, setChannelName] = useState("")
  const { user } = useAuth()
  const params = useParams()
  const { toast } = useToast()

useEffect(() => {
    if (params.channelId) {
      fetchChannelData(params.channelId as string)
    }
  }, [params.channelId])

const fetchChannelData = async (channelId: string) => {
    const { data, error } = await supabase.from("channels").select("name").eq("id", channelId).single()

if (error) {
      console.error("Error fetching channel data:", error)
    } else if (data) {
      setChannelName(data.name)
    }
  }

const handleGoLive = async () => {
    if (!user) {
      toast({
        title: "Authentication required",
        description: "Please sign in to go live.",
        variant: "destructive",
      })
      return
    }

// Here you would implement the actual live streaming logic
    // This is just a placeholder to simulate going live
    setIsLive(true)
    toast({
      title: "You're live!",
      description: `Your stream "${title}" is now live on channel "${channelName}".`,
    })
  }

const handleEndStream = () => {
    setIsLive(false)
    toast({
      title: "Stream ended",
      description: "Your live stream has ended.",
    })
  }

return (
    <div className="min-h-screen bg-background">
      <MainNav />
      <main className="container max-w-md px-4 py-8">
        <h1 className="mb-6 text-3xl font-bold">Go Live on {channelName}</h1>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="title">Stream Title</Label>
            <Input id="title" value={title} onChange={(e) => setTitle(e.target.value)} disabled={isLive} required />
          </div>
          {!isLive ? (
            <Button onClick={handleGoLive} disabled={!title} className="w-full">
              Start Streaming
            </Button>
          ) : (
            <div className="space-y-4">
              <div className="rounded-lg bg-red-100 p-4 text-red-700">
                <p className="font-bold">🔴 LIVE</p>
                <p>{title}</p>
              </div>
              <Button onClick={handleEndStream} variant="destructive" className="w-full">
                End Stream
              </Button>
            </div>
          )}
        </div>
      </main>
    </div>
  )
}

[V0_FILE]sql:file="supabase/migrations/20240301_channel_features.sql" isMerged="true" isEdit="true"
-- Enable PostGIS for geographic data
CREATE EXTENSION IF NOT EXISTS postgis;

-- Update channels table
ALTER TABLE channels ADD COLUMN IF NOT EXISTS url_handle TEXT UNIQUE;
ALTER TABLE channels ADD COLUMN IF NOT EXISTS is_verified BOOLEAN DEFAULT false;
ALTER TABLE channels ADD COLUMN IF NOT EXISTS verified_at TIMESTAMPTZ;
ALTER TABLE channels ADD COLUMN IF NOT EXISTS total_watch_time BIGINT DEFAULT 0;
ALTER TABLE channels ADD COLUMN IF NOT EXISTS total_revenue DECIMAL(10,2) DEFAULT 0.0;
ALTER TABLE channels ADD COLUMN IF NOT EXISTS monetization_enabled BOOLEAN DEFAULT false;

-- Create verification requests table
CREATE TABLE IF NOT EXISTS verification_requests (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    channel_id UUID REFERENCES channels(id) ON DELETE CASCADE,
    status TEXT DEFAULT 'pending',
    submitted_at TIMESTAMPTZ DEFAULT NOW(),
    processed_at TIMESTAMPTZ,
    notes TEXT,
    CONSTRAINT valid_status CHECK (status IN ('pending', 'approved', 'rejected'))
);

-- Create subscriber_analytics table
CREATE TABLE IF NOT EXISTS subscriber_analytics (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    channel_id UUID REFERENCES channels(id) ON DELETE CASCADE,
    country_code TEXT,
    region TEXT,
    subscriber_count INTEGER DEFAULT 0,
    updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create watch_time_analytics table
CREATE TABLE IF NOT EXISTS watch_time_analytics (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    channel_id UUID REFERENCES channels(id) ON DELETE CASCADE,
    video_id UUID,
    total_minutes INTEGER DEFAULT 0,
    date DATE DEFAULT CURRENT_DATE,
    CONSTRAINT unique_daily_video_analytics UNIQUE (channel_id, video_id, date)
);

-- Add channel limit trigger
CREATE OR REPLACE FUNCTION check_channel_limit()
RETURNS TRIGGER AS $$
BEGIN
    IF (SELECT COUNT(*) FROM channels WHERE user_id = NEW.user_id) >= 2 THEN
        RAISE EXCEPTION 'Users can only create a maximum of 2 channels';
    END IF;
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER enforce_channel_limit
    BEFORE INSERT ON channels
    FOR EACH ROW
    EXECUTE FUNCTION check_channel_limit();

[V0_FILE]typescript:file="app/dashboard/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import { Sidebar } from "@/components/dashboard/sidebar"

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex h-screen overflow-hidden">
      <Sidebar className="hidden md:block w-64 border-r" />
      <main className="flex-1 overflow-y-auto p-4 md:p-8">{children}</main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { BarChart, Settings, Users, Video, Shield, LogOut, Home, DollarSign } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/components/auth-provider"

export function Sidebar() {
  const pathname = usePathname()
  const { signOut } = useAuth()

const routes = [
    {
      label: "Overview",
      icon: Home,
      href: "/dashboard",
      active: pathname === "/dashboard",
    },
    {
      label: "Analytics",
      icon: BarChart,
      href: "/dashboard/analytics",
      active: pathname === "/dashboard/analytics",
    },
    {
      label: "Channels",
      icon: Video,
      href: "/dashboard/channels",
      active: pathname === "/dashboard/channels",
    },
    {
      label: "Subscribers",
      icon: Users,
      href: "/dashboard/subscribers",
      active: pathname === "/dashboard/subscribers",
    },
    {
      label: "Verification",
      icon: Shield,
      href: "/dashboard/verification",
      active: pathname === "/dashboard/verification",
    },
    {
      label: "Settings",
      icon: Settings,
      href: "/dashboard/settings",
      active: pathname === "/dashboard/settings",
    },
    {
      label: "Monetization",
      icon: DollarSign,
      href: "/dashboard/monetization",
      active: pathname.startsWith("/dashboard/monetization"),
    },
    {
      label: "Audience Engagement",
      icon: Users,
      href: "/dashboard/engagement",
      active: pathname.startsWith("/dashboard/engagement"),
    },
  ]

return (
    <div className="flex h-full w-[200px] flex-col bg-muted p-4">
      <div className="flex flex-1 flex-col gap-4">
        {routes.map((route) => (
          <Link
            key={route.href}
            href={route.href}
            className={cn(
              "flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
              route.active ? "bg-accent text-accent-foreground" : "text-muted-foreground",
            )}
          >
            <route.icon className="h-4 w-4" />
            {route.label}
          </Link>
        ))}
      </div>
      <Button variant="ghost" className="w-full justify-start gap-2" onClick={() => signOut()}>
        <LogOut className="h-4 w-4" />
        Logout
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/verification/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Shield } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

export default function VerificationPage() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [notes, setNotes] = useState("")
  const { user } = useAuth()
  const { toast } = useToast()

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

try {
      const { data: channel, error: channelError } = await supabase
        .from("channels")
        .select("id")
        .eq("user_id", user?.id)
        .single()

if (channelError) throw channelError

const { error } = await supabase.from("verification_requests").insert([
        {
          channel_id: channel.id,
          notes,
        },
      ])

if (error) throw error

toast({
        title: "Verification request submitted",
        description: "We'll review your request and get back to you soon.",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to submit verification request. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="container py-8">
      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
            <Shield className="h-5 w-5 text-blue-500" />
            <CardTitle>Channel Verification</CardTitle>
          </div>
          <CardDescription>
            Get your channel verified to show your audience that you're a trusted creator
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="notes">Why should your channel be verified?</Label>
              <Textarea
                id="notes"
                placeholder="Tell us about your content and audience..."
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                rows={5}
                required
              />
            </div>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Submitting..." : "Submit Verification Request"}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescript:file="app/dashboard/analytics/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

interface AnalyticsData {
  date: string
  views: number
  watchTime: number
  revenue: number
}

export default function AnalyticsPage() {
  const { user } = useAuth()
  const [analyticsData, setAnalyticsData] = useState<AnalyticsData[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    if (user) {
      fetchAnalyticsData()
    }
  }, [user])

const fetchAnalyticsData = async () => {
    setIsLoading(true)
    setError(null)

try {
      const { data, error } = await supabase
        .from("analytics")
        .select("*")
        .eq("user_id", user?.id)
        .order("date", { ascending: true })

if (error) throw error

setAnalyticsData(data)
    } catch (error) {
      console.error("Error fetching analytics data:", error)
      setError("Failed to load analytics data. Please try again later.")
    } finally {
      setIsLoading(false)
    }
  }

if (isLoading) return <div>Loading analytics...</div>
  if (error) return <div>{error}</div>

return (
    <div className="p-6">
      <h1 className="mb-6 text-3xl font-bold">Analytics</h1>
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle>Views</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={analyticsData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="views" fill="#8884d8" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Watch Time (minutes)</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={analyticsData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="watchTime" fill="#82ca9d" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Revenue ($)</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={analyticsData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="revenue" fill="#ffc658" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/channels/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { PlusCircle, Edit, Trash, UserPlus, Circle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"
import Image from "next/image"

interface Channel {
  id: string
  name: string
  url_handle: string
  is_verified: boolean
  subscribers_count: number
  avatar_url: string
  bio: string
  social_links: string[]
  is_live: boolean
}

export default function ChannelsPage() {
  const { user } = useAuth()
  const [channels, setChannels] = useState<Channel[]>([])

useEffect(() => {
    if (user) {
      fetchChannels()
    }
  }, [user])

const fetchChannels = async () => {
    const { data, error } = await supabase.from("channels").select("*").eq("user_id", user?.id)

if (error) {
      console.error("Error fetching channels:", error)
    } else {
      setChannels(data || [])
    }
  }

return (
    <div className="p-6">
      <div className="mb-6 flex items-center justify-between">
        <h1 className="text-3xl font-bold">Your Channels</h1>
        {channels.length < 2 && (
          <Button asChild>
            <Link href="/dashboard/channels/create">
              <PlusCircle className="mr-2 h-4 w-4" />
              Create Channel
            </Link>
          </Button>
        )}
      </div>
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {channels.map((channel) => (
          <Card key={channel.id}>
            <CardHeader>
              <div className="flex items-center space-x-3">
                <Image src={channel.avatar_url} alt={channel.name} width={50} height={50} className="rounded-full" />
                <div>
                  <CardTitle className="flex items-center justify-between">
                    <span>{channel.name}</span>
                    {channel.is_verified && <span className="text-blue-500">✓</span>}
                  </CardTitle>
                  <p className="text-sm text-gray-500">{channel.bio}</p>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <p className="mb-2">
                URL:{" "}
                <Link href={`/dashboard/channels/${channel.url_handle}`} className="text-blue-500">
                  https://www.intellius.site/dashboard/channels/{channel.url_handle}
                </Link>
              </p>
              <p className="mb-4">Subscribers: {channel.subscribers_count}</p>
              <div className="flex space-x-2">
                <Button variant="outline" asChild>
                  <Link href={`/dashboard/channels/${channel.id}`}>
                    <Edit className="mr-2 h-4 w-4" />
                    Manage
                  </Link>
                </Button>
                <Button variant="destructive">
                  <Trash className="mr-2 h-4 w-4" />
                  Delete
                </Button>
                <Button variant="secondary">
                  <UserPlus className="mr-2 h-4 w-4" />
                  Subscribe
                </Button>
              </div>
              {channel.is_live && (
                <div className="mt-4 flex items-center text-red-500">
                  <Circle className="h-4 w-4 mr-2 animate-pulse" />
                  <span>LIVE NOW</span>
                </div>
              )}
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/subscribers/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import { Users } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

interface SubscriberAnalytics {
  country_code: string
  region: string
  subscriber_count: number
}

export default function SubscribersPage() {
  const { user } = useAuth()
  const [subscriberAnalytics, setSubscriberAnalytics] = useState<SubscriberAnalytics[]>([])

useEffect(() => {
    if (user) {
      fetchSubscriberAnalytics()
    }
  }, [user])

const fetchSubscriberAnalytics = async () => {
    const { data, error } = await supabase
      .from("subscriber_analytics")
      .select("*")
      .order("subscriber_count", { ascending: false })

if (error) {
      console.error("Error fetching subscriber analytics:", error)
    } else {
      setSubscriberAnalytics(data || [])
    }
  }

return (
    <div className="p-6">
      <h1 className="mb-6 text-3xl font-bold">Subscriber Analytics</h1>
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Users className="mr-2 h-5 w-5" />
            Subscribers by Region
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {subscriberAnalytics.map((analytic) => (
              <div key={`${analytic.country_code}-${analytic.region}`} className="flex items-center justify-between">
                <span>
                  {analytic.country_code} - {analytic.region}
                </span>
                <span className="font-semibold">{analytic.subscriber_count}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/settings/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

export default function SettingsPage() {
  const { user } = useAuth()
  // const [name, setName] = useState(user?.user_metadata?.full_name || "")
  // const [email, setEmail] = useState(user?.email || "")
  const [notifications, setNotifications] = useState(true)
  const { toast } = useToast()

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

//   const { error } = await supabase.auth.updateUser({
  //     email: email,
  //     data: { full_name: name },
  //   })

//   if (error) {
  //     toast({
  //       title: "Error",
  //       description: "Failed to update settings. Please try again.",
  //       variant: "destructive",
  //     })
  //   } else {
  //     toast({
  //       title: "Settings updated",
  //       description: "Your account settings have been updated successfully.",
  //     })
  //   }
  // }

const handleSaveSettings = async () => {
    const { error } = await supabase.from("user_settings").upsert({ user_id: user?.id, notifications })

if (error) {
      toast({
        title: "Error",
        description: "Failed to update settings. Please try again.",
        variant: "destructive",
      })
    } else {
      toast({
        title: "Settings updated",
        description: "Your notification settings have been updated successfully.",
      })
    }
  }

return (
    <div className="p-6">
      <h1 className="mb-6 text-3xl font-bold">Account Settings</h1>
      <form className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Full Name</Label>
          <div className="rounded-md border px-3 py-2 text-sm">{user?.user_metadata?.full_name || "N/A"}</div>
        </div>
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <div className="rounded-md border px-3 py-2 text-sm">{user?.email || "N/A"}</div>
        </div>

{/* Remove the form submission for name and email changes */}
        <div className="space-y-2">
          <Label htmlFor="notifications">Notifications</Label>
          <div className="flex items-center space-x-2">
            <Switch id="notifications" checked={notifications} onCheckedChange={setNotifications} />
            <Label htmlFor="notifications">Enable email notifications</Label>
          </div>
        </div>
        <Button type="button" onClick={handleSaveSettings}>
          Save Changes
        </Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/channels/create/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 { 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 "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

export default function CreateChannelPage() {
  const [name, setName] = useState("")
  const [description, setDescription] = useState("")
  const [urlHandle, setUrlHandle] = useState("")
  const { user } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [urlHandleError, setUrlHandleError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

// Validate URL handle format
  const validateUrlHandle = (value: string) => {
    const regex = /^[a-zA-Z0-9-_]+$/
    if (!regex.test(value)) {
      setUrlHandleError("URL handle can only contain letters, numbers, hyphens, and underscores.")
      return false
    } else {
      setUrlHandleError("")
      return true
    }
  }

// Check if URL handle is unique
  const isUrlHandleUnique = async (handle: string) => {
    const { data, error } = await supabase.from("channels").select("url_handle").eq("url_handle", handle).single()

if (error || data) {
      return false // Handle already exists or error occurred
    }
    return true // Handle is unique
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true) // Start loading

if (!user) {
      toast({
        title: "Error",
        description: "You must be logged in to create a channel.",
        variant: "destructive",
      })
      setIsLoading(false) // Stop loading
      return
    }

// Validate URL handle format
    if (!validateUrlHandle(urlHandle)) {
      setIsLoading(false) // Stop loading
      return
    }

// Check if URL handle is unique
    const isUnique = await isUrlHandleUnique(urlHandle)
    if (!isUnique) {
      toast({
        title: "Error",
        description: "This URL handle is already taken. Please choose a different one.",
        variant: "destructive",
      })
      setIsLoading(false) // Stop loading
      return
    }

try {
      // Create the channel
      const { data, error } = await supabase
        .from("channels")
        .insert([
          {
            name,
            description,
            url_handle: urlHandle,
            user_id: user.id,
          },
        ])
        .select()

if (error) {
        throw error
      }

// Success feedback
      toast({
        title: "Success",
        description: "Your new channel has been created successfully.",
      })
      router.push("/dashboard/channels") // Redirect to channels dashboard
    } catch (error: any) {
      // Error feedback
      toast({
        title: "Error",
        description: error.message || "Failed to create channel. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false) // Stop loading
    }
  }

return (
    <div className="p-6">
      <h1 className="mb-6 text-3xl font-bold">Create a New Channel</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Channel Name</Label>
          <Input id="name" value={name} onChange={(e) => setName(e.target.value)} required disabled={isLoading} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="description">Channel Description</Label>
          <Textarea
            id="description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            required
            disabled={isLoading}
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="urlHandle">URL Handle</Label>
          <Input
            id="urlHandle"
            value={urlHandle}
            onChange={(e) => {
              setUrlHandle(e.target.value)
              validateUrlHandle(e.target.value)
            }}
            required
            disabled={isLoading}
          />
          {urlHandleError && <p className="text-sm text-red-500">{urlHandleError}</p>}
        </div>
        <Button type="submit" disabled={isLoading}>
          {isLoading ? "Creating..." : "Create Channel"}
        </Button>
      </form>
    </div>
  )
}

[V0_FILE]typescript:file="app/dashboard/videos/upload/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

export default function UploadVideoPage() {
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [channelId, setChannelId] = useState("")
  const [file, setFile] = useState<File | null>(null)
  const [channels, setChannels] = useState<{ id: string; name: string }[]>([])
  const { user } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

useEffect(() => {
    if (user) {
      fetchUserChannels()
    }
  }, [user])

const fetchUserChannels = async () => {
    const { data, error } = await supabase.from("channels").select("id, name").eq("user_id", user?.id)

if (error) {
      console.error("Error fetching user channels:", error)
      toast({
        title: "Error",
        description: "Failed to fetch your channels. Please try again.",
        variant: "destructive",
      })
    } else {
      setChannels(data)
      if (data.length > 0) {
        setChannelId(data[0].id)
      }
    }
  }

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setFile(e.target.files[0])
    }
  }

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

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

if (!channelId) {
      toast({
        title: "Error",
        description: "Please select a channel for your video.",
        variant: "destructive",
      })
      return
    }

// Upload file to Supabase Storage
    const fileExt = file.name.split(".").pop()
    const fileName = `${Math.random()}.${fileExt}`
    const { data, error } = await supabase.storage.from("videos").upload(`${channelId}/${fileName}`, file)

if (error) {
      toast({
        title: "Error",
        description: "Failed to upload video. Please try again.",
        variant: "destructive",
      })
      return
    }

// Get public URL for the uploaded file
    const {
      data: { publicUrl },
    } = supabase.storage.from("videos").getPublicUrl(`${channelId}/${fileName}`)

// Save video metadata to the database
    const { data: videoData, error: videoError } = await supabase
      .from("videos")
      .insert([
        {
          title,
          description,
          channel_id: channelId,
          user_id: user?.id,
          video_url: publicUrl,
        },
      ])
      .select()

if (videoError) {
      toast({
        title: "Error",
        description: "Failed to save video metadata. Please try again.",
        variant: "destructive",
      })
    } else {
      toast({
        title: "Video uploaded",
        description: "Your video has been uploaded successfully.",
      })
      router.push("/dashboard/videos")
    }
  }

return (
    <div className="p-6">
      <h1 className="mb-6 text-3xl font-bold">Upload a New Video</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="title">Video Title</Label>
          <Input id="title" value={title} onChange={(e) => setTitle(e.target.value)} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="description">Video Description</Label>
          <Textarea id="description" value={description} onChange={(e) => setDescription(e.target.value)} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="channel">Channel</Label>
          <Select value={channelId} onValueChange={setChannelId}>
            <SelectTrigger>
              <SelectValue placeholder="Select a channel" />
            </SelectTrigger>
            <SelectContent>
              {channels.map((channel) => (
                <SelectItem key={channel.id} value={channel.id}>
                  {channel.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-2">
          <Label htmlFor="video">Video File</Label>
          <Input id="video" type="file" accept="video/*" onChange={handleFileChange} required />
        </div>
        <Button type="submit">Upload Video</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/channels/[id]/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"
import { UploadVideoForm } from "@/components/upload-video-form"
import { GoLiveForm } from "@/components/go-live-form"
import { VideoList } from "@/components/video-list"

export default function ChannelStudioPage() {
  const { id } = useParams()
  const { user } = useAuth()
  const [channel, setChannel] = useState<any>(null)

useEffect(() => {
    if (user && id) {
      fetchChannelData()
    }
  }, [user, id])

const fetchChannelData = async () => {
    const { data, error } = await supabase.from("channels").select("*").eq("id", id).single()

if (error) {
      console.error("Error fetching channel data:", error)
    } else {
      setChannel(data)
    }
  }

if (!channel) {
    return <div>Loading...</div>
  }

return (
    <div className="p-6">
      <h1 className="mb-6 text-3xl font-bold">{channel.name} Studio</h1>
      <Tabs defaultValue="videos">
        <TabsList>
          <TabsTrigger value="videos">Videos</TabsTrigger>
          <TabsTrigger value="upload">Upload</TabsTrigger>
          <TabsTrigger value="live">Go Live</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
        </TabsList>
        <TabsContent value="videos">
          <VideoList channelId={channel.id} />
        </TabsContent>
        <TabsContent value="upload">
          <Card>
            <CardHeader>
              <CardTitle>Upload Video</CardTitle>
              <CardDescription>Upload and schedule new content for your channel</CardDescription>
            </CardHeader>
            <CardContent>
              <UploadVideoForm channelId={channel.id} />
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="live">
          <Card>
            <CardHeader>
              <CardTitle>Go Live</CardTitle>
              <CardDescription>Start a live stream on your channel</CardDescription>
            </CardHeader>
            <CardContent>
              <GoLiveForm channelId={channel.id} />
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="analytics">
          <Card>
            <CardHeader>
              <CardTitle>Channel Analytics</CardTitle>
              <CardDescription>View your channel's performance metrics</CardDescription>
            </CardHeader>
            <CardContent>
              {/* Implement analytics components here */}
              <p>Analytics coming soon...</p>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/upload-video-form.tsx" isMerged="true" isEdit="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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

export function UploadVideoForm({ channelId }: { channelId: string }) {
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [category, setCategory] = useState("")
  const [file, setFile] = useState<File | null>(null)
  const [scheduledDate, setScheduledDate] = useState("")
  const { user } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setFile(e.target.files[0])
    }
  }

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

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

if (error) {
      toast({
        title: "Error",
        description: "Failed to upload video. Please try again.",
        variant: "destructive",
      })
      return
    }

// Get public URL for the uploaded file
    const {
      data: { publicUrl },
    } = supabase.storage.from("videos").getPublicUrl(`${channelId}/${fileName}`)

// Save video metadata to the database
    const { data: videoData, error: videoError } = await supabase
      .from("videos")
      .insert([
        {
          title,
          description,
          category,
          channel_id: channelId,
          user_id: user?.id,
          video_url: publicUrl,
          scheduled_date: scheduledDate || null,
        },
      ])
      .select()

return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="title">Video Title</Label>
        <Input id="title" value={title} onChange={(e) => setTitle(e.target.value)} required />
      </div>
      <div className="space-y-2">
        <Label htmlFor="description">Video Description</Label>
        <Textarea id="description" value={description} onChange={(e) => setDescription(e.target.value)} required />
      </div>
      <div className="space-y-2">
        <Label htmlFor="category">Category</Label>
        <Select value={category} onValueChange={setCategory}>
          <SelectTrigger>
            <SelectValue placeholder="Select a category" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="amateur">Amateur</SelectItem>
            <SelectItem value="professional">Professional</SelectItem>
            <SelectItem value="fetish">Fetish</SelectItem>
            <SelectItem value="lesbian">Lesbian</SelectItem>
            <SelectItem value="gay">Gay</SelectItem>
            <SelectItem value="trans">Trans</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-2">
        <Label htmlFor="video">Video File</Label>
        <Input id="video" type="file" accept="video/*" onChange={handleFileChange} required />
      </div>
      <div className="space-y-2">
        <Label htmlFor="scheduledDate">Schedule Upload (Optional)</Label>
        <Input
          id="scheduledDate"
          type="datetime-local"
          value={scheduledDate}
          onChange={(e) => setScheduledDate(e.target.value)}
        />
      </div>
      <Button type="submit">Upload Video</Button>
    </form>
  )
}

[V0_FILE]typescriptreact:file="components/go-live-form.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

export function GoLiveForm({ channelId }: { channelId: string }) {
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const { user } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

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

// In a real application, you would integrate with a live streaming service here
    // For now, we'll just create a placeholder "live" video entry

const { data, error } = await supabase
      .from("live_streams")
      .insert([
        {
          title,
          description,
          channel_id: channelId,
          user_id: user?.id,
          status: "live",
        },
      ])
      .select()

if (error) {
      toast({
        title: "Error",
        description: "Failed to start live stream. Please try again.",
        variant: "destructive",
      })
    } else {
      toast({
        title: "Live stream started",
        description: "Your live stream has been started successfully.",
      })
      router.push(`/dashboard/channels/${channelId}/live/${data[0].id}`)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="title">Stream Title</Label>
        <Input id="title" value={title} onChange={(e) => setTitle(e.target.value)} required />
      </div>
      <div className="space-y-2">
        <Label htmlFor="description">Stream Description</Label>
        <Textarea id="description" value={description} onChange={(e) => setDescription(e.target.value)} required />
      </div>
      <Button type="submit">Start Live Stream</Button>
    </form>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/monetization/subscriptions/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

export default function SubscriptionsPage() {
  const [monthlyPrice, setMonthlyPrice] = useState("")
  const [yearlyPrice, setYearlyPrice] = useState("")
  const { user } = useAuth()
  const { toast } = useToast()

useEffect(() => {
    if (user) {
      fetchSubscriptionPrices()
    }
  }, [user])

const fetchSubscriptionPrices = async () => {
    const { data, error } = await supabase.from("subscription_prices").select("*").eq("user_id", user?.id).single()

if (data) {
      setMonthlyPrice(data.monthly_price.toString())
      setYearlyPrice(data.yearly_price.toString())
    }
  }

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

const { data, error } = await supabase.from("subscription_prices").upsert({
      user_id: user?.id,
      monthly_price: Number.parseFloat(monthlyPrice),
      yearly_price: Number.parseFloat(yearlyPrice),
    })

if (error) {
      toast({
        title: "Error",
        description: "Failed to update subscription prices. Please try again.",
        variant: "destructive",
      })
    } else {
      toast({
        title: "Prices updated",
        description: "Your subscription prices have been updated successfully.",
      })
    }
  }

return (
    <div className="p-6">
      <h1 className="mb-6 text-3xl font-bold">Manage Subscriptions</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="monthlyPrice">Monthly Subscription Price ($)</Label>
          <Input
            id="monthlyPrice"
            type="number"
            min="0"
            step="0.01"
            value={monthlyPrice}
            onChange={(e) => setMonthlyPrice(e.target.value)}
            required
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="yearlyPrice">Yearly Subscription Price ($)</Label>
          <Input
            id="yearlyPrice"
            type="number"
            min="0"
            step="0.01"
            value={yearlyPrice}
            onChange={(e) => setYearlyPrice(e.target.value)}
            required
          />
        </div>
        <Button type="submit">Update Prices</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/monetization/earnings/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

export default function EarningsPage() {
  const [totalEarnings, setTotalEarnings] = useState(0)
  const [availableBalance, setAvailableBalance] = useState(0)
  const [withdrawalAmount, setWithdrawalAmount] = useState("")
  const [withdrawalMethod, setWithdrawalMethod] = useState("")
  const { user } = useAuth()
  const { toast } = useToast()

useEffect(() => {
    if (user) {
      fetchEarningsData()
    }
  }, [user])

const fetchEarningsData = async () => {
    const { data, error } = await supabase
      .from("creator_earnings")
      .select("total_earnings, available_balance")
      .eq("user_id", user?.id)
      .single()

if (data) {
      setTotalEarnings(data.total_earnings)
      setAvailableBalance(data.available_balance)
    }
  }

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

if (Number.parseFloat(withdrawalAmount) > availableBalance) {
      toast({
        title: "Error",
        description: "Withdrawal amount exceeds available balance.",
        variant: "destructive",
      })
      return
    }

const { data, error } = await supabase.from("withdrawal_requests").insert({
      user_id: user?.id,
      amount: Number.parseFloat(withdrawalAmount),
      method: withdrawalMethod,
      status: "pending",
    })

if (error) {
      toast({
        title: "Error",
        description: "Failed to submit withdrawal request. Please try again.",
        variant: "destructive",
      })
    } else {
      toast({
        title: "Withdrawal requested",
        description: "Your withdrawal request has been submitted successfully.",
      })
      setWithdrawalAmount("")
      setWithdrawalMethod("")
      fetchEarningsData()
    }
  }

return (
    <div className="p-6">
      <h1 className="mb-6 text-3xl font-bold">Earnings Dashboard</h1>
      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Total Earnings</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">${totalEarnings.toFixed(2)}</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Available Balance</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">${availableBalance.toFixed(2)}</p>
          </CardContent>
        </Card>
      </div>
      <Card className="mt-6">
        <CardHeader>
          <CardTitle>Request Withdrawal</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleWithdrawal} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="withdrawalAmount">Withdrawal Amount ($)</Label>
              <Input
                id="withdrawalAmount"
                type="number"
                min="0"
                step="0.01"
                value={withdrawalAmount}
                onChange={(e) => setWithdrawalAmount(e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="withdrawalMethod">Withdrawal Method</Label>
              <Select value={withdrawalMethod} onValueChange={setWithdrawalMethod}>
                <SelectTrigger>
                  <SelectValue placeholder="Select a withdrawal method" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="bank_transfer">Bank Transfer</SelectItem>
                  <SelectItem value="paypal">PayPal</SelectItem>
                  <SelectItem value="crypto">Cryptocurrency</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <Button type="submit">Request Withdrawal</Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/messaging-system.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

export function MessagingSystem() {
  const [messages, setMessages] = useState([])
  const [newMessage, setNewMessage] = useState("")
  const { user } = useAuth()

useEffect(() => {
    if (user) {
      fetchMessages()
      subscribeToMessages()
    }
  }, [user])

const fetchMessages = async () => {
    const { data, error } = await supabase
      .from("messages")
      .select("*")
      .order("created_at", { ascending: false })
      .limit(50)

if (data) {
      setMessages(data)
    }
  }

const subscribeToMessages = () => {
    const subscription = supabase
      .channel("messages")
      .on("postgres_changes", { event: "INSERT", schema: "public", table: "messages" }, (payload) => {
        setMessages((prevMessages) => [payload.new, ...prevMessages])
      })
      .subscribe()

return () => {
      subscription.unsubscribe()
    }
  }

const sendMessage = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!newMessage.trim()) return

const { data, error } = await supabase.from("messages").insert({ user_id: user?.id, content: newMessage })

if (!error) {
      setNewMessage("")
    }
  }

return (
    <div className="space-y-4">
      <div className="h-64 overflow-y-auto space-y-2">
        {messages.map((message: any) => (
          <div key={message.id} className="p-2 bg-muted rounded-md">
            <p>{message.content}</p>
            <small>{new Date(message.created_at).toLocaleString()}</small>
          </div>
        ))}
      </div>
      <form onSubmit={sendMessage} className="flex space-x-2">
        <Input value={newMessage} onChange={(e) => setNewMessage(e.target.value)} placeholder="Type your message..." />
        <Button type="submit">Send</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/notification-system.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Bell } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

export function NotificationSystem() {
  const [notifications, setNotifications] = useState([])
  const { user } = useAuth()

useEffect(() => {
    if (user) {
      fetchNotifications()
      subscribeToNotifications()
    }
  }, [user])

const fetchNotifications = async () => {
    const { data, error } = await supabase
      .from("notifications")
      .select("*")
      .eq("user_id", user?.id)
      .order("created_at", { ascending: false })
      .limit(10)

if (data) {
      setNotifications(data)
    }
  }

const subscribeToNotifications = () => {
    const subscription = supabase
      .channel("notifications")
      .on(
        "postgres_changes",
        { event: "INSERT", schema: "public", table: "notifications", filter: `user_id=eq.${user?.id}` },
        (payload) => {
          setNotifications((prevNotifications) => [payload.new, ...prevNotifications])
        },
      )
      .subscribe()

return () => {
      subscription.unsubscribe()
    }
  }

const markAsRead = async (notificationId: number) => {
    const { data, error } = await supabase.from("notifications").update({ is_read: true }).eq("id", notificationId)

if (!error) {
      fetchNotifications()
    }
  }

return (
    <div className="relative">
      <Button variant="ghost" className="relative">
        <Bell />
        {notifications.some((n: any) => !n.is_read) && (
          <span className="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
        )}
      </Button>
      <div className="absolute right-0 mt-2 w-64 bg-background border rounded-md shadow-lg">
        {notifications.map((notification: any) => (
          <div key={notification.id} className={`p-2 ${notification.is_read ? "opacity-50" : ""}`}>
            <p>{notification.content}</p>
            <small>{new Date(notification.created_at).toLocaleString()}</small>
            {!notification.is_read && (
              <Button variant="link" onClick={() => markAsRead(notification.id)}>
                Mark as read
              </Button>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/monetization/page.tsx" isMerged="true" isEdit="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function MonetizationPage() {
  return (
    <div className="p-6">
      <h1 className="mb-6 text-3xl font-bold">Monetization</h1>
      <div className="space-y-4">
        <Button asChild>
          <Link href="/dashboard/monetization/subscriptions">Manage Subscriptions</Link>
        </Button>
        <Button asChild>
          <Link href="/dashboard/monetization/earnings">Earnings Dashboard</Link>
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/engagement/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { MessagingSystem } from "@/components/messaging-system"
import { NotificationSystem } from "@/components/notification-system"

export default function EngagementPage() {
  return (
    <div className="p-6">
      <h1 className="mb-6 text-3xl font-bold">Audience Engagement</h1>
      <div className="space-y-8">
        <section>
          <h2 className="text-2xl font-semibold mb-4">Messaging</h2>
          <MessagingSystem />
        </section>
        <section>
          <h2 className="text-2xl font-semibold mb-4">Notifications</h2>
          <NotificationSystem />
        </section>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/video-list.tsx" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/components/auth-provider"
import { supabase } from "@/lib/supabase-client"

interface Video {
  id: string
  title: string
  description: string
  video_url: string
}

export function VideoList({ channelId }: { channelId: string }) {
  const { user } = useAuth()
  const [videos, setVideos] = useState<Video[]>([])

useEffect(() => {
    if (user && channelId) {
      fetchVideos()
    }
  }, [user, channelId])

const fetchVideos = async () => {
    const { data, error } = await supabase.from("videos").select("*").eq("channel_id", channelId)

if (error) {
      console.error("Error fetching videos:", error)
    } else {
      setVideos(data || [])
    }
  }

return (
    <div>
      {videos.map((video) => (
        <Card key={video.id}>
          <CardHeader>
            <CardTitle>{video.title}</CardTitle>
          </CardHeader>
          <CardContent>
            <p>{video.description}</p>
            <video width="320" height="240" controls>
              <source src={video.video_url} type="video/mp4" />
              Your browser does not support the video tag.
            </video>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/polling-system.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"

interface PollingSystemProps {
  url: string // API endpoint to poll
  interval?: number // Polling interval in milliseconds (default: 5000ms)
}

interface PollingData {
  // Define the structure of the data you expect from the API
  id: number
  message: string
  timestamp: string
}

const PollingSystem: React.FC<PollingSystemProps> = ({ url, interval = 5000 }) => {
  const [data, setData] = useState<PollingData | null>(null)
  const [loading, setLoading] = useState<boolean>(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    let isMounted = true // To prevent state updates if the component is unmounted

const fetchData = async () => {
      try {
        const response = await fetch(url)
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`)
        }
        const result = await response.json()
        if (isMounted) {
          setData(result)
          setLoading(false)
          setError(null)
        }
      } catch (err) {
        if (isMounted) {
          setError(err instanceof Error ? err.message : "An unknown error occurred")
          setLoading(false)
        }
      }
    }

// Initial fetch
    fetchData()

// Set up polling
    const pollingInterval = setInterval(fetchData, interval)

// Cleanup function to clear the interval and prevent memory leaks
    return () => {
      isMounted = false
      clearInterval(pollingInterval)
    }
  }, [url, interval])

if (loading) {
    return <div>Loading...</div>
  }

if (error) {
    return <div>Error: {error}</div>
  }

return (
    <div>
      <h2>Polling System</h2>
      {data ? (
        <div>
          <p>
            <strong>ID:</strong> {data.id}
          </p>
          <p>
            <strong>Message:</strong> {data.message}
          </p>
          <p>
            <strong>Timestamp:</strong> {data.timestamp}
          </p>
        </div>
      ) : (
        <p>No data available</p>
      )}
    </div>
  )
}

export default PollingSystem

[V0_FILE]typescript:file="components/image-upload-form.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/components/ui/use-toast"
import { supabase } from "@/lib/supabase-client"

export function ImageUploadForm() {
  const [file, setFile] = useState<File | null>(null)
  const [preview, setPreview] = useState<string | null>(null)
  const router = useRouter()
  const { toast } = useToast()

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const selectedFile = e.target.files[0]
      setFile(selectedFile)

// Create a preview
      const reader = new FileReader()
      reader.onloadend = () => {
        setPreview(reader.result as string)
      }
      reader.readAsDataURL(selectedFile)
    }
  }

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

if (!file) {
      toast({
        title: "Error",
        description: "Please select an image to upload.",
        variant: "destructive",
      })
      return
    }

if (error) {
      toast({
        title: "Error",
        description: "Failed to upload image. Please try again.",
        variant: "destructive",
      })
      return
    }

// Get public URL for the uploaded file
    const {
      data: { publicUrl },
    } = supabase.storage.from("images").getPublicUrl(fileName)

// Here you would typically save the publicUrl to your database
    // along with any other relevant metadata

toast({
      title: "Success",
      description: "Image uploaded successfully.",
    })
    router.push("/dashboard") // or wherever you want to redirect after upload
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="image">Select Image</Label>
        <Input id="image" type="file" accept="image/*" onChange={handleFileChange} required />
      </div>
      {preview && (
        <div className="mt-4">
          <Image src={preview || "/placeholder.svg"} alt="Preview" width={200} height={200} className="rounded-md" />
        </div>
      )}
      <Button type="submit">Upload Image</Button>
    </form>
  )
}

[V0_FILE]typescript:file="app/admin/login/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useToast } from "@/components/ui/use-toast"
import { supabase } from "@/lib/supabase-client"

export default function AdminLoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const router = useRouter()
  const searchParams = useSearchParams()
  const { toast } = useToast()

useEffect(() => {
    const checkUser = async () => {
      const {
        data: { user },
      } = await supabase.auth.getUser()
      if (user && user.email === "wilsonligawa@gmail.com") {
        const redirectedFrom = searchParams.get("redirectedFrom") || "/admin/dashboard"
        router.push(redirectedFrom)
      }
    }
    checkUser()
  }, [router, searchParams])

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

if (email !== "wilsonligawa@gmail.com") {
      toast({
        title: "Error",
        description: "Invalid admin credentials",
        variant: "destructive",
      })
      return
    }

const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })

if (error) {
      toast({
        title: "Error",
        description: "Failed to log in. Please check your credentials.",
        variant: "destructive",
      })
    } else {
      const redirectedFrom = searchParams.get("redirectedFrom") || "/admin/dashboard"
      router.push(redirectedFrom)
    }
  }

return (
    <div className="flex min-h-screen items-center justify-center">
      <form onSubmit={handleLogin} className="w-full max-w-md space-y-4">
        <h1 className="text-2xl font-bold">Admin Login</h1>
        <Input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required />
        <Input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <Button type="submit" className="w-full">
          Log In
        </Button>
      </form>
    </div>
  )
}

[V0_FILE]typescript:file="app/admin/dashboard/page.tsx" isMerged="true" isEdit="true"
"use client"

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

interface Video {
  id: string
  title: string
  thumbnail: string
}

export default function AdminDashboardPage() {
  const [channels, setChannels] = useState<Channel[]>([])
  const [videos, setVideos] = useState<Video[]>([])
  const router = useRouter()
  const { toast } = useToast()

useEffect(() => {
    fetchChannelsAndVideos()
  }, [])

const fetchChannelsAndVideos = async () => {
    const { data: channelsData, error: channelsError } = await supabase
      .from("channels")
      .select("id, name, profile_picture")

const { data: videosData, error: videosError } = await supabase.from("videos").select("id, title, thumbnail")

if (channelsError || videosError) {
      toast({
        title: "Error",
        description: "Failed to fetch data",
        variant: "destructive",
      })
    } else {
      setChannels(channelsData || [])
      setVideos(videosData || [])
    }
  }

const updateProfilePicture = async (type: "channel" | "video", id: string, newUrl: string) => {
    const table = type === "channel" ? "channels" : "videos"
    const column = type === "channel" ? "profile_picture" : "thumbnail"

const { error } = await supabase
      .from(table)
      .update({ [column]: newUrl })
      .eq("id", id)

if (error) {
      toast({
        title: "Error",
        description: `Failed to update ${type} profile picture`,
        variant: "destructive",
      })
    } else {
      toast({
        title: "Success",
        description: `${type.charAt(0).toUpperCase() + type.slice(1)} profile picture updated`,
      })
      fetchChannelsAndVideos()
    }
  }

return (
    <div className="container mx-auto p-4">
      <h1 className="mb-6 text-2xl font-bold">Admin Dashboard</h1>

<h2 className="mb-4 text-xl font-semibold">Channels</h2>
      {channels.map((channel) => (
        <div key={channel.id} className="mb-4 flex items-center space-x-4">
          <span>{channel.name}</span>
          <Input
            type="text"
            placeholder="New profile picture URL"
            className="max-w-md"
            onBlur={(e) => updateProfilePicture("channel", channel.id, e.target.value)}
          />
        </div>
      ))}

<h2 className="mb-4 mt-8 text-xl font-semibold">Videos</h2>
      {videos.map((video) => (
        <div key={video.id} className="mb-4 flex items-center space-x-4">
          <span>{video.title}</span>
          <Input
            type="text"
            placeholder="New thumbnail URL"
            className="max-w-md"
            onBlur={(e) => updateProfilePicture("video", video.id, e.target.value)}
          />
        </div>
      ))}

<Button onClick={() => router.push("/")} className="mt-8">
        Back to Home
      </Button>
    </div>
  )
}

[V0_FILE]typescript:file="middleware.ts" isEdit="true"
import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  const supabase = createMiddlewareClient({ req, res })

const {
    data: { user },
  } = await supabase.auth.getUser()

// Check if it's an admin route
  if (req.nextUrl.pathname.startsWith("/admin")) {
    // Allow access to login page
    if (req.nextUrl.pathname === "/admin/login") {
      return res
    }

if (!user || user.email !== "wilsonligawa@gmail.com") {
      const redirectUrl = new URL("/admin/login", req.url)
      redirectUrl.searchParams.set("redirectedFrom", req.nextUrl.pathname)
      return NextResponse.redirect(redirectUrl)
    }
  }

return res
}

export const config = {
  matcher: ["/admin/:path*"],
}

[V0_FILE]typescriptreact:file="app/admin/login/loading.tsx" isFixed="true" isEdit="true"
export default function Loading() {
  return null
}

[V0_FILE]sql:file="supabase/migrations/20240302_home_content.sql" isMerged="true" isEdit="true"
-- Create the home_content table
CREATE TABLE IF NOT EXISTS home_content (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  hero_title TEXT NOT NULL,
  hero_description TEXT NOT NULL,
  hero_image TEXT NOT NULL,
  featured_videos JSONB DEFAULT '[]'::JSONB,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Insert initial data
INSERT INTO home_content (hero_title, hero_description, hero_image, featured_videos)
VALUES (
  'Welcome to AdultFlix',
  'Subscribe to your favorite creators, watch exclusive content, and join a community of like-minded adults.',
  '/placeholder.svg',
  '[]'::JSONB
) ON CONFLICT (id) DO NOTHING;

-- Create a function to update the updated_at column
CREATE OR REPLACE FUNCTION update_modified_column()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = CURRENT_TIMESTAMP;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create a trigger to call the function
CREATE TRIGGER update_home_content_modtime
BEFORE UPDATE ON home_content
FOR EACH ROW
EXECUTE FUNCTION update_modified_column();
</article></body></html>