[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import "./globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Discord Bot Control Interface", description: "A modern and sleek Discord bot control interface for managing your Discord servers and bots.", keywords: ["Discord", "Bot", "Control", "Interface", "Management"], } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/components/BotStatus.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { CircularProgressbar, buildStyles } from "react-circular-progressbar" import "react-circular-progressbar/dist/styles.css" export default function BotStatus() { const cpuUsage = 65 const memoryUsage = 40 const uptime = "5d 12h 34m" const latency = "42ms" return ( Bot Status

CPU

Memory

Uptime

{uptime}

Latency

{latency}

) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 224 71% 4%; --foreground: 213 31% 91%; --card: 224 71% 4%; --card-foreground: 213 31% 91%; --popover: 224 71% 4%; --popover-foreground: 213 31% 91%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 1.2%; --secondary: 222.2 47.4% 11.2%; --secondary-foreground: 210 40% 98%; --muted: 223 47% 11%; --muted-foreground: 215.4 16.3% 56.9%; --accent: 216 34% 17%; --accent-foreground: 210 40% 98%; --destructive: 0 63% 31%; --destructive-foreground: 210 40% 98%; --border: 216 34% 17%; --input: 216 34% 17%; --ring: 216 34% 17%; --radius: 0.5rem; } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } /* Subtle gradient background */ .gradient-bg { background: linear-gradient(to bottom right, hsl(222, 47%, 11%), hsl(224, 71%, 4%)); } /* Soft box shadow for cards */ .card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /* Hover effect */ .hover-lift { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.06); } /* Loading animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .loading-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } [V0_FILE]typescriptreact:file="app/components/Analytics.tsx" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, BarChart, Bar, PieChart, Pie, Cell, } from "recharts" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" const userGrowthData = [ { date: "2023-01", users: 5000 }, { date: "2023-02", users: 7000 }, { date: "2023-03", users: 10000 }, { date: "2023-04", users: 15000 }, { date: "2023-05", users: 20000 }, { date: "2023-06", users: 25000 }, ] const commandUsageData = [ { command: "!help", usage: 1200 }, { command: "!play", usage: 1000 }, { command: "!stats", usage: 800 }, { command: "!ban", usage: 150 }, { command: "!mute", usage: 100 }, { command: "!kick", usage: 80 }, { command: "!clear", usage: 60 }, { command: "!role", usage: 50 }, ] const userActivityData = [ { name: "Very Active", value: 30 }, { name: "Active", value: 40 }, { name: "Occasional", value: 20 }, { name: "Inactive", value: 10 }, ] const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"] export default function Analytics() { const [timeRange, setTimeRange] = useState("7d") return (

Analytics

User Growth Command Usage User Activity User Growth Over Time Command Usage Statistics User Activity Distribution `${name} ${(percent * 100).toFixed(0)}%`} > {userActivityData.map((entry, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/components/Moderation.tsx" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" const initialReports = [ { id: 1, reporter: "User123", reported: "BadUser456", reason: "Spam", status: "Open" }, { id: 2, reporter: "User789", reported: "TrollUser101", reason: "Harassment", status: "In Progress" }, { id: 3, reporter: "User234", reported: "Spammer567", reason: "Inappropriate Content", status: "Closed" }, ] export default function Moderation() { const [reports, setReports] = useState(initialReports) const [selectedReport, setSelectedReport] = useState(null) const handleStatusChange = (reportId, newStatus) => { setReports(reports.map((report) => (report.id === reportId ? { ...report, status: newStatus } : report))) } return (

User Reports Reporter Reported User Reason Status Actions {reports.map((report) => ( {report.reporter} {report.reported} {report.reason} {report.status} ))}

) } [V0_FILE]typescriptreact:file="app/components/theme-provider.tsx" "use client" import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/components/mode-toggle.tsx" "use client" import * as React from "react" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="app/components/BotStatistics.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip } from "recharts" const initialData = Array(30) .fill(0) .map((_, i) => ({ time: i, users: Math.floor(Math.random() * 1000) + 5000, messages: Math.floor(Math.random() * 500) + 1000, commands: Math.floor(Math.random() * 100) + 200, })) export default function BotStatistics() { const [data, setData] = useState(initialData) useEffect(() => { const interval = setInterval(() => { setData((currentData) => { const newData = [ ...currentData.slice(1), { time: currentData[currentData.length - 1].time + 1, users: Math.floor(Math.random() * 1000) + 5000, messages: Math.floor(Math.random() * 500) + 1000, commands: Math.floor(Math.random() * 100) + 200, }, ] return newData }) }, 5000) return () => clearInterval(interval) }, []) return ( Real-time Bot Statistics ) } [V0_FILE]typescriptreact:file="app/components/CommandPanel.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Switch } from "@/components/ui/switch" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Plus, X, Edit2, Search, Code, Save, Trash2 } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { toast } from "@/components/ui/use-toast" const initialCommands = [ { id: 1, name: "!help", description: "Show help menu", enabled: true, type: "simple" }, { id: 2, name: "!stats", description: "Show server stats", enabled: false, type: "simple" }, { id: 3, name: "!ban", description: "Ban a user", enabled: true, type: "advanced", code: "// Ban user code" }, { id: 4, name: "!mute", description: "Mute a user", enabled: true, type: "advanced", code: "// Mute user code" }, ] export default function CommandPanel() { const [commands, setCommands] = useState(initialCommands) const [newCommand, setNewCommand] = useState({ id: null, name: "", description: "", code: "", type: "simple", enabled: true, }) const [editingCommand, setEditingCommand] = useState(null) const [searchTerm, setSearchTerm] = useState("") const [activeTab, setActiveTab] = useState("list") const [isLoading, setIsLoading] = useState(false) useEffect(() => { // Simulating API call to fetch commands setIsLoading(true) setTimeout(() => { setIsLoading(false) }, 1000) }, []) const toggleCommand = (id) => { setCommands(commands.map((cmd) => (cmd.id === id ? { ...cmd, enabled: !cmd.enabled } : cmd))) } const addCommand = () => { if (newCommand.name && newCommand.description) { setCommands([...commands, { ...newCommand, id: Date.now() }]) setNewCommand({ id: null, name: "", description: "", code: "", type: "simple", enabled: true }) setActiveTab("list") toast({ title: "Command Added", description: `${newCommand.name} has been added successfully.`, }) } } const removeCommand = (id) => { setCommands(commands.filter((cmd) => cmd.id !== id)) toast({ title: "Command Removed", description: "The command has been removed successfully.", variant: "destructive", }) } const editCommand = (command) => { setNewCommand(command) setEditingCommand(command.id) setActiveTab("builder") } const saveEditedCommand = () => { if (newCommand.name && newCommand.description) { setCommands(commands.map((cmd) => (cmd.id === editingCommand ? newCommand : cmd))) setNewCommand({ id: null, name: "", description: "", code: "", type: "simple", enabled: true }) setEditingCommand(null) setActiveTab("list") toast({ title: "Command Updated", description: `${newCommand.name} has been updated successfully.`, }) } } const filteredCommands = commands.filter( (command) => command.name.toLowerCase().includes(searchTerm.toLowerCase()) || command.description.toLowerCase().includes(searchTerm.toLowerCase()), ) return ( Command Management

setSearchTerm(e.target.value)} />

Command List Command Builder {isLoading ? (

Loading commands...

) : ( Command Description Type Status Actions {filteredCommands.map((command) => ( {command.name} {command.description} {command.type} toggleCommand(command.id)} />

))}

)}

Command Name setNewCommand({ ...newCommand, name: e.target.value })} />

Command Type

Description setNewCommand({ ...newCommand, description: e.target.value })} />

{newCommand.type === "advanced" && (

Command Code

setNewCommand({ ...newCommand, code: e.target.value })}
                    className="font-mono"
                    rows={10}
                  />
                </div>
              )}
              <Button onClick={editingCommand !== null ? saveEditedCommand : addCommand}>
                {editingCommand !== null ? (
                  <>
                    <Save className="mr-2 h-4 w-4" /> Save Changes
                  </>
                ) : (
                  <>
                    <Plus className="mr-2 h-4 w-4" /> Add Command
                  </>
                )}
              </Button>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/components/ServerList.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Search, ArrowUpDown, Users, MessageSquare, Hash, Settings, Trash2 } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
} from "@/components/ui/dialog"
import { Progress } from "@/components/ui/progress"
import { toast } from "@/components/ui/use-toast"

const initialServers = [
  {
    id: 1,
    name: "Gaming Community",
    members: 1500,
    status: "online",
    channels: 20,
    messagesPerDay: 5000,
    topChannels: ["general", "gaming", "voice-chat"],
    activeUsers: 750,
  },
  {
    id: 2,
    name: "Music Lovers",
    members: 800,
    status: "online",
    channels: 15,
    messagesPerDay: 2000,
    topChannels: ["music-chat", "song-requests", "concerts"],
    activeUsers: 400,
  },
  {
    id: 3,
    name: "Developers Hub",
    members: 2000,
    status: "online",
    channels: 30,
    messagesPerDay: 8000,
    topChannels: ["general", "job-postings", "code-help"],
    activeUsers: 1200,
  },
  {
    id: 4,
    name: "Anime Fan Club",
    members: 1200,
    status: "offline",
    channels: 18,
    messagesPerDay: 3000,
    topChannels: ["anime-discussion", "manga-chat", "cosplay"],
    activeUsers: 600,
  },
]

export default function ServerList() {
  const [servers, setServers] = useState(initialServers)
  const [searchTerm, setSearchTerm] = useState("")
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc")
  const [selectedServer, setSelectedServer] = useState(null)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Simulating API call to fetch servers
    setTimeout(() => {
      setIsLoading(false)
    }, 1000)
  }, [])

const filteredServers = servers
    .filter((server) => server.name.toLowerCase().includes(searchTerm.toLowerCase()))
    .sort((a, b) => (sortOrder === "asc" ? a.members - b.members : b.members - a.members))

const toggleSortOrder = () => {
    setSortOrder(sortOrder === "asc" ? "desc" : "asc")
  }

const removeServer = (id) => {
    setServers(servers.filter((server) => server.id !== id))
    toast({
      title: "Server Removed",
      description: "The server has been removed from the list.",
      variant: "destructive",
    })
  }

return (
    <Card className="w-full">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle>Connected Servers</CardTitle>
        <div className="flex items-center space-x-2">
          <div className="relative">
            <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="Search servers..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-8"
            />
          </div>
          <Button variant="outline" size="icon" onClick={toggleSortOrder}>
            <ArrowUpDown className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-[400px] pr-4">
          {isLoading ? (
            <div className="flex justify-center items-center h-full">
              <p>Loading servers...</p>
            </div>
          ) : (
            <ul className="space-y-2">
              {filteredServers.map((server) => (
                <li key={server.id} className="flex justify-between items-center p-2 hover:bg-accent rounded-md">
                  <div>
                    <span className="font-medium">{server.name}</span>
                    <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                      <Users className="h-4 w-4" />
                      <span>{server.members} members</span>
                      <MessageSquare className="h-4 w-4 ml-2" />
                      <span>{server.messagesPerDay} msg/day</span>
                    </div>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Badge variant={server.status === "online" ? "default" : "secondary"}>{server.status}</Badge>
                    <Dialog>
                      <DialogTrigger asChild>
                        <Button variant="outline" size="sm" onClick={() => setSelectedServer(server)}>
                          Details
                        </Button>
                      </DialogTrigger>
                      <DialogContent>
                        <DialogHeader>
                          <DialogTitle>{server.name}</DialogTitle>
                          <DialogDescription>Detailed server information</DialogDescription>
                        </DialogHeader>
                        <div className="space-y-4">
                          <div>
                            <h4 className="font-semibold">Members</h4>
                            <p>{server.members}</p>
                          </div>
                          <div>
                            <h4 className="font-semibold">Channels</h4>
                            <p>{server.channels}</p>
                          </div>
                          <div>
                            <h4 className="font-semibold">Messages per Day</h4>
                            <p>{server.messagesPerDay}</p>
                          </div>
                          <div>
                            <h4 className="font-semibold">Top Channels</h4>
                            <ul className="list-disc list-inside">
                              {server.topChannels.map((channel, index) => (
                                <li key={index}>#{channel}</li>
                              ))}
                            </ul>
                          </div>
                          <div>
                            <h4 className="font-semibold">Active Users</h4>
                            <Progress value={(server.activeUsers / server.members) * 100} className="mt-2" />
                            <p className="text-sm text-muted-foreground mt-1">
                              {server.activeUsers} out of {server.members} members
                            </p>
                          </div>
                        </div>
                        <DialogFooter>
                          <Button variant="outline" onClick={() => setSelectedServer(null)}>
                            Close
                          </Button>
                          <Button
                            onClick={() => {
                              // Implement server settings logic here
                              toast({
                                title: "Server Settings",
                                description: "Opening server settings...",
                              })
                            }}
                          >
                            <Settings className="mr-2 h-4 w-4" />
                            Server Settings
                          </Button>
                        </DialogFooter>
                      </DialogContent>
                    </Dialog>
                    <Button variant="outline" size="icon" onClick={() => removeServer(server.id)}>
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </ScrollArea>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/components/Settings.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Slider } from "@/components/ui/slider"
import { toast } from "@/components/ui/use-toast"
import { Textarea } from "@/components/ui/textarea"

export default function Settings() {
  const [settings, setSettings] = useState({
    botToken: "••••••••••••••••",
    prefix: "!",
    autoReconnect: true,
    logLevel: "INFO",
    activityType: "PLAYING",
    activityName: "with commands",
    language: "en",
    maxServers: 100,
    maxCommandsPerMinute: 60,
    customStatus: "",
    enabledModules: {
      moderation: true,
      music: false,
      games: true,
      economy: false,
    },
    databaseUrl: "mongodb://localhost:27017/discordbot",
    backupFrequency: 24, // hours
  })

const handleChange = (key: string, value: any) => {
    setSettings((prev) => ({ ...prev, [key]: value }))
  }

const handleModuleToggle = (module: string) => {
    setSettings((prev) => ({
      ...prev,
      enabledModules: {
        ...prev.enabledModules,
        [module]: !prev.enabledModules[module],
      },
    }))
  }

const handleSave = () => {
    // Here you would typically send the settings to your backend
    console.log("Saving settings:", settings)
    toast({
      title: "Settings Saved",
      description: "Your bot settings have been updated successfully.",
    })
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>Bot Settings</CardTitle>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="general" className="w-full">
          <TabsList>
            <TabsTrigger value="general">General</TabsTrigger>
            <TabsTrigger value="advanced">Advanced</TabsTrigger>
            <TabsTrigger value="modules">Modules</TabsTrigger>
            <TabsTrigger value="database">Database</TabsTrigger>
          </TabsList>
          <TabsContent value="general">
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="botToken">Bot Token</Label>
                <Input
                  id="botToken"
                  type="password"
                  value={settings.botToken}
                  onChange={(e) => handleChange("botToken", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="prefix">Command Prefix</Label>
                <Input id="prefix" value={settings.prefix} onChange={(e) => handleChange("prefix", e.target.value)} />
              </div>
              <div className="flex items-center space-x-2">
                <Switch
                  id="autoReconnect"
                  checked={settings.autoReconnect}
                  onCheckedChange={(checked) => handleChange("autoReconnect", checked)}
                />
                <Label htmlFor="autoReconnect">Auto Reconnect</Label>
              </div>
              <div className="space-y-2">
                <Label htmlFor="language">Language</Label>
                <Select onValueChange={(value) => handleChange("language", value)} defaultValue={settings.language}>
                  <SelectTrigger id="language">
                    <SelectValue placeholder="Select language" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="en">English</SelectItem>
                    <SelectItem value="es">Spanish</SelectItem>
                    <SelectItem value="fr">French</SelectItem>
                    <SelectItem value="de">German</SelectItem>
                    <SelectItem value="ja">Japanese</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="advanced">
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="logLevel">Log Level</Label>
                <Select onValueChange={(value) => handleChange("logLevel", value)} defaultValue={settings.logLevel}>
                  <SelectTrigger id="logLevel">
                    <SelectValue placeholder="Select log level" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="DEBUG">Debug</SelectItem>
                    <SelectItem value="INFO">Info</SelectItem>
                    <SelectItem value="WARN">Warning</SelectItem>
                    <SelectItem value="ERROR">Error</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="activityType">Activity Type</Label>
                <Select
                  onValueChange={(value) => handleChange("activityType", value)}
                  defaultValue={settings.activityType}
                >
                  <SelectTrigger id="activityType">
                    <SelectValue placeholder="Select activity type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="PLAYING">Playing</SelectItem>
                    <SelectItem value="LISTENING">Listening</SelectItem>
                    <SelectItem value="WATCHING">Watching</SelectItem>
                    <SelectItem value="COMPETING">Competing</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="activityName">Activity Name</Label>
                <Input
                  id="activityName"
                  value={settings.activityName}
                  onChange={(e) => handleChange("activityName", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="customStatus">Custom Status</Label>
                <Textarea
                  id="customStatus"
                  value={settings.customStatus}
                  onChange={(e) => handleChange("customStatus", e.target.value)}
                  placeholder="Enter a custom status message"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="maxServers">Max Servers</Label>
                <Slider
                  id="maxServers"
                  min={1}
                  max={1000}
                  step={10}
                  value={[settings.maxServers]}
                  onValueChange={(value) => handleChange("maxServers", value[0])}
                />
                <div className="text-sm text-muted-foreground mt-1">Current value: {settings.maxServers}</div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="maxCommandsPerMinute">Max Commands Per Minute</Label>
                <Slider
                  id="maxCommandsPerMinute"
                  min={1}
                  max={200}
                  step={1}
                  value={[settings.maxCommandsPerMinute]}
                  onValueChange={(value) => handleChange("maxCommandsPerMinute", value[0])}
                />
                <div className="text-sm text-muted-foreground mt-1">Current value: {settings.maxCommandsPerMinute}</div>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="modules">
            <div className="space-y-4">
              {Object.entries(settings.enabledModules).map(([module, enabled]) => (
                <div key={module} className="flex items-center space-x-2">
                  <Switch
                    id={`module-${module}`}
                    checked={enabled}
                    onCheckedChange={() => handleModuleToggle(module)}
                  />
                  <Label htmlFor={`module-${module}`} className="capitalize">
                    {module}
                  </Label>
                </div>
              ))}
            </div>
          </TabsContent>
          <TabsContent value="database">
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="databaseUrl">Database URL</Label>
                <Input
                  id="databaseUrl"
                  value={settings.databaseUrl}
                  onChange={(e) => handleChange("databaseUrl", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="backupFrequency">Backup Frequency (hours)</Label>
                <Slider
                  id="backupFrequency"
                  min={1}
                  max={168}
                  step={1}
                  value={[settings.backupFrequency]}
                  onValueChange={(value) => handleChange("backupFrequency", value[0])}
                />
                <div className="text-sm text-muted-foreground mt-1">
                  Current value: {settings.backupFrequency} hours
                </div>
              </div>
            </div>
          </TabsContent>
        </Tabs>
        <Button onClick={handleSave} className="mt-4">
          Save Settings
        </Button>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/components/RecentLogsWidget.tsx"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { useWebSocket } from "@/hooks/useWebSocket"

interface LogEntry {
  id: number
  timestamp: string
  level: "INFO" | "DEBUG" | "WARN" | "ERROR"
  message: string
  source: string
}

export default function RecentLogsWidget() {
  const [recentLogs, setRecentLogs] = useState<LogEntry[]>([])
  const { socket, isConnected, error } = useWebSocket("wss://api.example.com/logs")

useEffect(() => {
    if (socket) {
      socket.onmessage = (event) => {
        const newLog: LogEntry = JSON.parse(event.data)
        setRecentLogs((prevLogs) => [newLog, ...prevLogs].slice(0, 5)) // Keep only the 5 most recent logs
      }
    }
  }, [socket])

const getLevelBadgeVariant = (level: LogEntry["level"]) => {
    switch (level) {
      case "ERROR":
        return "destructive"
      case "WARN":
        return "warning"
      case "INFO":
        return "default"
      case "DEBUG":
        return "secondary"
      default:
        return "outline"
    }
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>Recent Logs</CardTitle>
      </CardHeader>
      <CardContent>
        {error && (
          <div className="bg-destructive text-destructive-foreground p-2 mb-4 rounded text-sm">
            Error connecting to WebSocket: {error}
          </div>
        )}
        {isConnected && (
          <div className="bg-green-500 text-white p-2 mb-4 rounded text-sm">Connected to real-time log updates</div>
        )}
        <ScrollArea className="h-[300px]">
          {recentLogs.length === 0 ? (
            <p className="text-center text-muted-foreground">No recent logs</p>
          ) : (
            <ul className="space-y-2">
              {recentLogs.map((log) => (
                <li key={log.id} className="flex items-center space-x-2 text-sm">
                  <Badge variant={getLevelBadgeVariant(log.level)}>{log.level}</Badge>
                  <span className="font-medium">{log.source}</span>
                  <span className="truncate flex-1">{log.message}</span>
                </li>
              ))}
            </ul>
          )}
        </ScrollArea>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/components/Dashboard.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
} from "recharts"
import { Activity, Users, Terminal, Server, RefreshCcw } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import RecentLogsWidget from "./RecentLogsWidget"

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"]

export default function Dashboard() {
  const [activityData, setActivityData] = useState([])
  const [topCommandsData, setTopCommandsData] = useState([])
  const [serverData, setServerData] = useState([])
  const [timeRange, setTimeRange] = useState("7d")
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)

const fetchData = useCallback(async () => {
    setIsLoading(true)
    setError(null)
    try {
      // Simulating API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

setActivityData([
        { name: "Mon", commands: 400, messages: 2400, users: 200, activeUsers: 150 },
        { name: "Tue", commands: 300, messages: 1398, users: 180, activeUsers: 120 },
        { name: "Wed", commands: 600, messages: 3800, users: 250, activeUsers: 180 },
        { name: "Thu", commands: 800, messages: 4200, users: 280, activeUsers: 200 },
        { name: "Fri", commands: 500, messages: 2400, users: 220, activeUsers: 160 },
        { name: "Sat", commands: 700, messages: 1500, users: 300, activeUsers: 220 },
        { name: "Sun", commands: 600, messages: 2000, users: 270, activeUsers: 190 },
      ])

setTopCommandsData([
        { name: "!help", uses: 1200 },
        { name: "!play", uses: 1000 },
        { name: "!stats", uses: 800 },
        { name: "!ban", uses: 150 },
        { name: "!mute", uses: 100 },
      ])

setServerData([
        { name: "Gaming", value: 400 },
        { name: "Music", value: 300 },
        { name: "Education", value: 300 },
        { name: "Technology", value: 200 },
      ])
    } catch (err) {
      console.error("Error fetching data:", err)
      setError(err instanceof Error ? err : new Error("An error occurred while fetching data"))
    } finally {
      setIsLoading(false)
    }
  }, [])

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

return (
    <div className="space-y-6">
      {error && (
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
          <strong className="font-bold">Error:</strong>
          <span className="block sm:inline"> {error.message}</span>
        </div>
      )}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-2 sm:space-y-0">
        <h2 className="text-3xl font-bold">Dashboard</h2>
        <div className="flex items-center space-x-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[100px]">
              <SelectValue placeholder="Time" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="24h">24h</SelectItem>
              <SelectItem value="7d">7d</SelectItem>
              <SelectItem value="30d">30d</SelectItem>
              <SelectItem value="90d">90d</SelectItem>
            </SelectContent>
          </Select>
          <Button size="sm" onClick={fetchData} disabled={isLoading}>
            <RefreshCcw className="h-4 w-4" />
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Servers</CardTitle>
            <Server className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">1,200</div>
            <p className="text-xs text-muted-foreground">+20.1% from last month</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Users</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">50,000</div>
            <p className="text-xs text-muted-foreground">+15.2% from last month</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Commands</CardTitle>
            <Terminal className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">5,678</div>
            <p className="text-xs text-muted-foreground">+7.4% from yesterday</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Active</CardTitle>
            <Activity className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">2,345</div>
            <p className="text-xs text-muted-foreground">+5.6% from last hour</p>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Tabs defaultValue="activity" className="space-y-4">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="activity">Activity</TabsTrigger>
            <TabsTrigger value="commands">Commands</TabsTrigger>
            <TabsTrigger value="servers">Servers</TabsTrigger>
          </TabsList>
          <TabsContent value="activity">
            <Card>
              <CardHeader>
                <CardTitle>Activity Overview</CardTitle>
              </CardHeader>
              <CardContent className="h-[300px]">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={activityData}>
                    <XAxis dataKey="name" />
                    <YAxis />
                    <Tooltip />
                    <Line type="monotone" dataKey="commands" stroke="#8884d8" />
                    <Line type="monotone" dataKey="messages" stroke="#82ca9d" />
                    <Line type="monotone" dataKey="users" stroke="#ffc658" />
                    <Line type="monotone" dataKey="activeUsers" stroke="#ff8042" />
                  </LineChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="commands">
            <Card>
              <CardHeader>
                <CardTitle>Top Commands</CardTitle>
              </CardHeader>
              <CardContent className="h-[300px]">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={topCommandsData}>
                    <XAxis dataKey="name" />
                    <YAxis />
                    <Tooltip />
                    <Bar dataKey="uses" fill="#8884d8" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="servers">
            <Card>
              <CardHeader>
                <CardTitle>Server Categories</CardTitle>
              </CardHeader>
              <CardContent className="h-[300px]">
                <ResponsiveContainer width="100%" height="100%">
                  <PieChart>
                    <Pie
                      data={serverData}
                      cx="50%"
                      cy="50%"
                      outerRadius={80}
                      fill="#8884d8"
                      dataKey="value"
                      label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                    >
                      {serverData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
        <RecentLogsWidget />
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="app/components/LogViewer.tsx"
"use client"

import { useState, useEffect, useCallback } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Search, Download, RefreshCcw } from "lucide-react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { toast } from "@/components/ui/use-toast"
import { useWebSocket } from "@/hooks/useWebSocket"

interface LogEntry {
  id: number
  timestamp: string
  level: "INFO" | "DEBUG" | "WARN" | "ERROR"
  message: string
  source: string
}

const initialLogEntries: LogEntry[] = [
  { id: 1, timestamp: "2023-06-10 10:15:30", level: "INFO", message: "Bot started successfully", source: "System" },
  { id: 2, timestamp: "2023-06-10 10:16:45", level: "DEBUG", message: "Connecting to Discord API", source: "API" },
  { id: 3, timestamp: "2023-06-10 10:17:00", level: "INFO", message: "Connected to 5 servers", source: "System" },
  {
    id: 4,
    timestamp: "2023-06-10 10:18:20",
    level: "WARN",
    message: "Rate limit approached for command !stats",
    source: "Commands",
  },
  {
    id: 5,
    timestamp: "2023-06-10 10:19:10",
    level: "ERROR",
    message: "Failed to fetch user data for ID 123456",
    source: "Database",
  },
]

export default function LogViewer() {
  const [logEntries, setLogEntries] = useState<LogEntry[]>(initialLogEntries)
  const [logLevel, setLogLevel] = useState("ALL")
  const [searchTerm, setSearchTerm] = useState("")
  const [sourceFilter, setSourceFilter] = useState("ALL")
  const [isLoading, setIsLoading] = useState(false)

const { socket, isConnected, error, reconnect } = useWebSocket("wss://api.example.com/logs")

useEffect(() => {
    if (socket) {
      socket.onmessage = (event) => {
        try {
          const newLog: LogEntry = JSON.parse(event.data)
          setLogEntries((prevLogs) => [newLog, ...prevLogs].slice(0, 1000))
        } catch (error) {
          console.error("Error parsing WebSocket message:", error)
          toast({ title: "Error", description: "Failed to parse incoming log message.", variant: "destructive" })
        }
      }
    }
  }, [socket])

const fetchLogs = useCallback(async () => {
    setIsLoading(true)
    try {
      const response = await fetch("https://api.example.com/logs")
      if (!response.ok) throw new Error("Failed to fetch logs")
      const fetchedLogs: LogEntry[] = await response.json()
      setLogEntries(fetchedLogs)
      toast({ title: "Logs Updated", description: "The log entries have been successfully updated." })
    } catch (error) {
      console.error("Error fetching logs:", error)
      toast({ title: "Error", description: "Failed to fetch logs. Please try again.", variant: "destructive" })
    } finally {
      setIsLoading(false)
    }
  }, [])

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

const filteredLogs = logEntries
    .filter((entry) => logLevel === "ALL" || entry.level === logLevel)
    .filter((entry) => sourceFilter === "ALL" || entry.source === sourceFilter)
    .filter(
      (entry) =>
        entry.message.toLowerCase().includes(searchTerm.toLowerCase()) ||
        entry.timestamp.includes(searchTerm) ||
        entry.source.toLowerCase().includes(searchTerm.toLowerCase()),
    )

const handleDownload = () => {
    const content = filteredLogs
      .map((entry) => `${entry.timestamp} [${entry.level}] [${entry.source}] ${entry.message}`)
      .join("\n")
    const blob = new Blob([content], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = "bot_logs.txt"
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
    toast({ title: "Logs Downloaded", description: "The log file has been downloaded successfully." })
  }

return (
    <Card className="w-full">
      <CardHeader className="p-2 space-y-2">
        <CardTitle className="text-lg">Log Viewer</CardTitle>
        <div className="flex flex-wrap items-center gap-2">
          <Select onValueChange={setLogLevel} defaultValue={logLevel}>
            <SelectTrigger className="w-[80px]">
              <SelectValue placeholder="Level" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ALL">All</SelectItem>
              <SelectItem value="INFO">Info</SelectItem>
              <SelectItem value="DEBUG">Debug</SelectItem>
              <SelectItem value="WARN">Warn</SelectItem>
              <SelectItem value="ERROR">Error</SelectItem>
            </SelectContent>
          </Select>
          <Select onValueChange={setSourceFilter} defaultValue={sourceFilter}>
            <SelectTrigger className="w-[80px]">
              <SelectValue placeholder="Source" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ALL">All</SelectItem>
              <SelectItem value="System">System</SelectItem>
              <SelectItem value="API">API</SelectItem>
              <SelectItem value="Commands">Commands</SelectItem>
              <SelectItem value="Database">Database</SelectItem>
            </SelectContent>
          </Select>
          <div className="relative flex-grow">
            <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="Search logs..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-8 h-8"
            />
          </div>
          <Button variant="outline" size="icon" onClick={handleDownload}>
            <Download className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="icon" onClick={fetchLogs} disabled={isLoading}>
            <RefreshCcw className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent className="p-2">
        {error && (
          <div className="bg-destructive text-destructive-foreground p-2 mb-2 rounded text-sm">
            <p>{error}</p>
            <Button variant="outline" size="sm" onClick={reconnect} className="mt-2">
              Attempt Manual Reconnection
            </Button>
          </div>
        )}
        {isConnected ? (
          <div className="bg-green-500 text-white p-2 mb-2 rounded text-sm">Connected to real-time log updates</div>
        ) : (
          <div className="bg-yellow-500 text-white p-2 mb-2 rounded text-sm">
            Not connected to real-time log updates. Attempting to reconnect...
          </div>
        )}
        <ScrollArea className="h-[300px]">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[80px]">Time</TableHead>
                <TableHead className="w-[60px]">Level</TableHead>
                <TableHead className="w-[70px]">Source</TableHead>
                <TableHead>Message</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={4} className="text-center">
                    Loading logs...
                  </TableCell>
                </TableRow>
              ) : filteredLogs.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={4} className="text-center">
                    No logs found matching the current filters.
                  </TableCell>
                </TableRow>
              ) : (
                filteredLogs.map((entry) => (
                  <TableRow key={entry.id}>
                    <TableCell className="font-mono text-xs">{entry.timestamp.split(" ")[1]}</TableCell>
                    <TableCell>
                      <Badge variant={getLevelBadgeVariant(entry.level)}>{entry.level}</Badge>
                    </TableCell>
                    <TableCell className="text-xs">{entry.source}</TableCell>
                    <TableCell className="max-w-[200px] truncate">{entry.message}</TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </ScrollArea>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/ui/tree.tsx"
import type React from "react"
import { useState } from "react"
import { ChevronRight, ChevronDown } from "lucide-react"

interface TreeItemProps {
  id: string
  name: string
  children?: TreeItemProps[]
}

interface TreeProps {
  items: TreeItemProps[]
}

const TreeItem: React.FC<TreeItemProps> = ({ id, name, children }) => {
  const [isOpen, setIsOpen] = useState(false)

const hasChildren = children && children.length > 0

return (
    <div>
      <div className="flex items-center cursor-pointer" onClick={() => hasChildren && setIsOpen(!isOpen)}>
        {hasChildren && (isOpen ? <ChevronDown className="h-4 w-4 mr-1" /> : <ChevronRight className="h-4 w-4 mr-1" />)}
        <span>{name}</span>
      </div>
      {isOpen && hasChildren && (
        <div className="ml-4 mt-1">
          {children.map((child) => (
            <TreeItem key={child.id} {...child} />
          ))}
        </div>
      )}
    </div>
  )
}

export const Tree: React.FC<TreeProps> = ({ items }) => {
  return (
    <div className="space-y-2">
      {items.map((item) => (
        <TreeItem key={item.id} {...item} />
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/ServerStructure.tsx"
import type React from "react"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { EnhancedTree, type TreeItem } from "@/components/ui/enhanced-tree"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Loader2, RefreshCw, Plus, Search } from "lucide-react"
import { toast } from "@/components/ui/use-toast"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"

interface ServerStructureProps {
  serverStructure: TreeItem[]
  setServerStructure: React.Dispatch<React.SetStateAction<TreeItem[]>>
  onChannelSelect: (serverId: string, channelId: string) => void
}

export function ServerStructure({ serverStructure, setServerStructure, onChannelSelect }: ServerStructureProps) {
  const [isLoading, setIsLoading] = useState(false)
  const [searchTerm, setSearchTerm] = useState("")

useEffect(() => {
    // Simulating real-time updates
    const interval = setInterval(() => {
      // In a real application, this would be replaced with a WebSocket connection
      // or a polling mechanism to fetch updates from the server
      const randomServer = serverStructure[Math.floor(Math.random() * serverStructure.length)]
      const randomCategory = randomServer.children?.[Math.floor(Math.random() * randomServer.children!.length)]
      if (randomCategory) {
        const newChannel: TreeItem = {
          id: `channel${Date.now()}`,
          name: `new-channel-${Date.now()}`,
          type: "channel",
        }
        const updatedServerStructure = serverStructure.map((server) =>
          server.id === randomServer.id
            ? {
                ...server,
                children: server.children!.map((category) =>
                  category.id === randomCategory.id
                    ? { ...category, children: [...category.children!, newChannel] }
                    : category,
                ),
              }
            : server,
        )
        setServerStructure(updatedServerStructure)
        toast({
          title: "New Channel Added",
          description: `A new channel "${newChannel.name}" has been added to "${randomCategory.name}" in "${randomServer.name}".`,
        })
      }
    }, 30000) // Update every 30 seconds

return () => clearInterval(interval)
  }, [serverStructure, setServerStructure])

const refreshServerStructure = async () => {
    setIsLoading(true)
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))
      // In a real application, you would fetch the actual server structure here
      toast({
        title: "Server Structure Refreshed",
        description: "The server structure has been updated successfully.",
      })
    } catch (error) {
      console.error("Error refreshing server structure:", error)
      toast({
        title: "Error",
        description: "Failed to refresh server structure. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const addNewServer = (name: string) => {
    const newServer: TreeItem = {
      id: `server${Date.now()}`,
      name: name,
      type: "server",
      children: [],
    }
    setServerStructure([...serverStructure, newServer])
    toast({
      title: "New Server Added",
      description: `Server "${name}" has been added successfully.`,
    })
  }

const handleServerStructureUpdate = (updatedStructure: TreeItem[]) => {
    setServerStructure(updatedStructure)
  }

const filteredServerStructure = serverStructure
    .map((server) => ({
      ...server,
      children: server.children
        ?.filter(
          (category) =>
            category.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            category.children?.some((channel) => channel.name.toLowerCase().includes(searchTerm.toLowerCase())),
        )
        .map((category) => ({
          ...category,
          children: category.children?.filter((channel) =>
            channel.name.toLowerCase().includes(searchTerm.toLowerCase()),
          ),
        })),
    }))
    .filter((server) => server.name.toLowerCase().includes(searchTerm.toLowerCase()) || server.children?.length > 0)

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle>Server Structure</CardTitle>
        <div className="flex space-x-2">
          <Dialog>
            <DialogTrigger asChild>
              <Button>
                <Plus className="mr-2 h-4 w-4" />
                Add Server
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Add New Server</DialogTitle>
              </DialogHeader>
              <Input
                placeholder="Enter server name"
                onKeyPress={(e) => {
                  if (e.key === "Enter") {
                    addNewServer(e.currentTarget.value)
                    e.currentTarget.value = ""
                  }
                }}
              />
            </DialogContent>
          </Dialog>
          <Button onClick={refreshServerStructure} disabled={isLoading}>
            {isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
            Refresh
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="mb-4">
          <div className="relative">
            <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="Search servers, categories, or channels..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-8"
            />
          </div>
        </div>
        {isLoading ? (
          <div className="flex justify-center items-center h-64">
            <Loader2 className="h-8 w-8 animate-spin" />
          </div>
        ) : (
          <EnhancedTree
            items={filteredServerStructure}
            onUpdate={handleServerStructureUpdate}
            onChannelSelect={onChannelSelect}
          />
        )}
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/ui/enhanced-tree.tsx"
import type React from "react"
import { useState } from "react"
import { ChevronRight, ChevronDown, Server, Hash, Folder, Plus, Edit2, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { toast } from "@/components/ui/use-toast"

export interface TreeItem {
  id: string
  name: string
  type: "server" | "category" | "channel"
  children?: TreeItem[]
}

interface EnhancedTreeProps {
  items: TreeItem[]
  onUpdate: (items: TreeItem[]) => void
  onChannelSelect: (serverId: string, channelId: string) => void
}

const EnhancedTreeItem: React.FC<{
  item: TreeItem
  onUpdate: (updatedItem: TreeItem) => void
  onDelete: () => void
  onAddChild: (newItem: TreeItem) => void
  onChannelSelect: (serverId: string, channelId: string) => void
  serverId: string
}> = ({ item, onUpdate, onDelete, onAddChild, onChannelSelect, serverId }) => {
  const [isOpen, setIsOpen] = useState(false)
  const [isEditing, setIsEditing] = useState(false)
  const [editedName, setEditedName] = useState(item.name)

const handleToggle = () => setIsOpen(!isOpen)

const handleEdit = () => {
    setIsEditing(true)
  }

const handleSave = () => {
    onUpdate({ ...item, name: editedName })
    setIsEditing(false)
    toast({
      title: "Item Updated",
      description: `${item.type.charAt(0).toUpperCase() + item.type.slice(1)} "${item.name}" has been updated.`,
    })
  }

const handleAddChild = (type: "category" | "channel") => {
    const newItem: TreeItem = {
      id: Date.now().toString(),
      name: `New ${type}`,
      type: type,
    }
    onAddChild(newItem)
    setIsOpen(true)
    toast({
      title: "Item Added",
      description: `New ${type} has been added to "${item.name}".`,
    })
  }

const handleChannelClick = () => {
    if (item.type === "channel") {
      onChannelSelect(serverId, item.id)
    }
  }

const getIcon = () => {
    switch (item.type) {
      case "server":
        return <Server className="h-4 w-4 mr-2" />
      case "category":
        return <Folder className="h-4 w-4 mr-2" />
      case "channel":
        return <Hash className="h-4 w-4 mr-2" />
    }
  }

return (
    <div>
      <div className="flex items-center mb-1">
        {item.children && (
          <Button variant="ghost" size="sm" onClick={handleToggle}>
            {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
          </Button>
        )}
        {getIcon()}
        {isEditing ? (
          <Input
            value={editedName}
            onChange={(e) => setEditedName(e.target.value)}
            onBlur={handleSave}
            className="h-6 py-1 px-2 text-sm"
          />
        ) : (
          <span
            className={`flex-grow ${item.type === "channel" ? "cursor-pointer hover:underline" : ""}`}
            onClick={handleChannelClick}
          >
            {item.name}
          </span>
        )}
        <div className="flex space-x-1">
          <Button variant="ghost" size="sm" onClick={handleEdit}>
            <Edit2 className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="sm" onClick={onDelete}>
            <Trash2 className="h-4 w-4" />
          </Button>
          {item.type !== "channel" && (
            <Dialog>
              <DialogTrigger asChild>
                <Button variant="ghost" size="sm">
                  <Plus className="h-4 w-4" />
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Add New Item</DialogTitle>
                </DialogHeader>
                <div className="flex justify-around mt-4">
                  {item.type === "server" && <Button onClick={() => handleAddChild("category")}>Add Category</Button>}
                  <Button onClick={() => handleAddChild("channel")}>Add Channel</Button>
                </div>
              </DialogContent>
            </Dialog>
          )}
        </div>
      </div>
      {isOpen && item.children && (
        <div className="ml-6">
          {item.children.map((child) => (
            <EnhancedTreeItem
              key={child.id}
              item={child}
              onUpdate={(updatedChild) => {
                const updatedChildren = item.children!.map((c) => (c.id === updatedChild.id ? updatedChild : c))
                onUpdate({ ...item, children: updatedChildren })
              }}
              onDelete={() => {
                const updatedChildren = item.children!.filter((c) => c.id !== child.id)
                onUpdate({ ...item, children: updatedChildren })
              }}
              onAddChild={(newChild) => {
                const updatedChildren = [...(item.children || []), newChild]
                onUpdate({ ...item, children: updatedChildren })
              }}
              onChannelSelect={onChannelSelect}
              serverId={item.type === "server" ? item.id : serverId}
            />
          ))}
        </div>
      )}
    </div>
  )
}

export const EnhancedTree: React.FC<EnhancedTreeProps> = ({ items, onUpdate, onChannelSelect }) => {
  return (
    <div>
      {items.map((item) => (
        <EnhancedTreeItem
          key={item.id}
          item={item}
          onUpdate={(updatedItem) => {
            const updatedItems = items.map((i) => (i.id === updatedItem.id ? updatedItem : i))
            onUpdate(updatedItems)
          }}
          onDelete={() => {
            const updatedItems = items.filter((i) => i.id !== item.id)
            onUpdate(updatedItems)
          }}
          onAddChild={(newChild) => {
            const updatedItem = { ...item, children: [...(item.children || []), newChild] }
            const updatedItems = items.map((i) => (i.id === item.id ? updatedItem : i))
            onUpdate(updatedItems)
          }}
          onChannelSelect={onChannelSelect}
          serverId={item.id}
        />
      ))}
    </div>
  )
}

[V0_FILE]typescript:file="hooks/useWebSocket.ts"
import { useState, useEffect, useCallback, useRef } from "react"

export function useWebSocket(url: string) {
  const [socket, setSocket] = useState<WebSocket | null>(null)
  const [isConnected, setIsConnected] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [connectionState, setConnectionState] = useState<"connecting" | "open" | "closed" | "error">("connecting")
  const reconnectTimeoutRef = useRef<NodeJS.Timeout>()
  const reconnectAttempts = useRef(0)
  const maxReconnectAttempts = 5

const scheduleReconnect = useCallback(() => {
    if (reconnectAttempts.current >= maxReconnectAttempts) {
      console.log("Max reconnection attempts reached. Please try manually reconnecting.")
      return
    }

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

const delay = Math.min(1000 * 2 ** reconnectAttempts.current, 30000) // Max delay of 30 seconds
    reconnectTimeoutRef.current = setTimeout(() => {
      reconnectAttempts.current++
      console.log(`Attempting to reconnect... (Attempt ${reconnectAttempts.current})`)
      connect()
    }, delay)
  }, [])

const connect = useCallback(() => {
    if (socket) {
      socket.close()
    }

try {
      const newSocket = new WebSocket(url)

newSocket.onopen = () => {
        setIsConnected(true)
        setConnectionState("open")
        setError(null)
        reconnectAttempts.current = 0
        console.log("WebSocket connected")
      }

newSocket.onclose = (event) => {
        setIsConnected(false)
        setConnectionState("closed")
        console.log("WebSocket closed:", event)
        setError(`WebSocket closed: ${event.reason || "Unknown reason"}`)
        scheduleReconnect()
      }

newSocket.onerror = (event: Event) => {
        console.error("WebSocket error:", event)
        setIsConnected(false)
        setConnectionState("error")
        let errorMessage = "WebSocket error: Unable to connect. Please check your network connection and try again."
        if (event instanceof ErrorEvent) {
          errorMessage += ` Error details: ${event.message}`
        }
        setError(errorMessage)
        scheduleReconnect()
      }

setSocket(newSocket)
    } catch (err) {
      console.error("Error creating WebSocket:", err)
      setError(`Error creating WebSocket: ${err instanceof Error ? err.message : "Unknown error"}`)
      setConnectionState("error")
      scheduleReconnect()
    }
  }, [url, scheduleReconnect])

useEffect(() => {
    connect()
    return () => {
      if (socket) {
        socket.close()
      }
      if (reconnectTimeoutRef.current) {
        clearTimeout(reconnectTimeoutRef.current)
      }
    }
  }, [connect])

const sendMessage = useCallback(
    (message: string) => {
      if (socket && isConnected) {
        socket.send(message)
      } else {
        console.error("WebSocket is not connected")
      }
    },
    [socket, isConnected],
  )

const reconnect = useCallback(() => {
    reconnectAttempts.current = 0
    connect()
  }, [connect])

return { socket, isConnected, connectionState, error, sendMessage, reconnect }
}

[V0_FILE]typescriptreact:file="app/components/ui/pagination.tsx" isQuickEdit="true"
import React from "react"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight } from "lucide-react"

interface PaginationProps {
  currentPage: number
  totalPages: number
  onPageChange: (page: number) => void
}

export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
  return (
    <div className="flex justify-center items-center space-x-2 mt-4">
      <Button variant="outline" size="icon" onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1}>
        <ChevronLeft className="h-4 w-4" />
      </Button>
      <span className="text-sm">
        Page {currentPage} of {totalPages}
      </span>
      <Button
        variant="outline"
        size="icon"
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
      >
        <ChevronRight className="h-4 w-4" />
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/Media.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Pagination } from "@/components/ui/pagination"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { toast } from "@/components/ui/use-toast"
import { Slider } from "@/components/ui/slider"
import { Textarea } from "@/components/ui/textarea"
import {
  Image,
  Video,
  Search,
  Plus,
  Download,
  Trash2,
  ExternalLink,
  Calendar,
  Hash,
  ArrowUpCircle,
  ArrowDownCircle,
  Play,
  User,
} from "lucide-react"
import { ServerStructure } from "./ServerStructure"
import type { TreeItem } from "@/components/ui/enhanced-tree"
import { useWebSocket } from "@/hooks/useWebSocket" // Import the useWebSocket hook

interface MediaItem {
  id: string
  type: "image" | "video"
  url: string
  name: string
  createdAt: string
  serverId: string
  serverName: string
  channelId: string
  channelName: string
  message: string
  personName: string
}

interface ScrapingRule {
  id: string
  serverId: string
  serverName: string
  channelId: string
  channelName: string
  mediaType: "images" | "videos" | "both"
  keywords: string[]
  excludeKeywords: string[]
  startTime: string
  endTime: string
  minFileSize: number
  maxFileSize: number
  fileTypes: string[]
  isActive: boolean
  priority: number
  saveServerStructure: boolean
  parsePersonName: boolean
}

export default function Media() {
  const [mediaItems, setMediaItems] = useState<MediaItem[]>([])
  const [scrapingRules, setScrapingRules] = useState<ScrapingRule[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [activeTab, setActiveTab] = useState("gallery")
  const [currentPage, setCurrentPage] = useState(1)
  const [totalPages, setTotalPages] = useState(1)
  const [sortBy, setSortBy] = useState("createdAt")
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc")
  const [selectedMedia, setSelectedMedia] = useState<MediaItem | null>(null)
  const [previewMatches, setPreviewMatches] = useState<string[]>([])
  const [serverStructure, setServerStructure] = useState<TreeItem[]>([])
  const [selectedChannel, setSelectedChannel] = useState<{ serverId: string; channelId: string } | null>(null)

const itemsPerPage = 12

const { socket, isConnected, connectionState, error, reconnect } = useWebSocket("wss://api.example.com/logs") // Update: Destructure useWebSocket hook

useEffect(() => {
    const fetchMediaAndRules = async () => {
      setIsLoading(true)
      try {
        // Simulating API calls
        await new Promise((resolve) => setTimeout(resolve, 1000))
        const mockMediaItems: MediaItem[] = Array.from({ length: 50 }, (_, i) => ({
          id: `${i + 1}`,
          type: i % 3 === 0 ? "video" : "image",
          url: `/placeholder.svg?height=200&width=200`,
          name: `Media ${i + 1}`,
          createdAt: new Date(Date.now() - i * 86400000).toISOString(),
          serverId: `server${(i % 5) + 1}`,
          serverName: `Server ${(i % 5) + 1}`,
          channelId: `channel${(i % 3) + 1}`,
          channelName: `Channel ${(i % 3) + 1}`,
          message: `Check out this ${i % 3 === 0 ? "video" : "image"} of John Doe!`,
          personName: "John Doe",
        }))
        setMediaItems(mockMediaItems)
        setTotalPages(Math.ceil(mockMediaItems.length / itemsPerPage))

setScrapingRules([
          {
            id: "1",
            serverId: "server1",
            serverName: "Gaming Server",
            channelId: "channel1",
            channelName: "general",
            mediaType: "both",
            keywords: ["meme", "funny"],
            excludeKeywords: ["nsfw"],
            startTime: "09:00",
            endTime: "17:00",
            minFileSize: 0,
            maxFileSize: 5,
            fileTypes: ["jpg", "png", "gif"],
            isActive: true,
            priority: 1,
            saveServerStructure: true,
            parsePersonName: true,
          },
          {
            id: "2",
            serverId: "server2",
            serverName: "Art Server",
            channelId: "channel2",
            channelName: "artwork",
            mediaType: "images",
            keywords: ["painting", "sketch"],
            excludeKeywords: [],
            startTime: "00:00",
            endTime: "23:59",
            minFileSize: 0,
            maxFileSize: 10,
            fileTypes: ["jpg", "png", "bmp"],
            isActive: false,
            priority: 2,
            saveServerStructure: false,
            parsePersonName: true,
          },
        ])

// Fetch server structure
        const mockServerStructure: TreeItem[] = [
          {
            id: "server1",
            name: "Gaming Server",
            type: "server",
            children: [
              {
                id: "category1",
                name: "General",
                type: "category",
                children: [
                  { id: "channel1", name: "welcome", type: "channel" },
                  { id: "channel2", name: "general-chat", type: "channel" },
                ],
              },
              {
                id: "category2",
                name: "Games",
                type: "category",
                children: [
                  { id: "channel3", name: "minecraft", type: "channel" },
                  { id: "channel4", name: "fortnite", type: "channel" },
                ],
              },
            ],
          },
          {
            id: "server2",
            name: "Art Community",
            type: "server",
            children: [
              {
                id: "category3",
                name: "Artwork",
                type: "category",
                children: [
                  { id: "channel5", name: "showcase", type: "channel" },
                  { id: "channel6", name: "critiques", type: "channel" },
                ],
              },
            ],
          },
        ]
        setServerStructure(mockServerStructure)
      } catch (error) {
        console.error("Error fetching media and rules:", error)
        toast({
          title: "Error",
          description: "Failed to load media and scraping rules. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchMediaAndRules()
  }, [])

const filteredMedia = mediaItems
    .filter(
      (item) =>
        (selectedChannel
          ? item.serverId === selectedChannel.serverId && item.channelId === selectedChannel.channelId
          : true) &&
        (item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          item.serverName.toLowerCase().includes(searchTerm.toLowerCase()) ||
          item.channelName.toLowerCase().includes(searchTerm.toLowerCase()) ||
          item.message.toLowerCase().includes(searchTerm.toLowerCase()) ||
          item.personName.toLowerCase().includes(searchTerm.toLowerCase())),
    )
    .sort((a, b) => {
      if (sortOrder === "asc") {
        return a[sortBy] > b[sortBy] ? 1 : -1
      } else {
        return a[sortBy] < b[sortBy] ? 1 : -1
      }
    })

const paginatedMedia = filteredMedia.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)

const addScrapingRule = () => {
    const newRule: ScrapingRule = {
      id: Date.now().toString(),
      serverId: "",
      serverName: "",
      channelId: "",
      channelName: "",
      mediaType: "both",
      keywords: [],
      excludeKeywords: [],
      startTime: "00:00",
      endTime: "23:59",
      minFileSize: 0,
      maxFileSize: 10,
      fileTypes: ["jpg", "png", "gif"],
      isActive: true,
      priority: scrapingRules.length + 1,
      saveServerStructure: false,
      parsePersonName: false,
    }
    setScrapingRules([...scrapingRules, newRule])
  }

const updateScrapingRule = (id: string, updates: Partial<ScrapingRule>) => {
    setScrapingRules((rules) => rules.map((rule) => (rule.id === id ? { ...rule, ...updates } : rule)))
  }

const deleteScrapingRule = (id: string) => {
    setScrapingRules((rules) => rules.filter((rule) => rule.id !== id))
    toast({
      title: "Rule Deleted",
      description: "The scraping rule has been successfully deleted.",
    })
  }

const deleteMediaItem = (id: string) => {
    setMediaItems((items) => items.filter((item) => item.id !== id))
    toast({
      title: "Media Deleted",
      description: "The media item has been successfully deleted.",
    })
  }

const downloadMediaItem = (item: MediaItem) => {
    // In a real application, this would trigger a download
    toast({
      title: "Download Started",
      description: `Downloading ${item.name}...`,
    })
  }

const validateRule = (rule: ScrapingRule): string[] => {
    const errors: string[] = []
    if (!rule.serverName) errors.push("Server name is required")
    if (!rule.channelName) errors.push("Channel name is required")
    if (rule.keywords.length === 0) errors.push("At least one keyword is required")
    if (rule.minFileSize >= rule.maxFileSize) errors.push("Max file size must be greater than min file size")
    if (rule.fileTypes.length === 0) errors.push("At least one file type is required")
    return errors
  }

const testRule = (rule: ScrapingRule) => {
    // In a real application, this would test the rule against actual data
    const mockMatches = ["funny_meme.jpg", "gaming_screenshot.png", "cool_video.mp4", "artwork_sketch.png"]
    setPreviewMatches(mockMatches)
    toast({
      title: "Rule Tested",
      description: `Found ${mockMatches.length} potential matches.`,
    })
  }

const movePriority = (id: string, direction: "up" | "down") => {
    setScrapingRules((rules) => {
      const index = rules.findIndex((rule) => rule.id === id)
      if ((direction === "up" && index === 0) || (direction === "down" && index === rules.length - 1)) {
        return rules
      }
      const newRules = [...rules]
      const temp = newRules[index]
      newRules[index] = newRules[index + (direction === "up" ? -1 : 1)]
      newRules[index + (direction === "up" ? -1 : 1)] = temp
      return newRules.map((rule, i) => ({ ...rule, priority: i + 1 }))
    })
  }

const handleChannelSelect = (serverId: string, channelId: string) => {
    setSelectedChannel({ serverId, channelId })
    setActiveTab("gallery")
    setCurrentPage(1)
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>Media Management</CardTitle>
      </CardHeader>
      <CardContent>
        {/* WebSocket Status Display */}
        {connectionState === "connecting" && (
          <div className="bg-yellow-500 text-white p-2 mb-2 rounded text-sm">Connecting to WebSocket...</div>
        )}
        {connectionState === "open" && (
          <div className="bg-green-500 text-white p-2 mb-2 rounded text-sm">Connected to real-time log updates</div>
        )}
        {connectionState === "closed" && (
          <div className="bg-yellow-500 text-white p-2 mb-2 rounded text-sm">
            WebSocket connection closed. Attempting to reconnect...
          </div>
        )}
        {connectionState === "error" && (
          <div className="bg-red-500 text-white p-2 mb-2 rounded text-sm">
            <p>Error connecting to WebSocket. Please check your network connection.</p>
            {error && <p className="mt-1 text-xs">{error}</p>}
            <Button variant="outline" size="sm" onClick={reconnect} className="mt-2">
              Attempt Manual Reconnection
            </Button>
          </div>
        )}
        {/* End WebSocket Status Display */}
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList>
            <TabsTrigger value="gallery">Media Gallery</TabsTrigger>
            <TabsTrigger value="scraping">Scraping Rules</TabsTrigger>
            <TabsTrigger value="structure">Server Structure</TabsTrigger>
          </TabsList>
          <TabsContent value="gallery">
            <div className="flex justify-between items-center mb-4">
              <div className="flex-1 mr-4">
                <Input
                  type="search"
                  placeholder="Search media..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
              <Select value={sortBy} onValueChange={setSortBy}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Sort by" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="createdAt">Date</SelectItem>
                  <SelectItem value="name">Name</SelectItem>
                  <SelectItem value="serverName">Server</SelectItem>
                  <SelectItem value="channelName">Channel</SelectItem>
                  <SelectItem value="personName">Person</SelectItem>
                </SelectContent>
              </Select>
              <Button
                variant="outline"
                size="icon"
                className="ml-2"
                onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
              >
                {sortOrder === "asc" ? "↑" : "↓"}
              </Button>
            </div>
            {selectedChannel && (
              <div className="mb-4">
                <Button variant="outline" onClick={() => setSelectedChannel(null)}>
                  Clear Channel Filter
                </Button>
              </div>
            )}
            {isLoading ? (
              <div className="text-center">Loading media...</div>
            ) : (
              <>
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-4">
                  {paginatedMedia.map((item) => (
                    <div key={item.id} className="relative group">
                      <img
                        src={item.url || "/placeholder.svg"}
                        alt={item.name}
                        className="w-full h-auto rounded-lg object-cover cursor-pointer"
                        onClick={() => setSelectedMedia(item)}
                      />
                      <div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center rounded-lg">
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => downloadMediaItem(item)}
                          className="text-white mr-2"
                        >
                          <Download className="h-5 w-5" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => deleteMediaItem(item.id)}
                          className="text-white"
                        >
                          <Trash2 className="h-5 w-5" />
                        </Button>
                      </div>
                      {item.type === "video" && <Video className="absolute top-2 right-2 h-6 w-6 text-white" />}
                      <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-75 text-white p-2 text-sm">
                        {item.message}
                      </div>
                    </div>
                  ))}
                </div>
                <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
              </>
            )}
          </TabsContent>
          <TabsContent value="scraping">
            <Button onClick={addScrapingRule} className="mb-4">
              <Plus className="mr-2 h-4 w-4" /> Add Scraping Rule
            </Button>
            {isLoading ? (
              <div className="text-center">Loading scraping rules...</div>
            ) : (
              <ScrollArea className="h-[600px]">
                {scrapingRules.map((rule) => (
                  <Card key={rule.id} className="mb-4">
                    <CardContent className="pt-6">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor={`server-${rule.id}`}>Server</Label>
                          <Input
                            id={`server-${rule.id}`}
                            value={rule.serverName}
                            onChange={(e) => updateScrapingRule(rule.id, { serverName: e.target.value })}
                            placeholder="Server name"
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor={`channel-${rule.id}`}>Channel</Label>
                          <Input
                            id={`channel-${rule.id}`}
                            value={rule.channelName}
                            onChange={(e) => updateScrapingRule(rule.id, { channelName: e.target.value })}
                            placeholder="Channel name"
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor={`mediaType-${rule.id}`}>Media Type</Label>
                          <Select
                            value={rule.mediaType}
                            onValueChange={(value) =>
                              updateScrapingRule(rule.id, { mediaType: value as "images" | "videos" | "both" })
                            }
                          >
                            <SelectTrigger id={`mediaType-${rule.id}`}>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="images">Images</SelectItem>
                              <SelectItem value="videos">Videos</SelectItem>
                              <SelectItem value="both">Both</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor={`keywords-${rule.id}`}>Keywords (comma-separated)</Label>
                          <Input
                            id={`keywords-${rule.id}`}
                            value={rule.keywords.join(", ")}
                            onChange={(e) =>
                              updateScrapingRule(rule.id, { keywords: e.target.value.split(",").map((k) => k.trim()) })
                            }
                            placeholder="funny, meme, art"
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor={`excludeKeywords-${rule.id}`}>Exclude Keywords (comma-separated)</Label>
                          <Input
                            id={`excludeKeywords-${rule.id}`}
                            value={rule.excludeKeywords.join(", ")}
                            onChange={(e) =>
                              updateScrapingRule(rule.id, {
                                excludeKeywords: e.target.value.split(",").map((k) => k.trim()),
                              })
                            }
                            placeholder="nsfw, spam"
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor={`startTime-${rule.id}`}>Start Time</Label>
                          <Input
                            id={`startTime-${rule.id}`}
                            type="time"
                            value={rule.startTime}
                            onChange={(e) => updateScrapingRule(rule.id, { startTime: e.target.value })}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor={`endTime-${rule.id}`}>End Time</Label>
                          <Input
                            id={`endTime-${rule.id}`}
                            type="time"
                            value={rule.endTime}
                            onChange={(e) => updateScrapingRule(rule.id, { endTime: e.target.value })}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>File Size Range (MB)</Label>
                          <div className="flex items-center space-x-2">
                            <Input
                              type="number"
                              value={rule.minFileSize}
                              onChange={(e) => updateScrapingRule(rule.id, { minFileSize: Number(e.target.value) })}
                              className="w-20"
                            />
                            <span>to</span>
                            <Input
                              type="number"
                              value={rule.maxFileSize}
                              onChange={(e) => updateScrapingRule(rule.id, { maxFileSize: Number(e.target.value) })}
                              className="w-20"
                            />
                          </div>
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor={`fileTypes-${rule.id}`}>File Types (comma-separated)</Label>
                          <Input
                            id={`fileTypes-${rule.id}`}
                            value={rule.fileTypes.join(", ")}
                            onChange={(e) =>
                              updateScrapingRule(rule.id, { fileTypes: e.target.value.split(",").map((t) => t.trim()) })
                            }
                            placeholder="jpg, png, gif"
                          />
                        </div>
                        <div className="flex items-center space-x-2">
                          <Switch
                            id={`active-${rule.id}`}
                            checked={rule.isActive}
                            onCheckedChange={(checked) => updateScrapingRule(rule.id, { isActive: checked })}
                          />
                          <Label htmlFor={`active-${rule.id}`}>Active</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Button
                            variant="outline"
                            size="icon"
                            onClick={() => movePriority(rule.id, "up")}
                            disabled={rule.priority === 1}
                          >
                            <ArrowUpCircle className="h-4 w-4" />
                          </Button>
                          <span>Priority: {rule.priority}</span>
                          <Button
                            variant="outline"
                            size="icon"
                            onClick={() => movePriority(rule.id, "down")}
                            disabled={rule.priority === scrapingRules.length}
                          >
                            <ArrowDownCircle className="h-4 w-4" />
                          </Button>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Switch
                            id={`saveServerStructure-${rule.id}`}
                            checked={rule.saveServerStructure}
                            onCheckedChange={(checked) => updateScrapingRule(rule.id, { saveServerStructure: checked })}
                          />
                          <Label htmlFor={`saveServerStructure-${rule.id}`}>Save Server Structure</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Switch
                            id={`parsePersonName-${rule.id}`}
                            checked={rule.parsePersonName}
                            onCheckedChange={(checked) => updateScrapingRule(rule.id, { parsePersonName: checked })}
                          />
                          <Label htmlFor={`parsePersonName-${rule.id}`}>Parse Person Name</Label>
                        </div>
                      </div>
                      <div className="mt-4 space-x-2">
                        <Button onClick={() => testRule(rule)}>
                          <Play className="mr-2 h-4 w-4" />
                          Test Rule
                        </Button>
                        <Button variant="destructive" onClick={() => deleteScrapingRule(rule.id)}>
                          <Trash2 className="mr-2 h-4 w-4" />
                          Delete Rule
                        </Button>
                      </div>
                      {validateRule(rule).length > 0 && (
                        <div className="mt-2 text-red-500">
                          <p>Validation errors:</p>
                          <ul className="list-disc list-inside">
                            {validateRule(rule).map((error, index) => (
                              <li key={index}>{error}</li>
                            ))}
                          </ul>
                        </div>
                      )}
                    </CardContent>
                  </Card>
                ))}
              </ScrollArea>
            )}
          </TabsContent>
          <TabsContent value="structure">
            <ServerStructure
              serverStructure={serverStructure}
              setServerStructure={setServerStructure}
              onChannelSelect={handleChannelSelect}
            />
          </TabsContent>
        </Tabs>
      </CardContent>
      <Dialog open={!!selectedMedia} onOpenChange={() => setSelectedMedia(null)}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>{selectedMedia?.name}</DialogTitle>
          </DialogHeader>
          <div className="mt-4">
            {selectedMedia?.type === "image" ? (
              <img src={selectedMedia.url || "/placeholder.svg"} alt={selectedMedia.name} className="w-full h-auto" />
            ) : (
              <video src={selectedMedia?.url} controls className="w-full h-auto">
                Your browser does not support the video tag.
              </video>
            )}
          </div>
          <div className="mt-4 grid grid-cols-2 gap-4">
            <div>
              <p className="text-sm text-muted-foreground flex items-center">
                <Calendar className="mr-2 h-4 w-4" />
                {new Date(selectedMedia?.createdAt || "").toLocaleString()}
              </p>
              <p className="text-sm text-muted-foreground flex items-center">
                <ExternalLink className="mr-2 h-4 w-4" />
                {selectedMedia?.serverName}
              </p>
              <p className="text-sm text-muted-foreground flex items-center">
                <Hash className="mr-2 h-4 w-4" />
                {selectedMedia?.channelName}
              </p>
              <p className="text-sm text-muted-foreground flex items-center">
                <User className="mr-2 h-4 w-4" />
                {selectedMedia?.personName}
              </p>
            </div>
            <div className="flex flex-col justify-between">
              <p className="text-sm">{selectedMedia?.message}</p>
              <div className="flex justify-end space-x-2">
                <Button onClick={() => selectedMedia && downloadMediaItem(selectedMedia)}>
                  <Download className="mr-2 h-4 w-4" />
                  Download
                </Button>
                <Button variant="destructive" onClick={() => selectedMedia && deleteMediaItem(selectedMedia.id)}>
                  <Trash2 className="mr-2 h-4 w-4" />
                  Delete
                </Button>
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </Card>
  )
}

