[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Search } from "lucide-react" import { BookOpen, BookText, FileText, Users } from "lucide-react" export default function Home() { return (

ShareMet

Exchange Study Materials with Fellow Students

Share textbooks, notes, and resources. Find what you need for your courses.

Textbook Exchange

Save money by exchanging textbooks with other students.

Study Notes

Share your notes and access notes from top students.

Study Groups

Find study partners for your courses and collaborate.

Smart Search

Find exactly what you need with our advanced search features.

How It Works

Our platform makes it easy to exchange educational resources.

Create an Account

List or Search

List your materials or search for what you need.

Exchange & Rate

Connect with other students, exchange materials, and leave feedback.

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import "@/styles/globals.css" import { Inter } from "next/font/google" import type { Metadata } from "next" import { Toaster } from "@/components/ui/toaster" import { ThemeProvider } from "@/components/theme-provider" import { StorageProvider } from "@/lib/storage-context" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "ShareMet - Student Resource Exchange Platform", description: "Exchange study materials, textbooks, notes, and other educational resources with fellow students.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { toast } from "@/components/ui/use-toast" import { createUser } from "@/lib/actions/user-actions" export default function RegisterPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) async function onSubmit(event: React.FormEvent) { event.preventDefault() setIsLoading(true) const formData = new FormData(event.currentTarget) const name = formData.get("name") as string const email = formData.get("email") as string const password = formData.get("password") as string const university = formData.get("university") as string try { await createUser({ name, email, password, university }) toast({ title: "Account created!", description: "You can now log in with your credentials.", }) router.push("/login") } catch (error) { toast({ title: "Error", description: "Something went wrong. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Create an account Enter your information to create an account

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" 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 { toast } from "@/components/ui/use-toast" import { loginUser } from "@/lib/actions/user-actions" export default function LoginPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) async function onSubmit(event: React.FormEvent) { event.preventDefault() setIsLoading(true) const formData = new FormData(event.currentTarget) const email = formData.get("email") as string const password = formData.get("password") as string try { await loginUser({ email, password }) router.push("/dashboard") } catch (error) { toast({ title: "Error", description: "Invalid email or password. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { BookOpen, FileText, MessageSquare, Plus, Star } from "lucide-react" import { getUserMaterials, getUserRequests } from "@/lib/actions/material-actions" import DashboardHeader from "@/components/dashboard-header" export default function DashboardPage() { const [materials, setMaterials] = useState([]) const [requests, setRequests] = useState([]) const [isLoading, setIsLoading] = useState(true) useEffect(() => { async function loadData() { try { const materialsData = await getUserMaterials() const requestsData = await getUserRequests() setMaterials(materialsData) setRequests(requestsData) } catch (error) { console.error("Failed to load dashboard data:", error) } finally { setIsLoading(false) } } loadData() }, []) return (

Dashboard

Materials Shared

{materials.length}

Active Requests

{requests.length}

Rating

4.8/5

My Materials My Requests Exchanges {isLoading ? (

Loading your materials...

) : materials.length > 0 ? (

{/* This would map through actual materials */} Calculus Textbook 8th Edition, James Stewart

Listed: 2 weeks ago Available

Physics Notes Mechanics and Thermodynamics

Listed: 3 days ago Available

) : (

No materials yet

Share your first study material to help other students.

)} {isLoading ? (

Loading your requests...

) : requests.length > 0 ? (

{/* This would map through actual requests */} Organic Chemistry Textbook Looking for 7th Edition by Brown

Requested: 1 week ago Pending

) : (

No requests yet

Create a request for materials you need for your studies.

)}

No active exchanges

When you exchange materials with other students, they will appear here.

) } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { BookOpen, Download, LogOut, Search, Settings, User } from "lucide-react" import { logoutUser } from "@/lib/actions/user-actions" export default function DashboardHeader() { const pathname = usePathname() const handleLogout = async () => { await logoutUser() window.location.href = "/" } return (

ShareMet

My Account Profile Settings Download App Log out

) } [V0_FILE]typescriptreact:file="app/materials/new/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, 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 { Textarea } from "@/components/ui/textarea" import { toast } from "@/components/ui/use-toast" import { Upload, X } from "lucide-react" import { createMaterial } from "@/lib/actions/material-actions" import DashboardHeader from "@/components/dashboard-header" export default function NewMaterialPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [files, setFiles] = useState([]) const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { setFiles(Array.from(e.target.files)) } } const removeFile = (index: number) => { setFiles(files.filter((_, i) => i !== index)) } async function onSubmit(event: React.FormEvent) { event.preventDefault() setIsLoading(true) const formData = new FormData(event.currentTarget) formData.append("fileCount", files.length.toString()) files.forEach((file, i) => { formData.append(`file-${i}`, file) }) try { await createMaterial(formData) toast({ title: "Material added!", description: "Your study material has been successfully added.", }) router.push("/dashboard") } catch (error) { toast({ title: "Error", description: "Failed to add material. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Add New Study Material

Material Details Provide information about the study material you want to share

Title

Material Type

Course/Subject

Description

</div>

<div className="space-y-2">
                  <Label>Upload Files (Optional)</Label>
                  <div className="border-2 border-dashed rounded-lg p-6 text-center cursor-pointer hover:bg-muted/50 transition-colors">
                    <Input type="file" className="hidden" id="file-upload" onChange={handleFileChange} multiple />
                    <Label htmlFor="file-upload" className="cursor-pointer">
                      <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
                      <p className="mt-2 text-sm font-medium">Drag and drop files here or click to browse</p>
                      <p className="text-xs text-muted-foreground mt-1">
                        Upload preview images, PDF samples, or scanned documents
                      </p>
                    </Label>
                  </div>

{files.length > 0 && (
                    <div className="mt-4 space-y-2">
                      <p className="text-sm font-medium">Uploaded Files:</p>
                      <ul className="space-y-2">
                        {files.map((file, index) => (
                          <li key={index} className="flex items-center justify-between bg-muted p-2 rounded-md">
                            <span className="text-sm truncate">{file.name}</span>
                            <Button type="button" variant="ghost" size="sm" onClick={() => removeFile(index)}>
                              <X className="h-4 w-4" />
                            </Button>
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline" type="button" onClick={() => router.back()}>
                  Cancel
                </Button>
                <Button type="submit" disabled={isLoading}>
                  {isLoading ? "Adding Material..." : "Add Material"}
                </Button>
              </CardFooter>
            </form>
          </Card>
        </div>
      </main>
    </div>
  )
}

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

import type React from "react"

import { useState } from "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 { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BookOpen, FileText, SearchIcon } from "lucide-react"
import DashboardHeader from "@/components/dashboard-header"
import { searchMaterials } from "@/lib/actions/material-actions"

export default function SearchPage() {
  const [query, setQuery] = useState("")
  const [results, setResults] = useState([])
  const [isLoading, setIsLoading] = useState(false)
  const [filters, setFilters] = useState({
    types: [],
    subjects: [],
  })

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

try {
      const searchResults = await searchMaterials(query, filters)
      setResults(searchResults)
    } catch (error) {
      console.error("Search failed:", error)
    } finally {
      setIsLoading(false)
    }
  }

const toggleFilter = (category: string, value: string) => {
    setFilters((prev) => {
      const current = prev[category] || []
      return {
        ...prev,
        [category]: current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
      }
    })
  }

// Sample results for demonstration
  const sampleResults = [
    {
      id: 1,
      title: "Calculus: Early Transcendentals",
      type: "textbook",
      description: "8th Edition by James Stewart. Good condition with minimal highlighting.",
      user: "Alex Johnson",
      date: "2 weeks ago",
    },
    {
      id: 2,
      title: "Organic Chemistry Study Notes",
      type: "notes",
      description: "Comprehensive notes covering all topics from the semester.",
      user: "Maria Garcia",
      date: "3 days ago",
    },
    {
      id: 3,
      title: "Physics Problem Set Solutions",
      type: "practice_problems",
      description: "Worked solutions for all problem sets from Physics 101.",
      user: "David Kim",
      date: "1 week ago",
    },
  ]

return (
    <div className="flex min-h-screen flex-col">
      <DashboardHeader />
      <main className="flex-1 container py-6">
        <div className="flex flex-col md:flex-row gap-6">
          <div className="md:w-1/4">
            <Card>
              <CardHeader>
                <CardTitle>Filters</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-2">
                  <h3 className="text-sm font-medium">Material Type</h3>
                  <div className="space-y-2">
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="type-textbook"
                        checked={filters.types.includes("textbook")}
                        onCheckedChange={() => toggleFilter("types", "textbook")}
                      />
                      <Label htmlFor="type-textbook">Textbooks</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="type-notes"
                        checked={filters.types.includes("notes")}
                        onCheckedChange={() => toggleFilter("types", "notes")}
                      />
                      <Label htmlFor="type-notes">Notes</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="type-practice"
                        checked={filters.types.includes("practice_problems")}
                        onCheckedChange={() => toggleFilter("types", "practice_problems")}
                      />
                      <Label htmlFor="type-practice">Practice Problems</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="type-guide"
                        checked={filters.types.includes("study_guide")}
                        onCheckedChange={() => toggleFilter("types", "study_guide")}
                      />
                      <Label htmlFor="type-guide">Study Guides</Label>
                    </div>
                  </div>
                </div>

<div className="space-y-2">
                  <h3 className="text-sm font-medium">Subject Area</h3>
                  <div className="space-y-2">
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="subject-math"
                        checked={filters.subjects.includes("math")}
                        onCheckedChange={() => toggleFilter("subjects", "math")}
                      />
                      <Label htmlFor="subject-math">Mathematics</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="subject-science"
                        checked={filters.subjects.includes("science")}
                        onCheckedChange={() => toggleFilter("subjects", "science")}
                      />
                      <Label htmlFor="subject-science">Science</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="subject-cs"
                        checked={filters.subjects.includes("computer_science")}
                        onCheckedChange={() => toggleFilter("subjects", "computer_science")}
                      />
                      <Label htmlFor="subject-cs">Computer Science</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="subject-humanities"
                        checked={filters.subjects.includes("humanities")}
                        onCheckedChange={() => toggleFilter("subjects", "humanities")}
                      />
                      <Label htmlFor="subject-humanities">Humanities</Label>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

<div className="md:w-3/4">
            <div className="mb-6">
              <form onSubmit={handleSearch} className="flex gap-2">
                <div className="relative flex-1">
                  <SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    type="search"
                    placeholder="Search for textbooks, notes, study guides..."
                    className="pl-8"
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                  />
                </div>
                <Button type="submit" disabled={isLoading}>
                  {isLoading ? "Searching..." : "Search"}
                </Button>
              </form>
            </div>

<Tabs defaultValue="all" className="space-y-4">
              <TabsList>
                <TabsTrigger value="all">All Results</TabsTrigger>
                <TabsTrigger value="textbooks">Textbooks</TabsTrigger>
                <TabsTrigger value="notes">Notes</TabsTrigger>
                <TabsTrigger value="practice">Practice Materials</TabsTrigger>
              </TabsList>

<TabsContent value="all" className="space-y-4">
                <div className="grid gap-4">
                  {sampleResults.map((result) => (
                    <Card key={result.id}>
                      <div className="flex flex-col md:flex-row">
                        <div className="md:w-1/4 p-4 flex items-center justify-center bg-muted rounded-l-lg">
                          {result.type === "textbook" ? (
                            <BookOpen className="h-16 w-16 text-muted-foreground" />
                          ) : (
                            <FileText className="h-16 w-16 text-muted-foreground" />
                          )}
                        </div>
                        <div className="flex-1">
                          <CardHeader>
                            <CardTitle>{result.title}</CardTitle>
                            <CardDescription>
                              Shared by {result.user} • {result.date}
                            </CardDescription>
                          </CardHeader>
                          <CardContent>
                            <p>{result.description}</p>
                          </CardContent>
                          <CardFooter className="flex justify-between">
                            <Button variant="outline">View Details</Button>
                            <Button>Request Exchange</Button>
                          </CardFooter>
                        </div>
                      </div>
                    </Card>
                  ))}
                </div>
              </TabsContent>

<TabsContent value="textbooks" className="space-y-4">
                <div className="grid gap-4">
                  {sampleResults
                    .filter((result) => result.type === "textbook")
                    .map((result) => (
                      <Card key={result.id}>
                        <div className="flex flex-col md:flex-row">
                          <div className="md:w-1/4 p-4 flex items-center justify-center bg-muted rounded-l-lg">
                            <BookOpen className="h-16 w-16 text-muted-foreground" />
                          </div>
                          <div className="flex-1">
                            <CardHeader>
                              <CardTitle>{result.title}</CardTitle>
                              <CardDescription>
                                Shared by {result.user} • {result.date}
                              </CardDescription>
                            </CardHeader>
                            <CardContent>
                              <p>{result.description}</p>
                            </CardContent>
                            <CardFooter className="flex justify-between">
                              <Button variant="outline">View Details</Button>
                              <Button>Request Exchange</Button>
                            </CardFooter>
                          </div>
                        </div>
                      </Card>
                    ))}
                </div>
              </TabsContent>

<TabsContent value="notes" className="space-y-4">
                <div className="grid gap-4">
                  {sampleResults
                    .filter((result) => result.type === "notes")
                    .map((result) => (
                      <Card key={result.id}>
                        <div className="flex flex-col md:flex-row">
                          <div className="md:w-1/4 p-4 flex items-center justify-center bg-muted rounded-l-lg">
                            <FileText className="h-16 w-16 text-muted-foreground" />
                          </div>
                          <div className="flex-1">
                            <CardHeader>
                              <CardTitle>{result.title}</CardTitle>
                              <CardDescription>
                                Shared by {result.user} • {result.date}
                              </CardDescription>
                            </CardHeader>
                            <CardContent>
                              <p>{result.description}</p>
                            </CardContent>
                            <CardFooter className="flex justify-between">
                              <Button variant="outline">View Details</Button>
                              <Button>Request Exchange</Button>
                            </CardFooter>
                          </div>
                        </div>
                      </Card>
                    ))}
                </div>
              </TabsContent>

<TabsContent value="practice" className="space-y-4">
                <div className="grid gap-4">
                  {sampleResults
                    .filter((result) => result.type === "practice_problems")
                    .map((result) => (
                      <Card key={result.id}>
                        <div className="flex flex-col md:flex-row">
                          <div className="md:w-1/4 p-4 flex items-center justify-center bg-muted rounded-l-lg">
                            <FileText className="h-16 w-16 text-muted-foreground" />
                          </div>
                          <div className="flex-1">
                            <CardHeader>
                              <CardTitle>{result.title}</CardTitle>
                              <CardDescription>
                                Shared by {result.user} • {result.date}
                              </CardDescription>
                            </CardHeader>
                            <CardContent>
                              <p>{result.description}</p>
                            </CardContent>
                            <CardFooter className="flex justify-between">
                              <Button variant="outline">View Details</Button>
                              <Button>Request Exchange</Button>
                            </CardFooter>
                          </div>
                        </div>
                      </Card>
                    ))}
                </div>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  )
}

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

[V0_FILE]typescriptreact:file="lib/actions/user-actions.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use server"

import { cookies } from "next/headers"
import { redirect } from "next/navigation"
import { hash, compare } from "@/lib/security"

// In a real application, you would use a database and proper authentication
// This is a simplified mock implementation with enhanced security

// Mock database
const users = [
  {
    id: "user_admin",
    name: "Admin User",
    email: "admin@sharemet.com",
    password: "$2a$10$GQH.xZUBHMDUDJnB5Xj9a.6FVGl6H3oLJJYf4Qhq4hJVUOjyCIQnS", // hashed "admin123"
    university: "ShareMet University",
    role: "admin",
    profileImage: null,
    bio: "Platform administrator",
    createdAt: "2023-01-01T00:00:00Z",
    lastLogin: null,
    settings: {
      notifications: true,
      darkMode: false,
      privacy: "public",
    },
  },
]

export type User = {
  id: string
  name: string
  email: string
  university: string
  role: "user" | "admin"
  profileImage: string | null
  bio: string | null
  createdAt: string
  lastLogin: string | null
  settings: {
    notifications: boolean
    darkMode: boolean
    privacy: "public" | "private" | "friends"
  }
}

export async function createUser({
  name,
  email,
  password,
  university,
}: {
  name: string
  email: string
  password: string
  university: string
}) {
  // Check if user already exists
  if (users.some((user) => user.email === email)) {
    throw new Error("User with this email already exists")
  }

// Hash the password
  const hashedPassword = await hash(password)

// Create new user
  const userId = `user_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`

const newUser = {
    id: userId,
    name,
    email,
    password: hashedPassword,
    university,
    role: "user" as const,
    profileImage: null,
    bio: null,
    createdAt: new Date().toISOString(),
    lastLogin: null,
    settings: {
      notifications: true,
      darkMode: false,
      privacy: "public" as const,
    },
  }

// Add to mock database
  users.push(newUser)

// Set a secure cookie to simulate authentication
  const cookieOptions = {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    maxAge: 60 * 60 * 24 * 7, // 1 week
    path: "/",
    sameSite: "strict" as const,
  }

cookies().set("userId", userId, cookieOptions)
  cookies().set("userRole", "user", cookieOptions)

// Don't return the password
  const { password: _, ...userWithoutPassword } = newUser
  return { success: true, user: userWithoutPassword }
}

export async function loginUser({ email, password }: { email: string; password: string }) {
  // Find user
  const user = users.find((user) => user.email === email)

if (!user) {
    throw new Error("Invalid email or password")
  }

// Verify password
  const passwordMatch = await compare(password, user.password)

if (!passwordMatch) {
    throw new Error("Invalid email or password")
  }

// Update last login
  user.lastLogin = new Date().toISOString()

// Set secure cookies
  const cookieOptions = {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    maxAge: 60 * 60 * 24 * 7, // 1 week
    path: "/",
    sameSite: "strict" as const,
  }

cookies().set("userId", user.id, cookieOptions)
  cookies().set("userRole", user.role, cookieOptions)

// Don't return the password
  const { password: _, ...userWithoutPassword } = user
  return { success: true, user: userWithoutPassword }
}

export async function logoutUser() {
  cookies().delete("userId")
  cookies().delete("userRole")
  return { success: true }
}

export async function getCurrentUser(): Promise<User | null> {
  const userId = cookies().get("userId")?.value
  const userRole = cookies().get("userRole")?.value

if (!userId) {
    return null
  }

// Find user in mock database
  const user = users.find((u) => u.id === userId)

if (!user) {
    // Clear invalid cookies
    cookies().delete("userId")
    cookies().delete("userRole")
    return null
  }

// Don't return the password
  const { password, ...userWithoutPassword } = user
  return userWithoutPassword as User
}

export async function requireAuth() {
  const user = await getCurrentUser()

if (!user) {
    redirect("/login")
  }

return user
}

export async function requireAdmin() {
  const user = await getCurrentUser()

if (!user || user.role !== "admin") {
    redirect("/login")
  }

return user
}

export async function updateUserProfile(updates: Partial<Omit<User, "id" | "role" | "createdAt">>) {
  const user = await requireAuth()

// Find user index
  const userIndex = users.findIndex((u) => u.id === user.id)

if (userIndex === -1) {
    throw new Error("User not found")
  }

// Update user data
  users[userIndex] = {
    ...users[userIndex],
    ...updates,
    // Prevent updating these fields
    id: user.id,
    role: user.role,
    createdAt: user.createdAt,
  }

// Don't return the password
  const { password, ...updatedUser } = users[userIndex]
  return { success: true, user: updatedUser }
}

export async function updateUserSettings(settings: Partial<User["settings"]>) {
  const user = await requireAuth()

// Find user index
  const userIndex = users.findIndex((u) => u.id === user.id)

if (userIndex === -1) {
    throw new Error("User not found")
  }

// Update settings
  users[userIndex].settings = {
    ...users[userIndex].settings,
    ...settings,
  }

// Don't return the password
  const { password, ...updatedUser } = users[userIndex]
  return { success: true, user: updatedUser }
}

export async function changePassword({
  currentPassword,
  newPassword,
}: { currentPassword: string; newPassword: string }) {
  const user = await requireAuth()

// Find user
  const userIndex = users.findIndex((u) => u.id === user.id)

if (userIndex === -1) {
    throw new Error("User not found")
  }

// Verify current password
  const passwordMatch = await compare(currentPassword, users[userIndex].password)

if (!passwordMatch) {
    throw new Error("Current password is incorrect")
  }

// Hash and update new password
  const hashedPassword = await hash(newPassword)
  users[userIndex].password = hashedPassword

return { success: true }
}

[V0_FILE]typescriptreact:file="lib/actions/material-actions.ts" isEdit="true" isMerged="true"
"use server"

import { requireAuth } from "./user-actions"
import { revalidatePath } from "next/cache"
import { sanitizeInput } from "@/lib/security"

// In a real application, you would use a database
// This is a simplified mock implementation with in-memory storage

// Mock database
const materials = []
const requests = []
const feedback = []
const scannedDocuments = []

export async function createMaterial(formData: FormData) {
  const user = await requireAuth()

// Process the form data
  const title = sanitizeInput(formData.get("title") as string)
  const type = formData.get("type") as string
  const course = sanitizeInput(formData.get("course") as string)
  const description = sanitizeInput(formData.get("description") as string)

// Process files
  const fileCount = Number.parseInt(formData.get("fileCount") as string) || 0
  const files = []

for (let i = 0; i < fileCount; i++) {
    const file = formData.get(`file-${i}`) as File
    if (file) {
      // In a real app, you would upload this file to storage
      // and save the URL/reference
      files.push({
        id: `file_${Date.now()}_${i}`,
        name: file.name,
        size: file.size,
        type: file.type,
        // In a real app, this would be the URL to the stored file
        url: `/api/files/${Date.now()}-${file.name}`,
      })
    }
  }

// Create the material object
  const material = {
    id: `material_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
    title,
    type,
    course,
    description,
    files,
    userId: user.id,
    userName: user.name,
    createdAt: new Date().toISOString(),
    status: "available",
    rating: null,
    reviewCount: 0,
    views: 0,
    downloads: 0,
    tags: formData.get("tags") ? (formData.get("tags") as string).split(",").map((tag) => tag.trim()) : [],
  }

// Save to our mock database
  materials.push(material)

// Revalidate the materials page to reflect changes
  revalidatePath("/materials")
  revalidatePath("/dashboard")

return { success: true, material }
}

export async function getUserMaterials() {
  const user = await requireAuth()

// Filter materials by user ID
  return materials.filter((material) => material.userId === user.id)
}

export async function getAllMaterials() {
  // Return all available materials
  return materials.filter((material) => material.status === "available")
}

export async function getMaterialById(id: string) {
  const material = materials.find((material) => material.id === id)

if (material) {
    // Increment view count
    material.views += 1
  }

return material || null
}

export async function createMaterialRequest(materialId: string, message: string) {
  const user = await requireAuth()

const material = await getMaterialById(materialId)
  if (!material) {
    throw new Error("Material not found")
  }

const request = {
    id: `request_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
    materialId,
    materialTitle: material.title,
    requesterId: user.id,
    requesterName: user.name,
    ownerId: material.userId,
    ownerName: material.userName,
    message: sanitizeInput(message),
    status: "pending",
    createdAt: new Date().toISOString(),
    updatedAt: null,
    notes: null,
  }

// Save to our mock database
  requests.push(request)

// Revalidate paths
  revalidatePath("/requests")
  revalidatePath("/dashboard")

return { success: true, request }
}

export async function getUserRequests() {
  const user = await requireAuth()

// Get requests made by the user
  return requests.filter((request) => request.requesterId === user.id)
}

export async function getIncomingRequests() {
  const user = await requireAuth()

// Get requests for the user's materials
  return requests.filter((request) => request.ownerId === user.id)
}

export async function updateRequestStatus(requestId: string, status: "accepted" | "rejected", notes?: string) {
  const user = await requireAuth()

// Find the request
  const requestIndex = requests.findIndex((req) => req.id === requestId)
  if (requestIndex === -1) {
    throw new Error("Request not found")
  }

// Verify ownership
  if (requests[requestIndex].ownerId !== user.id) {
    throw new Error("Unauthorized")
  }

// Update status
  requests[requestIndex] = {
    ...requests[requestIndex],
    status,
    updatedAt: new Date().toISOString(),
    notes: notes ? sanitizeInput(notes) : null,
  }

// If accepted, update material status
  if (status === "accepted") {
    const materialIndex = materials.findIndex((mat) => mat.id === requests[requestIndex].materialId)
    if (materialIndex !== -1) {
      materials[materialIndex] = {
        ...materials[materialIndex],
        status: "exchanging",
      }
    }
  }

// Revalidate paths
  revalidatePath("/requests")
  revalidatePath("/dashboard")

return { success: true, request: requests[requestIndex] }
}

export async function searchMaterials(query: string, filters: any = {}) {
  // Get all available materials
  let results = materials.filter((material) => material.status === "available")

// Apply search query if provided
  if (query) {
    const lowerQuery = query.toLowerCase()
    results = results.filter(
      (material) =>
        material.title.toLowerCase().includes(lowerQuery) ||
        material.description.toLowerCase().includes(lowerQuery) ||
        material.course.toLowerCase().includes(lowerQuery) ||
        (material.tags && material.tags.some((tag) => tag.toLowerCase().includes(lowerQuery))),
    )
  }

// Apply type filters
  if (filters.types && filters.types.length > 0) {
    results = results.filter((material) => filters.types.includes(material.type))
  }

// Apply subject filters
  if (filters.subjects && filters.subjects.length > 0) {
    // This assumes materials have a subject field or that course can be mapped to a subject
    results = results.filter((material) => {
      const lowerCourse = material.course.toLowerCase()
      return filters.subjects.some((subject) => lowerCourse.includes(subject.toLowerCase()))
    })
  }

// Apply date filter
  if (filters.dateRange) {
    const { from, to } = filters.dateRange
    if (from) {
      results = results.filter((material) => new Date(material.createdAt) >= new Date(from))
    }
    if (to) {
      results = results.filter((material) => new Date(material.createdAt) <= new Date(to))
    }
  }

// Apply rating filter
  if (filters.minRating) {
    results = results.filter((material) => material.rating !== null && material.rating >= filters.minRating)
  }

return results
}

export async function scanDocument(file: File, text?: string) {
  const user = await requireAuth()

// In a real app, you would:
  // 1. Upload the file to a document processing service
  // 2. Use OCR to extract text
  // 3. Process and index the content

const scannedDoc = {
    id: `scan_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
    fileName: file.name,
    fileType: file.type,
    fileSize: file.size,
    text: text || "Extracted text would appear here",
    userId: user.id,
    userName: user.name,
    createdAt: new Date().toISOString(),
    url: `/api/scans/${Date.now()}-${file.name}`,
    tags: [],
    isProcessed: true,
  }

// Save to our mock database
  scannedDocuments.push(scannedDoc)

// Revalidate paths
  revalidatePath("/scans")

return { success: true, scan: scannedDoc }
}

export async function getUserScannedDocuments() {
  const user = await requireAuth()

// Get scanned documents for the current user
  return scannedDocuments.filter((doc) => doc.userId === user.id)
}

export async function getScannedDocumentById(id: string) {
  const user = await requireAuth()

// Find the document
  const document = scannedDocuments.find((doc) => doc.id === id)

if (!document) {
    throw new Error("Document not found")
  }

// Verify ownership
  if (document.userId !== user.id) {
    throw new Error("Unauthorized")
  }

return document
}

export async function updateScannedDocument(id: string, updates: { text?: string; tags?: string[] }) {
  const user = await requireAuth()

// Find the document
  const docIndex = scannedDocuments.findIndex((doc) => doc.id === id)

if (docIndex === -1) {
    throw new Error("Document not found")
  }

// Verify ownership
  if (scannedDocuments[docIndex].userId !== user.id) {
    throw new Error("Unauthorized")
  }

// Update document
  scannedDocuments[docIndex] = {
    ...scannedDocuments[docIndex],
    ...updates,
    text: updates.text ? sanitizeInput(updates.text) : scannedDocuments[docIndex].text,
    tags: updates.tags ? updates.tags.map((tag) => sanitizeInput(tag)) : scannedDocuments[docIndex].tags,
  }

// Revalidate paths
  revalidatePath(`/scans/${id}`)
  revalidatePath("/scans")

return { success: true, document: scannedDocuments[docIndex] }
}

export async function deleteScannedDocument(id: string) {
  const user = await requireAuth()

// Find the document
  const docIndex = scannedDocuments.findIndex((doc) => doc.id === id)

if (docIndex === -1) {
    throw new Error("Document not found")
  }

// Verify ownership
  if (scannedDocuments[docIndex].userId !== user.id) {
    throw new Error("Unauthorized")
  }

// Remove document
  scannedDocuments.splice(docIndex, 1)

// Revalidate paths
  revalidatePath("/scans")

return { success: true }
}

export async function submitFeedback(materialId: string, rating: number, comment: string) {
  const user = await requireAuth()

const material = await getMaterialById(materialId)
  if (!material) {
    throw new Error("Material not found")
  }

// Check if user has already submitted feedback
  const existingFeedback = feedback.find((fb) => fb.materialId === materialId && fb.userId === user.id)

if (existingFeedback) {
    throw new Error("You have already submitted feedback for this material")
  }

const feedbackItem = {
    id: `feedback_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
    materialId,
    userId: user.id,
    userName: user.name,
    rating,
    comment: sanitizeInput(comment),
    createdAt: new Date().toISOString(),
  }

// Save to our mock database
  feedback.push(feedbackItem)

// Update material rating
  const materialFeedback = feedback.filter((fb) => fb.materialId === materialId)
  const totalRating = materialFeedback.reduce((sum, fb) => sum + fb.rating, 0)
  const averageRating = totalRating / materialFeedback.length

const materialIndex = materials.findIndex((mat) => mat.id === materialId)
  if (materialIndex !== -1) {
    materials[materialIndex] = {
      ...materials[materialIndex],
      rating: averageRating,
      reviewCount: materialFeedback.length,
    }
  }

// Revalidate paths
  revalidatePath(`/materials/${materialId}`)

return { success: true, feedback: feedbackItem }
}

export async function getMaterialFeedback(materialId: string) {
  return feedback.filter((fb) => fb.materialId === materialId)
}

// Web search integration
export async function searchWeb(query: string) {
  // In a real app, this would call an external API
  // For demo purposes, return mock results
  await new Promise((resolve) => setTimeout(resolve, 1000))

return [
    {
      id: "web_1",
      title: "Introduction to Calculus - MIT OpenCourseWare",
      description: "Free calculus textbook and course materials from MIT",
      url: "https://ocw.mit.edu/courses/mathematics/18-01-single-variable-calculus-fall-2006/",
      source: "MIT OpenCourseWare",
    },
    {
      id: "web_2",
      title: "Physics Textbooks - Open Textbook Library",
      description: "Collection of free physics textbooks for undergraduate courses",
      url: "https://open.umn.edu/opentextbooks/subjects/physics",
      source: "Open Textbook Library",
    },
    {
      id: "web_3",
      title: "Chemistry Study Notes - Khan Academy",
      description: "Comprehensive chemistry notes and practice problems",
      url: "https://www.khanacademy.org/science/chemistry",
      source: "Khan Academy",
    },
    {
      id: "web_4",
      title: "Computer Science Tutorials - W3Schools",
      description: "Interactive tutorials for programming and computer science concepts",
      url: "https://www.w3schools.com/",
      source: "W3Schools",
    },
    {
      id: "web_5",
      title: "Biology Study Materials - OpenStax",
      description: "Free, peer-reviewed, openly licensed biology textbooks",
      url: "https://openstax.org/subjects/science",
      source: "OpenStax",
    },
  ]
}

// Download functionality
export async function incrementDownloadCount(materialId: string) {
  const material = materials.find((m) => m.id === materialId)

if (material) {
    material.downloads += 1
  }

return { success: true }
}

// Advanced search with AI recommendations
export async function getRecommendedMaterials(userId: string) {
  const user = await requireAuth()

// In a real app, this would use an AI recommendation system
  // For demo, return some random materials
  const availableMaterials = materials.filter((m) => m.status === "available" && m.userId !== user.id)

// Shuffle and take up to 5
  return availableMaterials.sort(() => 0.5 - Math.random()).slice(0, 5)
}

[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true"
"use client"

import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
import { useToast } from "@/components/ui/use-toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(({ id, title, description, action, ...props }) => (
        <Toast key={id} {...props}>
          <div className="grid gap-1">
            {title && <ToastTitle>{title}</ToastTitle>}
            {description && <ToastDescription>{description}</ToastDescription>}
          </div>
          {action}
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  )
}

[V0_FILE]typescriptreact:file="components/ui/use-toast.ts" isMerged="true"
"use client"

import * as React from "react"

import type { ToastActionElement, ToastProps } from "@/components/ui/toast"

const TOAST_LIMIT = 5
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: string
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: string
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

function addToRemoveQueue(toastId: string) {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export { useToast, toast }

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

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

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

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { BarChart, LineChart, PieChart } from "lucide-react"
import DashboardHeader from "@/components/dashboard-header"

export default function AdminPage() {
  const [isLoading, setIsLoading] = useState(true)
  const [stats, setStats] = useState({
    totalUsers: 0,
    totalMaterials: 0,
    totalExchanges: 0,
    activeRequests: 0,
  })

useEffect(() => {
    // Simulate loading admin data
    const timer = setTimeout(() => {
      setStats({
        totalUsers: 1245,
        totalMaterials: 3782,
        totalExchanges: 892,
        activeRequests: 156,
      })
      setIsLoading(false)
    }, 1000)

return () => clearTimeout(timer)
  }, [])

// Sample data for demonstration
  const recentUsers = [
    { id: 1, name: "Emma Wilson", email: "emma@university.edu", joined: "2023-03-15", status: "active" },
    { id: 2, name: "Michael Brown", email: "michael@college.edu", joined: "2023-03-14", status: "active" },
    { id: 3, name: "Sophia Garcia", email: "sophia@university.edu", joined: "2023-03-13", status: "pending" },
    { id: 4, name: "James Johnson", email: "james@college.edu", joined: "2023-03-12", status: "active" },
    { id: 5, name: "Olivia Martinez", email: "olivia@university.edu", joined: "2023-03-11", status: "inactive" },
  ]

const recentMaterials = [
    {
      id: 1,
      title: "Calculus Textbook",
      type: "textbook",
      user: "Emma Wilson",
      date: "2023-03-15",
      status: "approved",
    },
    { id: 2, title: "Physics Notes", type: "notes", user: "Michael Brown", date: "2023-03-14", status: "pending" },
    {
      id: 3,
      title: "Chemistry Lab Manual",
      type: "textbook",
      user: "Sophia Garcia",
      date: "2023-03-13",
      status: "approved",
    },
    {
      id: 4,
      title: "Computer Science Algorithms",
      type: "notes",
      user: "James Johnson",
      date: "2023-03-12",
      status: "rejected",
    },
    {
      id: 5,
      title: "Biology Study Guide",
      type: "study_guide",
      user: "Olivia Martinez",
      date: "2023-03-11",
      status: "approved",
    },
  ]

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-6">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Users</CardTitle>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                className="h-4 w-4 text-muted-foreground"
              >
                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                <circle cx="9" cy="7" r="4" />
                <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
              </svg>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{isLoading ? "..." : stats.totalUsers}</div>
              <p className="text-xs text-muted-foreground">+12% from last month</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Materials</CardTitle>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                className="h-4 w-4 text-muted-foreground"
              >
                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
              </svg>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{isLoading ? "..." : stats.totalMaterials}</div>
              <p className="text-xs text-muted-foreground">+18% from last month</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Exchanges</CardTitle>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                className="h-4 w-4 text-muted-foreground"
              >
                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
              </svg>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{isLoading ? "..." : stats.totalExchanges}</div>
              <p className="text-xs text-muted-foreground">+7% from last month</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Active Requests</CardTitle>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                className="h-4 w-4 text-muted-foreground"
              >
                <rect width="20" height="14" x="2" y="5" rx="2" />
                <path d="M2 10h20" />
              </svg>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{isLoading ? "..." : stats.activeRequests}</div>
              <p className="text-xs text-muted-foreground">+5% from last month</p>
            </CardContent>
          </Card>
        </div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-7 mb-6">
          <Card className="col-span-4">
            <CardHeader>
              <CardTitle>Activity Overview</CardTitle>
            </CardHeader>
            <CardContent className="pl-2">
              <div className="h-[200px] flex items-center justify-center text-muted-foreground">
                <LineChart className="h-16 w-16" />
                <span className="ml-2">Activity chart would render here</span>
              </div>
            </CardContent>
          </Card>
          <Card className="col-span-3">
            <CardHeader>
              <CardTitle>Material Distribution</CardTitle>
            </CardHeader>
            <CardContent className="pl-2">
              <div className="h-[200px] flex items-center justify-center text-muted-foreground">
                <PieChart className="h-16 w-16" />
                <span className="ml-2">Distribution chart would render here</span>
              </div>
            </CardContent>
          </Card>
        </div>

<Tabs defaultValue="users" className="space-y-4">
          <TabsList>
            <TabsTrigger value="users">Users</TabsTrigger>
            <TabsTrigger value="materials">Materials</TabsTrigger>
            <TabsTrigger value="reports">Reports</TabsTrigger>
          </TabsList>
          <TabsContent value="users" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Recent Users</CardTitle>
                <CardDescription>Manage and monitor user accounts</CardDescription>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Name</TableHead>
                      <TableHead>Email</TableHead>
                      <TableHead>Joined</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead className="text-right">Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {recentUsers.map((user) => (
                      <TableRow key={user.id}>
                        <TableCell className="font-medium">{user.name}</TableCell>
                        <TableCell>{user.email}</TableCell>
                        <TableCell>{new Date(user.joined).toLocaleDateString()}</TableCell>
                        <TableCell>
                          <span
                            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                              user.status === "active"
                                ? "bg-green-100 text-green-800"
                                : user.status === "pending"
                                  ? "bg-yellow-100 text-yellow-800"
                                  : "bg-red-100 text-red-800"
                            }`}
                          >
                            {user.status}
                          </span>
                        </TableCell>
                        <TableCell className="text-right">
                          <Button variant="ghost" size="sm">
                            View
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="materials" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Recent Materials</CardTitle>
                <CardDescription>Review and moderate study materials</CardDescription>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Title</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>User</TableHead>
                      <TableHead>Date</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead className="text-right">Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {recentMaterials.map((material) => (
                      <TableRow key={material.id}>
                        <TableCell className="font-medium">{material.title}</TableCell>
                        <TableCell>{material.type}</TableCell>
                        <TableCell>{material.user}</TableCell>
                        <TableCell>{new Date(material.date).toLocaleDateString()}</TableCell>
                        <TableCell>
                          <span
                            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                              material.status === "approved"
                                ? "bg-green-100 text-green-800"
                                : material.status === "pending"
                                  ? "bg-yellow-100 text-yellow-800"
                                  : "bg-red-100 text-red-800"
                            }`}
                          >
                            {material.status}
                          </span>
                        </TableCell>
                        <TableCell className="text-right">
                          <Button variant="ghost" size="sm">
                            Review
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="reports" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>System Reports</CardTitle>
                <CardDescription>View and export system analytics</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">User Growth</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="h-[100px] flex items-center justify-center text-muted-foreground">
                        <BarChart className="h-10 w-10" />
                      </div>
                      <Button className="w-full mt-2" variant="outline">
                        Export
                      </Button>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">Material Categories</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="h-[100px] flex items-center justify-center text-muted-foreground">
                        <PieChart className="h-10 w-10" />
                      </div>
                      <Button className="w-full mt-2" variant="outline">
                        Export
                      </Button>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">Exchange Trends</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="h-[100px] flex items-center justify-center text-muted-foreground">
                        <LineChart className="h-10 w-10" />
                      </div>
                      <Button className="w-full mt-2" variant="outline">
                        Export
                      </Button>
                    </CardContent>
                  </Card>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}

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

import type React from "react"

import { useState, useRef } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"
import { Camera, FileText, Loader2, Upload, X } from "lucide-react"
import { createMaterial } from "@/lib/actions/material-actions"
import DashboardHeader from "@/components/dashboard-header"

export default function ScanPage() {
  const router = useRouter()
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [files, setFiles] = useState<File[]>([])
  const [isScanning, setIsScanning] = useState(false)
  const [scanResults, setScanResults] = useState<Array<{ file: File; text: string }>>([])
  const [activeTab, setActiveTab] = useState("upload")
  const [materialTitle, setMaterialTitle] = useState("")
  const [materialType, setMaterialType] = useState("")
  const [materialCourse, setMaterialCourse] = useState("")
  const [materialDescription, setMaterialDescription] = useState("")
  const [isSaving, setIsSaving] = useState(false)
  const [cameraActive, setCameraActive] = useState(false)
  const videoRef = useRef<HTMLVideoElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const newFiles = Array.from(e.target.files)
      setFiles((prev) => [...prev, ...newFiles])
    }
  }

const removeFile = (index: number) => {
    setFiles(files.filter((_, i) => i !== index))
  }

const handleScan = async () => {
    if (files.length === 0) {
      toast({
        title: "No files selected",
        description: "Please select at least one document to scan",
        variant: "destructive",
      })
      return
    }

setIsScanning(true)
    setScanResults([])

try {
      // Process each file
      for (const file of files) {
        // In a real app, this would call an OCR service
        // For demo, we'll simulate a scan result after a delay
        await new Promise((resolve) => setTimeout(resolve, 1000))

const result = {
          file,
          text: `Sample extracted text from ${file.name}. In a real application, this would be the actual text extracted from the document using OCR technology. The text would be searchable and could be used to create study materials.`,
        }

setScanResults((prev) => [...prev, result])
      }

setActiveTab("result")
      toast({
        title: "Documents scanned successfully",
        description: `Scanned ${files.length} document(s)`,
      })
    } catch (error) {
      toast({
        title: "Scan failed",
        description: "There was an error scanning your documents",
        variant: "destructive",
      })
    } finally {
      setIsScanning(false)
    }
  }

const startCamera = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: { facingMode: "environment" },
      })

if (videoRef.current) {
        videoRef.current.srcObject = stream
        setCameraActive(true)
      }
    } catch (error) {
      console.error("Error accessing camera:", error)
      toast({
        title: "Camera access failed",
        description: "Could not access your camera. Please check permissions.",
        variant: "destructive",
      })
    }
  }

