[V0_FILE]typescript:file="app/api/auth/forgot-password/route.ts" isMerged="true" import { NextResponse } from "next/server" import type { NextRequest } from "next/server" import { getUserByEmail } from "@/lib/db-service" import { sendPasswordResetEmail } from "@/lib/email-service" import crypto from "crypto" export async function POST(request: NextRequest) { try { const body = await request.json() const { email } = body if (!email) { return NextResponse.json({ error: "Email is required" }, { status: 400 }) } // Check if user exists const user = await getUserByEmail(email) // Don't reveal if user exists or not for security if (!user) { return NextResponse.json({ success: true, message: "If your email is registered, you will receive a password reset link.", }) } // Generate reset token const resetToken = crypto.randomBytes(32).toString("hex") const resetTokenExpires = new Date(Date.now() + 60 * 60 * 1000) // 1 hour // Save reset token to user const client = await import("@/lib/mongodb").then((mod) => mod.default) const db = (await client).db() await db.collection("users").updateOne( { _id: user._id }, { $set: { resetToken, resetTokenExpires, }, }, ) // Send password reset email await sendPasswordResetEmail(email, resetToken) return NextResponse.json({ success: true, message: "If your email is registered, you will receive a password reset link.", }) } catch (error) { console.error("Password reset request error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/reset-password/route.ts" isMerged="true" import { NextResponse } from "next/server" import type { NextRequest } from "next/server" import bcrypt from "bcryptjs" export async function POST(request: NextRequest) { try { const body = await request.json() const { token, password } = body if (!token || !password) { return NextResponse.json({ error: "Token and password are required" }, { status: 400 }) } // Find user with this reset token const client = await import("@/lib/mongodb").then((mod) => mod.default) const db = (await client).db() const user = await db.collection("users").findOne({ resetToken: token, resetTokenExpires: { $gt: new Date() }, }) if (!user) { return NextResponse.json({ error: "Invalid or expired token" }, { status: 400 }) } // Hash the new password const hashedPassword = await bcrypt.hash(password, 10) // Update user's password and clear reset token await db.collection("users").updateOne( { _id: user._id }, { $set: { password: hashedPassword, updatedAt: new Date(), }, $unset: { resetToken: "", resetTokenExpires: "", }, }, ) return NextResponse.json({ success: true, message: "Password has been reset successfully. You can now log in with your new password.", }) } catch (error) { console.error("Password reset error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="models/template.ts" isMerged="true" import type { ObjectId } from "mongodb" export type QuestionType = "text" | "textarea" | "number" | "checkbox" | "file" | "select" export interface Condition { questionId: string operator: "equals" | "notEquals" | "contains" | "greaterThan" | "lessThan" value: string | number | string[] } export interface Validation { type: "required" | "min" | "max" | "pattern" | "email" | "url" | "fileType" | "fileSize" value?: string | number message: string } export interface Question { id: string type: QuestionType title: string description?: string required: boolean options?: string[] validations?: Validation[] conditions?: Condition[] // Show this question only if conditions are met fileTypes?: string[] // For file questions, e.g. ["image/jpeg", "image/png"] maxFileSize?: number // In bytes } export interface Template { _id?: ObjectId title: string description?: string topic?: string tags: string[] isPublic: boolean questions: Question[] imageUrl?: string | null createdBy: ObjectId | string createdAt: Date updatedAt: Date responses: number likes?: number comments?: number version: number } [V0_FILE]typescript:file="components/drag-drop-questions.tsx" isMerged="true" "use client" import { DragDropContext, Droppable, Draggable, type DropResult } from "react-beautiful-dnd" import { Grip, X, Plus, Settings } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Switch } from "@/components/ui/switch" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { useState } from "react" import type { Question, Condition, Validation } from "@/models/template" interface DragDropQuestionsProps { questions: Question[] onChange: (questions: Question[]) => void onAddQuestion: (type: string) => void maxQuestions?: number } export function DragDropQuestions({ questions, onChange, onAddQuestion, maxQuestions = 10 }: DragDropQuestionsProps) { const [expandedSettings, setExpandedSettings] = useState(null) const handleDragEnd = (result: DropResult) => { if (!result.destination) return const items = Array.from(questions) const [reorderedItem] = items.splice(result.source.index, 1) items.splice(result.destination.index, 0, reorderedItem) onChange(items) } const updateQuestion = (index: number, updates: Partial) => { const updatedQuestions = [...questions] updatedQuestions[index] = { ...updatedQuestions[index], ...updates } onChange(updatedQuestions) } const removeQuestion = (index: number) => { const updatedQuestions = [...questions] updatedQuestions.splice(index, 1) onChange(updatedQuestions) // Update conditions that reference the removed question const removedId = questions[index].id const questionsWithUpdatedConditions = updatedQuestions.map((question) => { if (!question.conditions) return question const updatedConditions = question.conditions.filter((condition) => condition.questionId !== removedId) return { ...question, conditions: updatedConditions.length > 0 ? updatedConditions : undefined, } }) onChange(questionsWithUpdatedConditions) } const addOption = (questionIndex: number) => { const updatedQuestions = [...questions] const question = updatedQuestions[questionIndex] if (question.type === "checkbox" || question.type === "select") { const options = [...(question.options || []), `Option ${(question.options?.length || 0) + 1}`] updatedQuestions[questionIndex] = { ...question, options } onChange(updatedQuestions) } } const updateOption = (questionIndex: number, optionIndex: number, value: string) => { const updatedQuestions = [...questions] const question = updatedQuestions[questionIndex] if ((question.type === "checkbox" || question.type === "select") && question.options) { const options = [...question.options] options[optionIndex] = value updatedQuestions[questionIndex] = { ...question, options } onChange(updatedQuestions) } } const removeOption = (questionIndex: number, optionIndex: number) => { const updatedQuestions = [...questions] const question = updatedQuestions[questionIndex] if ( (question.type === "checkbox" || question.type === "select") && question.options && question.options.length > 1 ) { const options = question.options.filter((_, i) => i !== optionIndex) updatedQuestions[questionIndex] = { ...question, options } onChange(updatedQuestions) } } const addValidation = (questionIndex: number, validation: Validation) => { const updatedQuestions = [...questions] const question = updatedQuestions[questionIndex] const validations = [...(question.validations || []), validation] updatedQuestions[questionIndex] = { ...question, validations } onChange(updatedQuestions) } const updateValidation = (questionIndex: number, validationIndex: number, updates: Partial) => { const updatedQuestions = [...questions] const question = updatedQuestions[questionIndex] if (question.validations) { const validations = [...question.validations] validations[validationIndex] = { ...validations[validationIndex], ...updates } updatedQuestions[questionIndex] = { ...question, validations } onChange(updatedQuestions) } } const removeValidation = (questionIndex: number, validationIndex: number) => { const updatedQuestions = [...questions] const question = updatedQuestions[questionIndex] if (question.validations) { const validations = question.validations.filter((_, i) => i !== validationIndex) updatedQuestions[questionIndex] = { ...question, validations: validations.length > 0 ? validations : undefined, } onChange(updatedQuestions) } } const addCondition = (questionIndex: number, condition: Condition) => { const updatedQuestions = [...questions] const question = updatedQuestions[questionIndex] const conditions = [...(question.conditions || []), condition] updatedQuestions[questionIndex] = { ...question, conditions } onChange(updatedQuestions) } const updateCondition = (questionIndex: number, conditionIndex: number, updates: Partial) => { const updatedQuestions = [...questions] const question = updatedQuestions[questionIndex] if (question.conditions) { const conditions = [...question.conditions] conditions[conditionIndex] = { ...conditions[conditionIndex], ...updates } updatedQuestions[questionIndex] = { ...question, conditions } onChange(updatedQuestions) } } const removeCondition = (questionIndex: number, conditionIndex: number) => { const updatedQuestions = [...questions] const question = updatedQuestions[questionIndex] if (question.conditions) { const conditions = question.conditions.filter((_, i) => i !== conditionIndex) updatedQuestions[questionIndex] = { ...question, conditions: conditions.length > 0 ? conditions : undefined, } onChange(updatedQuestions) } } const updateFileSettings = (questionIndex: number, updates: { fileTypes?: string[]; maxFileSize?: number }) => { const updatedQuestions = [...questions] const question = updatedQuestions[questionIndex] if (question.type === "file") { updatedQuestions[questionIndex] = { ...question, ...updates } onChange(updatedQuestions) } } const toggleQuestionSettings = (questionId: string) => { setExpandedSettings(expandedSettings === questionId ? null : questionId) } // Get available questions for conditions (questions that come before the current one) const getAvailableQuestionsForConditions = (currentIndex: number) => { return questions .slice(0, currentIndex) .filter( (q) => q.type === "text" || q.type === "textarea" || q.type === "number" || q.type === "checkbox" || q.type === "select", ) } return (

{(provided) => (

{questions.map((question, index) => ( {(provided) => (

Question {index + 1}

{question.conditions && question.conditions.length > 0 && ( Conditional )}

Question updateQuestion(index, { title: e.target.value })} />

Description (Optional)

updateQuestion(index, { description: e.target.value })}
                          rows={2}
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor={`type-${question.id}`}>Question Type</Label>
                        <Select
                          value={question.type}
                          onValueChange={(value) => {
                            const newType = value as Question["type"]
                            const updates: Partial<Question> = { type: newType }

// Add default options for checkbox and select
                            if ((newType === "checkbox" || newType === "select") && !question.options) {
                              updates.options = ["Option 1"]
                            }

// Add default file settings
                            if (newType === "file") {
                              updates.fileTypes = ["image/jpeg", "image/png", "application/pdf"]
                              updates.maxFileSize = 5 * 1024 * 1024 // 5MB
                            }

updateQuestion(index, updates)
                          }}
                        >
                          <SelectTrigger id={`type-${question.id}`}>
                            <SelectValue placeholder="Select question type" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="text">Text Field</SelectItem>
                            <SelectItem value="textarea">Text Area</SelectItem>
                            <SelectItem value="number">Number</SelectItem>
                            <SelectItem value="checkbox">Checkbox</SelectItem>
                            <SelectItem value="select">Dropdown</SelectItem>
                            <SelectItem value="file">File Upload</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

{(question.type === "checkbox" || question.type === "select") && (
                        <div className="space-y-3">
                          <Label>Options</Label>
                          {question.options?.map((option, optionIndex) => (
                            <div key={optionIndex} className="flex items-center space-x-2">
                              <Input
                                placeholder={`Option ${optionIndex + 1}`}
                                value={option}
                                onChange={(e) => updateOption(index, optionIndex, e.target.value)}
                              />
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                onClick={() => removeOption(index, optionIndex)}
                                disabled={question.options?.length === 1}
                              >
                                <X className="h-4 w-4" />
                                <span className="sr-only">Remove option</span>
                              </Button>
                            </div>
                          ))}
                          <Button type="button" variant="outline" size="sm" onClick={() => addOption(index)}>
                            <Plus className="h-4 w-4 mr-2" /> Add Option
                          </Button>
                        </div>
                      )}

{question.type === "file" && (
                        <div className="space-y-3">
                          <Label>File Upload Settings</Label>
                          <div className="space-y-2">
                            <Label htmlFor={`file-types-${question.id}`} className="text-sm">
                              Allowed File Types
                            </Label>
                            <Input
                              id={`file-types-${question.id}`}
                              placeholder="e.g. image/jpeg, image/png, application/pdf"
                              value={question.fileTypes?.join(", ") || ""}
                              onChange={(e) =>
                                updateFileSettings(index, {
                                  fileTypes: e.target.value
                                    .split(",")
                                    .map((t) => t.trim())
                                    .filter(Boolean),
                                })
                              }
                            />
                            <p className="text-xs text-muted-foreground">
                              Comma-separated MIME types (e.g., image/jpeg, application/pdf)
                            </p>
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor={`max-size-${question.id}`} className="text-sm">
                              Max File Size (MB)
                            </Label>
                            <Input
                              id={`max-size-${question.id}`}
                              type="number"
                              min="1"
                              max="10"
                              value={question.maxFileSize ? Math.floor(question.maxFileSize / (1024 * 1024)) : 5}
                              onChange={(e) =>
                                updateFileSettings(index, {
                                  maxFileSize: Number.parseInt(e.target.value) * 1024 * 1024,
                                })
                              }
                            />
                          </div>
                        </div>
                      )}

<div className="flex items-center space-x-2 pt-2">
                        <Switch
                          id={`required-${question.id}`}
                          checked={question.required}
                          onCheckedChange={(checked) => updateQuestion(index, { required: checked })}
                        />
                        <Label htmlFor={`required-${question.id}`}>Required</Label>
                      </div>

{expandedSettings === question.id && (
                        <div className="mt-4 pt-4 border-t">
                          <Tabs defaultValue="validations">
                            <TabsList className="mb-4">
                              <TabsTrigger value="validations">Validations</TabsTrigger>
                              <TabsTrigger value="conditions">Conditions</TabsTrigger>
                            </TabsList>

<TabsContent value="validations" className="space-y-4">
                              <h4 className="text-sm font-medium">Validation Rules</h4>

{question.validations && question.validations.length > 0 ? (
                                <div className="space-y-3">
                                  {question.validations.map((validation, validationIndex) => (
                                    <div
                                      key={validationIndex}
                                      className="flex items-center gap-2 p-2 border rounded-md"
                                    >
                                      <div className="flex-1">
                                        <p className="text-sm font-medium">{validation.type}</p>
                                        {validation.value && (
                                          <p className="text-xs text-muted-foreground">Value: {validation.value}</p>
                                        )}
                                        <p className="text-xs">{validation.message}</p>
                                      </div>
                                      <Button
                                        type="button"
                                        variant="ghost"
                                        size="sm"
                                        onClick={() => removeValidation(index, validationIndex)}
                                      >
                                        <X className="h-4 w-4" />
                                      </Button>
                                    </div>
                                  ))}
                                </div>
                              ) : (
                                <p className="text-sm text-muted-foreground">No validation rules added yet.</p>
                              )}

<Popover>
                                <PopoverTrigger asChild>
                                  <Button variant="outline" size="sm">
                                    <Plus className="h-4 w-4 mr-2" /> Add Validation
                                  </Button>
                                </PopoverTrigger>
                                <PopoverContent className="w-80">
                                  <div className="space-y-4">
                                    <h4 className="font-medium">Add Validation Rule</h4>
                                    <div className="space-y-2">
                                      <Label htmlFor="validation-type">Type</Label>
                                      <Select
                                        onValueChange={(value) => {
                                          const type = value as Validation["type"]
                                          addValidation(index, {
                                            type,
                                            message: `Please enter a valid ${type}`,
                                            value: type === "min" || type === "max" ? 0 : "",
                                          })
                                        }}
                                      >
                                        <SelectTrigger id="validation-type">
                                          <SelectValue placeholder="Select validation type" />
                                        </SelectTrigger>
                                        <SelectContent>
                                          {question.type === "text" || question.type === "textarea" ? (
                                            <>
                                              <SelectItem value="required">Required</SelectItem>
                                              <SelectItem value="min">Min Length</SelectItem>
                                              <SelectItem value="max">Max Length</SelectItem>
                                              <SelectItem value="pattern">Pattern (Regex)</SelectItem>
                                              <SelectItem value="email">Email</SelectItem>
                                              <SelectItem value="url">URL</SelectItem>
                                            </>
                                          ) : question.type === "number" ? (
                                            <>
                                              <SelectItem value="required">Required</SelectItem>
                                              <SelectItem value="min">Min Value</SelectItem>
                                              <SelectItem value="max">Max Value</SelectItem>
                                            </>
                                          ) : question.type === "file" ? (
                                            <>
                                              <SelectItem value="required">Required</SelectItem>
                                              <SelectItem value="fileType">File Type</SelectItem>
                                              <SelectItem value="fileSize">File Size</SelectItem>
                                            </>
                                          ) : (
                                            <SelectItem value="required">Required</SelectItem>
                                          )}
                                        </SelectContent>
                                      </Select>
                                    </div>
                                  </div>
                                </PopoverContent>
                              </Popover>
                            </TabsContent>

<TabsContent value="conditions" className="space-y-4">
                              <h4 className="text-sm font-medium">Show this question only if:</h4>

{question.conditions && question.conditions.length > 0 ? (
                                <div className="space-y-3">
                                  {question.conditions.map((condition, conditionIndex) => {
                                    const sourceQuestion = questions.find((q) => q.id === condition.questionId)

return (
                                      <div
                                        key={conditionIndex}
                                        className="flex items-center gap-2 p-2 border rounded-md"
                                      >
                                        <div className="flex-1">
                                          <p className="text-sm font-medium">
                                            {sourceQuestion?.title || "Question"} {condition.operator} {condition.value}
                                          </p>
                                        </div>
                                        <Button
                                          type="button"
                                          variant="ghost"
                                          size="sm"
                                          onClick={() => removeCondition(index, conditionIndex)}
                                        >
                                          <X className="h-4 w-4" />
                                        </Button>
                                      </div>
                                    )
                                  })}
                                </div>
                              ) : (
                                <p className="text-sm text-muted-foreground">
                                  No conditions added. This question will always be shown.
                                </p>
                              )}

{getAvailableQuestionsForConditions(index).length > 0 ? (
                                <Popover>
                                  <PopoverTrigger asChild>
                                    <Button variant="outline" size="sm">
                                      <Plus className="h-4 w-4 mr-2" /> Add Condition
                                    </Button>
                                  </PopoverTrigger>
                                  <PopoverContent className="w-80">
                                    <div className="space-y-4">
                                      <h4 className="font-medium">Add Condition</h4>
                                      <div className="space-y-2">
                                        <Label htmlFor="condition-question">Question</Label>
                                        <Select
                                          onValueChange={(questionId) => {
                                            const sourceQuestion = questions.find((q) => q.id === questionId)
                                            if (!sourceQuestion) return

let value: string | number | string[] = ""
                                            if (sourceQuestion.type === "number") value = 0
                                            else if (sourceQuestion.type === "checkbox" && sourceQuestion.options)
                                              value = sourceQuestion.options[0]

addCondition(index, {
                                              questionId,
                                              operator: "equals",
                                              value,
                                            })
                                          }}
                                        >
                                          <SelectTrigger id="condition-question">
                                            <SelectValue placeholder="Select question" />
                                          </SelectTrigger>
                                          <SelectContent>
                                            {getAvailableQuestionsForConditions(index).map((q) => (
                                              <SelectItem key={q.id} value={q.id}>
                                                {q.title}
                                              </SelectItem>
                                            ))}
                                          </SelectContent>
                                        </Select>
                                      </div>
                                    </div>
                                  </PopoverContent>
                                </Popover>
                              ) : (
                                <p className="text-sm text-muted-foreground">
                                  Add questions above this one to create conditions.
                                </p>
                              )}
                            </TabsContent>
                          </Tabs>
                        </div>
                      )}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>

{questions.length < maxQuestions && (
        <div className="space-y-4">
          <h3 className="text-sm font-medium">Add a new question</h3>
          <div className="flex flex-wrap gap-2">
            <Button type="button" variant="outline" onClick={() => onAddQuestion("text")}>
              <Plus className="h-4 w-4 mr-2" /> Text Field
            </Button>
            <Button type="button" variant="outline" onClick={() => onAddQuestion("textarea")}>
              <Plus className="h-4 w-4 mr-2" /> Text Area
            </Button>
            <Button type="button" variant="outline" onClick={() => onAddQuestion("number")}>
              <Plus className="h-4 w-4 mr-2" /> Number
            </Button>
            <Button type="button" variant="outline" onClick={() => onAddQuestion("checkbox")}>
              <Plus className="h-4 w-4 mr-2" /> Checkbox
            </Button>
            <Button type="button" variant="outline" onClick={() => onAddQuestion("select")}>
              <Plus className="h-4 w-4 mr-2" /> Dropdown
            </Button>
            <Button type="button" variant="outline" onClick={() => onAddQuestion("file")}>
              <Plus className="h-4 w-4 mr-2" /> File Upload
            </Button>
          </div>
        </div>
      )}

{questions.length === 0 && (
        <div className="text-center py-6 border border-dashed rounded-lg">
          <p className="text-muted-foreground mb-4">No questions added yet</p>
          <div className="flex flex-wrap justify-center gap-2">
            <Button type="button" variant="outline" onClick={() => onAddQuestion("text")}>
              <Plus className="h-4 w-4 mr-2" /> Text Field
            </Button>
            <Button type="button" variant="outline" onClick={() => onAddQuestion("textarea")}>
              <Plus className="h-4 w-4 mr-2" /> Text Area
            </Button>
            <Button type="button" variant="outline" onClick={() => onAddQuestion("number")}>
              <Plus className="h-4 w-4 mr-2" /> Number
            </Button>
            <Button type="button" variant="outline" onClick={() => onAddQuestion("checkbox")}>
              <Plus className="h-4 w-4 mr-2" /> Checkbox
            </Button>
            <Button type="button" variant="outline" onClick={() => onAddQuestion("select")}>
              <Plus className="h-4 w-4 mr-2" /> Dropdown
            </Button>
            <Button type="button" variant="outline" onClick={() => onAddQuestion("file")}>
              <Plus className="h-4 w-4 mr-2" /> File Upload
            </Button>
          </div>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescript:file="app/forms/[id]/fill/page.tsx" isFixed="true" isQuickEdit="true" isMerged="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 { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { ArrowLeft, Upload, FileText, X } from "lucide-react"
import Link from "next/link"
import { useSession } from "next-auth/react"
import type { Question } from "@/models/template"

interface FormData {
  id: string
  title: string
  description: string
  createdBy: string
  questions: Question[]
}

export default function FillFormPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { toast } = useToast()
  const { data: session } = useSession()
  const [formData, setFormData] = useState<FormData | null>(null)
  const [formResponses, setFormResponses] = useState<Record<string, any>>({})
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [fileUploads, setFileUploads] = useState<Record<string, { url: string; name: string; type: string }>>({})
  const [visibleQuestions, setVisibleQuestions] = useState<string[]>([])
  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({})

useEffect(() => {
    if (!session) {
      router.push("/login")
      return
    }

fetchFormData()
  }, [params.id, session])

useEffect(() => {
    if (formData) {
      // Initialize visible questions based on conditions
      updateVisibleQuestions()
    }
  }, [formData, formResponses])

const fetchFormData = async () => {
    setIsLoading(true)
    try {
      const response = await fetch(`/api/templates/${params.id}`)
      if (!response.ok) throw new Error("Failed to fetch form data")
      const data = await response.json()
      setFormData(data)

// Initialize all questions as visible
      setVisibleQuestions(data.questions.map((q: Question) => q.id))
    } catch (error) {
      console.error("Error fetching form data:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to load form. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

const updateVisibleQuestions = () => {
    if (!formData) return

const newVisibleQuestions = formData.questions
      .filter((question) => {
        // If no conditions, question is always visible
        if (!question.conditions || question.conditions.length === 0) {
          return true
        }

// Check all conditions - all must be true for the question to be visible
        return question.conditions.every((condition) => {
          const sourceValue = formResponses[condition.questionId]

// If the source question hasn't been answered, hide this question
          if (sourceValue === undefined) return false

switch (condition.operator) {
            case "equals":
              if (Array.isArray(sourceValue)) {
                return Array.isArray(condition.value)
                  ? condition.value.every((v) => sourceValue.includes(v))
                  : sourceValue.includes(condition.value)
              }
              return sourceValue === condition.value
            case "notEquals":
              if (Array.isArray(sourceValue)) {
                return Array.isArray(condition.value)
                  ? !condition.value.every((v) => sourceValue.includes(v))
                  : !sourceValue.includes(condition.value)
              }
              return sourceValue !== condition.value
            case "contains":
              if (typeof sourceValue === "string") {
                return sourceValue.includes(condition.value as string)
              }
              if (Array.isArray(sourceValue)) {
                return sourceValue.includes(condition.value)
              }
              return false
            case "greaterThan":
              return Number(sourceValue) > Number(condition.value)
            case "lessThan":
              return Number(sourceValue) < Number(condition.value)
            default:
              return false
          }
        })
      })
      .map((q) => q.id)

setVisibleQuestions(newVisibleQuestions)
  }

const handleTextChange = (questionId: string, value: string) => {
    setFormResponses((prev) => ({
      ...prev,
      [questionId]: value,
    }))
  }

const handleNumberChange = (questionId: string, value: string) => {
    setFormResponses((prev) => ({
      ...prev,
      [questionId]: value ? Number.parseInt(value, 10) : "",
    }))
  }

const handleCheckboxChange = (questionId: string, option: string, checked: boolean) => {
    setFormResponses((prev) => {
      const currentOptions = prev[questionId] || []
      if (checked) {
        return {
          ...prev,
          [questionId]: [...currentOptions, option],
        }
      } else {
        return {
          ...prev,
          [questionId]: currentOptions.filter((opt: string) => opt !== option),
        }
      }
    })
  }

const handleSelectChange = (questionId: string, value: string) => {
    setFormResponses((prev) => ({
      ...prev,
      [questionId]: value,
    }))
  }

const handleFileChange = async (questionId: string, file: File) => {
    if (!file) return

const question = formData?.questions.find((q) => q.id === questionId)
    if (!question || question.type !== "file") return

// Validate file type
    if (question.fileTypes && question.fileTypes.length > 0) {
      if (!question.fileTypes.includes(file.type)) {
        toast({
          variant: "destructive",
          title: "Invalid file type",
          description: `Allowed types: ${question.fileTypes.join(", ")}`,
        })
        return
      }
    }

// Validate file size
    if (question.maxFileSize && file.size > question.maxFileSize) {
      const maxSizeMB = Math.floor(question.maxFileSize / (1024 * 1024))
      toast({
        variant: "destructive",
        title: "File too large",
        description: `Maximum size: ${maxSizeMB}MB`,
      })
      return
    }

// Upload file
    const formData = new FormData()
    formData.append("file", file)
    formData.append("questionId", questionId)

try {
      const response = await fetch(`/api/forms/${params.id}/file-upload`, {
        method: "POST",
        body: formData,
      })

if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || "Failed to upload file")
      }

const data = await response.json()

// Store file info
      setFileUploads((prev) => ({
        ...prev,
        [questionId]: {
          url: data.fileUrl,
          name: data.fileName,
          type: data.fileType,
        },
      }))

// Store file URL in responses
      setFormResponses((prev) => ({
        ...prev,
        [questionId]: data.fileUrl,
      }))

toast({
        title: "File uploaded",
        description: "Your file has been uploaded successfully.",
      })
    } catch (error) {
      console.error("Error uploading file:", error)
      toast({
        variant: "destructive",
        title: "Upload failed",
        description: error instanceof Error ? error.message : "Failed to upload file. Please try again.",
      })
    }
  }

const removeFile = (questionId: string) => {
    // Remove file from uploads
    setFileUploads((prev) => {
      const newUploads = { ...prev }
      delete newUploads[questionId]
      return newUploads
    })

// Remove file URL from responses
    setFormResponses((prev) => {
      const newResponses = { ...prev }
      delete newResponses[questionId]
      return newResponses
    })
  }

const validateForm = () => {
    if (!formData) return false

// Only validate visible questions
    const visibleRequiredQuestions = formData.questions.filter((q) => visibleQuestions.includes(q.id) && q.required)

for (const question of visibleRequiredQuestions) {
      const response = formResponses[question.id]

if (question.type === "checkbox") {
        if (!response || response.length === 0) {
          toast({
            variant: "destructive",
            title: "Required field missing",
            description: `Please answer the question: ${question.title}`,
          })
          return false
        }
      } else {
        if (response === undefined || response === "") {
          toast({
            variant: "destructive",
            title: "Required field missing",
            description: `Please answer the question: ${question.title}`,
          })
          return false
        }
      }

// Validate against custom validation rules
      if (question.validations) {
        for (const validation of question.validations) {
          let isValid = true

switch (validation.type) {
            case "required":
              isValid = response !== undefined && response !== ""
              break
            case "min":
              if (question.type === "number") {
                isValid = Number(response) >= Number(validation.value)
              } else {
                isValid = String(response).length >= Number(validation.value)
              }
              break
            case "max":
              if (question.type === "number") {
                isValid = Number(response) <= Number(validation.value)
              } else {
                isValid = String(response).length <= Number(validation.value)
              }
              break
            case "pattern":
              isValid = new RegExp(validation.value as string).test(String(response))
              break
            case "email":
              isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(response))
              break
            case "url":
              isValid = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/.test(String(response))
              break
          }

if (!isValid) {
            toast({
              variant: "destructive",
              title: "Validation error",
              description: validation.message,
            })
            return false
          }
        }
      }
    }

return true
  }

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

if (!validateForm()) {
      return
    }

setIsSubmitting(true)

try {
      const response = await fetch(`/api/forms/${params.id}/submit`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ responses: formResponses }),
      })

if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || "Failed to submit form")
      }

toast({
        title: "Form submitted",
        description: "Your response has been recorded. Thank you!",
      })
      router.push("/dashboard")
    } catch (error) {
      console.error("Error submitting form:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: error instanceof Error ? error.message : "Failed to submit form. Please try again.",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-background py-8">
        <div className="container max-w-3xl">
          <div className="flex justify-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
          </div>
        </div>
      </div>
    )
  }

if (!formData) {
    return (
      <div className="min-h-screen bg-background py-8">
        <div className="container max-w-3xl">
          <div className="text-center py-12">
            <h2 className="text-2xl font-bold mb-2">Form not found</h2>
            <p className="text-muted-foreground mb-6">
              The form you're looking for doesn't exist or you don't have access to it.
            </p>
            <Button asChild>
              <Link href="/dashboard">Go to Dashboard</Link>
            </Button>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background py-8">
      <div className="container max-w-3xl">
        <div className="mb-6">
          <Button variant="ghost" size="icon" asChild className="mb-2">
            <Link href="/dashboard">
              <ArrowLeft className="h-4 w-4" />
              <span className="sr-only">Back</span>
            </Link>
          </Button>
        </div>

<Card>
          <CardHeader>
            <CardTitle className="text-2xl">{formData.title}</CardTitle>
            <CardDescription>{formData.description}</CardDescription>
          </CardHeader>
          <form onSubmit={handleSubmit}>
            <CardContent className="space-y-6">
              {formData.questions.map((question) => {
                // Skip questions that should be hidden based on conditions
                if (!visibleQuestions.includes(question.id)) {
                  return null
                }

return (
                  <div key={question.id} className="space-y-2">
                    <Label htmlFor={question.id} className="text-base font-medium">
                      {question.title} {question.required && <span className="text-destructive">*</span>}
                    </Label>

{question.description && <p className="text-sm text-muted-foreground">{question.description}</p>}

{question.type === "text" && (
                      <Input
                        id={question.id}
                        value={formResponses[question.id] || ""}
                        onChange={(e) => handleTextChange(question.id, e.target.value)}
                      />
                    )}

{question.type === "textarea" && (
                      <Textarea
                        id={question.id}
                        rows={4}
                        value={formResponses[question.id] || ""}
                        onChange={(e) => handleTextChange(question.id, e.target.value)}
                      />
                    )}

{question.type === "number" && (
                      <Input
                        id={question.id}
                        type="number"
                        value={formResponses[question.id] || ""}
                        onChange={(e) => handleNumberChange(question.id, e.target.value)}
                      />
                    )}

{question.type === "checkbox" && question.options && (
                      <div className="space-y-2">
                        {question.options.map((option) => (
                          <div key={option} className="flex items-center space-x-2">
                            <Checkbox
                              id={`${question.id}-${option}`}
                              checked={(formResponses[question.id] || []).includes(option)}
                              onCheckedChange={(checked) =>
                                handleCheckboxChange(question.id, option, checked as boolean)
                              }
                            />
                            <Label htmlFor={`${question.id}-${option}`} className="font-normal">
                              {option}
                            </Label>
                          </div>
                        ))}
                      </div>
                    )}

{question.type === "select" && question.options && (
                      <Select
                        value={formResponses[question.id] || ""}
                        onValueChange={(value) => handleSelectChange(question.id, value)}
                      >
                        <SelectTrigger id={question.id}>
                          <SelectValue placeholder="Select an option" />
                        </SelectTrigger>
                        <SelectContent>
                          {question.options.map((option) => (
                            <SelectItem key={option} value={option}>
                              {option}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    )}

{question.type === "file" && (
                      <div className="space-y-2">
                        {fileUploads[question.id] ? (
                          <div className="flex items-center gap-2 p-2 border rounded-md">
                            <FileText className="h-5 w-5 text-muted-foreground" />
                            <div className="flex-1 min-w-0">
                              <p className="text-sm font-medium truncate">{fileUploads[question.id].name}</p>
                              <p className="text-xs text-muted-foreground">{fileUploads[question.id].type}</p>
                            </div>
                            <Button type="button" variant="ghost" size="sm" onClick={() => removeFile(question.id)}>
                              <X className="h-4 w-4" />
                              <span className="sr-only">Remove file</span>
                            </Button>
                          </div>
                        ) : (
                          <div
                            className="border-2 border-dashed rounded-lg p-4 text-center cursor-pointer hover:bg-muted/50 transition-colors"
                            onClick={() => fileInputRefs.current[question.id]?.click()}
                          >
                            <input
                              type="file"
                              id={question.id}
                              className="hidden"
                              ref={(el) => (fileInputRefs.current[question.id] = el)}
                              onChange={(e) => {
                                const file = e.target.files?.[0]
                                if (file) handleFileChange(question.id, file)
                              }}
                              accept={question.fileTypes?.join(",")}
                            />
                            <div className="py-4 flex flex-col items-center">
                              <Upload className="h-8 w-8 text-muted-foreground mb-2" />
                              <p className="text-sm font-medium">Click to upload a file</p>
                              {question.fileTypes && (
                                <p className="text-xs text-muted-foreground mt-1">
                                  Allowed: {question.fileTypes.join(", ")}
                                </p>
                              )}
                              {question.maxFileSize && (
                                <p className="text-xs text-muted-foreground">
                                  Max size: {Math.floor(question.maxFileSize / (1024 * 1024))}MB
                                </p>
                              )}
                            </div>
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                )
              })}
            </CardContent>
            <CardFooter>
              <Button type="submit" className="w-full" disabled={isSubmitting}>
                {isSubmitting ? "Submitting..." : "Submit"}
              </Button>
            </CardFooter>
          </form>
        </Card>
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="components/admin/overview.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, Legend, Line, LineChart } from "recharts"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/components/ui/use-toast"

interface AnalyticsData {
  dailyStats: {
    date: string
    users: number
    templates: number
    submissions: number
  }[]
  monthlyStats: {
    month: string
    users: number
    templates: number
    submissions: number
  }[]
  topTemplates: {
    id: string
    title: string
    responses: number
  }[]
  userActivity: {
    hour: number
    count: number
  }[]
}

export function Overview() {
  const [timeRange, setTimeRange] = useState("30days")
  const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const { toast } = useToast()

useEffect(() => {
    fetchAnalyticsData()
  }, [timeRange])

const fetchAnalyticsData = async () => {
    setIsLoading(true)
    try {
      const response = await fetch(`/api/admin/analytics?timeRange=${timeRange}`)
      if (!response.ok) throw new Error("Failed to fetch analytics data")
      const data = await response.json()
      setAnalyticsData(data)
    } catch (error) {
      console.error("Error fetching analytics data:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to load analytics data. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

if (isLoading || !analyticsData) {
    return (
      <div className="flex justify-center items-center h-[350px]">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      </div>
    )
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="text-lg font-medium">Overview</h3>
        <Select value={timeRange} onValueChange={setTimeRange}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Select time range" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="7days">Last 7 days</SelectItem>
            <SelectItem value="30days">Last 30 days</SelectItem>
            <SelectItem value="90days">Last 90 days</SelectItem>
            <SelectItem value="year">Last year</SelectItem>
          </SelectContent>
        </Select>
      </div>

<Tabs defaultValue="activity">
        <TabsList>
          <TabsTrigger value="activity">Activity</TabsTrigger>
          <TabsTrigger value="templates">Templates</TabsTrigger>
          <TabsTrigger value="hourly">Hourly Activity</TabsTrigger>
        </TabsList>

<TabsContent value="activity" className="pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Platform Activity</CardTitle>
              <CardDescription>Overview of users, templates, and form submissions over time</CardDescription>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={350}>
                <BarChart data={timeRange === "year" ? analyticsData.monthlyStats : analyticsData.dailyStats}>
                  <XAxis
                    dataKey={timeRange === "year" ? "month" : "date"}
                    stroke="#888888"
                    fontSize={12}
                    tickLine={false}
                    axisLine={false}
                  />
                  <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="users" name="New Users" fill="#adfa1d" radius={[4, 4, 0, 0]} />
                  <Bar dataKey="templates" name="New Templates" fill="#0ea5e9" radius={[4, 4, 0, 0]} />
                  <Bar dataKey="submissions" name="Form Submissions" fill="#8b5cf6" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="templates" className="pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Top Templates</CardTitle>
              <CardDescription>Templates with the most responses</CardDescription>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={350}>
                <BarChart data={analyticsData.topTemplates} layout="vertical" margin={{ left: 120 }}>
                  <XAxis type="number" />
                  <YAxis
                    type="category"
                    dataKey="title"
                    width={100}
                    tickFormatter={(value) => (value.length > 15 ? `${value.substring(0, 15)}...` : value)}
                  />
                  <Tooltip />
                  <Bar dataKey="responses" name="Responses" fill="#8b5cf6" radius={[0, 4, 4, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="hourly" className="pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Hourly Activity</CardTitle>
              <CardDescription>Form submissions by hour of day</CardDescription>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={350}>
                <LineChart data={analyticsData.userActivity}>
                  <XAxis
                    dataKey="hour"
                    stroke="#888888"
                    fontSize={12}
                    tickLine={false}
                    axisLine={false}
                    tickFormatter={(hour) => `${hour}:00`}
                  />
                  <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
                  <Tooltip formatter={(value) => [`${value} submissions`, "Activity"]} />
                  <Line
                    type="monotone"
                    dataKey="count"
                    name="Submissions"
                    stroke="#8b5cf6"
                    strokeWidth={2}
                    dot={{ r: 4 }}
                  />
                </LineChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescript:file="components/enhanced-results-analysis.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
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 { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Bar,
  BarChart,
  ResponsiveContainer,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  Pie,
  PieChart,
  Cell,
  LineChart,
  Line,
} from "recharts"
import { ArrowUpDown, FileText, FileSpreadsheetIcon as FileCsv, FileJson, FileSpreadsheet } from "lucide-react"
import { useLanguage } from "@/components/language-provider"
import { useToast } from "@/components/ui/use-toast"
import { saveAs } from "file-saver"
import * as XLSX from "xlsx"

interface ResponseData {
  id: string
  submittedBy: {
    id: string
    name: string
    email: string
  }
  submittedAt: string
  responses: Record<string, any>
}

interface Question {
  id: string
  type: string
  title: string
  required: boolean
  options?: string[]
}

interface EnhancedResultsAnalysisProps {
  templateId: string
  questions: Question[]
  responses: ResponseData[]
}

export function EnhancedResultsAnalysis({ templateId, questions, responses }: EnhancedResultsAnalysisProps) {
  const { t } = useLanguage()
  const { toast } = useToast()
  const [sortConfig, setSortConfig] = useState<{ key: string; direction: "ascending" | "descending" } | null>(null)
  const [filteredResponses, setFilteredResponses] = useState<ResponseData[]>(responses)
  const [dateFilter, setDateFilter] = useState<string>("all")
  const [analyticsData, setAnalyticsData] = useState<any>(null)
  const [isLoadingAnalytics, setIsLoadingAnalytics] = useState(false)

useEffect(() => {
    let filtered = [...responses]

// Apply date filter
    if (dateFilter !== "all") {
      const now = new Date()
      const filterDate = new Date()

switch (dateFilter) {
        case "today":
          filterDate.setHours(0, 0, 0, 0)
          filtered = filtered.filter((r) => new Date(r.submittedAt) >= filterDate)
          break
        case "week":
          filterDate.setDate(now.getDate() - 7)
          filtered = filtered.filter((r) => new Date(r.submittedAt) >= filterDate)
          break
        case "month":
          filterDate.setMonth(now.getMonth() - 1)
          filtered = filtered.filter((r) => new Date(r.submittedAt) >= filterDate)
          break
      }
    }

// Apply sorting
    if (sortConfig !== null) {
      filtered.sort((a, b) => {
        if (sortConfig.key === "submittedBy") {
          if (a.submittedBy.name < b.submittedBy.name) {
            return sortConfig.direction === "ascending" ? -1 : 1
          }
          if (a.submittedBy.name > b.submittedBy.name) {
            return sortConfig.direction === "ascending" ? 1 : -1
          }
          return 0
        } else if (sortConfig.key === "submittedAt") {
          return sortConfig.direction === "ascending"
            ? new Date(a.submittedAt).getTime() - new Date(b.submittedAt).getTime()
            : new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime()
        } else {
          // For numeric responses
          const questionId = sortConfig.key
          const aValue = a.responses[questionId] || 0
          const bValue = b.responses[questionId] || 0

return sortConfig.direction === "ascending" ? aValue - bValue : bValue - aValue
        }
      })
    }

setFilteredResponses(filtered)

// Generate analytics data
    generateAnalyticsData(filtered)
  }, [responses, sortConfig, dateFilter])

const generateAnalyticsData = (filteredData: ResponseData[]) => {
    setIsLoadingAnalytics(true)

try {
      // Response trends over time
      const responsesByDay = filteredData.reduce((acc: Record<string, number>, response) => {
        const date = new Date(response.submittedAt).toISOString().split("T")[0]
        acc[date] = (acc[date] || 0) + 1
        return acc
      }, {})

const responseTrend = Object.entries(responsesByDay)
        .map(([date, count]) => ({ date, count }))
        .sort((a, b) => a.date.localeCompare(b.date))

// Calculate completion rate
      const requiredQuestions = questions.filter((q) => q.required).length
      const completedResponses = filteredData.filter((response) => {
        const answeredRequired = questions
          .filter((q) => q.required)
          .every((q) => response.responses[q.id] !== undefined && response.responses[q.id] !== "")
        return answeredRequired
      }).length

const completionRate = filteredData.length > 0 ? (completedResponses / filteredData.length) * 100 : 0

// Question-specific analytics
      const questionAnalytics = questions.map((question) => {
        const answeredCount = filteredData.filter((r) => r.responses[question.id] !== undefined).length
        const answerRate = filteredData.length > 0 ? (answeredCount / filteredData.length) * 100 : 0

const questionData: any = {
          id: question.id,
          title: question.title,
          type: question.type,
          answeredCount,
          answerRate,
        }

// Type-specific analytics
        if (question.type === "number") {
          const values = filteredData
            .map((r) => r.responses[question.id])
            .filter((v) => v !== undefined && v !== null)
            .map((v) => Number(v))

if (values.length > 0) {
            const sum = values.reduce((a, b) => a + b, 0)
            questionData.average = sum / values.length
            questionData.min = Math.min(...values)
            questionData.max = Math.max(...values)

// Create distribution
            const distribution = Array(10).fill(0)
            const range = questionData.max - questionData.min
            const bucketSize = range > 0 ? range / 10 : 1

values.forEach((value) => {
              const bucketIndex = Math.min(Math.floor((value - questionData.min) / bucketSize), 9)
              distribution[bucketIndex]++
            })

questionData.distribution = distribution.map((count, i) => ({
              range: `${(questionData.min + i * bucketSize).toFixed(1)}-${(questionData.min + (i + 1) * bucketSize).toFixed(1)}`,
              count,
            }))
          }
        } else if (question.type === "checkbox" && question.options) {
          const optionCounts = question.options.reduce((acc: Record<string, number>, opt) => {
            acc[opt] = 0
            return acc
          }, {})

filteredData.forEach((response) => {
            const selectedOptions = response.responses[question.id] || []
            if (Array.isArray(selectedOptions)) {
              selectedOptions.forEach((option) => {
                if (optionCounts[option] !== undefined) {
                  optionCounts[option]++
                }
              })
            }
          })

questionData.optionCounts = Object.entries(optionCounts).map(([name, value]) => ({ name, value }))
        }

return questionData
      })

// Response time analysis (mock data for now)
      const responseTimeData = [
        { hour: "00:00-04:00", count: 5 },
        { hour: "04:00-08:00", count: 12 },
        { hour: "08:00-12:00", count: 25 },
        { hour: "12:00-16:00", count: 30 },
        { hour: "16:00-20:00", count: 22 },
        { hour: "20:00-24:00", count: 15 },
      ]

setAnalyticsData({
        responseTrend,
        completionRate,
        questionAnalytics,
        responseTimeData,
      })
    } catch (error) {
      console.error("Error generating analytics:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to generate analytics data",
      })
    } finally {
      setIsLoadingAnalytics(false)
    }
  }

const requestSort = (key: string) => {
    let direction: "ascending" | "descending" = "ascending"
    if (sortConfig && sortConfig.key === key && sortConfig.direction === "ascending") {
      direction = "descending"
    }
    setSortConfig({ key, direction })
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString(undefined, {
      year: "numeric",
      month: "short",
      day: "numeric",
    })
  }

const exportToCSV = () => {
    // Create CSV header
    const headers = ["Respondent", "Date", ...questions.map((q) => q.title)]

// Create CSV rows
    const rows = filteredResponses.map((response) => {
      const row = [response.submittedBy.name, formatDate(response.submittedAt)]

// Add responses for each question
      questions.forEach((question) => {
        const value = response.responses[question.id]
        if (Array.isArray(value)) {
          row.push(value.join(", "))
        } else {
          row.push(value !== undefined ? String(value) : "")
        }
      })

return row
    })

// Combine header and rows
    const csvContent = [headers.join(","), ...rows.map((row) => row.join(","))].join("\n")

// Create and download the CSV file
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
    saveAs(blob, `form_responses_${templateId}.csv`)
  }

const exportToExcel = () => {
    // Prepare data for Excel
    const data = filteredResponses.map((response) => {
      const row: Record<string, any> = {
        Respondent: response.submittedBy.name,
        Email: response.submittedBy.email,
        Date: formatDate(response.submittedAt),
      }

// Add responses for each question
      questions.forEach((question) => {
        const value = response.responses[question.id]
        if (Array.isArray(value)) {
          row[question.title] = value.join(", ")
        } else {
          row[question.title] = value !== undefined ? value : ""
        }
      })

return row
    })

// Create workbook and worksheet
    const worksheet = XLSX.utils.json_to_sheet(data)
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, "Responses")

// Generate Excel file
    const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" })
    const blob = new Blob([excelBuffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" })
    saveAs(blob, `form_responses_${templateId}.xlsx`)
  }

const exportToJSON = () => {
    // Prepare data for JSON
    const data = filteredResponses.map((response) => {
      const row: Record<string, any> = {
        respondent: {
          name: response.submittedBy.name,
          email: response.submittedBy.email,
          id: response.submittedBy.id,
        },
        submittedAt: response.submittedAt,
        responses: {},
      }

// Add responses for each question
      questions.forEach((question) => {
        row.responses[question.title] = response.responses[question.id]
      })

return row
    })

// Create and download JSON file
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" })
    saveAs(blob, `form_responses_${templateId}.json`)
  }

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8", "#82ca9d"]

return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div className="flex items-center gap-2">
          <Select value={dateFilter} onValueChange={setDateFilter}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filter by date" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All time</SelectItem>
              <SelectItem value="today">Today</SelectItem>
              <SelectItem value="week">Last 7 days</SelectItem>
              <SelectItem value="month">Last 30 days</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="flex items-center gap-2">
          <Select defaultValue="csv">
            <SelectTrigger className="w-[120px]">
              <SelectValue placeholder="Export as" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="csv">CSV</SelectItem>
              <SelectItem value="excel">Excel</SelectItem>
              <SelectItem value="json">JSON</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="sm" onClick={exportToCSV}>
            <FileCsv className="mr-2 h-4 w-4" />
            CSV
          </Button>
          <Button variant="outline" size="sm" onClick={exportToExcel}>
            <FileSpreadsheet className="mr-2 h-4 w-4" />
            Excel
          </Button>
          <Button variant="outline" size="sm" onClick={exportToJSON}>
            <FileJson className="mr-2 h-4 w-4" />
            JSON
          </Button>
        </div>
      </div>

<Tabs defaultValue="table">
        <TabsList>
          <TabsTrigger value="table">Table View</TabsTrigger>
          <TabsTrigger value="charts">Charts</TabsTrigger>
          <TabsTrigger value="summary">Summary</TabsTrigger>
          <TabsTrigger value="trends">Trends</TabsTrigger>
        </TabsList>

<TabsContent value="table" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Individual Responses</CardTitle>
              <CardDescription>
                {filteredResponses.length} responses {dateFilter !== "all" && "(filtered)"}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="cursor-pointer" onClick={() => requestSort("submittedBy")}>
                        Respondent
                        {sortConfig?.key === "submittedBy" && <ArrowUpDown className="ml-2 h-4 w-4 inline" />}
                      </TableHead>
                      <TableHead className="cursor-pointer" onClick={() => requestSort("submittedAt")}>
                        Date
                        {sortConfig?.key === "submittedAt" && <ArrowUpDown className="ml-2 h-4 w-4 inline" />}
                      </TableHead>
                      {questions.map((question) => (
                        <TableHead
                          key={question.id}
                          className={question.type === "number" ? "cursor-pointer" : undefined}
                          onClick={() => question.type === "number" && requestSort(question.id)}
                        >
                          {question.title}
                          {sortConfig?.key === question.id && <ArrowUpDown className="ml-2 h-4 w-4 inline" />}
                        </TableHead>
                      ))}
                      <TableHead className="w-[100px]">Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredResponses.map((response) => (
                      <TableRow key={response.id}>
                        <TableCell className="font-medium">{response.submittedBy.name}</TableCell>
                        <TableCell>{formatDate(response.submittedAt)}</TableCell>
                        {questions.map((question) => (
                          <TableCell key={question.id}>
                            {question.type === "checkbox" ? (
                              <div className="flex flex-wrap gap-1">
                                {(response.responses[question.id] || []).map((option: string) => (
                                  <Badge key={option} variant="outline" className="text-xs">
                                    {option}
                                  </Badge>
                                ))}
                              </div>
                            ) : question.type === "file" ? (
                              response.responses[question.id] ? (
                                <a
                                  href={response.responses[question.id]}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  className="flex items-center text-primary hover:underline"
                                >
                                  <FileText className="h-4 w-4 mr-1" />
                                  View File
                                </a>
                              ) : (
                                "-"
                              )
                            ) : (
                              response.responses[question.id] || "-"
                            )}
                          </TableCell>
                        ))}
                        <TableCell>
                          <Button variant="ghost" size="sm">
                            View
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="charts" className="space-y-6">
          {isLoadingAnalytics ? (
            <div className="flex justify-center py-8">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
            </div>
          ) : (
            analyticsData &&
            analyticsData.questionAnalytics.map((data: any) => (
              <Card key={data.id}>
                <CardHeader>
                  <CardTitle>{data.title}</CardTitle>
                  <CardDescription>
                    {data.answeredCount} responses ({data.answerRate.toFixed(0)}% answer rate)
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  {data.type === "number" && data.distribution ? (
                    <div className="space-y-6">
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div className="bg-muted p-4 rounded-lg text-center">
                          <p className="text-sm font-medium text-muted-foreground">Average</p>
                          <p className="text-2xl font-bold">{data.average.toFixed(2)}</p>
                        </div>
                        <div className="bg-muted p-4 rounded-lg text-center">
                          <p className="text-sm font-medium text-muted-foreground">Minimum</p>
                          <p className="text-2xl font-bold">{data.min}</p>
                        </div>
                        <div className="bg-muted p-4 rounded-lg text-center">
                          <p className="text-sm font-medium text-muted-foreground">Maximum</p>
                          <p className="text-2xl font-bold">{data.max}</p>
                        </div>
                      </div>
                      <div className="h-[300px]">
                        <ResponsiveContainer width="100%" height="100%">
                          <BarChart data={data.distribution} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                            <XAxis dataKey="range" />
                            <YAxis />
                            <Tooltip />
                            <Legend />
                            <Bar dataKey="count" name="Responses" fill="#8884d8" />
                          </BarChart>
                        </ResponsiveContainer>
                      </div>
                    </div>
                  ) : data.type === "checkbox" && data.optionCounts ? (
                    <div className="h-[300px]">
                      <ResponsiveContainer width="100%" height="100%">
                        <PieChart>
                          <Pie
                            data={data.optionCounts}
                            cx="50%"
                            cy="50%"
                            labelLine={true}
                            label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                            outerRadius={120}
                            fill="#8884d8"
                            dataKey="value"
                          >
                            {data.optionCounts.map((entry: any, index: number) => (
                              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                            ))}
                          </Pie>
                          <Tooltip formatter={(value) => [`${value} responses`, "Count"]} />
                          <Legend />
                        </PieChart>
                      </ResponsiveContainer>
                    </div>
                  ) : (
                    <div className="py-8 text-center text-muted-foreground">
                      No chart available for this question type
                    </div>
                  )}
                </CardContent>
              </Card>
            ))
          )}
        </TabsContent>

<TabsContent value="summary" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Response Summary</CardTitle>
              <CardDescription>Overview of all responses</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="bg-muted p-4 rounded-lg text-center">
                    <p className="text-sm font-medium text-muted-foreground">Total Responses</p>
                    <p className="text-2xl font-bold">{filteredResponses.length}</p>
                  </div>
                  <div className="bg-muted p-4 rounded-lg text-center">
                    <p className="text-sm font-medium text-muted-foreground">Completion Rate</p>
                    <p className="text-2xl font-bold">
                      {analyticsData ? `${analyticsData.completionRate.toFixed(0)}%` : "0%"}
                    </p>
                  </div>
                  <div className="bg-muted p-4 rounded-lg text-center">
                    <p className="text-sm font-medium text-muted-foreground">Average Completion Time</p>
                    <p className="text-2xl font-bold">2m 34s</p>
                  </div>
                </div>

<div className="space-y-4">
                  <h3 className="text-lg font-medium">Question Completion</h3>
                  <div className="space-y-2">
                    {questions.map((question) => {
                      const answeredCount = filteredResponses.filter(
                        (r) => r.responses[question.id] !== undefined,
                      ).length
                      const percentage =
                        filteredResponses.length > 0 ? (answeredCount / filteredResponses.length) * 100 : 0

return (
                        <div key={question.id} className="space-y-1">
                          <div className="flex justify-between text-sm">
                            <span>{question.title}</span>
                            <span>
                              {percentage.toFixed(0)}% ({answeredCount}/{filteredResponses.length})
                            </span>
                          </div>
                          <div className="h-2 bg-muted rounded-full overflow-hidden">
                            <div className="h-full bg-primary" style={{ width: `${percentage}%` }} />
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="trends" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Response Trends</CardTitle>
              <CardDescription>How responses have changed over time</CardDescription>
            </CardHeader>
            <CardContent>
              {analyticsData && analyticsData.responseTrend && analyticsData.responseTrend.length > 0 ? (
                <div className="h-[300px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={analyticsData.responseTrend}>
                      <XAxis dataKey="date" />
                      <YAxis />
                      <Tooltip />
                      <Legend />
                      <Line type="monotone" dataKey="count" name="Responses" stroke="#8884d8" strokeWidth={2} />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              ) : (
                <div className="py-8 text-center text-muted-foreground">Not enough data to show trends</div>
              )}

<div className="mt-8">
                <h3 className="text-lg font-medium mb-4">Response Time Distribution</h3>
                {analyticsData && analyticsData.responseTimeData ? (
                  <div className="h-[300px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={analyticsData.responseTimeData}>
                        <XAxis dataKey="hour" />
                        <YAxis />
                        <Tooltip />
                        <Legend />
                        <Bar dataKey="count" name="Submissions" fill="#0ea5e9" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                ) : (
                  <div className="py-8 text-center text-muted-foreground">
                    Not enough data to show time distribution
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescript:file="app/verify-email/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle, XCircle } from "lucide-react"
import Link from "next/link"

export default function VerifyEmailPage() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const [status, setStatus] = useState<"loading" | "success" | "error">("loading")
  const [message, setMessage] = useState("")

useEffect(() => {
    const verifyEmail = async () => {
      const token = searchParams.get("token")

if (!token) {
        setStatus("error")
        setMessage("Invalid verification link. Please request a new one.")
        return
      }

try {
        const response = await fetch(`/api/auth/verify-email?token=${token}`)
        const data = await response.json()

if (response.ok) {
          setStatus("success")
          setMessage(data.message || "Your email has been verified successfully.")
        } else {
          setStatus("error")
          setMessage(data.error || "Failed to verify email. The link may have expired.")
        }
      } catch (error) {
        setStatus("error")
        setMessage("An error occurred while verifying your email. Please try again.")
      }
    }

verifyEmail()
  }, [searchParams])

{status === "success" && (
            <div className="flex flex-col items-center space-y-4">
              <CheckCircle className="h-16 w-16 text-green-500" />
              <p className="text-center">{message}</p>
            </div>
          )}

{status === "error" && (
            <div className="flex flex-col items-center space-y-4">
              <XCircle className="h-16 w-16 text-red-500" />
              <p className="text-center">{message}</p>
            </div>
          )}
        </CardContent>
        <CardFooter className="flex justify-center">
          {status === "success" && (
            <Button asChild>
              <Link href="/login">Continue to Login</Link>
            </Button>
          )}

{status === "error" && (
            <Button asChild>
              <Link href="/login">Back to Login</Link>
            </Button>
          )}
        </CardFooter>
      </Card>
    </div>
  )
}

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

[V0_FILE]typescript:file="app/reset-password/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/components/ui/use-toast"
import Link from "next/link"

export default function ResetPasswordPage() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const { toast } = useToast()
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)

const token = searchParams.get("token")

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

if (!token) {
      toast({
        variant: "destructive",
        title: "Invalid reset link",
        description: "The password reset link is invalid or has expired. Please request a new one.",
      })
      return
    }

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

if (password.length < 8) {
      toast({
        variant: "destructive",
        title: "Password too short",
        description: "Password must be at least 8 characters long.",
      })
      return
    }

setIsSubmitting(true)

try {
      const response = await fetch("/api/auth/reset-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token, password }),
      })

const data = await response.json()

if (response.ok) {
        toast({
          title: "Password reset successful",
          description: "Your password has been reset. You can now log in with your new password.",
        })
        router.push("/login")
      } else {
        toast({
          variant: "destructive",
          title: "Error",
          description: data.error || "Failed to reset password. The link may have expired.",
        })
      }
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "An error occurred while resetting your password. Please try again.",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4">
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-1">
          <CardTitle className="text-2xl font-bold">Reset Password</CardTitle>
          <CardDescription>Enter your new password below</CardDescription>
        </CardHeader>
        <form onSubmit={handleSubmit}>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="password">New Password</Label>
              <Input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="confirm-password">Confirm New Password</Label>
              <Input
                id="confirm-password"
                type="password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                required
              />
            </div>
          </CardContent>
          <CardFooter className="flex flex-col space-y-4">
            <Button type="submit" className="w-full" disabled={isSubmitting}>
              {isSubmitting ? "Resetting Password..." : "Reset Password"}
            </Button>
            <p className="text-center text-sm text-muted-foreground">
              Remember your password?{" "}
              <Link href="/login" className="text-primary hover:underline">
                Back to Login
              </Link>
            </p>
          </CardFooter>
        </form>
      </Card>
    </div>
  )
}

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

[V0_FILE]typescript:file="app/forgot-password/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/components/ui/use-toast"
import Link from "next/link"
import { ArrowLeft, Mail } from "lucide-react"

export default function ForgotPasswordPage() {
  const { toast } = useToast()
  const [email, setEmail] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

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

if (!email) {
      toast({
        variant: "destructive",
        title: "Email required",
        description: "Please enter your email address.",
      })
      return
    }

setIsSubmitting(true)

try {
      const response = await fetch("/api/auth/forgot-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      })

if (response.ok) {
        setIsSubmitted(true)
      } else {
        const data = await response.json()
        throw new Error(data.error || "Failed to send password reset email")
      }
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Error",
        description: error instanceof Error ? error.message : "An error occurred. Please try again.",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4">
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-1">
          <div className="flex items-center">
            <Link href="/login" className="mr-2">
              <Button variant="ghost" size="icon">
                <ArrowLeft className="h-4 w-4" />
              </Button>
            </Link>
            <CardTitle className="text-2xl font-bold">Forgot Password</CardTitle>
          </div>
          <CardDescription>
            {isSubmitted
              ? "Check your email for a password reset link"
              : "Enter your email address and we'll send you a link to reset your password"}
          </CardDescription>
        </CardHeader>

{isSubmitted ? (
          <CardContent className="flex flex-col items-center justify-center py-8 space-y-4">
            <div className="bg-primary/10 p-3 rounded-full">
              <Mail className="h-8 w-8 text-primary" />
            </div>
            <div className="text-center space-y-2">
              <h3 className="font-medium">Check your email</h3>
              <p className="text-sm text-muted-foreground">
                We've sent a password reset link to <span className="font-medium">{email}</span>
              </p>
              <p className="text-xs text-muted-foreground">
                If you don't see it, check your spam folder or try another email address.
              </p>
            </div>
          </CardContent>
        ) : (
          <form onSubmit={handleSubmit}>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  type="email"
                  placeholder="name@example.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
              </div>
            </CardContent>
            <CardFooter className="flex flex-col space-y-4">
              <Button type="submit" className="w-full" disabled={isSubmitting}>
                {isSubmitting ? "Sending..." : "Send Reset Link"}
              </Button>
              <p className="text-center text-sm text-muted-foreground">
                Remember your password?{" "}
                <Link href="/login" className="text-primary hover:underline">
                  Back to Login
                </Link>
              </p>
            </CardFooter>
          </form>
        )}
      </Card>
    </div>
  )
}

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

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Search, Plus, MoreHorizontal, FileText, Edit, Trash2, Eye } from "lucide-react"
import { Input } from "@/components/ui/input"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { AppHeader } from "@/components/app-header"
import { useToast } from "@/components/ui/use-toast"
import { useSession } from "next-auth/react"
import { Skeleton } from "@/components/ui/skeleton"

interface Template {
  _id: string
  title: string
  description?: string
  tags: string[]
  responses: number
  createdAt: string
  imageUrl?: string
}

interface Response {
  _id: string
  templateId: string
  templateTitle: string
  submittedAt: string
  owner: string
}

export default function DashboardPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [myTemplates, setMyTemplates] = useState<Template[]>([])
  const [myResponses, setMyResponses] = useState<Response[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [activeTab, setActiveTab] = useState("templates")
  const { data: session } = useSession()
  const { toast } = useToast()

useEffect(() => {
    if (session?.user?.id) {
      fetchUserData()
    }
  }, [session])

const fetchUserData = async () => {
    setIsLoading(true)
    try {
      // Fetch user's templates
      const templatesRes = await fetch(`/api/users/templates`)
      if (!templatesRes.ok) throw new Error("Failed to fetch templates")
      const templatesData = await templatesRes.json()
      setMyTemplates(templatesData)

// Fetch user's responses
      const responsesRes = await fetch(`/api/users/responses`)
      if (!responsesRes.ok) throw new Error("Failed to fetch responses")
      const responsesData = await responsesRes.json()
      setMyResponses(responsesData)
    } catch (error) {
      console.error("Error fetching user data:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to load your data. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

const filteredTemplates = myTemplates.filter(
    (template) =>
      template.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      template.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase())) ||
      (template.description && template.description.toLowerCase().includes(searchQuery.toLowerCase())),
  )

const filteredResponses = myResponses.filter((response) =>
    response.templateTitle.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString(undefined, {
      year: "numeric",
      month: "short",
      day: "numeric",
    })
  }

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

try {
      const response = await fetch(`/api/templates/${templateId}`, {
        method: "DELETE",
      })

if (!response.ok) throw new Error("Failed to delete template")

setMyTemplates(myTemplates.filter((template) => template._id !== templateId))

toast({
        title: "Template deleted",
        description: "Your template has been deleted successfully.",
      })
    } catch (error) {
      console.error("Error deleting template:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to delete template. Please try again.",
      })
    }
  }

return (
    <div className="min-h-screen bg-background">
      <AppHeader />

<main className="container py-8">
        <div className="flex items-center justify-between mb-8">
          <h1 className="text-3xl font-bold">Dashboard</h1>
          <Link href="/templates/create">
            <Button>
              <Plus className="mr-2 h-4 w-4" /> Create Template
            </Button>
          </Link>
        </div>

<div className="mb-6">
          <div className="relative">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              type="search"
              placeholder="Search your templates and responses..."
              className="pl-8"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
        </div>

<Tabs defaultValue="templates" value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-6">
            <TabsTrigger value="templates">My Templates</TabsTrigger>
            <TabsTrigger value="responses">My Responses</TabsTrigger>
          </TabsList>

<TabsContent value="templates">
            {isLoading ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {[1, 2, 3, 4, 5, 6].map((i) => (
                  <Card key={i} className="overflow-hidden">
                    <div className="h-40 bg-muted">
                      <Skeleton className="h-full w-full" />
                    </div>
                    <CardHeader className="pb-3">
                      <Skeleton className="h-6 w-3/4 mb-2" />
                      <Skeleton className="h-4 w-full" />
                    </CardHeader>
                    <CardContent>
                      <div className="flex gap-2">
                        <Skeleton className="h-5 w-16" />
                        <Skeleton className="h-5 w-16" />
                      </div>
                    </CardContent>
                    <CardFooter className="flex justify-between">
                      <Skeleton className="h-9 w-20" />
                      <Skeleton className="h-9 w-20" />
                    </CardFooter>
                  </Card>
                ))}
              </div>
            ) : filteredTemplates.length > 0 ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredTemplates.map((template) => (
                  <Card key={template._id} className="overflow-hidden">
                    {template.imageUrl && (
                      <div className="relative h-40 w-full">
                        <Image
                          src={template.imageUrl || "/placeholder.svg"}
                          alt={template.title}
                          fill
                          className="object-cover"
                        />
                      </div>
                    )}
                    <CardHeader className="pb-3">
                      <div className="flex justify-between items-start">
                        <CardTitle className="line-clamp-1">{template.title}</CardTitle>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreHorizontal className="h-4 w-4" />
                              <span className="sr-only">Actions</span>
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem asChild>
                              <Link href={`/templates/${template._id}/view`}>
                                <Eye className="mr-2 h-4 w-4" /> View
                              </Link>
                            </DropdownMenuItem>
                            <DropdownMenuItem asChild>
                              <Link href={`/templates/${template._id}/edit`}>
                                <Edit className="mr-2 h-4 w-4" /> Edit
                              </Link>
                            </DropdownMenuItem>
                            <DropdownMenuItem asChild>
                              <Link href={`/forms/${template._id}/results`}>
                                <FileText className="mr-2 h-4 w-4" /> View Responses
                              </Link>
                            </DropdownMenuItem>
                            <DropdownMenuItem
                              className="text-destructive focus:text-destructive"
                              onClick={() => handleDeleteTemplate(template._id)}
                            >
                              <Trash2 className="mr-2 h-4 w-4" /> Delete
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                      <CardDescription className="line-clamp-2">
                        {template.description || "No description provided"}
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="flex flex-wrap gap-2">
                        {template.tags.slice(0, 3).map((tag) => (
                          <Badge key={tag} variant="secondary">
                            {tag}
                          </Badge>
                        ))}
                        {template.tags.length > 3 && <Badge variant="outline">+{template.tags.length - 3}</Badge>}
                      </div>
                      <p className="text-sm text-muted-foreground mt-2">
                        Created on {formatDate(template.createdAt)} • {template.responses} responses
                      </p>
                    </CardContent>
                    <CardFooter className="flex justify-between">
                      <Button variant="outline" asChild>
                        <Link href={`/templates/${template._id}/view`}>View</Link>
                      </Button>
                      <Button asChild>
                        <Link href={`/forms/${template._id}/fill`}>Fill Form</Link>
                      </Button>
                    </CardFooter>
                  </Card>
                ))}
              </div>
            ) : (
              <div className="text-center py-12 border border-dashed rounded-lg">
                <h3 className="text-lg font-medium mb-2">No templates found</h3>
                <p className="text-muted-foreground mb-6">
                  {searchQuery ? "Try a different search term" : "Create your first template to get started"}
                </p>
                {!searchQuery && (
                  <Link href="/templates/create">
                    <Button>
                      <Plus className="mr-2 h-4 w-4" /> Create Template
                    </Button>
                  </Link>
                )}
              </div>
            )}
          </TabsContent>

<TabsContent value="responses">
            {isLoading ? (
              <div className="space-y-4">
                {[1, 2, 3, 4].map((i) => (
                  <Card key={i}>
                    <CardHeader className="pb-3">
                      <div className="flex justify-between items-start">
                        <div>
                          <Skeleton className="h-6 w-48 mb-2" />
                          <Skeleton className="h-4 w-64" />
                        </div>
                        <Skeleton className="h-9 w-28" />
                      </div>
                    </CardHeader>
                  </Card>
                ))}
              </div>
            ) : filteredResponses.length > 0 ? (
              <div className="space-y-4">
                {filteredResponses.map((response) => (
                  <Card key={response._id}>
                    <CardHeader className="pb-3">
                      <div className="flex justify-between items-start">
                        <div>
                          <CardTitle>{response.templateTitle}</CardTitle>
                          <CardDescription>
                            Submitted on {formatDate(response.submittedAt)} • Created by {response.owner}
                          </CardDescription>
                        </div>
                        <Button variant="outline" size="sm" asChild>
                          <Link href={`/forms/${response.templateId}/results`}>View Response</Link>
                        </Button>
                      </div>
                    </CardHeader>
                  </Card>
                ))}
              </div>
            ) : (
              <div className="text-center py-12 border border-dashed rounded-lg">
                <h3 className="text-lg font-medium mb-2">No responses found</h3>
                <p className="text-muted-foreground">
                  {searchQuery ? "Try a different search term" : "You haven't submitted any forms yet"}
                </p>
                {!searchQuery && (
                  <Link href="/search">
                    <Button className="mt-4">
                      <Search className="mr-2 h-4 w-4" /> Browse Forms
                    </Button>
                  </Link>
                )}
              </div>
            )}
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}

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

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

import type React from "react"

import { SessionProvider as NextAuthSessionProvider } from "next-auth/react"
import { useEffect } from "react"
import { useRouter } from "next/navigation"

export function SessionProvider({
  children,
  refreshInterval = 5 * 60, // 5 minutes in seconds
}: {
  children: React.ReactNode
  refreshInterval?: number
}) {
  const router = useRouter()

useEffect(() => {
    // Set up session refresh interval
    const intervalId = setInterval(() => {
      // This will refresh the session data
      router.refresh()
    }, refreshInterval * 1000)

return () => clearInterval(intervalId)
  }, [refreshInterval, router])

return <NextAuthSessionProvider refetchInterval={refreshInterval}>{children}</NextAuthSessionProvider>
}

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

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

export const metadata = {
  title: "FormBuilder - Create and Share Forms",
  description: "A platform to create, share, and analyze form responses",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <SessionProvider>
          <AuthProvider>
            <LanguageProvider>
              <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
                {children}
                <Toaster />
              </ThemeProvider>
            </LanguageProvider>
          </AuthProvider>
        </SessionProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescript:file="app/api/init/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { initializeDatabase } from "@/lib/init-db"

export async function GET(request: NextRequest) {
  try {
    // Check for secret key to prevent unauthorized initialization
    const authHeader = request.headers.get("authorization")

if (!authHeader || authHeader !== `Bearer ${process.env.INIT_SECRET}`) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const success = await initializeDatabase()

if (success) {
      return NextResponse.json({ message: "Database initialized successfully" })
    } else {
      return NextResponse.json({ error: "Failed to initialize database" }, { status: 500 })
    }
  } catch (error) {
    console.error("Error in init route:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="components/form-submission-view.tsx" isMerged="true"
"use client"

interface FormSubmissionViewProps {
  formId: string
  responseId: string
}

export function FormSubmissionView({ formId, responseId }: FormSubmissionViewProps) {
  const router = useRouter()
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(true)
  const [formData, setFormData] = useState<any>(null)
  const [responseData, setResponseData] = useState<any>(null)

useEffect(() => {
    fetchData()
  }, [formId, responseId])

const fetchData = async () => {
    setIsLoading(true)
    try {
      // Fetch form template
      const templateRes = await fetch(`/api/templates/${formId}`)
      if (!templateRes.ok) throw new Error("Failed to fetch template")
      const templateData = await templateRes.json()
      setFormData(templateData)

// Fetch response data
      const responseRes = await fetch(`/api/forms/${formId}/responses/${responseId}`)
      if (!responseRes.ok) throw new Error("Failed to fetch response")
      const responseData = await responseRes.json()
      setResponseData(responseData)
    } catch (error) {
      console.error("Error fetching data:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to load submission data. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString(undefined, {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

if (isLoading) {
    return (
      <div className="flex justify-center py-12">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      </div>
    )
  }

if (!formData || !responseData) {
    return (
      <div className="text-center py-12">
        <h2 className="text-2xl font-bold mb-2">Submission not found</h2>
        <p className="text-muted-foreground mb-6">
          The submission you're looking for doesn't exist or you don't have access to it.
        </p>
        <Button asChild>
          <Link href="/dashboard">Go to Dashboard</Link>
        </Button>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="icon" asChild>
            <Link href={`/forms/${formId}/results`}>
              <ArrowLeft className="h-4 w-4" />
              <span className="sr-only">Back</span>
            </Link>
          </Button>
          <h1 className="text-2xl font-bold">{formData.title}</h1>
        </div>
        <Button variant="outline" size="sm">
          <Download className="mr-2 h-4 w-4" />
          Export
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Submission Details</CardTitle>
          <CardDescription>
            Submitted by {responseData.submittedBy.name} on {formatDate(responseData.submittedAt)}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {formData.questions.map((question: any) => (
            <div key={question.id} className="space-y-1">
              <h3 className="font-medium">{question.title}</h3>
              <div className="bg-muted p-3 rounded-md">
                {question.type === "checkbox" ? (
                  <div className="flex flex-wrap gap-1">
                    {(responseData.responses[question.id] || []).length > 0 ? (
                      (responseData.responses[question.id] || []).map((option: string) => (
                        <Badge key={option} variant="outline">
                          {option}
                        </Badge>
                      ))
                    ) : (
                      <span className="text-muted-foreground">No options selected</span>
                    )}
                  </div>
                ) : question.type === "file" ? (
                  responseData.responses[question.id] ? (
                    <a
                      href={responseData.responses[question.id]}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center text-primary hover:underline"
                    >
                      <FileText className="h-4 w-4 mr-2" />
                      View Uploaded File
                    </a>
                  ) : (
                    <span className="text-muted-foreground">No file uploaded</span>
                  )
                ) : responseData.responses[question.id] ? (
                  <p>{responseData.responses[question.id]}</p>
                ) : (
                  <span className="text-muted-foreground">No response provided</span>
                )}
              </div>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescript:file="app/api/forms/[id]/responses/[responseId]/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"
import { getTemplateById, getUserById } from "@/lib/db-service"

export async function GET(request: NextRequest, { params }: { params: { id: string; responseId: string } }) {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const formId = params.id
    const responseId = params.responseId

// Get the template to check permissions
    const template = await getTemplateById(formId)

if (!template) {
      return NextResponse.json({ error: "Template not found" }, { status: 404 })
    }

// Check if user has permission to view responses
    const isCreator = template.createdBy.toString() === session.user.id
    const isAdmin = session.user.role === "admin"

if (!isCreator && !isAdmin) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 403 })
    }

// Get the specific response
    const client = await clientPromise
    const db = client.db()

const response = await db.collection("responses").findOne({
      _id: new ObjectId(responseId),
      templateId: formId,
    })

if (!response) {
      return NextResponse.json({ error: "Response not found" }, { status: 404 })
    }

// Get user details for the response
    const user = await getUserById(response.userId.toString())

const responseWithUser = {
      ...response,
      submittedBy: {
        id: user?._id,
        name: user?.name || "Anonymous User",
        email: user?.email,
        image: user?.image,
      },
    }

return NextResponse.json(responseWithUser)
  } catch (error) {
    console.error(`Error fetching response ${params.responseId} for form ${params.id}:`, error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/forms/[id]/responses/[responseId]/page.tsx" isMerged="true"
import { FormSubmissionView } from "@/components/form-submission-view"
import { AppHeader } from "@/components/app-header"

export default function FormResponsePage({ params }: { params: { id: string; responseId: string } }) {
  return (
    <div className="min-h-screen bg-background">
      <AppHeader />
      <main className="container py-8">
        <FormSubmissionView formId={params.id} responseId={params.responseId} />
      </main>
    </div>
  )
}

[V0_FILE]typescript:file="app/admin/backups/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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { useToast } from "@/components/ui/use-toast"
import { Download, Upload, RefreshCw, AlertTriangle } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface Backup {
  filename: string
  path: string
  size: number
  createdAt: string
}

export default function BackupsPage() {
  const { toast } = useToast()
  const [backups, setBackups] = useState<Backup[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isCreating, setIsCreating] = useState(false)
  const [selectedBackup, setSelectedBackup] = useState<Backup | null>(null)

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

const fetchBackups = async () => {
    setIsLoading(true)
    try {
      const response = await fetch("/api/admin/backup")
      if (!response.ok) throw new Error("Failed to fetch backups")
      const data = await response.json()
      setBackups(data.backups)
    } catch (error) {
      console.error("Error fetching backups:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to load backups. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

const createBackup = async () => {
    setIsCreating(true)
    try {
      const response = await fetch("/api/admin/backup", {
        method: "POST",
      })
      if (!response.ok) throw new Error("Failed to create backup")

toast({
        title: "Backup created",
        description: "Database backup created successfully.",
      })

// Refresh the list of backups
      fetchBackups()
    } catch (error) {
      console.error("Error creating backup:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to create backup. Please try again.",
      })
    } finally {
      setIsCreating(false)
    }
  }

const restoreBackup = async (backup: Backup) => {
    try {
      const response = await fetch("/api/admin/backup", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ backupPath: backup.path }),
      })

if (!response.ok) throw new Error("Failed to restore backup")

toast({
        title: "Backup restored",
        description: "Database has been restored from backup.",
      })
    } catch (error) {
      console.error("Error restoring backup:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to restore backup. Please try again.",
      })
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleString()
  }

const formatSize = (bytes: number) => {
    const units = ["B", "KB", "MB", "GB"]
    let size = bytes
    let unitIndex = 0

while (size >= 1024 && unitIndex < units.length - 1) {
      size /= 1024
      unitIndex++
    }

return `${size.toFixed(2)} ${units[unitIndex]}`
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Database Backups</h1>
          <p className="text-muted-foreground">Manage database backups and restores</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={fetchBackups} disabled={isLoading}>
            <RefreshCw className="mr-2 h-4 w-4" />
            Refresh
          </Button>
          <Button onClick={createBackup} disabled={isCreating}>
            {isCreating ? (
              <>
                <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                Creating...
              </>
            ) : (
              <>
                <Download className="mr-2 h-4 w-4" />
                Create Backup
              </>
            )}
          </Button>
        </div>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Available Backups</CardTitle>
          <CardDescription>List of database backups that can be restored</CardDescription>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="flex justify-center py-8">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
            </div>
          ) : backups.length > 0 ? (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Filename</TableHead>
                  <TableHead>Created At</TableHead>
                  <TableHead>Size</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {backups.map((backup) => (
                  <TableRow key={backup.path}>
                    <TableCell className="font-medium">{backup.filename}</TableCell>
                    <TableCell>{formatDate(backup.createdAt)}</TableCell>
                    <TableCell>{formatSize(backup.size)}</TableCell>
                    <TableCell className="text-right">
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="outline" size="sm" onClick={() => setSelectedBackup(backup)}>
                            <Upload className="mr-2 h-4 w-4" />
                            Restore
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                            <AlertDialogDescription>
                              This will restore the database to the state it was in when this backup was created. All
                              current data will be replaced. This action cannot be undone.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => selectedBackup && restoreBackup(selectedBackup)}
                              className="bg-destructive text-destructive-foreground"
                            >
                              <AlertTriangle className="mr-2 h-4 w-4" />
                              Yes, Restore Backup
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          ) : (
            <div className="text-center py-8 text-muted-foreground">
              <p>No backups found. Create your first backup to get started.</p>
            </div>
          )}
        </CardContent>
        <CardFooter>
          <p className="text-sm text-muted-foreground">
            Backups are stored in the server's file system. Regular backups are recommended to prevent data loss.
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]markdown:file="README.md" isMerged="true"
# FormBuilder Application

A comprehensive form building application with role-based authentication, admin and user dashboards, and Google sign-in functionality.

## Features

### User Authentication & Roles
- Registration/Login via email/password and Google OAuth
- Email verification for new accounts
- Password reset functionality
- Role-based access (Regular Users and Admins)
- Non-authenticated users can only view public templates

### Template Management
- Create templates with title, description (with Markdown support)
- Topics and tags with autocomplete
- Optional image upload via Cloudinary
- Public/Restricted access settings
- Multiple question types (text, textarea, number, checkbox, select, file upload)
- Drag-and-drop reordering of questions
- Conditional questions based on previous answers
- Advanced validation rules

### Form Filling & Responses
- Form submission with validation
- Auto-filled user and submission date
- File upload support with type and size validation
- Comprehensive results analysis with charts and statistics
- Sortable tables of responses
- Export to CSV, Excel, and JSON

### Admin Privileges
- Edit any template/form
- User management (view/block/delete/promote)
- Database backup and restore
- Real-time analytics dashboard

### UI/UX Features
- Responsive design for mobile and desktop
- Light and dark themes
- Bilingual support (English and Spanish)
- Full-text search
- Comments and likes functionality

## Getting Started

### Prerequisites

- Node.js 16.x or later
- MongoDB Atlas account or local MongoDB instance
- Google Cloud Platform account (for Google OAuth)
- Cloudinary account (for image uploads)
- SMTP server (for email verification and password reset)

### Setup

1. Clone the repository:

```bash
git clone https://github.com/yourusername/formbuilder.git
cd formbuilder

[V0_FILE]typescript:file="lib/db-service.ts" isMerged="true"
import { ObjectId } from "mongodb"
import clientPromise from "@/lib/mongodb"
import type { Template } from "@/models/template"
import type { Response } from "@/models/response"
import type { User } from "@/models/user"
import type { Comment } from "@/models/comment"

// Fix ObjectId conversion issues
const toObjectId = (id: string | ObjectId): ObjectId => {
  if (typeof id === "string") {
    return new ObjectId(id)
  }
  return id
}

// Template Operations
export async function getTemplates(query: Record<string, any> = {}): Promise<Template[]> {
  try {
    const client = await clientPromise
    const db = client.db()

// Convert string IDs to ObjectIds in query if needed
    if (query.createdBy && typeof query.createdBy === "string") {
      query.createdBy = toObjectId(query.createdBy)
    }

if (query._id && typeof query._id === "string") {
      query._id = toObjectId(query._id)
    }

const templates = await db.collection("templates").find(query).sort({ createdAt: -1 }).toArray()

return templates as Template[]
  } catch (error) {
    console.error("Error fetching templates:", error)
    return []
  }
}

export async function createTemplate(
  data: Omit<Template, "_id" | "createdAt" | "updatedAt" | "responses" | "likes" | "comments" | "version">,
): Promise<Template | null> {
  try {
    const client = await clientPromise
    const db = client.db()

// Ensure createdBy is an ObjectId
    if (typeof data.createdBy === "string") {
      data.createdBy = toObjectId(data.createdBy)
    }

const template = {
      ...data,
      createdAt: new Date(),
      updatedAt: new Date(),
      responses: 0,
      likes: 0,
      comments: 0,
      version: 1,
    }

const result = await db.collection("templates").insertOne(template)

return {
      _id: result.insertedId,
      ...template,
    } as Template
  } catch (error) {
    console.error("Error creating template:", error)
    return null
  }
}

export async function getTemplateById(id: string): Promise<Template | null> {
  try {
    const client = await clientPromise
    const db = client.db()

const template = await db.collection("templates").findOne({ _id: toObjectId(id) })

return template as Template | null
  } catch (error) {
    console.error(`Error fetching template ${id}:`, error)
    return null
  }
}

export async function updateTemplate(id: string, data: Partial<Template>): Promise<Template | null> {
  try {
    const client = await clientPromise
    const db = client.db()

const updateData = {
      ...data,
      updatedAt: new Date(),
      version: (data.version || 0) + 1,
    }

// Remove _id from update data if present
    if (updateData._id) {
      delete updateData._id
    }

const result = await db
      .collection("templates")
      .findOneAndUpdate({ _id: toObjectId(id) }, { $set: updateData }, { returnDocument: "after" })

return result as unknown as Template | null
  } catch (error) {
    console.error(`Error updating template ${id}:`, error)
    return null
  }
}

export async function deleteTemplate(id: string): Promise<boolean> {
  try {
    const client = await clientPromise
    const db = client.db()

// Delete the template
    const result = await db.collection("templates").deleteOne({ _id: toObjectId(id) })

// Also delete associated responses, comments, and likes
    if (result.deletedCount > 0) {
      await db.collection("responses").deleteMany({ templateId: id })
      await db.collection("comments").deleteMany({ templateId: id })
      await db.collection("likes").deleteMany({ formId: id })
    }

return result.deletedCount > 0
  } catch (error) {
    console.error(`Error deleting template ${id}:`, error)
    return false
  }
}

// Response Operations
export async function getResponses(query: Record<string, any> = {}): Promise<Response[]> {
  try {
    const client = await clientPromise
    const db = client.db()

// Convert string IDs to ObjectIds if needed
    if (query.templateId && typeof query.templateId === "string") {
      query.templateId = toObjectId(query.templateId)
    }

if (query.userId && typeof query.userId === "string") {
      query.userId = toObjectId(query.userId)
    }

const responses = await db.collection("responses").find(query).sort({ submittedAt: -1 }).toArray()

return responses as Response[]
  } catch (error) {
    console.error("Error fetching responses:", error)
    return []
  }
}

export async function createResponse(data: Omit<Response, "_id" | "submittedAt">): Promise<Response | null> {
  try {
    const client = await clientPromise
    const db = client.db()

// Ensure userId is an ObjectId
    if (typeof data.userId === "string") {
      data.userId = toObjectId(data.userId)
    }

// Ensure templateId is an ObjectId if it's not already
    if (typeof data.templateId === "string") {
      data.templateId = toObjectId(data.templateId)
    }

const response = {
      ...data,
      submittedAt: new Date(),
    }

const result = await db.collection("responses").insertOne(response)

// Increment the responses count on the template
    await db
      .collection("templates")
      .updateOne({ _id: toObjectId(data.templateId.toString()) }, { $inc: { responses: 1 } })

return {
      _id: result.insertedId,
      ...response,
    } as Response
  } catch (error) {
    console.error("Error creating response:", error)
    return null
  }
}

// User Operations
export async function getUserById(id: string): Promise<User | null> {
  try {
    const client = await clientPromise
    const db = client.db()

const user = await db.collection("users").findOne({ _id: toObjectId(id) })

return user as User | null
  } catch (error) {
    console.error(`Error fetching user ${id}:`, error)
    return null
  }
}

export async function getUserByEmail(email: string): Promise<User | null> {
  try {
    const client = await clientPromise
    const db = client.db()

const user = await db.collection("users").findOne({ email })

return user as User | null
  } catch (error) {
    console.error(`Error fetching user with email ${email}:`, error)
    return null
  }
}

export async function createUser(userData: Omit<User, "_id">): Promise<User | null> {
  try {
    const client = await clientPromise
    const db = client.db()

const result = await db.collection("users").insertOne(userData)

return {
      _id: result.insertedId,
      ...userData,
    } as User
  } catch (error) {
    console.error("Error creating user:", error)
    return null
  }
}

export async function updateUser(id: string, data: Partial<User>): Promise<User | null> {
  try {
    const client = await clientPromise
    const db = client.db()

const updateData = {
      ...data,
      updatedAt: new Date(),
    }

// Remove _id from update data if present
    if (updateData._id) {
      delete updateData._id
    }

const result = await db
      .collection("users")
      .findOneAndUpdate({ _id: toObjectId(id) }, { $set: updateData }, { returnDocument: "after" })

return result as unknown as User | null
  } catch (error) {
    console.error(`Error updating user ${id}:`, error)
    return null
  }
}

// Comment Operations
export async function getCommentsByFormId(formId: string): Promise<Comment[]> {
  try {
    const client = await clientPromise
    const db = client.db()

const comments = await db.collection("comments").find({ templateId: formId }).sort({ createdAt: -1 }).toArray()

return comments as Comment[]
  } catch (error) {
    console.error(`Error fetching comments for form ${formId}:`, error)
    return []
  }
}

export async function createComment(data: Omit<Comment, "_id">): Promise<Comment | null> {
  try {
    const client = await clientPromise
    const db = client.db()

// Ensure userId is an ObjectId
    if (typeof data.userId === "string") {
      data.userId = toObjectId(data.userId)
    }

const result = await db.collection("comments").insertOne(data)

// Update comment count on the template
    await db
      .collection("templates")
      .updateOne({ _id: toObjectId(data.templateId.toString()) }, { $inc: { comments: 1 } })

return {
      _id: result.insertedId,
      ...data,
    } as Comment
  } catch (error) {
    console.error("Error creating comment:", error)
    return null
  }
}

// Like Operations
export async function getLikesByFormId(formId: string): Promise<number> {
  try {
    const client = await clientPromise
    const db = client.db()

const count = await db.collection("likes").countDocuments({ formId })

return count
  } catch (error) {
    console.error(`Error fetching likes for form ${formId}:`, error)
    return 0
  }
}

export async function hasUserLikedForm(formId: string, userId: string): Promise<boolean> {
  try {
    const client = await clientPromise
    const db = client.db()

const like = await db.collection("likes").findOne({ formId, userId: toObjectId(userId) })

return !!like
  } catch (error) {
    console.error(`Error checking if user ${userId} liked form ${formId}:`, error)
    return false
  }
}

export async function toggleLike(formId: string, userId: string): Promise<{ liked: boolean; count: number }> {
  try {
    const client = await clientPromise
    const db = client.db()

const existingLike = await db.collection("likes").findOne({
      formId,
      userId: toObjectId(userId),
    })

if (existingLike) {
      // Unlike
      await db.collection("likes").deleteOne({ _id: existingLike._id })
      await db.collection("templates").updateOne({ _id: toObjectId(formId) }, { $inc: { likes: -1 } })

return {
        liked: false,
        count: await db.collection("likes").countDocuments({ formId }),
      }
    } else {
      // Like
      await db.collection("likes").insertOne({
        formId,
        userId: toObjectId(userId),
        createdAt: new Date(),
      })

await db.collection("templates").updateOne({ _id: toObjectId(formId) }, { $inc: { likes: 1 } })

return {
        liked: true,
        count: await db.collection("likes").countDocuments({ formId }),
      }
    }
  } catch (error) {
    console.error(`Error toggling like for form ${formId} by user ${userId}:`, error)
    throw error
  }
}

// Analytics Operations
export async function getTemplateAnalytics(templateId: string): Promise<any> {
  try {
    const client = await clientPromise
    const db = client.db()

const template = await getTemplateById(templateId)
    if (!template) {
      throw new Error("Template not found")
    }

const responses = await getResponses({ templateId })
    const likes = await getLikesByFormId(templateId)
    const comments = await getCommentsByFormId(templateId)

// Calculate response rate over time (by day)
    const responsesByDay = responses.reduce((acc: Record<string, number>, response) => {
      const date = new Date(response.submittedAt).toISOString().split("T")[0]
      acc[date] = (acc[date] || 0) + 1
      return acc
    }, {})

// Calculate completion rate
    const requiredQuestions = template.questions.filter((q) => q.required).length
    const completedResponses = responses.filter((response) => {
      const answeredRequired = template.questions
        .filter((q) => q.required)
        .every((q) => response.responses[q.id] !== undefined && response.responses[q.id] !== "")
      return answeredRequired
    }).length

const completionRate = responses.length > 0 ? (completedResponses / responses.length) * 100 : 0

// Question-specific analytics
    const questionAnalytics = template.questions.map((question) => {
      const answeredCount = responses.filter((r) => r.responses[question.id] !== undefined).length
      const answerRate = responses.length > 0 ? (answeredCount / responses.length) * 100 : 0

const questionData: any = {
        id: question.id,
        title: question.title,
        type: question.type,
        answeredCount,
        answerRate,
      }

// Type-specific analytics
      if (question.type === "number") {
        const values = responses
          .map((r) => r.responses[question.id])
          .filter((v) => v !== undefined && v !== null)
          .map((v) => Number(v))

if (values.length > 0) {
          const sum = values.reduce((a, b) => a + b, 0)
          questionData.average = sum / values.length
          questionData.min = Math.min(...values)
          questionData.max = Math.max(...values)

// Create distribution
          const distribution = Array(10).fill(0)
          const range = questionData.max - questionData.min || 10 // Prevent division by zero
          const bucketSize = range > 0 ? range / 10 : 1

values.forEach((value) => {
            const bucket = Math.min(Math.floor((value - questionData.min) / bucketSize), 9)
            distribution[bucket]++
          })

questionData.distribution = distribution
        }
      } else if (question.type === "checkbox" && question.options) {
        const optionCounts = question.options.reduce((acc: Record<string, number>, opt) => {
          acc[opt] = 0
          return acc
        }, {})

responses.forEach((response) => {
          const selectedOptions = response.responses[question.id] || []
          if (Array.isArray(selectedOptions)) {
            selectedOptions.forEach((option) => {
              if (optionCounts[option] !== undefined) {
                optionCounts[option]++
              }
            })
          }
        })

questionData.optionCounts = optionCounts
      }

return questionData
    })

return {
      templateId,
      totalResponses: responses.length,
      likes,
      commentCount: comments.length,
      responsesByDay,
      completionRate,
      questionAnalytics,
    }
  } catch (error) {
    console.error(`Error getting analytics for template ${templateId}:`, error)
    throw error
  }
}

// Create indexes for better performance
export async function createIndexes(): Promise<void> {
  try {
    const client = await clientPromise
    const db = client.db()

// Templates collection indexes
    await db.collection("templates").createIndex({ createdBy: 1 })
    await db.collection("templates").createIndex({ tags: 1 })
    await db.collection("templates").createIndex({ topic: 1 })
    await db.collection("templates").createIndex({ title: "text", description: "text" })

// Responses collection indexes
    await db.collection("responses").createIndex({ templateId: 1 })
    await db.collection("responses").createIndex({ userId: 1 })
    await db.collection("responses").createIndex({ submittedAt: -1 })

// Comments collection indexes
    await db.collection("comments").createIndex({ templateId: 1 })
    await db.collection("comments").createIndex({ userId: 1 })
    await db.collection("comments").createIndex({ createdAt: -1 })

// Likes collection indexes
    await db.collection("likes").createIndex({ formId: 1 })
    await db.collection("likes").createIndex({ userId: 1 })
    await db.collection("likes").createIndex({ formId: 1, userId: 1 }, { unique: true })

// Users collection indexes
    await db.collection("users").createIndex({ email: 1 }, { unique: true })
    await db.collection("users").createIndex({ role: 1 })

console.log("Database indexes created successfully")
  } catch (error) {
    console.error("Error creating database indexes:", error)
  }
}

[V0_FILE]typescript:file="lib/mongodb.ts" isMerged="true"
import { MongoClient } from "mongodb"

if (!process.env.MONGODB_URI) {
  throw new Error('Invalid/Missing environment variable: "MONGODB_URI"')
}

const uri = process.env.MONGODB_URI
const options = {}

let client: MongoClient
let clientPromise: Promise<MongoClient>

if (process.env.NODE_ENV === "development") {
  // In development mode, use a global variable so that the value
  // is preserved across module reloads caused by HMR (Hot Module Replacement).
  const globalWithMongo = global as typeof globalThis & {
    _mongoClientPromise?: Promise<MongoClient>
  }

if (!globalWithMongo._mongoClientPromise) {
    client = new MongoClient(uri, options)
    globalWithMongo._mongoClientPromise = client.connect()
  }
  clientPromise = globalWithMongo._mongoClientPromise
} else {
  // In production mode, it's best to not use a global variable.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Export a module-scoped MongoClient promise. By doing this in a
// separate module, the client can be shared across functions.
export default clientPromise

[V0_FILE]typescript:file="app/forms/[id]/results/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, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ArrowLeft, Share2 } from "lucide-react"
import Link from "next/link"
import { useToast } from "@/components/ui/use-toast"
import { AppHeader } from "@/components/app-header"
import { EnhancedResultsAnalysis } from "@/components/enhanced-results-analysis"
import { useSession } from "next-auth/react"

export default function FormResultsPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { toast } = useToast()
  const { data: session, status } = useSession()
  const [isLoading, setIsLoading] = useState(true)
  const [formData, setFormData] = useState<any>(null)
  const [responses, setResponses] = useState<any[]>([])
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    if (status === "loading") return

if (!session) {
      router.push("/login")
      return
    }

fetchData()
  }, [params.id, session, status])

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

try {
      // Fetch form template
      const templateRes = await fetch(`/api/templates/${params.id}`)
      if (!templateRes.ok) {
        const errorData = await templateRes.json()
        throw new Error(errorData.error || "Failed to fetch template")
      }
      const templateData = await templateRes.json()
      setFormData(templateData)

// Check if user has permission to view results
      const isCreator = templateData.createdBy === session?.user?.id
      const isAdmin = session?.user?.role === "admin"

if (!isCreator && !isAdmin) {
        throw new Error("You don't have permission to view these results")
      }

// Fetch responses
      const responsesRes = await fetch(`/api/forms/${params.id}/responses`)
      if (!responsesRes.ok) {
        const errorData = await responsesRes.json()
        throw new Error(errorData.error || "Failed to fetch responses")
      }
      const responsesData = await responsesRes.json()
      setResponses(responsesData)
    } catch (error) {
      console.error("Error fetching form data:", error)
      setError(error instanceof Error ? error.message : "An error occurred")
      toast({
        variant: "destructive",
        title: "Error",
        description: error instanceof Error ? error.message : "Failed to load form data",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleShareLink = () => {
    const shareUrl = `${window.location.origin}/forms/${params.id}/fill`

if (navigator.clipboard) {
      navigator.clipboard
        .writeText(shareUrl)
        .then(() => {
          toast({
            title: "Link copied",
            description: "Form link copied to clipboard",
          })
        })
        .catch(() => {
          // Fallback
          prompt("Copy this link:", shareUrl)
        })
    } else {
      // Fallback for browsers that don't support clipboard API
      prompt("Copy this link:", shareUrl)
    }
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-background">
        <AppHeader />
        <main className="container py-8">
          <div className="flex justify-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
          </div>
        </main>
      </div>
    )
  }

if (error) {
    return (
      <div className="min-h-screen bg-background">
        <AppHeader />
        <main className="container py-8">
          <div className="text-center py-12">
            <h2 className="text-2xl font-bold mb-2">Error</h2>
            <p className="text-muted-foreground mb-6">{error}</p>
            <Button asChild>
              <Link href="/dashboard">Go to Dashboard</Link>
            </Button>
          </div>
        </main>
      </div>
    )
  }

if (!formData) {
    return (
      <div className="min-h-screen bg-background">
        <AppHeader />
        <main className="container py-8">
          <div className="text-center py-12">
            <h2 className="text-2xl font-bold mb-2">Form not found</h2>
            <p className="text-muted-foreground mb-6">
              The form you're looking for doesn't exist or you don't have access to it.
            </p>
            <Button asChild>
              <Link href="/dashboard">Go to Dashboard</Link>
            </Button>
          </div>
        </main>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <AppHeader />
      <main className="container py-8">
        <div className="flex items-center justify-between mb-8">
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" asChild>
              <Link href="/dashboard">
                <ArrowLeft className="h-4 w-4" />
                <span className="sr-only">Back</span>
              </Link>
            </Button>
            <h1 className="text-3xl font-bold">{formData.title}</h1>
          </div>
          <Button variant="outline" onClick={handleShareLink}>
            <Share2 className="mr-2 h-4 w-4" />
            Share Form
          </Button>
        </div>

<Tabs defaultValue="results">
          <TabsList className="mb-6">
            <TabsTrigger value="results">Results</TabsTrigger>
            <TabsTrigger value="settings">Form Settings</TabsTrigger>
          </TabsList>

<TabsContent value="results">
            {responses.length > 0 ? (
              <EnhancedResultsAnalysis templateId={params.id} questions={formData.questions} responses={responses} />
            ) : (
              <Card>
                <CardHeader>
                  <CardTitle>No responses yet</CardTitle>
                  <CardDescription>Share your form to start collecting responses</CardDescription>
                </CardHeader>
                <CardContent className="text-center py-8">
                  <p className="text-muted-foreground mb-6">No one has submitted a response to this form yet.</p>
                  <Button onClick={handleShareLink}>
                    <Share2 className="mr-2 h-4 w-4" />
                    Share Form
                  </Button>
                </CardContent>
              </Card>
            )}
          </TabsContent>

<TabsContent value="settings">
            <Card>
              <CardHeader>
                <CardTitle>Form Settings</CardTitle>
                <CardDescription>View and update your form settings</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <h3 className="text-lg font-medium mb-2">Form Details</h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Title:</span>
                      <span>{formData.title}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Description:</span>
                      <span>{formData.description || "None"}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Questions:</span>
                      <span>{formData.questions.length}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Responses:</span>
                      <span>{responses.length}</span>
                    </div>
                  </div>
                </div>

<div className="flex justify-end gap-2">
                  <Button variant="outline" asChild>
                    <Link href={`/templates/${params.id}/edit`}>Edit Form</Link>
                  </Button>
                  <Button asChild>
                    <Link href={`/forms/${params.id}/fill`}>Preview Form</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}

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

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

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { useSession } from "next-auth/react"
import Link from "next/link"
import { AlertCircle, CheckCircle } from "lucide-react"

export default function RegisterPage() {
  const router = useRouter()
  const { status } = useSession()
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState<string | null>(null)

// Redirect if already logged in
  useEffect(() => {
    if (status === "authenticated") {
      router.push("/dashboard")
    }
  }, [status, router])

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

// Validate passwords match
    if (password !== confirmPassword) {
      setError("Passwords do not match")
      setIsLoading(false)
      return
    }

// Validate password strength
    if (password.length < 8) {
      setError("Password must be at least 8 characters long")
      setIsLoading(false)
      return
    }

try {
      const response = await fetch("/api/auth/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, email, password }),
      })

const data = await response.json()

if (!response.ok) {
        throw new Error(data.error || "Registration failed")
      }

setSuccess(data.message || "Registration successful! Please check your email to verify your account.")
      setName("")
      setEmail("")
      setPassword("")
      setConfirmPassword("")
    } catch (error) {
      setError(error instanceof Error ? error.message : "Registration failed")
      console.error("Registration error:", error)
    } finally {
      setIsLoading(false)
    }
  }

if (status === "authenticated") {
    return null // Don't render anything while redirecting
  }

{success && (
            <Alert className="bg-green-50 text-green-800 border-green-200">
              <CheckCircle className="h-4 w-4 text-green-600" />
              <AlertDescription>{success}</AlertDescription>
            </Alert>
          )}

<form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">Name</Label>
              <Input
                id="name"
                placeholder="John Doe"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
                disabled={isLoading || !!success}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="name@example.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                disabled={isLoading || !!success}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                disabled={isLoading || !!success}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="confirm-password">Confirm Password</Label>
              <Input
                id="confirm-password"
                type="password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                required
                disabled={isLoading || !!success}
              />
            </div>
            <Button type="submit" className="w-full" disabled={isLoading || !!success}>
              {isLoading ? "Creating account..." : "Create Account"}
            </Button>
          </form>
        </CardContent>
        <CardFooter>
          <p className="text-center text-sm text-muted-foreground">
            Already have an account?{" "}
            <Link href="/login" className="text-primary underline-offset-4 hover:underline">
              Sign in
            </Link>
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescript:file="components/app-header.tsx" isMerged="true"
"use client"

import { useState } from "react"
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 { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useTheme } from "next-themes"
import { useSession, signOut } from "next-auth/react"
import { Menu, Moon, Sun, LogOut, User, Settings, LayoutDashboard } from "lucide-react"

export function AppHeader() {
  const pathname = usePathname()
  const { data: session } = useSession()
  const { setTheme } = useTheme()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

const navigation = [
    { name: "Dashboard", href: "/dashboard" },
    { name: "Templates", href: "/templates" },
    { name: "Search", href: "/search" },
  ]

// Add admin link if user is admin
  if (session?.user?.role === "admin") {
    navigation.push({ name: "Admin", href: "/admin" })
  }

const userInitials = session?.user?.name
    ? session.user.name
        .split(" ")
        .map((n) => n[0])
        .join("")
        .toUpperCase()
    : "U"

return (
    <header className="bg-background border-b">
      <nav className="container mx-auto px-4 sm:px-6 lg:px-8" aria-label="Top">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center">
            <Link href="/" className="flex-shrink-0 flex items-center">
              <span className="text-xl font-bold">FormBuilder</span>
            </Link>
            <div className="hidden md:ml-10 md:flex md:space-x-8">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className={`text-sm font-medium transition-colors hover:text-primary ${
                    pathname === item.href ? "text-primary" : "text-muted-foreground"
                  }`}
                >
                  {item.name}
                </Link>
              ))}
            </div>
          </div>
          <div className="hidden md:flex items-center space-x-4">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon">
                  <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                  <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                  <span className="sr-only">Toggle theme</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>

{session ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={session.user?.image || ""} alt={session.user?.name || "User"} />
                      <AvatarFallback>{userInitials}</AvatarFallback>
                    </Avatar>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56" align="end" forceMount>
                  <DropdownMenuLabel className="font-normal">
                    <div className="flex flex-col space-y-1">
                      <p className="text-sm font-medium leading-none">{session.user?.name}</p>
                      <p className="text-xs leading-none text-muted-foreground">{session.user?.email}</p>
                    </div>
                  </DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem asChild>
                    <Link href="/dashboard">
                      <LayoutDashboard className="mr-2 h-4 w-4" />
                      <span>Dashboard</span>
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/profile">
                      <User className="mr-2 h-4 w-4" />
                      <span>Profile</span>
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/settings">
                      <Settings className="mr-2 h-4 w-4" />
                      <span>Settings</span>
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem
                    onClick={() => signOut({ callbackUrl: "/" })}
                    className="text-red-600 focus:text-red-600"
                  >
                    <LogOut className="mr-2 h-4 w-4" />
                    <span>Log out</span>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
              <div className="flex items-center space-x-2">
                <Button variant="ghost" asChild>
                  <Link href="/login">Sign in</Link>
                </Button>
                <Button asChild>
                  <Link href="/register">Sign up</Link>
                </Button>
              </div>
            )}
          </div>
          <div className="md:hidden">
            <Button variant="ghost" size="icon" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
              <Menu className="h-6 w-6" />
            </Button>
          </div>
        </div>
        {mobileMenuOpen && (
          <div className="md:hidden py-2 space-y-1">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  pathname === item.href ? "text-primary" : "text-muted-foreground"
                }`}
              >
                {item.name}
              </Link>
            ))}
            <div className="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
              {session ? (
                <div className="space-y-1">
                  <div className="px-3 flex items-center">
                    <Avatar className="h-8 w-8 mr-3">
                      <AvatarImage src={session.user?.image || ""} alt={session.user?.name || "User"} />
                      <AvatarFallback>{userInitials}</AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="text-sm font-medium">{session.user?.name}</div>
                      <div className="text-xs text-muted-foreground">{session.user?.email}</div>
                    </div>
                  </div>
                  <Link
                    href="/profile"
                    className="block px-3 py-2 rounded-md text-base font-medium text-muted-foreground hover:text-primary"
                  >
                    Profile
                  </Link>
                  <Link
                    href="/settings"
                    className="block px-3 py-2 rounded-md text-base font-medium text-muted-foreground hover:text-primary"
                  >
                    Settings
                  </Link>
                  <button
                    onClick={() => signOut({ callbackUrl: "/" })}
                    className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-red-600"
                  >
                    Log out
                  </button>
                </div>
              ) : (
                <div className="px-3 space-y-1">
                  <Link
                    href="/login"
                    className="block px-3 py-2 rounded-md text-base font-medium text-muted-foreground hover:text-primary"
                  >
                    Sign in
                  </Link>
                  <Link href="/register" className="block px-3 py-2 rounded-md text-base font-medium text-primary">
                    Sign up
                  </Link>
                </div>
              )}
              <div className="mt-3 px-3">
                <div className="flex items-center">
                  <span className="text-sm text-muted-foreground mr-2">Theme:</span>
                  <Button variant="outline" size="sm" onClick={() => setTheme("light")}>
                    Light
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => setTheme("dark")} className="ml-1">
                    Dark
                  </Button>
                </div>
              </div>
            </div>
          </div>
        )}
      </nav>
    </header>
  )
}

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

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"

type Language = "en" | "es"

type Translations = {
  [key: string]: {
    [key in Language]: string
  }
}

const translations: Translations = {
  dashboard: {
    en: "Dashboard",
    es: "Panel de Control",
  },
  templates: {
    en: "Templates",
    es: "Plantillas",
  },
  responses: {
    en: "Responses",
    es: "Respuestas",
  },
  createTemplate: {
    en: "Create Template",
    es: "Crear Plantilla",
  },
  search: {
    en: "Search",
    es: "Buscar",
  },
  settings: {
    en: "Settings",
    es: "Configuración",
  },
  profile: {
    en: "Profile",
    es: "Perfil",
  },
  logout: {
    en: "Log out",
    es: "Cerrar sesión",
  },
  login: {
    en: "Log in",
    es: "Iniciar sesión",
  },
  register: {
    en: "Register",
    es: "Registrarse",
  },
  submit: {
    en: "Submit",
    es: "Enviar",
  },
  cancel: {
    en: "Cancel",
    es: "Cancelar",
  },
  save: {
    en: "Save",
    es: "Guardar",
  },
  delete: {
    en: "Delete",
    es: "Eliminar",
  },
  edit: {
    en: "Edit",
    es: "Editar",
  },
  view: {
    en: "View",
    es: "Ver",
  },
  share: {
    en: "Share",
    es: "Compartir",
  },
  analytics: {
    en: "Analytics",
    es: "Analítica",
  },
  export: {
    en: "Export",
    es: "Exportar",
  },
  import: {
    en: "Import",
    es: "Importar",
  },
  filter: {
    en: "Filter",
    es: "Filtrar",
  },
  sort: {
    en: "Sort",
    es: "Ordenar",
  },
  results: {
    en: "Results",
    es: "Resultados",
  },
  noResults: {
    en: "No results found",
    es: "No se encontraron resultados",
  },
  loading: {
    en: "Loading...",
    es: "Cargando...",
  },
  error: {
    en: "An error occurred",
    es: "Ocurrió un error",
  },
  success: {
    en: "Success",
    es: "Éxito",
  },
  warning: {
    en: "Warning",
    es: "Advertencia",
  },
  info: {
    en: "Information",
    es: "Información",
  },
  required: {
    en: "Required",
    es: "Requerido",
  },
  optional: {
    en: "Optional",
    es: "Opcional",
  },
}

type LanguageContextType = {
  language: Language
  setLanguage: (language: Language) => void
  t: (key: string) => string
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [language, setLanguage] = useState<Language>("en")

useEffect(() => {
    // Get language from localStorage or browser settings
    const savedLanguage = localStorage.getItem("language") as Language
    const browserLanguage = navigator.language.split("-")[0] as Language

if (savedLanguage && (savedLanguage === "en" || savedLanguage === "es")) {
      setLanguage(savedLanguage)
    } else if (browserLanguage === "es") {
      setLanguage("es")
    }
  }, [])

useEffect(() => {
    // Save language preference to localStorage
    localStorage.setItem("language", language)
  }, [language])

const t = (key: string): string => {
    if (translations[key] && translations[key][language]) {
      return translations[key][language]
    }

// Fallback to English or the key itself
    return translations[key]?.en || key
  }

return <LanguageContext.Provider value={{ language, setLanguage, t }}>{children}</LanguageContext.Provider>
}

export function useLanguage() {
  const context = useContext(LanguageContext)

if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider")
  }

return context
}

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

import { createContext, useContext, type ReactNode, useEffect, useState } from "react"
import { useSession } from "next-auth/react"
import { useRouter, usePathname } from "next/navigation"

type AuthContextType = {
  isAuthenticated: boolean
  isAdmin: boolean
  isLoading: boolean
}

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

// Routes that require authentication
const protectedRoutes = ["/dashboard", "/templates/create", "/templates/edit", "/profile", "/settings", "/admin"]

// Routes that require admin role
const adminRoutes = ["/admin"]

export function AuthProvider({ children }: { children: ReactNode }) {
  const { data: session, status } = useSession()
  const router = useRouter()
  const pathname = usePathname()
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    if (status === "loading") {
      setIsLoading(true)
      return
    }

setIsLoading(false)

// Check if current route requires authentication
    const requiresAuth = protectedRoutes.some((route) => pathname?.startsWith(route))

// Check if current route requires admin role
    const requiresAdmin = adminRoutes.some((route) => pathname?.startsWith(route))

if (requiresAuth && !session) {
      // Redirect to login if not authenticated
      router.push(`/login?callbackUrl=${encodeURIComponent(pathname || "/")}`)
    } else if (requiresAdmin && session?.user?.role !== "admin") {
      // Redirect to dashboard if not admin
      router.push("/dashboard")
    }
  }, [session, status, pathname, router])

const value = {
    isAuthenticated: !!session,
    isAdmin: session?.user?.role === "admin",
    isLoading,
  }

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

export function useAuth() {
  const context = useContext(AuthContext)

if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }

return context
}

[V0_FILE]typescript:file="models/response.ts" isMerged="true"
import type { ObjectId } from "mongodb"

export interface Response {
  _id: ObjectId
  templateId: ObjectId | string
  userId: ObjectId | string
  submittedAt: Date
  responses: Record<string, any>
}

[V0_FILE]typescript:file="models/user.ts" isMerged="true"
import type { ObjectId } from "mongodb"

export interface User {
  _id: ObjectId
  name: string
  email: string
  password?: string
  image?: string
  role: "user" | "admin"
  isBlocked: boolean
  isVerified?: boolean
  verificationToken?: string
  verificationExpires?: Date
  resetToken?: string
  resetTokenExpires?: Date
  createdAt: Date
  updatedAt: Date
  lastLogin?: Date
  googleId?: string
}

[V0_FILE]typescript:file="models/comment.ts" isMerged="true"
import type { ObjectId } from "mongodb"

export interface Comment {
  _id: ObjectId
  templateId: string
  userId: ObjectId | string
  content: string
  createdAt: Date
}

[V0_FILE]typescript:file="types/api.ts" isMerged="true"
import type { ObjectId } from "mongodb"
import type { Template } from "@/models/template"

// API Response Types
export interface ApiResponse<T = any> {
  success: boolean
  data?: T
  error?: string
  message?: string
}

// Session User Type
export interface SessionUser {
  id: string
  name?: string | null
  email?: string | null
  image?: string | null
  role: string
}

// Route Parameters
export interface IdParam {
  id: string
}

export interface ResponseIdParam extends IdParam {
  responseId: string
}

// Request Context Types
export interface RequestContext {
  params: IdParam
}

export interface ResponseRequestContext {
  params: ResponseIdParam
}

// Query Parameters
export interface PaginationQuery {
  page?: string
  limit?: string
  sort?: string
  order?: "asc" | "desc"
}

export interface TemplateQuery extends PaginationQuery {
  search?: string
  tags?: string
  topic?: string
  isPublic?: string
}

export interface AnalyticsQuery {
  timeRange?: "7days" | "30days" | "90days" | "year"
  compareWith?: string
}

// Request Body Types
export interface CreateTemplateBody {
  title: string
  description?: string
  topic?: string
  tags: string[]
  isPublic: boolean
  questions: Template["questions"]
  imageUrl?: string | null
}

export interface UpdateTemplateBody extends Partial<CreateTemplateBody> {
  version?: number
}

export interface CreateResponseBody {
  responses: Record<string, any>
}

export interface RegisterUserBody {
  name: string
  email: string
  password: string
}

export interface LoginUserBody {
  email: string
  password: string
}

export interface ForgotPasswordBody {
  email: string
}

export interface ResetPasswordBody {
  token: string
  password: string
}

export interface FileUploadBody {
  file: File
  questionId: string
}

// Utility Types
export type WithId<T> = T & { _id: ObjectId }
export type WithStringId<T> = Omit<T, "_id"> & { _id: string }

[V0_FILE]typescript:file="app/api/templates/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { getTemplates, createTemplate } from "@/lib/db-service"
import { ObjectId } from "mongodb"
import type { ApiResponse, CreateTemplateBody } from "@/types/api"
import type { Template } from "@/models/template"

export async function GET(request: NextRequest): Promise<NextResponse<ApiResponse<Template[]>>> {
  try {
    const session = await getServerSession(authOptions)
    const searchParams = request.nextUrl.searchParams

// Build query from search parameters
    const query: Record<string, any> = {}

// If not authenticated, only show public templates
    if (!session) {
      query.isPublic = true
    }

// Add search filters if provided
    const search = searchParams.get("search")
    if (search) {
      query.$text = { $search: search }
    }

const tags = searchParams.get("tags")
    if (tags) {
      query.tags = { $in: tags.split(",") }
    }

const topic = searchParams.get("topic")
    if (topic) {
      query.topic = topic
    }

// Get templates based on query
    const templates = await getTemplates(query)

return NextResponse.json({
      success: true,
      data: templates,
    })
  } catch (error) {
    console.error("Error fetching templates:", error)
    return NextResponse.json({ success: false, error: "Failed to fetch templates" }, { status: 500 })
  }
}

export async function POST(request: NextRequest): Promise<NextResponse<ApiResponse<Template>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const body: CreateTemplateBody = await request.json()

// Validate required fields
    if (!body.title || !body.questions || !Array.isArray(body.questions)) {
      return NextResponse.json({ success: false, error: "Missing required fields" }, { status: 400 })
    }

// Create template
    const template = await createTemplate({
      ...body,
      createdBy: new ObjectId(session.user.id),
    })

if (!template) {
      throw new Error("Failed to create template")
    }

return NextResponse.json(
      {
        success: true,
        data: template,
        message: "Template created successfully",
      },
      { status: 201 },
    )
  } catch (error) {
    console.error("Error creating template:", error)
    return NextResponse.json({ success: false, error: "Failed to create template" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/templates/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { getTemplateById, updateTemplate, deleteTemplate } from "@/lib/db-service"
import type { ApiResponse, RequestContext, UpdateTemplateBody } from "@/types/api"
import type { Template } from "@/models/template"

export async function GET(
  request: NextRequest,
  { params }: RequestContext,
): Promise<NextResponse<ApiResponse<Template>>> {
  try {
    const templateId = params.id
    const session = await getServerSession(authOptions)

// Get the template
    const template = await getTemplateById(templateId)

if (!template) {
      return NextResponse.json({ success: false, error: "Template not found" }, { status: 404 })
    }

// Check if user has access to the template
    const isCreator = template.createdBy.toString() === session?.user?.id
    const isAdmin = session?.user?.role === "admin"
    const isPublic = template.isPublic

if (!isPublic && !isCreator && !isAdmin) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

return NextResponse.json({
      success: true,
      data: template,
    })
  } catch (error) {
    console.error(`Error fetching template ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Failed to fetch template" }, { status: 500 })
  }
}

export async function PUT(
  request: NextRequest,
  { params }: RequestContext,
): Promise<NextResponse<ApiResponse<Template>>> {
  try {
    const templateId = params.id
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

// Get the template to check permissions
    const template = await getTemplateById(templateId)

if (!template) {
      return NextResponse.json({ success: false, error: "Template not found" }, { status: 404 })
    }

// Check if user has permission to update the template
    const isCreator = template.createdBy.toString() === session.user.id
    const isAdmin = session.user.role === "admin"

if (!isCreator && !isAdmin) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

const body: UpdateTemplateBody = await request.json()

// Update the template
    const updatedTemplate = await updateTemplate(templateId, body)

if (!updatedTemplate) {
      throw new Error("Failed to update template")
    }

return NextResponse.json({
      success: true,
      data: updatedTemplate,
      message: "Template updated successfully",
    })
  } catch (error) {
    console.error(`Error updating template ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Failed to update template" }, { status: 500 })
  }
}

export async function DELETE(
  request: NextRequest,
  { params }: RequestContext,
): Promise<NextResponse<ApiResponse<null>>> {
  try {
    const templateId = params.id
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

// Get the template to check permissions
    const template = await getTemplateById(templateId)

if (!template) {
      return NextResponse.json({ success: false, error: "Template not found" }, { status: 404 })
    }

// Check if user has permission to delete the template
    const isCreator = template.createdBy.toString() === session.user.id
    const isAdmin = session.user.role === "admin"

if (!isCreator && !isAdmin) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

// Delete the template
    const success = await deleteTemplate(templateId)

if (!success) {
      throw new Error("Failed to delete template")
    }

return NextResponse.json({
      success: true,
      message: "Template deleted successfully",
    })
  } catch (error) {
    console.error(`Error deleting template ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Failed to delete template" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/forms/[id]/file-upload/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { getTemplateById } from "@/lib/db-service"
import { uploadImage } from "@/lib/cloudinary"
import type { ApiResponse, RequestContext } from "@/types/api"

interface FileUploadResponse {
  fileUrl: string
  fileName: string
  fileType: string
  fileSize: number
}

export async function POST(
  request: NextRequest,
  { params }: RequestContext,
): Promise<NextResponse<ApiResponse<FileUploadResponse>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const formId = params.id
    const formData = await request.formData()
    const file = formData.get("file") as File | null
    const questionId = formData.get("questionId") as string | null

if (!file || !questionId) {
      return NextResponse.json({ success: false, error: "File and questionId are required" }, { status: 400 })
    }

// Get the template to validate file upload
    const template = await getTemplateById(formId)

if (!template) {
      return NextResponse.json({ success: false, error: "Template not found" }, { status: 404 })
    }

// Find the question
    const question = template.questions.find((q) => q.id === questionId)

if (!question || question.type !== "file") {
      return NextResponse.json({ success: false, error: "Invalid question" }, { status: 400 })
    }

// Validate file type
    if (question.fileTypes && question.fileTypes.length > 0) {
      if (!question.fileTypes.includes(file.type)) {
        return NextResponse.json(
          {
            success: false,
            error: `Invalid file type. Allowed types: ${question.fileTypes.join(", ")}`,
          },
          { status: 400 },
        )
      }
    }

// Validate file size
    if (question.maxFileSize && file.size > question.maxFileSize) {
      const maxSizeMB = Math.floor(question.maxFileSize / (1024 * 1024))
      return NextResponse.json(
        {
          success: false,
          error: `File too large. Maximum size: ${maxSizeMB}MB`,
        },
        { status: 400 },
      )
    }

// Convert file to base64
    const arrayBuffer = await file.arrayBuffer()
    const buffer = Buffer.from(arrayBuffer)
    const base64 = `data:${file.type};base64,${buffer.toString("base64")}`

// Upload to Cloudinary
    const fileUrl = await uploadImage(base64)

return NextResponse.json({
      success: true,
      data: {
        fileUrl,
        fileName: file.name,
        fileType: file.type,
        fileSize: file.size,
      },
    })
  } catch (error) {
    console.error(`Error uploading file for form ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/forms/[id]/analytics/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { getTemplateById, getResponses } from "@/lib/db-service"
import clientPromise from "@/lib/mongodb"
import type { ApiResponse, RequestContext } from "@/types/api"

interface AnalyticsData {
  responseTrend: Array<{ date: string; count: number }>
  completionRate: number
  questionAnalytics: Array<{
    id: string
    title: string
    type: string
    answeredCount: number
    answerRate: number
    average?: number
    min?: number
    max?: number
    distribution?: Array<{ range: string; count: number }>
    optionCounts?: Array<{ name: string; value: number }>
  }>
  responseTimeData: Array<{ hour: string; count: number }>
}

export async function GET(
  request: NextRequest,
  { params }: RequestContext,
): Promise<NextResponse<ApiResponse<AnalyticsData>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const formId = params.id

// Get the template to check permissions
    const template = await getTemplateById(formId)

if (!template) {
      return NextResponse.json({ success: false, error: "Template not found" }, { status: 404 })
    }

// Check if user has permission to view analytics
    const isCreator = template.createdBy.toString() === session.user.id
    const isAdmin = session.user.role === "admin"

if (!isCreator && !isAdmin) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

// Get responses for the template
    const responses = await getResponses({ templateId: formId })

// Calculate response trends over time
    const responsesByDay = responses.reduce((acc: Record<string, number>, response) => {
      const date = new Date(response.submittedAt).toISOString().split("T")[0]
      acc[date] = (acc[date] || 0) + 1
      return acc
    }, {})

const responseTrend = Object.entries(responsesByDay)
      .map(([date, count]) => ({ date, count }))
      .sort((a, b) => a.date.localeCompare(b.date))

const completionRate = responses.length > 0 ? (completedResponses / responses.length) * 100 : 0

const questionData: any = {
        id: question.id,
        title: question.title,
        type: question.type,
        answeredCount,
        answerRate,
      }

if (values.length > 0) {
          const sum = values.reduce((a, b) => a + b, 0)
          questionData.average = sum / values.length
          questionData.min = Math.min(...values)
          questionData.max = Math.max(...values)

values.forEach((value) => {
            const bucketIndex = Math.min(Math.floor((value - questionData.min) / bucketSize), 9)
            distribution[bucketIndex]++
          })

questionData.distribution = distribution.map((count, i) => ({
            range: `${(questionData.min + i * bucketSize).toFixed(1)}-${(questionData.min + (i + 1) * bucketSize).toFixed(1)}`,
            count,
          }))
        }
      } else if (question.type === "checkbox" && question.options) {
        const optionCounts = question.options.reduce((acc: Record<string, number>, opt) => {
          acc[opt] = 0
          return acc
        }, {})

questionData.optionCounts = Object.entries(optionCounts).map(([name, value]) => ({ name, value }))
      }

return questionData
    })

// Response time analysis
    const client = await clientPromise
    const db = client.db()

const hourlyStats = await db
      .collection("responses")
      .aggregate([
        { $match: { templateId: formId } },
        {
          $group: {
            _id: { $hour: "$submittedAt" },
            count: { $sum: 1 },
          },
        },
        { $sort: { _id: 1 } },
      ])
      .toArray()

// Format hourly data
    const responseTimeData = [
      { hour: "00:00-04:00", count: 0 },
      { hour: "04:00-08:00", count: 0 },
      { hour: "08:00-12:00", count: 0 },
      { hour: "12:00-16:00", count: 0 },
      { hour: "16:00-20:00", count: 0 },
      { hour: "20:00-24:00", count: 0 },
    ]

hourlyStats.forEach((stat) => {
      const hour = stat._id
      if (hour >= 0 && hour < 4) responseTimeData[0].count += stat.count
      else if (hour >= 4 && hour < 8) responseTimeData[1].count += stat.count
      else if (hour >= 8 && hour < 12) responseTimeData[2].count += stat.count
      else if (hour >= 12 && hour < 16) responseTimeData[3].count += stat.count
      else if (hour >= 16 && hour < 20) responseTimeData[4].count += stat.count
      else responseTimeData[5].count += stat.count
    })

return NextResponse.json({
      success: true,
      data: {
        responseTrend,
        completionRate,
        questionAnalytics,
        responseTimeData,
      },
    })
  } catch (error) {
    console.error(`Error fetching analytics for form ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/auth/register/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import bcrypt from "bcryptjs"
import { getUserByEmail, createUser } from "@/lib/db-service"
import { sendVerificationEmail } from "@/lib/email-service"
import crypto from "crypto"
import type { ApiResponse, RegisterUserBody } from "@/types/api"

export async function POST(request: NextRequest): Promise<NextResponse<ApiResponse>> {
  try {
    const body: RegisterUserBody = await request.json()
    const { name, email, password } = body

// Validate input
    if (!name || !email || !password) {
      return NextResponse.json({ success: false, error: "Missing required fields" }, { status: 400 })
    }

// Validate email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(email)) {
      return NextResponse.json({ success: false, error: "Invalid email format" }, { status: 400 })
    }

// Validate password strength
    if (password.length < 8) {
      return NextResponse.json(
        { success: false, error: "Password must be at least 8 characters long" },
        { status: 400 },
      )
    }

// Check if user already exists
    const existingUser = await getUserByEmail(email)
    if (existingUser) {
      return NextResponse.json({ success: false, error: "Email already in use" }, { status: 400 })
    }

// Hash the password
    const hashedPassword = await bcrypt.hash(password, 10)

// Generate verification token
    const verificationToken = crypto.randomBytes(32).toString("hex")
    const verificationExpires = new Date(Date.now() + 24 * 60 * 60 * 1000) // 24 hours

// Create the user
    const newUser = await createUser({
      name,
      email,
      password: hashedPassword,
      role: "user",
      isBlocked: false,
      createdAt: new Date(),
      updatedAt: new Date(),
      verificationToken,
      verificationExpires,
      isVerified: false,
    })

if (!newUser) {
      return NextResponse.json({ success: false, error: "Failed to create user" }, { status: 500 })
    }

// Send verification email
    await sendVerificationEmail(email, verificationToken)

return NextResponse.json(
      {
        success: true,
        message: "User registered successfully. Please check your email to verify your account.",
      },
      { status: 201 },
    )
  } catch (error) {
    console.error("Registration error:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/auth/verify-email/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import type { ApiResponse } from "@/types/api"
import clientPromise from "@/lib/mongodb"

export async function GET(request: NextRequest): Promise<NextResponse<ApiResponse>> {
  try {
    const token = request.nextUrl.searchParams.get("token")

if (!token) {
      return NextResponse.json({ success: false, error: "Token is required" }, { status: 400 })
    }

// Find user with this verification token
    const client = await clientPromise
    const db = client.db()

const user = await db.collection("users").findOne({
      verificationToken: token,
      verificationExpires: { $gt: new Date() },
    })

if (!user) {
      return NextResponse.json({ success: false, error: "Invalid or expired token" }, { status: 400 })
    }

// Mark user as verified and clear verification token
    await db.collection("users").updateOne(
      { _id: user._id },
      {
        $set: {
          isVerified: true,
          updatedAt: new Date(),
        },
        $unset: {
          verificationToken: "",
          verificationExpires: "",
        },
      },
    )

return NextResponse.json({
      success: true,
      message: "Email verified successfully. You can now log in to your account.",
    })
  } catch (error) {
    console.error("Email verification error:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/users/templates/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { getTemplates } from "@/lib/db-service"
import { ObjectId } from "mongodb"
import type { ApiResponse } from "@/types/api"
import type { Template } from "@/models/template"

export async function GET(request: NextRequest): Promise<NextResponse<ApiResponse<Template[]>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const userId = session.user.id

// Get templates created by the user
    const templates = await getTemplates({ createdBy: new ObjectId(userId) })

return NextResponse.json({
      success: true,
      data: templates,
    })
  } catch (error) {
    console.error("Error fetching user templates:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/users/responses/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { getResponses } from "@/lib/db-service"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"
import type { ApiResponse } from "@/types/api"

interface UserResponse {
  _id: string
  templateId: string
  templateTitle: string
  submittedAt: string
  owner: string
}

export async function GET(request: NextRequest): Promise<NextResponse<ApiResponse<UserResponse[]>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const userId = session.user.id

// Get responses submitted by the user
    const responses = await getResponses({ userId: new ObjectId(userId) })

// Get template details for each response
    const client = await clientPromise
    const db = client.db()

const enrichedResponses = await Promise.all(
      responses.map(async (response) => {
        const template = await db.collection("templates").findOne({
          _id: new ObjectId(response.templateId.toString()),
        })

return {
          _id: response._id.toString(),
          templateId: response.templateId.toString(),
          templateTitle: template?.title || "Unknown Template",
          submittedAt: response.submittedAt.toISOString(),
          owner: template?.createdBy.toString() === userId ? "You" : "Other User",
        }
      }),
    )

return NextResponse.json({
      success: true,
      data: enrichedResponses,
    })
  } catch (error) {
    console.error("Error fetching user responses:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/admin/analytics/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import clientPromise from "@/lib/mongodb"
import type { ApiResponse } from "@/types/api"

interface AdminAnalyticsData {
  dailyStats: Array<{
    date: string
    users: number
    templates: number
    submissions: number
  }>
  monthlyStats: Array<{
    month: string
    users: number
    templates: number
    submissions: number
  }>
  topTemplates: Array<{
    id: string
    title: string
    responses: number
  }>
  userActivity: Array<{
    hour: number
    count: number
  }>
}

export async function GET(request: NextRequest): Promise<NextResponse<ApiResponse<AdminAnalyticsData>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session || session.user.role !== "admin") {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

const timeRange = request.nextUrl.searchParams.get("timeRange") || "30days"

// Calculate date range based on timeRange
    const now = new Date()
    let startDate: Date

switch (timeRange) {
      case "7days":
        startDate = new Date(now)
        startDate.setDate(now.getDate() - 7)
        break
      case "30days":
        startDate = new Date(now)
        startDate.setDate(now.getDate() - 30)
        break
      case "90days":
        startDate = new Date(now)
        startDate.setDate(now.getDate() - 90)
        break
      case "year":
        startDate = new Date(now)
        startDate.setFullYear(now.getFullYear() - 1)
        break
      default:
        startDate = new Date(now)
        startDate.setDate(now.getDate() - 30)
    }

const client = await clientPromise
    const db = client.db()

// Get daily stats
    const dailyStats = await getDailyStats(db, startDate, timeRange !== "year")

// Get monthly stats
    const monthlyStats = await getMonthlyStats(db, startDate)

// Get top templates
    const topTemplates = await getTopTemplates(db, startDate)

// Get hourly activity
    const userActivity = await getHourlyActivity(db, startDate)

return NextResponse.json({
      success: true,
      data: {
        dailyStats,
        monthlyStats,
        topTemplates,
        userActivity,
      },
    })
  } catch (error) {
    console.error("Error fetching analytics:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

async function getDailyStats(db: any, startDate: Date, includeAllDays: boolean) {
  // Get new users per day
  const userStats = await db
    .collection("users")
    .aggregate([
      { $match: { createdAt: { $gte: startDate } } },
      {
        $group: {
          _id: {
            year: { $year: "$createdAt" },
            month: { $month: "$createdAt" },
            day: { $dayOfMonth: "$createdAt" },
          },
          count: { $sum: 1 },
        },
      },
      { $sort: { "_id.year": 1, "_id.month": 1, "_id.day": 1 } },
    ])
    .toArray()

// Get new templates per day
  const templateStats = await db
    .collection("templates")
    .aggregate([
      { $match: { createdAt: { $gte: startDate } } },
      {
        $group: {
          _id: {
            year: { $year: "$createdAt" },
            month: { $month: "$createdAt" },
            day: { $dayOfMonth: "$createdAt" },
          },
          count: { $sum: 1 },
        },
      },
      { $sort: { "_id.year": 1, "_id.month": 1, "_id.day": 1 } },
    ])
    .toArray()

// Get form submissions per day
  const submissionStats = await db
    .collection("responses")
    .aggregate([
      { $match: { submittedAt: { $gte: startDate } } },
      {
        $group: {
          _id: {
            year: { $year: "$submittedAt" },
            month: { $month: "$submittedAt" },
            day: { $dayOfMonth: "$submittedAt" },
          },
          count: { $sum: 1 },
        },
      },
      { $sort: { "_id.year": 1, "_id.month": 1, "_id.day": 1 } },
    ])
    .toArray()

// Generate all dates in the range if needed
  const result = []
  if (includeAllDays) {
    const endDate = new Date()
    const currentDate = new Date(startDate)

while (currentDate <= endDate) {
      const year = currentDate.getFullYear()
      const month = currentDate.getMonth() + 1
      const day = currentDate.getDate()
      const dateStr = `${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`

// Find stats for this date
      const userCount =
        userStats.find((s) => s._id.year === year && s._id.month === month && s._id.day === day)?.count || 0

const templateCount =
        templateStats.find((s) => s._id.year === year && s._id.month === month && s._id.day === day)?.count || 0

const submissionCount =
        submissionStats.find((s) => s._id.year === year && s._id.month === month && s._id.day === day)?.count || 0

result.push({
        date: dateStr,
        users: userCount,
        templates: templateCount,
        submissions: submissionCount,
      })

// Move to next day
      currentDate.setDate(currentDate.getDate() + 1)
    }
  } else {
    // Just use the actual data points
    const dateMap = new Map()

// Process user stats
    userStats.forEach((stat) => {
      const { year, month, day } = stat._id
      const dateStr = `${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`

if (!dateMap.has(dateStr)) {
        dateMap.set(dateStr, { date: dateStr, users: 0, templates: 0, submissions: 0 })
      }

dateMap.get(dateStr).users = stat.count
    })

// Process template stats
    templateStats.forEach((stat) => {
      const { year, month, day } = stat._id
      const dateStr = `${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`

if (!dateMap.has(dateStr)) {
        dateMap.set(dateStr, { date: dateStr, users: 0, templates: 0, submissions: 0 })
      }

dateMap.get(dateStr).templates = stat.count
    })

// Process submission stats
    submissionStats.forEach((stat) => {
      const { year, month, day } = stat._id
      const dateStr = `${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`

if (!dateMap.has(dateStr)) {
        dateMap.set(dateStr, { date: dateStr, users: 0, templates: 0, submissions: 0 })
      }

dateMap.get(dateStr).submissions = stat.count
    })

// Convert map to array and sort by date
    result.push(...Array.from(dateMap.values()).sort((a, b) => a.date.localeCompare(b.date)))
  }

return result
}

async function getMonthlyStats(db: any, startDate: Date) {
  // Implementation remains the same but with proper typing
  // ...

// Get new users per month
  const userStats = await db
    .collection("users")
    .aggregate([
      { $match: { createdAt: { $gte: startDate } } },
      {
        $group: {
          _id: {
            year: { $year: "$createdAt" },
            month: { $month: "$createdAt" },
          },
          count: { $sum: 1 },
        },
      },
      { $sort: { "_id.year": 1, "_id.month": 1 } },
    ])
    .toArray()

// Get new templates per month
  const templateStats = await db
    .collection("templates")
    .aggregate([
      { $match: { createdAt: { $gte: startDate } } },
      {
        $group: {
          _id: {
            year: { $year: "$createdAt" },
            month: { $month: "$createdAt" },
          },
          count: { $sum: 1 },
        },
      },
      { $sort: { "_id.year": 1, "_id.month": 1 } },
    ])
    .toArray()

// Get form submissions per month
  const submissionStats = await db
    .collection("responses")
    .aggregate([
      { $match: { submittedAt: { $gte: startDate } } },
      {
        $group: {
          _id: {
            year: { $year: "$submittedAt" },
            month: { $month: "$submittedAt" },
          },
          count: { $sum: 1 },
        },
      },
      { $sort: { "_id.year": 1, "_id.month": 1 } },
    ])
    .toArray()

// Generate all months in the range
  const result = []
  const endDate = new Date()
  const currentDate = new Date(startDate)

// Set to first day of month
  currentDate.setDate(1)

while (currentDate <= endDate) {
    const year = currentDate.getFullYear()
    const month = currentDate.getMonth() + 1
    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    const monthStr = `${monthNames[month - 1]} ${year}`

// Find stats for this month
    const userCount = userStats.find((s) => s._id.year === year && s._id.month === month)?.count || 0

const templateCount = templateStats.find((s) => s._id.year === year && s._id.month === month)?.count || 0

const submissionCount = submissionStats.find((s) => s._id.year === year && s._id.month === month)?.count || 0

result.push({
      month: monthStr,
      users: userCount,
      templates: templateCount,
      submissions: submissionCount,
    })

// Move to next month
    currentDate.setMonth(currentDate.getMonth() + 1)
  }

return result
}

async function getTopTemplates(db: any, startDate: Date) {
  // Get templates with most responses
  const templates = await db
    .collection("templates")
    .find({ createdAt: { $gte: startDate } })
    .sort({ responses: -1 })
    .limit(10)
    .project({ _id: 1, title: 1, responses: 1 })
    .toArray()

return templates.map((template) => ({
    id: template._id.toString(),
    title: template.title,
    responses: template.responses || 0,
  }))
}

async function getHourlyActivity(db: any, startDate: Date) {
  // Get form submissions by hour of day
  const hourlyStats = await db
    .collection("responses")
    .aggregate([
      { $match: { submittedAt: { $gte: startDate } } },
      {
        $group: {
          _id: { $hour: "$submittedAt" },
          count: { $sum: 1 },
        },
      },
      { $sort: { _id: 1 } },
    ])
    .toArray()

// Generate all hours (0-23)
  const result = []
  for (let hour = 0; hour < 24; hour++) {
    const count = hourlyStats.find((s) => s._id === hour)?.count || 0
    result.push({ hour, count })
  }

return result
}

[V0_FILE]typescript:file="app/api/admin/backup/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { createBackup, restoreBackup } from "@/lib/backup-service"
import fs from "fs"
import path from "path"
import type { ApiResponse } from "@/types/api"

interface BackupFile {
  filename: string
  path: string
  size: number
  createdAt: Date
}

interface BackupListResponse {
  backups: BackupFile[]
}

interface CreateBackupResponse {
  path: string
}

interface RestoreBackupRequest {
  backupPath: string
}

export async function GET(request: NextRequest): Promise<NextResponse<ApiResponse<BackupListResponse>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session || session.user.role !== "admin") {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

// Get list of existing backups
    const backupDir = "./backups"
    if (!fs.existsSync(backupDir)) {
      fs.mkdirSync(backupDir, { recursive: true })
    }

const backups = fs
      .readdirSync(backupDir)
      .filter((file) => file.endsWith(".gz"))
      .map((file) => {
        const filePath = path.join(backupDir, file)
        const stats = fs.statSync(filePath)
        return {
          filename: file,
          path: filePath,
          size: stats.size,
          createdAt: stats.mtime,
        }
      })
      .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())

return NextResponse.json({
      success: true,
      data: { backups },
    })
  } catch (error) {
    console.error("Error listing backups:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

export async function POST(request: NextRequest): Promise<NextResponse<ApiResponse<CreateBackupResponse>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session || session.user.role !== "admin") {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

// Create a new backup
    const backupPath = await createBackup()

return NextResponse.json({
      success: true,
      message: "Backup created successfully",
      data: { path: backupPath },
    })
  } catch (error) {
    console.error("Error creating backup:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

export async function PUT(request: NextRequest): Promise<NextResponse<ApiResponse>> {
  try {
    const session = await getServerSession(authOptions)

if (!session || session.user.role !== "admin") {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

const { backupPath }: RestoreBackupRequest = await request.json()

if (!backupPath) {
      return NextResponse.json({ success: false, error: "Backup path is required" }, { status: 400 })
    }

// Restore from backup
    await restoreBackup(backupPath)

return NextResponse.json({
      success: true,
      message: "Backup restored successfully",
    })
  } catch (error) {
    console.error("Error restoring backup:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="lib/init-db.ts" isMerged="true"
import clientPromise from "@/lib/mongodb"
import { createIndexes } from "@/lib/db-service"

export async function initializeDatabase(): Promise<boolean> {
  try {
    console.log("Initializing database...")

// Connect to MongoDB
    const client = await clientPromise
    const db = client.db()

// Create collections if they don't exist
    const collections = await db.listCollections().toArray()
    const collectionNames = collections.map((c) => c.name)

const requiredCollections = ["users", "templates", "responses", "comments", "likes"]

for (const collection of requiredCollections) {
      if (!collectionNames.includes(collection)) {
        await db.createCollection(collection)
        console.log(`Created collection: ${collection}`)
      }
    }

// Create indexes for better performance
    await createIndexes()

// Create admin user if it doesn't exist
    const adminExists = await db.collection("users").findOne({ role: "admin" })

if (!adminExists) {
      // Create default admin user with environment variables if available
      if (process.env.ADMIN_EMAIL && process.env.ADMIN_PASSWORD) {
        const bcrypt = await import("bcryptjs")
        const hashedPassword = await bcrypt.hash(process.env.ADMIN_PASSWORD, 10)

await db.collection("users").insertOne({
          name: "Admin",
          email: process.env.ADMIN_EMAIL,
          password: hashedPassword,
          role: "admin",
          isBlocked: false,
          isVerified: true,
          createdAt: new Date(),
          updatedAt: new Date(),
        })

console.log("Created default admin user")
      } else {
        console.log("No admin user created. Set ADMIN_EMAIL and ADMIN_PASSWORD environment variables to create one.")
      }
    }

console.log("Database initialization complete")
    return true
  } catch (error) {
    console.error("Error initializing database:", error)
    return false
  }
}

[V0_FILE]typescript:file="lib/cloudinary.ts" isMerged="true"
import { v2 as cloudinary } from "cloudinary"

// Configure Cloudinary
cloudinary.config({
  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
})

/**
 * Uploads an image to Cloudinary
 * @param base64Image - Base64 encoded image data
 * @returns Promise with the secure URL of the uploaded image
 */
export async function uploadImage(base64Image: string): Promise<string> {
  try {
    // Check if cloudinary is properly configured
    if (
      !process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME ||
      !process.env.CLOUDINARY_API_KEY ||
      !process.env.CLOUDINARY_API_SECRET
    ) {
      throw new Error("Cloudinary configuration missing")
    }

// Upload the image
    const result = await cloudinary.uploader.upload(base64Image, {
      folder: "formbuilder",
      resource_type: "auto",
      overwrite: true,
      invalidate: true,
    })

return result.secure_url
  } catch (error) {
    console.error("Error uploading image to Cloudinary:", error)
    throw error
  }
}

/**
 * Deletes an image from Cloudinary
 * @param publicId - Public ID of the image to delete
 * @returns Promise with the result of the deletion
 */
export async function deleteImage(publicId: string): Promise<boolean> {
  try {
    // Check if cloudinary is properly configured
    if (
      !process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME ||
      !process.env.CLOUDINARY_API_KEY ||
      !process.env.CLOUDINARY_API_SECRET
    ) {
      throw new Error("Cloudinary configuration missing")
    }

// Delete the image
    const result = await cloudinary.uploader.destroy(publicId)

return result.result === "ok"
  } catch (error) {
    console.error("Error deleting image from Cloudinary:", error)
    return false
  }
}

/**
 * Extracts the public ID from a Cloudinary URL
 * @param url - Cloudinary URL
 * @returns Public ID of the image
 */
export function getPublicIdFromUrl(url: string): string | null {
  try {
    // Extract the public ID from the URL
    // Format: https://res.cloudinary.com/cloud_name/image/upload/v1234567890/folder/public_id.ext
    const regex = /\/v\d+\/(.+)\.\w+$/
    const match = url.match(regex)

if (match && match[1]) {
      return match[1]
    }

return null
  } catch (error) {
    console.error("Error extracting public ID from URL:", error)
    return null
  }
}

[V0_FILE]typescript:file="lib/email-service.ts" isMerged="true"
import nodemailer from "nodemailer"

// Create a transporter
const transporter = nodemailer.createTransport({
  host: process.env.EMAIL_SERVER_HOST,
  port: Number(process.env.EMAIL_SERVER_PORT),
  secure: process.env.EMAIL_SERVER_SECURE === "true",
  auth: {
    user: process.env.EMAIL_SERVER_USER,
    pass: process.env.EMAIL_SERVER_PASSWORD,
  },
})

/**
 * Sends a verification email to the user
 * @param email - Email address of the user
 * @param token - Verification token
 * @returns Promise with the result of the email sending
 */
export async function sendVerificationEmail(email: string, token: string): Promise<boolean> {
  const verificationUrl = `${process.env.NEXTAUTH_URL}/verify-email?token=${token}`

try {
    await transporter.sendMail(mailOptions)
    return true
  } catch (error) {
    console.error("Error sending verification email:", error)
    return false
  }
}

/**
 * Sends a password reset email to the user
 * @param email - Email address of the user
 * @param token - Password reset token
 * @returns Promise with the result of the email sending
 */
export async function sendPasswordResetEmail(email: string, token: string): Promise<boolean> {
  const resetUrl = `${process.env.NEXTAUTH_URL}/reset-password?token=${token}`

try {
    await transporter.sendMail(mailOptions)
    return true
  } catch (error) {
    console.error("Error sending password reset email:", error)
    return false
  }
}

/**
 * Sends a notification email to the user
 * @param email - Email address of the user
 * @param subject - Email subject
 * @param message - Email message
 * @returns Promise with the result of the email sending
 */
export async function sendNotificationEmail(email: string, subject: string, message: string): Promise<boolean> {
  const mailOptions = {
    from: process.env.EMAIL_FROM,
    to: email,
    subject,
    text: message,
    html: `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <h2>${subject}</h2>
        <p>${message}</p>
      </div>
    `,
  }

try {
    await transporter.sendMail(mailOptions)
    return true
  } catch (error) {
    console.error("Error sending notification email:", error)
    return false
  }
}

[V0_FILE]typescript:file="lib/backup-service.ts" isMerged="true"
import fs from "fs"
import path from "path"
import { exec } from "child_process"
import util from "util"

const execPromise = util.promisify(exec)

/**
 * Creates a backup of the MongoDB database
 * @param outputDir - Directory to store the backup
 * @returns Promise with the path to the backup file
 */
export async function createBackup(outputDir = "./backups"): Promise<string> {
  try {
    // Ensure output directory exists
    if (!fs.existsSync(outputDir)) {
      fs.mkdirSync(outputDir, { recursive: true })
    }

// Generate backup filename with timestamp
    const timestamp = new Date().toISOString().replace(/[:.]/g, "-")
    const backupFilename = `formbuilder-backup-${timestamp}.gz`
    const backupPath = path.join(outputDir, backupFilename)

// Get MongoDB connection string
    const uri = process.env.MONGODB_URI
    if (!uri) {
      throw new Error("MongoDB URI not found in environment variables")
    }

// Extract database name from connection string
    const dbName = uri.split("/").pop()?.split("?")[0]
    if (!dbName) {
      throw new Error("Could not extract database name from MongoDB URI")
    }

// Use mongodump to create backup
    const command = `mongodump --uri="${uri}" --archive="${backupPath}" --gzip`
    await execPromise(command)

console.log(`Backup created successfully: ${backupPath}`)
    return backupPath
  } catch (error) {
    console.error("Error creating backup:", error)
    throw error
  }
}

/**
 * Restores a backup to the MongoDB database
 * @param backupPath - Path to the backup file
 * @returns Promise that resolves when the restore is complete
 */
export async function restoreBackup(backupPath: string): Promise<void> {
  try {
    // Check if backup file exists
    if (!fs.existsSync(backupPath)) {
      throw new Error(`Backup file not found: ${backupPath}`)
    }

// Get MongoDB connection string
    const uri = process.env.MONGODB_URI
    if (!uri) {
      throw new Error("MongoDB URI not found in environment variables")
    }

// Use mongorestore to restore backup
    const command = `mongorestore --uri="${uri}" --archive="${backupPath}" --gzip`
    await execPromise(command)

console.log(`Backup restored successfully from: ${backupPath}`)
  } catch (error) {
    console.error("Error restoring backup:", error)
    throw error
  }
}

/**
 * Lists all available backups
 * @param backupDir - Directory containing backups
 * @returns Array of backup file information
 */
export async function listBackups(backupDir = "./backups"): Promise<
  Array<{
    filename: string
    path: string
    size: number
    createdAt: Date
  }>
> {
  try {
    // Ensure backup directory exists
    if (!fs.existsSync(backupDir)) {
      fs.mkdirSync(backupDir, { recursive: true })
      return []
    }

// Get list of backup files
    const files = fs.readdirSync(backupDir).filter((file) => file.endsWith(".gz"))

// Get file details
    const backups = files.map((filename) => {
      const filePath = path.join(backupDir, filename)
      const stats = fs.statSync(filePath)

return {
        filename,
        path: filePath,
        size: stats.size,
        createdAt: stats.mtime,
      }
    })

// Sort by creation date (newest first)
    return backups.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
  } catch (error) {
    console.error("Error listing backups:", error)
    return []
  }
}

/**
 * Deletes a backup file
 * @param backupPath - Path to the backup file
 * @returns Promise that resolves to true if the deletion was successful
 */
export async function deleteBackup(backupPath: string): Promise<boolean> {
  try {
    // Check if backup file exists
    if (!fs.existsSync(backupPath)) {
      throw new Error(`Backup file not found: ${backupPath}`)
    }

// Delete the file
    fs.unlinkSync(backupPath)

console.log(`Backup deleted successfully: ${backupPath}`)
    return true
  } catch (error) {
    console.error("Error deleting backup:", error)
    return false
  }
}

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

[V0_FILE]typescript:file="app/api/admin/users/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import clientPromise from "@/lib/mongodb"
import type { ApiResponse } from "@/types/api"

export async function GET(request: NextRequest): Promise<NextResponse<ApiResponse<any>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session || session.user.role !== "admin") {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

const client = await clientPromise
    const db = client.db()

// Get all users
    const users = await db
      .collection("users")
      .find({})
      .sort({ createdAt: -1 })
      .project({
        password: 0,
        resetToken: 0,
        resetTokenExpires: 0,
        verificationToken: 0,
        verificationExpires: 0,
      })
      .toArray()

return NextResponse.json({
      success: true,
      data: users,
    })
  } catch (error) {
    console.error("Error fetching users:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/admin/users/[id]/block/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"
import type { ApiResponse, RequestContext } from "@/types/api"

export async function PUT(request: NextRequest, { params }: RequestContext): Promise<NextResponse<ApiResponse<null>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session || session.user.role !== "admin") {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

const userId = params.id
    const { isBlocked } = await request.json()

if (typeof isBlocked !== "boolean") {
      return NextResponse.json({ success: false, error: "Invalid request body" }, { status: 400 })
    }

// Prevent self-blocking
    if (userId === session.user.id) {
      return NextResponse.json({ success: false, error: "You cannot block your own account" }, { status: 400 })
    }

const client = await clientPromise
    const db = client.db()

// Update user's blocked status
    const result = await db.collection("users").updateOne(
      { _id: new ObjectId(userId) },
      {
        $set: {
          isBlocked,
          updatedAt: new Date(),
        },
      },
    )

if (result.matchedCount === 0) {
      return NextResponse.json({ success: false, error: "User not found" }, { status: 404 })
    }

return NextResponse.json({
      success: true,
      message: isBlocked ? "User blocked successfully" : "User unblocked successfully",
    })
  } catch (error) {
    console.error(`Error updating user ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/admin/users/[id]/role/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"
import type { ApiResponse, RequestContext } from "@/types/api"

export async function PUT(request: NextRequest, { params }: RequestContext): Promise<NextResponse<ApiResponse<null>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session || session.user.role !== "admin") {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

const userId = params.id
    const { role } = await request.json()

if (role !== "admin" && role !== "user") {
      return NextResponse.json({ success: false, error: "Invalid role" }, { status: 400 })
    }

const client = await clientPromise
    const db = client.db()

// Update user's role
    const result = await db.collection("users").updateOne(
      { _id: new ObjectId(userId) },
      {
        $set: {
          role,
          updatedAt: new Date(),
        },
      },
    )

if (result.matchedCount === 0) {
      return NextResponse.json({ success: false, error: "User not found" }, { status: 404 })
    }

return NextResponse.json({
      success: true,
      message: role === "admin" ? "User promoted to admin" : "Admin demoted to user",
    })
  } catch (error) {
    console.error(`Error updating user role ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/admin/users/[id]/email/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"
import { sendNotificationEmail } from "@/lib/email-service"
import type { ApiResponse, RequestContext } from "@/types/api"

export async function POST(request: NextRequest, { params }: RequestContext): Promise<NextResponse<ApiResponse<null>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session || session.user.role !== "admin") {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

const userId = params.id
    const { subject, message } = await request.json()

if (!subject || !message) {
      return NextResponse.json({ success: false, error: "Subject and message are required" }, { status: 400 })
    }

const client = await clientPromise
    const db = client.db()

// Get user's email
    const user = await db.collection("users").findOne({ _id: new ObjectId(userId) })

if (!user) {
      return NextResponse.json({ success: false, error: "User not found" }, { status: 404 })
    }

// Send email
    const success = await sendNotificationEmail(user.email, subject, message)

if (!success) {
      return NextResponse.json({ success: false, error: "Failed to send email" }, { status: 500 })
    }

return NextResponse.json({
      success: true,
      message: "Email sent successfully",
    })
  } catch (error) {
    console.error(`Error sending email to user ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/admin/layout.tsx" isMerged="true"
import type React from "react"
import { redirect } from "next/navigation"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { AppHeader } from "@/components/app-header"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import Link from "next/link"

export default async function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const session = await getServerSession(authOptions)

// Check if user is authenticated and is an admin
  if (!session || session.user.role !== "admin") {
    redirect("/login")
  }

return (
    <div className="min-h-screen bg-background">
      <AppHeader />
      <div className="container py-8">
        <div className="mb-8">
          <h1 className="text-4xl font-bold mb-2">Admin Dashboard</h1>
          <p className="text-muted-foreground">Manage your application and users</p>
        </div>

<Tabs defaultValue="overview" className="space-y-6">
          <div className="border-b">
            <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
              <Link href="/admin" className="mr-6">
                <TabsTrigger
                  value="overview"
                  className="rounded-none border-b-2 border-transparent px-4 py-3 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
                >
                  Overview
                </TabsTrigger>
              </Link>
              <Link href="/admin/users" className="mr-6">
                <TabsTrigger
                  value="users"
                  className="rounded-none border-b-2 border-transparent px-4 py-3 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
                >
                  Users
                </TabsTrigger>
              </Link>
              <Link href="/admin/backups" className="mr-6">
                <TabsTrigger
                  value="backups"
                  className="rounded-none border-b-2 border-transparent px-4 py-3 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
                >
                  Backups
                </TabsTrigger>
              </Link>
            </TabsList>
          </div>
          {children}
        </Tabs>
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="app/api/templates/[id]/comments/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { getTemplateById, getCommentsByFormId, createComment } from "@/lib/db-service"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"
import type { ApiResponse, RequestContext } from "@/types/api"

export async function GET(request: NextRequest, { params }: RequestContext): Promise<NextResponse<ApiResponse<any>>> {
  try {
    const templateId = params.id

// Get the template to check if it exists
    const template = await getTemplateById(templateId)

if (!template) {
      return NextResponse.json({ success: false, error: "Template not found" }, { status: 404 })
    }

// Get comments for the template
    const comments = await getCommentsByFormId(templateId)

// Get user details for each comment
    const client = await clientPromise
    const db = client.db()

const commentsWithUserDetails = await Promise.all(
      comments.map(async (comment) => {
        const user = await db
          .collection("users")
          .findOne({ _id: new ObjectId(comment.userId.toString()) }, { projection: { name: 1, email: 1, image: 1 } })

return {
          ...comment,
          user: user || { name: "Anonymous", email: "", image: null },
        }
      }),
    )

return NextResponse.json({
      success: true,
      data: commentsWithUserDetails,
    })
  } catch (error) {
    console.error(`Error fetching comments for template ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

export async function POST(request: NextRequest, { params }: RequestContext): Promise<NextResponse<ApiResponse<any>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const templateId = params.id
    const { content } = await request.json()

if (!content || typeof content !== "string" || content.trim() === "") {
      return NextResponse.json({ success: false, error: "Comment content is required" }, { status: 400 })
    }

// Get the template to check if it exists
    const template = await getTemplateById(templateId)

if (!template) {
      return NextResponse.json({ success: false, error: "Template not found" }, { status: 404 })
    }

// Create the comment
    const comment = await createComment({
      templateId,
      userId: new ObjectId(session.user.id),
      content: content.trim(),
      createdAt: new Date(),
    })

if (!comment) {
      throw new Error("Failed to create comment")
    }

return NextResponse.json({
      success: true,
      data: comment,
      message: "Comment added successfully",
    })
  } catch (error) {
    console.error(`Error adding comment to template ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/templates/[id]/comments/[commentId]/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"
import type { ApiResponse, ResponseRequestContext } from "@/types/api"

export async function DELETE(
  request: NextRequest,
  { params }: ResponseRequestContext,
): Promise<NextResponse<ApiResponse<null>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const templateId = params.id
    const commentId = params.responseId

const client = await clientPromise
    const db = client.db()

// Get the comment to check permissions
    const comment = await db.collection("comments").findOne({
      _id: new ObjectId(commentId),
      templateId,
    })

if (!comment) {
      return NextResponse.json({ success: false, error: "Comment not found" }, { status: 404 })
    }

// Get the template to check permissions
    const template = await db.collection("templates").findOne({
      _id: new ObjectId(templateId),
    })

if (!template) {
      return NextResponse.json({ success: false, error: "Template not found" }, { status: 404 })
    }

// Check if user has permission to delete the comment
    const isCommentOwner = comment.userId.toString() === session.user.id
    const isTemplateOwner = template.createdBy.toString() === session.user.id
    const isAdmin = session.user.role === "admin"

if (!isCommentOwner && !isTemplateOwner && !isAdmin) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 403 })
    }

// Delete the comment
    const result = await db.collection("comments").deleteOne({
      _id: new ObjectId(commentId),
    })

if (result.deletedCount === 0) {
      return NextResponse.json({ success: false, error: "Failed to delete comment" }, { status: 500 })
    }

// Decrement comment count on the template
    await db.collection("templates").updateOne({ _id: new ObjectId(templateId) }, { $inc: { comments: -1 } })

return NextResponse.json({
      success: true,
      message: "Comment deleted successfully",
    })
  } catch (error) {
    console.error(`Error deleting comment ${params.responseId} for template ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="components/like-button.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { useToast } from "@/components/ui/use-toast"
import { useSession } from "next-auth/react"
import { Heart } from "lucide-react"

interface LikeButtonProps {
  templateId: string
  initialLikeCount: number
  initialLiked: boolean
}

export function LikeButton({ templateId, initialLikeCount, initialLiked }: LikeButtonProps) {
  const { data: session } = useSession()
  const { toast } = useToast()
  const [likeCount, setLikeCount] = useState(initialLikeCount)
  const [isLiked, setIsLiked] = useState(initialLiked)
  const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
    if (session) {
      checkIfLiked()
    }
  }, [session, templateId])

const checkIfLiked = async () => {
    try {
      const response = await fetch(`/api/templates/${templateId}/likes/check`)
      if (response.ok) {
        const data = await response.json()
        setIsLiked(data.liked)
      }
    } catch (error) {
      console.error("Error checking like status:", error)
    }
  }

const handleToggleLike = async () => {
    if (!session) {
      toast({
        title: "Sign in required",
        description: "Please sign in to like this template",
      })
      return
    }

setIsLoading(true)

// Optimistic update
    setIsLiked(!isLiked)
    setLikeCount(isLiked ? likeCount - 1 : likeCount + 1)

try {
      const response = await fetch(`/api/templates/${templateId}/likes`, {
        method: "POST",
      })

if (!response.ok) {
        throw new Error("Failed to toggle like")
      }

const data = await response.json()

// Update with actual server data
      setIsLiked(data.data.liked)
      setLikeCount(data.data.count)
    } catch (error) {
      console.error("Error toggling like:", error)

// Revert optimistic update on error
      setIsLiked(!isLiked)
      setLikeCount(isLiked ? likeCount + 1 : likeCount - 1)

toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to update like status. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Button
      variant="ghost"
      size="sm"
      className={`flex items-center gap-1 ${isLiked ? "text-red-500" : ""}`}
      onClick={handleToggleLike}
      disabled={isLoading}
    >
      <Heart className={`h-4 w-4 ${isLiked ? "fill-red-500" : ""}`} />
      <span>{likeCount}</span>
    </Button>
  )
}

[V0_FILE]typescript:file="app/api/templates/[id]/likes/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { toggleLike } from "@/lib/db-service"
import type { ApiResponse, RequestContext } from "@/types/api"

export async function POST(
  request: NextRequest,
  { params }: RequestContext,
): Promise<NextResponse<ApiResponse<{ liked: boolean; count: number }>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const templateId = params.id
    const userId = session.user.id

// Toggle like status
    const result = await toggleLike(templateId, userId)

return NextResponse.json({
      success: true,
      data: result,
      message: result.liked ? "Template liked" : "Template unliked",
    })
  } catch (error) {
    console.error(`Error toggling like for template ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/templates/[id]/likes/check/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { hasUserLikedForm, getLikesByFormId } from "@/lib/db-service"
import type { ApiResponse, RequestContext } from "@/types/api"

export async function GET(
  request: NextRequest,
  { params }: RequestContext,
): Promise<NextResponse<ApiResponse<{ liked: boolean; count: number }>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const templateId = params.id
    const userId = session.user.id

// Check if user has liked the form
    const liked = await hasUserLikedForm(templateId, userId)

// Get total like count
    const count = await getLikesByFormId(templateId)

return NextResponse.json({
      success: true,
      data: { liked, count },
    })
  } catch (error) {
    console.error(`Error checking like status for template ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/auth/facebook/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { getUserByEmail, createUser } from "@/lib/db-service"
import type { ApiResponse } from "@/types/api"

export async function POST(request: NextRequest): Promise<NextResponse<ApiResponse>> {
  try {
    const session = await getServerSession(authOptions)

// If user is already authenticated, return success
    if (session) {
      return NextResponse.json({
        success: true,
        message: "User is already authenticated",
      })
    }

const { name, email, facebookId, image } = await request.json()

if (!name || !email || !facebookId) {
      return NextResponse.json({ success: false, error: "Name, email, and facebookId are required" }, { status: 400 })
    }

// Check if user exists
    let user = await getUserByEmail(email)

if (user) {
      // Update existing user with Facebook ID if not already set
      if (!user.facebookId) {
        const client = await import("@/lib/mongodb").then((mod) => mod.default)
        const db = (await client).db()

await db.collection("users").updateOne(
          { _id: user._id },
          {
            $set: {
              facebookId,
              image: image || user.image,
              lastLogin: new Date(),
              isVerified: true, // Facebook users are automatically verified
            },
          },
        )
      }
    } else {
      // Create new user
      user = await createUser({
        name,
        email,
        image,
        role: "user",
        isBlocked: false,
        createdAt: new Date(),
        updatedAt: new Date(),
        lastLogin: new Date(),
        facebookId,
        isVerified: true, // Facebook users are automatically verified
      })
    }

if (!user) {
      return NextResponse.json({ success: false, error: "Failed to create or update user" }, { status: 500 })
    }

return NextResponse.json({
      success: true,
      message: "Facebook authentication successful",
    })
  } catch (error) {
    console.error("Facebook authentication error:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/forms/[id]/notify/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { getTemplateById } from "@/lib/db-service"
import { sendNotificationEmail } from "@/lib/email-service"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"
import type { ApiResponse, RequestContext } from "@/types/api"

export async function POST(request: NextRequest, { params }: RequestContext): Promise<NextResponse<ApiResponse<null>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const formId = params.id
    const { responseId } = await request.json()

if (!responseId) {
      return NextResponse.json({ success: false, error: "Response ID is required" }, { status: 400 })
    }

// Get the template
    const template = await getTemplateById(formId)

if (!template) {
      return NextResponse.json({ success: false, error: "Template not found" }, { status: 404 })
    }

// Get the response
    const client = await clientPromise
    const db = client.db()

const response = await db.collection("responses").findOne({
      _id: new ObjectId(responseId),
      templateId: formId,
    })

if (!response) {
      return NextResponse.json({ success: false, error: "Response not found" }, { status: 404 })
    }

// Get the user who submitted the response
    const user = await db.collection("users").findOne({
      _id: new ObjectId(response.userId),
    })

if (!user || !user.email) {
      return NextResponse.json({ success: false, error: "User email not found" }, { status: 404 })
    }

// Generate email content
    const subject = `Your Response to ${template.title}`

let message = `<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
      <h2>Your Response to ${template.title}</h2>
      <p>Thank you for submitting your response. Here's a summary of your submission:</p>
      <div style="margin: 20px 0; padding: 15px; border: 1px solid #eee; border-radius: 5px;">`

// Add each question and response
    for (const question of template.questions) {
      const answer = response.responses[question.id]

if (answer !== undefined) {
        message += `<div style="margin-bottom: 15px;">
          <p style="font-weight: bold; margin-bottom: 5px;">${question.title}</p>`

if (Array.isArray(answer)) {
          // For checkbox responses
          message += `<p>${answer.join(", ")}</p>`
        } else if (question.type === "file" && typeof answer === "string") {
          // For file uploads
          message += `<p><a href="${answer}" target="_blank">View Uploaded File</a></p>`
        } else {
          // For text, textarea, number, select
          message += `<p>${answer}</p>`
        }

message += `</div>`
      }
    }

message += `</div>
      <p>You can view all your responses in your dashboard.</p>
      <p>Thank you for using our platform!</p>
    </div>`

// Send email
    const success = await sendNotificationEmail(user.email, subject, message)

if (!success) {
      return NextResponse.json({ success: false, error: "Failed to send email" }, { status: 500 })
    }

return NextResponse.json({
      success: true,
      message: "Response summary email sent successfully",
    })
  } catch (error) {
    console.error(`Error sending response notification for form ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/templates/featured/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import clientPromise from "@/lib/mongodb"
import type { ApiResponse } from "@/types/api"

export async function GET(request: NextRequest): Promise<NextResponse<ApiResponse<any>>> {
  try {
    const client = await clientPromise
    const db = client.db()

// Get top 5 templates by responses
    const topByResponses = await db
      .collection("templates")
      .find({ isPublic: true })
      .sort({ responses: -1 })
      .limit(3)
      .toArray()

// Get top 5 templates by likes
    const topByLikes = await db.collection("templates").find({ isPublic: true }).sort({ likes: -1 }).limit(3).toArray()

// Combine and deduplicate
    const combinedTemplates = [...topByResponses]

for (const template of topByLikes) {
      if (!combinedTemplates.some((t) => t._id.toString() === template._id.toString())) {
        combinedTemplates.push(template)
      }
    }

// Get latest templates if we need more to reach 6
    if (combinedTemplates.length < 6) {
      const existingIds = combinedTemplates.map((t) => t._id)

const latestTemplates = await db
        .collection("templates")
        .find({
          isPublic: true,
          _id: { $nin: existingIds },
        })
        .sort({ createdAt: -1 })
        .limit(6 - combinedTemplates.length)
        .toArray()

combinedTemplates.push(...latestTemplates)
    }

// Limit to 6 templates
    const featuredTemplates = combinedTemplates.slice(0, 6)

return NextResponse.json({
      success: true,
      data: featuredTemplates,
    })
  } catch (error) {
    console.error("Error fetching featured templates:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/templates/tags/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import clientPromise from "@/lib/mongodb"
import type { ApiResponse } from "@/types/api"

export async function GET(request: NextRequest): Promise<NextResponse<ApiResponse<any>>> {
  try {
    const client = await clientPromise
    const db = client.db()

// Aggregate tags and their counts
    const tagCounts = await db
      .collection("templates")
      .aggregate([
        { $match: { isPublic: true } },
        { $unwind: "$tags" },
        {
          $group: {
            _id: "$tags",
            count: { $sum: 1 },
          },
        },
        { $sort: { count: -1 } },
        { $limit: 30 },
        {
          $project: {
            _id: 0,
            tag: "$_id",
            count: 1,
          },
        },
      ])
      .toArray()

return NextResponse.json({
      success: true,
      data: tagCounts,
    })
  } catch (error) {
    console.error("Error fetching tags:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/templates/[id]/view/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/components/ui/use-toast"
import { useSession } from "next-auth/react"
import { ArrowLeft, Edit, Share2 } from "lucide-react"
import { AppHeader } from "@/components/app-header"
import { LikeButton } from "@/components/like-button"
import { CommentsSection } from "@/components/comments-section"
import { format } from "date-fns"

export default function TemplateViewPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { toast } = useToast()
  const { data: session } = useSession()
  const [template, setTemplate] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [likeCount, setLikeCount] = useState(0)
  const [isLiked, setIsLiked] = useState(false)

useEffect(() => {
    fetchTemplate()
  }, [params.id])

const fetchTemplate = async () => {
    setIsLoading(true)
    try {
      const response = await fetch(`/api/templates/${params.id}`)
      if (!response.ok) throw new Error("Failed to fetch template")
      const data = await response.json()
      setTemplate(data.data)
      setLikeCount(data.data.likes || 0)

// Check if user has liked this template
      if (session) {
        const likeResponse = await fetch(`/api/templates/${params.id}/likes/check`)
        if (likeResponse.ok) {
          const likeData = await likeResponse.json()
          setIsLiked(likeData.data.liked)
        }
      }
    } catch (error) {
      console.error("Error fetching template:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to load template. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleShareLink = () => {
    const shareUrl = `${window.location.origin}/forms/${params.id}/fill`

const formatDate = (dateString: string) => {
    return format(new Date(dateString), "PPP")
  }

if (!template) {
    return (
      <div className="min-h-screen bg-background">
        <AppHeader />
        <main className="container py-8">
          <div className="text-center py-12">
            <h2 className="text-2xl font-bold mb-2">Template not found</h2>
            <p className="text-muted-foreground mb-6">
              The template you're looking for doesn't exist or you don't have access to it.
            </p>
            <Button asChild>
              <Link href="/dashboard">Go to Dashboard</Link>
            </Button>
          </div>
        </main>
      </div>
    )
  }

const isCreator = session?.user?.id === template.createdBy
  const isAdmin = session?.user?.role === "admin"

return (
    <div className="min-h-screen bg-background">
      <AppHeader />
      <main className="container py-8">
        <div className="mb-6">
          <Button variant="ghost" size="icon" asChild className="mb-2">
            <Link href="/dashboard">
              <ArrowLeft className="h-4 w-4" />
              <span className="sr-only">Back</span>
            </Link>
          </Button>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="md:col-span-2 space-y-6">
            <Card>
              <CardHeader>
                <div className="flex justify-between items-start">
                  <div>
                    <CardTitle className="text-2xl">{template.title}</CardTitle>
                    <CardDescription>
                      Created on {formatDate(template.createdAt)} • {template.responses} responses
                    </CardDescription>
                  </div>
                  <div className="flex items-center gap-2">
                    <LikeButton templateId={params.id} initialLikeCount={likeCount} initialLiked={isLiked} />
                    {(isCreator || isAdmin) && (
                      <Button variant="outline" size="sm" asChild>
                        <Link href={`/templates/${params.id}/edit`}>
                          <Edit className="h-4 w-4 mr-2" />
                          Edit
                        </Link>
                      </Button>
                    )}
                    <Button variant="outline" size="sm" onClick={handleShareLink}>
                      <Share2 className="h-4 w-4 mr-2" />
                      Share
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                {template.imageUrl && (
                  <div className="relative h-60 w-full mb-4">
                    <Image
                      src={template.imageUrl || "/placeholder.svg"}
                      alt={template.title}
                      fill
                      className="object-cover rounded-md"
                    />
                  </div>
                )}
                <div>
                  <h3 className="text-lg font-medium mb-2">Description</h3>
                  <p className="text-muted-foreground whitespace-pre-line">
                    {template.description || "No description provided"}
                  </p>
                </div>
                <div>
                  <h3 className="text-lg font-medium mb-2">Tags</h3>
                  <div className="flex flex-wrap gap-2">
                    {template.tags.map((tag: string) => (
                      <Badge key={tag} variant="secondary">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </div>
                <div>
                  <h3 className="text-lg font-medium mb-2">Questions</h3>
                  <div className="space-y-3">
                    {template.questions.map((question: any, index: number) => (
                      <div key={question.id} className="p-3 border rounded-md">
                        <div className="flex justify-between">
                          <h4 className="font-medium">
                            {index + 1}. {question.title}
                            {question.required && <span className="text-red-500 ml-1">*</span>}
                          </h4>
                          <Badge variant="outline">{question.type}</Badge>
                        </div>
                        {question.description && (
                          <p className="text-sm text-muted-foreground mt-1">{question.description}</p>
                        )}
                        {(question.type === "checkbox" || question.type === "select") && question.options && (
                          <div className="mt-2">
                            <p className="text-sm font-medium">Options:</p>
                            <ul className="list-disc list-inside text-sm text-muted-foreground">
                              {question.options.map((option: string) => (
                                <li key={option}>{option}</li>
                              ))}
                            </ul>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              </CardContent>
              <CardFooter>
                <Button asChild className="w-full">
                  <Link href={`/forms/${params.id}/fill`}>Fill Form</Link>
                </Button>
              </CardFooter>
            </Card>

<div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Form Details</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Visibility:</span>
                  <Badge variant={template.isPublic ? "default" : "outline"}>
                    {template.isPublic ? "Public" : "Private"}
                  </Badge>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Questions:</span>
                  <span>{template.questions.length}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Responses:</span>
                  <span>{template.responses}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Likes:</span>
                  <span>{likeCount}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Comments:</span>
                  <span>{template.comments || 0}</span>
                </div>
                {template.topic && (
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Topic:</span>
                    <Badge variant="outline">{template.topic}</Badge>
                  </div>
                )}
              </CardContent>
            </Card>

{(isCreator || isAdmin) && (
              <Card>
                <CardHeader>
                  <CardTitle>Admin Actions</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <Button variant="outline" className="w-full" asChild>
                    <Link href={`/templates/${params.id}/edit`}>Edit Template</Link>
                  </Button>
                  <Button variant="outline" className="w-full" asChild>
                    <Link href={`/forms/${params.id}/results`}>View Responses</Link>
                  </Button>
                  {template.responses > 0 && (
                    <Button variant="outline" className="w-full" asChild>
                      <Link href={`/forms/${params.id}/analytics`}>View Analytics</Link>
                    </Button>
                  )}
                </CardContent>
              </Card>
            )}

<Card>
              <CardHeader>
                <CardTitle>Related Templates</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-center py-4 text-muted-foreground">
                  <p>Loading related templates...</p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescript:file="app/forms/[id]/submit-success/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/components/ui/use-toast"
import { CheckCircle, Copy, Mail, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { AppHeader } from "@/components/app-header"

export default function SubmitSuccessPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { toast } = useToast()
  const [isEmailSending, setIsEmailSending] = useState(false)
  const [templateTitle, setTemplateTitle] = useState("")
  const [isLoading, setIsLoading] = useState(true)

const responseId = searchParams.get("responseId")

useEffect(() => {
    if (!responseId) {
      router.push("/dashboard")
      return
    }

fetchTemplateInfo()
  }, [responseId, params.id])

const fetchTemplateInfo = async () => {
    setIsLoading(true)
    try {
      const response = await fetch(`/api/templates/${params.id}`)
      if (response.ok) {
        const data = await response.json()
        setTemplateTitle(data.data.title)
      }
    } catch (error) {
      console.error("Error fetching template info:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleCopyLink = () => {
    const shareUrl = `${window.location.origin}/forms/${params.id}/responses/${responseId}`

if (navigator.clipboard) {
      navigator.clipboard
        .writeText(shareUrl)
        .then(() => {
          toast({
            title: "Link copied",
            description: "Response link copied to clipboard",
          })
        })
        .catch(() => {
          // Fallback
          prompt("Copy this link:", shareUrl)
        })
    } else {
      // Fallback for browsers that don't support clipboard API
      prompt("Copy this link:", shareUrl)
    }
  }

const handleSendEmail = async () => {
    if (!responseId) return

setIsEmailSending(true)
    try {
      const response = await fetch(`/api/forms/${params.id}/notify`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ responseId }),
      })

if (!response.ok) throw new Error("Failed to send email")

toast({
        title: "Email sent",
        description: "A copy of your response has been sent to your email",
      })
    } catch (error) {
      console.error("Error sending email:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to send email. Please try again.",
      })
    } finally {
      setIsEmailSending(false)
    }
  }

return (
    <div className="min-h-screen bg-background">
      <AppHeader />
      <main className="container py-8">
        <div className="max-w-md mx-auto">
          <Card>
            <CardHeader className="text-center">
              <div className="flex justify-center mb-4">
                <div className="h-16 w-16 rounded-full bg-green-100 flex items-center justify-center">
                  <CheckCircle className="h-8 w-8 text-green-600" />
                </div>
              </div>
              <CardTitle className="text-2xl">Submission Successful!</CardTitle>
              <CardDescription>
                Your response to "{templateTitle}" has been recorded. Thank you for your submission!
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex justify-center space-x-4">
                <Button variant="outline" onClick={handleCopyLink}>
                  <Copy className="mr-2 h-4 w-4" />
                  Copy Link
                </Button>
                <Button variant="outline" onClick={handleSendEmail} disabled={isEmailSending}>
                  <Mail className="mr-2 h-4 w-4" />
                  {isEmailSending ? "Sending..." : "Email Copy"}
                </Button>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="ghost" asChild>
                <Link href="/dashboard">
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Dashboard
                </Link>
              </Button>
              <Button asChild>
                <Link href={`/forms/${params.id}/fill`}>Fill Again</Link>
              </Button>
            </CardFooter>
          </Card>
        </div>
      </main>
    </div>
  )
}

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

[V0_FILE]typescript:file="app/api/forms/[id]/submit/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { getTemplateById, createResponse } from "@/lib/db-service"
import { ObjectId } from "mongodb"
import type { ApiResponse, CreateResponseBody, RequestContext } from "@/types/api"

export async function POST(
  request: NextRequest,
  { params }: RequestContext,
): Promise<NextResponse<ApiResponse<{ responseId: string }>>> {
  try {
    const session = await getServerSession(authOptions)

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const formId = params.id
    const { responses }: CreateResponseBody = await request.json()

if (!responses) {
      return NextResponse.json({ success: false, error: "No responses provided" }, { status: 400 })
    }

// Get the template to validate responses
    const template = await getTemplateById(formId)

if (!template) {
      return NextResponse.json({ success: false, error: "Template not found" }, { status: 404 })
    }

// Validate required fields
    const requiredQuestions = template.questions.filter((q) => q.required)

for (const question of requiredQuestions) {
      // Skip questions with conditions that might not be shown
      if (question.conditions && question.conditions.length > 0) {
        // Check if conditions are met
        const allConditionsMet = question.conditions.every((condition) => {
          const sourceValue = responses[condition.questionId]

if (sourceValue === undefined) return false

// If conditions aren't met, this question isn't shown, so skip validation
        if (!allConditionsMet) continue
      }

// Validate required field
      if (responses[question.id] === undefined || responses[question.id] === "") {
        return NextResponse.json(
          { success: false, error: `Required field missing: ${question.title}` },
          { status: 400 },
        )
      }

// Validate against custom validation rules
      if (question.validations) {
        for (const validation of question.validations) {
          const value = responses[question.id]
          let isValid = true

switch (validation.type) {
            case "required":
              isValid = value !== undefined && value !== ""
              break
            case "min":
              if (question.type === "number") {
                isValid = Number(value) >= Number(validation.value)
              } else {
                isValid = String(value).length >= Number(validation.value)
              }
              break
            case "max":
              if (question.type === "number") {
                isValid = Number(value) <= Number(validation.value)
              } else {
                isValid = String(value).length <= Number(validation.value)
              }
              break
            case "pattern":
              isValid = new RegExp(validation.value as string).test(String(value))
              break
            case "email":
              isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value))
              break
            case "url":
              isValid = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/.test(String(value))
              break
            case "fileType":
              // File type validation would be handled during upload
              isValid = true
              break
            case "fileSize":
              // File size validation would be handled during upload
              isValid = true
              break
          }

if (!isValid) {
            return NextResponse.json(
              { success: false, error: validation.message || `Validation failed for ${question.title}` },
              { status: 400 },
            )
          }
        }
      }
    }

// Create the response
    const responseData = {
      templateId: new ObjectId(formId),
      userId: new ObjectId(session.user.id),
      responses,
    }

const result = await createResponse(responseData)

if (!result) {
      return NextResponse.json({ success: false, error: "Failed to save response" }, { status: 500 })
    }

return NextResponse.json(
      {
        success: true,
        message: "Response submitted successfully",
        data: { responseId: result._id.toString() },
      },
      {
        status: 201,
        headers: {
          // Add a Location header for redirection
          Location: `/forms/${formId}/submit-success?responseId=${result._id.toString()}`,
        },
      },
    )
  } catch (error) {
    console.error(`Error submitting form ${params.id}:`, error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "formbuilder",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "bcryptjs": "^2.4.3",
    "class-variance-authority": "^0.7.0",
    "cloudinary": "^2.0.1",
    "clsx": "^2.1.0",
    "date-fns": "^3.3.1",
    "file-saver": "^2.0.5",
    "lucide-react": "^0.323.0",
    "mongodb": "^6.3.0",
    "next": "14.1.0",
    "next-auth": "^4.24.5",
    "next-themes": "^0.2.1",
    "nodemailer": "^6.9.9",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "recharts": "^2.12.0",
    "sharp": "^0.33.2",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@types/bcryptjs": "^2.4.6",
    "@types/file-saver": "^2.0.7",
    "@types/node": "^20.11.16",
    "@types/nodemailer": "^6.4.14",
    "@types/react": "^18.2.52",
    "@types/react-beautiful-dnd": "^13.1.8",
    "@types/react-dom": "^18.2.18",
    "autoprefixer": "^10.4.17",
    "eslint": "^8.56.0",
    "eslint-config-next": "14.1.0",
    "postcss": "^8.4.33",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3"
  }
}

[V0_FILE]typescript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [
      'res.cloudinary.com',
      'lh3.googleusercontent.com',
      'platform-lookaside.fbsbx.com',
      'avatars.githubusercontent.com'
    ],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**',
      },
    ],
  },
  experimental: {
    serverComponentsExternalPackages: ['bcryptjs'],
    serverActions: {
      bodySizeLimit: '10mb',
    },
  },
};

export default nextConfig;

[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

[V0_FILE]typescript:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

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

export default config

[V0_FILE]css:file="app/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;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

[V0_FILE]plaintext:file=".env.local.example" isEdit="true" isMerged="true"
# Authentication
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# Facebook OAuth
FACEBOOK_CLIENT_ID=your_facebook_client_id
FACEBOOK_CLIENT_SECRET=your_facebook_client_secret

# MongoDB
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/formbuilder_db?retryWrites=true&w=majority

# Cloudinary
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

# Email (for verification and password reset)
EMAIL_SERVER_HOST=smtp.example.com
EMAIL_SERVER_PORT=587
EMAIL_SERVER_USER=your_email_username
EMAIL_SERVER_PASSWORD=your_email_password
EMAIL_SERVER_SECURE=false
EMAIL_FROM=noreply@example.com

# Security
INIT_SECRET=your_initialization_secret_key

# Admin User (created during initialization)
ADMIN_EMAIL=admin@example.com
ADMIN_PASSWORD=securepassword

[V0_FILE]typescript:file="postcss.config.js" isMerged="true"
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

[V0_FILE]typescript:file="components/ui/badge.tsx" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
        success: "border-transparent bg-green-500 text-white hover:bg-green-500/80",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }

[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function formatBytes(bytes: number, decimals = 2) {
  if (bytes === 0) return "0 Bytes"

const k = 1024
  const dm = decimals < 0 ? 0 : decimals
  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]

const i = Math.floor(Math.log(bytes) / Math.log(k))

return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]
}

export function generateUniqueId() {
  return Date.now().toString(36) + Math.random().toString(36).substring(2)
}

export function truncateString(str: string, num: number) {
  if (str.length <= num) {
    return str
  }
  return str.slice(0, num) + "..."
}

export function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
  let timeout: NodeJS.Timeout | null = null

return (...args: Parameters<T>) => {
    const later = () => {
      timeout = null
      func(...args)
    }

if (timeout !== null) {
      clearTimeout(timeout)
    }
    timeout = setTimeout(later, wait)
  }
}

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

export function isValidUrl(url: string): boolean {
  try {
    new URL(url)
    return true
  } catch (e) {
    return false
  }
}

[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getToken } from "next-auth/jwt"

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl

// Check if the path is protected
  const protectedPaths = ["/dashboard", "/templates/create", "/templates/edit", "/profile", "/settings", "/admin"]
  const isProtectedPath = protectedPaths.some((path) => pathname.startsWith(path))

// Check if the path is for admin only
  const adminPaths = ["/admin"]
  const isAdminPath = adminPaths.some((path) => pathname.startsWith(path))

// Get the token
  const token = await getToken({ req: request, secret: process.env.NEXTAUTH_SECRET })

// If it's a protected path and user is not authenticated, redirect to login
  if (isProtectedPath && !token) {
    const url = new URL("/login", request.url)
    url.searchParams.set("callbackUrl", encodeURI(pathname))
    return NextResponse.redirect(url)
  }

// If it's an admin path and user is not an admin, redirect to dashboard
  if (isAdminPath && token?.role !== "admin") {
    return NextResponse.redirect(new URL("/dashboard", request.url))
  }

// If user is already authenticated and tries to access login/register, redirect to dashboard
  if ((pathname === "/login" || pathname === "/register") && token) {
    return NextResponse.redirect(new URL("/dashboard", request.url))
  }

return NextResponse.next()
}

export const config = {
  matcher: [
    "/dashboard/:path*",
    "/templates/:path*",
    "/profile/:path*",
    "/settings/:path*",
    "/admin/:path*",
    "/login",
    "/register",
  ],
}

[V0_FILE]typescript:file="components/ui/toast.tsx" isMerged="true"
import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

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

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}

[V0_FILE]typescript: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]typescript:file="components/ui/use-toast.ts" isMerged="true"
"use client"

// Inspired by react-hot-toast library
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_VALUE
  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?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

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

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

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

toastTimeouts.set(toastId, timeout)
}

export 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 }),
  }
}

export { useToast, toast }

[V0_FILE]typescript: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 <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

[V0_FILE]typescript:file="hooks/use-mobile.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useMobile() {
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    // Check if window is defined (browser environment)
    if (typeof window !== "undefined") {
      const checkMobile = () => {
        setIsMobile(window.innerWidth < 768)
      }

// Initial check
      checkMobile()

// Add event listener for window resize
      window.addEventListener("resize", checkMobile)

// Clean up event listener
      return () => window.removeEventListener("resize", checkMobile)
    }
  }, [])

return isMobile
}

[V0_FILE]typescript:file="hooks/use-toast.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { useToast as useToastUI } from "@/components/ui/use-toast"

export const useToast = useToastUI

[V0_FILE]typescript:file="app/api/auth/[...nextauth]/route.ts" isEdit="true" isMerged="true"
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import FacebookProvider from "next-auth/providers/facebook"
import CredentialsProvider from "next-auth/providers/credentials"
import type { NextAuthOptions } from "next-auth"
import { getUserByEmail, createUser } from "@/lib/db-service"
import bcrypt from "bcryptjs"
import { ObjectId } from "mongodb"

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID as string,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET as string,
    }),
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          return null
        }

try {
          // Get user from database
          const user = await getUserByEmail(credentials.email)

// If user doesn't exist or password doesn't match
          if (!user || !user.password) {
            return null
          }

// Check if user is verified
          if (user.isVerified === false) {
            throw new Error("Please verify your email before logging in")
          }

// Check if user is blocked
          if (user.isBlocked === true) {
            throw new Error("Your account has been blocked. Please contact support.")
          }

// Verify password
          const isPasswordValid = await bcrypt.compare(credentials.password, user.password)

if (!isPasswordValid) {
            return null
          }

// Update last login time
          await updateUserLastLogin(user._id.toString())

return {
            id: user._id.toString(),
            name: user.name,
            email: user.email,
            role: user.role || "user",
            image: user.image,
          }
        } catch (error) {
          console.error("Authentication error:", error)
          throw error // Rethrow to show error message to user
        }
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user, account }) {
      // Add role to the token when user signs in
      if (user) {
        token.role = user.role || "user"
        token.id = user.id
      }

// If social sign in, check if user exists in our database
      if (account?.provider === "google") {
        await handleGoogleSignIn(token)
      } else if (account?.provider === "facebook") {
        await handleFacebookSignIn(token)
      }

return token
    },
    async session({ session, token }) {
      // Add role to the session
      if (session.user) {
        session.user.role = token.role as string
        session.user.id = token.id as string
      }
      return session
    },
  },
  pages: {
    signIn: "/login",
    error: "/login",
    verifyRequest: "/verify-request",
  },
  session: {
    strategy: "jwt",
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
  secret: process.env.NEXTAUTH_SECRET,
}

// Helper function to update user's last login time
async function updateUserLastLogin(userId: string) {
  try {
    const client = await import("@/lib/mongodb").then((mod) => mod.default)
    const db = (await client).db()

await db.collection("users").updateOne({ _id: new ObjectId(userId) }, { $set: { lastLogin: new Date() } })
  } catch (error) {
    console.error("Error updating last login:", error)
  }
}

// Helper function to handle Google sign in
async function handleGoogleSignIn(token: any) {
  try {
    // Check if user exists in our database
    const existingUser = await getUserByEmail(token.email)

if (!existingUser) {
      // Create new user
      await createUser({
        name: token.name,
        email: token.email,
        image: token.picture,
        role: "user",
        isBlocked: false,
        createdAt: new Date(),
        updatedAt: new Date(),
        lastLogin: new Date(),
        googleId: token.sub,
        isVerified: true, // Google users are automatically verified
      })
    } else {
      // Update user's Google ID and last login
      const client = await import("@/lib/mongodb").then((mod) => mod.default)
      const db = (await client).db()

await db.collection("users").updateOne(
        { _id: existingUser._id },
        {
          $set: {
            lastLogin: new Date(),
            googleId: token.sub,
            image: token.picture || existingUser.image,
            isVerified: true, // Ensure Google users are always verified
          },
        },
      )
    }
  } catch (error) {
    console.error("Error handling Google sign in:", error)
  }
}

// Helper function to handle Facebook sign in
async function handleFacebookSignIn(token: any) {
  try {
    // Check if user exists in our database
    const existingUser = await getUserByEmail(token.email)

if (!existingUser) {
      // Create new user
      await createUser({
        name: token.name,
        email: token.email,
        image: token.picture,
        role: "user",
        isBlocked: false,
        createdAt: new Date(),
        updatedAt: new Date(),
        lastLogin: new Date(),
        facebookId: token.sub,
        isVerified: true, // Facebook users are automatically verified
      })
    } else {
      // Update user's Facebook ID and last login
      const client = await import("@/lib/mongodb").then((mod) => mod.default)
      const db = (await client).db()

await db.collection("users").updateOne(
        { _id: existingUser._id },
        {
          $set: {
            lastLogin: new Date(),
            facebookId: token.sub,
            image: token.picture || existingUser.image,
            isVerified: true, // Ensure Facebook users are always verified
          },
        },
      )
    }
  } catch (error) {
    console.error("Error handling Facebook sign in:", error)
  }
}

const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

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

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { signIn, useSession } from "next-auth/react"
import Link from "next/link"
import { AlertCircle } from "lucide-react"

export default function LoginPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { status } = useSession()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

// Get error message from URL if present
  useEffect(() => {
    const errorParam = searchParams.get("error")
    if (errorParam) {
      switch (errorParam) {
        case "CredentialsSignin":
          setError("Invalid email or password")
          break
        case "OAuthAccountNotLinked":
          setError("Email already in use with a different provider")
          break
        case "EmailSignin":
          setError("Error sending verification email")
          break
        default:
          setError(errorParam)
      }
    }
  }, [searchParams])

// Redirect if already logged in
  useEffect(() => {
    if (status === "authenticated") {
      router.push("/dashboard")
    }
  }, [status, router])

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

try {
      const result = await signIn("credentials", {
        email,
        password,
        redirect: false,
      })

if (result?.error) {
        setError(result.error)
      } else if (result?.ok) {
        router.push("/dashboard")
      }
    } catch (error) {
      setError("An unexpected error occurred")
      console.error("Login error:", error)
    } finally {
      setIsLoading(false)
    }
  }

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

try {
      await signIn("google", { callbackUrl: "/dashboard" })
    } catch (error) {
      setError("Failed to sign in with Google")
      console.error("Google sign in error:", error)
      setIsLoading(false)
    }
  }

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

try {
      await signIn("facebook", { callbackUrl: "/dashboard" })
    } catch (error) {
      setError("Failed to sign in with Facebook")
      console.error("Facebook sign in error:", error)
      setIsLoading(false)
    }
  }

if (status === "authenticated") {
    return null // Don't render anything while redirecting
  }

<form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="name@example.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                disabled={isLoading}
              />
            </div>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Password</Label>
                <Link
                  href="/forgot-password"
                  className="text-sm font-medium text-primary underline-offset-4 hover:underline"
                >
                  Forgot password?
                </Link>
              </div>
              <Input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                disabled={isLoading}
              />
            </div>
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? "Signing in..." : "Sign In"}
            </Button>
          </form>

<div className="relative">
            <div className="absolute inset-0 flex items-center">
              <span className="w-full border-t" />
            </div>
            <div className="relative flex justify-center text-xs uppercase">
              <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
            </div>
          </div>

<div className="grid grid-cols-2 gap-3">
            <Button variant="outline" type="button" onClick={handleGoogleSignIn} disabled={isLoading}>
              <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
                <path
                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                  fill="#4285F4"
                />
                <path
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                  fill="#34A853"
                />
                <path
                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                  fill="#FBBC05"
                />
                <path
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                  fill="#EA4335"
                />
              </svg>
              Google
            </Button>
            <Button variant="outline" type="button" onClick={handleFacebookSignIn} disabled={isLoading}>
              <svg className="mr-2 h-4 w-4" fill="#1877F2" viewBox="0 0 24 24">
                <path d="M9.19795 21.5H13.198V13.4901H16.8021L17.198 9.50977H13.198V7.5C13.198 6.94772 13.6457 6.5 14.198 6.5H17.198V2.5H14.198C11.4365 2.5 9.19795 4.73858 9.19795 7.5V9.50977H7.19795L6.80206 13.4901H9.19795V21.5Z" />
              </svg>
              Facebook
            </Button>
          </div>
        </CardContent>
        <CardFooter>
          <p className="text-center text-sm text-muted-foreground w-full">
            Don't have an account?{" "}
            <Link href="/register" className="text-primary underline-offset-4 hover:underline">
              Sign up
            </Link>
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescript:file="app/forms/[id]/submit/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { getTemplateById, createResponse } from "@/lib/db-service"
import { sendNotificationEmail } from "@/lib/email-service"
import { ObjectId } from "mongodb"
import type { ApiResponse, CreateResponseBody, RequestContext } from "@/types/api"

if (!session) {
      return NextResponse.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }

const formId = params.id
    const { responses }: CreateResponseBody = await request.json()

if (!responses) {
      return NextResponse.json({ success: false, error: "No responses provided" }, { status: 400 })
    }

// Get the template to validate responses
    const template = await getTemplateById(formId)

if (!template) {
      return NextResponse.json({ success: false, error: "Template not found" }, { status: 404 })
    }

// Validate required fields
    const requiredQuestions = template.questions.filter((q) => q.required)

if (sourceValue === undefined) return false

// If conditions aren't met, this question isn't shown, so skip validation
        if (!allConditionsMet) continue
      }

// Create the response
    const responseData = {
      templateId: new ObjectId(formId),
      userId: new ObjectId(session.user.id),
      responses,
    }

const result = await createResponse(responseData)

if (!result) {
      return NextResponse.json({ success: false, error: "Failed to save response" }, { status: 500 })
    }

// Send email notification with response summary
    try {
      // Generate email content
      const subject = `Your Response to ${template.title}`

let message = `<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
       <h2>Your Response to ${template.title}</h2>
       <p>Thank you for submitting your response. Here's a summary of your submission:</p>
       <div style="margin: 20px 0; padding: 15px; border: 1px solid #eee; border-radius: 5px;">`

// Add each question and response
      for (const question of template.questions) {
        const answer = responses[question.id]

if (answer !== undefined) {
          message += `<div style="margin-bottom: 15px;">
           <p style="font-weight: bold; margin-bottom: 5px;">${question.title}</p>`

if (Array.isArray(answer)) {
            // For checkbox responses
            message += `<p>${answer.join(", ")}</p>`
          } else if (question.type === "file" && typeof answer === "string") {
            // For file uploads
            message += `<p><a href="${answer}" target="_blank">View Uploaded File</a></p>`
          } else {
            // For text, textarea, number, select
            message += `<p>${answer}</p>`
          }

message += `</div>`
        }
      }

message += `</div>
       <p>You can view all your responses in your dashboard.</p>
       <p>Thank you for using our platform!</p>
     </div>`

// Send email
      await sendNotificationEmail(session.user.email as string, subject, message)
    } catch (emailError) {
      console.error("Error sending response summary email:", emailError)
      // Don't fail the submission if email fails
    }

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

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { useToast } from "@/components/ui/use-toast"
import { Heart, MessageSquare } from "lucide-react"

interface Template {
  _id: string
  title: string
  description?: string
  tags: string[]
  responses: number
  likes: number
  comments: number
  createdAt: string
  imageUrl?: string
}

export function FeaturedTemplates() {
  const { toast } = useToast()
  const [templates, setTemplates] = useState<Template[]>([])
  const [isLoading, setIsLoading] = useState(true)

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

const fetchFeaturedTemplates = async () => {
    setIsLoading(true)
    try {
      const response = await fetch("/api/templates/featured")
      if (!response.ok) throw new Error("Failed to fetch templates")
      const data = await response.json()
      setTemplates(data.data)
    } catch (error) {
      console.error("Error fetching featured templates:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to load featured templates. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString(undefined, {
      year: "numeric",
      month: "short",
      day: "numeric",
    })
  }

if (isLoading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[1, 2, 3, 4, 5].map((i) => (
          <Card key={i} className="overflow-hidden">
            <div className="h-40 bg-muted animate-pulse"></div>
            <CardHeader className="pb-3">
              <div className="h-6 bg-muted animate-pulse rounded w-3/4 mb-2"></div>
              <div className="h-4 bg-muted animate-pulse rounded w-full"></div>
            </CardHeader>
            <CardContent>
              <div className="flex gap-2">
                <div className="h-5 bg-muted animate-pulse rounded w-16"></div>
                <div className="h-5 bg-muted animate-pulse rounded w-16"></div>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <div className="h-9 bg-muted animate-pulse rounded w-20"></div>
              <div className="h-9 bg-muted animate-pulse rounded w-20"></div>
            </CardFooter>
          </Card>
        ))}
      </div>
    )
  }

if (templates.length === 0) {
    return (
      <div className="text-center py-12 border border-dashed rounded-lg">
        <p className="text-muted-foreground">No featured templates available at the moment.</p>
      </div>
    )
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {templates.map((template) => (
        <Card key={template._id} className="overflow-hidden flex flex-col">
          {template.imageUrl && (
            <div className="relative h-40 w-full">
              <Image
                src={template.imageUrl || "/placeholder.svg?height=160&width=400"}
                alt={template.title}
                fill
                className="object-cover"
              />
            </div>
          )}
          <CardHeader className="pb-3">
            <CardTitle className="line-clamp-1">{template.title}</CardTitle>
            <p className="text-sm text-muted-foreground line-clamp-2">
              {template.description || "No description provided"}
            </p>
          </CardHeader>
          <CardContent className="flex-grow">
            <div className="flex flex-wrap gap-2">
              {template.tags.slice(0, 3).map((tag) => (
                <Badge key={tag} variant="secondary">
                  {tag}
                </Badge>
              ))}
              {template.tags.length > 3 && <Badge variant="outline">+{template.tags.length - 3}</Badge>}
            </div>
            <div className="flex items-center gap-4 mt-4">
              <div className="flex items-center text-sm text-muted-foreground">
                <Heart className="h-4 w-4 mr-1" />
                {template.likes}
              </div>
              <div className="flex items-center text-sm text-muted-foreground">
                <MessageSquare className="h-4 w-4 mr-1" />
                {template.comments}
              </div>
              <div className="text-sm text-muted-foreground">{template.responses} responses</div>
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline" asChild>
              <Link href={`/templates/${template._id}/view`}>View</Link>
            </Button>
            <Button asChild>
              <Link href={`/forms/${template._id}/fill`}>Fill Form</Link>
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  )
}

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

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { useToast } from "@/components/ui/use-toast"

interface TagCount {
  tag: string
  count: number
}

export function TagCloud() {
  const router = useRouter()
  const { toast } = useToast()
  const [tags, setTags] = useState<TagCount[]>([])
  const [isLoading, setIsLoading] = useState(true)

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

const fetchTags = async () => {
    setIsLoading(true)
    try {
      const response = await fetch("/api/templates/tags")
      if (!response.ok) throw new Error("Failed to fetch tags")
      const data = await response.json()
      setTags(data.data)
    } catch (error) {
      console.error("Error fetching tags:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to load tags. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleTagClick = (tag: string) => {
    router.push(`/search?tags=${encodeURIComponent(tag)}`)
  }

// Calculate font size based on count (min: 0.8rem, max: 1.8rem)
  const getFontSize = (count: number) => {
    const min = 0.8
    const max = 1.8
    const maxCount = Math.max(...tags.map((t) => t.count))
    const minCount = Math.min(...tags.map((t) => t.count))

if (maxCount === minCount) return `${min + (max - min) / 2}rem`

const size = min + ((count - minCount) / (maxCount - minCount)) * (max - min)
    return `${size}rem`
  }

// Get a color based on count (from lighter to darker primary color)
  const getColor = (count: number) => {
    const maxCount = Math.max(...tags.map((t) => t.count))
    const minCount = Math.min(...tags.map((t) => t.count))

if (maxCount === minCount) return "text-primary"

const intensity = Math.floor(((count - minCount) / (maxCount - minCount)) * 5)
    return `text-primary/${[3, 5, 7, 9, 10][intensity] || 7}`
  }

if (isLoading) {
    return (
      <div className="flex justify-center py-8">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      </div>
    )
  }

if (tags.length === 0) {
    return (
      <div className="text-center py-8">
        <p className="text-muted-foreground">No tags available at the moment.</p>
      </div>
    )
  }

return (
    <div className="flex flex-wrap justify-center gap-4 py-4">
      {tags.map((tag) => (
        <Button
          key={tag.tag}
          variant="ghost"
          className={`${getColor(tag.count)} hover:bg-primary/10`}
          style={{ fontSize: getFontSize(tag.count) }}
          onClick={() => handleTagClick(tag.tag)}
        >
          {tag.tag}
        </Button>
      ))}
    </div>
  )
}

[V0_FILE]typescript:file="app/admin/users/page.tsx" isEdit="true" 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 { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/components/ui/use-toast"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Search, MoreHorizontal, Shield, ShieldAlert, UserCheck, UserX, Mail } from "lucide-react"
import { format } from "date-fns"
import { useLanguage } from "@/components/language-provider"

interface User {
  _id: string
  name: string
  email: string
  role: "user" | "admin"
  isBlocked: boolean
  isVerified: boolean
  createdAt: string
  lastLogin?: string
  image?: string
}

export default function UsersPage() {
  const { t } = useLanguage()
  const { toast } = useToast()
  const [users, setUsers] = useState<User[]>([])
  const [filteredUsers, setFilteredUsers] = useState<User[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [selectedUser, setSelectedUser] = useState<User | null>(null)
  const [isPromoteDialogOpen, setIsPromoteDialogOpen] = useState(false)
  const [isDemoteDialogOpen, setIsDemoteDialogOpen] = useState(false)
  const [isEmailDialogOpen, setIsEmailDialogOpen] = useState(false)
  const [emailSubject, setEmailSubject] = useState("")
  const [emailMessage, setEmailMessage] = useState("")
  const [isSendingEmail, setIsSendingEmail] = useState(false)

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

useEffect(() => {
    if (searchQuery) {
      setFilteredUsers(
        users.filter(
          (user) =>
            user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
            user.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
            user.role.toLowerCase().includes(searchQuery.toLowerCase()),
        ),
      )
    } else {
      setFilteredUsers(users)
    }
  }, [searchQuery, users])

const fetchUsers = async () => {
    setIsLoading(true)
    try {
      const response = await fetch("/api/admin/users")
      if (!response.ok) throw new Error("Failed to fetch users")
      const data = await response.json()
      setUsers(data.data)
      setFilteredUsers(data.data)
    } catch (error) {
      console.error("Error fetching users:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to load users. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleBlockUser = async (userId: string, isCurrentlyBlocked: boolean) => {
    try {
      const response = await fetch(`/api/admin/users/${userId}/block`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ isBlocked: !isCurrentlyBlocked }),
      })

if (!response.ok) throw new Error("Failed to update user")

// Update local state
      setUsers(users.map((user) => (user._id === userId ? { ...user, isBlocked: !isCurrentlyBlocked } : user)))

toast({
        title: "Success",
        description: `User ${isCurrentlyBlocked ? "unblocked" : "blocked"} successfully.`,
      })
    } catch (error) {
      console.error("Error updating user:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to update user. Please try again.",
      })
    }
  }

const handlePromoteUser = async () => {
    if (!selectedUser) return

try {
      const response = await fetch(`/api/admin/users/${selectedUser._id}/role`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ role: "admin" }),
      })

if (!response.ok) throw new Error("Failed to promote user")

// Update local state
      setUsers(users.map((user) => (user._id === selectedUser._id ? { ...user, role: "admin" } : user)))

toast({
        title: "Success",
        description: `${selectedUser.name} has been promoted to admin.`,
      })
    } catch (error) {
      console.error("Error promoting user:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to promote user. Please try again.",
      })
    } finally {
      setIsPromoteDialogOpen(false)
      setSelectedUser(null)
    }
  }

const handleDemoteUser = async () => {
    if (!selectedUser) return

if (!response.ok) throw new Error("Failed to demote user")

// Update local state
      setUsers(users.map((user) => (user._id === selectedUser._id ? { ...user, role: "user" } : user)))

toast({
        title: "Success",
        description: `${selectedUser.name} has been demoted to regular user.`,
      })
    } catch (error) {
      console.error("Error demoting user:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to demote user. Please try again.",
      })
    } finally {
      setIsDemoteDialogOpen(false)
      setSelectedUser(null)
    }
  }

const handleSendEmail = async () => {
    if (!selectedUser || !emailSubject || !emailMessage) return

setIsSendingEmail(true)
    try {
      const response = await fetch(`/api/admin/users/${selectedUser._id}/email`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ subject: emailSubject, message: emailMessage }),
      })

if (!response.ok) throw new Error("Failed to send email")

toast({
        title: "Email Sent",
        description: `Email has been sent to ${selectedUser.email}.`,
      })

setEmailSubject("")
      setEmailMessage("")
    } catch (error) {
      console.error("Error sending email:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to send email. Please try again.",
      })
    } finally {
      setIsSendingEmail(false)
      setIsEmailDialogOpen(false)
      setSelectedUser(null)
    }
  }

const formatDate = (dateString?: string) => {
    if (!dateString) return "Never"
    return format(new Date(dateString), "PPP")
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold tracking-tight">User Management</h1>
        <Button variant="outline" onClick={fetchUsers} disabled={isLoading}>
          Refresh
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle>All Users</CardTitle>
          <CardDescription>Manage user accounts and permissions</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-4">
            <div className="relative">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                type="search"
                placeholder="Search users by name, email, or role..."
                className="pl-8"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          </div>

{isLoading ? (
            <div className="flex justify-center py-8">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
            </div>
          ) : filteredUsers.length > 0 ? (
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>User</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead>Role</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Created</TableHead>
                    <TableHead>Last Login</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredUsers.map((user) => (
                    <TableRow key={user._id}>
                      <TableCell className="font-medium">{user.name}</TableCell>
                      <TableCell>{user.email}</TableCell>
                      <TableCell>
                        {user.role === "admin" ? (
                          <Badge variant="default" className="bg-purple-500">
                            <Shield className="mr-1 h-3 w-3" />
                            Admin
                          </Badge>
                        ) : (
                          <Badge variant="outline">User</Badge>
                        )}
                      </TableCell>
                      <TableCell>
                        {user.isBlocked ? (
                          <Badge variant="destructive">Blocked</Badge>
                        ) : user.isVerified ? (
                          <Badge variant="success" className="bg-green-500">
                            Verified
                          </Badge>
                        ) : (
                          <Badge variant="outline">Unverified</Badge>
                        )}
                      </TableCell>
                      <TableCell>{formatDate(user.createdAt)}</TableCell>
                      <TableCell>{formatDate(user.lastLogin)}</TableCell>
                      <TableCell className="text-right">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreHorizontal className="h-4 w-4" />
                              <span className="sr-only">Actions</span>
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem
                              onClick={() => {
                                setSelectedUser(user)
                                setIsEmailDialogOpen(true)
                              }}
                            >
                              <Mail className="mr-2 h-4 w-4" />
                              Send Email
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            {user.role === "user" ? (
                              <DropdownMenuItem
                                onClick={() => {
                                  setSelectedUser(user)
                                  setIsPromoteDialogOpen(true)
                                }}
                              >
                                <Shield className="mr-2 h-4 w-4" />
                                Promote to Admin
                              </DropdownMenuItem>
                            ) : (
                              <DropdownMenuItem
                                onClick={() => {
                                  setSelectedUser(user)
                                  setIsDemoteDialogOpen(true)
                                }}
                              >
                                <ShieldAlert className="mr-2 h-4 w-4" />
                                Remove Admin Role
                              </DropdownMenuItem>
                            )}
                            <DropdownMenuSeparator />
                            <AlertDialog>
                              <AlertDialogTrigger asChild>
                                <DropdownMenuItem
                                  onSelect={(e) => e.preventDefault()}
                                  className={user.isBlocked ? "text-green-600" : "text-red-600"}
                                >
                                  {user.isBlocked ? (
                                    <>
                                      <UserCheck className="mr-2 h-4 w-4" />
                                      Unblock User
                                    </>
                                  ) : (
                                    <>
                                      <UserX className="mr-2 h-4 w-4" />
                                      Block User
                                    </>
                                  )}
                                </DropdownMenuItem>
                              </AlertDialogTrigger>
                              <AlertDialogContent>
                                <AlertDialogHeader>
                                  <AlertDialogTitle>{user.isBlocked ? "Unblock User" : "Block User"}</AlertDialogTitle>
                                  <AlertDialogDescription>
                                    {user.isBlocked
                                      ? `Are you sure you want to unblock ${user.name}? They will regain access to the platform.`
                                      : `Are you sure you want to block ${user.name}? They will lose access to the platform.`}
                                  </AlertDialogDescription>
                                </AlertDialogHeader>
                                <AlertDialogFooter>
                                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                                  <AlertDialogAction
                                    onClick={() => handleBlockUser(user._id, user.isBlocked)}
                                    className={user.isBlocked ? "bg-green-500" : "bg-destructive"}
                                  >
                                    {user.isBlocked ? "Unblock" : "Block"}
                                  </AlertDialogAction>
                                </AlertDialogFooter>
                              </AlertDialogContent>
                            </AlertDialog>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          ) : (
            <div className="text-center py-8 text-muted-foreground">
              <p>No users found matching your search criteria.</p>
            </div>
          )}
        </CardContent>
      </Card>

{/* Promote User Dialog */}
      <Dialog open={isPromoteDialogOpen} onOpenChange={setIsPromoteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Promote User to Admin</DialogTitle>
            <DialogDescription>
              {selectedUser
                ? `Are you sure you want to promote ${selectedUser.name} to admin? They will have full access to all features and data.`
                : ""}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsPromoteDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handlePromoteUser}>Promote to Admin</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Demote User Dialog */}
      <Dialog open={isDemoteDialogOpen} onOpenChange={setIsDemoteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Remove Admin Role</DialogTitle>
            <DialogDescription>
              {selectedUser
                ? `Are you sure you want to remove admin privileges from ${selectedUser.name}? They will lose access to admin features.`
                : ""}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsDemoteDialogOpen(false)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDemoteUser}>
              Remove Admin Role
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Send Email Dialog */}
      <Dialog open={isEmailDialogOpen} onOpenChange={setIsEmailDialogOpen}>
        <DialogContent className="sm:max-w-[525px]">
          <DialogHeader>
            <DialogTitle>Send Email to User</DialogTitle>
            <DialogDescription>
              {selectedUser ? `Send an email to ${selectedUser.name} (${selectedUser.email})` : ""}
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <label htmlFor="subject" className="text-sm font-medium">
                Subject
              </label>
              <Input
                id="subject"
                value={emailSubject}
                onChange={(e) => setEmailSubject(e.target.value)}
                placeholder="Email subject"
              />
            </div>
            <div className="grid gap-2">
              <label htmlFor="message" className="text-sm font-medium">
                Message
              </label>
              <textarea
                id="message"
                value={emailMessage}
                onChange={(e) => setEmailMessage(e.target.value)}
                placeholder="Your message"
                className="min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsEmailDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleSendEmail} disabled={isSendingEmail || !emailSubject || !emailMessage}>
              {isSendingEmail ? "Sending..." : "Send Email"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

[V0_FILE]typescript:file="app/page.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ArrowRight, CheckCircle, FileText, BarChart3, Users } from "lucide-react"
import { FeaturedTemplates } from "@/components/featured-templates"
import { TagCloud } from "@/components/tag-cloud"

export default function HomePage() {
  return (
    <div className="flex flex-col min-h-screen">
      <header className="bg-background border-b">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center">
              <Link href="/" className="flex-shrink-0 flex items-center">
                <span className="text-xl font-bold">FormBuilder</span>
              </Link>
            </div>
            <div className="flex items-center space-x-4">
              <Button variant="ghost" asChild>
                <Link href="/login">Sign in</Link>
              </Button>
              <Button asChild>
                <Link href="/register">Sign up</Link>
              </Button>
            </div>
          </div>
        </div>
      </header>

<main className="flex-grow">
        {/* Hero Section */}
        <section className="py-20 bg-gradient-to-b from-background to-muted">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto text-center">
              <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl">
                Create, Share, and Analyze Forms
              </h1>
              <p className="mt-6 text-xl text-muted-foreground">
                A powerful form builder platform that helps you create beautiful forms, collect responses, and analyze
                data with ease.
              </p>
              <div className="mt-10 flex justify-center">
                <Button size="lg" asChild>
                  <Link href="/register">
                    Get Started <ArrowRight className="ml-2 h-5 w-5" />
                  </Link>
                </Button>
              </div>
            </div>
          </div>
        </section>

{/* Featured Templates Section */}
        <section className="py-16 bg-background">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto text-center mb-12">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Popular Templates</h2>
              <p className="mt-4 text-lg text-muted-foreground">
                Explore our most popular templates to get started quickly
              </p>
            </div>

{/* Features Section */}
        <section className="py-16 bg-muted">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto text-center mb-12">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Powerful Features</h2>
              <p className="mt-4 text-lg text-muted-foreground">
                Everything you need to create and manage forms in one place
              </p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-card rounded-lg p-6 shadow-sm border">
                <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
                  <FileText className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-medium mb-2">Flexible Form Builder</h3>
                <p className="text-muted-foreground">
                  Create forms with various question types, conditional logic, and validation rules.
                </p>
                <ul className="mt-4 space-y-2">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                    <span>Multiple question types</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                    <span>Conditional questions</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                    <span>File uploads</span>
                  </li>
                </ul>
              </div>

<div className="bg-card rounded-lg p-6 shadow-sm border">
                <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
                  <BarChart3 className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-medium mb-2">Advanced Analytics</h3>
                <p className="text-muted-foreground">
                  Gain insights from responses with comprehensive analytics and visualization tools.
                </p>
                <ul className="mt-4 space-y-2">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                    <span>Real-time dashboards</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                    <span>Export to CSV/Excel/JSON</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                    <span>Response trends</span>
                  </li>
                </ul>
              </div>

<div className="bg-card rounded-lg p-6 shadow-sm border">
                <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
                  <Users className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-medium mb-2">Collaboration</h3>
                <p className="text-muted-foreground">
                  Share forms with your team or the public and collaborate on responses.
                </p>
                <ul className="mt-4 space-y-2">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                    <span>Public or private forms</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                    <span>Comments and likes</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                    <span>Team access controls</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

{/* Tag Cloud Section */}
        <section className="py-16 bg-background">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto text-center mb-12">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Explore by Topic</h2>
              <p className="mt-4 text-lg text-muted-foreground">Find templates by popular topics and tags</p>
            </div>

{/* CTA Section */}
        <section className="py-16 bg-primary text-primary-foreground">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Ready to get started?</h2>
              <p className="mt-4 text-lg opacity-90">
                Join thousands of users who are already creating and sharing forms with FormBuilder.
              </p>
              <div className="mt-8 flex justify-center gap-4">
                <Button size="lg" variant="secondary" asChild>
                  <Link href="/login">Sign in</Link>
                </Button>
                <Button size="lg" variant="outline" className="bg-transparent" asChild>
                  <Link href="/register">Create an account</Link>
                </Button>
              </div>
            </div>
          </div>
        </section>
      </main>

<footer className="bg-muted py-12">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-lg font-medium mb-4">FormBuilder</h3>
              <p className="text-muted-foreground">
                Create, share, and analyze forms with our powerful form builder platform.
              </p>
            </div>
            <div>
              <h3 className="text-lg font-medium mb-4">Product</h3>
              <ul className="space-y-2">
                <li>
                  <Link href="/features" className="text-muted-foreground hover:text-foreground">
                    Features
                  </Link>
                </li>
                <li>
                  <Link href="/pricing" className="text-muted-foreground hover:text-foreground">
                    Pricing
                  </Link>
                </li>
                <li>
                  <Link href="/templates" className="text-muted-foreground hover:text-foreground">
                    Templates
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-medium mb-4">Resources</h3>
              <ul className="space-y-2">
                <li>
                  <Link href="/docs" className="text-muted-foreground hover:text-foreground">
                    Documentation
                  </Link>
                </li>
                <li>
                  <Link href="/guides" className="text-muted-foreground hover:text-foreground">
                    Guides
                  </Link>
                </li>
                <li>
                  <Link href="/support" className="text-muted-foreground hover:text-foreground">
                    Support
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-medium mb-4">Company</h3>
              <ul className="space-y-2">
                <li>
                  <Link href="/about" className="text-muted-foreground hover:text-foreground">
                    About
                  </Link>
                </li>
                <li>
                  <Link href="/blog" className="text-muted-foreground hover:text-foreground">
                    Blog
                  </Link>
                </li>
                <li>
                  <Link href="/contact" className="text-muted-foreground hover:text-foreground">
                    Contact
                  </Link>
                </li>
              </ul>
            </div>
          </div>
          <div className="mt-8 pt-8 border-t border-border">
            <p className="text-center text-muted-foreground">
              © {new Date().getFullYear()} FormBuilder. All rights reserved.
            </p>
          </div>
        </div>
      </footer>
    </div>
  )
}

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

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/components/ui/use-toast"
import { useSession } from "next-auth/react"
import { format } from "date-fns"
import { Send, Trash2 } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface Comment {
  _id: string
  templateId: string
  userId: string
  user: {
    name: string
    email: string
    image?: string
  }
  content: string
  createdAt: string
}

interface CommentsProps {
  templateId: string
  isCreator: boolean
  isAdmin: boolean
}

export function CommentsSection({ templateId, isCreator, isAdmin }: CommentsProps) {
  const { data: session } = useSession()
  const { toast } = useToast()
  const [comments, setComments] = useState<Comment[]>([])
  const [newComment, setNewComment] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const commentsEndRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    fetchComments()
  }, [templateId])

useEffect(() => {
    // Scroll to bottom when new comments are added
    scrollToBottom()
  }, [comments])

const fetchComments = async () => {
    setIsLoading(true)
    try {
      const response = await fetch(`/api/templates/${templateId}/comments`)
      if (!response.ok) throw new Error("Failed to fetch comments")
      const data = await response.json()
      setComments(data.data)
    } catch (error) {
      console.error("Error fetching comments:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to load comments. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleSubmitComment = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!newComment.trim() || !session) return

setIsSubmitting(true)
    try {
      const response = await fetch(`/api/templates/${templateId}/comments`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ content: newComment }),
      })

if (!response.ok) throw new Error("Failed to post comment")

const data = await response.json()

// Add the new comment to the list with optimistic update
      const newCommentObj: Comment = {
        _id: data.data._id,
        templateId,
        userId: session.user.id,
        user: {
          name: session.user.name || "Anonymous",
          email: session.user.email || "",
          image: session.user.image || undefined,
        },
        content: newComment,
        createdAt: new Date().toISOString(),
      }

setComments([...comments, newCommentObj])
      setNewComment("")
    } catch (error) {
      console.error("Error posting comment:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to post comment. Please try again.",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const handleDeleteComment = async (commentId: string) => {
    try {
      const response = await fetch(`/api/templates/${templateId}/comments/${commentId}`, {
        method: "DELETE",
      })

if (!response.ok) throw new Error("Failed to delete comment")

// Remove the comment from the list with optimistic update
      setComments(comments.filter((comment) => comment._id !== commentId))

toast({
        title: "Comment deleted",
        description: "Your comment has been deleted successfully.",
      })
    } catch (error) {
      console.error("Error deleting comment:", error)
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to delete comment. Please try again.",
      })
    }
  }

const scrollToBottom = () => {
    commentsEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

const formatDate = (dateString: string) => {
    return format(new Date(dateString), "PPp")
  }

const getUserInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase()
  }

const canDeleteComment = (comment: Comment) => {
    if (!session) return false
    return isAdmin || isCreator || comment.userId === session.user.id
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Comments</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4 max-h-[400px] overflow-y-auto mb-4">
          {isLoading ? (
            <div className="flex justify-center py-8">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            </div>
          ) : comments.length > 0 ? (
            comments.map((comment) => (
              <div key={comment._id} className="flex gap-3 relative group">
                <Avatar className="h-8 w-8">
                  <AvatarImage src={comment.user.image || ""} alt={comment.user.name} />
                  <AvatarFallback>{getUserInitials(comment.user.name)}</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <span className="font-medium">{comment.user.name}</span>
                    <span className="text-xs text-muted-foreground">{formatDate(comment.createdAt)}</span>
                  </div>
                  <p className="text-sm mt-1">{comment.content}</p>
                </div>
                {canDeleteComment(comment) && (
                  <AlertDialog>
                    <AlertDialogTrigger asChild>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="absolute right-0 top-0 opacity-0 group-hover:opacity-100 transition-opacity"
                      >
                        <Trash2 className="h-4 w-4 text-muted-foreground" />
                      </Button>
                    </AlertDialogTrigger>
                    <AlertDialogContent>
                      <AlertDialogHeader>
                        <AlertDialogTitle>Delete Comment</AlertDialogTitle>
                        <AlertDialogDescription>
                          Are you sure you want to delete this comment? This action cannot be undone.
                        </AlertDialogDescription>
                      </AlertDialogHeader>
                      <AlertDialogFooter>
                        <AlertDialogCancel>Cancel</AlertDialogCancel>
                        <AlertDialogAction
                          onClick={() => handleDeleteComment(comment._id)}
                          className="bg-destructive text-destructive-foreground"
                        >
                          Delete
                        </AlertDialogAction>
                      </AlertDialogFooter>
                    </AlertDialogContent>
                  </AlertDialog>
                )}
              </div>
            ))
          ) : (
            <div className="text-center py-4 text-muted-foreground">
              <p>No comments yet. Be the first to comment!</p>
            </div>
          )}
          <div ref={commentsEndRef} />
        </div>
        {session ? (
          <form onSubmit={handleSubmitComment} className="flex gap-2">
            <Textarea
              placeholder="Add a comment..."
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
              className="min-h-[80px] flex-1"
            />
            <Button type="submit" size="icon" disabled={isSubmitting || !newComment.trim()}>
              <Send className="h-4 w-4" />
            </Button>
          </form>
        ) : (
          <div className="text-center py-2 text-muted-foreground">
            <p>Please sign in to leave a comment.</p>
          </div>
        )}
      </CardContent>
    </Card>
  )
}

[V0_FILE]plaintext:file="EXPLANATION.txt"
# FORMS APPLICATION ARCHITECTURE EXPLANATION

This document provides a comprehensive overview of the Forms Application architecture, explaining the key components, routes, and how user/admin features work.

## CORE COMPONENTS

### Authentication & Authorization
- `app/api/auth/[...nextauth]/route.ts`: Handles authentication via NextAuth with Google, Facebook, and credentials providers
- `components/auth-provider.tsx`: Manages route protection and authentication state
- `middleware.ts`: Protects routes based on authentication and role requirements

### Database Services
- `lib/db-service.ts`: Core database operations for templates, responses, users, comments, and likes
- `lib/mongodb.ts`: MongoDB connection management
- `lib/init-db.ts`: Database initialization including creating admin user and collections

### Form Building & Management
- `components/drag-drop-questions.tsx`: Main form builder interface with drag-and-drop functionality
- `models/template.ts`: Defines the template data structure with questions, conditions, and validations
- `app/api/templates/route.ts`: API endpoints for template CRUD operations

### Form Submission & Response Handling
- `app/forms/[id]/fill/page.tsx`: Form filling interface with conditional questions
- `app/api/forms/[id]/submit/route.ts`: Handles form submission with validation
- `components/enhanced-results-analysis.tsx`: Visualizes form responses with charts and tables

### Admin Features
- `app/admin/layout.tsx`: Admin dashboard layout with navigation
- `app/admin/users/page.tsx`: User management interface
- `app/admin/backups/page.tsx`: Database backup and restore functionality

## ROUTE STRUCTURE

### Public Routes
- `/`: Homepage with featured templates and marketing content
- `/login`: User login page
- `/register`: User registration page
- `/verify-email`: Email verification page
- `/forgot-password`: Password reset request page
- `/reset-password`: Password reset page

### Protected User Routes
- `/dashboard`: Main user dashboard showing templates and responses
- `/templates/create`: Create new template
- `/templates/[id]/edit`: Edit existing template
- `/templates/[id]/view`: View template details
- `/forms/[id]/fill`: Fill out a form
- `/forms/[id]/results`: View form results and analytics
- `/profile`: User profile management
- `/settings`: User settings

### Admin-Only Routes
- `/admin`: Admin dashboard overview with analytics
- `/admin/users`: User management (view, block, promote users)
- `/admin/backups`: Database backup and restore

## USER FEATURES EXPLAINED

### Authentication
- Users can register with email/password or social login (Google, Facebook)
- Email verification is required for email/password registration
- Password reset functionality is available

### Template Management
1. **Creating Templates**:
   - Users create templates with various question types (text, textarea, number, checkbox, select, file)
   - Questions can be reordered via drag-and-drop
   - Conditional logic can be applied to show/hide questions based on previous answers
   - Validation rules can be set for each question

2. **Managing Templates**:
   - Users can view, edit, and delete their own templates
   - Templates can be marked as public or private
   - Public templates are visible to all users

3. **Form Sharing**:
   - Users can share forms via direct links
   - Form responses are collected and stored

4. **Response Analysis**:
   - Users can view responses to their forms
   - Analytics include charts, tables, and exportable data
   - Responses can be filtered and sorted

### Social Features
- Users can like templates
- Users can comment on templates
- Users can browse popular templates

## ADMIN FEATURES EXPLAINED

### User Management
- View all users in the system
- Block/unblock users
- Promote users to admin role or demote admins to regular users
- Send emails to users

### Content Management
- Admins can view, edit, and delete any template
- Admins can view all form responses

### System Management
- View system-wide analytics (users, templates, submissions)
- Create database backups
- Restore from backups

### Admin Dashboard
- Overview of platform activity
- User growth metrics
- Form submission trends
- Popular templates

## DATA FLOW

1. **Template Creation**:
   - User creates template via UI (`/templates/create`)
   - Frontend sends template data to API (`/api/templates`)
   - Database stores template with user as creator

2. **Form Submission**:
   - Respondent fills form (`/forms/[id]/fill`)
   - Responses validated client-side and server-side
   - Submission stored in database (`/api/forms/[id]/submit`)
   - Template response count incremented

3. **Response Analysis**:
   - Template creator views results (`/forms/[id]/results`)
   - Backend aggregates and analyzes responses
   - Frontend visualizes data with charts and tables

## CONDITIONAL FEATURES

The application uses role-based conditional rendering throughout:

1. **In Navigation**:
   - Admin dashboard link only shown to admins
   - Different navigation options based on authentication status

2. **In Templates**:
   - Edit/delete buttons only shown to template creator or admins
   - Analytics only accessible to template creator or admins

3. **In Admin Dashboard**:
   - Only accessible to users with admin role
   - Admin-specific actions (user management, backups) restricted to admins

## ENVIRONMENT VARIABLES

The application requires several environment variables:
- Authentication: NEXTAUTH_SECRET, NEXTAUTH_URL, GOOGLE_CLIENT_ID, etc.
- Database: MONGODB_URI
- Email: EMAIL_SERVER_HOST, EMAIL_SERVER_USER, etc.
- Admin: ADMIN_EMAIL, ADMIN_PASSWORD, INIT_SECRET
- File Storage: CLOUDINARY_API_KEY, etc.

## INITIALIZATION PROCESS

1. Database is initialized via `/api/init` endpoint with INIT_SECRET
2. Collections and indexes are created
3. Default admin user is created if not exists
4. Application is ready for use

## SECURITY CONSIDERATIONS

1. **Route Protection**:
   - Middleware checks authentication and roles
   - API endpoints verify permissions

2. **Data Access Control**:
   - Users can only access their own templates and responses
   - Admins can access all data
   - Public templates are accessible to all

3. **Input Validation**:
   - Client-side and server-side validation for all inputs
   - File uploads validated for type and size

4. **Authentication Security**:
   - Password hashing with bcrypt
   - JWT tokens for session management
   - Email verification for new accounts
</article></body></html>