[V0_FILE]typescript:file="middleware.ts"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

// Add security headers
  response.headers.set("X-Frame-Options", "DENY")
  response.headers.set("X-Content-Type-Options", "nosniff")
  response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin")
  response.headers.set(
    "Content-Security-Policy",
    "default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:;",
  )

return response
}

export const config = {
  matcher: "/((?!api|_next/static|_next/image|favicon.ico).*)",
}

[V0_FILE]javascript:file="next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ["placeholder.com"], // Add any image domains you're using
  },
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "X-DNS-Prefetch-Control",
            value: "on",
          },
        ],
      },
    ]
  },
}

module.exports = nextConfig

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

import { useState, Suspense } from "react"
import dynamic from "next/dynamic"
import Sidebar from "./components/Sidebar"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Search, Bell, Menu } from "lucide-react"
import { ModeToggle } from "./components/mode-toggle"
import { ScrollArea } from "@/components/ui/scroll-area"
import ErrorBoundary from "./components/ErrorBoundary"
import Loading from "./loading"

const Dashboard = dynamic(() => import("./components/Dashboard"), { ssr: false })
const CommandPanel = dynamic(() => import("./components/CommandPanel"), { ssr: false })
const ServerList = dynamic(() => import("./components/ServerList"), { ssr: false })
const LogViewer = dynamic(() => import("./components/LogViewer"), { ssr: false })
const Settings = dynamic(() => import("./components/Settings"), { ssr: false })
const Analytics = dynamic(() => import("./components/Analytics"), { ssr: false })
const Moderation = dynamic(() => import("./components/Moderation"), { ssr: false })
const Media = dynamic(() => import("./components/Media"), { ssr: false })