const stopCamera = () => {
    if (videoRef.current && videoRef.current.srcObject) {
      const tracks = (videoRef.current.srcObject as MediaStream).getTracks()
      tracks.forEach((track) => track.stop())
      videoRef.current.srcObject = null
      setCameraActive(false)
    }
  }

const captureImage = () => {
    if (videoRef.current && canvasRef.current) {
      const video = videoRef.current
      const canvas = canvasRef.current
      const context = canvas.getContext("2d")

if (context) {
        canvas.width = video.videoWidth
        canvas.height = video.videoHeight
        context.drawImage(video, 0, 0, canvas.width, canvas.height)

canvas.toBlob((blob) => {
          if (blob) {
            const file = new File([blob], `scan_${Date.now()}.jpg`, { type: "image/jpeg" })
            setFiles((prev) => [...prev, file])
            stopCamera()
            toast({
              title: "Image captured",
              description: "The image has been added to your files",
            })
          }
        }, "image/jpeg")
      }
    }
  }

const handleSaveMaterial = async () => {
    if (!materialTitle || !materialType || !materialCourse) {
      toast({
        title: "Missing information",
        description: "Please fill in all required fields",
        variant: "destructive",
      })
      return
    }

setIsSaving(true)

try {
      // Create FormData object
      const formData = new FormData()
      formData.append("title", materialTitle)
      formData.append("type", materialType)
      formData.append("course", materialCourse)
      formData.append("description", materialDescription || "Created from scanned documents")

// Add files
      formData.append("fileCount", files.length.toString())
      files.forEach((file, i) => {
        formData.append(`file-${i}`, file)
      })

// Add scan results as metadata
      scanResults.forEach((result, i) => {
        formData.append(`scanText-${i}`, result.text)
      })

await createMaterial(formData)

toast({
        title: "Material saved!",
        description: "Your scanned material has been successfully saved.",
      })

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

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

<Card>
            <CardHeader>
              <CardTitle>Scan Documents</CardTitle>
              <CardDescription>
                Upload and scan documents to extract text and create searchable study materials
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
                <TabsList>
                  <TabsTrigger value="upload">Upload</TabsTrigger>
                  <TabsTrigger value="camera">Camera</TabsTrigger>
                  <TabsTrigger value="result" disabled={scanResults.length === 0}>
                    Results
                  </TabsTrigger>
                </TabsList>

<TabsContent value="upload" className="space-y-4">
                  <div
                    className="border-2 border-dashed rounded-lg p-6 text-center cursor-pointer hover:bg-muted/50 transition-colors"
                    onClick={() => fileInputRef.current?.click()}
                  >
                    <Input
                      type="file"
                      className="hidden"
                      ref={fileInputRef}
                      onChange={handleFileChange}
                      accept="image/png,image/jpeg,image/jpg,application/pdf"
                      multiple
                    />
                    <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
                    <p className="mt-2 text-sm font-medium">Drag and drop files here or click to browse</p>
                    <p className="text-xs text-muted-foreground mt-1">Supported formats: PDF, JPG, PNG</p>
                  </div>

{files.length > 0 && (
                    <div className="space-y-2">
                      <h3 className="text-sm font-medium">Selected Files ({files.length})</h3>
                      <div className="max-h-60 overflow-y-auto space-y-2">
                        {files.map((file, index) => (
                          <div key={index} className="bg-muted p-3 rounded-md flex items-center justify-between">
                            <div className="flex items-center">
                              <FileText className="h-5 w-5 mr-2 text-muted-foreground" />
                              <span className="text-sm truncate max-w-[200px]">{file.name}</span>
                            </div>
                            <Button variant="ghost" size="sm" onClick={() => removeFile(index)}>
                              <X className="h-4 w-4" />
                            </Button>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

<Button onClick={handleScan} disabled={files.length === 0 || isScanning} className="w-full mt-4">
                    {isScanning ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Scanning {scanResults.length}/{files.length}...
                      </>
                    ) : (
                      "Scan Documents"
                    )}
                  </Button>
                </TabsContent>

<TabsContent value="camera" className="space-y-4">
                  <div className="relative aspect-video bg-black rounded-lg overflow-hidden">
                    {cameraActive ? (
                      <>
                        <video ref={videoRef} autoPlay playsInline className="w-full h-full object-cover" />
                        <div className="absolute bottom-4 left-0 right-0 flex justify-center">
                          <Button variant="secondary" className="mx-2" onClick={captureImage}>
                            Capture
                          </Button>
                          <Button variant="destructive" className="mx-2" onClick={stopCamera}>
                            Cancel
                          </Button>
                        </div>
                      </>
                    ) : (
                      <div className="flex flex-col items-center justify-center h-full">
                        <Camera className="h-12 w-12 text-muted-foreground mb-4" />
                        <Button onClick={startCamera}>Start Camera</Button>
                      </div>
                    )}
                  </div>
                  <canvas ref={canvasRef} className="hidden" />
                </TabsContent>

<TabsContent value="result" className="space-y-6">
                  <div className="space-y-4">
                    <h3 className="text-sm font-medium">Scan Results</h3>
                    <div className="max-h-60 overflow-y-auto space-y-4">
                      {scanResults.map((result, index) => (
                        <div key={index} className="border rounded-md p-4">
                          <div className="flex items-center justify-between mb-2">
                            <h4 className="font-medium">{result.file.name}</h4>
                          </div>
                          <Textarea
                            value={result.text}
                            onChange={(e) => {
                              const newResults = [...scanResults]
                              newResults[index].text = e.target.value
                              setScanResults(newResults)
                            }}
                            rows={4}
                            className="font-mono text-sm"
                          />
                        </div>
                      ))}
                    </div>
                  </div>

<div className="border-t pt-4">
                    <h3 className="text-lg font-medium mb-4">Save as Study Material</h3>
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="title">Title</Label>
                        <Input
                          id="title"
                          placeholder="Give this material a title"
                          value={materialTitle}
                          onChange={(e) => setMaterialTitle(e.target.value)}
                          required
                        />
                      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="type">Material Type</Label>
                          <Select value={materialType} onValueChange={setMaterialType} required>
                            <SelectTrigger id="type">
                              <SelectValue placeholder="Select type" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="textbook">Textbook</SelectItem>
                              <SelectItem value="notes">Notes</SelectItem>
                              <SelectItem value="practice_problems">Practice Problems</SelectItem>
                              <SelectItem value="study_guide">Study Guide</SelectItem>
                              <SelectItem value="other">Other</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

<div className="space-y-2">
                          <Label htmlFor="course">Course/Subject</Label>
                          <Input
                            id="course"
                            placeholder="e.g., Calculus I, CS101"
                            value={materialCourse}
                            onChange={(e) => setMaterialCourse(e.target.value)}
                            required
                          />
                        </div>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="description">Description</Label>
                        <Textarea
                          id="description"
                          placeholder="Describe this material"
                          value={materialDescription}
                          onChange={(e) => setMaterialDescription(e.target.value)}
                          rows={3}
                        />
                      </div>
                    </div>
                  </div>

<div className="flex justify-end space-x-2">
                    <Button
                      variant="outline"
                      onClick={() => {
                        setActiveTab("upload")
                      }}
                    >
                      Back to Scanning
                    </Button>
                    <Button onClick={handleSaveMaterial} disabled={isSaving}>
                      {isSaving ? "Saving..." : "Save as Material"}
                    </Button>
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="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))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-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/feedback-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"
import { Star } from "lucide-react"
import { submitFeedback } from "@/lib/actions/material-actions"

interface FeedbackFormProps {
  materialId: string
  onSuccess?: () => void
}

export default function FeedbackForm({ materialId, onSuccess }: FeedbackFormProps) {
  const [rating, setRating] = useState(0)
  const [hoveredRating, setHoveredRating] = useState(0)
  const [comment, setComment] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)

const handleSubmit = async () => {
    if (rating === 0) {
      toast({
        title: "Rating required",
        description: "Please select a rating before submitting.",
        variant: "destructive",
      })
      return
    }

if (!comment.trim()) {
      toast({
        title: "Comment required",
        description: "Please provide a comment with your feedback.",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      await submitFeedback(materialId, rating, comment)
      toast({
        title: "Feedback submitted!",
        description: "Thank you for your feedback.",
      })
      setRating(0)
      setComment("")
      if (onSuccess) {
        onSuccess()
      }
    } catch (error) {
      console.error("Failed to submit feedback:", error)
      toast({
        title: "Error",
        description: "Failed to submit feedback. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="space-y-4">
      <div className="space-y-2">
        <label className="text-sm font-medium">Your Rating</label>
        <div className="flex justify-center">
          {Array.from({ length: 5 }).map((_, i) => (
            <Star
              key={i}
              className={`h-8 w-8 cursor-pointer transition-colors ${
                (hoveredRating > 0 ? i < hoveredRating : i < rating)
                  ? "text-yellow-500 fill-yellow-500"
                  : "text-muted-foreground"
              }`}
              onClick={() => setRating(i + 1)}
              onMouseEnter={() => setHoveredRating(i + 1)}
              onMouseLeave={() => setHoveredRating(0)}
            />
          ))}
        </div>
      </div>

<div className="space-y-2">
        <label htmlFor="comment" className="text-sm font-medium">
          Your Comment
        </label>
        <Textarea
          id="comment"
          placeholder="Share your experience with this material..."
          value={comment}
          onChange={(e) => setComment(e.target.value)}
          rows={4}
        />
      </div>

<Button className="w-full" onClick={handleSubmit} disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit Feedback"}
      </Button>
    </div>
  )
}

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

import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BookOpen, FileText, Filter, Plus, Search, Star } from "lucide-react"
import { getAllMaterials } from "@/lib/actions/material-actions"
import DashboardHeader from "@/components/dashboard-header"

export default function MaterialsPage() {
  const router = useRouter()
  const [materials, setMaterials] = useState([])
  const [filteredMaterials, setFilteredMaterials] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [activeTab, setActiveTab] = useState("all")
  const [sortBy, setSortBy] = useState("newest")

useEffect(() => {
    async function loadMaterials() {
      try {
        const data = await getAllMaterials()
        setMaterials(data)
        setFilteredMaterials(data)
      } catch (error) {
        console.error("Failed to load materials:", error)
      } finally {
        setIsLoading(false)
      }
    }

loadMaterials()
  }, [])

useEffect(() => {
    // Filter materials based on search query and active tab
    let filtered = [...materials]

if (searchQuery) {
      const query = searchQuery.toLowerCase()
      filtered = filtered.filter(
        (material) =>
          material.title.toLowerCase().includes(query) ||
          material.description.toLowerCase().includes(query) ||
          material.course.toLowerCase().includes(query),
      )
    }

if (activeTab !== "all") {
      filtered = filtered.filter((material) => material.type === activeTab)
    }

// Sort materials
    if (sortBy === "newest") {
      filtered.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
    } else if (sortBy === "oldest") {
      filtered.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
    } else if (sortBy === "rating") {
      filtered.sort((a, b) => (b.rating || 0) - (a.rating || 0))
    }

setFilteredMaterials(filtered)
  }, [materials, searchQuery, activeTab, sortBy])

const handleSearch = (e) => {
    setSearchQuery(e.target.value)
  }

const getMaterialIcon = (type) => {
    switch (type) {
      case "textbook":
        return <BookOpen className="h-12 w-12 text-muted-foreground" />
      case "notes":
      case "study_guide":
      case "practice_problems":
      default:
        return <FileText className="h-12 w-12 text-muted-foreground" />
    }
  }

// Sample materials for demonstration
  const sampleMaterials = [
    {
      id: "material_1",
      title: "Calculus: Early Transcendentals",
      type: "textbook",
      course: "MATH 101",
      description: "8th Edition by James Stewart. Good condition with minimal highlighting.",
      userName: "Alex Johnson",
      createdAt: "2023-03-15T12:00:00Z",
      rating: 4.5,
      reviewCount: 12,
    },
    {
      id: "material_2",
      title: "Organic Chemistry Study Notes",
      type: "notes",
      course: "CHEM 201",
      description: "Comprehensive notes covering all topics from the semester.",
      userName: "Maria Garcia",
      createdAt: "2023-03-18T14:30:00Z",
      rating: 5,
      reviewCount: 8,
    },
    {
      id: "material_3",
      title: "Physics Problem Set Solutions",
      type: "practice_problems",
      course: "PHYS 101",
      description: "Worked solutions for all problem sets from Physics 101.",
      userName: "David Kim",
      createdAt: "2023-03-10T09:15:00Z",
      rating: 4,
      reviewCount: 5,
    },
    {
      id: "material_4",
      title: "Introduction to Psychology",
      type: "study_guide",
      course: "PSYCH 101",
      description: "Comprehensive study guide covering all major topics in Intro to Psychology.",
      userName: "Emily Wilson",
      createdAt: "2023-03-12T16:45:00Z",
      rating: 4.2,
      reviewCount: 7,
    },
  ]

return (
    <div className="flex min-h-screen flex-col">
      <DashboardHeader />
      <main className="flex-1 container py-6">
        <div className="flex items-center justify-between mb-6">
          <h1 className="text-3xl font-bold">Study Materials</h1>
          <Link href="/materials/new">
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Add Material
            </Button>
          </Link>
        </div>

<Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium flex items-center">
                  <Filter className="mr-2 h-4 w-4" />
                  Filters
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium">Sort By</label>
                  <Select value={sortBy} onValueChange={setSortBy}>
                    <SelectTrigger>
                      <SelectValue placeholder="Sort by" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="newest">Newest First</SelectItem>
                      <SelectItem value="oldest">Oldest First</SelectItem>
                      <SelectItem value="rating">Highest Rated</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
            </Card>
          </div>

<div className="flex-1">
            <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
              <TabsList className="w-full justify-start">
                <TabsTrigger value="all">All Materials</TabsTrigger>
                <TabsTrigger value="textbook">Textbooks</TabsTrigger>
                <TabsTrigger value="notes">Notes</TabsTrigger>
                <TabsTrigger value="study_guide">Study Guides</TabsTrigger>
                <TabsTrigger value="practice_problems">Practice Problems</TabsTrigger>
              </TabsList>

<TabsContent value={activeTab} className="space-y-4">
                {isLoading ? (
                  <div className="text-center py-12">
                    <p>Loading materials...</p>
                  </div>
                ) : filteredMaterials.length > 0 ? (
                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    {/* Use actual filtered materials in a real app */}
                    {sampleMaterials.map((material) => (
                      <Card key={material.id} className="overflow-hidden">
                        <div className="aspect-video bg-muted flex items-center justify-center">
                          {getMaterialIcon(material.type)}
                        </div>
                        <CardHeader className="pb-2">
                          <CardTitle className="text-lg">{material.title}</CardTitle>
                          <CardDescription>
                            {material.course} • {material.userName}
                          </CardDescription>
                        </CardHeader>
                        <CardContent>
                          <p className="text-sm text-muted-foreground line-clamp-2">{material.description}</p>
                          {material.rating && (
                            <div className="flex items-center mt-2">
                              <div className="flex">
                                {Array.from({ length: 5 }).map((_, i) => (
                                  <Star
                                    key={i}
                                    className={`h-3 w-3 ${i < Math.round(material.rating) ? "text-yellow-500 fill-yellow-500" : "text-muted-foreground"}`}
                                  />
                                ))}
                              </div>
                              <span className="ml-1 text-xs text-muted-foreground">({material.reviewCount})</span>
                            </div>
                          )}
                        </CardContent>
                        <CardFooter>
                          <Button
                            variant="outline"
                            className="w-full"
                            onClick={() => router.push(`/materials/${material.id}`)}
                          >
                            View Details
                          </Button>
                        </CardFooter>
                      </Card>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <FileText className="mx-auto h-12 w-12 text-muted-foreground" />
                    <h3 className="mt-2 text-lg font-medium">No materials found</h3>
                    <p className="text-muted-foreground">Try adjusting your search or filters</p>
                  </div>
                )}
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  )
}

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

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

import { useState, useEffect } from "react"
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 { toast } from "@/components/ui/use-toast"
import { BookOpen, Calendar, Check, MessageSquare, User, X } from "lucide-react"
import { getUserRequests, getIncomingRequests, updateRequestStatus } from "@/lib/actions/material-actions"
import DashboardHeader from "@/components/dashboard-header"

export default function RequestsPage() {
  const [outgoingRequests, setOutgoingRequests] = useState([])
  const [incomingRequests, setIncomingRequests] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [selectedRequest, setSelectedRequest] = useState(null)
  const [responseMessage, setResponseMessage] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)

useEffect(() => {
    async function loadRequests() {
      try {
        const outgoing = await getUserRequests()
        const incoming = await getIncomingRequests()
        setOutgoingRequests(outgoing)
        setIncomingRequests(incoming)
      } catch (error) {
        console.error("Failed to load requests:", error)
        toast({
          title: "Error",
          description: "Failed to load requests. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

loadRequests()
  }, [])

const handleAccept = async (requestId) => {
    setIsSubmitting(true)

try {
      await updateRequestStatus(requestId, "accepted")

// Update local state
      setIncomingRequests((prev) => prev.map((req) => (req.id === requestId ? { ...req, status: "accepted" } : req)))

toast({
        title: "Request accepted",
        description: "You have accepted the exchange request.",
      })
    } catch (error) {
      console.error("Failed to accept request:", error)
      toast({
        title: "Error",
        description: "Failed to accept request. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const handleReject = async (requestId) => {
    setIsSubmitting(true)

try {
      await updateRequestStatus(requestId, "rejected")

// Update local state
      setIncomingRequests((prev) => prev.map((req) => (req.id === requestId ? { ...req, status: "rejected" } : req)))

toast({
        title: "Request rejected",
        description: "You have rejected the exchange request.",
      })
    } catch (error) {
      console.error("Failed to reject request:", error)
      toast({
        title: "Error",
        description: "Failed to reject request. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

// Sample requests for demonstration
  const sampleOutgoingRequests = [
    {
      id: "request_1",
      materialId: "material_1",
      materialTitle: "Calculus Textbook",
      ownerId: "user_1",
      ownerName: "Alex Johnson",
      status: "pending",
      message: "I need this for my upcoming exam. Would appreciate if you could share it with me.",
      createdAt: "2023-03-15T12:00:00Z",
    },
    {
      id: "request_2",
      materialId: "material_2",
      materialTitle: "Physics Notes",
      ownerId: "user_2",
      ownerName: "Maria Garcia",
      status: "accepted",
      message: "These notes would be really helpful for my project.",
      createdAt: "2023-03-10T09:15:00Z",
    },
    {
      id: "request_3",
      materialId: "material_3",
      materialTitle: "Chemistry Lab Manual",
      ownerId: "user_3",
      ownerName: "David Kim",
      status: "rejected",
      message: "I missed the first few labs and need to catch up.",
      createdAt: "2023-03-05T14:30:00Z",
    },
  ]

const sampleIncomingRequests = [
    {
      id: "request_4",
      materialId: "material_4",
      materialTitle: "Computer Science Algorithms",
      requesterId: "user_4",
      requesterName: "Emily Wilson",
      status: "pending",
      message: "I'm struggling with algorithms and your notes would be really helpful.",
      createdAt: "2023-03-18T10:00:00Z",
    },
    {
      id: "request_5",
      materialId: "material_5",
      materialTitle: "Biology Study Guide",
      requesterId: "user_5",
      requesterName: "James Brown",
      status: "pending",
      message: "Your study guide has great reviews. Would you be willing to share it?",
      createdAt: "2023-03-17T16:45:00Z",
    },
  ]

const getStatusBadge = (status) => {
    switch (status) {
      case "pending":
        return (
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-800">
            Pending
          </span>
        )
      case "accepted":
        return (
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-green-100 text-green-800">
            Accepted
          </span>
        )
      case "rejected":
        return (
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-red-100 text-red-800">
            Rejected
          </span>
        )
      default:
        return null
    }
  }

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

<Tabs defaultValue="outgoing" className="space-y-6">
          <TabsList>
            <TabsTrigger value="outgoing">Outgoing Requests</TabsTrigger>
            <TabsTrigger value="incoming">Incoming Requests</TabsTrigger>
          </TabsList>

<TabsContent value="outgoing" className="space-y-4">
            {isLoading ? (
              <div className="text-center py-12">
                <p>Loading your requests...</p>
              </div>
            ) : sampleOutgoingRequests.length > 0 ? (
              <div className="grid gap-4">
                {sampleOutgoingRequests.map((request) => (
                  <Card key={request.id}>
                    <CardHeader className="pb-2">
                      <div className="flex justify-between items-start">
                        <div>
                          <CardTitle>{request.materialTitle}</CardTitle>
                          <CardDescription className="flex items-center gap-1 mt-1">
                            <User className="h-3 w-3" />
                            <span>Requested from {request.ownerName}</span>
                            <span className="mx-1">•</span>
                            <Calendar className="h-3 w-3" />
                            <span>{new Date(request.createdAt).toLocaleDateString()}</span>
                          </CardDescription>
                        </div>
                        {getStatusBadge(request.status)}
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="bg-muted p-3 rounded-md text-sm">
                        <p className="font-medium mb-1">Your message:</p>
                        <p>{request.message}</p>
                      </div>
                    </CardContent>
                    <CardFooter className="flex justify-between">
                      {request.status === "accepted" && (
                        <Button variant="outline" className="w-full">
                          View Exchange Details
                        </Button>
                      )}
                      {request.status === "pending" && (
                        <Button variant="outline" className="w-full text-red-600 hover:text-red-700">
                          Cancel Request
                        </Button>
                      )}
                      {request.status === "rejected" && (
                        <Button variant="outline" className="w-full">
                          Send New Request
                        </Button>
                      )}
                    </CardFooter>
                  </Card>
                ))}
              </div>
            ) : (
              <div className="text-center py-12">
                <MessageSquare className="mx-auto h-12 w-12 text-muted-foreground" />
                <h3 className="mt-2 text-lg font-medium">No outgoing requests yet</h3>
                <p className="text-muted-foreground">
                  When you request materials from other students, they will appear here.
                </p>
              </div>
            )}
          </TabsContent>

<TabsContent value="incoming" className="space-y-4">
            {isLoading ? (
              <div className="text-center py-12">
                <p>Loading incoming requests...</p>
              </div>
            ) : sampleIncomingRequests.length > 0 ? (
              <div className="grid gap-4">
                {sampleIncomingRequests.map((request) => (
                  <Card key={request.id}>
                    <CardHeader className="pb-2">
                      <div className="flex justify-between items-start">
                        <div>
                          <CardTitle>{request.materialTitle}</CardTitle>
                          <CardDescription className="flex items-center gap-1 mt-1">
                            <User className="h-3 w-3" />
                            <span>Requested by {request.requesterName}</span>
                            <span className="mx-1">•</span>
                            <Calendar className="h-3 w-3" />
                            <span>{new Date(request.createdAt).toLocaleDateString()}</span>
                          </CardDescription>
                        </div>
                        {getStatusBadge(request.status)}
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="bg-muted p-3 rounded-md text-sm">
                        <p className="font-medium mb-1">Request message:</p>
                        <p>{request.message}</p>
                      </div>
                    </CardContent>
                    <CardFooter className="flex justify-end gap-2">
                      {request.status === "pending" && (
                        <>
                          <Button
                            variant="outline"
                            className="text-red-600 hover:text-red-700"
                            onClick={() => handleReject(request.id)}
                            disabled={isSubmitting}
                          >
                            <X className="mr-1 h-4 w-4" />
                            Decline
                          </Button>
                          <Button onClick={() => handleAccept(request.id)} disabled={isSubmitting}>
                            <Check className="mr-1 h-4 w-4" />
                            Accept
                          </Button>
                        </>
                      )}
                      {request.status !== "pending" && <Button variant="outline">View Details</Button>}
                    </CardFooter>
                  </Card>
                ))}
              </div>
            ) : (
              <div className="text-center py-12">
                <BookOpen className="mx-auto h-12 w-12 text-muted-foreground" />
                <h3 className="mt-2 text-lg font-medium">No incoming requests</h3>
                <p className="text-muted-foreground">
                  When other students request your materials, they will appear here.
                </p>
              </div>
            )}
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/web-search/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BookOpen, ExternalLink, FileText, Globe, Loader2, Search } from "lucide-react"
import { searchMaterials, searchWeb } from "@/lib/actions/material-actions"
import DashboardHeader from "@/components/dashboard-header"

export default function WebSearchPage() {
  const [query, setQuery] = useState("")
  const [isSearching, setIsSearching] = useState(false)
  const [platformResults, setPlatformResults] = useState([])
  const [webResults, setWebResults] = useState([])
  const [searchHistory, setSearchHistory] = useState([])
  const [activeTab, setActiveTab] = useState("all")

const handleSearch = async (e) => {
    e.preventDefault()

if (!query.trim()) return

setIsSearching(true)

try {
      // Search platform materials
      const materialsResults = await searchMaterials(query)
      setPlatformResults(materialsResults)

// Search web resources
      const externalResults = await searchWeb(query)
      setWebResults(externalResults)

// Add to search history
      if (!searchHistory.includes(query)) {
        setSearchHistory((prev) => [query, ...prev].slice(0, 5))
      }
    } catch (error) {
      console.error("Search failed:", error)
    } finally {
      setIsSearching(false)
    }
  }

// Sample results for demonstration
  const samplePlatformResults = [
    {
      id: "material_1",
      title: "Calculus: Early Transcendentals",
      type: "textbook",
      description: "8th Edition by James Stewart. Good condition with minimal highlighting.",
      userName: "Alex Johnson",
      createdAt: "2023-03-15T12:00:00Z",
    },
    {
      id: "material_2",
      title: "Organic Chemistry Study Notes",
      type: "notes",
      description: "Comprehensive notes covering all topics from the semester.",
      userName: "Maria Garcia",
      createdAt: "2023-03-18T14:30:00Z",
    },
  ]

const sampleWebResults = [
    {
      id: "web_1",
      title: "Introduction to Calculus - MIT OpenCourseWare",
      description: "Free calculus textbook and course materials from MIT",
      url: "https://ocw.mit.edu/courses/mathematics/18-01-single-variable-calculus-fall-2006/",
      source: "MIT OpenCourseWare",
    },
    {
      id: "web_2",
      title: "Physics Textbooks - Open Textbook Library",
      description: "Collection of free physics textbooks for undergraduate courses",
      url: "https://open.umn.edu/opentextbooks/subjects/physics",
      source: "Open Textbook Library",
    },
    {
      id: "web_3",
      title: "Chemistry Study Notes - Khan Academy",
      description: "Comprehensive chemistry notes and practice problems",
      url: "https://www.khanacademy.org/science/chemistry",
      source: "Khan Academy",
    },
  ]

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

<Card className="mb-6">
            <CardContent className="pt-6">
              <form onSubmit={handleSearch} className="flex gap-2">
                <div className="relative flex-1">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    type="search"
                    placeholder="Search for textbooks, notes, study guides, or web resources..."
                    className="pl-8"
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                  />
                </div>
                <Button type="submit" disabled={isSearching}>
                  {isSearching ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Searching...
                    </>
                  ) : (
                    "Search"
                  )}
                </Button>
              </form>

{searchHistory.length > 0 && (
                <div className="mt-4">
                  <p className="text-sm text-muted-foreground mb-2">Recent searches:</p>
                  <div className="flex flex-wrap gap-2">
                    {searchHistory.map((term, index) => (
                      <Button
                        key={index}
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          setQuery(term)
                          // Auto-submit the search
                          searchMaterials(term).then(setPlatformResults)
                          searchWeb(term).then(setWebResults)
                        }}
                      >
                        {term}
                      </Button>
                    ))}
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

{(platformResults.length > 0 || webResults.length > 0 || isSearching) && (
            <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
              <TabsList>
                <TabsTrigger value="all">All Results</TabsTrigger>
                <TabsTrigger value="platform">Platform Materials</TabsTrigger>
                <TabsTrigger value="web">Web Resources</TabsTrigger>
              </TabsList>

<TabsContent value="all" className="space-y-6">
                {isSearching ? (
                  <div className="text-center py-12">
                    <Loader2 className="mx-auto h-8 w-8 animate-spin text-muted-foreground" />
                    <p className="mt-2">Searching across platform and web resources...</p>
                  </div>
                ) : (
                  <>
                    <div>
                      <h2 className="text-xl font-bold mb-4 flex items-center">
                        <BookOpen className="mr-2 h-5 w-5" />
                        Platform Materials
                      </h2>
                      {samplePlatformResults.length > 0 ? (
                        <div className="grid gap-4">
                          {samplePlatformResults.map((result) => (
                            <Card key={result.id}>
                              <CardHeader className="pb-2">
                                <CardTitle className="text-lg">{result.title}</CardTitle>
                                <CardDescription>
                                  Shared by {result.userName} • {new Date(result.createdAt).toLocaleDateString()}
                                </CardDescription>
                              </CardHeader>
                              <CardContent>
                                <p className="text-sm text-muted-foreground">{result.description}</p>
                              </CardContent>
                              <CardFooter>
                                <Button variant="outline" asChild>
                                  <Link href={`/materials/${result.id}`}>View Details</Link>
                                </Button>
                              </CardFooter>
                            </Card>
                          ))}
                        </div>
                      ) : (
                        <Card>
                          <CardContent className="py-6 text-center">
                            <FileText className="mx-auto h-8 w-8 text-muted-foreground" />
                            <p className="mt-2">No platform materials found for "{query}"</p>
                          </CardContent>
                        </Card>
                      )}
                    </div>

<div>
                      <h2 className="text-xl font-bold mb-4 flex items-center">
                        <Globe className="mr-2 h-5 w-5" />
                        Web Resources
                      </h2>
                      {sampleWebResults.length > 0 ? (
                        <div className="grid gap-4">
                          {sampleWebResults.map((result) => (
                            <Card key={result.id}>
                              <CardHeader className="pb-2">
                                <CardTitle className="text-lg">{result.title}</CardTitle>
                                <CardDescription>{result.source}</CardDescription>
                              </CardHeader>
                              <CardContent>
                                <p className="text-sm text-muted-foreground">{result.description}</p>
                              </CardContent>
                              <CardFooter>
                                <Button variant="outline" className="flex items-center" asChild>
                                  <a href={result.url} target="_blank" rel="noopener noreferrer">
                                    Visit Resource
                                    <ExternalLink className="ml-2 h-4 w-4" />
                                  </a>
                                </Button>
                              </CardFooter>
                            </Card>
                          ))}
                        </div>
                      ) : (
                        <Card>
                          <CardContent className="py-6 text-center">
                            <Globe className="mx-auto h-8 w-8 text-muted-foreground" />
                            <p className="mt-2">No web resources found for "{query}"</p>
                          </CardContent>
                        </Card>
                      )}
                    </div>
                  </>
                )}
              </TabsContent>

<TabsContent value="platform" className="space-y-4">
                {isSearching ? (
                  <div className="text-center py-12">
                    <Loader2 className="mx-auto h-8 w-8 animate-spin text-muted-foreground" />
                    <p className="mt-2">Searching platform materials...</p>
                  </div>
                ) : samplePlatformResults.length > 0 ? (
                  <div className="grid gap-4">
                    {samplePlatformResults.map((result) => (
                      <Card key={result.id}>
                        <CardHeader className="pb-2">
                          <CardTitle className="text-lg">{result.title}</CardTitle>
                          <CardDescription>
                            Shared by {result.userName} • {new Date(result.createdAt).toLocaleDateString()}
                          </CardDescription>
                        </CardHeader>
                        <CardContent>
                          <p className="text-sm text-muted-foreground">{result.description}</p>
                        </CardContent>
                        <CardFooter>
                          <Button variant="outline" asChild>
                            <Link href={`/materials/${result.id}`}>View Details</Link>
                          </Button>
                        </CardFooter>
                      </Card>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <FileText className="mx-auto h-12 w-12 text-muted-foreground" />
                    <h3 className="mt-2 text-lg font-medium">No platform materials found</h3>
                    <p className="text-muted-foreground">
                      Try adjusting your search terms or check the web resources tab
                    </p>
                  </div>
                )}
              </TabsContent>

<TabsContent value="web" className="space-y-4">
                {isSearching ? (
                  <div className="text-center py-12">
                    <Loader2 className="mx-auto h-8 w-8 animate-spin text-muted-foreground" />
                    <p className="mt-2">Searching web resources...</p>
                  </div>
                ) : sampleWebResults.length > 0 ? (
                  <div className="grid gap-4">
                    {sampleWebResults.map((result) => (
                      <Card key={result.id}>
                        <CardHeader className="pb-2">
                          <CardTitle className="text-lg">{result.title}</CardTitle>
                          <CardDescription>{result.source}</CardDescription>
                        </CardHeader>
                        <CardContent>
                          <p className="text-sm text-muted-foreground">{result.description}</p>
                        </CardContent>
                        <CardFooter>
                          <Button variant="outline" className="flex items-center" asChild>
                            <a href={result.url} target="_blank" rel="noopener noreferrer">
                              Visit Resource
                              <ExternalLink className="ml-2 h-4 w-4" />
                            </a>
                          </Button>
                        </CardFooter>
                      </Card>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <Globe className="mx-auto h-12 w-12 text-muted-foreground" />
                    <h3 className="mt-2 text-lg font-medium">No web resources found</h3>
                    <p className="text-muted-foreground">
                      Try adjusting your search terms or check the platform materials tab
                    </p>
                  </div>
                )}
              </TabsContent>
            </Tabs>
          )}
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/web-search/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}

[V0_FILE]typescriptreact:file="lib/storage-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"
import { getCurrentUser } from "@/lib/actions/user-actions"

// Define types for our storage
type StoredFile = {
  id: string
  name: string
  type: string
  size: number
  url: string
  createdAt: string
  userId: string
  category: "material" | "scan" | "profile" | "other"
  metadata?: Record<string, any>
}

type StorageContextType = {
  files: StoredFile[]
  addFile: (file: File, category: StoredFile["category"], metadata?: Record<string, any>) => Promise<StoredFile>
  removeFile: (fileId: string) => void
  getFilesByCategory: (category: StoredFile["category"]) => StoredFile[]
  getFileById: (fileId: string) => StoredFile | undefined
  isLoading: boolean
}

const StorageContext = createContext<StorageContextType | undefined>(undefined)

export function StorageProvider({ children }: { children: React.ReactNode }) {
  const [files, setFiles] = useState<StoredFile[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [currentUser, setCurrentUser] = useState<any>(null)

// Load files from localStorage on mount
  useEffect(() => {
    const loadFiles = async () => {
      try {
        // Get current user
        const user = await getCurrentUser()
        setCurrentUser(user)

// Load files from localStorage
        if (typeof window !== "undefined") {
          const storedFiles = localStorage.getItem("sharemet-files")
          if (storedFiles) {
            const parsedFiles = JSON.parse(storedFiles) as StoredFile[]
            // Only load files belonging to the current user
            if (user) {
              setFiles(parsedFiles.filter((file) => file.userId === user.id))
            }
          }
        }
      } catch (error) {
        console.error("Failed to load files:", error)
      } finally {
        setIsLoading(false)
      }
    }

loadFiles()
  }, [])

// Save files to localStorage whenever they change
  useEffect(() => {
    if (typeof window !== "undefined" && files.length > 0) {
      localStorage.setItem("sharemet-files", JSON.stringify(files))
    }
  }, [files])

// Add a new file
  const addFile = async (
    file: File,
    category: StoredFile["category"],
    metadata?: Record<string, any>,
  ): Promise<StoredFile> => {
    if (!currentUser) {
      throw new Error("User not authenticated")
    }

// Create a URL for the file (in a real app, this would be a cloud storage URL)
    const fileUrl = URL.createObjectURL(file)

const newFile: StoredFile = {
      id: `file_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
      name: file.name,
      type: file.type,
      size: file.size,
      url: fileUrl,
      createdAt: new Date().toISOString(),
      userId: currentUser.id,
      category,
      metadata,
    }

setFiles((prevFiles) => [...prevFiles, newFile])
    return newFile
  }

// Remove a file
  const removeFile = (fileId: string) => {
    setFiles((prevFiles) => {
      const fileToRemove = prevFiles.find((file) => file.id === fileId)

// Revoke the object URL to free up memory
      if (fileToRemove && fileToRemove.url.startsWith("blob:")) {
        URL.revokeObjectURL(fileToRemove.url)
      }

return prevFiles.filter((file) => file.id !== fileId)
    })
  }

// Get files by category
  const getFilesByCategory = (category: StoredFile["category"]) => {
    return files.filter((file) => file.category === category)
  }

// Get file by ID
  const getFileById = (fileId: string) => {
    return files.find((file) => file.id === fileId)
  }

const value = {
    files,
    addFile,
    removeFile,
    getFilesByCategory,
    getFileById,
    isLoading,
  }

return <StorageContext.Provider value={value}>{children}</StorageContext.Provider>
}

export function useStorage() {
  const context = useContext(StorageContext)
  if (context === undefined) {
    throw new Error("useStorage must be used within a StorageProvider")
  }
  return context
}

[V0_FILE]typescriptreact:file="lib/security.ts" isMerged="true"
// In a real application, you would use a proper password hashing library like bcrypt
// This is a simplified mock implementation for demonstration purposes

export async function hash(password: string): Promise<string> {
  // In a real app, use bcrypt or argon2
  // This is a mock implementation
  return `$2a$10$${Buffer.from(password).toString("base64")}`
}

export async function compare(password: string, hashedPassword: string): Promise<boolean> {
  // In a real app, use bcrypt or argon2
  // This is a mock implementation
  const storedHash = hashedPassword.split("$")[3]
  const passwordBase64 = Buffer.from(password).toString("base64")
  return storedHash === passwordBase64
}

// Generate a secure random token
export function generateToken(length = 32): string {
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
  let token = ""

// In a real app, use crypto.randomBytes
  for (let i = 0; i < length; i++) {
    token += characters.charAt(Math.floor(Math.random() * characters.length))
  }

return token
}

// Sanitize user input to prevent XSS
export function sanitizeInput(input: string): string {
  return input.replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'")
}

// Validate email format
export function isValidEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email)
}

// Validate password strength
export function isStrongPassword(password: string): { isValid: boolean; message: string } {
  if (password.length < 8) {
    return { isValid: false, message: "Password must be at least 8 characters long" }
  }

if (!/[A-Z]/.test(password)) {
    return { isValid: false, message: "Password must contain at least one uppercase letter" }
  }

if (!/[a-z]/.test(password)) {
    return { isValid: false, message: "Password must contain at least one lowercase letter" }
  }

if (!/[0-9]/.test(password)) {
    return { isValid: false, message: "Password must contain at least one number" }
  }

if (!/[^A-Za-z0-9]/.test(password)) {
    return { isValid: false, message: "Password must contain at least one special character" }
  }

return { isValid: true, message: "Password is strong" }
}

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

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Calendar, Download, FileText, Loader2, Plus, Search, Share2, Trash2 } from "lucide-react"
import { getUserScannedDocuments, deleteScannedDocument } from "@/lib/actions/material-actions"
import { toast } from "@/components/ui/use-toast"
import DashboardHeader from "@/components/dashboard-header"

export default function ScannedDocumentsPage() {
  const router = useRouter()
  const [documents, setDocuments] = useState([])
  const [filteredDocuments, setFilteredDocuments] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [activeTab, setActiveTab] = useState("all")
  const [isDeleting, setIsDeleting] = useState(false)

useEffect(() => {
    async function loadDocuments() {
      try {
        const data = await getUserScannedDocuments()
        setDocuments(data)
        setFilteredDocuments(data)
      } catch (error) {
        console.error("Failed to load scanned documents:", error)
        toast({
          title: "Error",
          description: "Failed to load your scanned documents. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

loadDocuments()
  }, [])

useEffect(() => {
    // Filter documents based on search query and active tab
    let filtered = [...documents]

if (searchQuery) {
      const query = searchQuery.toLowerCase()
      filtered = filtered.filter(
        (doc) =>
          doc.fileName.toLowerCase().includes(query) ||
          doc.text.toLowerCase().includes(query) ||
          (doc.tags && doc.tags.some((tag) => tag.toLowerCase().includes(query))),
      )
    }

if (activeTab !== "all") {
      filtered = filtered.filter((doc) => {
        if (activeTab === "pdf") return doc.fileType === "application/pdf"
        if (activeTab === "image") return doc.fileType.startsWith("image/")
        return true
      })
    }

// Sort by date (newest first)
    filtered.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())

setFilteredDocuments(filtered)
  }, [documents, searchQuery, activeTab])

const handleSearch = (e) => {
    setSearchQuery(e.target.value)
  }

const handleDelete = async (id) => {
    if (confirm("Are you sure you want to delete this document? This action cannot be undone.")) {
      setIsDeleting(true)

try {
        await deleteScannedDocument(id)
        setDocuments(documents.filter((doc) => doc.id !== id))
        toast({
          title: "Document deleted",
          description: "The scanned document has been deleted successfully.",
        })
      } catch (error) {
        console.error("Failed to delete document:", error)
        toast({
          title: "Error",
          description: "Failed to delete the document. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsDeleting(false)
      }
    }
  }

// Sample documents for demonstration
  const sampleDocuments = [
    {
      id: "scan_1",
      fileName: "calculus_notes.pdf",
      fileType: "application/pdf",
      fileSize: 2500000,
      text: "Calculus notes covering derivatives, integrals, and applications.",
      userId: "user_1",
      userName: "Current User",
      createdAt: "2023-03-15T12:00:00Z",
      url: "/api/scans/calculus_notes.pdf",
      tags: ["calculus", "math", "notes"],
      isProcessed: true,
    },
    {
      id: "scan_2",
      fileName: "physics_formulas.jpg",
      fileType: "image/jpeg",
      fileSize: 1200000,
      text: "Key physics formulas for mechanics and electromagnetism.",
      userId: "user_1",
      userName: "Current User",
      createdAt: "2023-03-10T09:15:00Z",
      url: "/api/scans/physics_formulas.jpg",
      tags: ["physics", "formulas"],
      isProcessed: true,
    },
    {
      id: "scan_3",
      fileName: "chemistry_lab_report.pdf",
      fileType: "application/pdf",
      fileSize: 3500000,
      text: "Lab report for organic chemistry experiment on synthesis of aspirin.",
      userId: "user_1",
      userName: "Current User",
      createdAt: "2023-03-05T14:30:00Z",
      url: "/api/scans/chemistry_lab_report.pdf",
      tags: ["chemistry", "lab", "report"],
      isProcessed: true,
    },
  ]

const getFileIcon = (fileType) => {
    if (fileType === "application/pdf") {
      return <FileText className="h-12 w-12 text-red-500" />
    } else if (fileType.startsWith("image/")) {
      return <FileText className="h-12 w-12 text-blue-500" />
    } else {
      return <FileText className="h-12 w-12 text-muted-foreground" />
    }
  }

return (
    <div className="flex min-h-screen flex-col">
      <DashboardHeader />
      <main className="flex-1 container py-6">
        <div className="flex items-center justify-between mb-6">
          <h1 className="text-3xl font-bold">Scanned Documents</h1>
          <Button onClick={() => router.push("/scan")}>
            <Plus className="mr-2 h-4 w-4" />
            Scan New Document
          </Button>
        </div>

<Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium">Document Stats</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Total Documents:</span>
                  <span className="text-sm font-medium">{documents.length || sampleDocuments.length}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">PDF Documents:</span>
                  <span className="text-sm font-medium">
                    {documents.filter((doc) => doc.fileType === "application/pdf").length ||
                      sampleDocuments.filter((doc) => doc.fileType === "application/pdf").length}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Image Documents:</span>
                  <span className="text-sm font-medium">
                    {documents.filter((doc) => doc.fileType.startsWith("image/")).length ||
                      sampleDocuments.filter((doc) => doc.fileType.startsWith("image/")).length}
                  </span>
                </div>
              </CardContent>
            </Card>
          </div>

<TabsContent value={activeTab} className="space-y-4">
                {isLoading ? (
                  <div className="text-center py-12">
                    <Loader2 className="mx-auto h-8 w-8 animate-spin text-muted-foreground" />
                    <p className="mt-2">Loading your scanned documents...</p>
                  </div>
                ) : filteredDocuments.length > 0 || sampleDocuments.length > 0 ? (
                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    {/* Use actual filtered documents in a real app */}
                    {sampleDocuments.map((doc) => (
                      <Card key={doc.id} className="overflow-hidden">
                        <div className="aspect-video bg-muted flex items-center justify-center">
                          {getFileIcon(doc.fileType)}
                        </div>
                        <CardHeader className="pb-2">
                          <CardTitle className="text-lg truncate">{doc.fileName}</CardTitle>
                          <CardDescription className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            <span>{new Date(doc.createdAt).toLocaleDateString()}</span>
                            <span className="mx-1">•</span>
                            <span>{(doc.fileSize / 1024 / 1024).toFixed(2)} MB</span>
                          </CardDescription>
                        </CardHeader>
                        <CardContent>
                          <p className="text-sm text-muted-foreground line-clamp-2">{doc.text}</p>
                          {doc.tags && doc.tags.length > 0 && (
                            <div className="flex flex-wrap gap-1 mt-2">
                              {doc.tags.map((tag, index) => (
                                <span
                                  key={index}
                                  className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-muted"
                                >
                                  {tag}
                                </span>
                              ))}
                            </div>
                          )}
                        </CardContent>
                        <CardFooter className="flex justify-between">
                          <Button variant="outline" size="sm" onClick={() => router.push(`/scans/${doc.id}`)}>
                            View
                          </Button>
                          <div className="flex gap-1">
                            <Button variant="ghost" size="icon">
                              <Download className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="icon">
                              <Share2 className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="text-red-500 hover:text-red-700"
                              onClick={() => handleDelete(doc.id)}
                              disabled={isDeleting}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </CardFooter>
                      </Card>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <FileText className="mx-auto h-12 w-12 text-muted-foreground" />
                    <h3 className="mt-2 text-lg font-medium">No scanned documents found</h3>
                    <p className="text-muted-foreground">Scan your first document to get started</p>
                    <Button className="mt-4" onClick={() => router.push("/scan")}>
                      <Plus className="mr-2 h-4 w-4" />
                      Scan New Document
                    </Button>
                  </div>
                )}
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  )
}

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

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

import { useState } from "react"
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 { toast } from "@/components/ui/use-toast"
import { Apple, BookOpen, Download, Laptop, Loader2, Smartphone, ComputerIcon as Windows } from "lucide-react"
import DashboardHeader from "@/components/dashboard-header"

export default function DownloadPage() {
  const [isDownloading, setIsDownloading] = useState(false)
  const [activeTab, setActiveTab] = useState("desktop")

const handleDownload = (platform: string) => {
    setIsDownloading(true)

// Simulate download
    setTimeout(() => {
      setIsDownloading(false)

toast({
        title: "Download started",
        description: `ShareMet for ${platform} is being downloaded.`,
      })
    }, 2000)
  }

return (
    <div className="flex min-h-screen flex-col">
      <DashboardHeader />
      <main className="flex-1 container py-6">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-8">
            <h1 className="text-4xl font-bold mb-2">Download ShareMet</h1>
            <p className="text-muted-foreground">
              Access your study materials anytime, anywhere with our desktop and mobile apps
            </p>
          </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-8">
            <TabsList className="w-full max-w-md mx-auto grid grid-cols-2">
              <TabsTrigger value="desktop" className="flex items-center justify-center">
                <Laptop className="mr-2 h-4 w-4" />
                Desktop
              </TabsTrigger>
              <TabsTrigger value="mobile" className="flex items-center justify-center">
                <Smartphone className="mr-2 h-4 w-4" />
                Mobile
              </TabsTrigger>
            </TabsList>

<TabsContent value="desktop" className="space-y-6">
              <div className="grid gap-6 md:grid-cols-2">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Windows className="mr-2 h-5 w-5" />
                      Windows
                    </CardTitle>
                    <CardDescription>For Windows 10 and above</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <p className="text-sm">Version: 1.2.0</p>
                      <p className="text-sm">Size: 45.2 MB</p>
                      <p className="text-sm">Released: March 1, 2025</p>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button className="w-full" onClick={() => handleDownload("Windows")} disabled={isDownloading}>
                      {isDownloading ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Downloading...
                        </>
                      ) : (
                        <>
                          <Download className="mr-2 h-4 w-4" />
                          Download for Windows
                        </>
                      )}
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Apple className="mr-2 h-5 w-5" />
                      macOS
                    </CardTitle>
                    <CardDescription>For macOS 11.0 and above</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <p className="text-sm">Version: 1.2.0</p>
                      <p className="text-sm">Size: 48.7 MB</p>
                      <p className="text-sm">Released: March 1, 2025</p>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button className="w-full" onClick={() => handleDownload("macOS")} disabled={isDownloading}>
                      {isDownloading ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Downloading...
                        </>
                      ) : (
                        <>
                          <Download className="mr-2 h-4 w-4" />
                          Download for macOS
                        </>
                      )}
                    </Button>
                  </CardFooter>
                </Card>
              </div>

<div className="bg-muted rounded-lg p-6">
                <h3 className="text-lg font-medium mb-4">System Requirements</h3>
                <div className="grid gap-4 md:grid-cols-2">
                  <div>
                    <h4 className="font-medium mb-2">Windows</h4>
                    <ul className="space-y-1 text-sm">
                      <li>Windows 10 or later</li>
                      <li>4GB RAM minimum</li>
                      <li>500MB free disk space</li>
                      <li>1280 x 720 screen resolution</li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-medium mb-2">macOS</h4>
                    <ul className="space-y-1 text-sm">
                      <li>macOS 11.0 (Big Sur) or later</li>
                      <li>4GB RAM minimum</li>
                      <li>500MB free disk space</li>
                      <li>1280 x 720 screen resolution</li>
                    </ul>
                  </div>
                </div>
              </div>
            </TabsContent>

<TabsContent value="mobile" className="space-y-6">
              <div className="grid gap-6 md:grid-cols-2">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Apple className="mr-2 h-5 w-5" />
                      iOS
                    </CardTitle>
                    <CardDescription>For iOS 14.0 and above</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <p className="text-sm">Version: 1.2.0</p>
                      <p className="text-sm">Size: 32.5 MB</p>
                      <p className="text-sm">Released: March 1, 2025</p>
                    </div>
                  </CardContent>
                  <CardFooter className="flex flex-col space-y-2">
                    <Button className="w-full" onClick={() => handleDownload("iOS")} disabled={isDownloading}>
                      {isDownloading ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Downloading...
                        </>
                      ) : (
                        <>
                          <Download className="mr-2 h-4 w-4" />
                          Download for iOS
                        </>
                      )}
                    </Button>
                    <Button variant="outline" className="w-full" asChild>
                      <a href="https://apps.apple.com" target="_blank" rel="noopener noreferrer">
                        View on App Store
                      </a>
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="mr-2 h-5 w-5"
                      >
                        <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1" />
                        <polygon points="12 15 17 21 7 21 12 15" />
                      </svg>
                      Android
                    </CardTitle>
                    <CardDescription>For Android 8.0 and above</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <p className="text-sm">Version: 1.2.0</p>
                      <p className="text-sm">Size: 28.3 MB</p>
                      <p className="text-sm">Released: March 1, 2025</p>
                    </div>
                  </CardContent>
                  <CardFooter className="flex flex-col space-y-2">
                    <Button className="w-full" onClick={() => handleDownload("Android")} disabled={isDownloading}>
                      {isDownloading ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Downloading...
                        </>
                      ) : (
                        <>
                          <Download className="mr-2 h-4 w-4" />
                          Download APK
                        </>
                      )}
                    </Button>
                    <Button variant="outline" className="w-full" asChild>
                      <a href="https://play.google.com" target="_blank" rel="noopener noreferrer">
                        View on Play Store
                      </a>
                    </Button>
                  </CardFooter>
                </Card>
              </div>

<div className="bg-muted rounded-lg p-6">
                <h3 className="text-lg font-medium mb-4">Mobile Features</h3>
                <ul className="space-y-2">
                  <li className="flex items-start">
                    <span className="mr-2 mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
                      ✓
                    </span>
                    <span>Scan documents with your phone camera</span>
                  </li>
                  <li className="flex items-start">
                    <span className="mr-2 mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
                      ✓
                    </span>
                    <span>Access your materials offline</span>
                  </li>
                  <li className="flex items-start">
                    <span className="mr-2 mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
                      ✓
                    </span>
                    <span>Receive notifications for new requests and messages</span>
                  </li>
                  <li className="flex items-start">
                    <span className="mr-2 mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
                      ✓
                    </span>
                    <span>Share materials directly from your device</span>
                  </li>
                </ul>
              </div>
            </TabsContent>
          </Tabs>

<div className="mt-12 text-center">
            <h2 className="text-2xl font-bold mb-4">Why Download ShareMet?</h2>
            <div className="grid gap-6 md:grid-cols-3 mt-6">
              <div className="flex flex-col items-center p-4">
                <div className="bg-primary/10 p-3 rounded-full mb-4">
                  <Laptop className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-lg font-medium mb-2">Work Offline</h3>
                <p className="text-sm text-center text-muted-foreground">
                  Access your materials even without an internet connection
                </p>
              </div>
              <div className="flex flex-col items-center p-4">
                <div className="bg-primary/10 p-3 rounded-full mb-4">
                  <BookOpen className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-lg font-medium mb-2">Better Organization</h3>
                <p className="text-sm text-center text-muted-foreground">
                  Organize your materials with advanced tools and features
                </p>
              </div>
              <div className="flex flex-col items-center p-4">
                <div className="bg-primary/10 p-3 rounded-full mb-4">
                  <Download className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-lg font-medium mb-2">Faster Experience</h3>
                <p className="text-sm text-center text-muted-foreground">
                  Enjoy a smoother, faster experience than the web version
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/materials/[id]/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"
import { BookOpen, Calendar, FileText, Star, User } from "lucide-react"
import { getMaterialById, createMaterialRequest, getMaterialFeedback } from "@/lib/actions/material-actions"
import DashboardHeader from "@/components/dashboard-header"
import FeedbackForm from "@/components/feedback-form"

export default function MaterialDetailPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [material, setMaterial] = useState(null)
  const [feedback, setFeedback] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [requestMessage, setRequestMessage] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)

// Provide default values to prevent null reference errors
  useEffect(() => {
    if (!material) {
      setMaterial({
        id: "",
        title: "",
        type: "",
        course: "",
        description: "",
        files: [],
        userId: "",
        userName: "",
        createdAt: new Date().toISOString(),
        status: "available",
        rating: null,
        reviewCount: 0,
      })
    }
  }, [material])

useEffect(() => {
    async function loadData() {
      try {
        // In a real app, this would fetch the actual material
        const materialData = await getMaterialById(params.id)

if (!materialData) {
          toast({
            title: "Material not found",
            description: "The requested material could not be found.",
            variant: "destructive",
          })
          router.push("/materials")
          return
        }

setMaterial(materialData)
        setFeedback(await getMaterialFeedback(params.id))
      } catch (error) {
        console.error("Failed to load material:", error)
        toast({
          title: "Error",
          description: "Failed to load material details.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

loadData()
  }, [params.id, router])

const handleRequestSubmit = async () => {
    if (!requestMessage.trim()) {
      toast({
        title: "Message required",
        description: "Please provide a message for your request.",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      await createMaterialRequest(params.id, requestMessage)
      toast({
        title: "Request sent!",
        description: "Your request has been sent to the material owner.",
      })
      setRequestMessage("")
    } catch (error) {
      console.error("Failed to send request:", error)
      toast({
        title: "Error",
        description: "Failed to send request. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

if (isLoading || !material) {
    return (
      <div className="flex min-h-screen flex-col">
        <DashboardHeader />
        <main className="flex-1 container py-6">
          <div className="flex justify-center items-center h-full">
            <p>Loading material details...</p>
          </div>
        </main>
      </div>
    )
  }

return (
    <div className="flex min-h-screen flex-col">
      <DashboardHeader />
      <main className="flex-1 container py-6">
        <div className="grid gap-6 md:grid-cols-3">
          <div className="md:col-span-2 space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="text-2xl">{material.title}</CardTitle>
                <CardDescription className="flex items-center gap-2">
                  <User className="h-4 w-4" />
                  <span>Shared by {material.userName}</span>
                  <span className="mx-2">•</span>
                  <Calendar className="h-4 w-4" />
                  <span>{new Date(material.createdAt).toLocaleDateString()}</span>
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center gap-2 text-sm">
                  <span className="font-medium">Type:</span>
                  <span className="capitalize">{material.type.replace("_", " ")}</span>
                  <span className="mx-2">•</span>
                  <span className="font-medium">Course:</span>
                  <span>{material.course}</span>
                </div>

<div>
                  <h3 className="font-medium mb-2">Description</h3>
                  <p className="text-muted-foreground">{material.description}</p>
                </div>

{material.files && material.files.length > 0 && (
                  <div>
                    <h3 className="font-medium mb-2">Files</h3>
                    <div className="grid gap-2">
                      {material.files.map((file, index) => (
                        <div key={index} className="flex items-center p-2 bg-muted rounded-md">
                          <FileText className="h-5 w-5 mr-2 text-muted-foreground" />
                          <span className="text-sm truncate flex-1">{file.name}</span>
                          <Button variant="ghost" size="sm" asChild>
                            <a href={file.url} target="_blank" rel="noopener noreferrer">
                              View
                            </a>
                          </Button>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="text-xl">Reviews and Feedback</CardTitle>
              </CardHeader>
              <CardContent>
                {feedback.length > 0 ? (
                  <div className="space-y-4">
                    {feedback.map((item) => (
                      <div key={item.id} className="border-b pb-4 last:border-0">
                        <div className="flex items-center justify-between mb-2">
                          <div className="flex items-center gap-2">
                            <span className="font-medium">{item.userName}</span>
                            <span className="text-xs text-muted-foreground">
                              {new Date(item.createdAt).toLocaleDateString()}
                            </span>
                          </div>
                          <div className="flex items-center">
                            {Array.from({ length: 5 }).map((_, i) => (
                              <Star
                                key={i}
                                className={`h-4 w-4 ${i < item.rating ? "text-yellow-500 fill-yellow-500" : "text-muted-foreground"}`}
                              />
                            ))}
                          </div>
                        </div>
                        <p className="text-sm">{item.comment}</p>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-6">
                    <Star className="mx-auto h-12 w-12 text-muted-foreground" />
                    <h3 className="mt-2 text-lg font-medium">No reviews yet</h3>
                    <p className="text-muted-foreground">Be the first to review this material</p>
                  </div>
                )}
              </CardContent>
              <CardFooter>
                <Dialog>
                  <DialogTrigger asChild>
                    <Button className="w-full">Leave Feedback</Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>Leave Feedback</DialogTitle>
                      <DialogDescription>
                        Share your experience with this material to help other students.
                      </DialogDescription>
                    </DialogHeader>
                    <FeedbackForm
                      materialId={params.id}
                      onSuccess={() => {
                        // Refresh feedback data
                        getMaterialFeedback(params.id).then((data) => setFeedback(data))
                      }}
                    />
                  </DialogContent>
                </Dialog>
              </CardFooter>
            </Card>
          </div>

<div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Request Exchange</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="font-medium">Status:</span>
                  <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-green-100 text-green-800">
                    Available
                  </span>
                </div>

{material.rating !== null && (
                  <div className="flex items-center justify-between">
                    <span className="font-medium">Rating:</span>
                    <div className="flex items-center">
                      <div className="flex">
                        {Array.from({ length: 5 }).map((_, i) => (
                          <Star
                            key={i}
                            className={`h-4 w-4 ${i < Math.round(material.rating) ? "text-yellow-500 fill-yellow-500" : "text-muted-foreground"}`}
                          />
                        ))}
                      </div>
                      <span className="ml-2 text-sm text-muted-foreground">({material.reviewCount})</span>
                    </div>
                  </div>
                )}

<div className="pt-4">
                  <Textarea
                    placeholder="Write a message to the owner explaining why you need this material..."
                    value={requestMessage}
                    onChange={(e) => setRequestMessage(e.target.value)}
                    rows={4}
                  />
                </div>
              </CardContent>
              <CardFooter>
                <Button className="w-full" onClick={handleRequestSubmit} disabled={isSubmitting}>
                  {isSubmitting ? "Sending Request..." : "Send Request"}
                </Button>
              </CardFooter>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Similar Materials</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid gap-4">
                  {/* This would be populated with actual similar materials */}
                  <div
                    className="flex items-center gap-3 p-2 hover:bg-muted rounded cursor-pointer"
                    onClick={() => router.push("/materials/similar-1")}
                  >
                    <div className="bg-muted p-2 rounded">
                      <BookOpen className="h-5 w-5 text-muted-foreground" />
                    </div>
                    <div>
                      <p className="text-sm font-medium">Advanced Calculus Notes</p>
                      <p className="text-xs text-muted-foreground">Math 201</p>
                    </div>
                  </div>
                  <div
                    className="flex items-center gap-3 p-2 hover:bg-muted rounded cursor-pointer"
                    onClick={() => router.push("/materials/similar-2")}
                  >
                    <div className="bg-muted p-2 rounded">
                      <FileText className="h-5 w-5 text-muted-foreground" />
                    </div>
                    <div>
                      <p className="text-sm font-medium">Calculus Problem Set</p>
                      <p className="text-xs text-muted-foreground">Math 101</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/scans/[id]/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"
import { ArrowLeft, Calendar, Download, Edit, FileText, Loader2, Save, Share2, Tag, Trash2, X } from "lucide-react"
import { updateScannedDocument, deleteScannedDocument } from "@/lib/actions/material-actions"
import DashboardHeader from "@/components/dashboard-header"

export default function ScannedDocumentDetailPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [document, setDocument] = useState(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isEditing, setIsEditing] = useState(false)
  const [editedText, setEditedText] = useState("")
  const [newTag, setNewTag] = useState("")
  const [tags, setTags] = useState([])
  const [isSaving, setIsSaving] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)

useEffect(() => {
    async function loadDocument() {
      try {
        // In a real app, this would fetch the actual document
        // For demo, we'll use a mock document
        await new Promise((resolve) => setTimeout(resolve, 1000))

// Attempt to get the document by ID (in a real app)
        // const documentData = await getScannedDocumentById(params.id)

// If no document is found, show an error and redirect
        // if (!documentData) {
        //   toast({
        //     title: "Document not found",
        //     description: "The requested document could not be found.",
        //     variant: "destructive",
        //   })
        //   router.push("/scans")
        //   return
        // }

const mockDocument = {
          id: params.id,
          fileName: "calculus_notes.pdf",
          fileType: "application/pdf",
          fileSize: 2500000,
          text: "Calculus notes covering derivatives, integrals, and applications. This document contains important formulas and examples for solving calculus problems. Topics include: limits, continuity, differentiation rules, integration techniques, and applications to physics and engineering.",
          userId: "user_1",
          userName: "Current User",
          createdAt: "2023-03-15T12:00:00Z",
          url: "/api/scans/calculus_notes.pdf",
          tags: ["calculus", "math", "notes"],
          isProcessed: true,
        }

setDocument(mockDocument)
        setEditedText(mockDocument.text)
        setTags(mockDocument.tags || [])
      } catch (error) {
        console.error("Failed to load document:", error)
        toast({
          title: "Error",
          description: "Failed to load the document. Please try again.",
          variant: "destructive",
        })
        router.push("/scans")
      } finally {
        setIsLoading(false)
      }
    }

loadDocument()
  }, [params.id, router])

const handleSave = async () => {
    setIsSaving(true)

try {
      // In a real app, this would update the actual document
      await updateScannedDocument(params.id, {
        text: editedText,
        tags: tags,
      })

// Update local state
      setDocument({
        ...document,
        text: editedText,
        tags: tags,
      })

setIsEditing(false)

toast({
        title: "Document updated",
        description: "Your changes have been saved successfully.",
      })
    } catch (error) {
      console.error("Failed to update document:", error)
      toast({
        title: "Error",
        description: "Failed to save changes. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

const handleDelete = async () => {
    if (confirm("Are you sure you want to delete this document? This action cannot be undone.")) {
      setIsDeleting(true)

try {
        await deleteScannedDocument(params.id)

toast({
          title: "Document deleted",
          description: "The document has been deleted successfully.",
        })

router.push("/scans")
      } catch (error) {
        console.error("Failed to delete document:", error)
        toast({
          title: "Error",
          description: "Failed to delete the document. Please try again.",
          variant: "destructive",
        })
        setIsDeleting(false)
      }
    }
  }

const addTag = () => {
    if (newTag.trim() && !tags.includes(newTag.trim())) {
      setTags([...tags, newTag.trim()])
      setNewTag("")
    }
  }

const removeTag = (tagToRemove) => {
    setTags(tags.filter((tag) => tag !== tagToRemove))
  }

const getFileIcon = (fileType) => {
    if (fileType === "application/pdf") {
      return <FileText className="h-16 w-16 text-red-500" />
    } else if (fileType?.startsWith("image/")) {
      return <FileText className="h-16 w-16 text-blue-500" />
    } else {
      return <FileText className="h-16 w-16 text-muted-foreground" />
    }
  }

if (isLoading || !document) {
    return (
      <div className="flex min-h-screen flex-col">
        <DashboardHeader />
        <main className="flex-1 container py-6">
          <div className="flex justify-center items-center h-full">
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
            <p className="ml-2">Loading document...</p>
          </div>
        </main>
      </div>
    )
  }

return (
    <div className="flex min-h-screen flex-col">
      <DashboardHeader />
      <main className="flex-1 container py-6">
        <div className="mb-6">
          <Button variant="ghost" onClick={() => router.push("/scans")}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Documents
          </Button>
        </div>

<div className="grid gap-6 md:grid-cols-3">
          <div className="md:col-span-2 space-y-6">
            <Card>
              <CardHeader>
                <div className="flex justify-between items-start">
                  <div>
                    <CardTitle className="text-2xl">{document.fileName}</CardTitle>
                    <CardDescription className="flex items-center gap-1 mt-1">
                      <Calendar className="h-3 w-3" />
                      <span>Scanned on {new Date(document.createdAt).toLocaleDateString()}</span>
                      <span className="mx-1">•</span>
                      <span>{(document.fileSize / 1024 / 1024).toFixed(2)} MB</span>
                    </CardDescription>
                  </div>
                  <div className="flex gap-2">
                    {isEditing ? (
                      <>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => {
                            setIsEditing(false)
                            setEditedText(document.text)
                            setTags(document.tags || [])
                          }}
                        >
                          Cancel
                        </Button>
                        <Button size="sm" onClick={handleSave} disabled={isSaving}>
                          {isSaving ? (
                            <>
                              <Loader2 className="mr-2 h-3 w-3 animate-spin" />
                              Saving...
                            </>
                          ) : (
                            <>
                              <Save className="mr-2 h-3 w-3" />
                              Save
                            </>
                          )}
                        </Button>
                      </>
                    ) : (
                      <Button variant="outline" size="sm" onClick={() => setIsEditing(true)}>
                        <Edit className="mr-2 h-3 w-3" />
                        Edit
                      </Button>
                    )}
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="bg-muted rounded-md p-4">
                  {isEditing ? (
                    <Textarea
                      value={editedText}
                      onChange={(e) => setEditedText(e.target.value)}
                      rows={10}
                      className="font-mono text-sm"
                    />
                  ) : (
                    <div className="whitespace-pre-wrap font-mono text-sm">{document.text}</div>
                  )}
                </div>

{isEditing ? (
                    <div className="space-y-2">
                      <div className="flex gap-2">
                        <Input
                          value={newTag}
                          onChange={(e) => setNewTag(e.target.value)}
                          placeholder="Add a tag"
                          onKeyDown={(e) => {
                            if (e.key === "Enter") {
                              e.preventDefault()
                              addTag()
                            }
                          }}
                        />
                        <Button variant="outline" onClick={addTag}>
                          Add
                        </Button>
                      </div>

<div className="flex flex-wrap gap-1 mt-2">
                        {tags.map((tag, index) => (
                          <span
                            key={index}
                            className="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium bg-muted"
                          >
                            {tag}
                            <button
                              className="ml-1 rounded-full hover:bg-muted-foreground/20"
                              onClick={() => removeTag(tag)}
                            >
                              <X className="h-3 w-3" />
                            </button>
                          </span>
                        ))}
                      </div>
                    </div>
                  ) : (
                    <div className="flex flex-wrap gap-1">
                      {document.tags &&
                        document.tags.map((tag, index) => (
                          <span
                            key={index}
                            className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-muted"
                          >
                            {tag}
                          </span>
                        ))}
                      {(!document.tags || document.tags.length === 0) && (
                        <span className="text-sm text-muted-foreground">No tags</span>
                      )}
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Document Preview</CardTitle>
              </CardHeader>
              <CardContent className="flex justify-center">
                {document.fileType === "application/pdf" ? (
                  <div className="w-full h-[500px] bg-muted rounded-md flex items-center justify-center">
                    <p className="text-muted-foreground">PDF preview would be displayed here</p>
                  </div>
                ) : document.fileType?.startsWith("image/") ? (
                  <div className="w-full max-h-[500px] bg-muted rounded-md flex items-center justify-center">
                    <p className="text-muted-foreground">Image preview would be displayed here</p>
                  </div>
                ) : (
                  <div className="w-full h-[200px] bg-muted rounded-md flex items-center justify-center">
                    <p className="text-muted-foreground">Preview not available for this file type</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

<div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Document Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <Button className="w-full">
                  <Download className="mr-2 h-4 w-4" />
                  Download Document
                </Button>

<Button variant="outline" className="w-full">
                  <Share2 className="mr-2 h-4 w-4" />
                  Share Document
                </Button>

<Button variant="destructive" className="w-full" onClick={handleDelete} disabled={isDeleting}>
                  {isDeleting ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Deleting...
                    </>
                  ) : (
                    <>
                      <Trash2 className="mr-2 h-4 w-4" />
                      Delete Document
                    </>
                  )}
                </Button>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Convert to Material</CardTitle>
                <CardDescription>Create a study material from this scanned document</CardDescription>
              </CardHeader>
              <CardContent>
                <Button
                  className="w-full"
                  onClick={() => {
                    router.push(`/materials/new?fromScan=${params.id}`)
                  }}
                >
                  Create Material
                </Button>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Related Documents</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center gap-3 p-2 hover:bg-muted rounded cursor-pointer">
                  <div className="bg-muted p-2 rounded">
                    <FileText className="h-5 w-5 text-red-500" />
                  </div>
                  <div>
                    <p className="text-sm font-medium">calculus_exercises.pdf</p>
                    <p className="text-xs text-muted-foreground">Scanned 2 days ago</p>
                  </div>
                </div>
                <div className="flex items-center gap-3 p-2 hover:bg-muted rounded cursor-pointer">
                  <div className="bg-muted p-2 rounded">
                    <FileText className="h-5 w-5 text-blue-500" />
                  </div>
                  <div>
                    <p className="text-sm font-medium">calculus_formula_sheet.jpg</p>
                    <p className="text-xs text-muted-foreground">Scanned 1 week ago</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}

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

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { useRouter } from "next/navigation"
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 { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/components/ui/use-toast"
import { Camera, FileText, Key, Loader2, Lock, Save, UserIcon } from "lucide-react"
import { getCurrentUser, updateUserProfile, updateUserSettings, changePassword } from "@/lib/actions/user-actions"
import { isStrongPassword } from "@/lib/security"
import DashboardHeader from "@/components/dashboard-header"

export default function ProfilePage() {
  const router = useRouter()
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [user, setUser] = useState(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [activeTab, setActiveTab] = useState("profile")

// Profile form state
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [university, setUniversity] = useState("")
  const [bio, setBio] = useState("")
  const [profileImage, setProfileImage] = useState<string | null>(null)

// Settings form state
  const [notificationsEnabled, setNotificationsEnabled] = useState(true)
  const [darkModeEnabled, setDarkModeEnabled] = useState(false)
  const [privacyLevel, setPrivacyLevel] = useState<"public" | "private" | "friends">("public")

// Password form state
  const [currentPassword, setCurrentPassword] = useState("")
  const [newPassword, setNewPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [passwordError, setPasswordError] = useState("")

useEffect(() => {
    async function loadUserData() {
      try {
        const userData = await getCurrentUser()

// Set default values if user data is missing
        if (!userData) {
          router.push("/login")
          return
        }

setUser(userData)

// Set form values
        setName(userData.name || "")
        setEmail(userData.email || "")
        setUniversity(userData.university || "")
        setBio(userData.bio || "")
        setProfileImage(userData.profileImage)

// Set settings values
        setNotificationsEnabled(userData.settings?.notifications ?? true)
        setDarkModeEnabled(userData.settings?.darkMode ?? false)
        setPrivacyLevel(userData.settings?.privacy ?? "public")
      } catch (error) {
        console.error("Failed to load user data:", error)
        toast({
          title: "Error",
          description: "Failed to load your profile. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

loadUserData()
  }, [router])

const handleProfileImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const file = e.target.files[0]
      const reader = new FileReader()

reader.onload = (event) => {
        setProfileImage(event.target?.result as string)
      }

reader.readAsDataURL(file)
    }
  }

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

try {
      const updatedUser = await updateUserProfile({
        name,
        email,
        university,
        bio,
        profileImage,
      })

setUser(updatedUser.user)

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

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

try {
      const updatedUser = await updateUserSettings({
        notifications: notificationsEnabled,
        darkMode: darkModeEnabled,
        privacy: privacyLevel,
      })

setUser({
        ...user,
        settings: updatedUser.user.settings,
      })

toast({
        title: "Settings updated",
        description: "Your settings have been updated successfully.",
      })

// Apply dark mode if changed
      if (darkModeEnabled !== user.settings.darkMode) {
        document.documentElement.classList.toggle("dark", darkModeEnabled)
      }
    } catch (error) {
      console.error("Failed to update settings:", error)
      toast({
        title: "Error",
        description: "Failed to update your settings. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

const handlePasswordSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setPasswordError("")

// Validate passwords
    if (newPassword !== confirmPassword) {
      setPasswordError("New passwords do not match")
      return
    }

// Check password strength
    const passwordCheck = isStrongPassword(newPassword)
    if (!passwordCheck.isValid) {
      setPasswordError(passwordCheck.message)
      return
    }

setIsSaving(true)

try {
      await changePassword({
        currentPassword,
        newPassword,
      })

// Clear form
      setCurrentPassword("")
      setNewPassword("")
      setConfirmPassword("")

toast({
        title: "Password changed",
        description: "Your password has been changed successfully.",
      })
    } catch (error) {
      console.error("Failed to change password:", error)
      setPasswordError("Current password is incorrect")
      toast({
        title: "Error",
        description: "Failed to change your password. Please check your current password.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

if (isLoading || !user) {
    return (
      <div className="flex min-h-screen flex-col">
        <DashboardHeader />
        <main className="flex-1 container py-6">
          <div className="flex justify-center items-center h-full">
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
            <p className="ml-2">Loading profile...</p>
          </div>
        </main>
      </div>
    )
  }

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

<div className="grid gap-6 md:grid-cols-4">
          <Card className="md:col-span-1">
            <CardContent className="p-6">
              <div className="flex flex-col items-center space-y-4">
                <div className="relative">
                  <div className="h-32 w-32 rounded-full overflow-hidden bg-muted flex items-center justify-center">
                    {profileImage ? (
                      <img src={profileImage || "/placeholder.svg"} alt={name} className="h-full w-full object-cover" />
                    ) : (
                      <UserIcon className="h-16 w-16 text-muted-foreground" />
                    )}
                  </div>
                  <Button
                    variant="outline"
                    size="icon"
                    className="absolute bottom-0 right-0 rounded-full bg-background"
                    onClick={() => fileInputRef.current?.click()}
                  >
                    <Camera className="h-4 w-4" />
                    <span className="sr-only">Change profile picture</span>
                  </Button>
                  <Input
                    type="file"
                    ref={fileInputRef}
                    className="hidden"
                    accept="image/*"
                    onChange={handleProfileImageChange}
                  />
                </div>

<div className="text-center">
                  <h2 className="text-xl font-bold">{user.name}</h2>
                  <p className="text-sm text-muted-foreground">{user.email}</p>
                </div>

<div className="w-full space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Member since</span>
                    <span>{new Date(user.createdAt).toLocaleDateString()}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Materials shared</span>
                    <span>12</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Documents scanned</span>
                    <span>8</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="md:col-span-3">
            <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
              <TabsList className="w-full justify-start">
                <TabsTrigger value="profile" className="flex items-center">
                  <UserIcon className="mr-2 h-4 w-4" />
                  Profile
                </TabsTrigger>
                <TabsTrigger value="settings" className="flex items-center">
                  <FileText className="mr-2 h-4 w-4" />
                  Settings
                </TabsTrigger>
                <TabsTrigger value="security" className="flex items-center">
                  <Lock className="mr-2 h-4 w-4" />
                  Security
                </TabsTrigger>
              </TabsList>

<TabsContent value="profile">
                <Card>
                  <CardHeader>
                    <CardTitle>Profile Information</CardTitle>
                    <CardDescription>Update your personal information and profile details</CardDescription>
                  </CardHeader>
                  <form onSubmit={handleProfileSubmit}>
                    <CardContent className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="name">Full Name</Label>
                        <Input id="name" value={name} onChange={(e) => setName(e.target.value)} required />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="email">Email</Label>
                        <Input
                          id="email"
                          type="email"
                          value={email}
                          onChange={(e) => setEmail(e.target.value)}
                          required
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="university">University/College</Label>
                        <Select value={university} onValueChange={setUniversity}>
                          <SelectTrigger id="university">
                            <SelectValue placeholder="Select your institution" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="harvard">Harvard University</SelectItem>
                            <SelectItem value="mit">MIT</SelectItem>
                            <SelectItem value="stanford">Stanford University</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="bio">Bio</Label>
                        <Textarea
                          id="bio"
                          value={bio}
                          onChange={(e) => setBio(e.target.value)}
                          placeholder="Tell others about yourself"
                          rows={4}
                        />
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button type="submit" disabled={isSaving}>
                        {isSaving ? (
                          <>
                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                            Saving...
                          </>
                        ) : (
                          <>
                            <Save className="mr-2 h-4 w-4" />
                            Save Changes
                          </>
                        )}
                      </Button>
                    </CardFooter>
                  </form>
                </Card>
              </TabsContent>

<TabsContent value="settings">
                <Card>
                  <CardHeader>
                    <CardTitle>Application Settings</CardTitle>
                    <CardDescription>Customize your experience with ShareMet</CardDescription>
                  </CardHeader>
                  <form onSubmit={handleSettingsSubmit}>
                    <CardContent className="space-y-6">
                      <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                          <Label htmlFor="notifications">Notifications</Label>
                          <p className="text-sm text-muted-foreground">
                            Receive notifications about requests and messages
                          </p>
                        </div>
                        <Switch
                          id="notifications"
                          checked={notificationsEnabled}
                          onCheckedChange={setNotificationsEnabled}
                        />
                      </div>

<div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                          <Label htmlFor="darkMode">Dark Mode</Label>
                          <p className="text-sm text-muted-foreground">Use dark theme for the application</p>
                        </div>
                        <Switch id="darkMode" checked={darkModeEnabled} onCheckedChange={setDarkModeEnabled} />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="privacy">Privacy Level</Label>
                        <Select
                          value={privacyLevel}
                          onValueChange={(value: "public" | "private" | "friends") => setPrivacyLevel(value)}
                        >
                          <SelectTrigger id="privacy">
                            <SelectValue placeholder="Select privacy level" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="public">Public - Anyone can see your profile</SelectItem>
                            <SelectItem value="friends">Friends - Only connections can see your profile</SelectItem>
                            <SelectItem value="private">Private - Only you can see your profile</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button type="submit" disabled={isSaving}>
                        {isSaving ? (
                          <>
                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                            Saving...
                          </>
                        ) : (
                          <>
                            <Save className="mr-2 h-4 w-4" />
                            Save Settings
                          </>
                        )}
                      </Button>
                    </CardFooter>
                  </form>
                </Card>
              </TabsContent>

<TabsContent value="security">
                <Card>
                  <CardHeader>
                    <CardTitle>Security Settings</CardTitle>
                    <CardDescription>Manage your password and account security</CardDescription>
                  </CardHeader>
                  <form onSubmit={handlePasswordSubmit}>
                    <CardContent className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="currentPassword">Current Password</Label>
                        <Input
                          id="currentPassword"
                          type="password"
                          value={currentPassword}
                          onChange={(e) => setCurrentPassword(e.target.value)}
                          required
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="newPassword">New Password</Label>
                        <Input
                          id="newPassword"
                          type="password"
                          value={newPassword}
                          onChange={(e) => setNewPassword(e.target.value)}
                          required
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="confirmPassword">Confirm New Password</Label>
                        <Input
                          id="confirmPassword"
                          type="password"
                          value={confirmPassword}
                          onChange={(e) => setConfirmPassword(e.target.value)}
                          required
                        />
                      </div>

{passwordError && <div className="text-sm text-red-500">{passwordError}</div>}

<div className="text-sm text-muted-foreground">
                        <p>Password must:</p>
                        <ul className="list-disc list-inside ml-2">
                          <li>Be at least 8 characters long</li>
                          <li>Include at least one uppercase letter</li>
                          <li>Include at least one lowercase letter</li>
                          <li>Include at least one number</li>
                          <li>Include at least one special character</li>
                        </ul>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button type="submit" disabled={isSaving}>
                        {isSaving ? (
                          <>
                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                            Changing Password...
                          </>
                        ) : (
                          <>
                            <Key className="mr-2 h-4 w-4" />
                            Change Password
                          </>
                        )}
                      </Button>
                    </CardFooter>
                  </form>
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  )
}
</article></body></html>

About

About