export default function Home() {
  const [sidebarOpen, setSidebarOpen] = useState(true)
  const [activeSection, setActiveSection] = useState<Section>("dashboard")

const renderActiveSection = () => {
    const sections: Record<Section, JSX.Element> = {
      dashboard: <Dashboard />,
      commands: <CommandPanel />,
      servers: <ServerList />,
      logs: <LogViewer />,
      settings: <Settings />,
      analytics: <Analytics />,
      moderation: <Moderation />,
      media: <Media />,
    }

return (
      <ErrorBoundary>
        <Suspense fallback={<Loading />}>{sections[activeSection]}</Suspense>
      </ErrorBoundary>
    )
  }

return (
    <main className="flex h-screen bg-background text-foreground">
      <Sidebar
        open={sidebarOpen}
        setOpen={setSidebarOpen}
        activeSection={activeSection}
        setActiveSection={setActiveSection}
      />
      <div className="flex-1 flex flex-col overflow-hidden">
        <header className="flex items-center justify-between p-4 border-b">
          <div className="flex items-center space-x-4">
            <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)}>
              <Menu className="h-6 w-6" />
            </Button>
            <h1 className="text-2xl font-bold">Discord Bot Control</h1>
          </div>
          <div className="flex items-center space-x-4">
            <div className="relative hidden md:block">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              <Input type="search" placeholder="Search..." className="pl-10 w-64" />
            </div>
            <Button variant="ghost" size="icon">
              <Bell className="h-6 w-6" />
            </Button>
            <ModeToggle />
          </div>
        </header>
        <ScrollArea className="flex-1 p-6">{renderActiveSection()}</ScrollArea>
      </div>
    </main>
  )
}

[V0_FILE]typescriptreact:file="app/components/Sidebar.tsx"
"use client"

import { ScrollArea } from "@/components/ui/scroll-area"
import { cn } from "@/lib/utils"
import {
  LayoutDashboard,
  Terminal,
  List,
  FileText,
  BarChart2,
  ShieldAlert,
  Settings,
  Image,
  type LucideIcon,
} from "lucide-react"
import { Button } from "@/components/ui/button"

interface MenuItem {
  icon: LucideIcon
  label: string
  id: Section
}

const menuItems: MenuItem[] = [
  { icon: LayoutDashboard, label: "Dashboard", id: "dashboard" },
  { icon: Terminal, label: "Commands", id: "commands" },
  { icon: List, label: "Servers", id: "servers" },
  { icon: FileText, label: "Logs", id: "logs" },
  { icon: BarChart2, label: "Analytics", id: "analytics" },
  { icon: ShieldAlert, label: "Moderation", id: "moderation" },
  { icon: Image, label: "Media", id: "media" },
  { icon: Settings, label: "Settings", id: "settings" },
]

interface SidebarProps {
  open: boolean
  setOpen: (open: boolean) => void
  activeSection: Section
  setActiveSection: (section: Section) => void
}

export default function Sidebar({ open, setOpen, activeSection, setActiveSection }: SidebarProps) {
  return (
    <aside
      className={cn(
        "bg-card text-card-foreground border-r transition-all duration-300 ease-in-out",
        open ? "w-64" : "w-16",
      )}
    >
      <ScrollArea className="h-full">
        <nav className="p-2">
          <ul className="space-y-2">
            {menuItems.map((item) => (
              <li key={item.id}>
                <Button
                  variant={activeSection === item.id ? "secondary" : "ghost"}
                  className={cn("w-full justify-start", open ? "px-4" : "px-0 justify-center")}
                  onClick={() => {
                    setActiveSection(item.id)
                    if (!open) setOpen(true)
                  }}
                  aria-label={item.label}
                >
                  <item.icon className="h-5 w-5" />
                  {open && <span className="ml-2">{item.label}</span>}
                </Button>
              </li>
            ))}
          </ul>
        </nav>
      </ScrollArea>
    </aside>
  )
}

[V0_FILE]typescriptreact:file="app/components/ErrorBoundary.tsx"
"use client"

import React, { type ErrorInfo, type ReactNode } from "react"
import { Button } from "@/components/ui/button"

interface ErrorBoundaryProps {
  children: ReactNode
}

interface ErrorBoundaryState {
  hasError: boolean
  error: Error | null
}

class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props)
    this.state = { hasError: false, error: null }
  }

static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error }
  }

componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Uncaught error:", error, errorInfo)
  }

render() {
    if (this.state.hasError) {
      return (
        <div className="flex flex-col items-center justify-center min-h-screen bg-background text-foreground">
          <h2 className="text-2xl font-bold mb-4">Something went wrong!</h2>
          <p className="text-muted-foreground mb-4">We apologize for the inconvenience.</p>
          <Button onClick={() => this.setState({ hasError: false, error: null })}>Try again</Button>
        </div>
      )
    }

return this.props.children
  }
}

export default ErrorBoundary

[V0_FILE]typescriptreact:file="app/loading.tsx"
import { Loader2 } from "lucide-react"

export default function Loading() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <Loader2 className="h-12 w-12 animate-spin text-primary" />
    </div>
  )
}
</article></body></html>