[V0_FILE]png:file="public/prism-logo.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/E0F9E345-E995-4733-BC10-AF1028DE466B-CnmWL044ETp9RdA69pYL1MKWrmpI1M.webp" [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/download-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Download, AlertTriangle } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" interface DownloadModalProps { isOpen: boolean onClose: () => void } export function DownloadModal({ isOpen, onClose }: DownloadModalProps) { return ( ) } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, }, ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = "Alert" const AlertDescription = React.forwardRef>( ({ className, ...props }, ref) => (

), ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertDescription } [V0_FILE]png:file="public/prism-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Jul%209%2C%202025%2C%2011_29_19%20PM-Py6lPi7ayyB30Oqr2NAWGid47S5Ekg.png" [V0_FILE]typescriptreact:file="app/globals.css" isFixed="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; /* Hide v0 attribution popup/watermark */ [data-v0-t], [data-v0], .v0-attribution, .v0-watermark, div[class*="v0"], div[id*="v0"], *[class*="attribution"], *[class*="watermark"], *[aria-label*="Built with v0"], *[title*="Built with v0"], div[style*="position: fixed"][style*="bottom: 16px"], div[style*="position: fixed"][style*="bottom: 1rem"], div[style*="position: absolute"][style*="bottom: 16px"], div[style*="position: absolute"][style*="bottom: 1rem"] { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; left: -9999px !important; top: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* Hide any popup or overlay containing "Built with" text */ \ div:has-text("Built with v0"), \ div:has-text("Built with"), \ *:contains("Built with v0"), \ *:contains("Built with") { display: none !important; } /* Additional specific selectors for v0 attribution */ [class*="fixed"][class*="bottom"], [class*="absolute"][class*="bottom"] { display: none !important; } /* Hide any elements with z-index that might be attribution overlays */ div[style*="z-index"][style*="position: fixed"]:not([role]):not([aria-label]):not([data-testid]) { display: none !important; } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Check, Download, Shield, Zap, Code, Users, Star, ExternalLink } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useState } from "react"
import { DownloadModal } from "@/components/download-modal"

export default function PrismHome() {
  const [isDownloadModalOpen, setIsDownloadModalOpen] = useState(false)

return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 relative">
      {/* Animated blur overlay */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/40"></div>
        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black/60 to-transparent backdrop-blur-xl"></div>
      </div>

{/* Floating blur elements */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse"></div>
        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-pink-500/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
        <div className="absolute top-1/2 right-1/3 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl animate-pulse delay-500"></div>
      </div>

<div className="relative z-10">
        {/* Navigation */}
        <nav className="border-b border-gray-800 bg-black/50 backdrop-blur-sm sticky top-0 z-50">
          <div className="container mx-auto px-4 py-4 flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <Image src="/prism-logo.png" alt="Prism Logo" width={40} height={40} />
              <span className="text-2xl font-bold text-white">Prism</span>
            </div>
            <div className="flex items-center space-x-6">
              <a href="#features" className="text-gray-300 hover:text-white transition-colors">
                Features
              </a>
              <a href="#pricing" className="text-gray-300 hover:text-white transition-colors">
                Pricing
              </a>
              <a href="#testimonials" className="text-gray-300 hover:text-white transition-colors">
                Reviews
              </a>
              <Link href="/team" className="text-gray-300 hover:text-white transition-colors">
                Team
              </Link>
              <Link href="/forums" className="text-gray-300 hover:text-white transition-colors">
                Forums
              </Link>
              <Link href="/scripts" className="text-gray-300 hover:text-white transition-colors">
                Scripts
              </Link>
              <Button className="bg-purple-600 hover:bg-purple-700" onClick={() => setIsDownloadModalOpen(true)}>
                <Download className="w-4 h-4 mr-2" />
                Download
              </Button>
            </div>
          </div>
        </nav>

{/* Hero Section */}
        <section className="container mx-auto px-4 py-20 text-center">
          <div className="max-w-4xl mx-auto">
            <Badge className="mb-6 bg-purple-600/20 text-purple-300 border-purple-600/30">
              🚀 Most Advanced Roblox Executor
            </Badge>
            <h1 className="text-6xl font-bold text-white mb-6 leading-tight">
              Execute Scripts with
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400"> Prism</span>
            </h1>
            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
              The most powerful and reliable Roblox script executor. Fast execution, safe performance, and premium
              features for the ultimate scripting experience.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-lg px-8 py-4"
                onClick={() => setIsDownloadModalOpen(true)}
              >
                <Download className="w-5 h-5 mr-2" />
                Download Prism
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-gray-600 text-white hover:bg-gray-800 text-lg px-8 py-4 bg-transparent"
                asChild
              >
                <a href="https://discord.gg/K98g2wDzKK" target="_blank" rel="noopener noreferrer">
                  <ExternalLink className="w-5 h-5 mr-2" />
                  Join Discord
                </a>
              </Button>
            </div>
          </div>
        </section>

{/* Features Section */}
        <section id="features" className="container mx-auto px-4 py-20">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-white mb-4">Why Choose Prism?</h2>
            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
              Built with cutting-edge technology to provide the best scripting experience
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
              <CardHeader>
                <Zap className="w-12 h-12 text-purple-400 mb-4" />
                <CardTitle className="text-white">Lightning Fast</CardTitle>
                <CardDescription className="text-gray-400">
                  Execute scripts instantly with our optimized engine
                </CardDescription>
              </CardHeader>
            </Card>
            <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
              <CardHeader>
                <Shield className="w-12 h-12 text-green-400 mb-4" />
                <CardTitle className="text-white">Safe & Clean</CardTitle>
                <CardDescription className="text-gray-400">
                  No malware, no rats - completely safe and trusted software
                </CardDescription>
              </CardHeader>
            </Card>
            <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
              <CardHeader>
                <Code className="w-12 h-12 text-blue-400 mb-4" />
                <CardTitle className="text-white">Full LuaU Support</CardTitle>
                <CardDescription className="text-gray-400">
                  Complete LuaU compatibility with all modern functions
                </CardDescription>
              </CardHeader>
            </Card>
            <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
              <CardHeader>
                <Check className="w-12 h-12 text-orange-400 mb-4" />
                <CardTitle className="text-white">100% UNC & sUNC</CardTitle>
                <CardDescription className="text-gray-400">
                  Complete Universal Naming Convention and secure UNC support
                </CardDescription>
              </CardHeader>
            </Card>
          </div>
        </section>

{/* Pricing Section */}
        <section id="pricing" className="container mx-auto px-4 py-20">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-white mb-4">Key System Pricing</h2>
            <p className="text-gray-400 text-lg">Affordable keys for accessing Prism's premium features</p>
            <Badge className="mt-4 bg-yellow-600/20 text-yellow-300 border-yellow-600/30">
              🔑 Key System Coming Soon
            </Badge>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 max-w-7xl mx-auto">
            <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
              <CardHeader className="text-center">
                <CardTitle className="text-white">3 Days</CardTitle>
                <div className="text-3xl font-bold text-purple-400">$0.99</div>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-gray-300">
                  <li className="flex items-center">
                    <Check className="w-4 h-4 mr-2 text-green-400" />
                    Full Access Key
                  </li>
                  <li className="flex items-center">
                    <Check className="w-4 h-4 mr-2 text-green-400" />
                    All Features
                  </li>
                </ul>
              </CardContent>
            </Card>
            <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
              <CardHeader className="text-center">
                <CardTitle className="text-white">1 Week</CardTitle>
                <div className="text-3xl font-bold text-purple-400">$1.49</div>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-gray-300">
                  <li className="flex items-center">
                    <Check className="w-4 h-4 mr-2 text-green-400" />
                    Full Access Key
                  </li>
                  <li className="flex items-center">
                    <Check className="w-4 h-4 mr-2 text-green-400" />
                    All Features
                  </li>
                </ul>
              </CardContent>
            </Card>
            <Card className="bg-gray-800/50 border-purple-500 backdrop-blur-sm relative overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-br from-purple-600/30 via-purple-500/20 to-pink-600/30"></div>
              <div className="relative z-10">
                <CardHeader className="text-center">
                  <CardTitle className="text-white">1 Month</CardTitle>
                  <Badge className="bg-purple-600 text-white mx-auto mb-2">Popular</Badge>
                  <div className="text-3xl font-bold text-purple-400">$2.99</div>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-gray-300">
                    <li className="flex items-center">
                      <Check className="w-4 h-4 mr-2 text-green-400" />
                      Full Access Key
                    </li>
                    <li className="flex items-center">
                      <Check className="w-4 h-4 mr-2 text-green-400" />
                      All Features
                    </li>
                  </ul>
                </CardContent>
              </div>
            </Card>
            <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
              <CardHeader className="text-center">
                <CardTitle className="text-white">1 Year</CardTitle>
                <div className="text-3xl font-bold text-purple-400">$9.99</div>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-gray-300">
                  <li className="flex items-center">
                    <Check className="w-4 h-4 mr-2 text-green-400" />
                    Full Access Key
                  </li>
                  <li className="flex items-center">
                    <Check className="w-4 h-4 mr-2 text-green-400" />
                    All Features
                  </li>
                </ul>
              </CardContent>
            </Card>
            <Card className="bg-gray-800/50 border-yellow-500 backdrop-blur-sm relative overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-br from-yellow-600/30 via-yellow-500/20 to-orange-600/30"></div>
              <div className="relative z-10">
                <CardHeader className="text-center">
                  <CardTitle className="text-white">Lifetime</CardTitle>
                  <div className="text-3xl font-bold text-yellow-400">$14.99</div>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-gray-300">
                    <li className="flex items-center">
                      <Check className="w-4 h-4 mr-2 text-green-400" />
                      Full Access Key
                    </li>
                    <li className="flex items-center">
                      <Check className="w-4 h-4 mr-2 text-green-400" />
                      All Features
                    </li>
                  </ul>
                </CardContent>
              </div>
            </Card>
            <Card className="bg-gray-800/50 border-red-500 backdrop-blur-sm relative overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-br from-red-600/30 via-red-500/20 to-pink-600/30"></div>
              <div className="relative z-10">
                <CardHeader className="text-center">
                  <CardTitle className="text-white">Extreme</CardTitle>
                  <Badge className="bg-red-600 text-white mx-auto mb-2">Developer</Badge>
                  <div className="text-3xl font-bold text-red-400">$59.99</div>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-gray-300">
                    <li className="flex items-center">
                      <Check className="w-4 h-4 mr-2 text-green-400" />
                      Full Access Key
                    </li>
                    <li className="flex items-center">
                      <Check className="w-4 h-4 mr-2 text-green-400" />
                      All Features
                    </li>
                    <li className="flex items-center">
                      <Check className="w-4 h-4 mr-2 text-green-400" />
                      DLL Open Source
                    </li>
                  </ul>
                </CardContent>
              </div>
            </Card>
          </div>
        </section>

{/* Testimonials Section */}
        <section id="testimonials" className="container mx-auto px-4 py-20">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-white mb-4">What Users Say</h2>
            <p className="text-gray-400 text-lg">Join thousands of satisfied users</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
              <CardHeader>
                <div className="flex items-center space-x-1 mb-2">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                  ))}
                </div>
                <CardDescription className="text-gray-300">
                  "Best executor I've ever used. Fast, reliable, and safe!"
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-400 text-sm">- ScriptMaster2024</p>
              </CardContent>
            </Card>
            <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
              <CardHeader>
                <div className="flex items-center space-x-1 mb-2">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                  ))}
                </div>
                <CardDescription className="text-gray-300">
                  "Prism changed my scripting experience completely. Highly recommended!"
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-400 text-sm">- LuaExpert</p>
              </CardContent>
            </Card>
            <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
              <CardHeader>
                <div className="flex items-center space-x-1 mb-2">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                  ))}
                </div>
                <CardDescription className="text-gray-300">
                  "Amazing performance and great support team. Worth every penny!"
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-400 text-sm">- RobloxPro</p>
              </CardContent>
            </Card>
          </div>
        </section>

{/* CTA Section */}
        <section className="container mx-auto px-4 py-20">
          <div className="bg-gradient-to-r from-purple-600/20 to-pink-600/20 border border-purple-600/30 rounded-2xl p-12 text-center backdrop-blur-sm">
            <h2 className="text-4xl font-bold text-white mb-4">Ready to Get Started?</h2>
            <p className="text-gray-300 text-lg mb-8 max-w-2xl mx-auto">
              Join our community and experience the most powerful Roblox executor available
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-lg px-8 py-4"
                onClick={() => setIsDownloadModalOpen(true)}
              >
                <Download className="w-5 h-5 mr-2" />
                Download Now
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-gray-600 text-white hover:bg-gray-800 text-lg px-8 py-4 bg-transparent"
                asChild
              >
                <a href="https://discord.gg/K98g2wDzKK" target="_blank" rel="noopener noreferrer">
                  <Users className="w-5 h-5 mr-2" />
                  Join Discord
                </a>
              </Button>
            </div>
          </div>
        </section>

{/* Footer */}
        <footer className="border-t border-gray-800 bg-black/50 backdrop-blur-sm">
          <div className="container mx-auto px-4 py-12">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <div className="flex items-center space-x-3 mb-4 md:mb-0">
                <Image src="/prism-logo.png" alt="Prism Logo" width={32} height={32} />
                <span className="text-xl font-bold text-white">Prism</span>
              </div>
              <div className="flex items-center space-x-6">
                <Link href="/team" className="text-gray-400 hover:text-white transition-colors">
                  Team
                </Link>
                <Link href="/forums" className="text-gray-400 hover:text-white transition-colors">
                  Forums
                </Link>
                <Link href="/scripts" className="text-gray-400 hover:text-white transition-colors">
                  Scripts
                </Link>
                <a
                  href="https://discord.gg/K98g2wDzKK"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-400 hover:text-white transition-colors"
                >
                  Discord
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  Support
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  Terms
                </a>
              </div>
            </div>
            <div className="border-t border-gray-800 mt-8 pt-8 text-center">
              <p className="text-gray-400 text-sm">© 2025 Prism. All rights reserved.</p>
              <p className="text-gray-500 text-xs mt-2">
                * Testimonials are placeholder content until we receive actual user testimonies.
              </p>
            </div>
          </div>
        </footer>
        <DownloadModal isOpen={isDownloadModalOpen} onClose={() => setIsDownloadModalOpen(false)} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/team/page.tsx" isQuickEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Users, Code, Palette, MessageCircle, Zap, Crown, Coffee, ArrowLeft } from "lucide-react"
import Image from "next/image"
import Link from "next/link"

export default function TeamPage() {
  const teamMembers = [
    {
      name: "ZavierMaybe",
      role: "Owner & UI Maker",
      description: "Actually made this whole website I'm typing this rn lol or smth like that",
      icon: Crown,
      color: "text-yellow-400",
      bgColor: "from-yellow-600/30 via-yellow-500/20 to-orange-600/30",
      borderColor: "border-yellow-500",
    },
    {
      name: "Nijika Ijichi",
      role: "UI Maker & Lead Developer",
      description: "Lead developer and epic executor maker",
      icon: Code,
      color: "text-purple-400",
      bgColor: "from-purple-600/30 via-purple-500/20 to-pink-600/30",
      borderColor: "border-purple-500",
    },
    {
      name: "bbear2k2",
      role: "Co-Owner & Lead Developer",
      description: "Co-owner and lead-developer",
      icon: Crown,
      color: "text-blue-400",
      bgColor: "from-blue-600/30 via-blue-500/20 to-cyan-600/30",
      borderColor: "border-blue-500",
    },
    {
      name: "Joshy",
      role: "Lead Developer & UI Maker",
      description: "Lead developer, UI maker scripter",
      icon: Palette,
      color: "text-green-400",
      bgColor: "from-green-600/30 via-green-500/20 to-emerald-600/30",
      borderColor: "border-green-500",
    },
    {
      name: "official_luna123",
      role: "Scripter & Discord Helper",
      description: "Scripter and feedbacker and discord helper and made another website",
      icon: MessageCircle,
      color: "text-pink-400",
      bgColor: "from-pink-600/30 via-pink-500/20 to-rose-600/30",
      borderColor: "border-pink-500",
    },
    {
      name: "shards1",
      role: "Lead Developer & UI Maker",
      description: "Lead developer, UI maker, spams odd memes in the group chat lol",
      icon: Zap,
      color: "text-orange-400",
      bgColor: "from-orange-600/30 via-orange-500/20 to-red-600/30",
      borderColor: "border-orange-500",
    },
    {
      name: "akitio",
      role: "Developer & Executor Maker",
      description: "Developer, executor maker, argues alot",
      icon: Code,
      color: "text-red-400",
      bgColor: "from-red-600/30 via-red-500/20 to-pink-600/30",
      borderColor: "border-red-500",
    },
    {
      name: "ummm5075",
      role: "Friend & Contributor",
      description: "Friend and contributor, chill guy",
      icon: Coffee,
      color: "text-cyan-400",
      bgColor: "from-cyan-600/30 via-cyan-500/20 to-blue-600/30",
      borderColor: "border-cyan-500",
    },
    {
      name: "m1ltw1ll",
      role: "Contributor",
      description: 'Contributor, literally said "Ok" and never said anything in the group chat again. AURA',
      icon: Users,
      color: "text-indigo-400",
      bgColor: "from-indigo-600/30 via-indigo-500/20 to-purple-600/30",
      borderColor: "border-indigo-500",
    },
    {
      name: "_zaptrex_",
      role: "Lead Developer & Executor Maker",
      description: "Lead developer, executor maker, chill guy, yaps a bit too much",
      icon: MessageCircle,
      color: "text-teal-400",
      bgColor: "from-teal-600/30 via-teal-500/20 to-cyan-600/30",
      borderColor: "border-teal-500",
    },
    {
      name: "personals23",
      role: "Developer",
      description: "Developer with potential!",
      icon: Code,
      color: "text-lime-400",
      bgColor: "from-lime-600/30 via-lime-500/20 to-green-600/30",
      borderColor: "border-lime-500",
    },
  ]

<div className="relative z-10">
        {/* Navigation */}
        <nav className="border-b border-gray-800 bg-black/50 backdrop-blur-sm sticky top-0 z-50">
          <div className="container mx-auto px-4 py-4 flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <Image src="/prism-logo.png" alt="Prism Logo" width={40} height={40} />
              <span className="text-2xl font-bold text-white">Prism</span>
            </div>
            <div className="flex items-center space-x-6">
              <Link href="/" className="text-gray-300 hover:text-white transition-colors">
                Home
              </Link>
              <a href="/#features" className="text-gray-300 hover:text-white transition-colors">
                Features
              </a>
              <a href="/#pricing" className="text-gray-300 hover:text-white transition-colors">
                Pricing
              </a>
              <Link href="/team" className="text-gray-300 hover:text-white transition-colors">
                Team
              </Link>
              <Link href="/scripts" className="text-gray-300 hover:text-white transition-colors">
                Scripts
              </Link>
              <Link href="/forums" className="text-gray-300 hover:text-white transition-colors">
                Forums
              </Link>
            </div>
          </div>
        </nav>

{/* Back Button */}
        <div className="container mx-auto px-4 pt-8">
          <Link href="/">
            <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-800 bg-transparent">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Home
            </Button>
          </Link>
        </div>

{/* Team Section */}
        <section className="container mx-auto px-4 py-20">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
            {teamMembers.map((member, index) => {
              const IconComponent = member.icon
              return (
                <Card
                  key={index}
                  className={`bg-gray-800/50 ${member.borderColor} backdrop-blur-sm relative overflow-hidden hover:scale-105 transition-transform duration-300`}
                >
                  <div className={`absolute inset-0 bg-gradient-to-br ${member.bgColor}`}></div>
                  <div className="relative z-10">
                    <CardHeader className="text-center">
                      <IconComponent className={`w-12 h-12 ${member.color} mb-4 mx-auto`} />
                      <CardTitle className="text-white text-xl">{member.name}</CardTitle>
                      <Badge
                        className={`${member.color.replace("text-", "bg-").replace("-400", "-600/20")} ${member.color} border-0 mx-auto`}
                      >
                        {member.role}
                      </Badge>
                    </CardHeader>
                    <CardContent>
                      <CardDescription className="text-gray-300 text-center leading-relaxed">
                        {member.description}
                      </CardDescription>
                    </CardContent>
                  </div>
                </Card>
              )
            })}
          </div>
        </section>

{/* Stats Section */}
        <section className="container mx-auto px-4 py-20">
          <div className="bg-gradient-to-r from-purple-600/20 to-pink-600/20 border border-purple-600/30 rounded-2xl p-12 text-center backdrop-blur-sm">
            <h2 className="text-4xl font-bold text-white mb-8">Team Stats</h2>
            <div className="grid md:grid-cols-4 gap-8">
              <div>
                <div className="text-3xl font-bold text-purple-400 mb-2">11</div>
                <div className="text-gray-300">Team Members</div>
              </div>
              <div>
                <div className="text-3xl font-bold text-pink-400 mb-2">5</div>
                <div className="text-gray-300">Lead Developers</div>
              </div>
              <div>
                <div className="text-3xl font-bold text-blue-400 mb-2">4</div>
                <div className="text-gray-300">UI Makers</div>
              </div>
              <div>
                <div className="text-3xl font-bold text-green-400 mb-2">∞</div>
                <div className="text-gray-300">Memes Shared</div>
              </div>
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="container mx-auto px-4 py-20">
          <div className="bg-gradient-to-r from-blue-600/20 to-purple-600/20 border border-blue-600/30 rounded-2xl p-12 text-center backdrop-blur-sm">
            <h2 className="text-4xl font-bold text-white mb-4">Want to Join Our Team?</h2>
            <p className="text-gray-300 text-lg mb-8 max-w-2xl mx-auto">
              We're always looking for talented developers and contributors to help make Prism even better!
            </p>
            <Button
              size="lg"
              className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-4"
              asChild
            >
              <a href="https://discord.gg/K98g2wDzKK" target="_blank" rel="noopener noreferrer">
                <MessageCircle className="w-5 h-5 mr-2" />
                Join Our Discord
              </a>
            </Button>
          </div>
        </section>

{/* Footer */}
        <footer className="border-t border-gray-800 bg-black/50 backdrop-blur-sm">
          <div className="container mx-auto px-4 py-12">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <div className="flex items-center space-x-3 mb-4 md:mb-0">
                <Image src="/prism-logo.png" alt="Prism Logo" width={32} height={32} />
                <span className="text-xl font-bold text-white">Prism</span>
              </div>
              <div className="flex items-center space-x-6">
                <Link href="/" className="text-gray-400 hover:text-white transition-colors">
                  Home
                </Link>
                <a
                  href="https://discord.gg/K98g2wDzKK"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-400 hover:text-white transition-colors"
                >
                  Discord
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  Support
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  Terms
                </a>
                <Link href="/team" className="text-gray-400 hover:text-white transition-colors">
                  Team
                </Link>
                <Link href="/scripts" className="text-gray-400 hover:text-white transition-colors">
                  Scripts
                </Link>
                <Link href="/forums" className="text-gray-400 hover:text-white transition-colors">
                  Forums
                </Link>
              </div>
            </div>
            <div className="border-t border-gray-800 mt-8 pt-8 text-center">
              <p className="text-gray-400 text-sm">© 2025 Prism. All rights reserved.</p>
              <p className="text-gray-500 text-xs mt-2">Made with ❤️ by the amazing Prism team</p>
            </div>
          </div>
        </footer>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/scripts/page.tsx" isQuickEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Copy, Code, Shield, ArrowLeft, Check } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useState } from "react"

export default function ScriptsPage() {
  const [copiedScript, setCopiedScript] = useState<string | null>(null)

const scripts = [
    {
      name: "Infinite Yield",
      description: "The most popular admin script for Roblox with tons of commands and features",
      category: "Admin",
      code: `loadstring(game:HttpGet("https://raw.githubusercontent.com/EdgeIY/infiniteyield/master/source"))()`,
      color: "text-blue-400",
      bgColor: "from-blue-600/30 via-blue-500/20 to-cyan-600/30",
      borderColor: "border-blue-500",
    },
    {
      name: "Steal a Brainrot Script",
      description: "Advanced pet stealing script with rarity configuration for maximum efficiency",
      category: "Pet Simulator",
      code: `getgenv().Rarity = {
    ["Brainrot God"] = {enabled = true},
    ["Secret"] = {enabled = true},
    ["Mythic"] = {enabled = false},
    ["Legendary"] = {enabled = false},
    ["Epic"] = {enabled = false},
    ["Rare"] = {enabled = false},
    ["Common"] = {enabled = false},
}
loadstring(game:HttpGet("https://raw.githubusercontent.com/DoliScriptz/loader/refs/heads/main/finder.txt"))()`,
      color: "text-purple-400",
      bgColor: "from-purple-600/30 via-purple-500/20 to-pink-600/30",
      borderColor: "border-purple-500",
    },
    {
      name: "Grow a Garden",
      description: "Automated farming script for garden-based games with smart optimization",
      category: "Farming",
      code: `loadstring(game:HttpGet('https://raw.githubusercontent.com/ThundarZ/Welcome/refs/heads/main/Main/GaG/Main.lua'))()`,
      color: "text-green-400",
      bgColor: "from-green-600/30 via-green-500/20 to-emerald-600/30",
      borderColor: "border-green-500",
    },
  ]

const copyToClipboard = async (code: string, scriptName: string) => {
    try {
      await navigator.clipboard.writeText(code)
      setCopiedScript(scriptName)
      setTimeout(() => setCopiedScript(null), 2000)
    } catch (err) {
      console.error("Failed to copy: ", err)
    }
  }

<div className="relative z-10">
        {/* Navigation */}
        <nav className="border-b border-gray-800 bg-black/50 backdrop-blur-sm sticky top-0 z-50">
          <div className="container mx-auto px-4 py-4 flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <Image src="/prism-logo.png" alt="Prism Logo" width={40} height={40} />
              <span className="text-2xl font-bold text-white">Prism</span>
            </div>
            <div className="flex items-center space-x-6">
              <Link href="/" className="text-gray-300 hover:text-white transition-colors">
                Home
              </Link>
              <a href="/#features" className="text-gray-300 hover:text-white transition-colors">
                Features
              </a>
              <a href="/#pricing" className="text-gray-300 hover:text-white transition-colors">
                Pricing
              </a>
              <Link href="/team" className="text-gray-300 hover:text-white transition-colors">
                Team
              </Link>
              <Link href="/forums" className="text-gray-300 hover:text-white transition-colors">
                Forums
              </Link>
              <span className="text-white font-semibold">Scripts</span>
            </div>
          </div>
        </nav>

{/* Hero Section */}
        <section className="container mx-auto px-4 py-20 text-center">
          <div className="max-w-4xl mx-auto">
            <Badge className="mb-6 bg-green-600/20 text-green-300 border-green-600/30">
              <Shield className="w-4 h-4 mr-2" />
              Verified & Keyless
            </Badge>
            <h1 className="text-6xl font-bold text-white mb-6 leading-tight">
              Verified
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-400">
                {" "}
                Prism Scripts
              </span>
            </h1>
            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
              Hand-picked, tested, and verified scripts that work perfectly with Prism. All scripts are completely
              keyless and ready to use.
            </p>
          </div>
        </section>

{/* Scripts Section */}
        <section className="container mx-auto px-4 py-20">
          <div className="grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8 max-w-7xl mx-auto">
            {scripts.map((script, index) => (
              <Card
                key={index}
                className={`bg-gray-800/50 ${script.borderColor} backdrop-blur-sm relative overflow-hidden hover:scale-105 transition-transform duration-300`}
              >
                <div className={`absolute inset-0 bg-gradient-to-br ${script.bgColor}`}></div>
                <div className="relative z-10">
                  <CardHeader>
                    <div className="flex items-center justify-between mb-2">
                      <Badge
                        className={`${script.color.replace("text-", "bg-").replace("-400", "-600/20")} ${script.color} border-0`}
                      >
                        {script.category}
                      </Badge>
                      <Code className={`w-6 h-6 ${script.color}`} />
                    </div>
                    <CardTitle className="text-white text-xl mb-2">{script.name}</CardTitle>
                    <CardDescription className="text-gray-300 leading-relaxed">{script.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="bg-gray-900/80 rounded-lg p-4 mb-4 border border-gray-700">
                      <pre className="text-sm text-gray-300 whitespace-pre-wrap break-all font-mono leading-relaxed">
                        {script.code}
                      </pre>
                    </div>
                    <Button
                      onClick={() => copyToClipboard(script.code, script.name)}
                      className={`w-full ${
                        script.color.includes("blue")
                          ? "bg-blue-600 hover:bg-blue-700"
                          : script.color.includes("purple")
                            ? "bg-purple-600 hover:bg-purple-700"
                            : "bg-green-600 hover:bg-green-700"
                      }`}
                      disabled={copiedScript === script.name}
                    >
                      {copiedScript === script.name ? (
                        <>
                          <Check className="w-4 h-4 mr-2" />
                          Copied!
                        </>
                      ) : (
                        <>
                          <Copy className="w-4 h-4 mr-2" />
                          Copy Script
                        </>
                      )}
                    </Button>
                  </CardContent>
                </div>
              </Card>
            ))}
          </div>
        </section>

{/* Info Section */}
        <section className="container mx-auto px-4 py-20">
          <div className="bg-gradient-to-r from-green-600/20 to-blue-600/20 border border-green-600/30 rounded-2xl p-12 text-center backdrop-blur-sm">
            <h2 className="text-4xl font-bold text-white mb-4">How to Use These Scripts</h2>
            <div className="grid md:grid-cols-3 gap-8 mt-8">
              <div className="text-center">
                <div className="w-12 h-12 bg-purple-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-purple-400 font-bold text-xl">1</span>
                </div>
                <h3 className="text-white font-semibold mb-2">Copy Script</h3>
                <p className="text-gray-300 text-sm">
                  Click the "Copy Script" button to copy the code to your clipboard
                </p>
              </div>
              <div className="text-center">
                <div className="w-12 h-12 bg-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-blue-400 font-bold text-xl">2</span>
                </div>
                <h3 className="text-white font-semibold mb-2">Open Prism</h3>
                <p className="text-gray-300 text-sm">Launch Prism executor and inject into your Roblox game</p>
              </div>
              <div className="text-center">
                <div className="w-12 h-12 bg-green-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-green-400 font-bold text-xl">3</span>
                </div>
                <h3 className="text-white font-semibold mb-2">Execute</h3>
                <p className="text-gray-300 text-sm">Paste the script into Prism and click execute to run it</p>
              </div>
            </div>
          </div>
        </section>

{/* Footer */}
        <footer className="border-t border-gray-800 bg-black/50 backdrop-blur-sm">
          <div className="container mx-auto px-4 py-12">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <div className="flex items-center space-x-3 mb-4 md:mb-0">
                <Image src="/prism-logo.png" alt="Prism Logo" width={32} height={32} />
                <span className="text-xl font-bold text-white">Prism</span>
              </div>
              <div className="flex items-center space-x-6">
                <Link href="/" className="text-gray-400 hover:text-white transition-colors">
                  Home
                </Link>
                <Link href="/team" className="text-gray-400 hover:text-white transition-colors">
                  Team
                </Link>
                <Link href="/forums" className="text-gray-400 hover:text-white transition-colors">
                  Forums
                </Link>
                <a
                  href="https://discord.gg/K98g2wDzKK"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-400 hover:text-white transition-colors"
                >
                  Discord
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  Support
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  Terms
                </a>
              </div>
            </div>
            <div className="border-t border-gray-800 mt-8 pt-8 text-center">
              <p className="text-gray-400 text-sm">© 2025 Prism. All rights reserved.</p>
              <p className="text-gray-500 text-xs mt-2">All scripts are verified and tested for safety</p>
            </div>
          </div>
        </footer>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/crypto.ts"
// Simple encryption utilities for client-side demo
// Note: In production, use proper server-side encryption and hashing

export class CryptoUtils {
  // Generate a random salt
  static generateSalt(): string {
    const array = new Uint8Array(16)
    crypto.getRandomValues(array)
    return Array.from(array, (byte) => byte.toString(16).padStart(2, "0")).join("")
  }

// Hash password with salt using Web Crypto API
  static async hashPassword(password: string, salt?: string): Promise<{ hash: string; salt: string }> {
    const useSalt = salt || this.generateSalt()
    const encoder = new TextEncoder()
    const data = encoder.encode(password + useSalt)

const hashBuffer = await crypto.subtle.digest("SHA-256", data)
    const hashArray = Array.from(new Uint8Array(hashBuffer))
    const hash = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("")

return { hash, salt: useSalt }
  }

// Verify password against hash
  static async verifyPassword(password: string, hash: string, salt: string): Promise<boolean> {
    const { hash: newHash } = await this.hashPassword(password, salt)
    return newHash === hash
  }

// Simple encryption for other data (using AES-GCM)
  static async encryptData(data: string, key?: string): Promise<{ encrypted: string; key: string; iv: string }> {
    const useKey = key || this.generateSalt()
    const encoder = new TextEncoder()

// Generate key from string
    const keyMaterial = await crypto.subtle.importKey(
      "raw",
      encoder.encode(useKey.padEnd(32, "0").slice(0, 32)),
      { name: "AES-GCM" },
      false,
      ["encrypt"],
    )

// Generate IV
    const iv = crypto.getRandomValues(new Uint8Array(12))

// Encrypt
    const encrypted = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, keyMaterial, encoder.encode(data))

const encryptedArray = Array.from(new Uint8Array(encrypted))
    const ivArray = Array.from(iv)

return {
      encrypted: encryptedArray.map((b) => b.toString(16).padStart(2, "0")).join(""),
      key: useKey,
      iv: ivArray.map((b) => b.toString(16).padStart(2, "0")).join(""),
    }
  }

// Decrypt data
  static async decryptData(encryptedHex: string, key: string, ivHex: string): Promise<string> {
    const encoder = new TextEncoder()
    const decoder = new TextDecoder()

// Convert hex strings back to arrays
    const encrypted = new Uint8Array(encryptedHex.match(/.{2}/g)!.map((byte) => Number.parseInt(byte, 16)))
    const iv = new Uint8Array(ivHex.match(/.{2}/g)!.map((byte) => Number.parseInt(byte, 16)))

// Generate key from string
    const keyMaterial = await crypto.subtle.importKey(
      "raw",
      encoder.encode(key.padEnd(32, "0").slice(0, 32)),
      { name: "AES-GCM" },
      false,
      ["decrypt"],
    )

// Decrypt
    const decrypted = await crypto.subtle.decrypt({ name: "AES-GCM", iv }, keyMaterial, encrypted)

return decoder.decode(decrypted)
  }

// Generate a master key for the application
  static getMasterKey(): string {
    let masterKey = localStorage.getItem("prism-master-key")
    if (!masterKey) {
      masterKey = this.generateSalt() + this.generateSalt() // 64 chars
      localStorage.setItem("prism-master-key", masterKey)
    }
    return masterKey
  }
}
[V0_FILE]typescriptreact:file="app/forums/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import { Suspense } from "react"
import "./globals.css"

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

export const metadata: Metadata = {
  title: "Prism - Your New Scripting Utility",
  description: "Your new scripting utility.",
  openGraph: {
    title: "Prism - Your New Scripting Utility",
    description: "Your new scripting utility.",
    url: "https://prism-executor.com",
    siteName: "Prism",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Prism - Your New Scripting Utility",
    description: "Your new scripting utility.",
  },
}

function LoadingFallback() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 flex items-center justify-center">
      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-400"></div>
    </div>
  )
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <title>Prism - Your New Scripting Utility</title>
        <meta name="description" content="Your new scripting utility." />
        <meta property="og:title" content="Prism - Your New Scripting Utility" />
        <meta property="og:description" content="Prism - Your New Scripting Utility" />
        <meta property="og:type" content="website" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Prism - Your New Scripting Utility" />
        <meta name="twitter:description" content="Your new scripting utility." />
      </head>
      <body className={inter.className}>
        <Suspense fallback={<LoadingFallback />}>{children}</Suspense>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/file-upload.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useRef, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Upload, X, File, ImageIcon, Film } from "lucide-react"
import Image from "next/image"

interface FileUploadProps {
  onFilesChange: (files: UploadedFile[]) => void
  maxFiles?: number
  maxSizePerFile?: number // in MB
  acceptedTypes?: string[]
  className?: string
}

export interface UploadedFile {
  id: string
  name: string
  size: number
  type: string
  dataUrl: string
  isImage: boolean
  isGif: boolean
  isVideo: boolean
}

export function FileUpload({
  onFilesChange,
  maxFiles = 5,
  maxSizePerFile = 10,
  acceptedTypes = ["image/*", "video/*", ".gif", ".mp4", ".webm", ".mov", ".avi", ".txt", ".json", ".lua", ".js"],
  className = "",
}: FileUploadProps) {
  const [files, setFiles] = useState<UploadedFile[]>([])
  const [isDragging, setIsDragging] = useState(false)
  const [isUploading, setIsUploading] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

const processFiles = useCallback(
    async (fileList: FileList) => {
      setIsUploading(true)
      const newFiles: UploadedFile[] = []

for (let i = 0; i < Math.min(fileList.length, maxFiles - files.length); i++) {
        const file = fileList[i]

// Check file size
        if (file.size > maxSizePerFile * 1024 * 1024) {
          console.warn(`File ${file.name} is too large (max ${maxSizePerFile}MB)`)
          continue
        }

try {
          const dataUrl = await new Promise<string>((resolve, reject) => {
            const reader = new FileReader()
            reader.onload = () => resolve(reader.result as string)
            reader.onerror = reject
            reader.readAsDataURL(file)
          })

const uploadedFile: UploadedFile = {
            id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
            name: file.name,
            size: file.size,
            type: file.type,
            dataUrl,
            isImage: file.type.startsWith("image/"),
            isGif: file.type === "image/gif",
            isVideo: file.type.startsWith("video/"),
          }

newFiles.push(uploadedFile)
        } catch (error) {
          console.error(`Failed to process file ${file.name}:`, error)
        }
      }

const updatedFiles = [...files, ...newFiles]
      setFiles(updatedFiles)
      onFilesChange(updatedFiles)
      setIsUploading(false)
    },
    [files, maxFiles, maxSizePerFile, onFilesChange],
  )

const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }, [])

const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
  }, [])

const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault()
      setIsDragging(false)

const droppedFiles = e.dataTransfer.files
      if (droppedFiles.length > 0) {
        processFiles(droppedFiles)
      }
    },
    [processFiles],
  )

const handleFileSelect = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const selectedFiles = e.target.files
      if (selectedFiles && selectedFiles.length > 0) {
        processFiles(selectedFiles)
      }
      // Reset input value to allow selecting the same file again
      if (fileInputRef.current) {
        fileInputRef.current.value = ""
      }
    },
    [processFiles],
  )

const removeFile = useCallback(
    (fileId: string) => {
      const updatedFiles = files.filter((f) => f.id !== fileId)
      setFiles(updatedFiles)
      onFilesChange(updatedFiles)
    },
    [files, onFilesChange],
  )

const formatFileSize = (bytes: number) => {
    if (bytes === 0) return "0 Bytes"
    const k = 1024
    const sizes = ["Bytes", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
  }

const getFileIcon = (file: UploadedFile) => {
    if (file.isImage) return <ImageIcon className="w-4 h-4" />
    if (file.isVideo) return <Film className="w-4 h-4" />
    return <File className="w-4 h-4" />
  }

return (
    <div className={`space-y-4 ${className}`}>
      {/* Upload Area */}
      <Card
        className={`border-2 border-dashed transition-colors cursor-pointer ${
          isDragging ? "border-purple-400 bg-purple-600/10" : "border-gray-600 hover:border-gray-500"
        }`}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={() => fileInputRef.current?.click()}
      >
        <CardContent className="flex flex-col items-center justify-center py-8 text-center">
          <Upload className={`w-8 h-8 mb-4 ${isDragging ? "text-purple-400" : "text-gray-400"}`} />
          <p className="text-gray-300 mb-2">{isDragging ? "Drop files here" : "Click to upload or drag and drop"}</p>
          <p className="text-sm text-gray-500">Images, GIFs, videos, and text files up to {maxSizePerFile}MB each</p>
          <p className="text-xs text-gray-500 mt-1">Maximum {maxFiles} files</p>
        </CardContent>
      </Card>

{/* Loading State */}
      {isUploading && (
        <div className="flex items-center justify-center py-4">
          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-purple-400"></div>
          <span className="ml-2 text-gray-300">Processing files...</span>
        </div>
      )}

{/* File List */}
      {files.length > 0 && (
        <div className="space-y-3">
          <h4 className="text-sm font-medium text-gray-300">
            Uploaded Files ({files.length}/{maxFiles})
          </h4>
          <div className="grid gap-3">
            {files.map((file) => (
              <Card key={file.id} className="bg-gray-800/50 border-gray-700">
                <CardContent className="p-4">
                  <div className="flex items-start space-x-3">
                    {/* File Preview */}
                    <div className="flex-shrink-0">
                      {file.isImage ? (
                        <div className="relative w-16 h-16 rounded-lg overflow-hidden bg-gray-700">
                          <Image
                            src={file.dataUrl || "/placeholder.svg"}
                            alt={file.name}
                            fill
                            className="object-cover"
                            unoptimized={file.isGif}
                          />
                          {file.isGif && (
                            <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded">
                              GIF
                            </div>
                          )}
                        </div>
                      ) : file.isVideo ? (
                        <div className="w-16 h-16 rounded-lg bg-gray-700 flex items-center justify-center">
                          <Film className="w-6 h-6 text-gray-400" />
                        </div>
                      ) : (
                        <div className="w-16 h-16 rounded-lg bg-gray-700 flex items-center justify-center">
                          <File className="w-6 h-6 text-gray-400" />
                        </div>
                      )}
                    </div>

{/* File Info */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center space-x-2 mb-1">
                        {getFileIcon(file)}
                        <p className="text-sm font-medium text-white truncate">{file.name}</p>
                      </div>
                      <p className="text-xs text-gray-400">
                        {formatFileSize(file.size)} • {file.type || "Unknown type"}
                      </p>
                    </div>

{/* Remove Button */}
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={(e) => {
                        e.stopPropagation()
                        removeFile(file.id)
                      }}
                      className="text-gray-400 hover:text-red-400 hover:bg-red-900/20"
                    >
                      <X className="w-4 h-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/file-display.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Download, Eye, File, ImageIcon, Film, ExternalLink } from "lucide-react"
import Image from "next/image"
import type { UploadedFile } from "./file-upload"

interface FileDisplayProps {
  files: UploadedFile[]
  compact?: boolean
  className?: string
}

export function FileDisplay({ files, compact = false, className = "" }: FileDisplayProps) {
  const [selectedFile, setSelectedFile] = useState<UploadedFile | null>(null)
  const [isModalOpen, setIsModalOpen] = useState(false)

if (!files || files.length === 0) return null

const openFileModal = (file: UploadedFile) => {
    setSelectedFile(file)
    setIsModalOpen(true)
  }

const downloadFile = (file: UploadedFile) => {
    const link = document.createElement("a")
    link.href = file.dataUrl
    link.download = file.name
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

const getFileIcon = (file: UploadedFile) => {
    if (file.isImage) return <ImageIcon className="w-4 h-4 text-blue-400" />
    if (file.isVideo) return <Film className="w-4 h-4 text-purple-400" />
    return <File className="w-4 h-4 text-gray-400" />
  }

if (compact) {
    return (
      <div className={`space-y-2 ${className}`}>
        {files.map((file) => (
          <div key={file.id} className="flex items-center space-x-2 text-sm">
            {getFileIcon(file)}
            <span className="text-gray-300 truncate flex-1">{file.name}</span>
            <span className="text-gray-500 text-xs">{formatFileSize(file.size)}</span>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => openFileModal(file)}
              className="text-blue-400 hover:text-blue-300 p-1 h-auto"
            >
              <Eye className="w-3 h-3" />
            </Button>
          </div>
        ))}
      </div>
    )
  }

return (
    <>
      <div className={`space-y-4 ${className}`}>
        <h4 className="text-sm font-medium text-gray-300 flex items-center space-x-2">
          <File className="w-4 h-4" />
          <span>Attachments ({files.length})</span>
        </h4>

<div className="grid gap-3">
          {files.map((file) => (
            <Card key={file.id} className="bg-gray-800/30 border-gray-700 hover:bg-gray-800/50 transition-colors">
              <CardContent className="p-3">
                <div className="flex items-center space-x-3">
                  {/* File Preview/Icon */}
                  <div className="flex-shrink-0">
                    {file.isImage ? (
                      <div
                        className="relative w-12 h-12 rounded-lg overflow-hidden bg-gray-700 cursor-pointer hover:opacity-80 transition-opacity"
                        onClick={() => openFileModal(file)}
                      >
                        <Image
                          src={file.dataUrl || "/placeholder.svg"}
                          alt={file.name}
                          fill
                          className="object-cover"
                          unoptimized={file.isGif}
                        />
                        {file.isGif && (
                          <div className="absolute bottom-0 right-0 bg-black/70 text-white text-xs px-1 rounded-tl">
                            GIF
                          </div>
                        )}
                      </div>
                    ) : file.isVideo ? (
                      <div
                        className="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center cursor-pointer hover:bg-gray-600 transition-colors"
                        onClick={() => openFileModal(file)}
                      >
                        <Film className="w-5 h-5 text-purple-400" />
                      </div>
                    ) : (
                      <div className="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center">
                        <File className="w-5 h-5 text-gray-400" />
                      </div>
                    )}
                  </div>

{/* File Info */}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center space-x-2 mb-1">
                      {getFileIcon(file)}
                      <p className="text-sm font-medium text-white truncate">{file.name}</p>
                    </div>
                    <p className="text-xs text-gray-400">
                      {formatFileSize(file.size)} • {file.type || "Unknown type"}
                    </p>
                  </div>

{/* Action Buttons */}
                  <div className="flex items-center space-x-1">
                    {(file.isImage || file.isVideo) && (
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => openFileModal(file)}
                        className="text-blue-400 hover:text-blue-300 hover:bg-blue-900/20 p-2"
                        title="View"
                      >
                        <Eye className="w-4 h-4" />
                      </Button>
                    )}
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => downloadFile(file)}
                      className="text-green-400 hover:text-green-300 hover:bg-green-900/20 p-2"
                      title="Download"
                    >
                      <Download className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

{/* File Preview Modal */}
      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
        <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-4xl max-h-[90vh] overflow-hidden">
          <DialogHeader>
            <DialogTitle className="text-white flex items-center space-x-2">
              {selectedFile && getFileIcon(selectedFile)}
              <span>{selectedFile?.name}</span>
            </DialogTitle>
          </DialogHeader>

{selectedFile && (
            <div className="space-y-4">
              {/* File Preview */}
              <div className="flex justify-center bg-gray-800/50 rounded-lg p-4 max-h-[60vh] overflow-auto">
                {selectedFile.isImage ? (
                  <div className="relative max-w-full max-h-full">
                    <Image
                      src={selectedFile.dataUrl || "/placeholder.svg"}
                      alt={selectedFile.name}
                      width={800}
                      height={600}
                      className="max-w-full max-h-full object-contain rounded-lg"
                      unoptimized={selectedFile.isGif}
                    />
                  </div>
                ) : selectedFile.isVideo ? (
                  <video
                    src={selectedFile.dataUrl}
                    controls
                    className="max-w-full max-h-full rounded-lg"
                    style={{ maxHeight: "60vh" }}
                  >
                    Your browser does not support the video tag.
                  </video>
                ) : (
                  <div className="text-center py-8">
                    <File className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                    <p className="text-gray-300 mb-2">Preview not available for this file type</p>
                    <p className="text-sm text-gray-400">
                      {selectedFile.type || "Unknown type"} • {formatFileSize(selectedFile.size)}
                    </p>
                  </div>
                )}
              </div>

{/* File Actions */}
              <div className="flex items-center justify-between pt-4 border-t border-gray-700">
                <div className="text-sm text-gray-400">
                  {selectedFile.type || "Unknown type"} • {formatFileSize(selectedFile.size)}
                </div>
                <div className="flex items-center space-x-2">
                  <Button
                    variant="outline"
                    onClick={() => downloadFile(selectedFile)}
                    className="border-gray-600 text-white hover:bg-gray-800 bg-transparent"
                  >
                    <Download className="w-4 h-4 mr-2" />
                    Download
                  </Button>
                  {selectedFile.isImage && (
                    <Button
                      variant="outline"
                      onClick={() => window.open(selectedFile.dataUrl, "_blank")}
                      className="border-gray-600 text-white hover:bg-gray-800 bg-transparent"
                    >
                      <ExternalLink className="w-4 h-4 mr-2" />
                      Open in New Tab
                    </Button>
                  )}
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/auth-modal.tsx" isQuickEdit="true"
"use client"
import { useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { User, Lock, AlertTriangle, Eye, EyeOff, Crown } from "lucide-react"
import { useState } from "react"
import { CryptoUtils } from "@/lib/crypto"

interface AuthModalProps {
  isOpen: boolean
  onClose: () => void
  onSuccess: (user: { username: string; createdAt: string }) => void
}

interface EncryptedAccount {
  username: string // Keep username unencrypted for lookup
  passwordHash: string
  passwordSalt: string
  encryptedData: string // Encrypted user data
  encryptionIv: string
  createdAt: string
}

interface UserData {
  email?: string
  preferences?: any
}

export function AuthModal({ isOpen, onClose, onSuccess }: AuthModalProps) {
  const [isLogin, setIsLogin] = useState(false)
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

// Common weak passwords to filter
  const weakPasswords = [
    "password",
    "123456",
    "password123",
    "admin",
    "qwerty",
    "letmein",
    "welcome",
    "monkey",
    "1234567890",
    "abc123",
    "password1",
    "123456789",
    "welcome123",
    "admin123",
    "root",
    "toor",
    "pass",
    "test",
    "guest",
    "user",
    "login",
    "roblox",
    "prism",
    "executor",
    "script",
  ]

// Initialize admin account if it doesn't exist
  const initializeAdminAccount = async () => {
    const accounts = JSON.parse(localStorage.getItem("prism-encrypted-accounts") || "[]") as EncryptedAccount[]
    const adminExists = accounts.some((account) => account.username.toLowerCase() === "zavi")

if (!adminExists) {
      const adminPassword = "9wEbHC9>E4a|4R"
      const { hash: passwordHash, salt: passwordSalt } = await CryptoUtils.hashPassword(adminPassword)

const userData: UserData = {
        preferences: { theme: "dark", isAdmin: true },
      }
      const masterKey = CryptoUtils.getMasterKey()
      const { encrypted: encryptedData, iv: encryptionIv } = await CryptoUtils.encryptData(
        JSON.stringify(userData),
        masterKey,
      )

const adminAccount: EncryptedAccount = {
        username: "zavi",
        passwordHash,
        passwordSalt,
        encryptedData,
        encryptionIv,
        createdAt: new Date().toISOString(),
      }

accounts.push(adminAccount)
      localStorage.setItem("prism-encrypted-accounts", JSON.stringify(accounts))
    }
  }

// Validate username
  const validateUsername = (user: string): string | null => {
    if (user.length < 3) {
      return "Username must be at least 3 characters long"
    }
    if (user.length > 20) {
      return "Username must be 20 characters or less"
    }
    if (!/^[a-zA-Z0-9_-]+$/.test(user)) {
      return "Username can only contain letters, numbers, underscores, and hyphens"
    }

// Check for inappropriate content
    const slurs = ["fuck", "shit", "damn", "bitch", "ass", "nigga", "nigger", "faggot", "retard"]
    const containsSlur = slurs.some((slur) => user.toLowerCase().includes(slur.toLowerCase()))
    if (containsSlur) {
      return "Username contains inappropriate content"
    }

return null
  }

const checkUsernameExists = (user: string): boolean => {
    const accounts = JSON.parse(localStorage.getItem("prism-encrypted-accounts") || "[]") as EncryptedAccount[]
    return accounts.some((account) => account.username.toLowerCase() === user.toLowerCase())
  }

const isUserBanned = (user: string): boolean => {
    const bannedUsers = JSON.parse(localStorage.getItem("prism-banned-users") || "[]")
    return bannedUsers.some((banned: any) => banned.username.toLowerCase() === user.toLowerCase())
  }

const handleSubmit = async (e: any) => {
    e.preventDefault()
    setError("")
    setIsLoading(true)

try {
      // Check if user is banned
      if (isUserBanned(username)) {
        setError("This account has been banned from the forums.")
        return
      }

// Validate username
      const usernameError = validateUsername(username)
      if (usernameError) {
        setError(usernameError)
        return
      }

if (isLogin) {
        // Login logic with encrypted data
        const accounts = JSON.parse(localStorage.getItem("prism-encrypted-accounts") || "[]") as EncryptedAccount[]
        const account = accounts.find((acc) => acc.username.toLowerCase() === username.toLowerCase())

if (!account) {
          setError("Invalid username or password")
          return
        }

// Verify password
        const isValidPassword = await CryptoUtils.verifyPassword(password, account.passwordHash, account.passwordSalt)
        if (!isValidPassword) {
          setError("Invalid username or password")
          return
        }

// Decrypt user data
        const masterKey = CryptoUtils.getMasterKey()
        let userData: UserData = {}
        try {
          const decryptedData = await CryptoUtils.decryptData(account.encryptedData, masterKey, account.encryptionIv)
          userData = JSON.parse(decryptedData)
        } catch (err) {
          console.warn("Could not decrypt user data, using defaults")
        }

// Success - login
        const user = { username: account.username, createdAt: account.createdAt }
        const encryptedUser = await CryptoUtils.encryptData(JSON.stringify(user), masterKey)
        localStorage.setItem("prism-current-user-encrypted", JSON.stringify(encryptedUser))
        onSuccess(user)
        onClose()
        resetForm()
      } else {
        // Registration logic with encryption
        if (checkUsernameExists(username)) {
          setError("Username is already taken. Please choose a different one.")
          return
        }

// Prevent creating admin usernames
        if (username.toLowerCase() === "zavi") {
          setError("This username is reserved.")
          return
        }

const validatePassword = (pass: string): string | null => {
          if (pass.length < 8) {
            return "Password must be at least 8 characters long"
          }
          if (pass.length > 128) {
            return "Password must be 128 characters or less"
          }
          if (weakPasswords.includes(pass.toLowerCase())) {
            return "This password is too common. Please choose a stronger password."
          }
          if (pass.toLowerCase().includes(username.toLowerCase()) && username.length > 0) {
            return "Password cannot contain your username"
          }
          // Check for at least one number or special character
          if (!/(?=.*[0-9!@#$%^&*])/.test(pass)) {
            return "Password must contain at least one number or special character"
          }
          return null
        }

// Validate password
        const passwordError = validatePassword(password)
        if (passwordError) {
          setError(passwordError)
          return
        }

if (password !== confirmPassword) {
          setError("Passwords do not match")
          return
        }

// Hash password
        const { hash: passwordHash, salt: passwordSalt } = await CryptoUtils.hashPassword(password)

// Encrypt user data
        const userData: UserData = {
          preferences: { theme: "dark" },
        }
        const masterKey = CryptoUtils.getMasterKey()
        const { encrypted: encryptedData, iv: encryptionIv } = await CryptoUtils.encryptData(
          JSON.stringify(userData),
          masterKey,
        )

// Create new encrypted account
        const accounts = JSON.parse(localStorage.getItem("prism-encrypted-accounts") || "[]") as EncryptedAccount[]
        const newAccount: EncryptedAccount = {
          username: username.trim(),
          passwordHash,
          passwordSalt,
          encryptedData,
          encryptionIv,
          createdAt: new Date().toISOString(),
        }

accounts.push(newAccount)
        localStorage.setItem("prism-encrypted-accounts", JSON.stringify(accounts))

// Success - auto login with encryption
        const user = { username: newAccount.username, createdAt: newAccount.createdAt }
        const encryptedUser = await CryptoUtils.encryptData(JSON.stringify(user), masterKey)
        localStorage.setItem("prism-current-user-encrypted", JSON.stringify(encryptedUser))
        onSuccess(user)
        onClose()
        resetForm()
      }
    } catch (err) {
      console.error("Authentication error:", err)
      setError("An error occurred during authentication. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

const resetForm = () => {
    setUsername("")
    setPassword("")
    setConfirmPassword("")
    setError("")
    setShowPassword(false)
  }

const switchMode = () => {
    setIsLogin(!isLogin)
    resetForm()
  }

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

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-md">
        <DialogHeader>
          <DialogTitle className="text-purple-400 text-xl font-bold">
            {isLogin ? "Login to Prism Forums" : "Create Prism Account"}
          </DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4">
          {!isLogin && (
            <Alert className="bg-yellow-900/20 border-yellow-700">
              <AlertTriangle className="h-4 w-4 text-yellow-400" />
              <AlertDescription className="text-yellow-300">
                <strong>Security Notice:</strong> Don't use a password you normally use elsewhere. All data is encrypted
                and passwords are securely hashed.
              </AlertDescription>
            </Alert>
          )}

{username.toLowerCase() === "zavi" && (
            <Alert className="bg-red-900/20 border-red-700">
              <Crown className="h-4 w-4 text-red-400" />
              <AlertDescription className="text-red-300">
                <strong>Admin Account:</strong> You are logging into the administrator account with special privileges.
              </AlertDescription>
            </Alert>
          )}

{error && (
            <Alert className="bg-red-900/20 border-red-700">
              <AlertTriangle className="h-4 w-4 text-red-400" />
              <AlertDescription className="text-red-300">{error}</AlertDescription>
            </Alert>
          )}

<div className="space-y-4">
            <div>
              <label className="text-sm font-medium text-gray-300 mb-2 block">Username</label>
              <div className="relative">
                <User className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                <Input
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  placeholder="Enter your username..."
                  className="bg-gray-800 border-gray-600 text-white pl-10"
                  maxLength={20}
                  required
                />
                {username.toLowerCase() === "zavi" && (
                  <Crown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-red-400" />
                )}
              </div>
              {!isLogin && (
                <p className="text-xs text-gray-400 mt-1">3-20 characters, letters, numbers, _ and - only</p>
              )}
            </div>

<div>
              <label className="text-sm font-medium text-gray-300 mb-2 block">Password</label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                <Input
                  type={showPassword ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="Enter your password..."
                  className="bg-gray-800 border-gray-600 text-white pl-10 pr-10"
                  required
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-300"
                >
                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                </button>
              </div>
              {!isLogin && username.toLowerCase() !== "zavi" && (
                <p className="text-xs text-gray-400 mt-1">
                  At least 8 characters, must include a number or special character
                </p>
              )}
            </div>

{!isLogin && (
              <div>
                <label className="text-sm font-medium text-gray-300 mb-2 block">Confirm Password</label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <Input
                    type={showPassword ? "text" : "password"}
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                    placeholder="Confirm your password..."
                    className="bg-gray-800 border-gray-600 text-white pl-10"
                    required
                  />
                </div>
              </div>
            )}
          </div>

<div className="flex space-x-3 pt-4">
            <Button
              type="button"
              variant="outline"
              onClick={onClose}
              className="flex-1 border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
            >
              Cancel
            </Button>
            <Button
              type="submit"
              disabled={isLoading}
              className="flex-1 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
            >
              {isLoading ? "Please wait..." : isLogin ? "Login" : "Create Account"}
            </Button>
          </div>

<div className="text-center pt-4 border-t border-gray-700">
            <p className="text-sm text-gray-400">
              {isLogin ? "Don't have an account?" : "Already have an account?"}
              <button
                type="button"
                onClick={switchMode}
                className="text-purple-400 hover:text-purple-300 ml-2 font-medium"
              >
                {isLogin ? "Create one" : "Login here"}
              </button>
            </p>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/voting-system.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { ChevronUp, ChevronDown } from "lucide-react"

interface VotingSystemProps {
  itemId: string
  itemType: "thread" | "reply"
  currentUser: { username: string } | null
  className?: string
}

interface Vote {
  itemId: string
  itemType: "thread" | "reply"
  username: string
  voteType: "upvote" | "downvote"
  createdAt: string
}

export function VotingSystem({ itemId, itemType, currentUser, className = "" }: VotingSystemProps) {
  const [votes, setVotes] = useState<Vote[]>([])
  const [userVote, setUserVote] = useState<"upvote" | "downvote" | null>(null)

useEffect(() => {
    loadVotes()
  }, [itemId, itemType, currentUser])

const loadVotes = () => {
    const savedVotes = localStorage.getItem("prism-votes")
    if (savedVotes) {
      const allVotes: Vote[] = JSON.parse(savedVotes)
      const itemVotes = allVotes.filter((v) => v.itemId === itemId && v.itemType === itemType)
      setVotes(itemVotes)

if (currentUser) {
        const existingVote = itemVotes.find((v) => v.username === currentUser.username)
        setUserVote(existingVote?.voteType || null)
      }
    }
  }

const handleVote = (voteType: "upvote" | "downvote") => {
    if (!currentUser) return

const savedVotes = localStorage.getItem("prism-votes")
    const allVotes: Vote[] = savedVotes ? JSON.parse(savedVotes) : []

// Remove existing vote from this user for this item
    const filteredVotes = allVotes.filter(
      (v) => !(v.itemId === itemId && v.itemType === itemType && v.username === currentUser.username),
    )

// If clicking the same vote type, remove the vote (toggle off)
    if (userVote === voteType) {
      localStorage.setItem("prism-votes", JSON.stringify(filteredVotes))
      setUserVote(null)
      loadVotes()
      return
    }

// Add new vote
    const newVote: Vote = {
      itemId,
      itemType,
      username: currentUser.username,
      voteType,
      createdAt: new Date().toISOString(),
    }

const updatedVotes = [...filteredVotes, newVote]
    localStorage.setItem("prism-votes", JSON.stringify(updatedVotes))
    setUserVote(voteType)
    loadVotes()
  }

const upvotes = votes.filter((v) => v.voteType === "upvote").length
  const downvotes = votes.filter((v) => v.voteType === "downvote").length
  const score = upvotes - downvotes

return (
    <div className={`flex flex-col items-center space-y-1 ${className}`}>
      <Button
        variant="ghost"
        size="sm"
        onClick={() => handleVote("upvote")}
        disabled={!currentUser}
        className={`p-1 h-auto ${
          userVote === "upvote" ? "text-green-400 hover:text-green-300" : "text-gray-400 hover:text-green-400"
        }`}
      >
        <ChevronUp className="w-5 h-5" />
      </Button>
      <span
        className={`text-sm font-medium ${score > 0 ? "text-green-400" : score < 0 ? "text-red-400" : "text-gray-400"}`}
      >
        {score}
      </span>
      <Button
        variant="ghost"
        size="sm"
        onClick={() => handleVote("downvote")}
        disabled={!currentUser}
        className={`p-1 h-auto ${
          userVote === "downvote" ? "text-red-400 hover:text-red-300" : "text-gray-400 hover:text-red-400"
        }`}
      >
        <ChevronDown className="w-5 h-5" />
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/report-modal.tsx"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Flag, AlertTriangle } from "lucide-react"

interface ReportModalProps {
  isOpen: boolean
  onClose: () => void
  itemId: string
  itemType: "thread" | "reply"
  itemAuthor: string
  itemContent: string
  currentUser: { username: string } | null
}

interface Report {
  id: string
  itemId: string
  itemType: "thread" | "reply"
  itemAuthor: string
  itemContent: string
  reportedBy: string
  reason: string
  customReason?: string
  createdAt: string
  status: "pending" | "resolved" | "dismissed"
}

const reportReasons = [
  { value: "virus", label: "Virus/Malware", description: "Contains or links to malicious software" },
  { value: "false_info", label: "False Information", description: "Spreads misinformation or lies" },
  { value: "racism", label: "Racism", description: "Contains racist content or hate speech" },
  { value: "nsfw", label: "NSFW Content", description: "Not safe for work or inappropriate content" },
  { value: "spam", label: "Spam", description: "Repetitive, unwanted, or promotional content" },
  { value: "harassment", label: "Harassment", description: "Bullying, threats, or personal attacks" },
  { value: "doxxing", label: "Doxxing", description: "Sharing personal information without consent" },
  { value: "scam", label: "Scam/Fraud", description: "Fraudulent schemes or deceptive practices" },
  { value: "copyright", label: "Copyright Violation", description: "Unauthorized use of copyrighted material" },
  { value: "off_topic", label: "Off Topic", description: "Content not relevant to the discussion" },
  { value: "other", label: "Other", description: "Specify a custom reason" },
]

export function ReportModal({
  isOpen,
  onClose,
  itemId,
  itemType,
  itemAuthor,
  itemContent,
  currentUser,
}: ReportModalProps) {
  const [selectedReason, setSelectedReason] = useState("")
  const [customReason, setCustomReason] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState("")

const handleSubmit = () => {
    if (!currentUser) {
      setError("You must be logged in to report content")
      return
    }

if (!selectedReason) {
      setError("Please select a reason for reporting")
      return
    }

if (selectedReason === "other" && !customReason.trim()) {
      setError("Please provide a custom reason")
      return
    }

// Check if user is muted from reporting
    const userMutes = JSON.parse(localStorage.getItem("prism-user-mutes") || "[]")
    const reportMute = userMutes.find(
      (mute: any) =>
        mute.username === currentUser.username && mute.type === "reporting" && new Date(mute.expiresAt) > new Date(),
    )

if (reportMute) {
      setError("You are currently muted from reporting content")
      return
    }

setIsSubmitting(true)

try {
      const report: Report = {
        id: Date.now().toString(),
        itemId,
        itemType,
        itemAuthor,
        itemContent: itemContent.substring(0, 500), // Limit content length
        reportedBy: currentUser.username,
        reason: selectedReason,
        customReason: selectedReason === "other" ? customReason.trim() : undefined,
        createdAt: new Date().toISOString(),
        status: "pending",
      }

const savedReports = localStorage.getItem("prism-reports")
      const allReports: Report[] = savedReports ? JSON.parse(savedReports) : []
      allReports.push(report)
      localStorage.setItem("prism-reports", JSON.stringify(allReports))

onClose()
      resetForm()
    } catch (err) {
      setError("Failed to submit report. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

const resetForm = () => {
    setSelectedReason("")
    setCustomReason("")
    setError("")
  }

const handleClose = () => {
    onClose()
    resetForm()
  }

return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-2xl">
        <DialogHeader>
          <DialogTitle className="text-red-400 flex items-center space-x-2">
            <Flag className="w-5 h-5" />
            <span>Report Content</span>
          </DialogTitle>
        </DialogHeader>

<div className="space-y-6">
          <Alert className="bg-yellow-900/20 border-yellow-700">
            <AlertTriangle className="h-4 w-4 text-yellow-400" />
            <AlertDescription className="text-yellow-300">
              <strong>Warning:</strong> False reports may result in restrictions on your account. Only report content
              that genuinely violates community guidelines.
            </AlertDescription>
          </Alert>

<div>
            <h3 className="text-lg font-semibold text-white mb-4">
              Reporting {itemType} by @{itemAuthor}
            </h3>
            <div className="bg-gray-800/50 border border-gray-700 rounded-lg p-4 mb-4">
              <p className="text-gray-300 text-sm line-clamp-3">{itemContent}</p>
            </div>
          </div>

<div>
            <h4 className="text-md font-semibold text-white mb-3">Why are you reporting this content?</h4>
            <div className="space-y-2">
              {reportReasons.map((reason) => (
                <label
                  key={reason.value}
                  className={`flex items-start space-x-3 p-3 rounded-lg border cursor-pointer transition-colors ${
                    selectedReason === reason.value
                      ? "border-red-500 bg-red-900/20"
                      : "border-gray-600 hover:border-gray-500 hover:bg-gray-800/50"
                  }`}
                >
                  <input
                    type="radio"
                    name="reason"
                    value={reason.value}
                    checked={selectedReason === reason.value}
                    onChange={(e) => setSelectedReason(e.target.value)}
                    className="mt-1"
                  />
                  <div className="flex-1">
                    <div className="text-white font-medium">{reason.label}</div>
                    <div className="text-gray-400 text-sm">{reason.description}</div>
                  </div>
                </label>
              ))}
            </div>
          </div>

{selectedReason === "other" && (
            <div>
              <label className="text-sm font-medium text-gray-300 mb-2 block">Custom Reason</label>
              <Textarea
                value={customReason}
                onChange={(e) => setCustomReason(e.target.value)}
                placeholder="Please explain why you're reporting this content..."
                className="bg-gray-800 border-gray-600 text-white min-h-24"
                maxLength={500}
              />
              <p className="text-xs text-gray-400 mt-1">{customReason.length}/500 characters</p>
            </div>
          )}

<div className="flex space-x-3 pt-4">
            <Button
              variant="outline"
              onClick={handleClose}
              className="flex-1 border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
            >
              Cancel
            </Button>
            <Button
              onClick={handleSubmit}
              disabled={isSubmitting || !selectedReason}
              className="flex-1 bg-red-600 hover:bg-red-700"
            >
              {isSubmitting ? "Submitting..." : "Submit Report"}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/admin-panel.tsx"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
  Shield,
  Trash2,
  Ban,
  UserX,
  MessageSquare,
  Users,
  AlertTriangle,
  Search,
  Eye,
  Clock,
  User,
  Flag,
  CheckCircle,
  XCircle,
  VolumeX,
} from "lucide-react"

interface AdminPanelProps {
  isOpen: boolean
  onClose: () => void
  currentUser: { username: string; createdAt: string } | null
}

interface Thread {
  id: string
  title: string
  content: string
  author: string
  createdAt: string
  replies: number
  views: number
  category: string
  files?: any[]
}

interface Reply {
  id: string
  threadId: string
  content: string
  author: string
  createdAt: string
  files?: any[]
  replyTo?: string
}

interface BannedUser {
  username: string
  bannedAt: string
  bannedBy: string
  reason: string
}

interface UserMute {
  id: string
  username: string
  type: "posting" | "replying" | "reporting" | "all"
  reason: string
  mutedBy: string
  mutedAt: string
  expiresAt: string
}

interface UserWarning {
  id: string
  username: string
  reason: string
  warnedBy: string
  warnedAt: string
}

export function AdminPanel({ isOpen, onClose, currentUser }: AdminPanelProps) {
  const [threads, setThreads] = useState<Thread[]>([])
  const [replies, setReplies] = useState<Reply[]>([])
  const [bannedUsers, setBannedUsers] = useState<BannedUser[]>([])
  const [reports, setReports] = useState<Report[]>([])
  const [userMutes, setUserMutes] = useState<UserMute[]>([])
  const [userWarnings, setUserWarnings] = useState<UserWarning[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedTab, setSelectedTab] = useState<"threads" | "replies" | "users" | "reports">("reports")
  const [banUsername, setBanUsername] = useState("")
  const [banReason, setBanReason] = useState("")
  const [muteUsername, setMuteUsername] = useState("")
  const [muteType, setMuteType] = useState<"posting" | "replying" | "reporting" | "all">("posting")
  const [muteReason, setMuteReason] = useState("")
  const [muteDuration, setMuteDuration] = useState("1")
  const [warnUsername, setWarnUsername] = useState("")
  const [warnReason, setWarnReason] = useState("")

// Check if current user is admin
  const isAdmin = currentUser?.username === "zavi"

useEffect(() => {
    if (isOpen && isAdmin) {
      loadData()
    }
  }, [isOpen, isAdmin])

const loadData = () => {
    const savedThreads = localStorage.getItem("prism-forums-threads")
    const savedReplies = localStorage.getItem("prism-forums-replies")
    const savedBannedUsers = localStorage.getItem("prism-banned-users")
    const savedReports = localStorage.getItem("prism-reports")
    const savedMutes = localStorage.getItem("prism-user-mutes")
    const savedWarnings = localStorage.getItem("prism-user-warnings")

if (savedThreads) setThreads(JSON.parse(savedThreads))
    if (savedReplies) setReplies(JSON.parse(savedReplies))
    if (savedBannedUsers) setBannedUsers(JSON.parse(savedBannedUsers))
    if (savedReports) setReports(JSON.parse(savedReports))
    if (savedMutes) setUserMutes(JSON.parse(savedMutes))
    if (savedWarnings) setUserWarnings(JSON.parse(savedWarnings))
  }

const deleteThread = (threadId: string) => {
    if (!confirm("Are you sure you want to delete this thread? This action cannot be undone.")) return

const updatedThreads = threads.filter((t) => t.id !== threadId)
    const updatedReplies = replies.filter((r) => r.threadId !== threadId)

setThreads(updatedThreads)
    setReplies(updatedReplies)

localStorage.setItem("prism-forums-threads", JSON.stringify(updatedThreads))
    localStorage.setItem("prism-forums-replies", JSON.stringify(updatedReplies))
  }

const deleteReply = (replyId: string) => {
    if (!confirm("Are you sure you want to delete this reply? This action cannot be undone.")) return

const updatedReplies = replies.filter((r) => r.id !== replyId)
    setReplies(updatedReplies)
    localStorage.setItem("prism-forums-replies", JSON.stringify(updatedReplies))

// Update thread reply count
    const reply = replies.find((r) => r.id === replyId)
    if (reply) {
      const updatedThreads = threads.map((t) =>
        t.id === reply.threadId ? { ...t, replies: Math.max(0, t.replies - 1) } : t,
      )
      setThreads(updatedThreads)
      localStorage.setItem("prism-forums-threads", JSON.stringify(updatedThreads))
    }
  }

const banUser = () => {
    if (!banUsername.trim() || !banReason.trim()) return

const newBan: BannedUser = {
      username: banUsername.trim(),
      bannedAt: new Date().toISOString(),
      bannedBy: currentUser?.username || "Admin",
      reason: banReason.trim(),
    }

const updatedBannedUsers = [...bannedUsers, newBan]
    setBannedUsers(updatedBannedUsers)
    localStorage.setItem("prism-banned-users", JSON.stringify(updatedBannedUsers))

setBanUsername("")
    setBanReason("")
  }

const unbanUser = (username: string) => {
    const updatedBannedUsers = bannedUsers.filter((u) => u.username !== username)
    setBannedUsers(updatedBannedUsers)
    localStorage.setItem("prism-banned-users", JSON.stringify(updatedBannedUsers))
  }

const muteUser = () => {
    if (!muteUsername.trim() || !muteReason.trim() || !muteDuration.trim()) return

const durationHours = Number.parseInt(muteDuration)
    if (isNaN(durationHours) || durationHours <= 0) return

const expiresAt = new Date()
    expiresAt.setHours(expiresAt.getHours() + durationHours)

const newMute: UserMute = {
      id: Date.now().toString(),
      username: muteUsername.trim(),
      type: muteType,
      reason: muteReason.trim(),
      mutedBy: currentUser?.username || "Admin",
      mutedAt: new Date().toISOString(),
      expiresAt: expiresAt.toISOString(),
    }

const updatedMutes = [...userMutes, newMute]
    setUserMutes(updatedMutes)
    localStorage.setItem("prism-user-mutes", JSON.stringify(updatedMutes))

setMuteUsername("")
    setMuteReason("")
    setMuteDuration("1")
  }

const unmuteUser = (muteId: string) => {
    const updatedMutes = userMutes.filter((m) => m.id !== muteId)
    setUserMutes(updatedMutes)
    localStorage.setItem("prism-user-mutes", JSON.stringify(updatedMutes))
  }

const warnUser = () => {
    if (!warnUsername.trim() || !warnReason.trim()) return

const newWarning: UserWarning = {
      id: Date.now().toString(),
      username: warnUsername.trim(),
      reason: warnReason.trim(),
      warnedBy: currentUser?.username || "Admin",
      warnedAt: new Date().toISOString(),
    }

const updatedWarnings = [...userWarnings, newWarning]
    setUserWarnings(updatedWarnings)
    localStorage.setItem("prism-user-warnings", JSON.stringify(updatedWarnings))

setWarnUsername("")
    setWarnReason("")
  }

const handleReport = (
    reportId: string,
    action: "resolve" | "dismiss",
    punishReporter = false,
    punishAuthor = false,
  ) => {
    const report = reports.find((r) => r.id === reportId)
    if (!report) return

// Update report status
    const updatedReports = reports.map((r) =>
      r.id === reportId ? { ...r, status: action === "resolve" ? "resolved" : "dismissed" } : r,
    )
    setReports(updatedReports)
    localStorage.setItem("prism-reports", JSON.stringify(updatedReports))

// Handle punishments if requested
    if (punishReporter) {
      // Mute reporter from reporting for 24 hours
      const reporterMute: UserMute = {
        id: Date.now().toString() + "_reporter",
        username: report.reportedBy,
        type: "reporting",
        reason: "False reporting",
        mutedBy: currentUser?.username || "Admin",
        mutedAt: new Date().toISOString(),
        expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
      }
      const updatedMutes = [...userMutes, reporterMute]
      setUserMutes(updatedMutes)
      localStorage.setItem("prism-user-mutes", JSON.stringify(updatedMutes))
    }

if (punishAuthor) {
      // Warn the content author
      const authorWarning: UserWarning = {
        id: Date.now().toString() + "_author",
        username: report.itemAuthor,
        reason: `Content violation: ${report.reason}`,
        warnedBy: currentUser?.username || "Admin",
        warnedAt: new Date().toISOString(),
      }
      const updatedWarnings = [...userWarnings, authorWarning]
      setUserWarnings(updatedWarnings)
      localStorage.setItem("prism-user-warnings", JSON.stringify(updatedWarnings))
    }
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
  }

const filteredThreads = threads.filter(
    (thread) =>
      thread.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      thread.author.toLowerCase().includes(searchTerm.toLowerCase()) ||
      thread.content.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const filteredReplies = replies.filter(
    (reply) =>
      reply.content.toLowerCase().includes(searchTerm.toLowerCase()) ||
      reply.author.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const filteredReports = reports.filter(
    (report) =>
      report.reportedBy.toLowerCase().includes(searchTerm.toLowerCase()) ||
      report.itemAuthor.toLowerCase().includes(searchTerm.toLowerCase()) ||
      report.reason.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const pendingReports = reports.filter((r) => r.status === "pending").length

if (!isAdmin) {
    return (
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-md">
          <DialogHeader>
            <DialogTitle className="text-red-400 flex items-center space-x-2">
              <AlertTriangle className="w-5 h-5" />
              <span>Access Denied</span>
            </DialogTitle>
          </DialogHeader>
          <div className="text-center py-8">
            <Shield className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <p className="text-gray-300 mb-4">You don't have permission to access the admin panel.</p>
            <Button onClick={onClose} className="bg-gray-600 hover:bg-gray-700">
              Close
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    )
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-7xl max-h-[90vh] overflow-hidden">
        <DialogHeader>
          <DialogTitle className="text-red-400 flex items-center space-x-2">
            <Shield className="w-5 h-5" />
            <span>Admin Panel</span>
          </DialogTitle>
        </DialogHeader>

<div className="space-y-6">
          {/* Stats Overview */}
          <div className="grid grid-cols-4 gap-4">
            <Card className="bg-gray-800/50 border-gray-700">
              <CardContent className="p-4 text-center">
                <MessageSquare className="w-8 h-8 text-blue-400 mx-auto mb-2" />
                <div className="text-2xl font-bold text-white">{threads.length}</div>
                <div className="text-sm text-gray-400">Total Threads</div>
              </CardContent>
            </Card>
            <Card className="bg-gray-800/50 border-gray-700">
              <CardContent className="p-4 text-center">
                <MessageSquare className="w-8 h-8 text-green-400 mx-auto mb-2" />
                <div className="text-2xl font-bold text-white">{replies.length}</div>
                <div className="text-sm text-gray-400">Total Replies</div>
              </CardContent>
            </Card>
            <Card className="bg-gray-800/50 border-gray-700">
              <CardContent className="p-4 text-center">
                <Ban className="w-8 h-8 text-red-400 mx-auto mb-2" />
                <div className="text-2xl font-bold text-white">{bannedUsers.length}</div>
                <div className="text-sm text-gray-400">Banned Users</div>
              </CardContent>
            </Card>
            <Card className="bg-gray-800/50 border-gray-700">
              <CardContent className="p-4 text-center">
                <Flag className="w-8 h-8 text-orange-400 mx-auto mb-2" />
                <div className="text-2xl font-bold text-white">{pendingReports}</div>
                <div className="text-sm text-gray-400">Pending Reports</div>
              </CardContent>
            </Card>
          </div>

{/* Search */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
            <Input
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Search threads, replies, reports, or users..."
              className="bg-gray-800 border-gray-600 text-white pl-10"
            />
          </div>

{/* Tabs */}
          <div className="flex space-x-2">
            <Button
              variant={selectedTab === "reports" ? "default" : "outline"}
              onClick={() => setSelectedTab("reports")}
              className={
                selectedTab === "reports"
                  ? "bg-red-600 hover:bg-red-700"
                  : "border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
              }
            >
              <Flag className="w-4 h-4 mr-2" />
              Reports ({pendingReports})
            </Button>
            <Button
              variant={selectedTab === "threads" ? "default" : "outline"}
              onClick={() => setSelectedTab("threads")}
              className={
                selectedTab === "threads"
                  ? "bg-red-600 hover:bg-red-700"
                  : "border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
              }
            >
              <MessageSquare className="w-4 h-4 mr-2" />
              Threads ({filteredThreads.length})
            </Button>
            <Button
              variant={selectedTab === "replies" ? "default" : "outline"}
              onClick={() => setSelectedTab("replies")}
              className={
                selectedTab === "replies"
                  ? "bg-red-600 hover:bg-red-700"
                  : "border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
              }
            >
              <MessageSquare className="w-4 h-4 mr-2" />
              Replies ({filteredReplies.length})
            </Button>
            <Button
              variant={selectedTab === "users" ? "default" : "outline"}
              onClick={() => setSelectedTab("users")}
              className={
                selectedTab === "users"
                  ? "bg-red-600 hover:bg-red-700"
                  : "border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
              }
            >
              <Users className="w-4 h-4 mr-2" />
              User Management
            </Button>
          </div>

{/* Content */}
          <div className="max-h-96 overflow-y-auto">
            {selectedTab === "reports" && (
              <div className="space-y-3">
                {filteredReports.length === 0 ? (
                  <div className="text-center py-8 text-gray-400">No reports found</div>
                ) : (
                  filteredReports.map((report) => (
                    <Card key={report.id} className="bg-gray-800/30 border-gray-700">
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between mb-4">
                          <div className="flex-1">
                            <div className="flex items-center space-x-2 mb-2">
                              <Badge
                                className={
                                  report.status === "pending"
                                    ? "bg-orange-600/20 text-orange-300"
                                    : report.status === "resolved"
                                      ? "bg-green-600/20 text-green-300"
                                      : "bg-gray-600/20 text-gray-300"
                                }
                              >
                                {report.status}
                              </Badge>
                              <Badge className="bg-red-600/20 text-red-300">{report.reason.replace("_", " ")}</Badge>
                              <Badge className="bg-blue-600/20 text-blue-300">{report.itemType}</Badge>
                            </div>
                            <div className="text-sm text-gray-400 mb-2">
                              <strong>Reported by:</strong> {report.reportedBy} • <strong>Content by:</strong>{" "}
                              {report.itemAuthor} • {formatDate(report.createdAt)}
                            </div>
                            <div className="bg-gray-900/50 rounded p-3 mb-3">
                              <p className="text-gray-300 text-sm">{report.itemContent}</p>
                            </div>
                            {report.customReason && (
                              <div className="bg-yellow-900/20 border border-yellow-600/30 rounded p-2">
                                <p className="text-yellow-300 text-sm">
                                  <strong>Custom reason:</strong> {report.customReason}
                                </p>
                              </div>
                            )}
                          </div>
                        </div>
                        {report.status === "pending" && (
                          <div className="flex items-center space-x-2">
                            <Button
                              size="sm"
                              onClick={() => handleReport(report.id, "resolve", false, true)}
                              className="bg-green-600 hover:bg-green-700"
                            >
                              <CheckCircle className="w-4 h-4 mr-1" />
                              Resolve & Warn Author
                            </Button>
                            <Button
                              size="sm"
                              onClick={() => handleReport(report.id, "resolve", false, false)}
                              className="bg-blue-600 hover:bg-blue-700"
                            >
                              <CheckCircle className="w-4 h-4 mr-1" />
                              Resolve Only
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => handleReport(report.id, "dismiss", true, false)}
                              className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
                            >
                              <XCircle className="w-4 h-4 mr-1" />
                              Dismiss & Mute Reporter
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => handleReport(report.id, "dismiss", false, false)}
                              className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
                            >
                              <XCircle className="w-4 h-4 mr-1" />
                              Dismiss Only
                            </Button>
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  ))
                )}
              </div>
            )}

{selectedTab === "threads" && (
              <div className="space-y-3">
                {filteredThreads.length === 0 ? (
                  <div className="text-center py-8 text-gray-400">No threads found</div>
                ) : (
                  filteredThreads.map((thread) => (
                    <Card key={thread.id} className="bg-gray-800/30 border-gray-700">
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between">
                          <div className="flex-1">
                            <div className="flex items-center space-x-2 mb-2">
                              <Badge className="bg-blue-600/20 text-blue-300">{thread.category}</Badge>
                              <div className="flex items-center space-x-4 text-xs text-gray-400">
                                <div className="flex items-center space-x-1">
                                  <Eye className="w-3 h-3" />
                                  <span>{thread.views}</span>
                                </div>
                                <div className="flex items-center space-x-1">
                                  <MessageSquare className="w-3 h-3" />
                                  <span>{thread.replies}</span>
                                </div>
                              </div>
                            </div>
                            <h4 className="text-white font-medium mb-1">{thread.title}</h4>
                            <p className="text-gray-300 text-sm mb-2 line-clamp-2">{thread.content}</p>
                            <div className="flex items-center space-x-4 text-xs text-gray-400">
                              <div className="flex items-center space-x-1">
                                <User className="w-3 h-3" />
                                <span>{thread.author}</span>
                              </div>
                              <div className="flex items-center space-x-1">
                                <Clock className="w-3 h-3" />
                                <span>{formatDate(thread.createdAt)}</span>
                              </div>
                            </div>
                          </div>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => deleteThread(thread.id)}
                            className="text-red-400 hover:text-red-300 hover:bg-red-900/20"
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>
                      </CardContent>
                    </Card>
                  ))
                )}
              </div>
            )}

{selectedTab === "replies" && (
              <div className="space-y-3">
                {filteredReplies.length === 0 ? (
                  <div className="text-center py-8 text-gray-400">No replies found</div>
                ) : (
                  filteredReplies.map((reply) => (
                    <Card key={reply.id} className="bg-gray-800/30 border-gray-700">
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between">
                          <div className="flex-1">
                            <p className="text-gray-300 text-sm mb-2 line-clamp-3">{reply.content}</p>
                            <div className="flex items-center space-x-4 text-xs text-gray-400">
                              <div className="flex items-center space-x-1">
                                <User className="w-3 h-3" />
                                <span>{reply.author}</span>
                              </div>
                              <div className="flex items-center space-x-1">
                                <Clock className="w-3 h-3" />
                                <span>{formatDate(reply.createdAt)}</span>
                              </div>
                              {reply.replyTo && (
                                <Badge className="bg-purple-600/20 text-purple-300 text-xs">Reply to message</Badge>
                              )}
                            </div>
                          </div>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => deleteReply(reply.id)}
                            className="text-red-400 hover:text-red-300 hover:bg-red-900/20"
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>
                      </CardContent>
                    </Card>
                  ))
                )}
              </div>
            )}

{selectedTab === "users" && (
              <div className="space-y-6">
                {/* Ban User Form */}
                <Card className="bg-gray-800/30 border-gray-700">
                  <CardHeader>
                    <CardTitle className="text-red-400 flex items-center space-x-2">
                      <Ban className="w-5 h-5" />
                      <span>Ban User</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <Input
                      value={banUsername}
                      onChange={(e) => setBanUsername(e.target.value)}
                      placeholder="Username to ban..."
                      className="bg-gray-800 border-gray-600 text-white"
                    />
                    <Textarea
                      value={banReason}
                      onChange={(e) => setBanReason(e.target.value)}
                      placeholder="Reason for ban..."
                      className="bg-gray-800 border-gray-600 text-white"
                    />
                    <Button
                      onClick={banUser}
                      disabled={!banUsername.trim() || !banReason.trim()}
                      className="bg-red-600 hover:bg-red-700 w-full"
                    >
                      <Ban className="w-4 h-4 mr-2" />
                      Ban User
                    </Button>
                  </CardContent>
                </Card>

{/* Mute User Form */}
                <Card className="bg-gray-800/30 border-gray-700">
                  <CardHeader>
                    <CardTitle className="text-orange-400 flex items-center space-x-2">
                      <VolumeX className="w-5 h-5" />
                      <span>Mute User</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <Input
                      value={muteUsername}
                      onChange={(e) => setMuteUsername(e.target.value)}
                      placeholder="Username to mute..."
                      className="bg-gray-800 border-gray-600 text-white"
                    />
                    <select
                      value={muteType}
                      onChange={(e) => setMuteType(e.target.value as any)}
                      className="w-full bg-gray-800 border border-gray-600 rounded-md px-3 py-2 text-white"
                    >
                      <option value="posting">Posting</option>
                      <option value="replying">Replying</option>
                      <option value="reporting">Reporting</option>
                      <option value="all">All Actions</option>
                    </select>
                    <Input
                      type="number"
                      value={muteDuration}
                      onChange={(e) => setMuteDuration(e.target.value)}
                      placeholder="Duration in hours..."
                      className="bg-gray-800 border-gray-600 text-white"
                      min="1"
                    />
                    <Textarea
                      value={muteReason}
                      onChange={(e) => setMuteReason(e.target.value)}
                      placeholder="Reason for mute..."
                      className="bg-gray-800 border-gray-600 text-white"
                    />
                    <Button
                      onClick={muteUser}
                      disabled={!muteUsername.trim() || !muteReason.trim() || !muteDuration.trim()}
                      className="bg-orange-600 hover:bg-orange-700 w-full"
                    >
                      <VolumeX className="w-4 h-4 mr-2" />
                      Mute User
                    </Button>
                  </CardContent>
                </Card>

{/* Warn User Form */}
                <Card className="bg-gray-800/30 border-gray-700">
                  <CardHeader>
                    <CardTitle className="text-yellow-400 flex items-center space-x-2">
                      <AlertTriangle className="w-5 h-5" />
                      <span>Warn User</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <Input
                      value={warnUsername}
                      onChange={(e) => setWarnUsername(e.target.value)}
                      placeholder="Username to warn..."
                      className="bg-gray-800 border-gray-600 text-white"
                    />
                    <Textarea
                      value={warnReason}
                      onChange={(e) => setWarnReason(e.target.value)}
                      placeholder="Reason for warning..."
                      className="bg-gray-800 border-gray-600 text-white"
                    />
                    <Button
                      onClick={warnUser}
                      disabled={!warnUsername.trim() || !warnReason.trim()}
                      className="bg-yellow-600 hover:bg-yellow-700 w-full"
                    >
                      <AlertTriangle className="w-4 h-4 mr-2" />
                      Warn User
                    </Button>
                  </CardContent>
                </Card>

{/* Banned Users List */}
                <div>
                  <h3 className="text-lg font-semibold text-white mb-4 flex items-center space-x-2">
                    <UserX className="w-5 h-5" />
                    <span>Banned Users ({bannedUsers.length})</span>
                  </h3>
                  {bannedUsers.length === 0 ? (
                    <div className="text-center py-8 text-gray-400">No banned users</div>
                  ) : (
                    <div className="space-y-3">
                      {bannedUsers.map((bannedUser) => (
                        <Card key={bannedUser.username} className="bg-gray-800/30 border-gray-700">
                          <CardContent className="p-4">
                            <div className="flex items-start justify-between">
                              <div className="flex-1">
                                <h4 className="text-white font-medium mb-1">{bannedUser.username}</h4>
                                <p className="text-gray-300 text-sm mb-2">{bannedUser.reason}</p>
                                <div className="flex items-center space-x-4 text-xs text-gray-400">
                                  <span>Banned by {bannedUser.bannedBy}</span>
                                  <span>{formatDate(bannedUser.bannedAt)}</span>
                                </div>
                              </div>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => unbanUser(bannedUser.username)}
                                className="text-green-400 hover:text-green-300 hover:bg-green-900/20"
                              >
                                Unban
                              </Button>
                            </div>
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  )}
                </div>

{/* Active Mutes List */}
                <div>
                  <h3 className="text-lg font-semibold text-white mb-4 flex items-center space-x-2">
                    <VolumeX className="w-5 h-5" />
                    <span>Active Mutes ({userMutes.filter((m) => new Date(m.expiresAt) > new Date()).length})</span>
                  </h3>
                  {userMutes.filter((m) => new Date(m.expiresAt) > new Date()).length === 0 ? (
                    <div className="text-center py-8 text-gray-400">No active mutes</div>
                  ) : (
                    <div className="space-y-3">
                      {userMutes
                        .filter((m) => new Date(m.expiresAt) > new Date())
                        .map((mute) => (
                          <Card key={mute.id} className="bg-gray-800/30 border-gray-700">
                            <CardContent className="p-4">
                              <div className="flex items-start justify-between">
                                <div className="flex-1">
                                  <div className="flex items-center space-x-2 mb-1">
                                    <h4 className="text-white font-medium">{mute.username}</h4>
                                    <Badge className="bg-orange-600/20 text-orange-300">{mute.type}</Badge>
                                  </div>
                                  <p className="text-gray-300 text-sm mb-2">{mute.reason}</p>
                                  <div className="flex items-center space-x-4 text-xs text-gray-400">
                                    <span>Muted by {mute.mutedBy}</span>
                                    <span>Expires: {formatDate(mute.expiresAt)}</span>
                                  </div>
                                </div>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => unmuteUser(mute.id)}
                                  className="text-green-400 hover:text-green-300 hover:bg-green-900/20"
                                >
                                  Unmute
                                </Button>
                              </div>
                            </CardContent>
                          </Card>
                        ))}
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="lib/user-system.ts"
// Enhanced user system with profiles, friends, etc.
import { CryptoUtils } from "./crypto"

export interface UserProfile {
  username: string
  email?: string
  bio?: string
  avatar?: string
  joinDate: string
  lastSeen: string
  reputation: number
  postCount: number
  badges: string[]
  preferences: UserPreferences
  friends: string[]
  friendRequests: {
    sent: string[]
    received: string[]
  }
  blockedUsers: string[]
  isOnline: boolean
  status: "online" | "away" | "busy" | "invisible"
  customStatus?: string
}

export interface Notification {
  id: string
  userId: string
  type: "mention" | "reply" | "friend_request" | "message" | "system"
  title: string
  content: string
  link?: string
  read: boolean
  createdAt: string
  data?: any
}

export interface DirectMessage {
  id: string
  conversationId: string
  senderId: string
  receiverId: string
  content: string
  files?: any[]
  createdAt: string
  editedAt?: string
  deleted: boolean
  reactions: { emoji: string; users: string[] }[]
}

export interface Conversation {
  id: string
  participants: string[]
  lastMessage?: DirectMessage
  lastActivity: string
  unreadCount: { [userId: string]: number }
}

export class UserSystem {
  static async getCurrentUser(): Promise<UserProfile | null> {
    try {
      const savedEncryptedUser = localStorage.getItem("prism-current-user-encrypted")
      if (!savedEncryptedUser) return null

const encryptedData = JSON.parse(savedEncryptedUser)
      const masterKey = CryptoUtils.getMasterKey()
      const decryptedUserData = await CryptoUtils.decryptData(encryptedData.encrypted, masterKey, encryptedData.iv)
      return JSON.parse(decryptedUserData)
    } catch (error) {
      console.error("Failed to get current user:", error)
      return null
    }
  }

static async saveCurrentUser(user: UserProfile): Promise<void> {
    try {
      const masterKey = CryptoUtils.getMasterKey()
      const encryptedUser = await CryptoUtils.encryptData(JSON.stringify(user), masterKey)
      localStorage.setItem("prism-current-user-encrypted", JSON.stringify(encryptedUser))
    } catch (error) {
      console.error("Failed to save current user:", error)
    }
  }

static getAllUsers(): UserProfile[] {
    try {
      const users = localStorage.getItem("prism-all-users")
      return users ? JSON.parse(users) : []
    } catch (error) {
      console.error("Failed to get all users:", error)
      return []
    }
  }

static saveAllUsers(users: UserProfile[]): void {
    try {
      localStorage.setItem("prism-all-users", JSON.stringify(users))
    } catch (error) {
      console.error("Failed to save all users:", error)
    }
  }

static getUserByUsername(username: string): UserProfile | null {
    const users = this.getAllUsers()
    return users.find((u) => u.username.toLowerCase() === username.toLowerCase()) || null
  }

static updateUser(updatedUser: UserProfile): void {
    const users = this.getAllUsers()
    const index = users.findIndex((u) => u.username === updatedUser.username)
    if (index !== -1) {
      users[index] = updatedUser
      this.saveAllUsers(users)
    }
  }

static sendFriendRequest(fromUser: string, toUser: string): boolean {
    const users = this.getAllUsers()
    const fromUserProfile = users.find((u) => u.username === fromUser)
    const toUserProfile = users.find((u) => u.username === toUser)

if (!fromUserProfile || !toUserProfile) return false
    if (fromUserProfile.friends.includes(toUser)) return false
    if (fromUserProfile.friendRequests.sent.includes(toUser)) return false

fromUserProfile.friendRequests.sent.push(toUser)
    toUserProfile.friendRequests.received.push(fromUser)

this.saveAllUsers(users)
    this.addNotification(toUser, {
      type: "friend_request",
      title: "New Friend Request",
      content: `${fromUser} sent you a friend request`,
      data: { fromUser },
    })

return true
  }

static acceptFriendRequest(user: string, requester: string): boolean {
    const users = this.getAllUsers()
    const userProfile = users.find((u) => u.username === user)
    const requesterProfile = users.find((u) => u.username === requester)

if (!userProfile || !requesterProfile) return false

// Remove from requests
    userProfile.friendRequests.received = userProfile.friendRequests.received.filter((u) => u !== requester)
    requesterProfile.friendRequests.sent = requesterProfile.friendRequests.sent.filter((u) => u !== user)

// Add as friends
    userProfile.friends.push(requester)
    requesterProfile.friends.push(user)

this.saveAllUsers(users)
    this.addNotification(requester, {
      type: "system",
      title: "Friend Request Accepted",
      content: `${user} accepted your friend request`,
    })

return true
  }

static addNotification(
    username: string,
    notification: Omit<Notification, "id" | "userId" | "read" | "createdAt">,
  ): void {
    const notifications = this.getNotifications(username)
    const newNotification: Notification = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      userId: username,
      read: false,
      createdAt: new Date().toISOString(),
      ...notification,
    }

notifications.unshift(newNotification)

// Keep only last 100 notifications
    if (notifications.length > 100) {
      notifications.splice(100)
    }

localStorage.setItem(`prism-notifications-${username}`, JSON.stringify(notifications))
  }

static getNotifications(username: string): Notification[] {
    try {
      const notifications = localStorage.getItem(`prism-notifications-${username}`)
      return notifications ? JSON.parse(notifications) : []
    } catch (error) {
      return []
    }
  }

static markNotificationAsRead(username: string, notificationId: string): void {
    const notifications = this.getNotifications(username)
    const notification = notifications.find((n) => n.id === notificationId)
    if (notification) {
      notification.read = true
      localStorage.setItem(`prism-notifications-${username}`, JSON.stringify(notifications))
    }
  }

static getUnreadNotificationCount(username: string): number {
    const notifications = this.getNotifications(username)
    return notifications.filter((n) => !n.read).length
  }
}
[V0_FILE]typescriptreact:file="components/user-profile-modal.tsx"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import {
  User,
  Calendar,
  MessageSquare,
  Trophy,
  UserPlus,
  UserMinus,
  MessageCircle,
  Shield,
  Star,
  Edit,
  Save,
  X,
  Camera,
  Users,
  Activity,
} from "lucide-react"
import Image from "next/image"
import { UserSystem, type UserProfile } from "@/lib/user-system"

interface UserProfileModalProps {
  isOpen: boolean
  onClose: () => void
  username: string
  currentUser: UserProfile | null
  onUserUpdate?: (user: UserProfile) => void
}

export function UserProfileModal({ isOpen, onClose, username, currentUser, onUserUpdate }: UserProfileModalProps) {
  const [profile, setProfile] = useState<UserProfile | null>(null)
  const [isEditing, setIsEditing] = useState(false)
  const [editForm, setEditForm] = useState({
    bio: "",
    customStatus: "",
    avatar: "",
  })
  const [activeTab, setActiveTab] = useState<"profile" | "activity" | "friends">("profile")

const isOwnProfile = currentUser?.username === username
  const isFriend = currentUser?.friends.includes(username) || false
  const hasSentRequest = currentUser?.friendRequests.sent.includes(username) || false
  const hasReceivedRequest = currentUser?.friendRequests.received.includes(username) || false

useEffect(() => {
    if (isOpen) {
      const userProfile = UserSystem.getUserByUsername(username)
      setProfile(userProfile)
      if (userProfile) {
        setEditForm({
          bio: userProfile.bio || "",
          customStatus: userProfile.customStatus || "",
          avatar: userProfile.avatar || "",
        })
      }
    }
  }, [isOpen, username])

const handleSaveProfile = () => {
    if (!profile || !currentUser) return

const updatedProfile = {
      ...profile,
      bio: editForm.bio,
      customStatus: editForm.customStatus,
      avatar: editForm.avatar,
    }

setProfile(updatedProfile)
    UserSystem.updateUser(updatedProfile)

if (isOwnProfile) {
      UserSystem.saveCurrentUser(updatedProfile)
      onUserUpdate?.(updatedProfile)
    }

setIsEditing(false)
  }

const handleFriendAction = () => {
    if (!currentUser || !profile) return

if (isFriend) {
      // Remove friend
      const updatedCurrentUser = {
        ...currentUser,
        friends: currentUser.friends.filter((f) => f !== username),
      }
      const updatedProfile = {
        ...profile,
        friends: profile.friends.filter((f) => f !== currentUser.username),
      }

UserSystem.updateUser(updatedCurrentUser)
      UserSystem.updateUser(updatedProfile)
      UserSystem.saveCurrentUser(updatedCurrentUser)
      setProfile(updatedProfile)
      onUserUpdate?.(updatedCurrentUser)
    } else if (hasReceivedRequest) {
      // Accept friend request
      UserSystem.acceptFriendRequest(currentUser.username, username)
      const updatedCurrentUser = UserSystem.getUserByUsername(currentUser.username)
      const updatedProfile = UserSystem.getUserByUsername(username)
      if (updatedCurrentUser && updatedProfile) {
        UserSystem.saveCurrentUser(updatedCurrentUser)
        setProfile(updatedProfile)
        onUserUpdate?.(updatedCurrentUser)
      }
    } else if (!hasSentRequest) {
      // Send friend request
      UserSystem.sendFriendRequest(currentUser.username, username)
      const updatedCurrentUser = UserSystem.getUserByUsername(currentUser.username)
      if (updatedCurrentUser) {
        UserSystem.saveCurrentUser(updatedCurrentUser)
        onUserUpdate?.(updatedCurrentUser)
      }
    }
  }

const getBadges = (user: UserProfile) => {
    const badges = []

if (user.username === "zavi") {
      badges.push({ name: "Administrator", color: "bg-red-600/20 text-red-300", icon: Shield })
    }

if (user.reputation >= 1000) {
      badges.push({ name: "Legendary", color: "bg-yellow-600/20 text-yellow-300", icon: Trophy })
    } else if (user.reputation >= 500) {
      badges.push({ name: "Expert", color: "bg-purple-600/20 text-purple-300", icon: Star })
    } else if (user.reputation >= 100) {
      badges.push({ name: "Veteran", color: "bg-blue-600/20 text-blue-300", icon: User })
    }

if (user.postCount >= 100) {
      badges.push({ name: "Active Member", color: "bg-green-600/20 text-green-300", icon: MessageSquare })
    }

return badges
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "online":
        return "bg-green-500"
      case "away":
        return "bg-yellow-500"
      case "busy":
        return "bg-red-500"
      case "invisible":
        return "bg-gray-500"
      default:
        return "bg-gray-500"
    }
  }

if (!profile) {
    return (
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-2xl">
          <div className="text-center py-8">
            <p className="text-gray-400">User not found</p>
          </div>
        </DialogContent>
      </Dialog>
    )
  }

const badges = getBadges(profile)

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-4xl max-h-[90vh] overflow-hidden">
        <DialogHeader>
          <DialogTitle className="text-white flex items-center space-x-2">
            <User className="w-5 h-5" />
            <span>{profile.username}'s Profile</span>
          </DialogTitle>
        </DialogHeader>

<div className="space-y-6">
          {/* Profile Header */}
          <div className="flex items-start space-x-6">
            <div className="relative">
              <div className="w-24 h-24 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-2xl font-bold text-white overflow-hidden">
                {profile.avatar ? (
                  <Image
                    src={profile.avatar || "/placeholder.svg"}
                    alt={profile.username}
                    width={96}
                    height={96}
                    className="w-full h-full object-cover"
                  />
                ) : (
                  profile.username.charAt(0).toUpperCase()
                )}
              </div>
              <div
                className={`absolute bottom-1 right-1 w-6 h-6 rounded-full border-2 border-gray-900 ${getStatusColor(profile.status)}`}
              ></div>
              {isOwnProfile && isEditing && (
                <Button
                  size="sm"
                  className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-purple-600 hover:bg-purple-700 p-1 h-auto"
                >
                  <Camera className="w-4 h-4" />
                </Button>
              )}
            </div>

<div className="flex-1">
              <div className="flex items-center space-x-3 mb-2">
                <h2 className="text-2xl font-bold text-white">{profile.username}</h2>
                <div className="flex items-center space-x-1">
                  {badges.map((badge, index) => {
                    const IconComponent = badge.icon
                    return (
                      <Badge key={index} className={badge.color}>
                        <IconComponent className="w-3 h-3 mr-1" />
                        {badge.name}
                      </Badge>
                    )
                  })}
                </div>
              </div>

{profile.customStatus && <p className="text-gray-300 mb-2 italic">"{profile.customStatus}"</p>}

<div className="grid grid-cols-4 gap-4 mb-4">
                <div className="text-center">
                  <div className="text-xl font-bold text-purple-400">{profile.reputation}</div>
                  <div className="text-xs text-gray-400">Reputation</div>
                </div>
                <div className="text-center">
                  <div className="text-xl font-bold text-blue-400">{profile.postCount}</div>
                  <div className="text-xs text-gray-400">Posts</div>
                </div>
                <div className="text-center">
                  <div className="text-xl font-bold text-green-400">{profile.friends.length}</div>
                  <div className="text-xs text-gray-400">Friends</div>
                </div>
                <div className="text-center">
                  <div className="text-xl font-bold text-orange-400">
                    {Math.floor((Date.now() - new Date(profile.joinDate).getTime()) / (1000 * 60 * 60 * 24))}
                  </div>
                  <div className="text-xs text-gray-400">Days</div>
                </div>
              </div>

<div className="flex items-center space-x-2">
                {isOwnProfile ? (
                  <Button
                    onClick={() => (isEditing ? handleSaveProfile() : setIsEditing(true))}
                    className="bg-purple-600 hover:bg-purple-700"
                  >
                    {isEditing ? <Save className="w-4 h-4 mr-2" /> : <Edit className="w-4 h-4 mr-2" />}
                    {isEditing ? "Save Profile" : "Edit Profile"}
                  </Button>
                ) : currentUser ? (
                  <>
                    <Button
                      onClick={handleFriendAction}
                      className={
                        isFriend
                          ? "bg-red-600 hover:bg-red-700"
                          : hasReceivedRequest
                            ? "bg-green-600 hover:bg-green-700"
                            : "bg-blue-600 hover:bg-blue-700"
                      }
                    >
                      {isFriend ? (
                        <>
                          <UserMinus className="w-4 h-4 mr-2" />
                          Remove Friend
                        </>
                      ) : hasReceivedRequest ? (
                        <>
                          <UserPlus className="w-4 h-4 mr-2" />
                          Accept Request
                        </>
                      ) : hasSentRequest ? (
                        <>
                          <UserPlus className="w-4 h-4 mr-2" />
                          Request Sent
                        </>
                      ) : (
                        <>
                          <UserPlus className="w-4 h-4 mr-2" />
                          Add Friend
                        </>
                      )}
                    </Button>
                    <Button
                      variant="outline"
                      className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
                    >
                      <MessageCircle className="w-4 h-4 mr-2" />
                      Message
                    </Button>
                  </>
                ) : null}

{isEditing && (
                  <Button
                    variant="outline"
                    onClick={() => setIsEditing(false)}
                    className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
                  >
                    <X className="w-4 h-4 mr-2" />
                    Cancel
                  </Button>
                )}
              </div>
            </div>
          </div>

{/* Tabs */}
          <div className="flex space-x-2 border-b border-gray-700">
            <Button
              variant={activeTab === "profile" ? "default" : "ghost"}
              onClick={() => setActiveTab("profile")}
              className={
                activeTab === "profile" ? "bg-purple-600 hover:bg-purple-700" : "text-gray-400 hover:text-white"
              }
            >
              <User className="w-4 h-4 mr-2" />
              Profile
            </Button>
            <Button
              variant={activeTab === "activity" ? "default" : "ghost"}
              onClick={() => setActiveTab("activity")}
              className={
                activeTab === "activity" ? "bg-purple-600 hover:bg-purple-700" : "text-gray-400 hover:text-white"
              }
            >
              <Activity className="w-4 h-4 mr-2" />
              Activity
            </Button>
            <Button
              variant={activeTab === "friends" ? "default" : "ghost"}
              onClick={() => setActiveTab("friends")}
              className={
                activeTab === "friends" ? "bg-purple-600 hover:bg-purple-700" : "text-gray-400 hover:text-white"
              }
            >
              <Users className="w-4 h-4 mr-2" />
              Friends ({profile.friends.length})
            </Button>
          </div>

{/* Tab Content */}
          <div className="max-h-96 overflow-y-auto">
            {activeTab === "profile" && (
              <div className="space-y-4">
                <div>
                  <label className="text-sm font-medium text-gray-300 mb-2 block">Bio</label>
                  {isEditing ? (
                    <Textarea
                      value={editForm.bio}
                      onChange={(e) => setEditForm((prev) => ({ ...prev, bio: e.target.value }))}
                      placeholder="Tell us about yourself..."
                      className="bg-gray-800 border-gray-600 text-white"
                      maxLength={500}
                    />
                  ) : (
                    <div className="bg-gray-800/50 rounded-lg p-4 min-h-24">
                      <p className="text-gray-300">{profile.bio || "No bio yet."}</p>
                    </div>
                  )}
                </div>

<div>
                  <label className="text-sm font-medium text-gray-300 mb-2 block">Custom Status</label>
                  {isEditing ? (
                    <Input
                      value={editForm.customStatus}
                      onChange={(e) => setEditForm((prev) => ({ ...prev, customStatus: e.target.value }))}
                      placeholder="What's on your mind?"
                      className="bg-gray-800 border-gray-600 text-white"
                      maxLength={100}
                    />
                  ) : (
                    <div className="bg-gray-800/50 rounded-lg p-3">
                      <p className="text-gray-300">{profile.customStatus || "No status set."}</p>
                    </div>
                  )}
                </div>

<div className="grid grid-cols-2 gap-4">
                  <Card className="bg-gray-800/50 border-gray-700">
                    <CardContent className="p-4">
                      <div className="flex items-center space-x-2 mb-2">
                        <Calendar className="w-4 h-4 text-blue-400" />
                        <span className="text-sm font-medium text-gray-300">Joined</span>
                      </div>
                      <p className="text-white">{formatDate(profile.joinDate)}</p>
                    </CardContent>
                  </Card>

<Card className="bg-gray-800/50 border-gray-700">
                    <CardContent className="p-4">
                      <div className="flex items-center space-x-2 mb-2">
                        <Activity className="w-4 h-4 text-green-400" />
                        <span className="text-sm font-medium text-gray-300">Last Seen</span>
                      </div>
                      <p className="text-white">{formatDate(profile.lastSeen)}</p>
                    </CardContent>
                  </Card>
                </div>
              </div>
            )}

{activeTab === "activity" && (
              <div className="space-y-4">
                <Card className="bg-gray-800/50 border-gray-700">
                  <CardContent className="p-4 text-center">
                    <Activity className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                    <p className="text-gray-400">Activity feed coming soon!</p>
                  </CardContent>
                </Card>
              </div>
            )}

{activeTab === "friends" && (
              <div className="space-y-4">
                {profile.friends.length === 0 ? (
                  <Card className="bg-gray-800/50 border-gray-700">
                    <CardContent className="p-4 text-center">
                      <Users className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                      <p className="text-gray-400">No friends yet.</p>
                    </CardContent>
                  </Card>
                ) : (
                  <div className="grid grid-cols-2 gap-4">
                    {profile.friends.map((friendUsername) => {
                      const friend = UserSystem.getUserByUsername(friendUsername)
                      if (!friend) return null

return (
                        <Card
                          key={friendUsername}
                          className="bg-gray-800/50 border-gray-700 hover:bg-gray-800/70 transition-colors cursor-pointer"
                        >
                          <CardContent className="p-4">
                            <div className="flex items-center space-x-3">
                              <div className="relative">
                                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-sm font-bold text-white overflow-hidden">
                                  {friend.avatar ? (
                                    <Image
                                      src={friend.avatar || "/placeholder.svg"}
                                      alt={friend.username}
                                      width={40}
                                      height={40}
                                      className="w-full h-full object-cover"
                                    />
                                  ) : (
                                    friend.username.charAt(0).toUpperCase()
                                  )}
                                </div>
                                <div
                                  className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-gray-900 ${getStatusColor(friend.status)}`}
                                ></div>
                              </div>
                              <div className="flex-1 min-w-0">
                                <p className="text-white font-medium truncate">{friend.username}</p>
                                <p className="text-xs text-gray-400">{friend.status}</p>
                              </div>
                            </div>
                          </CardContent>
                        </Card>
                      )
                    })}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/notifications-panel.tsx"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Bell, BellOff, CheckCheck, UserPlus, MessageSquare, AtSign, Settings, Trash2, Eye } from "lucide-react"
import { UserSystem, type Notification, type UserProfile } from "@/lib/user-system"

interface NotificationsPanelProps {
  isOpen: boolean
  onClose: () => void
  currentUser: UserProfile | null
}

export function NotificationsPanel({ isOpen, onClose, currentUser }: NotificationsPanelProps) {
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [filter, setFilter] = useState<"all" | "unread">("all")

useEffect(() => {
    if (isOpen && currentUser) {
      loadNotifications()
    }
  }, [isOpen, currentUser])

const loadNotifications = () => {
    if (!currentUser) return
    const userNotifications = UserSystem.getNotifications(currentUser.username)
    setNotifications(userNotifications)
  }

const markAsRead = (notificationId: string) => {
    if (!currentUser) return
    UserSystem.markNotificationAsRead(currentUser.username, notificationId)
    loadNotifications()
  }

const markAllAsRead = () => {
    if (!currentUser) return
    notifications.forEach((notification) => {
      if (!notification.read) {
        UserSystem.markNotificationAsRead(currentUser.username, notification.id)
      }
    })
    loadNotifications()
  }

const deleteNotification = (notificationId: string) => {
    if (!currentUser) return
    const updatedNotifications = notifications.filter((n) => n.id !== notificationId)
    localStorage.setItem(`prism-notifications-${currentUser.username}`, JSON.stringify(updatedNotifications))
    loadNotifications()
  }

const getNotificationIcon = (type: string) => {
    switch (type) {
      case "friend_request":
        return UserPlus
      case "mention":
        return AtSign
      case "reply":
        return MessageSquare
      case "message":
        return MessageSquare
      default:
        return Bell
    }
  }

const getNotificationColor = (type: string) => {
    switch (type) {
      case "friend_request":
        return "text-blue-400"
      case "mention":
        return "text-yellow-400"
      case "reply":
        return "text-green-400"
      case "message":
        return "text-purple-400"
      default:
        return "text-gray-400"
    }
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60))

if (diffInMinutes < 1) return "Just now"
    if (diffInMinutes < 60) return `${diffInMinutes}m ago`
    if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}h ago`
    if (diffInMinutes < 10080) return `${Math.floor(diffInMinutes / 1440)}d ago`
    return date.toLocaleDateString()
  }

const filteredNotifications = filter === "unread" ? notifications.filter((n) => !n.read) : notifications

const unreadCount = notifications.filter((n) => !n.read).length

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-2xl max-h-[90vh] overflow-hidden">
        <DialogHeader>
          <DialogTitle className="text-white flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <Bell className="w-5 h-5" />
              <span>Notifications</span>
              {unreadCount > 0 && <Badge className="bg-red-600 text-white">{unreadCount}</Badge>}
            </div>
            <div className="flex items-center space-x-2">
              <Button
                variant="ghost"
                size="sm"
                onClick={markAllAsRead}
                disabled={unreadCount === 0}
                className="text-gray-400 hover:text-white"
              >
                <CheckCheck className="w-4 h-4" />
              </Button>
              <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white">
                <Settings className="w-4 h-4" />
              </Button>
            </div>
          </DialogTitle>
        </DialogHeader>

<div className="space-y-4">
          {/* Filter Tabs */}
          <div className="flex space-x-2">
            <Button
              variant={filter === "all" ? "default" : "ghost"}
              size="sm"
              onClick={() => setFilter("all")}
              className={filter === "all" ? "bg-purple-600 hover:bg-purple-700" : "text-gray-400 hover:text-white"}
            >
              All ({notifications.length})
            </Button>
            <Button
              variant={filter === "unread" ? "default" : "ghost"}
              size="sm"
              onClick={() => setFilter("unread")}
              className={filter === "unread" ? "bg-purple-600 hover:bg-purple-700" : "text-gray-400 hover:text-white"}
            >
              Unread ({unreadCount})
            </Button>
          </div>

{/* Notifications List */}
          <div className="max-h-96 overflow-y-auto space-y-3">
            {filteredNotifications.length === 0 ? (
              <Card className="bg-gray-800/50 border-gray-700">
                <CardContent className="p-8 text-center">
                  <BellOff className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-400">
                    {filter === "unread" ? "No unread notifications" : "No notifications yet"}
                  </p>
                </CardContent>
              </Card>
            ) : (
              filteredNotifications.map((notification) => {
                const IconComponent = getNotificationIcon(notification.type)
                const iconColor = getNotificationColor(notification.type)

return (
                  <Card
                    key={notification.id}
                    className={`border-gray-700 hover:bg-gray-800/70 transition-colors cursor-pointer ${
                      notification.read ? "bg-gray-800/30" : "bg-gray-800/50 border-l-4 border-l-purple-500"
                    }`}
                  >
                    <CardContent className="p-4">
                      <div className="flex items-start space-x-3">
                        <IconComponent className={`w-5 h-5 mt-1 ${iconColor}`} />
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center justify-between mb-1">
                            <h4 className="text-white font-medium">{notification.title}</h4>
                            <div className="flex items-center space-x-2">
                              <span className="text-xs text-gray-400">{formatDate(notification.createdAt)}</span>
                              {!notification.read && (
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={(e) => {
                                    e.stopPropagation()
                                    markAsRead(notification.id)
                                  }}
                                  className="text-blue-400 hover:text-blue-300 p-1 h-auto"
                                  title="Mark as read"
                                >
                                  <Eye className="w-3 h-3" />
                                </Button>
                              )}
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={(e) => {
                                  e.stopPropagation()
                                  deleteNotification(notification.id)
                                }}
                                className="text-red-400 hover:text-red-300 p-1 h-auto"
                                title="Delete"
                              >
                                <Trash2 className="w-3 h-3" />
                              </Button>
                            </div>
                          </div>
                          <p className="text-gray-300 text-sm">{notification.content}</p>

{/* Special handling for friend requests */}
                          {notification.type === "friend_request" && notification.data?.fromUser && (
                            <div className="flex items-center space-x-2 mt-3">
                              <Button
                                size="sm"
                                onClick={(e) => {
                                  e.stopPropagation()
                                  if (currentUser) {
                                    UserSystem.acceptFriendRequest(currentUser.username, notification.data.fromUser)
                                    deleteNotification(notification.id)
                                  }
                                }}
                                className="bg-green-600 hover:bg-green-700"
                              >
                                Accept
                              </Button>
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={(e) => {
                                  e.stopPropagation()
                                  deleteNotification(notification.id)
                                }}
                                className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
                              >
                                Decline
                              </Button>
                            </div>
                          )}
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                )
              })
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/direct-messages.tsx"
"use client"

import { useState, useEffect, useRef } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { MessageCircle, Send, Search, Smile, Paperclip, MoreVertical, Phone, Video } from "lucide-react"
import Image from "next/image"
import { UserSystem, type UserProfile, type DirectMessage, type Conversation } from "@/lib/user-system"

interface DirectMessagesProps {
  isOpen: boolean
  onClose: () => void
  currentUser: UserProfile | null
}

export function DirectMessages({ isOpen, onClose, currentUser }: DirectMessagesProps) {
  const [conversations, setConversations] = useState<Conversation[]>([])
  const [selectedConversation, setSelectedConversation] = useState<string | null>(null)
  const [messages, setMessages] = useState<DirectMessage[]>([])
  const [newMessage, setNewMessage] = useState("")
  const [searchTerm, setSearchTerm] = useState("")
  const messagesEndRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (isOpen && currentUser) {
      loadConversations()
    }
  }, [isOpen, currentUser])

useEffect(() => {
    if (selectedConversation) {
      loadMessages(selectedConversation)
    }
  }, [selectedConversation])

useEffect(() => {
    scrollToBottom()
  }, [messages])

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

const loadConversations = () => {
    if (!currentUser) return

try {
      const savedConversations = localStorage.getItem(`prism-conversations-${currentUser.username}`)
      if (savedConversations) {
        setConversations(JSON.parse(savedConversations))
      }
    } catch (error) {
      console.error("Failed to load conversations:", error)
    }
  }

const loadMessages = (conversationId: string) => {
    try {
      const savedMessages = localStorage.getItem(`prism-messages-${conversationId}`)
      if (savedMessages) {
        setMessages(JSON.parse(savedMessages))
      } else {
        setMessages([])
      }
    } catch (error) {
      console.error("Failed to load messages:", error)
      setMessages([])
    }
  }

const sendMessage = () => {
    if (!currentUser || !selectedConversation || !newMessage.trim()) return

const conversation = conversations.find((c) => c.id === selectedConversation)
    if (!conversation) return

const receiverId = conversation.participants.find((p) => p !== currentUser.username)
    if (!receiverId) return

const message: DirectMessage = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      conversationId: selectedConversation,
      senderId: currentUser.username,
      receiverId,
      content: newMessage.trim(),
      createdAt: new Date().toISOString(),
      deleted: false,
      reactions: [],
    }

const updatedMessages = [...messages, message]
    setMessages(updatedMessages)
    localStorage.setItem(`prism-messages-${selectedConversation}`, JSON.stringify(updatedMessages))

// Update conversation
    const updatedConversations = conversations.map((c) =>
      c.id === selectedConversation
        ? {
            ...c,
            lastMessage: message,
            lastActivity: message.createdAt,
            unreadCount: { ...c.unreadCount, [receiverId]: (c.unreadCount[receiverId] || 0) + 1 },
          }
        : c,
    )
    setConversations(updatedConversations)
    localStorage.setItem(`prism-conversations-${currentUser.username}`, JSON.stringify(updatedConversations))

// Add notification for receiver
    UserSystem.addNotification(receiverId, {
      type: "message",
      title: "New Message",
      content: `${currentUser.username}: ${message.content.substring(0, 50)}${message.content.length > 50 ? "..." : ""}`,
      link: `/messages/${selectedConversation}`,
    })

setNewMessage("")
  }

const startNewConversation = (username: string) => {
    if (!currentUser || username === currentUser.username) return

// Check if conversation already exists
    const existingConversation = conversations.find(
      (c) => c.participants.includes(username) && c.participants.includes(currentUser.username),
    )

if (existingConversation) {
      setSelectedConversation(existingConversation.id)
      return
    }

// Create new conversation
    const newConversation: Conversation = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      participants: [currentUser.username, username],
      lastActivity: new Date().toISOString(),
      unreadCount: {},
    }

const updatedConversations = [newConversation, ...conversations]
    setConversations(updatedConversations)
    localStorage.setItem(`prism-conversations-${currentUser.username}`, JSON.stringify(updatedConversations))
    setSelectedConversation(newConversation.id)
  }

const formatMessageTime = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60))

if (diffInMinutes < 1) return "Just now"
    if (diffInMinutes < 60) return `${diffInMinutes}m ago`
    if (diffInMinutes < 1440) return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
    return date.toLocaleDateString()
  }

const getOtherParticipant = (conversation: Conversation) => {
    const otherUsername = conversation.participants.find((p) => p !== currentUser?.username)
    return otherUsername ? UserSystem.getUserByUsername(otherUsername) : null
  }

const filteredFriends =
    currentUser?.friends.filter((friend) => friend.toLowerCase().includes(searchTerm.toLowerCase())) || []

const selectedConversationData = conversations.find((c) => c.id === selectedConversation)
  const otherUser = selectedConversationData ? getOtherParticipant(selectedConversationData) : null

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-6xl max-h-[90vh] overflow-hidden p-0">
        <div className="flex h-[80vh]">
          {/* Conversations Sidebar */}
          <div className="w-80 border-r border-gray-700 flex flex-col">
            <DialogHeader className="p-4 border-b border-gray-700">
              <DialogTitle className="text-white flex items-center space-x-2">
                <MessageCircle className="w-5 h-5" />
                <span>Direct Messages</span>
              </DialogTitle>
            </DialogHeader>

{/* Search */}
            <div className="p-4 border-b border-gray-700">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                <Input
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  placeholder="Search friends..."
                  className="bg-gray-800 border-gray-600 text-white pl-10"
                />
              </div>
            </div>

{/* New Conversation */}
            {searchTerm && (
              <div className="p-4 border-b border-gray-700">
                <h3 className="text-sm font-medium text-gray-300 mb-2">Start New Conversation</h3>
                <div className="space-y-2 max-h-32 overflow-y-auto">
                  {filteredFriends.map((friendUsername) => {
                    const friend = UserSystem.getUserByUsername(friendUsername)
                    if (!friend) return null

return (
                      <div
                        key={friendUsername}
                        onClick={() => {
                          startNewConversation(friendUsername)
                          setSearchTerm("")
                        }}
                        className="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-800 cursor-pointer"
                      >
                        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-sm font-bold text-white overflow-hidden">
                          {friend.avatar ? (
                            <Image
                              src={friend.avatar || "/placeholder.svg"}
                              alt={friend.username}
                              width={32}
                              height={32}
                              className="w-full h-full object-cover"
                            />
                          ) : (
                            friend.username.charAt(0).toUpperCase()
                          )}
                        </div>
                        <span className="text-white text-sm">{friend.username}</span>
                      </div>
                    )
                  })}
                </div>
              </div>
            )}

{/* Conversations List */}
            <div className="flex-1 overflow-y-auto">
              {conversations.length === 0 ? (
                <div className="p-4 text-center">
                  <MessageCircle className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-400 text-sm">No conversations yet</p>
                  <p className="text-gray-500 text-xs mt-1">Start chatting with your friends!</p>
                </div>
              ) : (
                conversations.map((conversation) => {
                  const otherParticipant = getOtherParticipant(conversation)
                  if (!otherParticipant) return null

const unreadCount = conversation.unreadCount[currentUser?.username || ""] || 0
                  const isSelected = selectedConversation === conversation.id

return (
                    <div
                      key={conversation.id}
                      onClick={() => setSelectedConversation(conversation.id)}
                      className={`p-4 border-b border-gray-800 cursor-pointer hover:bg-gray-800/50 transition-colors ${
                        isSelected ? "bg-gray-800/70" : ""
                      }`}
                    >
                      <div className="flex items-center space-x-3">
                        <div className="relative">
                          <div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-sm font-bold text-white overflow-hidden">
                            {otherParticipant.avatar ? (
                              <Image
                                src={otherParticipant.avatar || "/placeholder.svg"}
                                alt={otherParticipant.username}
                                width={48}
                                height={48}
                                className="w-full h-full object-cover"
                              />
                            ) : (
                              otherParticipant.username.charAt(0).toUpperCase()
                            )}
                          </div>
                          {otherParticipant.isOnline && (
                            <div className="absolute bottom-0 right-0 w-4 h-4 bg-green-500 rounded-full border-2 border-gray-900"></div>
                          )}
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center justify-between mb-1">
                            <p className="text-white font-medium truncate">{otherParticipant.username}</p>
                            {conversation.lastMessage && (
                              <span className="text-xs text-gray-400">
                                {formatMessageTime(conversation.lastMessage.createdAt)}
                              </span>
                            )}
                          </div>
                          <div className="flex items-center justify-between">
                            <p className="text-sm text-gray-400 truncate">
                              {conversation.lastMessage
                                ? `${conversation.lastMessage.senderId === currentUser?.username ? "You: " : ""}${conversation.lastMessage.content}`
                                : "Start a conversation"}
                            </p>
                            {unreadCount > 0 && <Badge className="bg-red-600 text-white text-xs">{unreadCount}</Badge>}
                          </div>
                        </div>
                      </div>
                    </div>
                  )
                })
              )}
            </div>
          </div>

{/* Chat Area */}
          <div className="flex-1 flex flex-col">
            {selectedConversation && otherUser ? (
              <>
                {/* Chat Header */}
                <div className="p-4 border-b border-gray-700 flex items-center justify-between">
                  <div className="flex items-center space-x-3">
                    <div className="relative">
                      <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-sm font-bold text-white overflow-hidden">
                        {otherUser.avatar ? (
                          <Image
                            src={otherUser.avatar || "/placeholder.svg"}
                            alt={otherUser.username}
                            width={40}
                            height={40}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          otherUser.username.charAt(0).toUpperCase()
                        )}
                      </div>
                      {otherUser.isOnline && (
                        <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-900"></div>
                      )}
                    </div>
                    <div>
                      <p className="text-white font-medium">{otherUser.username}</p>
                      <p className="text-xs text-gray-400">
                        {otherUser.isOnline ? "Online" : `Last seen ${formatMessageTime(otherUser.lastSeen)}`}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white">
                      <Phone className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white">
                      <Video className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white">
                      <MoreVertical className="w-4 h-4" />
                    </Button>
                  </div>
                </div>

{/* Messages */}
                <div className="flex-1 overflow-y-auto p-4 space-y-4">
                  {messages.length === 0 ? (
                    <div className="text-center py-8">
                      <MessageCircle className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                      <p className="text-gray-400">Start your conversation with {otherUser.username}</p>
                    </div>
                  ) : (
                    messages.map((message, index) => {
                      const isOwnMessage = message.senderId === currentUser?.username
                      const showAvatar = index === 0 || messages[index - 1].senderId !== message.senderId

return (
                        <div key={message.id} className={`flex ${isOwnMessage ? "justify-end" : "justify-start"}`}>
                          <div
                            className={`flex items-end space-x-2 max-w-xs lg:max-w-md ${isOwnMessage ? "flex-row-reverse space-x-reverse" : ""}`}
                          >
                            {!isOwnMessage && showAvatar && (
                              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-xs font-bold text-white overflow-hidden">
                                {otherUser.avatar ? (
                                  <Image
                                    src={otherUser.avatar || "/placeholder.svg"}
                                    alt={otherUser.username}
                                    width={32}
                                    height={32}
                                    className="w-full h-full object-cover"
                                  />
                                ) : (
                                  otherUser.username.charAt(0).toUpperCase()
                                )}
                              </div>
                            )}
                            {!isOwnMessage && !showAvatar && <div className="w-8"></div>}

<div
                              className={`rounded-lg px-4 py-2 ${
                                isOwnMessage ? "bg-purple-600 text-white" : "bg-gray-800 text-gray-100"
                              }`}
                            >
                              <p className="text-sm">{message.content}</p>
                              <p className={`text-xs mt-1 ${isOwnMessage ? "text-purple-200" : "text-gray-400"}`}>
                                {formatMessageTime(message.createdAt)}
                              </p>
                            </div>
                          </div>
                        </div>
                      )
                    })
                  )}
                  <div ref={messagesEndRef} />
                </div>

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Search, MessageSquare, User, Filter, Clock, Eye, MessageCircle } from "lucide-react"
import { UserSystem, type UserProfile } from "@/lib/user-system"

interface Thread {
  id: string
  title: string
  content: string
  author: string
  createdAt: string
  replies: number
  views: number
  category: string
}

interface Reply {
  id: string
  threadId: string
  content: string
  author: string
  createdAt: string
}

interface SearchModalProps {
  isOpen: boolean
  onClose: () => void
  onThreadSelect?: (threadId: string) => void
  onUserSelect?: (username: string) => void
}

export function SearchModal({ isOpen, onClose, onThreadSelect, onUserSelect }: SearchModalProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [filter, setFilter] = useState<SearchFilter>("all")
  const [sortBy, setSortBy] = useState<SortBy>("relevance")
  const [results, setResults] = useState<{
    threads: Thread[]
    replies: Reply[]
    users: UserProfile[]
  }>({
    threads: [],
    replies: [],
    users: [],
  })
  const [isSearching, setIsSearching] = useState(false)

useEffect(() => {
    if (searchTerm.trim()) {
      performSearch()
    } else {
      setResults({ threads: [], replies: [], users: [] })
    }
  }, [searchTerm, filter, sortBy])

const performSearch = async () => {
    setIsSearching(true)

try {
      const threads: Thread[] = JSON.parse(localStorage.getItem("prism-forums-threads") || "[]")
      const replies: Reply[] = JSON.parse(localStorage.getItem("prism-forums-replies") || "[]")
      const users = UserSystem.getAllUsers()

const searchLower = searchTerm.toLowerCase()

// Search threads
      const matchingThreads = threads.filter(
        (thread) =>
          thread.title.toLowerCase().includes(searchLower) ||
          thread.content.toLowerCase().includes(searchLower) ||
          thread.author.toLowerCase().includes(searchLower) ||
          thread.category.toLowerCase().includes(searchLower),
      )

// Search replies
      const matchingReplies = replies.filter(
        (reply) =>
          reply.content.toLowerCase().includes(searchLower) || reply.author.toLowerCase().includes(searchLower),
      )

// Search users
      const matchingUsers = users.filter(
        (user) =>
          user.username.toLowerCase().includes(searchLower) ||
          (user.bio && user.bio.toLowerCase().includes(searchLower)) ||
          (user.customStatus && user.customStatus.toLowerCase().includes(searchLower)),
      )

// Sort results
      const sortedThreads = sortResults(matchingThreads, "threads") as Thread[]
      const sortedReplies = sortResults(matchingReplies, "replies") as Reply[]
      const sortedUsers = sortResults(matchingUsers, "users") as UserProfile[]

setResults({
        threads: sortedThreads,
        replies: sortedReplies,
        users: sortedUsers,
      })
    } catch (error) {
      console.error("Search error:", error)
    } finally {
      setIsSearching(false)
    }
  }

const sortResults = (items: any[], type: string) => {
    switch (sortBy) {
      case "date":
        return items.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
      case "popularity":
        if (type === "threads") {
          return items.sort((a, b) => b.replies + b.views - (a.replies + a.views))
        } else if (type === "users") {
          return items.sort((a, b) => b.reputation - a.reputation)
        }
        return items
      default: // relevance
        return items.sort((a, b) => {
          const aScore = getRelevanceScore(a, searchTerm)
          const bScore = getRelevanceScore(b, searchTerm)
          return bScore - aScore
        })
    }
  }

const getRelevanceScore = (item: any, term: string) => {
    let score = 0
    const termLower = term.toLowerCase()

if (item.title && item.title.toLowerCase().includes(termLower)) score += 10
    if (item.username && item.username.toLowerCase().includes(termLower)) score += 8
    if (item.content && item.content.toLowerCase().includes(termLower)) score += 5
    if (item.author && item.author.toLowerCase().includes(termLower)) score += 3
    if (item.bio && item.bio.toLowerCase().includes(termLower)) score += 2

return score
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
  }

const highlightText = (text: string, term: string) => {
    if (!term) return text
    const regex = new RegExp(`(${term})`, "gi")
    return text.replace(regex, '<mark class="bg-yellow-400 text-black">$1</mark>')
  }

const getTotalResults = () => {
    return results.threads.length + results.replies.length + results.users.length
  }

const getFilteredResults = () => {
    switch (filter) {
      case "threads":
        return { threads: results.threads, replies: [], users: [] }
      case "replies":
        return { threads: [], replies: results.replies, users: [] }
      case "users":
        return { threads: [], replies: [], users: results.users }
      default:
        return results
    }
  }

const filteredResults = getFilteredResults()

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-4xl max-h-[90vh] overflow-hidden">
        <DialogHeader>
          <DialogTitle className="text-white flex items-center space-x-2">
            <Search className="w-5 h-5" />
            <span>Search Forums</span>
          </DialogTitle>
        </DialogHeader>

<div className="space-y-4">
          {/* Search Input */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
            <Input
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Search threads, replies, users..."
              className="bg-gray-800 border-gray-600 text-white pl-10"
              autoFocus
            />
          </div>

{/* Filters and Sort */}
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <Filter className="w-4 h-4 text-gray-400" />
              <div className="flex space-x-1">
                {(["all", "threads", "replies", "users"] as SearchFilter[]).map((filterOption) => (
                  <Button
                    key={filterOption}
                    variant={filter === filterOption ? "default" : "ghost"}
                    size="sm"
                    onClick={() => setFilter(filterOption)}
                    className={
                      filter === filterOption ? "bg-purple-600 hover:bg-purple-700" : "text-gray-400 hover:text-white"
                    }
                  >
                    {filterOption.charAt(0).toUpperCase() + filterOption.slice(1)}
                    {filterOption === "all" && getTotalResults() > 0 && (
                      <Badge className="ml-2 bg-gray-600 text-white">{getTotalResults()}</Badge>
                    )}
                    {filterOption === "threads" && results.threads.length > 0 && (
                      <Badge className="ml-2 bg-gray-600 text-white">{results.threads.length}</Badge>
                    )}
                    {filterOption === "replies" && results.replies.length > 0 && (
                      <Badge className="ml-2 bg-gray-600 text-white">{results.replies.length}</Badge>
                    )}
                    {filterOption === "users" && results.users.length > 0 && (
                      <Badge className="ml-2 bg-gray-600 text-white">{results.users.length}</Badge>
                    )}
                  </Button>
                ))}
              </div>
            </div>

<div className="flex items-center space-x-2">
              <span className="text-sm text-gray-400">Sort by:</span>
              <select
                value={sortBy}
                onChange={(e) => setSortBy(e.target.value as SortBy)}
                className="bg-gray-800 border border-gray-600 rounded px-2 py-1 text-white text-sm"
              >
                <option value="relevance">Relevance</option>
                <option value="date">Date</option>
                <option value="popularity">Popularity</option>
              </select>
            </div>
          </div>

{/* Results */}
          <div className="max-h-96 overflow-y-auto space-y-4">
            {isSearching ? (
              <div className="text-center py-8">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-400 mx-auto mb-4"></div>
                <p className="text-gray-400">Searching...</p>
              </div>
            ) : !searchTerm.trim() ? (
              <div className="text-center py-8">
                <Search className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                <p className="text-gray-400">Start typing to search</p>
                <p className="text-gray-500 text-sm mt-1">Search through threads, replies, and users</p>
              </div>
            ) : getTotalResults() === 0 ? (
              <div className="text-center py-8">
                <Search className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                <p className="text-gray-400">No results found</p>
                <p className="text-gray-500 text-sm mt-1">Try different keywords or filters</p>
              </div>
            ) : (
              <div className="space-y-4">
                {/* Thread Results */}
                {filteredResults.threads.length > 0 && (
                  <div>
                    <h3 className="text-lg font-semibold text-white mb-3 flex items-center space-x-2">
                      <MessageSquare className="w-5 h-5" />
                      <span>Threads ({filteredResults.threads.length})</span>
                    </h3>
                    <div className="space-y-3">
                      {filteredResults.threads.map((thread) => (
                        <Card
                          key={thread.id}
                          className="bg-gray-800/50 border-gray-700 hover:bg-gray-800/70 transition-colors cursor-pointer"
                          onClick={() => {
                            onThreadSelect?.(thread.id)
                            onClose()
                          }}
                        >
                          <CardContent className="p-4">
                            <div className="flex items-start justify-between mb-2">
                              <div className="flex items-center space-x-2">
                                <Badge className="bg-blue-600/20 text-blue-300">{thread.category}</Badge>
                                <div className="flex items-center space-x-4 text-xs text-gray-400">
                                  <div className="flex items-center space-x-1">
                                    <Eye className="w-3 h-3" />
                                    <span>{thread.views}</span>
                                  </div>
                                  <div className="flex items-center space-x-1">
                                    <MessageCircle className="w-3 h-3" />
                                    <span>{thread.replies}</span>
                                  </div>
                                </div>
                              </div>
                              <div className="flex items-center space-x-2 text-xs text-gray-400">
                                <Clock className="w-3 h-3" />
                                <span>{formatDate(thread.createdAt)}</span>
                              </div>
                            </div>
                            <h4
                              className="text-white font-medium mb-2"
                              dangerouslySetInnerHTML={{ __html: highlightText(thread.title, searchTerm) }}
                            />
                            <p
                              className="text-gray-300 text-sm line-clamp-2 mb-2"
                              dangerouslySetInnerHTML={{
                                __html: highlightText(thread.content.substring(0, 150) + "...", searchTerm),
                              }}
                            />
                            <div className="flex items-center space-x-2 text-xs text-gray-400">
                              <User className="w-3 h-3" />
                              <span>by {thread.author}</span>
                            </div>
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  </div>
                )}

{/* Reply Results */}
                {filteredResults.replies.length > 0 && (
                  <div>
                    <h3 className="text-lg font-semibold text-white mb-3 flex items-center space-x-2">
                      <MessageCircle className="w-5 h-5" />
                      <span>Replies ({filteredResults.replies.length})</span>
                    </h3>
                    <div className="space-y-3">
                      {filteredResults.replies.map((reply) => (
                        <Card
                          key={reply.id}
                          className="bg-gray-800/50 border-gray-700 hover:bg-gray-800/70 transition-colors cursor-pointer"
                          onClick={() => {
                            onThreadSelect?.(reply.threadId)
                            onClose()
                          }}
                        >
                          <CardContent className="p-4">
                            <div className="flex items-center justify-between mb-2">
                              <div className="flex items-center space-x-2 text-xs text-gray-400">
                                <User className="w-3 h-3" />
                                <span>by {reply.author}</span>
                              </div>
                              <div className="flex items-center space-x-2 text-xs text-gray-400">
                                <Clock className="w-3 h-3" />
                                <span>{formatDate(reply.createdAt)}</span>
                              </div>
                            </div>
                            <p
                              className="text-gray-300 text-sm line-clamp-3"
                              dangerouslySetInnerHTML={{ __html: highlightText(reply.content, searchTerm) }}
                            />
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  </div>
                )}

{/* User Results */}
                {filteredResults.users.length > 0 && (
                  <div>
                    <h3 className="text-lg font-semibold text-white mb-3 flex items-center space-x-2">
                      <User className="w-5 h-5" />
                      <span>Users ({filteredResults.users.length})</span>
                    </h3>
                    <div className="space-y-3">
                      {filteredResults.users.map((user) => (
                        <Card
                          key={user.username}
                          className="bg-gray-800/50 border-gray-700 hover:bg-gray-800/70 transition-colors cursor-pointer"
                          onClick={() => {
                            onUserSelect?.(user.username)
                            onClose()
                          }}
                        >
                          <CardContent className="p-4">
                            <div className="flex items-center space-x-3">
                              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-sm font-bold text-white overflow-hidden">
                                {user.avatar ? (
                                  <img
                                    src={user.avatar || "/placeholder.svg"}
                                    alt={user.username}
                                    className="w-full h-full object-cover"
                                  />
                                ) : (
                                  user.username.charAt(0).toUpperCase()
                                )}
                              </div>
                              <div className="flex-1">
                                <h4
                                  className="text-white font-medium mb-1"
                                  dangerouslySetInnerHTML={{ __html: highlightText(user.username, searchTerm) }}
                                />
                                {user.bio && (
                                  <p
                                    className="text-gray-300 text-sm line-clamp-2 mb-2"
                                    dangerouslySetInnerHTML={{ __html: highlightText(user.bio, searchTerm) }}
                                  />
                                )}
                                <div className="flex items-center space-x-4 text-xs text-gray-400">
                                  <span>{user.reputation} reputation</span>
                                  <span>{user.postCount} posts</span>
                                  <span>Joined {formatDate(user.joinDate)}</span>
                                </div>
                              </div>
                            </div>
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/enhanced-auth-modal.tsx"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { User, Lock, AlertTriangle, Eye, EyeOff, Crown, Mail } from "lucide-react"
import { UserSystem, type UserProfile } from "@/lib/user-system"

interface EnhancedAuthModalProps {
  isOpen: boolean
  onClose: () => void
  onSuccess: (user: UserProfile) => void
}

export function EnhancedAuthModal({ isOpen, onClose, onSuccess }: EnhancedAuthModalProps) {
  const [isLogin, setIsLogin] = useState(false)
  const [username, setUsername] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

const weakPasswords = [
    "password",
    "123456",
    "password123",
    "admin",
    "qwerty",
    "letmein",
    "welcome",
    "monkey",
    "1234567890",
    "abc123",
    "password1",
    "123456789",
    "welcome123",
    "admin123",
    "root",
    "toor",
    "pass",
    "test",
    "guest",
    "user",
    "login",
    "roblox",
    "prism",
    "executor",
    "script",
  ]

const initializeAdminAccount = async () => {
    const users = UserSystem.getAllUsers()
    const adminExists = users.some((user) => user.username.toLowerCase() === "zavi")

if (!adminExists) {
      const adminProfile: UserProfile = {
        username: "zavi",
        email: "admin@prism.dev",
        bio: "Administrator of Prism Forums",
        joinDate: new Date().toISOString(),
        lastSeen: new Date().toISOString(),
        reputation: 10000,
        postCount: 0,
        badges: ["Administrator", "Founder"],
        preferences: {
          theme: "dark",
          fontSize: "medium",
          compactMode: false,
          showOnlineStatus: true,
          allowFriendRequests: true,
          allowDirectMessages: true,
          emailNotifications: true,
          mentionNotifications: true,
          soundEnabled: true,
          language: "en",
        },
        friends: [],
        friendRequests: { sent: [], received: [] },
        blockedUsers: [],
        isOnline: true,
        status: "online",
        customStatus: "Building the future of scripting",
      }

const updatedUsers = [...users, adminProfile]
      UserSystem.saveAllUsers(updatedUsers)
    }
  }

const validateUsername = (user: string): string | null => {
    if (user.length < 3) return "Username must be at least 3 characters long"
    if (user.length > 20) return "Username must be 20 characters or less"
    if (!/^[a-zA-Z0-9_-]+$/.test(user)) {
      return "Username can only contain letters, numbers, underscores, and hyphens"
    }

const slurs = ["fuck", "shit", "damn", "bitch", "ass", "nigga", "nigger", "faggot", "retard"]
    const containsSlur = slurs.some((slur) => user.toLowerCase().includes(slur.toLowerCase()))
    if (containsSlur) return "Username contains inappropriate content"

return null
  }

const validateEmail = (email: string): string | null => {
    if (!email) return null // Email is optional
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(email)) return "Please enter a valid email address"
    return null
  }

const validatePassword = (pass: string): string | null => {
    if (pass.length < 8) return "Password must be at least 8 characters long"
    if (pass.length > 128) return "Password must be 128 characters or less"
    if (weakPasswords.includes(pass.toLowerCase())) {
      return "This password is too common. Please choose a stronger password."
    }
    if (pass.toLowerCase().includes(username.toLowerCase()) && username.length > 0) {
      return "Password cannot contain your username"
    }
    if (!/(?=.*[0-9!@#$%^&*])/.test(pass)) {
      return "Password must contain at least one number or special character"
    }
    return null
  }

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

try {
      const usernameError = validateUsername(username)
      if (usernameError) {
        setError(usernameError)
        return
      }

if (!isLogin) {
        const emailError = validateEmail(email)
        if (emailError) {
          setError(emailError)
          return
        }
      }

if (isLogin) {
        // Login logic
        const user = UserSystem.getUserByUsername(username)
        if (!user) {
          setError("Invalid username or password")
          return
        }

// For demo purposes, we'll use a simple password check
        // In production, you'd verify against hashed passwords
        if (username === "zavi" && password === "9wEbHC9>E4a|4R") {
          // Admin login
          const updatedUser = { ...user, isOnline: true, lastSeen: new Date().toISOString() }
          UserSystem.updateUser(updatedUser)
          await UserSystem.saveCurrentUser(updatedUser)
          onSuccess(updatedUser)
          onClose()
          resetForm()
        } else {
          setError("Invalid username or password")
        }
      } else {
        // Registration logic
        const existingUser = UserSystem.getUserByUsername(username)
        if (existingUser) {
          setError("Username is already taken. Please choose a different one.")
          return
        }

if (username.toLowerCase() === "zavi") {
          setError("This username is reserved.")
          return
        }

const passwordError = validatePassword(password)
        if (passwordError) {
          setError(passwordError)
          return
        }

if (password !== confirmPassword) {
          setError("Passwords do not match")
          return
        }

// Create new user profile
        const newUser: UserProfile = {
          username: username.trim(),
          email: email.trim() || undefined,
          joinDate: new Date().toISOString(),
          lastSeen: new Date().toISOString(),
          reputation: 0,
          postCount: 0,
          badges: [],
          preferences: {
            theme: "dark",
            fontSize: "medium",
            compactMode: false,
            showOnlineStatus: true,
            allowFriendRequests: true,
            allowDirectMessages: true,
            emailNotifications: true,
            mentionNotifications: true,
            soundEnabled: true,
            language: "en",
          },
          friends: [],
          friendRequests: { sent: [], received: [] },
          blockedUsers: [],
          isOnline: true,
          status: "online",
        }

const users = UserSystem.getAllUsers()
        const updatedUsers = [...users, newUser]
        UserSystem.saveAllUsers(updatedUsers)
        await UserSystem.saveCurrentUser(newUser)

onSuccess(newUser)
        onClose()
        resetForm()
      }
    } catch (err) {
      console.error("Authentication error:", err)
      setError("An error occurred during authentication. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

const resetForm = () => {
    setUsername("")
    setEmail("")
    setPassword("")
    setConfirmPassword("")
    setError("")
    setShowPassword(false)
  }

const switchMode = () => {
    setIsLogin(!isLogin)
    resetForm()
  }

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

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-md">
        <DialogHeader>
          <DialogTitle className="text-purple-400 text-xl font-bold">
            {isLogin ? "Login to Prism" : "Join Prism Community"}
          </DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4">
          {!isLogin && (
            <Alert className="bg-blue-900/20 border-blue-700">
              <AlertTriangle className="h-4 w-4 text-blue-400" />
              <AlertDescription className="text-blue-300">
                <strong>Welcome!</strong> Create your account to join the Prism community, make friends, and participate
                in discussions.
              </AlertDescription>
            </Alert>
          )}

{!isLogin && (
              <div>
                <label className="text-sm font-medium text-gray-300 mb-2 block">
                  Email <span className="text-gray-500">(optional)</span>
                </label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <Input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="Enter your email..."
                    className="bg-gray-800 border-gray-600 text-white pl-10"
                  />
                </div>
                <p className="text-xs text-gray-400 mt-1">For account recovery and notifications</p>
              </div>
            )}

export interface UserProfile {
  username: string
  email?: string
  bio?: string
  avatar?: string
  joinDate: string
  lastSeen: string
  reputation: number
  postCount: number
  replyCount: number
  badges: string[]
  achievements: Achievement[]
  preferences: UserPreferences
  friends: string[]
  following: string[]
  followers: string[]
  blockedUsers: string[]
  friendRequests: {
    sent: string[]
    received: string[]
  }
  isOnline: boolean
  status: "online" | "away" | "busy" | "invisible"
  customStatus?: string
  level: number
  experience: number
  streak: number
  lastPostDate?: string
  bookmarkedThreads: string[]
  subscribedThreads: string[]
  moderationHistory: ModerationAction[]
  warnings: UserWarning[]
  isModerator: boolean
  isAdmin: boolean
  theme: string
  language: string
  timezone: string
  twoFactorEnabled: boolean
  emailVerified: boolean
  phoneNumber?: string
  location?: string
  website?: string
  socialLinks: SocialLinks
  privacySettings: PrivacySettings
  notificationSettings: NotificationSettings
}

export interface Achievement {
  id: string
  name: string
  description: string
  icon: string
  unlockedAt: string
  category: "posting" | "social" | "moderation" | "special"
}

export interface UserPreferences {
  theme: "dark" | "light" | "auto"
  fontSize: "small" | "medium" | "large"
  compactMode: boolean
  showOnlineStatus: boolean
  allowFriendRequests: boolean
  allowDirectMessages: boolean
  allowFollowing: boolean
  emailNotifications: boolean
  pushNotifications: boolean
  mentionNotifications: boolean
  soundEnabled: boolean
  language: string
  timezone: string
  autoPlayVideos: boolean
  showNSFWContent: boolean
  hideBlockedUsers: boolean
}

export interface SocialLinks {
  discord?: string
  twitter?: string
  github?: string
  youtube?: string
  twitch?: string
  instagram?: string
}

export interface PrivacySettings {
  profileVisibility: "public" | "friends" | "private"
  showEmail: boolean
  showLastSeen: boolean
  showOnlineStatus: boolean
  allowDirectMessages: "everyone" | "friends" | "none"
  allowFriendRequests: boolean
  showActivity: boolean
}

export interface NotificationSettings {
  email: boolean
  push: boolean
  mentions: boolean
  replies: boolean
  friendRequests: boolean
  directMessages: boolean
  threadUpdates: boolean
  systemAnnouncements: boolean
  moderationActions: boolean
}

export interface ModerationAction {
  id: string
  type: "warning" | "mute" | "ban" | "unban" | "delete_post"
  reason: string
  moderator: string
  createdAt: string
  expiresAt?: string
  details?: any
}

export interface UserWarning {
  id: string
  reason: string
  moderator: string
  createdAt: string
  severity: "low" | "medium" | "high"
  acknowledged: boolean
}

export interface Notification {
  id: string
  userId: string
  type: "mention" | "reply" | "friend_request" | "message" | "system" | "achievement" | "warning" | "thread_update"
  title: string
  content: string
  link?: string
  read: boolean
  createdAt: string
  data?: any
  priority: "low" | "medium" | "high"
}

export interface Conversation {
  id: string
  participants: string[]
  lastMessage?: DirectMessage
  lastActivity: string
  unreadCount: { [userId: string]: number }
  isGroup: boolean
  groupName?: string
  groupAvatar?: string
  createdBy?: string
  createdAt: string
}

export interface UserActivity {
  id: string
  userId: string
  type: "post" | "reply" | "like" | "follow" | "achievement" | "join"
  description: string
  targetId?: string
  targetType?: "thread" | "reply" | "user"
  createdAt: string
  visibility: "public" | "friends" | "private"
}

export interface UserSession {
  id: string
  userId: string
  deviceInfo: string
  ipAddress: string
  location?: string
  createdAt: string
  lastActivity: string
  isActive: boolean
}

export class AdvancedUserSystem {
  static async getCurrentUser(): Promise<UserProfile | null> {
    try {
      const savedEncryptedUser = localStorage.getItem("prism-current-user-encrypted")
      if (!savedEncryptedUser) return null

user.lastSeen = new Date().toISOString()
      await this.saveCurrentUser(user)

return user
    } catch (error) {
      console.error("Failed to get current user:", error)
      return null
    }
  }

this.updateUser(user)
    } catch (error) {
      console.error("Failed to save current user:", error)
    }
  }

static getUserByUsername(username: string): UserProfile | null {
    const users = this.getAllUsers()
    return users.find((u) => u.username.toLowerCase() === username.toLowerCase()) || null
  }

static updateUser(updatedUser: UserProfile): void {
    const users = this.getAllUsers()
    const index = users.findIndex((u) => u.username === updatedUser.username)
    if (index !== -1) {
      users[index] = { ...users[index], ...updatedUser }
      this.saveAllUsers(users)
    } else {
      users.push(updatedUser)
      this.saveAllUsers(users)
    }
  }

static addExperience(username: string, amount: number): void {
    const user = this.getUserByUsername(username)
    if (!user) return

user.experience += amount
    const newLevel = Math.floor(user.experience / 100) + 1

if (newLevel > user.level) {
      user.level = newLevel
      this.addNotification(username, {
        type: "achievement",
        title: "Level Up!",
        content: `Congratulations! You've reached level ${newLevel}`,
        priority: "high",
      })
    }

this.updateUser(user)
  }

static unlockAchievement(username: string, achievementId: string): void {
    const user = this.getUserByUsername(username)
    if (!user) return

const achievements = this.getAvailableAchievements()
    const achievement = achievements.find((a) => a.id === achievementId)
    if (!achievement) return

const hasAchievement = user.achievements.some((a) => a.id === achievementId)
    if (hasAchievement) return

const unlockedAchievement: Achievement = {
      ...achievement,
      unlockedAt: new Date().toISOString(),
    }

user.achievements.push(unlockedAchievement)
    this.updateUser(user)

this.addNotification(username, {
      type: "achievement",
      title: "Achievement Unlocked!",
      content: `You've unlocked: ${achievement.name}`,
      priority: "high",
    })
  }

static getAvailableAchievements(): Achievement[] {
    return [
      {
        id: "first_post",
        name: "First Steps",
        description: "Create your first thread",
        icon: "🎯",
        category: "posting",
        unlockedAt: "",
      },
      {
        id: "first_reply",
        name: "Conversationalist",
        description: "Post your first reply",
        icon: "💬",
        category: "posting",
        unlockedAt: "",
      },
      {
        id: "ten_posts",
        name: "Active Member",
        description: "Create 10 threads",
        icon: "📝",
        category: "posting",
        unlockedAt: "",
      },
      {
        id: "hundred_posts",
        name: "Prolific Poster",
        description: "Create 100 threads",
        icon: "🏆",
        category: "posting",
        unlockedAt: "",
      },
      {
        id: "first_friend",
        name: "Social Butterfly",
        description: "Make your first friend",
        icon: "👥",
        category: "social",
        unlockedAt: "",
      },
      {
        id: "popular",
        name: "Popular",
        description: "Get 100 reputation points",
        icon: "⭐",
        category: "social",
        unlockedAt: "",
      },
      {
        id: "week_streak",
        name: "Dedicated",
        description: "Post for 7 days in a row",
        icon: "🔥",
        category: "posting",
        unlockedAt: "",
      },
      {
        id: "helpful",
        name: "Helpful",
        description: "Get 50 upvotes on your posts",
        icon: "🤝",
        category: "social",
        unlockedAt: "",
      },
      {
        id: "early_bird",
        name: "Early Bird",
        description: "One of the first 100 users",
        icon: "🐦",
        category: "special",
        unlockedAt: "",
      },
      {
        id: "moderator",
        name: "Guardian",
        description: "Become a moderator",
        icon: "🛡️",
        category: "moderation",
        unlockedAt: "",
      },
    ]
  }

if (!fromUserProfile || !toUserProfile) return false
    if (fromUserProfile.friends.includes(toUser)) return false
    if (fromUserProfile.friendRequests.sent.includes(toUser)) return false
    if (fromUserProfile.blockedUsers.includes(toUser)) return false
    if (toUserProfile.blockedUsers.includes(fromUser)) return false

fromUserProfile.friendRequests.sent.push(toUser)
    toUserProfile.friendRequests.received.push(fromUser)

return true
  }

if (!userProfile || !requesterProfile) return false

userProfile.friendRequests.received = userProfile.friendRequests.received.filter((u) => u !== requester)
    requesterProfile.friendRequests.sent = requesterProfile.friendRequests.sent.filter((u) => u !== user)

userProfile.friends.push(requester)
    requesterProfile.friends.push(user)

this.saveAllUsers(users)

if (userProfile.friends.length === 1) {
      this.unlockAchievement(user, "first_friend")
    }
    if (requesterProfile.friends.length === 1) {
      this.unlockAchievement(requester, "first_friend")
    }

this.addNotification(requester, {
      type: "system",
      title: "Friend Request Accepted",
      content: `${user} accepted your friend request`,
      priority: "medium",
    })

return true
  }

static removeFriend(user: string, friend: string): boolean {
    const users = this.getAllUsers()
    const userProfile = users.find((u) => u.username === user)
    const friendProfile = users.find((u) => u.username === friend)

if (!userProfile || !friendProfile) return false

userProfile.friends = userProfile.friends.filter((f) => f !== friend)
    friendProfile.friends = friendProfile.friends.filter((f) => f !== user)

this.saveAllUsers(users)
    return true
  }

static followUser(follower: string, following: string): boolean {
    const users = this.getAllUsers()
    const followerProfile = users.find((u) => u.username === follower)
    const followingProfile = users.find((u) => u.username === following)

if (!followerProfile || !followingProfile) return false
    if (followerProfile.following.includes(following)) return false
    if (followerProfile.blockedUsers.includes(following)) return false
    if (followingProfile.blockedUsers.includes(follower)) return false

followerProfile.following.push(following)
    followingProfile.followers.push(follower)

this.saveAllUsers(users)

this.addNotification(following, {
      type: "system",
      title: "New Follower",
      content: `${follower} is now following you`,
      priority: "low",
    })

return true
  }

static unfollowUser(follower: string, following: string): boolean {
    const users = this.getAllUsers()
    const followerProfile = users.find((u) => u.username === follower)
    const followingProfile = users.find((u) => u.username === following)

if (!followerProfile || !followingProfile) return false

followerProfile.following = followerProfile.following.filter((f) => f !== following)
    followingProfile.followers = followingProfile.followers.filter((f) => f !== follower)

this.saveAllUsers(users)
    return true
  }

static blockUser(blocker: string, blocked: string): boolean {
    const users = this.getAllUsers()
    const blockerProfile = users.find((u) => u.username === blocker)
    const blockedProfile = users.find((u) => u.username === blocked)

if (!blockerProfile || !blockedProfile) return false
    if (blockerProfile.blockedUsers.includes(blocked)) return false

blockerProfile.friends = blockerProfile.friends.filter((f) => f !== blocked)
    blockerProfile.following = blockerProfile.following.filter((f) => f !== blocked)
    blockerProfile.followers = blockerProfile.followers.filter((f) => f !== blocked)

blockedProfile.friends = blockedProfile.friends.filter((f) => f !== blocker)
    blockedProfile.following = blockedProfile.following.filter((f) => f !== blocker)
    blockedProfile.followers = blockedProfile.followers.filter((f) => f !== blocker)

blockerProfile.blockedUsers.push(blocked)

this.saveAllUsers(users)
    return true
  }

static unblockUser(blocker: string, blocked: string): boolean {
    const users = this.getAllUsers()
    const blockerProfile = users.find((u) => u.username === blocker)

if (!blockerProfile) return false

blockerProfile.blockedUsers = blockerProfile.blockedUsers.filter((u) => u !== blocked)
    this.saveAllUsers(users)
    return true
  }

notifications.unshift(newNotification)

if (notifications.length > 200) {
      notifications.splice(200)
    }

localStorage.setItem(`prism-notifications-${username}`, JSON.stringify(notifications))
  }

static markAllNotificationsAsRead(username: string): void {
    const notifications = this.getNotifications(username)
    notifications.forEach((n) => (n.read = true))
    localStorage.setItem(`prism-notifications-${username}`, JSON.stringify(notifications))
  }

static getUnreadNotificationCount(username: string): number {
    const notifications = this.getNotifications(username)
    return notifications.filter((n) => !n.read).length
  }

static deleteNotification(username: string, notificationId: string): void {
    const notifications = this.getNotifications(username)
    const filteredNotifications = notifications.filter((n) => n.id !== notificationId)
    localStorage.setItem(`prism-notifications-${username}`, JSON.stringify(filteredNotifications))
  }

static addActivity(userId: string, activity: Omit<UserActivity, "id" | "userId" | "createdAt">): void {
    const activities = this.getUserActivities(userId)
    const newActivity: UserActivity = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      userId,
      createdAt: new Date().toISOString(),
      ...activity,
    }

activities.unshift(newActivity)

if (activities.length > 100) {
      activities.splice(100)
    }

localStorage.setItem(`prism-activities-${userId}`, JSON.stringify(activities))
  }

static getUserActivities(userId: string): UserActivity[] {
    try {
      const activities = localStorage.getItem(`prism-activities-${userId}`)
      return activities ? JSON.parse(activities) : []
    } catch (error) {
      return []
    }
  }

static getFeedActivities(username: string): UserActivity[] {
    const user = this.getUserByUsername(username)
    if (!user) return []

const allActivities: UserActivity[] = []

const followedUsers = [...user.friends, ...user.following, username]

followedUsers.forEach((followedUser) => {
      const activities = this.getUserActivities(followedUser)
      allActivities.push(
        ...activities.filter(
          (a) => a.visibility === "public" || (a.visibility === "friends" && user.friends.includes(a.userId)),
        ),
      )
    })

return allActivities.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
  }

static updateStreak(username: string): void {
    const user = this.getUserByUsername(username)
    if (!user) return

const today = new Date().toDateString()
    const lastPostDate = user.lastPostDate ? new Date(user.lastPostDate).toDateString() : null
    const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000).toDateString()

if (lastPostDate === today) {
      return
    } else if (lastPostDate === yesterday) {
      user.streak += 1
    } else {
      user.streak = 1
    }

user.lastPostDate = new Date().toISOString()

if (user.streak === 7) {
      this.unlockAchievement(username, "week_streak")
    }

this.updateUser(user)
  }

static addReputation(username: string, amount: number, reason: string): void {
    const user = this.getUserByUsername(username)
    if (!user) return

user.reputation += amount
    this.addExperience(username, amount * 2)

if (user.reputation >= 100 && !user.achievements.some((a) => a.id === "popular")) {
      this.unlockAchievement(username, "popular")
    }

this.updateUser(user)

if (amount > 0) {
      this.addNotification(username, {
        type: "system",
        title: "Reputation Gained",
        content: `You gained ${amount} reputation for ${reason}`,
        priority: "low",
      })
    }
  }

static bookmarkThread(username: string, threadId: string): boolean {
    const user = this.getUserByUsername(username)
    if (!user) return false

if (!user.bookmarkedThreads.includes(threadId)) {
      user.bookmarkedThreads.push(threadId)
      this.updateUser(user)
      return true
    }
    return false
  }

static unbookmarkThread(username: string, threadId: string): boolean {
    const user = this.getUserByUsername(username)
    if (!user) return false

const index = user.bookmarkedThreads.indexOf(threadId)
    if (index > -1) {
      user.bookmarkedThreads.splice(index, 1)
      this.updateUser(user)
      return true
    }
    return false
  }

static isThreadBookmarked(username: string, threadId: string): boolean {
    const user = this.getUserByUsername(username)
    return user ? user.bookmarkedThreads.includes(threadId) : false
  }

static subscribeToThread(username: string, threadId: string): boolean {
    const user = this.getUserByUsername(username)
    if (!user) return false

if (!user.subscribedThreads.includes(threadId)) {
      user.subscribedThreads.push(threadId)
      this.updateUser(user)
      return true
    }
    return false
  }

static unsubscribeFromThread(username: string, threadId: string): boolean {
    const user = this.getUserByUsername(username)
    if (!user) return false

const index = user.subscribedThreads.indexOf(threadId)
    if (index > -1) {
      user.subscribedThreads.splice(index, 1)
      this.updateUser(user)
      return true
    }
    return false
  }

static isSubscribedToThread(username: string, threadId: string): boolean {
    const user = this.getUserByUsername(username)
    return user ? user.subscribedThreads.includes(threadId) : false
  }

static createSession(userId: string, deviceInfo: string, ipAddress: string): UserSession {
    const session: UserSession = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      userId,
      deviceInfo,
      ipAddress,
      createdAt: new Date().toISOString(),
      lastActivity: new Date().toISOString(),
      isActive: true,
    }

const sessions = this.getUserSessions(userId)
    sessions.push(session)
    localStorage.setItem(`prism-sessions-${userId}`, JSON.stringify(sessions))

return session
  }

static getUserSessions(userId: string): UserSession[] {
    try {
      const sessions = localStorage.getItem(`prism-sessions-${userId}`)
      return sessions ? JSON.parse(sessions) : []
    } catch (error) {
      return []
    }
  }

static updateSessionActivity(sessionId: string, userId: string): void {
    const sessions = this.getUserSessions(userId)
    const session = sessions.find((s) => s.id === sessionId)
    if (session) {
      session.lastActivity = new Date().toISOString()
      localStorage.setItem(`prism-sessions-${userId}`, JSON.stringify(sessions))
    }
  }

static terminateSession(sessionId: string, userId: string): void {
    const sessions = this.getUserSessions(userId)
    const updatedSessions = sessions.filter((s) => s.id !== sessionId)
    localStorage.setItem(`prism-sessions-${userId}`, JSON.stringify(updatedSessions))
  }

static getUserStats(username: string): any {
    const user = this.getUserByUsername(username)
    if (!user) return null

const activities = this.getUserActivities(username)
    const notifications = this.getNotifications(username)

return {
      totalPosts: user.postCount,
      totalReplies: user.replyCount,
      reputation: user.reputation,
      level: user.level,
      experience: user.experience,
      streak: user.streak,
      friends: user.friends.length,
      followers: user.followers.length,
      following: user.following.length,
      achievements: user.achievements.length,
      joinDate: user.joinDate,
      lastSeen: user.lastSeen,
      totalActivities: activities.length,
      unreadNotifications: notifications.filter((n) => !n.read).length,
      bookmarkedThreads: user.bookmarkedThreads.length,
      subscribedThreads: user.subscribedThreads.length,
    }
  }

static searchUsers(query: string, limit = 10): UserProfile[] {
    const users = this.getAllUsers()
    const searchTerm = query.toLowerCase()

return users
      .filter(
        (user) =>
          user.username.toLowerCase().includes(searchTerm) || (user.bio && user.bio.toLowerCase().includes(searchTerm)),
      )
      .slice(0, limit)
  }

static getOnlineUsers(): UserProfile[] {
    const users = this.getAllUsers()
    const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000)

return users.filter(
      (user) => user.isOnline && new Date(user.lastSeen) > fiveMinutesAgo && user.status !== "invisible",
    )
  }

static getLeaderboard(type: "reputation" | "posts" | "level", limit = 10): UserProfile[] {
    const users = this.getAllUsers()

switch (type) {
      case "reputation":
        return users.sort((a, b) => b.reputation - a.reputation).slice(0, limit)
      case "posts":
        return users.sort((a, b) => b.postCount - a.postCount).slice(0, limit)
      case "level":
        return users.sort((a, b) => b.level - a.level).slice(0, limit)
      default:
        return []
    }
  }

static verifyEmail(username: string): void {
    const user = this.getUserByUsername(username)
    if (user) {
      user.emailVerified = true
      this.updateUser(user)

this.addNotification(username, {
        type: "system",
        title: "Email Verified",
        content: "Your email address has been verified successfully",
        priority: "medium",
      })
    }
  }

static promoteToModerator(username: string, promotedBy: string): boolean {
    const user = this.getUserByUsername(username)
    if (!user) return false

user.isModerator = true
    user.badges.push("Moderator")
    this.unlockAchievement(username, "moderator")
    this.updateUser(user)

this.addNotification(username, {
      type: "system",
      title: "Promoted to Moderator",
      content: `You have been promoted to moderator by ${promotedBy}`,
      priority: "high",
    })

return true
  }

static demoteFromModerator(username: string): boolean {
    const user = this.getUserByUsername(username)
    if (!user) return false

user.isModerator = false
    user.badges = user.badges.filter((b) => b !== "Moderator")
    this.updateUser(user)

return true
  }

static exportUserData(username: string): any {
    const user = this.getUserByUsername(username)
    if (!user) return null

const notifications = this.getNotifications(username)
    const activities = this.getUserActivities(username)
    const sessions = this.getUserSessions(username)

return {
      profile: user,
      notifications,
      activities,
      sessions,
      exportedAt: new Date().toISOString(),
    }
  }

static importUserData(data: any): boolean {
    try {
      if (data.profile) {
        this.updateUser(data.profile)
      }
      if (data.notifications) {
        localStorage.setItem(`prism-notifications-${data.profile.username}`, JSON.stringify(data.notifications))
      }
      if (data.activities) {
        localStorage.setItem(`prism-activities-${data.profile.username}`, JSON.stringify(data.activities))
      }
      return true
    } catch (error) {
      console.error("Failed to import user data:", error)
      return false
    }
  }
}
[V0_FILE]typescriptreact:file="lib/advanced-forum-system.ts" isQuickEdit="true"
import { SharedStorage } from "./shared-storage"
import { AdvancedUserSystem } from "./advanced-user-system"

export interface Thread {
  id: string
  title: string
  content: string
  author: string
  createdAt: string
  updatedAt: string
  replies: number
  views: number
  category: string
  tags: string[]
  files?: any[]
  isPinned: boolean
  isLocked: boolean
  isDeleted: boolean
  deletedBy?: string
  deletedAt?: string
  deletionReason?: string
  upvotes: number
  downvotes: number
  score: number
  lastReplyAt?: string
  lastReplyBy?: string
  isAnnouncement: boolean
  isFeatured: boolean
  pollData?: Poll
  eventData?: Event
  moderationFlags: ModerationFlag[]
  editHistory: EditHistory[]
  mentions: string[]
  isNSFW: boolean
  language: string
  sourceCode?: string
  codeLanguage?: string
}

export interface Reply {
  id: string
  threadId: string
  content: string
  author: string
  createdAt: string
  updatedAt: string
  files?: any[]
  replyTo?: string
  replyToAuthor?: string
  isDeleted: boolean
  deletedBy?: string
  deletedAt?: string
  deletionReason?: string
  upvotes: number
  downvotes: number
  score: number
  depth: number
  parentId?: string
  children: string[]
  moderationFlags: ModerationFlag[]
  editHistory: EditHistory[]
  mentions: string[]
  reactions: Reaction[]
  isBestAnswer: boolean
  isModeratorPost: boolean
  sourceCode?: string
  codeLanguage?: string
}

export interface Poll {
  id: string
  question: string
  options: PollOption[]
  allowMultiple: boolean
  expiresAt?: string
  isAnonymous: boolean
  createdAt: string
}

export interface PollOption {
  id: string
  text: string
  votes: string[]
  color?: string
}

export interface Event {
  id: string
  title: string
  description: string
  startDate: string
  endDate?: string
  location?: string
  isOnline: boolean
  maxAttendees?: number
  attendees: string[]
  organizer: string
  tags: string[]
}

export interface ModerationFlag {
  id: string
  type: "spam" | "inappropriate" | "harassment" | "misinformation" | "copyright" | "other"
  reason: string
  flaggedBy: string
  flaggedAt: string
  status: "pending" | "resolved" | "dismissed"
  resolvedBy?: string
  resolvedAt?: string
  resolution?: string
}

export interface EditHistory {
  id: string
  content: string
  editedBy: string
  editedAt: string
  reason?: string
}

export interface Reaction {
  emoji: string
  users: string[]
  count: number
}

export interface ForumCategory {
  id: string
  name: string
  description: string
  icon: string
  color: string
  parentId?: string
  children: string[]
  moderators: string[]
  isPrivate: boolean
  requiredRole?: string
  threadCount: number
  replyCount: number
  lastActivity?: string
  rules: string[]
  allowedFileTypes: string[]
  maxFileSize: number
  isArchived: boolean
}

export interface ForumStats {
  totalThreads: number
  totalReplies: number
  totalUsers: number
  onlineUsers: number
  todaysPosts: number
  weeklyPosts: number
  monthlyPosts: number
  topPosters: { username: string; count: number }[]
  popularThreads: Thread[]
  recentActivity: any[]
  categoryStats: { [categoryId: string]: { threads: number; replies: number } }
}

export interface SearchResult {
  type: "thread" | "reply" | "user"
  item: Thread | Reply | any
  relevance: number
  highlights: string[]
}

export interface ForumSettings {
  siteName: string
  siteDescription: string
  allowGuestPosting: boolean
  requireEmailVerification: boolean
  enableDownvotes: boolean
  enableReactions: boolean
  enablePolls: boolean
  enableEvents: boolean
  maxFileSize: number
  allowedFileTypes: string[]
  autoLockOldThreads: boolean
  autoLockDays: number
  enableMentions: boolean
  enableNotifications: boolean
  enableRealTimeUpdates: boolean
  moderationMode: "pre" | "post" | "none"
  spamFilterEnabled: boolean
  profanityFilterEnabled: boolean
  maxPostLength: number
  maxThreadTitleLength: number
  rateLimitPosts: number
  rateLimitMinutes: number
  enableSEO: boolean
  enableAnalytics: boolean
  maintenanceMode: boolean
  maintenanceMessage: string
}

export class AdvancedForumSystem {
  static createThread(threadData: Partial<Thread>): Thread {
    const thread: Thread = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      title: threadData.title || "",
      content: threadData.content || "",
      author: threadData.author || "Anonymous",
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      replies: 0,
      views: 0,
      category: threadData.category || "Discussion",
      tags: threadData.tags || [],
      files: threadData.files || [],
      isPinned: threadData.isPinned || false,
      isLocked: threadData.isLocked || false,
      isDeleted: false,
      upvotes: 0,
      downvotes: 0,
      score: 0,
      isAnnouncement: threadData.isAnnouncement || false,
      isFeatured: threadData.isFeatured || false,
      pollData: threadData.pollData,
      eventData: threadData.eventData,
      moderationFlags: [],
      editHistory: [],
      mentions: this.extractMentions(threadData.content || ""),
      isNSFW: threadData.isNSFW || false,
      language: threadData.language || "en",
      sourceCode: threadData.sourceCode,
      codeLanguage: threadData.codeLanguage,
    }

SharedStorage.addThread(thread)

if (thread.author !== "Anonymous") {
      const user = AdvancedUserSystem.getUserByUsername(thread.author)
      if (user) {
        user.postCount += 1
        AdvancedUserSystem.updateUser(user)
        AdvancedUserSystem.addExperience(thread.author, 10)
        AdvancedUserSystem.updateStreak(thread.author)
        AdvancedUserSystem.addReputation(thread.author, 1, "creating a thread")

if (user.postCount === 1) {
          AdvancedUserSystem.unlockAchievement(thread.author, "first_post")
        } else if (user.postCount === 10) {
          AdvancedUserSystem.unlockAchievement(thread.author, "ten_posts")
        } else if (user.postCount === 100) {
          AdvancedUserSystem.unlockAchievement(thread.author, "hundred_posts")
        }

AdvancedUserSystem.addActivity(thread.author, {
          type: "post",
          description: `Created thread: ${thread.title}`,
          targetId: thread.id,
          targetType: "thread",
          visibility: "public",
        })
      }
    }

this.notifyMentionedUsers(
      thread.mentions,
      thread.author,
      `mentioned you in thread: ${thread.title}`,
      `/forums/thread/${thread.id}`,
    )

return thread
  }

static updateThread(threadId: string, updates: Partial<Thread>, editedBy: string, reason?: string): boolean {
    const threads = SharedStorage.getThreads()
    const threadIndex = threads.findIndex((t: Thread) => t.id === threadId)

if (threadIndex === -1) return false

const thread = threads[threadIndex]
    const oldContent = thread.content

if (updates.content && updates.content !== oldContent) {
      thread.editHistory.push({
        id: Date.now().toString(),
        content: oldContent,
        editedBy,
        editedAt: new Date().toISOString(),
        reason,
      })
    }

Object.assign(thread, updates, {
      updatedAt: new Date().toISOString(),
      mentions: updates.content ? this.extractMentions(updates.content) : thread.mentions,
    })

SharedStorage.setThreads(threads)

if (updates.content) {
      this.notifyMentionedUsers(
        thread.mentions,
        editedBy,
        `mentioned you in updated thread: ${thread.title}`,
        `/forums/thread/${thread.id}`,
      )
    }

return true
  }

static deleteThread(threadId: string, deletedBy: string, reason?: string): boolean {
    const threads = SharedStorage.getThreads()
    const threadIndex = threads.findIndex((t: Thread) => t.id === threadId)

if (threadIndex === -1) return false

const thread = threads[threadIndex]
    thread.isDeleted = true
    thread.deletedBy = deletedBy
    thread.deletedAt = new Date().toISOString()
    thread.deletionReason = reason

SharedStorage.setThreads(threads)

if (thread.author !== deletedBy && thread.author !== "Anonymous") {
      AdvancedUserSystem.addNotification(thread.author, {
        type: "system",
        title: "Thread Deleted",
        content: `Your thread "${thread.title}" was deleted${reason ? `: ${reason}` : ""}`,
        priority: "high",
      })
    }

return true
  }

static restoreThread(threadId: string): boolean {
    const threads = SharedStorage.getThreads()
    const threadIndex = threads.findIndex((t: Thread) => t.id === threadId)

if (threadIndex === -1) return false

const thread = threads[threadIndex]
    thread.isDeleted = false
    delete thread.deletedBy
    delete thread.deletedAt
    delete thread.deletionReason

SharedStorage.setThreads(threads)
    return true
  }

static pinThread(threadId: string): boolean {
    return this.updateThread(threadId, { isPinned: true }, "system")
  }

static unpinThread(threadId: string): boolean {
    return this.updateThread(threadId, { isPinned: false }, "system")
  }

static lockThread(threadId: string, lockedBy: string): boolean {
    const success = this.updateThread(threadId, { isLocked: true }, lockedBy)
    if (success) {
      const thread = this.getThread(threadId)
      if (thread && thread.author !== "Anonymous") {
        AdvancedUserSystem.addNotification(thread.author, {
          type: "system",
          title: "Thread Locked",
          content: `Your thread "${thread.title}" has been locked`,
          priority: "medium",
        })
      }
    }
    return success
  }

static unlockThread(threadId: string, unlockedBy: string): boolean {
    const success = this.updateThread(threadId, { isLocked: false }, unlockedBy)
    if (success) {
      const thread = this.getThread(threadId)
      if (thread && thread.author !== "Anonymous") {
        AdvancedUserSystem.addNotification(thread.author, {
          type: "system",
          title: "Thread Unlocked",
          content: `Your thread "${thread.title}" has been unlocked`,
          priority: "medium",
        })
      }
    }
    return success
  }

static getThread(threadId: string): Thread | null {
    const threads = SharedStorage.getThreads()
    return threads.find((t: Thread) => t.id === threadId) || null
  }

static getThreads(
    options: {
      category?: string
      author?: string
      includeDeleted?: boolean
      sortBy?: "newest" | "oldest" | "popular" | "trending"
      limit?: number
      offset?: number
    } = {},
  ): Thread[] {
    let threads = SharedStorage.getThreads()

if (options.category && options.category !== "All") {
      threads = threads.filter((t: Thread) => t.category === options.category)
    }

if (options.author) {
      threads = threads.filter((t: Thread) => t.author === options.author)
    }

if (!options.includeDeleted) {
      threads = threads.filter((t: Thread) => !t.isDeleted)
    }

switch (options.sortBy) {
      case "oldest":
        threads.sort((a: Thread, b: Thread) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
        break
      case "popular":
        threads.sort((a: Thread, b: Thread) => b.score + b.views - (a.score + a.views))
        break
      case "trending":
        threads.sort((a: Thread, b: Thread) => {
          const aScore = this.calculateTrendingScore(a)
          const bScore = this.calculateTrendingScore(b)
          return bScore - aScore
        })
        break
      default:
        threads.sort((a: Thread, b: Thread) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
    }

if (options.offset) {
      threads = threads.slice(options.offset)
    }
    if (options.limit) {
      threads = threads.slice(0, options.limit)
    }

return threads
  }

static createReply(replyData: Partial<Reply>): Reply {
    const reply: Reply = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      threadId: replyData.threadId || "",
      content: replyData.content || "",
      author: replyData.author || "Anonymous",
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      files: replyData.files || [],
      replyTo: replyData.replyTo,
      replyToAuthor: replyData.replyToAuthor,
      isDeleted: false,
      upvotes: 0,
      downvotes: 0,
      score: 0,
      depth: replyData.depth || 0,
      parentId: replyData.parentId,
      children: [],
      moderationFlags: [],
      editHistory: [],
      mentions: this.extractMentions(replyData.content || ""),
      reactions: [],
      isBestAnswer: false,
      isModeratorPost: false,
      sourceCode: replyData.sourceCode,
      codeLanguage: replyData.codeLanguage,
    }

SharedStorage.addReply(reply)

const thread = this.getThread(reply.threadId)
    if (thread) {
      thread.replies += 1
      thread.lastReplyAt = reply.createdAt
      thread.lastReplyBy = reply.author
      SharedStorage.updateThread(reply.threadId, {
        replies: thread.replies,
        lastReplyAt: thread.lastReplyAt,
        lastReplyBy: thread.lastReplyBy,
      })

if (thread.author !== reply.author && thread.author !== "Anonymous") {
        AdvancedUserSystem.addNotification(thread.author, {
          type: "reply",
          title: "New Reply",
          content: `${reply.author} replied to your thread: ${thread.title}`,
          link: `/forums/thread/${thread.id}`,
          priority: "medium",
        })
      }

this.notifySubscribedUsers(
        reply.threadId,
        reply.author,
        `New reply in: ${thread.title}`,
        `/forums/thread/${thread.id}`,
      )
    }

if (reply.author !== "Anonymous") {
      const user = AdvancedUserSystem.getUserByUsername(reply.author)
      if (user) {
        user.replyCount += 1
        AdvancedUserSystem.updateUser(user)
        AdvancedUserSystem.addExperience(reply.author, 5)
        AdvancedUserSystem.addReputation(reply.author, 1, "posting a reply")

if (user.replyCount === 1) {
          AdvancedUserSystem.unlockAchievement(reply.author, "first_reply")
        }

AdvancedUserSystem.addActivity(reply.author, {
          type: "reply",
          description: `Replied to thread: ${thread?.title || "Unknown"}`,
          targetId: reply.threadId,
          targetType: "thread",
          visibility: "public",
        })
      }
    }

this.notifyMentionedUsers(
      reply.mentions,
      reply.author,
      `mentioned you in a reply`,
      `/forums/thread/${reply.threadId}`,
    )

return reply
  }

static updateReply(replyId: string, updates: Partial<Reply>, editedBy: string, reason?: string): boolean {
    const replies = SharedStorage.getReplies()
    const replyIndex = replies.findIndex((r: Reply) => r.id === replyId)

if (replyIndex === -1) return false

const reply = replies[replyIndex]
    const oldContent = reply.content

if (updates.content && updates.content !== oldContent) {
      reply.editHistory.push({
        id: Date.now().toString(),
        content: oldContent,
        editedBy,
        editedAt: new Date().toISOString(),
        reason,
      })
    }

Object.assign(reply, updates, {
      updatedAt: new Date().toISOString(),
      mentions: updates.content ? this.extractMentions(updates.content) : reply.mentions,
    })

SharedStorage.setReplies(replies)

if (updates.content) {
      this.notifyMentionedUsers(
        reply.mentions,
        editedBy,
        `mentioned you in an updated reply`,
        `/forums/thread/${reply.threadId}`,
      )
    }

return true
  }

static deleteReply(replyId: string, deletedBy: string, reason?: string): boolean {
    const replies = SharedStorage.getReplies()
    const replyIndex = replies.findIndex((r: Reply) => r.id === replyId)

if (replyIndex === -1) return false

const reply = replies[replyIndex]
    reply.isDeleted = true
    reply.deletedBy = deletedBy
    reply.deletedAt = new Date().toISOString()
    reply.deletionReason = reason

SharedStorage.setReplies(replies)

const thread = this.getThread(reply.threadId)
    if (thread) {
      thread.replies = Math.max(0, thread.replies - 1)
      SharedStorage.updateThread(reply.threadId, { replies: thread.replies })
    }

if (reply.author !== deletedBy && reply.author !== "Anonymous") {
      AdvancedUserSystem.addNotification(reply.author, {
        type: "system",
        title: "Reply Deleted",
        content: `Your reply was deleted${reason ? `: ${reason}` : ""}`,
        priority: "high",
      })
    }

return true
  }

static markAsBestAnswer(replyId: string): boolean {
    const replies = SharedStorage.getReplies()
    const reply = replies.find((r: Reply) => r.id === replyId)

if (!reply) return false

replies.forEach((r: Reply) => {
      if (r.threadId === reply.threadId) {
        r.isBestAnswer = false
      }
    })

reply.isBestAnswer = true
    SharedStorage.setReplies(replies)

if (reply.author !== "Anonymous") {
      AdvancedUserSystem.addReputation(reply.author, 10, "best answer")
    }

return true
  }

static voteOnItem(
    itemId: string,
    itemType: "thread" | "reply",
    userId: string,
    voteType: "upvote" | "downvote",
  ): boolean {
    const votes = this.getVotes()
    const existingVoteIndex = votes.findIndex((v) => v.itemId === itemId && v.userId === userId)

if (existingVoteIndex !== -1 && votes[existingVoteIndex].voteType === voteType) {
      votes.splice(existingVoteIndex, 1)
    } else {
      if (existingVoteIndex !== -1) {
        votes.splice(existingVoteIndex, 1)
      }

votes.push({
        id: Date.now().toString(),
        itemId,
        itemType,
        userId,
        voteType,
        createdAt: new Date().toISOString(),
      })
    }

localStorage.setItem("prism-votes", JSON.stringify(votes))

this.updateItemScore(itemId, itemType)

return true
  }

static getVotes(): any[] {
    try {
      return JSON.parse(localStorage.getItem("prism-votes") || "[]")
    } catch {
      return []
    }
  }

static updateItemScore(itemId: string, itemType: "thread" | "reply"): void {
    const votes = this.getVotes()
    const itemVotes = votes.filter((v) => v.itemId === itemId)
    const upvotes = itemVotes.filter((v) => v.voteType === "upvote").length
    const downvotes = itemVotes.filter((v) => v.voteType === "downvote").length
    const score = upvotes - downvotes

if (itemType === "thread") {
      this.updateThread(itemId, { upvotes, downvotes, score }, "system")
    } else {
      this.updateReply(itemId, { upvotes, downvotes, score }, "system")
    }

const item = itemType === "thread" ? this.getThread(itemId) : this.getReply(itemId)
    if (item && item.author !== "Anonymous") {
      const reputationChange = upvotes - downvotes
      if (reputationChange > 0) {
        AdvancedUserSystem.addReputation(item.author, reputationChange, "receiving upvotes")
      }
    }
  }

static getReply(replyId: string): Reply | null {
    const replies = SharedStorage.getReplies()
    return replies.find((r: Reply) => r.id === replyId) || null
  }

static searchContent(
    query: string,
    options: {
      type?: "all" | "threads" | "replies" | "users"
      category?: string
      author?: string
      dateRange?: { start: string; end: string }
      sortBy?: "relevance" | "date" | "popularity"
      limit?: number
    } = {},
  ): SearchResult[] {
    const results: SearchResult[] = []
    const searchTerms = query
      .toLowerCase()
      .split(" ")
      .filter((term) => term.length > 0)

if (options.type === "all" || options.type === "threads" || !options.type) {
      const threads = this.getThreads({ includeDeleted: false })
      threads.forEach((thread) => {
        const relevance = this.calculateRelevance(thread, searchTerms, ["title", "content", "tags"])
        if (relevance > 0) {
          results.push({
            type: "thread",
            item: thread,
            relevance,
            highlights: this.getHighlights(thread, searchTerms),
          })
        }
      })
    }

if (options.type === "all" || options.type === "replies" || !options.type) {
      const replies = SharedStorage.getReplies().filter((r: Reply) => !r.isDeleted)
      replies.forEach((reply) => {
        const relevance = this.calculateRelevance(reply, searchTerms, ["content"])
        if (relevance > 0) {
          results.push({
            type: "reply",
            item: reply,
            relevance,
            highlights: this.getHighlights(reply, searchTerms),
          })
        }
      })
    }

if (options.type === "all" || options.type === "users" || !options.type) {
      const users = AdvancedUserSystem.searchUsers(query, options.limit || 10)
      users.forEach((user) => {
        const relevance = this.calculateRelevance(user, searchTerms, ["username", "bio"])
        if (relevance > 0) {
          results.push({
            type: "user",
            item: user,
            relevance,
            highlights: this.getHighlights(user, searchTerms),
          })
        }
      })
    }

results.sort((a, b) => {
      if (options.sortBy === "date") {
        const aDate = new Date((a.item as any).createdAt || 0).getTime()
        const bDate = new Date((b.item as any).createdAt || 0).getTime()
        return bDate - aDate
      } else if (options.sortBy === "popularity") {
        const aScore = (a.item as any).score || 0
        const bScore = (b.item as any).score || 0
        return bScore - aScore
      } else {
        return b.relevance - a.relevance
      }
    })

return results.slice(0, options.limit || 50)
  }

static extractMentions(content: string): string[] {
    const mentionRegex = /@(\w+)/g
    const mentions: string[] = []
    let match

while ((match = mentionRegex.exec(content)) !== null) {
      mentions.push(match[1])
    }

return [...new Set(mentions)]
  }

static notifyMentionedUsers(mentions: string[], mentionedBy: string, message: string, link: string): void {
    mentions.forEach((username) => {
      if (username !== mentionedBy) {
        AdvancedUserSystem.addNotification(username, {
          type: "mention",
          title: "You were mentioned",
          content: `${mentionedBy} ${message}`,
          link,
          priority: "medium",
        })
      }
    })
  }

static notifySubscribedUsers(threadId: string, author: string, message: string, link: string): void {
    const users = AdvancedUserSystem.getAllUsers()
    users.forEach((user) => {
      if (user.subscribedThreads.includes(threadId) && user.username !== author) {
        AdvancedUserSystem.addNotification(user.username, {
          type: "thread_update",
          title: "Thread Update",
          content: message,
          link,
          priority: "low",
        })
      }
    })
  }

static calculateTrendingScore(thread: Thread): number {
    const now = Date.now()
    const createdAt = new Date(thread.createdAt).getTime()
    const ageInHours = (now - createdAt) / (1000 * 60 * 60)

const engagementScore = thread.score + thread.views + thread.replies
    const recencyMultiplier = Math.max(0.1, 1 - ageInHours / 168)

return engagementScore * recencyMultiplier
  }

static calculateRelevance(item: any, searchTerms: string[], fields: string[]): number {
    let relevance = 0

fields.forEach((field) => {
      const fieldValue = item[field]
      if (typeof fieldValue === "string") {
        const lowerValue = fieldValue.toLowerCase()
        searchTerms.forEach((term) => {
          if (lowerValue.includes(term)) {
            relevance += field === "title" || field === "username" ? 3 : 1
          }
        })
      } else if (Array.isArray(fieldValue)) {
        fieldValue.forEach((value) => {
          if (typeof value === "string") {
            const lowerValue = value.toLowerCase()
            searchTerms.forEach((term) => {
              if (lowerValue.includes(term)) {
                relevance += 2
              }
            })
          }
        })
      }
    })

return relevance
  }

static getHighlights(item: any, searchTerms: string[]): string[] {
    const highlights: string[] = []
    const fields = ["title", "content", "username", "bio"]

fields.forEach((field) => {
      const fieldValue = item[field]
      if (typeof fieldValue === "string") {
        searchTerms.forEach((term) => {
          const regex = new RegExp(`(${term})`, "gi")
          const matches = fieldValue.match(regex)
          if (matches) {
            highlights.push(...matches)
          }
        })
      }
    })

return [...new Set(highlights)]
  }

static getForumStats(): ForumStats {
    const threads = SharedStorage.getThreads()
    const replies = SharedStorage.getReplies()
    const users = AdvancedUserSystem.getAllUsers()
    const onlineUsers = AdvancedUserSystem.getOnlineUsers()

const now = new Date()
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
    const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
    const monthAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)

const todaysPosts = threads.filter((t) => new Date(t.createdAt) >= today).length
    const weeklyPosts = threads.filter((t) => new Date(t.createdAt) >= weekAgo).length
    const monthlyPosts = threads.filter((t) => new Date(t.createdAt) >= monthAgo).length

const topPosters = users
      .map((user) => ({ username: user.username, count: user.postCount }))
      .sort((a, b) => b.count - a.count)
      .slice(0, 10)

const popularThreads = threads
      .filter((t) => !t.isDeleted)
      .sort((a, b) => b.score + b.views - (a.score + a.views))
      .slice(0, 10)

return {
      totalThreads: threads.filter((t) => !t.isDeleted).length,
      totalReplies: replies.filter((r) => !r.isDeleted).length,
      totalUsers: users.length,
      onlineUsers: onlineUsers.length,
      todaysPosts,
      weeklyPosts,
      monthlyPosts,
      topPosters,
      popularThreads,
      recentActivity: [],
      categoryStats: {},
    }
  }

static flagContent(
    itemId: string,
    itemType: "thread" | "reply",
    flaggedBy: string,
    type: string,
    reason: string,
  ): boolean {
    const flag: ModerationFlag = {
      id: Date.now().toString(),
      type: type as any,
      reason,
      flaggedBy,
      flaggedAt: new Date().toISOString(),
      status: "pending",
    }

if (itemType === "thread") {
      const thread = this.getThread(itemId)
      if (thread) {
        thread.moderationFlags.push(flag)
        this.updateThread(itemId, { moderationFlags: thread.moderationFlags }, "system")
        return true
      }
    } else {
      const reply = this.getReply(itemId)
      if (reply) {
        reply.moderationFlags.push(flag)
        this.updateReply(itemId, { moderationFlags: reply.moderationFlags }, "system")
        return true
      }
    }

return false
  }

static resolveFlag(
    itemId: string,
    itemType: "thread" | "reply",
    flagId: string,
    resolvedBy: string,
    resolution: string,
  ): boolean {
    const item = itemType === "thread" ? this.getThread(itemId) : this.getReply(itemId)
    if (!item) return false

const flag = item.moderationFlags.find((f) => f.id === flagId)
    if (!flag) return false

flag.status = "resolved"
    flag.resolvedBy = resolvedBy
    flag.resolvedAt = new Date().toISOString()
    flag.resolution = resolution

if (itemType === "thread") {
      this.updateThread(itemId, { moderationFlags: item.moderationFlags }, "system")
    } else {
      this.updateReply(itemId, { moderationFlags: item.moderationFlags }, "system")
    }

return true
  }
}
[V0_FILE]typescriptreact:file="components/enhanced-forums-page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Switch } from "@/components/ui/switch"
import { EnhancedAuthModal } from "@/components/enhanced-auth-modal"
import { AdminPanel } from "@/components/admin-panel"
import { VotingSystem } from "@/components/voting-system"
import { ReportModal } from "@/components/report-modal"
import { UserProfileModal } from "@/components/user-profile-modal"
import { NotificationsPanel } from "@/components/notifications-panel"
import { DirectMessages } from "@/components/direct-messages"
import { SearchModal } from "@/components/search-modal"
import {
  MessageSquare,
  Plus,
  User,
  Clock,
  Eye,
  MessageCircle,
  LogOut,
  Shield,
  Flag,
  Megaphone,
  Bell,
  Search,
  Settings,
  Mail,
  RefreshCw,
  TrendingUp,
  Star,
  Bookmark,
  BookmarkCheck,
  Pin,
  Lock,
  ThumbsUp,
  Download,
  Upload,
  BarChart3,
  Users,
  Activity,
  XCircle,
  Trash2,
  Globe,
  Paperclip,
  Crown,
  Sparkles,
  BellOff,
  LayoutGrid,
  AlignLeft,
  DiscIcon as Discord,
  Github,
  Twitter,
  Youtube,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useState, useEffect, useCallback } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { FileUpload, type UploadedFile } from "@/components/file-upload"
import { AdvancedUserSystem, type UserProfile } from "@/lib/advanced-user-system"
import type { Thread, Poll, Event } from "@/lib/advanced-forum-system"
import { SharedStorage } from "@/lib/shared-storage"

interface CreateThreadData {
  title: string
  content: string
  category: string
  tags: string[]
  files: UploadedFile[]
  isPinned: boolean
  isLocked: boolean
  isAnnouncement: boolean
  isFeatured: boolean
  isNSFW: boolean
  pollData?: Poll
  eventData?: Event
  sourceCode?: string
  codeLanguage?: string
}

export default function EnhancedForumsPage() {
  const [threads, setThreads] = useState<Thread[]>([])
  const [filteredThreads, setFilteredThreads] = useState<Thread[]>([])
  const [user, setUser] = useState<UserProfile | null>(null)
  const [isCreateThreadOpen, setIsCreateThreadOpen] = useState(false)
  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)
  const [isAdminPanelOpen, setIsAdminPanelOpen] = useState(false)
  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false)
  const [isNotificationsOpen, setIsNotificationsOpen] = useState(false)
  const [isDirectMessagesOpen, setIsDirectMessagesOpen] = useState(false)
  const [isSearchModalOpen, setIsSearchModalOpen] = useState(false)
  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
  const [isStatsOpen, setIsStatsOpen] = useState(false)
  const [profileModalUsername, setProfileModalUsername] = useState("")
  const [reportModal, setReportModal] = useState<{
    isOpen: boolean
    itemId: string
    itemType: "thread" | "reply"
    itemAuthor: string
    itemContent: string
  }>({
    isOpen: false,
    itemId: "",
    itemType: "thread",
    itemAuthor: "",
    itemContent: "",
  })
  const [newThread, setNewThread] = useState<CreateThreadData>({
    title: "",
    content: "",
    category: "Discussion",
    tags: [],
    files: [],
    isPinned: false,
    isLocked: false,
    isAnnouncement: false,
    isFeatured: false,
    isNSFW: false,
    sourceCode: "",
    codeLanguage: "lua",
  })
  const [selectedCategory, setSelectedCategory] = useState<string>("All")
  const [sortBy, setSortBy] = useState<"newest" | "oldest" | "popular" | "trending">("newest")
  const [viewMode, setViewMode] = useState<"list" | "grid" | "compact">("list")
  const [isLoadingUser, setIsLoadingUser] = useState(true)
  const [isExporting, setIsExporting] = useState(false)
  const [isImporting, setIsImporting] = useState(false)
  const [importData, setImportData] = useState("")
  const [showShareModal, setShowShareModal] = useState(false)
  const [shareUrl, setShareUrl] = useState("")
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [lastRefresh, setLastRefresh] = useState<number>(Date.now())
  const [forumStats, setForumStats] = useState<any>(null)
  const [onlineUsers, setOnlineUsers] = useState<UserProfile[]>([])
  const [leaderboard, setLeaderboard] = useState<UserProfile[]>([])
  const [trendingThreads, setTrendingThreads] = useState<Thread[]>([])
  const [bookmarkedThreads, setBookmarkedThreads] = useState<string[]>([])
  const [subscribedThreads, setSubscribedThreads] = useState<string[]>([])
  const [showPollCreator, setShowPollCreator] = useState(false)
  const [showEventCreator, setShowEventCreator] = useState(false)
  const [pollOptions, setPollOptions] = useState<string[]>(["", ""])
  const [currentTag, setCurrentTag] = useState("")
  const [showAdvancedSearch, setShowAdvancedSearch] = useState(false)
  const [searchFilters, setSearchFilters] = useState({
    author: "",
    dateRange: { start: "", end: "" },
    category: "",
    hasFiles: false,
    minScore: 0,
    tags: [] as string[],
  })

const categories = [
    { id: "Discussion", name: "Discussion", icon: "💬", color: "blue" },
    { id: "Scripts", name: "Scripts", icon: "📝", color: "green" },
    { id: "Help", name: "Help", icon: "❓", color: "yellow" },
    { id: "Executor", name: "Executor", icon: "⚡", color: "purple" },
    { id: "Showcase", name: "Showcase", icon: "🎨", color: "pink" },
    { id: "Bugs", name: "Bugs", icon: "🐛", color: "red" },
    { id: "Updates", name: "Updates", icon: "📢", color: "orange" },
    { id: "Misc", name: "Misc", icon: "📂", color: "gray" },
  ]

const categoryColors = {
    Discussion: "bg-blue-600/20 text-blue-300 border-blue-600/30",
    Scripts: "bg-green-600/20 text-green-300 border-green-600/30",
    Help: "bg-yellow-600/20 text-yellow-300 border-yellow-600/30",
    Executor: "bg-purple-600/20 text-purple-300 border-purple-600/30",
    Showcase: "bg-pink-600/20 text-pink-300 border-pink-600/30",
    Bugs: "bg-red-600/20 text-red-300 border-red-600/30",
    Updates: "bg-orange-600/20 text-orange-300 border-orange-600/30",
    Misc: "bg-gray-600/20 text-gray-300 border-gray-600/30",
  }

const codeLanguages = [
    { value: "lua", label: "Lua" },
    { value: "javascript", label: "JavaScript" },
    { value: "python", label: "Python" },
    { value: "java", label: "Java" },
    { value: "cpp", label: "C++" },
    { value: "csharp", label: "C#" },
    { value: "html", label: "HTML" },
    { value: "css", label: "CSS" },
    { value: "json", label: "JSON" },
    { value: "xml", label: "XML" },
    { value: "sql", label: "SQL" },
    { value: "bash", label: "Bash" },
    { value: "powershell", label: "PowerShell" },
    { value: "yaml", label: "YAML" },
    { value: "markdown", label: "Markdown" },
  ]

const isAdmin = user?.isAdmin || user?.username === "zavi"
  const isModerator = user?.isModerator || isAdmin

const isUserMuted = (action: "posting" | "replying" | "reporting" | "all") => {
    if (!user) return false
    const userMutes = JSON.parse(localStorage.getItem("prism-user-mutes") || "[]")
    return userMutes.some(
      (mute: any) =>
        mute.username === user.username &&
        (mute.type === action || mute.type === "all") &&
        new Date(mute.expiresAt) > new Date(),
    )
  }

const loadThreadsData = useCallback(async () => {
    try {
      setIsRefreshing(true)
      const sharedThreads = await SharedStorage.getThreads()
      console.log("Loading threads:", sharedThreads.length, "threads found")

// Sort threads based on sortBy parameter
      const sortedThreads = [...sharedThreads]
      switch (sortBy) {
        case "newest":
          sortedThreads.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
          break
        case "oldest":
          sortedThreads.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
          break
        case "popular":
          sortedThreads.sort((a, b) => (b.replies || 0) - (a.replies || 0))
          break
        case "trending":
          sortedThreads.sort((a, b) => (b.views || 0) - (a.views || 0))
          break
      }

setThreads(sortedThreads)
      setLastRefresh(Date.now())
    } catch (error) {
      console.error("Error loading threads:", error)
    } finally {
      setIsRefreshing(false)
    }
  }, [sortBy])

const loadForumStats = useCallback(async () => {
    try {
      const threads = await SharedStorage.getThreads()
      const replies = await SharedStorage.getReplies()

const stats = {
        totalThreads: threads.length,
        totalReplies: replies.length,
        totalUsers: 1, // Simplified for now
        onlineUsers: 1,
        todaysPosts: threads.filter((t) => {
          const today = new Date()
          const threadDate = new Date(t.createdAt)
          return threadDate.toDateString() === today.toDateString()
        }).length,
      }

setForumStats(stats)

// Mock data for enhanced features
      setOnlineUsers([])
      setLeaderboard([])
      setTrendingThreads(threads.slice(0, 5))
    } catch (error) {
      console.error("Error loading forum stats:", error)
    }
  }, [])

const handleManualRefresh = () => {
    console.log("Manual refresh triggered")
    loadThreadsData()
    loadForumStats()
  }

useEffect(() => {
    const initializeData = async () => {
      console.log("Initializing Enhanced Forums...")
      await SharedStorage.migrateOldData()
      await loadThreadsData()
      await loadForumStats()
    }

initializeData()

const cleanup = SharedStorage.setupCrossTabSync(() => {
      console.log("Cross-tab sync triggered, reloading data...")
      loadThreadsData()
      loadForumStats()
    })

return cleanup
  }, [loadThreadsData, loadForumStats])

useEffect(() => {
    const interval = setInterval(() => {
      console.log("Auto-refresh triggered")
      loadThreadsData()
      loadForumStats()
    }, 30000)

return () => clearInterval(interval)
  }, [loadThreadsData, loadForumStats])

useEffect(() => {
    const loadData = async () => {
      const currentUser = await AdvancedUserSystem.getCurrentUser()
      if (currentUser) {
        setUser(currentUser)
        setBookmarkedThreads(currentUser.bookmarkedThreads || [])
        setSubscribedThreads(currentUser.subscribedThreads || [])
        console.log("Loaded user:", currentUser.username)
      } else {
        console.log("No user logged in")
      }
      setIsLoadingUser(false)
    }
    loadData()
  }, [])

useEffect(() => {
    let filtered = threads

if (selectedCategory !== "All") {
      filtered = filtered.filter((thread) => thread.category === selectedCategory)
    }

if (searchFilters.author) {
      filtered = filtered.filter((thread) => thread.author.toLowerCase().includes(searchFilters.author.toLowerCase()))
    }

if (searchFilters.category && searchFilters.category !== "All") {
      filtered = filtered.filter((thread) => thread.category === searchFilters.category)
    }

if (searchFilters.hasFiles) {
      filtered = filtered.filter((thread) => thread.files && thread.files.length > 0)
    }

if (searchFilters.minScore > 0) {
      filtered = filtered.filter((thread) => (thread.score || 0) >= searchFilters.minScore)
    }

if (searchFilters.tags.length > 0) {
      filtered = filtered.filter((thread) => searchFilters.tags.some((tag) => (thread.tags || []).includes(tag)))
    }

if (searchFilters.dateRange.start) {
      const startDate = new Date(searchFilters.dateRange.start)
      filtered = filtered.filter((thread) => new Date(thread.createdAt) >= startDate)
    }

if (searchFilters.dateRange.end) {
      const endDate = new Date(searchFilters.dateRange.end)
      filtered = filtered.filter((thread) => new Date(thread.createdAt) <= endDate)
    }

setFilteredThreads(filtered)
  }, [threads, selectedCategory, searchFilters])

const router = useRouter()
  const searchParams = useSearchParams()

useEffect(() => {
    const handleSharedData = async () => {
      const sharedData = searchParams.get("data")
      if (sharedData) {
        try {
          const decodedData = atob(sharedData)
          const parsedData = JSON.parse(decodedData)

if (parsedData.threads && Array.isArray(parsedData.threads)) {
            const existingThreads = await SharedStorage.getThreads()
            const existingIds = new Set(existingThreads.map((t: any) => t.id))
            const newThreads = parsedData.threads.filter((t: any) => !existingIds.has(t.id))

if (newThreads.length > 0) {
              await SharedStorage.setThreads([...existingThreads, ...newThreads])
              console.log("Imported", newThreads.length, "new threads")
            }

if (parsedData.replies && Array.isArray(parsedData.replies)) {
              const existingReplies = await SharedStorage.getReplies()
              const existingReplyIds = new Set(existingReplies.map((r: any) => r.id))
              const newReplies = parsedData.replies.filter((r: any) => !existingReplyIds.has(r.id))

if (newReplies.length > 0) {
                await SharedStorage.setReplies([...existingReplies, ...newReplies])
                console.log("Imported", newReplies.length, "new replies")
              }
            }

await loadThreadsData()
            router.replace("/forums", { scroll: false })
          }
        } catch (error) {
          console.error("Failed to import shared forum data:", error)
        }
      }
    }

handleSharedData()
  }, [searchParams, router, loadThreadsData])

const handleAuthSuccess = (userData: UserProfile) => {
    setUser(userData)
    setBookmarkedThreads(userData.bookmarkedThreads || [])
    setSubscribedThreads(userData.subscribedThreads || [])
    console.log("User authenticated:", userData.username)
  }

const handleLogout = () => {
    localStorage.removeItem("prism-current-user-encrypted")
    setUser(null)
    setBookmarkedThreads([])
    setSubscribedThreads([])
    console.log("User logged out")
  }

const createThread = async () => {
    if (!newThread.title.trim() || !newThread.content.trim()) return

if (user && isUserMuted("posting")) {
      alert("You are currently muted from posting.")
      return
    }

if ((newThread.category === "Updates" || newThread.isAnnouncement) && !isAdmin) {
      alert("Only administrators can post in the Updates category or create announcements.")
      return
    }

const thread = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      title: newThread.title.trim(),
      content: newThread.content.trim(),
      author: user?.username || "Anonymous",
      createdAt: new Date().toISOString(),
      replies: 0,
      views: 0,
      category: newThread.category,
      tags: newThread.tags,
      files: newThread.files,
      isPinned: newThread.isPinned && isModerator,
      isLocked: newThread.isLocked && isModerator,
      isAnnouncement: newThread.isAnnouncement && isAdmin,
      isFeatured: newThread.isFeatured && isModerator,
      isNSFW: newThread.isNSFW,
      sourceCode: newThread.sourceCode,
      codeLanguage: newThread.codeLanguage,
      upvotes: 0,
      downvotes: 0,
      score: 0,
    }

console.log("Creating thread:", thread.title, "by", thread.author)

await SharedStorage.addThread(thread)
    await loadThreadsData()

setNewThread({
      title: "",
      content: "",
      category: "Discussion",
      tags: [],
      files: [],
      isPinned: false,
      isLocked: false,
      isAnnouncement: false,
      isFeatured: false,
      isNSFW: false,
      sourceCode: "",
      codeLanguage: "lua",
    })
    setPollOptions(["", ""])
    setShowPollCreator(false)
    setShowEventCreator(false)
    setIsCreateThreadOpen(false)
  }

const toggleBookmark = (threadId: string) => {
    if (!user) {
      setIsAuthModalOpen(true)
      return
    }

const isBookmarked = bookmarkedThreads.includes(threadId)
    if (isBookmarked) {
      setBookmarkedThreads((prev) => prev.filter((id) => id !== threadId))
    } else {
      setBookmarkedThreads((prev) => [...prev, threadId])
    }
  }

const toggleSubscription = (threadId: string) => {
    if (!user) {
      setIsAuthModalOpen(true)
      return
    }

const isSubscribed = subscribedThreads.includes(threadId)
    if (isSubscribed) {
      setSubscribedThreads((prev) => prev.filter((id) => id !== threadId))
    } else {
      setSubscribedThreads((prev) => [...prev, threadId])
    }
  }

const pinThread = async (threadId: string) => {
    if (!isModerator) return
    await SharedStorage.updateThread(threadId, { isPinned: true })
    await loadThreadsData()
  }

const lockThread = async (threadId: string) => {
    if (!isModerator) return
    await SharedStorage.updateThread(threadId, { isLocked: true })
    await loadThreadsData()
  }

const deleteThread = async (threadId: string) => {
    if (!isModerator) return
    if (confirm("Are you sure you want to delete this thread?")) {
      await SharedStorage.deleteThread(threadId)
      await loadThreadsData()
    }
  }

const openReportModal = (thread: any) => {
    if (!user) {
      setIsAuthModalOpen(true)
      return
    }

if (isUserMuted("reporting")) {
      alert("You are currently muted from reporting content.")
      return
    }

setReportModal({
      isOpen: true,
      itemId: thread.id,
      itemType: "thread",
      itemAuthor: thread.author,
      itemContent: thread.content,
    })
  }

const openUserProfile = (username: string) => {
    if (username === "Anonymous") {
      alert("This is an anonymous user - no profile available.")
      return
    }
    setProfileModalUsername(username)
    setIsProfileModalOpen(true)
  }

const addTag = () => {
    if (currentTag.trim() && !newThread.tags.includes(currentTag.trim())) {
      setNewThread((prev) => ({
        ...prev,
        tags: [...prev.tags, currentTag.trim()],
      }))
      setCurrentTag("")
    }
  }

const removeTag = (tagToRemove: string) => {
    setNewThread((prev) => ({
      ...prev,
      tags: prev.tags.filter((tag) => tag !== tagToRemove),
    }))
  }

const addPollOption = () => {
    if (pollOptions.length < 10) {
      setPollOptions((prev) => [...prev, ""])
    }
  }

const removePollOption = (index: number) => {
    if (pollOptions.length > 2) {
      setPollOptions((prev) => prev.filter((_, i) => i !== index))
    }
  }

const updatePollOption = (index: number, value: string) => {
    setPollOptions((prev) => prev.map((opt, i) => (i === index ? value : opt)))
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60))

return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
  }

const getCategoryStats = () => {
    const stats: { [key: string]: number } = {}
    categories.forEach((cat) => {
      stats[cat.id] = threads.filter((thread) => thread.category === cat.id).length
    })
    return stats
  }

const categoryStats = getCategoryStats()

const exportForumData = async () => {
    setIsExporting(true)
    try {
      const replies = await SharedStorage.getReplies()
      const exportData = {
        threads: threads,
        replies: replies,
        exportedAt: new Date().toISOString(),
        version: "1.0",
      }

const encodedData = btoa(JSON.stringify(exportData))
      const currentUrl = window.location.origin + window.location.pathname
      const shareableUrl = `${currentUrl}?data=${encodedData}`

setShareUrl(shareableUrl)
      setShowShareModal(true)
    } catch (error) {
      console.error("Failed to export forum data:", error)
    } finally {
      setIsExporting(false)
    }
  }

const copyShareUrl = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl)
      alert("Share URL copied to clipboard!")
    } catch (error) {
      console.error("Failed to copy URL:", error)
    }
  }

const importForumData = async () => {
    if (!importData.trim()) return

setIsImporting(true)
    try {
      let parsedData

try {
        parsedData = JSON.parse(importData)
      } catch {
        try {
          const decodedData = atob(importData)
          parsedData = JSON.parse(decodedData)
        } catch {
          throw new Error("Invalid data format")
        }
      }

if (parsedData.threads && Array.isArray(parsedData.threads)) {
        const existingThreads = await SharedStorage.getThreads()
        const existingIds = new Set(existingThreads.map((t: any) => t.id))
        const newThreads = parsedData.threads.filter((t: any) => !existingIds.has(t.id))

if (newThreads.length > 0) {
          await SharedStorage.setThreads([...existingThreads, ...newThreads])
          await loadThreadsData()
        }

if (parsedData.replies && Array.isArray(parsedData.replies)) {
          const existingReplies = await SharedStorage.getReplies()
          const existingReplyIds = new Set(existingReplies.map((r: any) => r.id))
          const newReplies = parsedData.replies.filter((r: any) => !existingReplyIds.has(r.id))

if (newReplies.length > 0) {
            await SharedStorage.setReplies([...existingReplies, ...newReplies])
          }
        }

setImportData("")
        alert("Forum data imported successfully!")
      }
    } catch (error) {
      console.error("Failed to import forum data:", error)
      alert("Failed to import forum data. Please check the format.")
    } finally {
      setIsImporting(false)
    }
  }

const unreadNotifications = user ? AdvancedUserSystem.getUnreadNotificationCount(user.username) : 0

return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 relative">
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/40"></div>
        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black/60 to-transparent backdrop-blur-xl"></div>
      </div>

<div className="hidden md:flex items-center space-x-6">
                <Link href="/" className="text-gray-300 hover:text-white transition-colors">
                  Home
                </Link>
                <Link href="/team" className="text-gray-300 hover:text-white transition-colors">
                  Team
                </Link>
                <Link href="/scripts" className="text-gray-300 hover:text-white transition-colors">
                  Scripts
                </Link>
                <span className="text-white font-semibold flex items-center space-x-1">
                  <MessageSquare className="w-4 h-4" />
                  <span>Forums</span>
                </span>
              </div>

<div className="flex items-center space-x-2">
                {forumStats && (
                  <div className="hidden lg:flex items-center space-x-4 text-xs text-gray-400 mr-4">
                    <div className="flex items-center space-x-1">
                      <MessageSquare className="w-3 h-3" />
                      <span>{forumStats.totalThreads}</span>
                    </div>
                    <div className="flex items-center space-x-1">
                      <Users className="w-3 h-3" />
                      <span>{forumStats.onlineUsers}</span>
                    </div>
                    <div className="flex items-center space-x-1">
                      <Activity className="w-3 h-3" />
                      <span>{forumStats.todaysPosts}</span>
                    </div>
                  </div>
                )}

<Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setIsSearchModalOpen(true)}
                  className="text-gray-300 hover:text-white"
                  title="Search forums"
                >
                  <Search className="w-4 h-4" />
                </Button>

<Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setIsStatsOpen(true)}
                  className="text-gray-300 hover:text-white"
                  title="Forum statistics"
                >
                  <BarChart3 className="w-4 h-4" />
                </Button>

{isLoadingUser ? (
                  <div className="flex items-center space-x-2">
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-purple-400"></div>
                    <span className="text-gray-400 text-sm">Loading...</span>
                  </div>
                ) : user ? (
                  <div className="flex items-center space-x-3">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setIsNotificationsOpen(true)}
                      className="text-gray-300 hover:text-white relative"
                    >
                      <Bell className="w-4 h-4" />
                      {unreadNotifications > 0 && (
                        <Badge className="absolute -top-1 -right-1 bg-red-600 text-white text-xs min-w-5 h-5 flex items-center justify-center p-0">
                          {unreadNotifications > 99 ? "99+" : unreadNotifications}
                        </Badge>
                      )}
                    </Button>

<Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setIsDirectMessagesOpen(true)}
                      className="text-gray-300 hover:text-white"
                    >
                      <Mail className="w-4 h-4" />
                    </Button>

<Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setIsSettingsOpen(true)}
                      className="text-gray-300 hover:text-white"
                    >
                      <Settings className="w-4 h-4" />
                    </Button>

{isAdmin && (
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => setIsAdminPanelOpen(true)}
                        className="text-red-400 hover:text-red-300"
                        title="Admin Panel"
                      >
                        <Shield className="w-4 h-4" />
                      </Button>
                    )}

<div
                      className="flex items-center space-x-2 bg-purple-600/20 px-3 py-1 rounded-full cursor-pointer hover:bg-purple-600/30 transition-colors"
                      onClick={() => setIsProfileModalOpen(true)}
                    >
                      <div className="w-6 h-6 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-xs font-bold text-white overflow-hidden">
                        {user.avatar ? (
                          <Image
                            src={user.avatar || "/placeholder.svg"}
                            alt={user.username}
                            width={24}
                            height={24}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          user.username.charAt(0).toUpperCase()
                        )}
                      </div>
                      <span className="text-purple-300 text-sm">{user.username}</span>
                      {user.isAdmin && <Crown className="w-3 h-3 text-yellow-400" />}
                      {user.isModerator && !user.isAdmin && <Shield className="w-3 h-3 text-blue-400" />}
                      {user.isPremium && <Sparkles className="w-3 h-3 text-purple-400" />}
                    </div>

<Button
                      variant="ghost"
                      size="sm"
                      onClick={handleLogout}
                      className="text-gray-400 hover:text-red-400"
                      title="Logout"
                    >
                      <LogOut className="w-4 h-4" />
                    </Button>
                  </div>
                ) : (
                  <div className="flex items-center space-x-3">
                    <span className="text-sm text-gray-400">👀 Browsing as Guest</span>
                    <Button
                      onClick={() => setIsAuthModalOpen(true)}
                      className="bg-purple-600 hover:bg-purple-700 text-white"
                    >
                      Login / Register
                    </Button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </nav>

<div className="container mx-auto px-4 py-8">
          <div className="flex flex-col lg:flex-row gap-8">
            <aside className="lg:w-80 space-y-6">
              <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="text-white flex items-center space-x-2">
                    <LayoutGrid className="w-5 h-5" />
                    <span>Categories</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  <Button
                    variant={selectedCategory === "All" ? "default" : "ghost"}
                    className={`w-full justify-start ${
                      selectedCategory === "All"
                        ? "bg-purple-600 hover:bg-purple-700 text-white"
                        : "text-gray-300 hover:text-white hover:bg-gray-700"
                    }`}
                    onClick={() => setSelectedCategory("All")}
                  >
                    <Globe className="w-4 h-4 mr-2" />
                    All Categories
                    <Badge className="ml-auto bg-gray-600 text-gray-200">{threads.length}</Badge>
                  </Button>
                  {categories.map((category) => (
                    <Button
                      key={category.id}
                      variant={selectedCategory === category.id ? "default" : "ghost"}
                      className={`w-full justify-start ${
                        selectedCategory === category.id
                          ? "bg-purple-600 hover:bg-purple-700 text-white"
                          : "text-gray-300 hover:text-white hover:bg-gray-700"
                      }`}
                      onClick={() => setSelectedCategory(category.id)}
                    >
                      <span className="mr-2">{category.icon}</span>
                      {category.name}
                      <Badge className="ml-auto bg-gray-600 text-gray-200">{categoryStats[category.id] || 0}</Badge>
                    </Button>
                  ))}
                </CardContent>
              </Card>

<Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="text-white flex items-center space-x-2">
                    <TrendingUp className="w-5 h-5" />
                    <span>Trending</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  {trendingThreads.slice(0, 5).map((thread) => (
                    <div key={thread.id} className="space-y-1">
                      <Link
                        href={`/forums/thread/${thread.id}`}
                        className="text-sm text-gray-300 hover:text-white line-clamp-2 transition-colors"
                      >
                        {thread.title}
                      </Link>
                      <div className="flex items-center space-x-2 text-xs text-gray-500">
                        <span>{thread.views} views</span>
                        <span>•</span>
                        <span>{thread.replies} replies</span>
                      </div>
                    </div>
                  ))}
                </CardContent>
              </Card>

{forumStats && (
                <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
                  <CardHeader>
                    <CardTitle className="text-white flex items-center space-x-2">
                      <Activity className="w-5 h-5" />
                      <span>Forum Stats</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-gray-400 text-sm">Total Threads</span>
                      <span className="text-white font-semibold">{forumStats.totalThreads}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-400 text-sm">Total Replies</span>
                      <span className="text-white font-semibold">{forumStats.totalReplies}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-400 text-sm">Today's Posts</span>
                      <span className="text-green-400 font-semibold">{forumStats.todaysPosts}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-400 text-sm">Last Update</span>
                      <span className="text-gray-300 text-xs">{formatDate(new Date(lastRefresh).toISOString())}</span>
                    </div>
                  </CardContent>
                </Card>
              )}
            </aside>

<main className="flex-1 space-y-6">
              <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                <div>
                  <h1 className="text-3xl font-bold text-white mb-2">
                    {selectedCategory === "All" ? "All Discussions" : `${selectedCategory} Discussions`}
                  </h1>
                  <p className="text-gray-400">
                    {filteredThreads.length} thread{filteredThreads.length !== 1 ? "s" : ""} found
                  </p>
                </div>

<div className="flex items-center space-x-3">
                  <div className="flex items-center space-x-2">
                    <Select value={sortBy} onValueChange={(value: any) => setSortBy(value)}>
                      <SelectTrigger className="w-32 bg-gray-800 border-gray-600 text-white">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent className="bg-gray-800 border-gray-600">
                        <SelectItem value="newest">Newest</SelectItem>
                        <SelectItem value="oldest">Oldest</SelectItem>
                        <SelectItem value="popular">Popular</SelectItem>
                        <SelectItem value="trending">Trending</SelectItem>
                      </SelectContent>
                    </Select>

<Select value={viewMode} onValueChange={(value: any) => setViewMode(value)}>
                      <SelectTrigger className="w-28 bg-gray-800 border-gray-600 text-white">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent className="bg-gray-800 border-gray-600">
                        <SelectItem value="list">
                          <div className="flex items-center space-x-2">
                            <AlignLeft className="w-4 h-4" />
                            <span>List</span>
                          </div>
                        </SelectItem>
                        <SelectItem value="grid">
                          <div className="flex items-center space-x-2">
                            <LayoutGrid className="w-4 h-4" />
                            <span>Grid</span>
                          </div>
                        </SelectItem>
                        <SelectItem value="compact">
                          <div className="flex items-center space-x-2">
                            <AlignLeft className="w-4 h-4" />
                            <span>Compact</span>
                          </div>
                        </SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<Dialog open={isCreateThreadOpen} onOpenChange={setIsCreateThreadOpen}>
                    <DialogTrigger asChild>
                      <Button className="bg-purple-600 hover:bg-purple-700 text-white">
                        <Plus className="w-4 h-4 mr-2" />
                        New Thread
                      </Button>
                    </DialogTrigger>
                    <DialogContent className="bg-gray-800 border-gray-700 text-white max-w-4xl max-h-[90vh] overflow-y-auto">
                      <DialogHeader>
                        <DialogTitle className="text-xl">Create New Thread</DialogTitle>
                      </DialogHeader>
                      <Tabs defaultValue="basic" className="w-full">
                        <TabsList className="grid w-full grid-cols-4 bg-gray-700">
                          <TabsTrigger value="basic">Basic</TabsTrigger>
                          <TabsTrigger value="advanced">Advanced</TabsTrigger>
                          <TabsTrigger value="poll">Poll</TabsTrigger>
                          <TabsTrigger value="event">Event</TabsTrigger>
                        </TabsList>

<TabsContent value="basic" className="space-y-4 mt-6">
                          <div>
                            <label className="text-sm font-medium text-gray-300 mb-2 block">Title</label>
                            <Input
                              value={newThread.title}
                              onChange={(e) => setNewThread((prev) => ({ ...prev, title: e.target.value }))}
                              placeholder="Enter thread title..."
                              className="bg-gray-900 border-gray-600 text-white"
                            />
                          </div>

<div>
                            <label className="text-sm font-medium text-gray-300 mb-2 block">Category</label>
                            <Select
                              value={newThread.category}
                              onValueChange={(value) => setNewThread((prev) => ({ ...prev, category: value }))}
                            >
                              <SelectTrigger className="bg-gray-900 border-gray-600 text-white">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent className="bg-gray-800 border-gray-600">
                                {categories.map((category) => (
                                  <SelectItem
                                    key={category.id}
                                    value={category.id}
                                    disabled={category.id === "Updates" && !isAdmin}
                                  >
                                    <div className="flex items-center space-x-2">
                                      <span>{category.icon}</span>
                                      <span>{category.name}</span>
                                      {category.id === "Updates" && !isAdmin && (
                                        <Badge className="ml-2 bg-red-600 text-white text-xs">Admin Only</Badge>
                                      )}
                                    </div>
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>

<div>
                            <label className="text-sm font-medium text-gray-300 mb-2 block">Content</label>
                            <Textarea
                              value={newThread.content}
                              onChange={(e) => setNewThread((prev) => ({ ...prev, content: e.target.value }))}
                              placeholder="Write your thread content..."
                              className="bg-gray-900 border-gray-600 text-white min-h-32"
                            />
                          </div>

<div>
                            <label className="text-sm font-medium text-gray-300 mb-2 block">Tags</label>
                            <div className="flex flex-wrap gap-2 mb-2">
                              {newThread.tags.map((tag) => (
                                <Badge
                                  key={tag}
                                  className="bg-purple-600/20 text-purple-300 border-purple-600/30 cursor-pointer hover:bg-red-600/20 hover:text-red-300 hover:border-red-600/30"
                                  onClick={() => removeTag(tag)}
                                >
                                  {tag} ✕
                                </Badge>
                              ))}
                            </div>
                            <div className="flex space-x-2">
                              <Input
                                value={currentTag}
                                onChange={(e) => setCurrentTag(e.target.value)}
                                placeholder="Add a tag..."
                                className="bg-gray-900 border-gray-600 text-white"
                                onKeyPress={(e) => e.key === "Enter" && addTag()}
                              />
                              <Button
                                onClick={addTag}
                                variant="outline"
                                className="border-gray-600 text-white bg-transparent"
                              >
                                Add
                              </Button>
                            </div>
                          </div>

<div>
                            <label className="text-sm font-medium text-gray-300 mb-2 block">Attachments</label>
                            <FileUpload
                              onFilesChange={(files) => setNewThread((prev) => ({ ...prev, files }))}
                              maxFiles={5}
                              maxSizePerFile={10}
                            />
                          </div>
                        </TabsContent>

<TabsContent value="advanced" className="space-y-4 mt-6">
                          {newThread.category === "Scripts" && (
                            <>
                              <div>
                                <label className="text-sm font-medium text-gray-300 mb-2 block">Source Code</label>
                                <Textarea
                                  value={newThread.sourceCode}
                                  onChange={(e) => setNewThread((prev) => ({ ...prev, sourceCode: e.target.value }))}
                                  placeholder="Paste your code here..."
                                  className="bg-gray-900 border-gray-600 text-white font-mono text-sm min-h-40"
                                />
                              </div>

<div>
                                <label className="text-sm font-medium text-gray-300 mb-2 block">Code Language</label>
                                <Select
                                  value={newThread.codeLanguage}
                                  onValueChange={(value) => setNewThread((prev) => ({ ...prev, codeLanguage: value }))}
                                >
                                  <SelectTrigger className="bg-gray-900 border-gray-600 text-white">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent className="bg-gray-800 border-gray-600">
                                    {codeLanguages.map((lang) => (
                                      <SelectItem key={lang.value} value={lang.value}>
                                        {lang.label}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              </div>
                            </>
                          )}

{isModerator && (
                            <div className="space-y-4 p-4 bg-gray-700/30 rounded-lg border border-gray-600">
                              <h4 className="text-sm font-medium text-yellow-300 flex items-center space-x-2">
                                <Shield className="w-4 h-4" />
                                <span>Moderator Options</span>
                              </h4>

<div className="grid grid-cols-2 gap-4">
                                <div className="flex items-center space-x-2">
                                  <Checkbox
                                    id="isPinned"
                                    checked={newThread.isPinned}
                                    onCheckedChange={(checked) =>
                                      setNewThread((prev) => ({ ...prev, isPinned: checked as boolean }))
                                    }
                                  />
                                  <label
                                    htmlFor="isPinned"
                                    className="text-sm text-gray-300 flex items-center space-x-1"
                                  >
                                    <Pin className="w-3 h-3" />
                                    <span>Pin Thread</span>
                                  </label>
                                </div>

<div className="flex items-center space-x-2">
                                  <Checkbox
                                    id="isLocked"
                                    checked={newThread.isLocked}
                                    onCheckedChange={(checked) =>
                                      setNewThread((prev) => ({ ...prev, isLocked: checked as boolean }))
                                    }
                                  />
                                  <label
                                    htmlFor="isLocked"
                                    className="text-sm text-gray-300 flex items-center space-x-1"
                                  >
                                    <Lock className="w-3 h-3" />
                                    <span>Lock Thread</span>
                                  </label>
                                </div>

<div className="flex items-center space-x-2">
                                  <Checkbox
                                    id="isFeatured"
                                    checked={newThread.isFeatured}
                                    onCheckedChange={(checked) =>
                                      setNewThread((prev) => ({ ...prev, isFeatured: checked as boolean }))
                                    }
                                  />
                                  <label
                                    htmlFor="isFeatured"
                                    className="text-sm text-gray-300 flex items-center space-x-1"
                                  >
                                    <Star className="w-3 h-3" />
                                    <span>Feature Thread</span>
                                  </label>
                                </div>

<div className="flex items-center space-x-2">
                                  <Checkbox
                                    id="isNSFW"
                                    checked={newThread.isNSFW}
                                    onCheckedChange={(checked) =>
                                      setNewThread((prev) => ({ ...prev, isNSFW: checked as boolean }))
                                    }
                                  />
                                  <label htmlFor="isNSFW" className="text-sm text-gray-300 flex items-center space-x-1">
                                    <XCircle className="w-3 h-3" />
                                    <span>NSFW Content</span>
                                  </label>
                                </div>
                              </div>

{isAdmin && (
                                <div className="flex items-center space-x-2">
                                  <Checkbox
                                    id="isAnnouncement"
                                    checked={newThread.isAnnouncement}
                                    onCheckedChange={(checked) =>
                                      setNewThread((prev) => ({ ...prev, isAnnouncement: checked as boolean }))
                                    }
                                  />
                                  <label
                                    htmlFor="isAnnouncement"
                                    className="text-sm text-red-300 flex items-center space-x-1"
                                  >
                                    <Megaphone className="w-3 h-3" />
                                    <span>Official Announcement</span>
                                  </label>
                                </div>
                              )}
                            </div>
                          )}
                        </TabsContent>

<TabsContent value="poll" className="space-y-4 mt-6">
                          <div className="flex items-center justify-between">
                            <h4 className="text-sm font-medium text-gray-300">Create Poll</h4>
                            <Switch
                              checked={showPollCreator}
                              onCheckedChange={setShowPollCreator}
                              className="data-[state=checked]:bg-purple-600"
                            />
                          </div>

{showPollCreator && (
                            <div className="space-y-4 p-4 bg-gray-700/30 rounded-lg border border-gray-600">
                              <div>
                                <label className="text-sm font-medium text-gray-300 mb-2 block">Poll Question</label>
                                <Input
                                  placeholder="What's your question?"
                                  className="bg-gray-900 border-gray-600 text-white"
                                />
                              </div>

<div>
                                <label className="text-sm font-medium text-gray-300 mb-2 block">Poll Options</label>
                                <div className="space-y-2">
                                  {pollOptions.map((option, index) => (
                                    <div key={index} className="flex space-x-2">
                                      <Input
                                        value={option}
                                        onChange={(e) => updatePollOption(index, e.target.value)}
                                        placeholder={`Option ${index + 1}`}
                                        className="bg-gray-900 border-gray-600 text-white"
                                      />
                                      {pollOptions.length > 2 && (
                                        <Button
                                          variant="outline"
                                          size="sm"
                                          onClick={() => removePollOption(index)}
                                          className="border-red-600 text-red-400 hover:bg-red-600/20"
                                        >
                                          <Trash2 className="w-4 h-4" />
                                        </Button>
                                      )}
                                    </div>
                                  ))}
                                </div>
                                {pollOptions.length < 10 && (
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={addPollOption}
                                    className="mt-2 border-gray-600 text-white bg-transparent"
                                  >
                                    <Plus className="w-4 h-4 mr-2" />
                                    Add Option
                                  </Button>
                                )}
                              </div>

<div className="grid grid-cols-2 gap-4">
                                <div className="flex items-center space-x-2">
                                  <Checkbox id="allowMultiple" />
                                  <label htmlFor="allowMultiple" className="text-sm text-gray-300">
                                    Allow multiple choices
                                  </label>
                                </div>
                                <div className="flex items-center space-x-2">
                                  <Checkbox id="showResults" />
                                  <label htmlFor="showResults" className="text-sm text-gray-300">
                                    Show results before voting
                                  </label>
                                </div>
                              </div>
                            </div>
                          )}
                        </TabsContent>

<TabsContent value="event" className="space-y-4 mt-6">
                          <div className="flex items-center justify-between">
                            <h4 className="text-sm font-medium text-gray-300">Create Event</h4>
                            <Switch
                              checked={showEventCreator}
                              onCheckedChange={setShowEventCreator}
                              className="data-[state=checked]:bg-purple-600"
                            />
                          </div>

{showEventCreator && (
                            <div className="space-y-4 p-4 bg-gray-700/30 rounded-lg border border-gray-600">
                              <div className="grid grid-cols-2 gap-4">
                                <div>
                                  <label className="text-sm font-medium text-gray-300 mb-2 block">Event Date</label>
                                  <Input type="date" className="bg-gray-900 border-gray-600 text-white" />
                                </div>
                                <div>
                                  <label className="text-sm font-medium text-gray-300 mb-2 block">Event Time</label>
                                  <Input type="time" className="bg-gray-900 border-gray-600 text-white" />
                                </div>
                              </div>

<div>
                                <label className="text-sm font-medium text-gray-300 mb-2 block">Location/Link</label>
                                <Input
                                  placeholder="Event location or meeting link"
                                  className="bg-gray-900 border-gray-600 text-white"
                                />
                              </div>

<div>
                                <label className="text-sm font-medium text-gray-300 mb-2 block">Max Attendees</label>
                                <Input
                                  type="number"
                                  placeholder="Leave empty for unlimited"
                                  className="bg-gray-900 border-gray-600 text-white"
                                />
                              </div>
                            </div>
                          )}
                        </TabsContent>
                      </Tabs>

<div className="flex justify-end space-x-3 pt-4 border-t border-gray-700">
                        <Button
                          variant="outline"
                          onClick={() => setIsCreateThreadOpen(false)}
                          className="border-gray-600 text-white"
                        >
                          Cancel
                        </Button>
                        <Button
                          onClick={createThread}
                          disabled={!newThread.title.trim() || !newThread.content.trim()}
                          className="bg-purple-600 hover:bg-purple-700 text-white"
                        >
                          Create Thread {!user && "(as Anonymous)"}
                        </Button>
                      </div>
                    </DialogContent>
                  </Dialog>
                </div>
              </div>

<div className="space-y-4">
                {filteredThreads.length === 0 ? (
                  <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm text-center py-12">
                    <CardContent>
                      <MessageSquare className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                      <h3 className="text-xl font-semibold text-white mb-2">No threads found</h3>
                      <p className="text-gray-400 mb-6">
                        {selectedCategory === "All"
                          ? "Be the first to start a discussion!"
                          : `No threads in ${selectedCategory} category yet.`}
                      </p>
                      <Button
                        onClick={() => setIsCreateThreadOpen(true)}
                        className="bg-purple-600 hover:bg-purple-700 text-white"
                      >
                        <Plus className="w-4 h-4 mr-2" />
                        Create First Thread
                      </Button>
                    </CardContent>
                  </Card>
                ) : (
                  <div
                    className={
                      viewMode === "grid"
                        ? "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"
                        : viewMode === "compact"
                          ? "space-y-2"
                          : "space-y-4"
                    }
                  >
                    {filteredThreads.map((thread) => (
                      <Card
                        key={thread.id}
                        className={`bg-gray-800/50 border-gray-700 backdrop-blur-sm hover:bg-gray-800/70 transition-all duration-200 ${
                          thread.isPinned ? "ring-2 ring-yellow-600/50" : ""
                        } ${thread.isFeatured ? "ring-2 ring-purple-600/50" : ""} ${
                          viewMode === "compact" ? "py-2" : ""
                        }`}
                      >
                        <CardHeader className={viewMode === "compact" ? "py-2" : ""}>
                          <div className="flex items-start space-x-4">
                            {viewMode !== "compact" && (
                              <VotingSystem itemId={thread.id} itemType="thread" currentUser={user} />
                            )}

<div className="flex-1 min-w-0">
                              <div className="flex items-center space-x-2 mb-2 flex-wrap">
                                {thread.isPinned && (
                                  <Badge className="bg-yellow-600/20 text-yellow-300 border-yellow-600/30">
                                    <Pin className="w-3 h-3 mr-1" />
                                    Pinned
                                  </Badge>
                                )}
                                {thread.isLocked && (
                                  <Badge className="bg-red-600/20 text-red-300 border-red-600/30">
                                    <Lock className="w-3 h-3 mr-1" />
                                    Locked
                                  </Badge>
                                )}
                                {thread.isAnnouncement && (
                                  <Badge className="bg-red-600/20 text-red-300 border-red-600/30">
                                    <Megaphone className="w-3 h-3 mr-1" />
                                    Announcement
                                  </Badge>
                                )}
                                {thread.isFeatured && (
                                  <Badge className="bg-purple-600/20 text-purple-300 border-purple-600/30">
                                    <Star className="w-3 h-3 mr-1" />
                                    Featured
                                  </Badge>
                                )}
                                {thread.isNSFW && (
                                  <Badge className="bg-red-600/20 text-red-300 border-red-600/30">
                                    <XCircle className="w-3 h-3 mr-1" />
                                    NSFW
                                  </Badge>
                                )}
                                <Badge className={categoryColors[thread.category as keyof typeof categoryColors]}>
                                  {thread.category === "Updates" && <Megaphone className="w-3 h-3 mr-1" />}
                                  {thread.category}
                                </Badge>
                                {thread.author === "Anonymous" && (
                                  <Badge className="bg-gray-600/20 text-gray-400">Guest Post</Badge>
                                )}
                              </div>

<Link href={`/forums/thread/${thread.id}`}>
                                <CardTitle
                                  className={`text-white hover:text-purple-300 transition-colors cursor-pointer ${
                                    viewMode === "compact" ? "text-base" : "text-lg"
                                  }`}
                                >
                                  {thread.title}
                                </CardTitle>
                              </Link>

{viewMode !== "compact" && (
                                <p className="text-gray-400 text-sm mt-2 line-clamp-2">{thread.content}</p>
                              )}

{thread.tags && thread.tags.length > 0 && viewMode !== "compact" && (
                                <div className="flex flex-wrap gap-1 mt-2">
                                  {thread.tags.slice(0, 3).map((tag) => (
                                    <Badge
                                      key={tag}
                                      className="bg-gray-600/20 text-gray-400 text-xs cursor-pointer hover:bg-purple-600/20 hover:text-purple-300"
                                      onClick={() => {
                                        setSearchFilters((prev) => ({
                                          ...prev,
                                          tags: prev.tags.includes(tag) ? prev.tags : [...prev.tags, tag],
                                        }))
                                      }}
                                    >
                                      #{tag}
                                    </Badge>
                                  ))}
                                  {thread.tags.length > 3 && (
                                    <Badge className="bg-gray-600/20 text-gray-400 text-xs">
                                      +{thread.tags.length - 3} more
                                    </Badge>
                                  )}
                                </div>
                              )}

{thread.files && thread.files.length > 0 && viewMode !== "compact" && (
                                <div className="flex items-center space-x-1 mt-2 text-xs text-gray-400">
                                  <Paperclip className="w-3 h-3" />
                                  <span>
                                    {thread.files.length} attachment{thread.files.length !== 1 ? "s" : ""}
                                  </span>
                                </div>
                              )}

<div className="flex items-center justify-between mt-3">
                                <div className="flex items-center space-x-4 text-sm text-gray-400">
                                  <button
                                    onClick={() => openUserProfile(thread.author)}
                                    className="flex items-center space-x-1 hover:text-white transition-colors"
                                    disabled={thread.author === "Anonymous"}
                                  >
                                    <User className="w-4 h-4" />
                                    <span>
                                      {thread.author}
                                      {thread.author === "Anonymous" && " (Guest)"}
                                    </span>
                                  </button>
                                  <div className="flex items-center space-x-1">
                                    <Clock className="w-4 h-4" />
                                    <span>{formatDate(thread.createdAt)}</span>
                                  </div>
                                </div>

<div className="flex items-center space-x-4">
                                  <div className="flex items-center space-x-4 text-sm text-gray-400">
                                    <div className="flex items-center space-x-1">
                                      <Eye className="w-4 h-4" />
                                      <span>{thread.views}</span>
                                    </div>
                                    <div className="flex items-center space-x-1">
                                      <MessageCircle className="w-4 h-4" />
                                      <span>{thread.replies}</span>
                                    </div>
                                    {(thread.upvotes || 0) > 0 && (
                                      <div className="flex items-center space-x-1 text-green-400">
                                        <ThumbsUp className="w-4 h-4" />
                                        <span>{thread.upvotes}</span>
                                      </div>
                                    )}
                                  </div>

<div className="flex items-center space-x-1">
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => toggleBookmark(thread.id)}
                                      className={`p-1 ${
                                        bookmarkedThreads.includes(thread.id)
                                          ? "text-yellow-400 hover:text-yellow-300"
                                          : "text-gray-400 hover:text-yellow-400"
                                      }`}
                                      title={
                                        bookmarkedThreads.includes(thread.id) ? "Remove bookmark" : "Bookmark thread"
                                      }
                                    >
                                      {bookmarkedThreads.includes(thread.id) ? (
                                        <BookmarkCheck className="w-4 h-4" />
                                      ) : (
                                        <Bookmark className="w-4 h-4" />
                                      )}
                                    </Button>

<Button
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => toggleSubscription(thread.id)}
                                      className={`p-1 ${
                                        subscribedThreads.includes(thread.id)
                                          ? "text-blue-400 hover:text-blue-300"
                                          : "text-gray-400 hover:text-blue-400"
                                      }`}
                                      title={
                                        subscribedThreads.includes(thread.id)
                                          ? "Unsubscribe from notifications"
                                          : "Subscribe to notifications"
                                      }
                                    >
                                      {subscribedThreads.includes(thread.id) ? (
                                        <BellOff className="w-4 h-4" />
                                      ) : (
                                        <Bell className="w-4 h-4" />
                                      )}
                                    </Button>

{isModerator && (
                                      <>
                                        {!thread.isPinned && (
                                          <Button
                                            variant="ghost"
                                            size="sm"
                                            onClick={() => pinThread(thread.id)}
                                            className="text-yellow-400 hover:text-yellow-300 p-1"
                                            title="Pin thread"
                                          >
                                            <Pin className="w-4 h-4" />
                                          </Button>
                                        )}
                                        {!thread.isLocked && (
                                          <Button
                                            variant="ghost"
                                            size="sm"
                                            onClick={() => lockThread(thread.id)}
                                            className="text-red-400 hover:text-red-300 p-1"
                                            title="Lock thread"
                                          >
                                            <Lock className="w-4 h-4" />
                                          </Button>
                                        )}
                                        <Button
                                          variant="ghost"
                                          size="sm"
                                          onClick={() => deleteThread(thread.id)}
                                          className="text-red-400 hover:text-red-300 p-1"
                                          title="Delete thread"
                                        >
                                          <Trash2 className="w-4 h-4" />
                                        </Button>
                                      </>
                                    )}

{user && user.username !== thread.author && thread.author !== "Anonymous" && (
                                      <Button
                                        variant="ghost"
                                        size="sm"
                                        onClick={() => openReportModal(thread)}
                                        className="text-red-400 hover:text-red-300 p-1"
                                        title="Report thread"
                                      >
                                        <Flag className="w-4 h-4" />
                                      </Button>
                                    )}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </CardHeader>
                      </Card>
                    ))}
                  </div>
                )}
              </div>
            </main>
          </div>
        </div>

<footer className="border-t border-gray-800 bg-black/50 backdrop-blur-sm mt-20">
          <div className="container mx-auto px-4 py-12">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div className="space-y-4">
                <div className="flex items-center space-x-3">
                  <Image src="/prism-logo.png" alt="Prism Logo" width={32} height={32} />
                  <span className="text-xl font-bold text-white">Prism</span>
                </div>
                <p className="text-gray-400 text-sm">
                  The ultimate Roblox script executor with advanced features and community-driven development.
                </p>
                <div className="flex items-center space-x-3">
                  <a
                    href="https://discord.gg/K98g2wDzKK"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    <Discord className="w-5 h-5" />
                  </a>
                  <a
                    href="https://github.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    <Github className="w-5 h-5" />
                  </a>
                  <a
                    href="https://twitter.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    <Twitter className="w-5 h-5" />
                  </a>
                  <a
                    href="https://youtube.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    <Youtube className="w-5 h-5" />
                  </a>
                </div>
              </div>

<div>
                <h4 className="text-white font-semibold mb-4">Navigation</h4>
                <div className="space-y-2">
                  <Link href="/" className="block text-gray-400 hover:text-white transition-colors text-sm">
                    Home
                  </Link>
                  <Link href="/team" className="block text-gray-400 hover:text-white transition-colors text-sm">
                    Team
                  </Link>
                  <Link href="/scripts" className="block text-gray-400 hover:text-white transition-colors text-sm">
                    Scripts
                  </Link>
                  <Link href="/forums" className="block text-gray-400 hover:text-white transition-colors text-sm">
                    Forums
                  </Link>
                </div>
              </div>

<div>
                <h4 className="text-white font-semibold mb-4">Community</h4>
                <div className="space-y-2">
                  <a
                    href="https://discord.gg/K98g2wDzKK"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="block text-gray-400 hover:text-white transition-colors text-sm"
                  >
                    Discord Server
                  </a>
                  <Link href="/forums" className="block text-gray-400 hover:text-white transition-colors text-sm">
                    Community Forums
                  </Link>
                  <Link href="/team" className="block text-gray-400 hover:text-white transition-colors text-sm">
                    Meet the Team
                  </Link>
                </div>
              </div>

<div>
                <h4 className="text-white font-semibold mb-4">Resources</h4>
                <div className="space-y-2">
                  <Link href="/scripts" className="block text-gray-400 hover:text-white transition-colors text-sm">
                    Script Library
                  </Link>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={exportForumData}
                    disabled={isExporting}
                    className="text-gray-400 hover:text-white p-0 h-auto font-normal text-sm justify-start"
                  >
                    <Download className="w-3 h-3 mr-1" />
                    {isExporting ? "Exporting..." : "Export Forum Data"}
                  </Button>
                </div>
              </div>
            </div>

<div className="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
              <p className="text-gray-400 text-sm">© 2025 Prism. All rights reserved.</p>
              <div className="flex items-center space-x-4 mt-4 md:mt-0">
                <span className="text-gray-500 text-xs">Enhanced Forums v2.0</span>
                <div className="flex items-center space-x-2 text-xs text-gray-500">
                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                  <span>System Online</span>
                </div>
              </div>
            </div>
          </div>
        </footer>

<EnhancedAuthModal
          isOpen={isAuthModalOpen}
          onClose={() => setIsAuthModalOpen(false)}
          onAuthSuccess={handleAuthSuccess}
        />

<AdminPanel isOpen={isAdminPanelOpen} onClose={() => setIsAdminPanelOpen(false)} currentUser={user} />

<UserProfileModal
          isOpen={isProfileModalOpen}
          onClose={() => setIsProfileModalOpen(false)}
          username={profileModalUsername || user?.username || ""}
          currentUser={user}
        />

<NotificationsPanel
          isOpen={isNotificationsOpen}
          onClose={() => setIsNotificationsOpen(false)}
          currentUser={user}
        />

<DirectMessages
          isOpen={isDirectMessagesOpen}
          onClose={() => setIsDirectMessagesOpen(false)}
          currentUser={user}
        />

<SearchModal
          isOpen={isSearchModalOpen}
          onClose={() => setIsSearchModalOpen(false)}
          threads={threads}
          currentUser={user}
        />

<Dialog open={showShareModal} onOpenChange={setShowShareModal}>
          <DialogContent className="bg-gray-800 border-gray-700 text-white">
            <DialogHeader>
              <DialogTitle>Share Forum Data</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <p className="text-gray-300 text-sm">
                Share this URL to let others import your forum data into their local storage:
              </p>
              <div className="flex space-x-2">
                <Input value={shareUrl} readOnly className="bg-gray-900 border-gray-600 text-white font-mono text-xs" />
                <Button onClick={copyShareUrl} className="bg-purple-600 hover:bg-purple-700">
                  Copy
                </Button>
              </div>
              <p className="text-gray-400 text-xs">
                This URL contains all forum threads and replies. Anyone with this link can import the data.
              </p>
            </div>
          </DialogContent>
        </Dialog>

<Dialog open={isSettingsOpen} onOpenChange={setIsSettingsOpen}>
          <DialogContent className="bg-gray-800 border-gray-700 text-white max-w-2xl">
            <DialogHeader>
              <DialogTitle>Forum Settings</DialogTitle>
            </DialogHeader>
            <Tabs defaultValue="import" className="w-full">
              <TabsList className="grid w-full grid-cols-2 bg-gray-700">
                <TabsTrigger value="import">Import Data</TabsTrigger>
                <TabsTrigger value="export">Export Data</TabsTrigger>
              </TabsList>

<TabsContent value="import" className="space-y-4 mt-6">
                <div>
                  <label className="text-sm font-medium text-gray-300 mb-2 block">Import Forum Data</label>
                  <Textarea
                    value={importData}
                    onChange={(e) => setImportData(e.target.value)}
                    placeholder="Paste forum data JSON or encoded string here..."
                    className="bg-gray-900 border-gray-600 text-white min-h-32 font-mono text-xs"
                  />
                </div>
                <Button
                  onClick={importForumData}
                  disabled={!importData.trim() || isImporting}
                  className="bg-green-600 hover:bg-green-700"
                >
                  <Upload className="w-4 h-4 mr-2" />
                  {isImporting ? "Importing..." : "Import Data"}
                </Button>
              </TabsContent>

<TabsContent value="export" className="space-y-4 mt-6">
                <div className="space-y-4">
                  <p className="text-gray-300 text-sm">
                    Export all forum data to share with others or backup your discussions.
                  </p>
                  <Button
                    onClick={exportForumData}
                    disabled={isExporting}
                    className="bg-purple-600 hover:bg-purple-700"
                  >
                    <Download className="w-4 h-4 mr-2" />
                    {isExporting ? "Generating..." : "Generate Share Link"}
                  </Button>
                </div>
              </TabsContent>
            </Tabs>
          </DialogContent>
        </Dialog>

<Dialog open={isStatsOpen} onOpenChange={setIsStatsOpen}>
          <DialogContent className="bg-gray-800 border-gray-700 text-white max-w-4xl">
            <DialogHeader>
              <DialogTitle>Forum Statistics</DialogTitle>
            </DialogHeader>
            {forumStats && (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <Card className="bg-gray-700/50 border-gray-600">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm text-gray-300">Total Threads</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold text-white">{forumStats.totalThreads}</div>
                  </CardContent>
                </Card>

<Card className="bg-gray-700/50 border-gray-600">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm text-gray-300">Total Replies</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold text-white">{forumStats.totalReplies}</div>
                  </CardContent>
                </Card>

<Card className="bg-gray-700/50 border-gray-600">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm text-gray-300">Today's Posts</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold text-green-400">{forumStats.todaysPosts}</div>
                  </CardContent>
                </Card>

<Card className="bg-gray-700/50 border-gray-600 md:col-span-3">
                  <CardHeader>
                    <CardTitle className="text-white">Category Distribution</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                      {categories.map((category) => (
                        <div key={category.id} className="text-center">
                          <div className="text-lg font-semibold text-white">{categoryStats[category.id] || 0}</div>
                          <div className="text-sm text-gray-400">{category.name}</div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            )}
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/forums/thread/[id]/page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import {
  ArrowLeft,
  User,
  Clock,
  MessageCircle,
  Eye,
  Send,
  Reply,
  Trash2,
  Flag,
  Megaphone,
  RefreshCw,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useState, useEffect, useCallback } from "react"
import { useParams } from "next/navigation"
import { FileUpload, type UploadedFile } from "@/components/file-upload"
import { FileDisplay } from "@/components/file-display"
import { VotingSystem } from "@/components/voting-system"
import { ReportModal } from "@/components/report-modal"
import { UserSystem, type UserProfile } from "@/lib/user-system"
import { SharedStorage } from "@/lib/shared-storage"

interface Thread {
  id: string
  title: string
  content: string
  author: string
  createdAt: string
  replies: number
  views: number
  category: string
  files?: UploadedFile[]
}

interface ThreadReply {
  id: string
  threadId: string
  content: string
  author: string
  createdAt: string
  files?: UploadedFile[]
  replyTo?: string
  replyToAuthor?: string
}

export default function ThreadPage() {
  const params = useParams()
  const threadId = params.id as string

const [thread, setThread] = useState<Thread | null>(null)
  const [replies, setReplies] = useState<ThreadReply[]>([])
  const [user, setUser] = useState<UserProfile | null>(null)
  const [newReply, setNewReply] = useState("")
  const [replyFiles, setReplyFiles] = useState<UploadedFile[]>([])
  const [replyingTo, setReplyingTo] = useState<{ id: string; author: string } | null>(null)
  const [reportModal, setReportModal] = useState<{
    isOpen: boolean
    itemId: string
    itemType: "thread" | "reply"
    itemAuthor: string
    itemContent: string
  }>({
    isOpen: false,
    itemId: "",
    itemType: "thread",
    itemAuthor: "",
    itemContent: "",
  })
  const [isLoadingThread, setIsLoadingThread] = useState(true)
  const [isLoadingReplies, setIsLoadingReplies] = useState(true)
  const [isSubmittingReply, setIsSubmittingReply] = useState(false)
  const [isRefreshing, setIsRefreshing] = useState(false)

const isAdmin = user?.username === "zavi"

const loadThreadData = useCallback(async () => {
    if (!threadId) return

try {
      setIsRefreshing(true)
      console.log("Loading thread data for ID:", threadId)

// Load thread
      const threads = await SharedStorage.getThreads()
      const foundThread = threads.find((t: Thread) => t.id === threadId)

if (foundThread) {
        console.log("Found thread:", foundThread.title)
        setThread(foundThread)

// Increment view count
        const updatedThread = { ...foundThread, views: foundThread.views + 1 }
        await SharedStorage.updateThread(threadId, { views: updatedThread.views })
        setThread(updatedThread)
      } else {
        console.log("Thread not found")
        setThread(null)
      }
      setIsLoadingThread(false)

// Load replies
      const threadReplies = await SharedStorage.getRepliesForThread(threadId)
      console.log("Found", threadReplies.length, "replies for thread")
      setReplies(threadReplies.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()))
      setIsLoadingReplies(false)
    } catch (error) {
      console.error("Error loading thread data:", error)
      setIsLoadingThread(false)
      setIsLoadingReplies(false)
    } finally {
      setIsRefreshing(false)
    }
  }, [threadId])

const handleManualRefresh = () => {
    console.log("Manual refresh triggered for thread")
    loadThreadData()
  }

useEffect(() => {
    const loadUser = async () => {
      const currentUser = await UserSystem.getCurrentUser()
      setUser(currentUser)
    }
    loadUser()
  }, [])

useEffect(() => {
    loadThreadData()

// Set up cross-tab sync
    const cleanup = SharedStorage.setupCrossTabSync(() => {
      console.log("Cross-tab sync triggered, reloading thread data...")
      loadThreadData()
    })

return cleanup
  }, [loadThreadData])

// Auto-refresh every 30 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      console.log("Auto-refresh triggered for thread")
      loadThreadData()
    }, 30000)

return () => clearInterval(interval)
  }, [loadThreadData])

const submitReply = async () => {
    if (!newReply.trim()) return

if (user && isUserMuted("replying")) {
      alert("You are currently muted from replying.")
      return
    }

setIsSubmittingReply(true)

const reply: ThreadReply = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      threadId: threadId,
      content: newReply.trim(),
      author: user?.username || "Anonymous",
      createdAt: new Date().toISOString(),
      files: replyFiles,
      replyTo: replyingTo?.id,
      replyToAuthor: replyingTo?.author,
    }

console.log("Submitting reply:", reply.content.substring(0, 50) + "...", "by", reply.author)

try {
      const success = await SharedStorage.addReply(reply)

if (success) {
        // Reload thread data to get updated reply count and new replies
        await loadThreadData()

if (user) {
          const updatedUser = { ...user, postCount: user.postCount + 1 }
          setUser(updatedUser)
          UserSystem.updateUser(updatedUser)
          UserSystem.saveCurrentUser(updatedUser)
        }

setNewReply("")
        setReplyFiles([])
        setReplyingTo(null)

// Show success message
        alert("Reply posted successfully!")
      } else {
        alert("Failed to post reply. Please try again.")
      }
    } catch (error) {
      console.error("Error submitting reply:", error)
      alert("Failed to post reply. Please try again.")
    } finally {
      setIsSubmittingReply(false)
    }
  }

const deleteReply = async (replyId: string) => {
    if (!user || !isAdmin) return

if (confirm("Are you sure you want to delete this reply?")) {
      try {
        const success = await SharedStorage.deleteReply(replyId)
        if (success) {
          await loadThreadData()
          alert("Reply deleted successfully!")
        } else {
          alert("Failed to delete reply.")
        }
      } catch (error) {
        console.error("Error deleting reply:", error)
        alert("Failed to delete reply.")
      }
    }
  }

const openReportModal = (item: Thread | ThreadReply, type: "thread" | "reply") => {
    if (!user) {
      alert("Please log in to report content.")
      return
    }

if (isUserMuted("reporting")) {
      alert("You are currently muted from reporting content.")
      return
    }

setReportModal({
      isOpen: true,
      itemId: item.id,
      itemType: type,
      itemAuthor: item.author,
      itemContent: item.content,
    })
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60))

return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
  }

if (isLoadingThread) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-400 mx-auto mb-4"></div>
          <p className="text-gray-400">Loading thread...</p>
        </div>
      </div>
    )
  }

if (!thread) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-white mb-4">Thread Not Found</h1>
          <p className="text-gray-400 mb-6">The thread you're looking for doesn't exist or has been deleted.</p>
          <Link href="/forums">
            <Button className="bg-purple-600 hover:bg-purple-700">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Forums
            </Button>
          </Link>
        </div>
      </div>
    )
  }

<div className="relative z-10">
        <nav className="border-b border-gray-800 bg-black/50 backdrop-blur-sm sticky top-0 z-50">
          <div className="container mx-auto px-4 py-4 flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <Image src="/prism-logo.png" alt="Prism Logo" width={40} height={40} />
              <span className="text-2xl font-bold text-white">Prism</span>
            </div>
            <div className="flex items-center space-x-6">
              <Link href="/" className="text-gray-300 hover:text-white transition-colors">
                Home
              </Link>
              <Link href="/team" className="text-gray-300 hover:text-white transition-colors">
                Team
              </Link>
              <Link href="/scripts" className="text-gray-300 hover:text-white transition-colors">
                Scripts
              </Link>
              <Link href="/forums" className="text-white font-semibold">
                Forums
              </Link>

{user ? (
                <div className="flex items-center space-x-2 bg-purple-600/20 px-3 py-1 rounded-full">
                  <div className="w-6 h-6 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-xs font-bold text-white overflow-hidden">
                    {user.avatar ? (
                      <Image
                        src={user.avatar || "/placeholder.svg"}
                        alt={user.username}
                        width={24}
                        height={24}
                        className="w-full h-full object-cover"
                      />
                    ) : (
                      user.username.charAt(0).toUpperCase()
                    )}
                  </div>
                  <span className="text-purple-300 text-sm">{user.username}</span>
                </div>
              ) : (
                <div className="flex items-center space-x-2">
                  <span className="text-sm text-gray-400">👀 Browsing as Guest</span>
                </div>
              )}
            </div>
          </div>
        </nav>

<div className="container mx-auto px-4 pt-8">
          <Link href="/forums">
            <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-800 bg-transparent">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Forums
            </Button>
          </Link>
        </div>

<div className="flex-1">
                  <div className="flex items-center space-x-3 mb-4">
                    <Badge className={categoryColors[thread.category as keyof typeof categoryColors]}>
                      {thread.category === "Updates" && <Megaphone className="w-3 h-3 mr-1" />}
                      {thread.category}
                    </Badge>
                    <div className="flex items-center space-x-4 text-sm text-gray-400">
                      <div className="flex items-center space-x-1">
                        <Eye className="w-4 h-4" />
                        <span>{thread.views}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <MessageCircle className="w-4 h-4" />
                        <span>{replies.length}</span>
                      </div>
                    </div>
                    {thread.author === "Anonymous" && (
                      <Badge className="bg-gray-600/20 text-gray-400">Guest Post</Badge>
                    )}
                  </div>

<CardTitle className="text-white text-2xl mb-4">{thread.title}</CardTitle>

<div className="prose prose-invert max-w-none mb-6">
                    <p className="text-gray-300 whitespace-pre-wrap">{thread.content}</p>
                  </div>

{thread.files && thread.files.length > 0 && (
                    <div className="mb-6">
                      <h4 className="text-sm font-medium text-gray-300 mb-3">Attachments:</h4>
                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        {thread.files.map((file, index) => (
                          <FileDisplay key={index} file={file} />
                        ))}
                      </div>
                    </div>
                  )}

<section className="container mx-auto px-4 pb-8">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold text-white">Replies ({isLoadingReplies ? "..." : replies.length})</h2>
          </div>

{isLoadingReplies ? (
            <div className="text-center py-8">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-400 mx-auto mb-4"></div>
              <p className="text-gray-400">Loading replies...</p>
            </div>
          ) : (
            <div className="space-y-4">
              {replies.map((reply) => (
                <Card key={reply.id} className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
                  <CardHeader>
                    <div className="flex items-start space-x-4">
                      <VotingSystem itemId={reply.id} itemType="reply" currentUser={user} />

<div className="flex-1">
                        {reply.replyTo && reply.replyToAuthor && (
                          <div className="bg-gray-700/50 border-l-4 border-purple-600 pl-4 py-2 mb-4 rounded-r">
                            <p className="text-sm text-gray-400">
                              <Reply className="w-3 h-3 inline mr-1" />
                              Replying to <span className="text-purple-400">{reply.replyToAuthor}</span>
                            </p>
                          </div>
                        )}

<div className="prose prose-invert max-w-none mb-4">
                          <p className="text-gray-300 whitespace-pre-wrap">{reply.content}</p>
                        </div>

{reply.files && reply.files.length > 0 && (
                          <div className="mb-4">
                            <h4 className="text-sm font-medium text-gray-300 mb-3">Attachments:</h4>
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                              {reply.files.map((file, index) => (
                                <FileDisplay key={index} file={file} />
                              ))}
                            </div>
                          </div>
                        )}

<div className="flex items-center justify-between pt-4 border-t border-gray-700">
                          <div className="flex items-center space-x-2">
                            <User className="w-4 h-4 text-gray-400" />
                            <span className="text-sm text-gray-400">
                              by {reply.author}
                              {reply.author === "Anonymous" && " (Guest)"}
                            </span>
                          </div>
                          <div className="flex items-center space-x-4">
                            <div className="flex items-center space-x-2 text-sm text-gray-400">
                              <Clock className="w-4 h-4" />
                              <span>{formatDate(reply.createdAt)}</span>
                            </div>
                            <div className="flex items-center space-x-2">
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => setReplyingTo({ id: reply.id, author: reply.author })}
                                className="text-purple-400 hover:text-purple-300 hover:bg-purple-900/20 p-1"
                                title="Reply to this comment"
                              >
                                <Reply className="w-4 h-4" />
                              </Button>
                              {user && user.username !== reply.author && reply.author !== "Anonymous" && (
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => openReportModal(reply, "reply")}
                                  className="text-red-400 hover:text-red-300 hover:bg-red-900/20 p-1"
                                  title="Report reply"
                                >
                                  <Flag className="w-4 h-4" />
                                </Button>
                              )}
                              {isAdmin && (
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => deleteReply(reply.id)}
                                  className="text-red-400 hover:text-red-300 hover:bg-red-900/20 p-1"
                                  title="Delete reply (Admin)"
                                >
                                  <Trash2 className="w-4 h-4" />
                                </Button>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardHeader>
                </Card>
              ))}

{replies.length === 0 && (
                <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm text-center py-12">
                  <CardContent>
                    <MessageCircle className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                    <h3 className="text-xl font-semibold text-white mb-2">No replies yet</h3>
                    <p className="text-gray-400 mb-6">Be the first to reply to this thread!</p>
                  </CardContent>
                </Card>
              )}
            </div>
          )}
        </section>

<section className="container mx-auto px-4 pb-20">
          <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm">
            <CardHeader>
              <CardTitle className="text-white">
                Add Reply {!user && "(As Guest)"}
                {replyingTo && (
                  <span className="text-sm font-normal text-purple-400 ml-2">
                    - Replying to {replyingTo.author}
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setReplyingTo(null)}
                      className="ml-2 text-gray-400 hover:text-white p-1"
                    >
                      ✕
                    </Button>
                  </span>
                )}
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {!user && (
                <div className="bg-blue-900/20 border border-blue-600/30 rounded-lg p-4">
                  <p className="text-blue-300 text-sm">
                    <strong>Guest Mode:</strong> You're replying as "Anonymous". Create an account to reply with your
                    username and access more features.
                  </p>
                </div>
              )}
              <Textarea
                value={newReply}
                onChange={(e) => setNewReply(e.target.value)}
                placeholder="Write your reply..."
                className="bg-gray-800 border-gray-600 text-white min-h-32"
              />
              <div>
                <label className="text-sm font-medium text-gray-300 mb-2 block">Attachments</label>
                <FileUpload onFilesChange={setReplyFiles} maxFiles={3} maxSizePerFile={5} />
              </div>
              <Button
                onClick={submitReply}
                disabled={!newReply.trim() || isSubmittingReply}
                className="w-full bg-purple-600 hover:bg-purple-700"
              >
                <Send className="w-4 h-4 mr-2" />
                {isSubmittingReply ? "Posting..." : `Post Reply ${!user ? "(as Anonymous)" : ""}`}
              </Button>
            </CardContent>
          </Card>
        </section>

<footer className="border-t border-gray-800 bg-black/50 backdrop-blur-sm">
          <div className="container mx-auto px-4 py-12">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <div className="flex items-center space-x-3 mb-4 md:mb-0">
                <Image src="/prism-logo.png" alt="Prism Logo" width={32} height={32} />
                <span className="text-xl font-bold text-white">Prism</span>
              </div>
              <div className="flex items-center space-x-6">
                <Link href="/" className="text-gray-400 hover:text-white transition-colors">
                  Home
                </Link>
                <Link href="/team" className="text-gray-400 hover:text-white transition-colors">
                  Team
                </Link>
                <Link href="/scripts" className="text-gray-400 hover:text-white transition-colors">
                  Scripts
                </Link>
                <a
                  href="https://discord.gg/K98g2wDzKK"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-400 hover:text-white transition-colors"
                >
                  Discord
                </a>
              </div>
            </div>
            <div className="border-t border-gray-800 mt-8 pt-8 text-center">
              <p className="text-gray-400 text-sm">© 2025 Prism. All rights reserved.</p>
            </div>
          </div>
        </footer>

<ReportModal
          isOpen={reportModal.isOpen}
          onClose={() => setReportModal((prev) => ({ ...prev, isOpen: false }))}
          itemId={reportModal.itemId}
          itemType={reportModal.itemType}
          itemAuthor={reportModal.itemAuthor}
          itemContent={reportModal.itemContent}
          currentUser={user}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/forums/threads/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { promises as fs } from "fs"
import path from "path"

const DATA_DIR = path.join(process.cwd(), "data")
const THREADS_FILE = path.join(DATA_DIR, "threads.json")

// Ensure data directory exists
async function ensureDataDir() {
  try {
    await fs.access(DATA_DIR)
  } catch {
    await fs.mkdir(DATA_DIR, { recursive: true })
    console.log("Created data directory:", DATA_DIR)
  }
}

// Read threads from file
async function readThreads() {
  try {
    await ensureDataDir()
    const data = await fs.readFile(THREADS_FILE, "utf-8")
    const threads = JSON.parse(data)
    console.log("Read", Array.isArray(threads) ? threads.length : 0, "threads from file")
    return Array.isArray(threads) ? threads : []
  } catch (error) {
    console.log("No threads file found, starting with empty array")
    return []
  }
}

// Write threads to file
async function writeThreads(threads: any[]) {
  try {
    await ensureDataDir()
    await fs.writeFile(THREADS_FILE, JSON.stringify(threads, null, 2))
    console.log("Wrote", threads.length, "threads to file")
    return true
  } catch (error) {
    console.error("Error writing threads:", error)
    return false
  }
}

export async function GET() {
  try {
    console.log("GET /api/forums/threads")
    const threads = await readThreads()
    return NextResponse.json({ success: true, threads })
  } catch (error) {
    console.error("GET /api/forums/threads error:", error)
    return NextResponse.json({ success: false, error: "Failed to fetch threads" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    console.log("POST /api/forums/threads")
    const { thread } = await request.json()

console.log("Received thread data:", {
      id: thread?.id,
      title: thread?.title,
      author: thread?.author,
      category: thread?.category,
    })

if (!thread || !thread.id || !thread.title || !thread.content) {
      console.error("Invalid thread data:", thread)
      return NextResponse.json({ success: false, error: "Invalid thread data" }, { status: 400 })
    }

const threads = await readThreads()

// Check if thread already exists
    const existingIndex = threads.findIndex((t: any) => t.id === thread.id)
    if (existingIndex !== -1) {
      console.log("Thread already exists:", thread.id)
      return NextResponse.json({ success: false, error: "Thread already exists" }, { status: 409 })
    }

// Add thread to beginning of array
    threads.unshift({
      ...thread,
      createdAt: thread.createdAt || new Date().toISOString(),
      replies: thread.replies || 0,
      views: thread.views || 0,
    })

const success = await writeThreads(threads)

if (success) {
      console.log("Thread added successfully:", thread.id)
      return NextResponse.json({ success: true, thread })
    } else {
      console.error("Failed to save thread to file")
      return NextResponse.json({ success: false, error: "Failed to save thread" }, { status: 500 })
    }
  } catch (error) {
    console.error("POST /api/forums/threads error:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

export async function PUT(request: NextRequest) {
  try {
    console.log("PUT /api/forums/threads")
    const { id, updates } = await request.json()

if (!id || !updates) {
      return NextResponse.json({ success: false, error: "Invalid update data" }, { status: 400 })
    }

const threads = await readThreads()
    const index = threads.findIndex((t: any) => t.id === id)

if (index === -1) {
      return NextResponse.json({ success: false, error: "Thread not found" }, { status: 404 })
    }

// Update thread
    threads[index] = { ...threads[index], ...updates }

const success = await writeThreads(threads)

if (success) {
      console.log("Thread updated successfully:", id)
      return NextResponse.json({ success: true, thread: threads[index] })
    } else {
      return NextResponse.json({ success: false, error: "Failed to update thread" }, { status: 500 })
    }
  } catch (error) {
    console.error("PUT /api/forums/threads error:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

export async function DELETE(request: NextRequest) {
  try {
    console.log("DELETE /api/forums/threads")
    const { id } = await request.json()

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

const threads = await readThreads()
    const filteredThreads = threads.filter((t: any) => t.id !== id)

if (threads.length === filteredThreads.length) {
      return NextResponse.json({ success: false, error: "Thread not found" }, { status: 404 })
    }

const success = await writeThreads(filteredThreads)

if (success) {
      console.log("Thread deleted successfully:", id)
      return NextResponse.json({ success: true })
    } else {
      return NextResponse.json({ success: false, error: "Failed to delete thread" }, { status: 500 })
    }
  } catch (error) {
    console.error("DELETE /api/forums/threads error:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/forums/replies/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { promises as fs } from "fs"
import path from "path"

const DATA_DIR = path.join(process.cwd(), "data")
const REPLIES_FILE = path.join(DATA_DIR, "replies.json")
const THREADS_FILE = path.join(DATA_DIR, "threads.json")

// Read replies from file
async function readReplies() {
  try {
    await ensureDataDir()
    const data = await fs.readFile(REPLIES_FILE, "utf-8")
    const replies = JSON.parse(data)
    console.log("Read", Array.isArray(replies) ? replies.length : 0, "replies from file")
    return Array.isArray(replies) ? replies : []
  } catch (error) {
    console.log("No replies file found, starting with empty array")
    return []
  }
}

// Write replies to file
async function writeReplies(replies: any[]) {
  try {
    await ensureDataDir()
    await fs.writeFile(REPLIES_FILE, JSON.stringify(replies, null, 2))
    console.log("Wrote", replies.length, "replies to file")
    return true
  } catch (error) {
    console.error("Error writing replies:", error)
    return false
  }
}

// Read threads from file
async function readThreads() {
  try {
    await ensureDataDir()
    const data = await fs.readFile(THREADS_FILE, "utf-8")
    const threads = JSON.parse(data)
    return Array.isArray(threads) ? threads : []
  } catch (error) {
    return []
  }
}

// Write threads to file
async function writeThreads(threads: any[]) {
  try {
    await ensureDataDir()
    await fs.writeFile(THREADS_FILE, JSON.stringify(threads, null, 2))
    return true
  } catch (error) {
    console.error("Error writing threads:", error)
    return false
  }
}

export async function GET() {
  try {
    console.log("GET /api/forums/replies")
    const replies = await readReplies()
    return NextResponse.json({ success: true, replies })
  } catch (error) {
    console.error("GET /api/forums/replies error:", error)
    return NextResponse.json({ success: false, error: "Failed to fetch replies" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    console.log("POST /api/forums/replies")
    const { reply } = await request.json()

console.log("Received reply data:", {
      id: reply?.id,
      threadId: reply?.threadId,
      author: reply?.author,
      content: reply?.content?.substring(0, 50) + "...",
    })

if (!reply || !reply.id || !reply.threadId || !reply.content) {
      console.error("Invalid reply data:", reply)
      return NextResponse.json({ success: false, error: "Invalid reply data" }, { status: 400 })
    }

const replies = await readReplies()

// Check if reply already exists
    const existingIndex = replies.findIndex((r: any) => r.id === reply.id)
    if (existingIndex !== -1) {
      console.log("Reply already exists:", reply.id)
      return NextResponse.json({ success: false, error: "Reply already exists" }, { status: 409 })
    }

// Add reply
    replies.push({
      ...reply,
      createdAt: reply.createdAt || new Date().toISOString(),
    })

// Update thread reply count
    const threads = await readThreads()
    const threadIndex = threads.findIndex((t: any) => t.id === reply.threadId)
    if (threadIndex !== -1) {
      threads[threadIndex].replies = (threads[threadIndex].replies || 0) + 1
      await writeThreads(threads)
      console.log("Updated thread reply count for:", reply.threadId)
    }

const success = await writeReplies(replies)

if (success) {
      console.log("Reply added successfully:", reply.id)
      return NextResponse.json({ success: true, reply })
    } else {
      console.error("Failed to save reply to file")
      return NextResponse.json({ success: false, error: "Failed to save reply" }, { status: 500 })
    }
  } catch (error) {
    console.error("POST /api/forums/replies error:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

export async function PUT(request: NextRequest) {
  try {
    console.log("PUT /api/forums/replies")
    const { id, updates } = await request.json()

if (!id || !updates) {
      return NextResponse.json({ success: false, error: "Invalid update data" }, { status: 400 })
    }

const replies = await readReplies()
    const index = replies.findIndex((r: any) => r.id === id)

if (index === -1) {
      return NextResponse.json({ success: false, error: "Reply not found" }, { status: 404 })
    }

// Update reply
    replies[index] = { ...replies[index], ...updates }

const success = await writeReplies(replies)

if (success) {
      console.log("Reply updated successfully:", id)
      return NextResponse.json({ success: true, reply: replies[index] })
    } else {
      return NextResponse.json({ success: false, error: "Failed to update reply" }, { status: 500 })
    }
  } catch (error) {
    console.error("PUT /api/forums/replies error:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}

export async function DELETE(request: NextRequest) {
  try {
    console.log("DELETE /api/forums/replies")
    const { id } = await request.json()

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

const replies = await readReplies()
    const reply = replies.find((r: any) => r.id === id)

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

// Update thread reply count
    const threads = await readThreads()
    const threadIndex = threads.findIndex((t: any) => t.id === reply.threadId)
    if (threadIndex !== -1 && threads[threadIndex].replies > 0) {
      threads[threadIndex].replies = threads[threadIndex].replies - 1
      await writeThreads(threads)
      console.log("Decremented thread reply count for:", reply.threadId)
    }

const filteredReplies = replies.filter((r: any) => r.id !== id)
    const success = await writeReplies(filteredReplies)

if (success) {
      console.log("Reply deleted successfully:", id)
      return NextResponse.json({ success: true })
    } else {
      return NextResponse.json({ success: false, error: "Failed to delete reply" }, { status: 500 })
    }
  } catch (error) {
    console.error("DELETE /api/forums/replies error:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/forums/clear/route.ts"
import { NextResponse } from "next/server"
import { promises as fs } from "fs"
import path from "path"

const DATA_DIR = path.join(process.cwd(), "data")
const THREADS_FILE = path.join(DATA_DIR, "threads.json")
const REPLIES_FILE = path.join(DATA_DIR, "replies.json")

export async function POST() {
  try {
    console.log("POST /api/forums/clear - Clearing all forum data")

// Clear threads
    try {
      await fs.writeFile(THREADS_FILE, JSON.stringify([], null, 2))
      console.log("Cleared threads file")
    } catch (error) {
      console.log("No threads file to clear")
    }

// Clear replies
    try {
      await fs.writeFile(REPLIES_FILE, JSON.stringify([], null, 2))
      console.log("Cleared replies file")
    } catch (error) {
      console.log("No replies file to clear")
    }

return NextResponse.json({ success: true, message: "All forum data cleared" })
  } catch (error) {
    console.error("POST /api/forums/clear error:", error)
    return NextResponse.json({ success: false, error: "Failed to clear forum data" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/shared-storage.ts"
/**
 * SharedStorage - True cross-user forum data persistence
 * Uses API routes to store data in JSON files on the server
 */

interface Thread {
  id: string
  title: string
  content: string
  author: string
  createdAt: string
  replies: number
  views: number
  category: string
  tags?: string[]
  files?: any[]
  isPinned?: boolean
  isLocked?: boolean
  isAnnouncement?: boolean
  isFeatured?: boolean
  isNSFW?: boolean
  sourceCode?: string
  codeLanguage?: string
  upvotes?: number
  downvotes?: number
  score?: number
}

interface Reply {
  id: string
  threadId: string
  content: string
  author: string
  createdAt: string
  files?: any[]
  replyTo?: string
  replyToAuthor?: string
  upvotes?: number
  downvotes?: number
  score?: number
}

// Cache for faster access
let threadsCache: Thread[] = []
let repliesCache: Reply[] = []
let lastFetch = 0
const CACHE_DURATION = 1000 // 1 second cache

async function apiCall(endpoint: string, options: RequestInit = {}): Promise<any> {
  try {
    console.log(`Making API call to ${endpoint}`, options.method || "GET")

const response = await fetch(endpoint, {
      ...options,
      headers: {
        "Content-Type": "application/json",
        ...options.headers,
      },
    })

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`API response from ${endpoint}:`, data.success ? "Success" : "Failed")
    return data
  } catch (error) {
    console.error(`API call failed for ${endpoint}:`, error)
    throw error
  }
}

export const SharedStorage = {
  async migrateOldData() {
    if (typeof window === "undefined") return

try {
      // Migrate old localStorage data to the server
      const oldThreads = localStorage.getItem("prism-forums-threads")
      const oldReplies = localStorage.getItem("prism-forums-replies")

if (oldThreads) {
        const threads = JSON.parse(oldThreads)
        if (Array.isArray(threads) && threads.length > 0) {
          console.log("Migrating", threads.length, "threads to server")
          for (const thread of threads) {
            try {
              await this.addThread(thread)
            } catch (error) {
              console.error("Failed to migrate thread:", thread.id, error)
            }
          }
        }
        localStorage.removeItem("prism-forums-threads")
      }

if (oldReplies) {
        const replies = JSON.parse(oldReplies)
        if (Array.isArray(replies) && replies.length > 0) {
          console.log("Migrating", replies.length, "replies to server")
          for (const reply of replies) {
            try {
              await this.addReply(reply)
            } catch (error) {
              console.error("Failed to migrate reply:", reply.id, error)
            }
          }
        }
        localStorage.removeItem("prism-forums-replies")
      }
    } catch (error) {
      console.error("Migration error:", error)
    }
  },

async getThreads(): Promise<Thread[]> {
    const now = Date.now()

// Return cache if it's fresh
    if (threadsCache.length > 0 && now - lastFetch < CACHE_DURATION) {
      return threadsCache
    }

try {
      const data = await apiCall("/api/forums/threads")

if (data.success && Array.isArray(data.threads)) {
        threadsCache = data.threads.sort(
          (a: Thread, b: Thread) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
        )
        lastFetch = now

// Save to localStorage as backup
        if (typeof window !== "undefined") {
          localStorage.setItem("prism-threads-backup", JSON.stringify(threadsCache))
        }

console.log("Loaded", threadsCache.length, "threads from server")
        return threadsCache
      }
    } catch (error) {
      console.error("Error fetching threads from server:", error)
    }

// Fallback to localStorage if server fails
    if (typeof window !== "undefined") {
      try {
        const fallback = localStorage.getItem("prism-threads-backup")
        if (fallback) {
          const threads = JSON.parse(fallback)
          if (Array.isArray(threads)) {
            console.log("Using", threads.length, "threads from backup")
            threadsCache = threads
            return threads
          }
        }
      } catch (error) {
        console.error("Fallback error:", error)
      }
    }

console.log("No threads found, returning empty array")
    return []
  },

async setThreads(threads: Thread[]) {
    // Deprecated method - kept for compatibility
    console.warn("setThreads is deprecated")
  },

async addThread(thread: Thread): Promise<boolean> {
    console.log("Adding thread:", thread.title, "by", thread.author)

try {
      const data = await apiCall("/api/forums/threads", {
        method: "POST",
        body: JSON.stringify({ thread }),
      })

if (data.success) {
        console.log("Thread added successfully to server")

// Update cache immediately
        threadsCache.unshift(thread)
        if (typeof window !== "undefined") {
          localStorage.setItem("prism-threads-backup", JSON.stringify(threadsCache))
        }

// Trigger sync event
        this.triggerSync()
        return true
      } else {
        console.error("Server rejected thread:", data.error)
        return false
      }
    } catch (error) {
      console.error("Error adding thread to server:", error)

// Fallback to localStorage
      if (typeof window !== "undefined") {
        try {
          const existing = JSON.parse(localStorage.getItem("prism-threads-backup") || "[]")
          existing.unshift(thread)
          localStorage.setItem("prism-threads-backup", JSON.stringify(existing))
          threadsCache = existing
          this.triggerSync()
          console.log("Thread saved to localStorage fallback")
          return true
        } catch (fallbackError) {
          console.error("Fallback error:", fallbackError)
        }
      }
      return false
    }
  },

async updateThread(id: string, updates: Partial<Thread>): Promise<boolean> {
    console.log("Updating thread:", id, updates)

try {
      const data = await apiCall("/api/forums/threads", {
        method: "PUT",
        body: JSON.stringify({ id, updates }),
      })

if (data.success) {
        // Update cache
        const index = threadsCache.findIndex((t) => t.id === id)
        if (index !== -1) {
          threadsCache[index] = { ...threadsCache[index], ...updates }
          if (typeof window !== "undefined") {
            localStorage.setItem("prism-threads-backup", JSON.stringify(threadsCache))
          }
        }

this.triggerSync()
        return true
      }
    } catch (error) {
      console.error("Error updating thread:", error)
    }
    return false
  },

async deleteThread(id: string): Promise<boolean> {
    console.log("Deleting thread:", id)

try {
      const data = await apiCall("/api/forums/threads", {
        method: "DELETE",
        body: JSON.stringify({ id }),
      })

if (data.success) {
        // Update cache
        threadsCache = threadsCache.filter((t) => t.id !== id)
        repliesCache = repliesCache.filter((r) => r.threadId !== id)
        if (typeof window !== "undefined") {
          localStorage.setItem("prism-threads-backup", JSON.stringify(threadsCache))
          localStorage.setItem("prism-replies-backup", JSON.stringify(repliesCache))
        }

this.triggerSync()
        return true
      }
    } catch (error) {
      console.error("Error deleting thread:", error)
    }
    return false
  },

async getReplies(): Promise<Reply[]> {
    try {
      const data = await apiCall("/api/forums/replies")

if (data.success && Array.isArray(data.replies)) {
        repliesCache = data.replies
        if (typeof window !== "undefined") {
          localStorage.setItem("prism-replies-backup", JSON.stringify(repliesCache))
        }
        return repliesCache
      }
    } catch (error) {
      console.error("Error fetching replies from server:", error)
    }

// Fallback to localStorage
    if (typeof window !== "undefined") {
      try {
        const fallback = localStorage.getItem("prism-replies-backup")
        if (fallback) {
          const replies = JSON.parse(fallback)
          if (Array.isArray(replies)) {
            repliesCache = replies
            return replies
          }
        }
      } catch (error) {
        console.error("Fallback error:", error)
      }
    }

return []
  },

async setReplies(replies: Reply[]) {
    // Deprecated method - kept for compatibility
    console.warn("setReplies is deprecated")
  },

async addReply(reply: Reply): Promise<boolean> {
    console.log("Adding reply to thread:", reply.threadId, "by", reply.author)

try {
      const data = await apiCall("/api/forums/replies", {
        method: "POST",
        body: JSON.stringify({ reply }),
      })

if (data.success) {
        console.log("Reply added successfully to server")

// Update cache
        repliesCache.push(reply)
        if (typeof window !== "undefined") {
          localStorage.setItem("prism-replies-backup", JSON.stringify(repliesCache))
        }

// Update thread reply count in cache
        const thread = threadsCache.find((t) => t.id === reply.threadId)
        if (thread) {
          thread.replies = (thread.replies || 0) + 1
          if (typeof window !== "undefined") {
            localStorage.setItem("prism-threads-backup", JSON.stringify(threadsCache))
          }
        }

this.triggerSync()
        return true
      }
    } catch (error) {
      console.error("Error adding reply to server:", error)

// Fallback to localStorage
      if (typeof window !== "undefined") {
        try {
          const existing = JSON.parse(localStorage.getItem("prism-replies-backup") || "[]")
          existing.push(reply)
          localStorage.setItem("prism-replies-backup", JSON.stringify(existing))
          repliesCache = existing
          this.triggerSync()
          console.log("Reply saved to localStorage fallback")
          return true
        } catch (fallbackError) {
          console.error("Fallback error:", fallbackError)
        }
      }
      return false
    }
  },

async getRepliesForThread(threadId: string): Promise<Reply[]> {
    const allReplies = await this.getReplies()
    return allReplies.filter((r) => r.threadId === threadId)
  },

async updateReply(id: string, updates: Partial<Reply>): Promise<boolean> {
    try {
      const data = await apiCall("/api/forums/replies", {
        method: "PUT",
        body: JSON.stringify({ id, updates }),
      })

if (data.success) {
        // Update cache
        const index = repliesCache.findIndex((r) => r.id === id)
        if (index !== -1) {
          repliesCache[index] = { ...repliesCache[index], ...updates }
          if (typeof window !== "undefined") {
            localStorage.setItem("prism-replies-backup", JSON.stringify(repliesCache))
          }
        }

this.triggerSync()
        return true
      }
    } catch (error) {
      console.error("Error updating reply:", error)
    }
    return false
  },

async deleteReply(id: string): Promise<boolean> {
    try {
      const data = await apiCall("/api/forums/replies", {
        method: "DELETE",
        body: JSON.stringify({ id }),
      })

if (data.success) {
        // Update cache
        const reply = repliesCache.find((r) => r.id === id)
        if (reply) {
          // Update thread reply count
          const thread = threadsCache.find((t) => t.id === reply.threadId)
          if (thread && thread.replies > 0) {
            thread.replies = thread.replies - 1
            if (typeof window !== "undefined") {
              localStorage.setItem("prism-threads-backup", JSON.stringify(threadsCache))
            }
          }
        }

repliesCache = repliesCache.filter((r) => r.id !== id)
        if (typeof window !== "undefined") {
          localStorage.setItem("prism-replies-backup", JSON.stringify(repliesCache))
        }

this.triggerSync()
        return true
      }
    } catch (error) {
      console.error("Error deleting reply:", error)
    }
    return false
  },

setupCrossTabSync(callback: () => void): () => void {
    if (typeof window === "undefined") {
      return () => {}
    }

console.log("Setting up cross-tab sync")

const handleStorageChange = (e: StorageEvent) => {
      if (e.key === "prism-forum-sync" || e.key === "prism-threads-backup" || e.key === "prism-replies-backup") {
        console.log("Storage change detected, triggering callback")
        callback()
      }
    }

const handleCustomSync = () => {
      console.log("Custom sync event detected")
      callback()
    }

window.addEventListener("storage", handleStorageChange)
    window.addEventListener("prism-forum-sync", handleCustomSync)

// Poll for updates every 10 seconds
    const pollInterval = setInterval(async () => {
      try {
        // Clear cache to force fresh fetch
        lastFetch = 0
        const newThreads = await this.getThreads()

// Check if we have new data
        if (
          newThreads.length !== threadsCache.length ||
          (newThreads.length > 0 && threadsCache.length > 0 && newThreads[0].id !== threadsCache[0].id)
        ) {
          console.log("New data detected during polling, triggering callback")
          callback()
        }
      } catch (error) {
        console.error("Polling error:", error)
      }
    }, 10000)

return () => {
      console.log("Cleaning up cross-tab sync")
      window.removeEventListener("storage", handleStorageChange)
      window.removeEventListener("prism-forum-sync", handleCustomSync)
      clearInterval(pollInterval)
    }
  },

triggerSync() {
    if (typeof window !== "undefined") {
      console.log("Triggering sync events")

// Trigger storage event
      localStorage.setItem("prism-forum-sync", Date.now().toString())

// Trigger custom event
      window.dispatchEvent(new CustomEvent("prism-forum-sync"))
    }
  },

getStats() {
    return {
      threads: threadsCache.length,
      replies: repliesCache.length,
    }
  },

async clearAll() {
    try {
      await apiCall("/api/forums/clear", { method: "POST" })

// Clear cache
      threadsCache = []
      repliesCache = []
      if (typeof window !== "undefined") {
        localStorage.removeItem("prism-threads-backup")
        localStorage.removeItem("prism-replies-backup")
      }

this.triggerSync()
    } catch (error) {
      console.error("Error clearing data:", error)
    }
  },
}
[V0_FILE]typescriptreact:file="components/friend-search-modal.tsx"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Search, UserPlus, Users, MessageCircle, User, Shield } from "lucide-react"
import Image from "next/image"
import { UserSystem, type UserProfile } from "@/lib/user-system"

interface FriendSearchModalProps {
  isOpen: boolean
  onClose: () => void
  currentUser: UserProfile | null
  onUserUpdate?: (user: UserProfile) => void
  onStartMessage?: (username: string) => void
}

export function FriendSearchModal({
  isOpen,
  onClose,
  currentUser,
  onUserUpdate,
  onStartMessage,
}: FriendSearchModalProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [searchResults, setSearchResults] = useState<UserProfile[]>([])
  const [isSearching, setIsSearching] = useState(false)
  const [allUsers, setAllUsers] = useState<UserProfile[]>([])

useEffect(() => {
    if (isOpen) {
      const users = UserSystem.getAllUsers()
      setAllUsers(users.filter((u) => u.username !== currentUser?.username))
    }
  }, [isOpen, currentUser])

useEffect(() => {
    if (searchTerm.trim()) {
      performSearch()
    } else {
      setSearchResults([])
    }
  }, [searchTerm, allUsers])

const performSearch = () => {
    setIsSearching(true)

const searchLower = searchTerm.toLowerCase()
    const results = allUsers
      .filter(
        (user) =>
          user.username.toLowerCase().includes(searchLower) ||
          (user.bio && user.bio.toLowerCase().includes(searchLower)) ||
          (user.customStatus && user.customStatus.toLowerCase().includes(searchLower)),
      )
      .slice(0, 20) // Limit to 20 results

setSearchResults(results)
    setIsSearching(false)
  }

const sendFriendRequest = (username: string) => {
    if (!currentUser) return

const success = UserSystem.sendFriendRequest(currentUser.username, username)
    if (success) {
      const updatedUser = UserSystem.getUserByUsername(currentUser.username)
      if (updatedUser) {
        UserSystem.saveCurrentUser(updatedUser)
        onUserUpdate?.(updatedUser)
      }
      alert(`Friend request sent to ${username}!`)
    } else {
      alert("Failed to send friend request. They may have already received one or blocked you.")
    }
  }

const acceptFriendRequest = (username: string) => {
    if (!currentUser) return

const success = UserSystem.acceptFriendRequest(currentUser.username, username)
    if (success) {
      const updatedUser = UserSystem.getUserByUsername(currentUser.username)
      if (updatedUser) {
        UserSystem.saveCurrentUser(updatedUser)
        onUserUpdate?.(updatedUser)
      }
      alert(`You are now friends with ${username}!`)
    }
  }

const removeFriend = (username: string) => {
    if (!currentUser) return

const success = UserSystem.removeFriend(currentUser.username, username)
    if (success) {
      const updatedUser = UserSystem.getUserByUsername(currentUser.username)
      if (updatedUser) {
        UserSystem.saveCurrentUser(updatedUser)
        onUserUpdate?.(updatedUser)
      }
      alert(`Removed ${username} from friends.`)
    }
  }

const getFriendshipStatus = (user: UserProfile) => {
    if (!currentUser) return "none"

if (currentUser.friends.includes(user.username)) return "friends"
    if (currentUser.friendRequests.sent.includes(user.username)) return "sent"
    if (currentUser.friendRequests.received.includes(user.username)) return "received"
    if (currentUser.blockedUsers.includes(user.username)) return "blocked"
    if (user.blockedUsers.includes(currentUser.username)) return "blocked_by"

return "none"
  }

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

const displayUsers = searchTerm.trim() ? searchResults : allUsers.slice(0, 10)

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-4xl max-h-[90vh] overflow-hidden">
        <DialogHeader>
          <DialogTitle className="text-white flex items-center space-x-2">
            <Users className="w-5 h-5" />
            <span>Find Friends</span>
          </DialogTitle>
        </DialogHeader>

<div className="space-y-4">
          {/* Search Input */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
            <Input
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Search users by username, bio, or status..."
              className="bg-gray-800 border-gray-600 text-white pl-10"
              autoFocus
            />
          </div>

{/* Results */}
          <div className="max-h-96 overflow-y-auto space-y-3">
            {!searchTerm.trim() && (
              <div className="mb-4">
                <h3 className="text-lg font-semibold text-white mb-3">All Users ({allUsers.length})</h3>
              </div>
            )}

{isSearching ? (
              <div className="text-center py-8">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-400 mx-auto mb-4"></div>
                <p className="text-gray-400">Searching...</p>
              </div>
            ) : displayUsers.length === 0 ? (
              <div className="text-center py-8">
                <Users className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                <p className="text-gray-400">{searchTerm.trim() ? "No users found" : "No other users yet"}</p>
                <p className="text-gray-500 text-sm mt-1">
                  {searchTerm.trim() ? "Try different search terms" : "Be the first to invite friends!"}
                </p>
              </div>
            ) : (
              <div className="space-y-3">
                {displayUsers.map((user) => {
                  const friendshipStatus = getFriendshipStatus(user)

return (
                    <Card
                      key={user.username}
                      className="bg-gray-800/50 border-gray-700 hover:bg-gray-800/70 transition-colors"
                    >
                      <CardContent className="p-4">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center space-x-3">
                            <div className="relative">
                              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-sm font-bold text-white overflow-hidden">
                                {user.avatar ? (
                                  <Image
                                    src={user.avatar || "/placeholder.svg"}
                                    alt={user.username}
                                    width={48}
                                    height={48}
                                    className="w-full h-full object-cover"
                                  />
                                ) : (
                                  user.username.charAt(0).toUpperCase()
                                )}
                              </div>
                              <div
                                className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-gray-900 ${getStatusColor(user.status)}`}
                              ></div>
                            </div>

<div className="flex-1 min-w-0">
                              <div className="flex items-center space-x-2 mb-1">
                                <h4 className="text-white font-medium">{user.username}</h4>
                                {user.username === "zavi" && (
                                  <Badge className="bg-red-600/20 text-red-300">
                                    <Shield className="w-3 h-3 mr-1" />
                                    Admin
                                  </Badge>
                                )}
                                {user.isModerator && (
                                  <Badge className="bg-blue-600/20 text-blue-300">
                                    <Shield className="w-3 h-3 mr-1" />
                                    Mod
                                  </Badge>
                                )}
                              </div>

{user.customStatus && (
                                <p className="text-gray-300 text-sm mb-1 italic">"{user.customStatus}"</p>
                              )}

{user.bio && <p className="text-gray-400 text-sm line-clamp-2 mb-2">{user.bio}</p>}

<div className="flex items-center space-x-4 text-xs text-gray-500">
                                <span>{user.reputation} reputation</span>
                                <span>{user.postCount} posts</span>
                                <span>Joined {formatDate(user.joinDate)}</span>
                              </div>
                            </div>
                          </div>

<div className="flex items-center space-x-2">
                            {friendshipStatus === "friends" && (
                              <>
                                <Button
                                  size="sm"
                                  onClick={() => onStartMessage?.(user.username)}
                                  className="bg-blue-600 hover:bg-blue-700"
                                >
                                  <MessageCircle className="w-4 h-4 mr-1" />
                                  Message
                                </Button>
                                <Button
                                  size="sm"
                                  variant="outline"
                                  onClick={() => removeFriend(user.username)}
                                  className="border-red-600 text-red-300 hover:bg-red-900/20 bg-transparent"
                                >
                                  Remove
                                </Button>
                              </>
                            )}

{friendshipStatus === "none" && (
                              <Button
                                size="sm"
                                onClick={() => sendFriendRequest(user.username)}
                                className="bg-green-600 hover:bg-green-700"
                              >
                                <UserPlus className="w-4 h-4 mr-1" />
                                Add Friend
                              </Button>
                            )}

{friendshipStatus === "sent" && (
                              <Button size="sm" disabled className="bg-gray-600 cursor-not-allowed">
                                <UserPlus className="w-4 h-4 mr-1" />
                                Request Sent
                              </Button>
                            )}

{friendshipStatus === "received" && (
                              <Button
                                size="sm"
                                onClick={() => acceptFriendRequest(user.username)}
                                className="bg-purple-600 hover:bg-purple-700"
                              >
                                <UserPlus className="w-4 h-4 mr-1" />
                                Accept Request
                              </Button>
                            )}

{(friendshipStatus === "blocked" || friendshipStatus === "blocked_by") && (
                              <Button size="sm" disabled className="bg-gray-600 cursor-not-allowed">
                                <User className="w-4 h-4 mr-1" />
                                Blocked
                              </Button>
                            )}
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  )
                })}
              </div>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="lib/message-encryption.ts"
import { CryptoUtils } from "./crypto"

export class MessageEncryption {
  private static readonly MESSAGE_KEY_PREFIX = "prism-msg-key-"
  private static readonly CONVERSATION_KEY_PREFIX = "prism-conv-key-"

// Generate a unique encryption key for a conversation
  static async generateConversationKey(conversationId: string): Promise<string> {
    const existingKey = localStorage.getItem(this.CONVERSATION_KEY_PREFIX + conversationId)
    if (existingKey) {
      return existingKey
    }

const newKey = CryptoUtils.generateSalt() + CryptoUtils.generateSalt() // 64 chars
    localStorage.setItem(this.CONVERSATION_KEY_PREFIX + conversationId, newKey)
    return newKey
  }

// Encrypt a message
  static async encryptMessage(
    message: string,
    conversationId: string,
  ): Promise<{
    encryptedContent: string
    iv: string
  }> {
    try {
      const conversationKey = await this.generateConversationKey(conversationId)
      const { encrypted, iv } = await CryptoUtils.encryptData(message, conversationKey)

return {
        encryptedContent: encrypted,
        iv: iv,
      }
    } catch (error) {
      console.error("Failed to encrypt message:", error)
      throw new Error("Message encryption failed")
    }
  }

// Decrypt a message
  static async decryptMessage(encryptedContent: string, iv: string, conversationId: string): Promise<string> {
    try {
      const conversationKey = await this.generateConversationKey(conversationId)
      const decryptedMessage = await CryptoUtils.decryptData(encryptedContent, conversationKey, iv)

return decryptedMessage
    } catch (error) {
      console.error("Failed to decrypt message:", error)
      return "[Message could not be decrypted]"
    }
  }

// Encrypt message for storage
  static async encryptMessageForStorage(messageData: any): Promise<string> {
    try {
      const masterKey = CryptoUtils.getMasterKey()
      const { encrypted } = await CryptoUtils.encryptData(JSON.stringify(messageData), masterKey)
      return encrypted
    } catch (error) {
      console.error("Failed to encrypt message for storage:", error)
      throw new Error("Storage encryption failed")
    }
  }

// Decrypt message from storage
  static async decryptMessageFromStorage(encryptedData: string, iv: string): Promise<any> {
    try {
      const masterKey = CryptoUtils.getMasterKey()
      const decryptedData = await CryptoUtils.decryptData(encryptedData, masterKey, iv)
      return JSON.parse(decryptedData)
    } catch (error) {
      console.error("Failed to decrypt message from storage:", error)
      return null
    }
  }

// Share conversation key with another user (for group chats or key recovery)
  static async shareConversationKey(conversationId: string, targetUsername: string): Promise<boolean> {
    try {
      const conversationKey = await this.generateConversationKey(conversationId)
      const sharedKeys = JSON.parse(localStorage.getItem("prism-shared-keys") || "{}")

if (!sharedKeys[targetUsername]) {
        sharedKeys[targetUsername] = {}
      }

sharedKeys[targetUsername][conversationId] = conversationKey
      localStorage.setItem("prism-shared-keys", JSON.stringify(sharedKeys))

return true
    } catch (error) {
      console.error("Failed to share conversation key:", error)
      return false
    }
  }

// Get shared conversation key
  static async getSharedConversationKey(conversationId: string, fromUsername: string): Promise<string | null> {
    try {
      const sharedKeys = JSON.parse(localStorage.getItem("prism-shared-keys") || "{}")
      return sharedKeys[fromUsername]?.[conversationId] || null
    } catch (error) {
      console.error("Failed to get shared conversation key:", error)
      return null
    }
  }

// Clear conversation keys (for security)
  static clearConversationKeys(): void {
    const keys = Object.keys(localStorage)
    keys.forEach((key) => {
      if (key.startsWith(this.CONVERSATION_KEY_PREFIX) || key.startsWith(this.MESSAGE_KEY_PREFIX)) {
        localStorage.removeItem(key)
      }
    })
    localStorage.removeItem("prism-shared-keys")
  }

// Verify message integrity
  static async verifyMessageIntegrity(message: any): Promise<boolean> {
    try {
      // Simple integrity check - in production, use proper HMAC
      const expectedFields = ["id", "conversationId", "senderId", "receiverId", "createdAt"]
      return expectedFields.every((field) => message.hasOwnProperty(field))
    } catch (error) {
      console.error("Message integrity verification failed:", error)
      return false
    }
  }
}
[V0_FILE]typescriptreact:file="components/enhanced-direct-messages.tsx"
"use client"

import { useState, useEffect, useRef } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { MessageCircle, Send, Search, Smile, Paperclip, MoreVertical, Phone, Video, Shield, Lock } from "lucide-react"
import Image from "next/image"
import { UserSystem, type UserProfile, type DirectMessage, type Conversation } from "@/lib/user-system"
import { MessageEncryption } from "@/lib/message-encryption"

interface EnhancedDirectMessagesProps {
  isOpen: boolean
  onClose: () => void
  currentUser: UserProfile | null
  startConversationWith?: string
}

export function EnhancedDirectMessages({
  isOpen,
  onClose,
  currentUser,
  startConversationWith,
}: EnhancedDirectMessagesProps) {
  const [conversations, setConversations] = useState<Conversation[]>([])
  const [selectedConversation, setSelectedConversation] = useState<string | null>(null)
  const [messages, setMessages] = useState<DirectMessage[]>([])
  const [newMessage, setNewMessage] = useState("")
  const [searchTerm, setSearchTerm] = useState("")
  const [isEncrypting, setIsEncrypting] = useState(false)
  const [encryptionEnabled, setEncryptionEnabled] = useState(true)
  const messagesEndRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (isOpen && currentUser) {
      loadConversations()
    }
  }, [isOpen, currentUser])

useEffect(() => {
    if (startConversationWith && currentUser) {
      startNewConversation(startConversationWith)
    }
  }, [startConversationWith, currentUser])

useEffect(() => {
    if (selectedConversation) {
      loadMessages(selectedConversation)
    }
  }, [selectedConversation])

useEffect(() => {
    scrollToBottom()
  }, [messages])

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

const loadConversations = () => {
    if (!currentUser) return

const loadMessages = async (conversationId: string) => {
    try {
      const savedMessages = localStorage.getItem(`prism-messages-${conversationId}`)
      if (savedMessages) {
        const encryptedMessages = JSON.parse(savedMessages)

// Decrypt messages
        const decryptedMessages = await Promise.all(
          encryptedMessages.map(async (msg: any) => {
            if (msg.encrypted && msg.iv) {
              try {
                const decryptedContent = await MessageEncryption.decryptMessage(
                  msg.encryptedContent,
                  msg.iv,
                  conversationId,
                )
                return {
                  ...msg,
                  content: decryptedContent,
                  encrypted: true,
                }
              } catch (error) {
                console.error("Failed to decrypt message:", error)
                return {
                  ...msg,
                  content: "[Message could not be decrypted]",
                  encrypted: true,
                }
              }
            }
            return msg
          }),
        )

setMessages(decryptedMessages)
      } else {
        setMessages([])
      }
    } catch (error) {
      console.error("Failed to load messages:", error)
      setMessages([])
    }
  }

const sendMessage = async () => {
    if (!currentUser || !selectedConversation || !newMessage.trim()) return

const conversation = conversations.find((c) => c.id === selectedConversation)
    if (!conversation) return

const receiverId = conversation.participants.find((p) => p !== currentUser.username)
    if (!receiverId) return

setIsEncrypting(true)

try {
      const messageContent = newMessage.trim()
      let encryptedContent = ""
      let iv = ""
      let isEncrypted = false

// Encrypt message if encryption is enabled
      if (encryptionEnabled) {
        const encrypted = await MessageEncryption.encryptMessage(messageContent, selectedConversation)
        encryptedContent = encrypted.encryptedContent
        iv = encrypted.iv
        isEncrypted = true
      }

const message: DirectMessage & { encrypted?: boolean; encryptedContent?: string; iv?: string } = {
        id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
        conversationId: selectedConversation,
        senderId: currentUser.username,
        receiverId,
        content: messageContent,
        createdAt: new Date().toISOString(),
        deleted: false,
        reactions: [],
        encrypted: isEncrypted,
        encryptedContent: isEncrypted ? encryptedContent : undefined,
        iv: isEncrypted ? iv : undefined,
      }

// Add to local messages (decrypted for display)
      const updatedMessages = [...messages, message]
      setMessages(updatedMessages)

// Save encrypted version to storage
      const messageForStorage = isEncrypted
        ? {
            ...message,
            content: "[Encrypted]", // Don't store plaintext
            encryptedContent,
            iv,
            encrypted: true,
          }
        : message

const savedMessages = localStorage.getItem(`prism-messages-${selectedConversation}`)
      const existingMessages = savedMessages ? JSON.parse(savedMessages) : []
      existingMessages.push(messageForStorage)
      localStorage.setItem(`prism-messages-${selectedConversation}`, JSON.stringify(existingMessages))

// Update conversation
      const updatedConversations = conversations.map((c) =>
        c.id === selectedConversation
          ? {
              ...c,
              lastMessage: { ...message, content: isEncrypted ? "🔒 Encrypted message" : message.content },
              lastActivity: message.createdAt,
              unreadCount: { ...c.unreadCount, [receiverId]: (c.unreadCount[receiverId] || 0) + 1 },
            }
          : c,
      )
      setConversations(updatedConversations)
      localStorage.setItem(`prism-conversations-${currentUser.username}`, JSON.stringify(updatedConversations))

// Add notification for receiver
      UserSystem.addNotification(receiverId, {
        type: "message",
        title: "New Message",
        content: `${currentUser.username}: ${isEncrypted ? "🔒 Encrypted message" : message.content.substring(0, 50)}${!isEncrypted && message.content.length > 50 ? "..." : ""}`,
        link: `/messages/${selectedConversation}`,
      })

setNewMessage("")
    } catch (error) {
      console.error("Failed to send message:", error)
      alert("Failed to send message. Please try again.")
    } finally {
      setIsEncrypting(false)
    }
  }

const startNewConversation = (username: string) => {
    if (!currentUser || username === currentUser.username) return

// Check if conversation already exists
    const existingConversation = conversations.find(
      (c) => c.participants.includes(username) && c.participants.includes(currentUser.username),
    )

if (existingConversation) {
      setSelectedConversation(existingConversation.id)
      return
    }

const filteredFriends =
    currentUser?.friends.filter((friend) => friend.toLowerCase().includes(searchTerm.toLowerCase())) || []

const selectedConversationData = conversations.find((c) => c.id === selectedConversation)
  const otherUser = selectedConversationData ? getOtherParticipant(selectedConversationData) : null

const unreadCount = conversation.unreadCount[currentUser?.username || ""] || 0
                  const isSelected = selectedConversation === conversation.id

{/* Chat Area */}
          <div className="flex-1 flex flex-col">
            {selectedConversation && otherUser ? (
              <>
                {/* Chat Header */}
                <div className="p-4 border-b border-gray-700 flex items-center justify-between">
                  <div className="flex items-center space-x-3">
                    <div className="relative">
                      <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-sm font-bold text-white overflow-hidden">
                        {otherUser.avatar ? (
                          <Image
                            src={otherUser.avatar || "/placeholder.svg"}
                            alt={otherUser.username}
                            width={40}
                            height={40}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          otherUser.username.charAt(0).toUpperCase()
                        )}
                      </div>
                      {otherUser.isOnline && (
                        <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-900"></div>
                      )}
                    </div>
                    <div>
                      <p className="text-white font-medium">{otherUser.username}</p>
                      <p className="text-xs text-gray-400">
                        {otherUser.isOnline ? "Online" : `Last seen ${formatMessageTime(otherUser.lastSeen)}`}
                      </p>
                    </div>
                    <Badge className="bg-green-600/20 text-green-300">
                      <Lock className="w-3 h-3 mr-1" />
                      End-to-End Encrypted
                    </Badge>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setEncryptionEnabled(!encryptionEnabled)}
                      className={`${encryptionEnabled ? "text-green-400 hover:text-green-300" : "text-gray-400 hover:text-white"}`}
                      title={encryptionEnabled ? "Encryption enabled" : "Encryption disabled"}
                    >
                      <Shield className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white">
                      <Phone className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white">
                      <Video className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white">
                      <MoreVertical className="w-4 h-4" />
                    </Button>
                  </div>
                </div>

{/* Messages */}
                <div className="flex-1 overflow-y-auto p-4 space-y-4">
                  {messages.length === 0 ? (
                    <div className="text-center py-8">
                      <MessageCircle className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                      <p className="text-gray-400">Start your conversation with {otherUser.username}</p>
                      <p className="text-gray-500 text-sm mt-2">
                        <Lock className="w-4 h-4 inline mr-1" />
                        Messages are end-to-end encrypted
                      </p>
                    </div>
                  ) : (
                    messages.map((message, index) => {
                      const isOwnMessage = message.senderId === currentUser?.username
                      const showAvatar = index === 0 || messages[index - 1].senderId !== message.senderId

<div
                              className={`rounded-lg px-4 py-2 ${
                                isOwnMessage ? "bg-purple-600 text-white" : "bg-gray-800 text-gray-100"
                              }`}
                            >
                              <div className="flex items-center space-x-2 mb-1">
                                <p className="text-sm">{message.content}</p>
                                {(message as any).encrypted && (
                                  <Lock className="w-3 h-3 text-green-400" title="Encrypted message" />
                                )}
                              </div>
                              <p className={`text-xs ${isOwnMessage ? "text-purple-200" : "text-gray-400"}`}>
                                {formatMessageTime(message.createdAt)}
                              </p>
                            </div>
                          </div>
                        </div>
                      )
                    })
                  )}
                  <div ref={messagesEndRef} />
                </div>

{/* Message Input */}
                <div className="p-4 border-t border-gray-700">
                  <div className="flex items-center space-x-2">
                    <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white">
                      <Paperclip className="w-4 h-4" />
                    </Button>
                    <div className="flex-1 relative">
                      <Input
                        value={newMessage}
                        onChange={(e) => setNewMessage(e.target.value)}
                        onKeyPress={(e) => e.key === "Enter" && !isEncrypting && sendMessage()}
                        placeholder={`Message ${otherUser.username}...`}
                        className="bg-gray-800 border-gray-600 text-white pr-10"
                        disabled={isEncrypting}
                      />
                      <Button
                        variant="ghost"
                        size="sm"
                        className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white p-1"
                      >
                        <Smile className="w-4 h-4" />
                      </Button>
                    </div>
                    <Button
                      onClick={sendMessage}
                      disabled={!newMessage.trim() || isEncrypting}
                      className="bg-purple-600 hover:bg-purple-700"
                    >
                      {isEncrypting ? (
                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                      ) : (
                        <Send className="w-4 h-4" />
                      )}
                    </Button>
                  </div>
                  <div className="flex items-center justify-between mt-2 text-xs text-gray-500">
                    <div className="flex items-center space-x-2">
                      <Lock className="w-3 h-3" />
                      <span>End-to-end encrypted</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span>Encryption: </span>
                      <Badge
                        className={encryptionEnabled ? "bg-green-600/20 text-green-300" : "bg-red-600/20 text-red-300"}
                      >
                        {encryptionEnabled ? "ON" : "OFF"}
                      </Badge>
                    </div>
                  </div>
                </div>
              </>
            ) : (
              <div className="flex-1 flex items-center justify-center">
                <div className="text-center">
                  <MessageCircle className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-400 text-lg mb-2">Select a conversation</p>
                  <p className="text-gray-500 text-sm">Choose a friend to start messaging</p>
                  <p className="text-gray-500 text-xs mt-2">
                    <Lock className="w-4 h-4 inline mr-1" />
                    All messages are encrypted for your privacy
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/forums/page.tsx" isQuickEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import {
  MessageSquare,
  Plus,
  User,
  ArrowLeft,
  Filter,
  LogOut,
  Shield,
  Megaphone,
  Bell,
  Search,
  Settings,
  Mail,
  RefreshCw,
  Loader2,
  Users,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useState, useEffect, useCallback } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { FileUpload, type UploadedFile } from "@/components/file-upload"
import { UserSystem, type UserProfile } from "@/lib/user-system"
import { SharedStorage } from "@/lib/shared-storage"
import { EnhancedAuthModal } from "@/components/enhanced-auth-modal"
import { AdminPanel } from "@/components/admin-panel"
import { UserProfileModal } from "@/components/user-profile-modal"
import { NotificationsPanel } from "@/components/notifications-panel"
import { EnhancedDirectMessages } from "@/components/enhanced-direct-messages"
import { SearchModal } from "@/components/search-modal"
import { ReportModal } from "@/components/report-modal"
import { FriendSearchModal } from "@/components/friend-search-modal"

interface Thread {
  id: string
  title: string
  content: string
  author: string
  createdAt: string
  replies: number
  views: number
  category: string
  files?: UploadedFile[]
}

export default function ForumsPage() {
  const [threads, setThreads] = useState<Thread[]>([])
  const [filteredThreads, setFilteredThreads] = useState<Thread[]>([])
  const [user, setUser] = useState<UserProfile | null>(null)
  const [isCreateThreadOpen, setIsCreateThreadOpen] = useState(false)
  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)
  const [isAdminPanelOpen, setIsAdminPanelOpen] = useState(false)
  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false)
  const [isNotificationsOpen, setIsNotificationsOpen] = useState(false)
  const [isDirectMessagesOpen, setIsDirectMessagesOpen] = useState(false)
  const [isSearchModalOpen, setIsSearchModalOpen] = useState(false)
  const [isFriendSearchOpen, setIsFriendSearchOpen] = useState(false)
  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
  const [profileModalUsername, setProfileModalUsername] = useState("")
  const [startMessageWith, setStartMessageWith] = useState<string | undefined>(undefined)
  const [reportModal, setReportModal] = useState<{
    isOpen: boolean
    itemId: string
    itemType: "thread" | "reply"
    itemAuthor: string
    itemContent: string
  }>({
    isOpen: false,
    itemId: "",
    itemType: "thread",
    itemAuthor: "",
    itemContent: "",
  })
  const [newThread, setNewThread] = useState({
    title: "",
    content: "",
    category: "Discussion",
    files: [] as UploadedFile[],
  })
  const [selectedCategory, setSelectedCategory] = useState<string>("All")
  const [isLoadingUser, setIsLoadingUser] = useState(true)
  const [isLoadingThreads, setIsLoadingThreads] = useState(true)
  const [isExporting, setIsExporting] = useState(false)
  const [showShareModal, setShowShareModal] = useState(false)
  const [shareUrl, setShareUrl] = useState("")
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [lastRefresh, setLastRefresh] = useState<number>(Date.now())
  const [isCreatingThread, setIsCreatingThread] = useState(false)

const categories = ["Discussion", "Scripts", "Help", "Executor", "Showcase", "Bugs", "Updates", "Misc"]
  const categoryColors = {
    Discussion: "bg-blue-600/20 text-blue-300 border-blue-600/30",
    Scripts: "bg-green-600/20 text-green-300 border-green-600/30",
    Help: "bg-yellow-600/20 text-yellow-300 border-yellow-600/30",
    Executor: "bg-purple-600/20 text-purple-300 border-purple-600/30",
    Showcase: "bg-pink-600/20 text-pink-300 border-pink-600/30",
    Bugs: "bg-red-600/20 text-red-300 border-red-600/30",
    Updates: "bg-orange-600/20 text-orange-300 border-orange-600/30",
    Misc: "bg-gray-600/20 text-gray-300 border-gray-600/30",
  }

const isAdmin = user?.username === "zavi"

const loadThreadsData = useCallback(async () => {
    try {
      setIsRefreshing(true)
      console.log("Loading threads data...")
      const sharedThreads = await SharedStorage.getThreads()
      console.log("Loaded", sharedThreads.length, "threads")

const sortedThreads = sharedThreads.sort(
        (a: Thread, b: Thread) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
      )
      setThreads(sortedThreads)
      setLastRefresh(Date.now())
      setIsLoadingThreads(false)
    } catch (error) {
      console.error("Error loading threads:", error)
      setIsLoadingThreads(false)
    } finally {
      setIsRefreshing(false)
    }
  }, [])

const handleManualRefresh = () => {
    console.log("Manual refresh triggered")
    loadThreadsData()
  }

useEffect(() => {
    console.log("Initializing forums...")
    const initializeForums = async () => {
      await SharedStorage.migrateOldData()
      await loadThreadsData()
    }
    initializeForums()

const cleanup = SharedStorage.setupCrossTabSync(() => {
      console.log("Cross-tab sync triggered, reloading data...")
      loadThreadsData()
    })

return cleanup
  }, [loadThreadsData])

useEffect(() => {
    const interval = setInterval(() => {
      console.log("Auto-refresh triggered")
      loadThreadsData()
    }, 30000)

return () => clearInterval(interval)
  }, [loadThreadsData])

useEffect(() => {
    const loadData = async () => {
      const currentUser = await UserSystem.getCurrentUser()
      if (currentUser) {
        setUser(currentUser)
        console.log("Loaded user:", currentUser.username)
      } else {
        console.log("No user logged in")
      }
      setIsLoadingUser(false)
    }
    loadData()
  }, [])

useEffect(() => {
    if (selectedCategory === "All") {
      setFilteredThreads(threads)
    } else {
      setFilteredThreads(threads.filter((thread) => thread.category === selectedCategory))
    }
  }, [threads, selectedCategory])

const router = useRouter()
  const searchParams = useSearchParams()

const handleAuthSuccess = (userData: UserProfile) => {
    setUser(userData)
    console.log("User authenticated:", userData.username)
  }

const handleLogout = () => {
    localStorage.removeItem("prism-current-user-encrypted")
    setUser(null)
    console.log("User logged out")
  }

const createThread = async () => {
    if (!newThread.title.trim() || !newThread.content.trim()) {
      alert("Please fill in both title and content.")
      return
    }

if (user && isUserMuted("posting")) {
      alert("You are currently muted from posting.")
      return
    }

if (newThread.category === "Updates" && !isAdmin) {
      alert("Only administrators can post in the Updates category.")
      return
    }

setIsCreatingThread(true)

const thread: Thread = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      title: newThread.title.trim(),
      content: newThread.content.trim(),
      author: user?.username || "Anonymous",
      createdAt: new Date().toISOString(),
      replies: 0,
      views: 0,
      category: newThread.category,
      files: newThread.files || [],
    }

console.log("Creating thread:", thread.title, "by", thread.author)

try {
      const success = await SharedStorage.addThread(thread)

if (success) {
        console.log("Thread created successfully!")

// Reload threads to show the new one
        await loadThreadsData()

setNewThread({ title: "", content: "", category: "Discussion", files: [] })
        setIsCreateThreadOpen(false)
        alert("Thread created successfully!")
      } else {
        console.error("Failed to create thread")
        alert("Failed to create thread. Please try again.")
      }
    } catch (error) {
      console.error("Error creating thread:", error)
      alert("Failed to create thread. Please try again.")
    } finally {
      setIsCreatingThread(false)
    }
  }

const openReportModal = (thread: Thread) => {
    if (!user) {
      setIsAuthModalOpen(true)
      return
    }

if (isUserMuted("reporting")) {
      alert("You are currently muted from reporting content.")
      return
    }

setReportModal({
      isOpen: true,
      itemId: thread.id,
      itemType: "thread",
      itemAuthor: thread.author,
      itemContent: thread.content,
    })
  }

const handleStartMessage = (username: string) => {
    setStartMessageWith(username)
    setIsDirectMessagesOpen(true)
    setIsFriendSearchOpen(false)
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60))

return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
  }

const getCategoryStats = () => {
    const stats: { [key: string]: number } = {}
    categories.forEach((cat) => {
      stats[cat] = threads.filter((thread) => thread.category === cat).length
    })
    return stats
  }

const categoryStats = getCategoryStats()

const encodedData = btoa(JSON.stringify(exportData))
      const currentUrl = window.location.origin + window.location.pathname
      const shareableUrl = `${currentUrl}?data=${encodedData}`

setShareUrl(shareableUrl)
      setShowShareModal(true)
    } catch (error) {
      console.error("Failed to export forum data:", error)
    } finally {
      setIsExporting(false)
    }
  }

const unreadNotifications = user ? UserSystem.getUnreadNotificationCount(user.username) : 0

<div className="relative z-10">
        <nav className="border-b border-gray-800 bg-black/50 backdrop-blur-sm sticky top-0 z-50">
          <div className="container mx-auto px-4 py-4 flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <Image src="/prism-logo.png" alt="Prism Logo" width={40} height={40} />
              <span className="text-2xl font-bold text-white">Prism</span>
            </div>
            <div className="flex items-center space-x-6">
              <Link href="/" className="text-gray-300 hover:text-white transition-colors">
                Home
              </Link>
              <Link href="/team" className="text-gray-300 hover:text-white transition-colors">
                Team
              </Link>
              <Link href="/scripts" className="text-gray-300 hover:text-white transition-colors">
                Scripts
              </Link>
              <span className="text-white font-semibold">Forums</span>

<Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setIsSearchModalOpen(true)}
                  className="text-gray-300 hover:text-white"
                >
                  <Search className="w-4 h-4" />
                </Button>

{user && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setIsFriendSearchOpen(true)}
                    className="text-gray-300 hover:text-white"
                    title="Find friends"
                  >
                    <Users className="w-4 h-4" />
                  </Button>
                )}

{isLoadingUser ? (
                  <div className="flex items-center space-x-2">
                    <Loader2 className="h-4 w-4 animate-spin text-purple-400" />
                    <span className="text-gray-400 text-sm">Loading...</span>
                  </div>
                ) : user ? (
                  <div className="flex items-center space-x-4">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setIsNotificationsOpen(true)}
                      className="text-gray-300 hover:text-white relative"
                    >
                      <Bell className="w-4 h-4" />
                      {unreadNotifications > 0 && (
                        <Badge className="absolute -top-1 -right-1 bg-red-600 text-white text-xs min-w-5 h-5 flex items-center justify-center p-0">
                          {unreadNotifications > 99 ? "99+" : unreadNotifications}
                        </Badge>
                      )}
                    </Button>

<Button
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setStartMessageWith(undefined)
                        setIsDirectMessagesOpen(true)
                      }}
                      className="text-gray-300 hover:text-white"
                    >
                      <Mail className="w-4 h-4" />
                    </Button>

<div
                      className="flex items-center space-x-2 bg-purple-600/20 px-3 py-1 rounded-full cursor-pointer hover:bg-purple-600/30 transition-colors"
                      onClick={() => openUserProfile(user.username)}
                    >
                      <div className="w-6 h-6 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-xs font-bold text-white overflow-hidden">
                        {user.avatar ? (
                          <Image
                            src={user.avatar || "/placeholder.svg"}
                            alt={user.username}
                            width={24}
                            height={24}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          user.username.charAt(0).toUpperCase()
                        )}
                      </div>
                      <span className="text-purple-300 text-sm">{user.username}</span>
                      {isAdmin && <Shield className="w-4 h-4 text-red-400" title="Administrator" />}
                    </div>

{isAdmin && (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => setIsAdminPanelOpen(true)}
                        className="border-red-600 text-red-300 hover:bg-red-900/20 bg-transparent"
                      >
                        <Shield className="w-4 h-4 mr-2" />
                        Admin Panel
                      </Button>
                    )}
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={handleLogout}
                      className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
                    >
                      <LogOut className="w-4 h-4 mr-2" />
                      Logout
                    </Button>
                  </div>
                ) : (
                  <div className="flex items-center space-x-2">
                    <span className="text-sm text-gray-400">👀 Browsing as Guest</span>
                    <Button
                      variant="outline"
                      onClick={() => setIsAuthModalOpen(true)}
                      className="border-gray-600 text-white hover:bg-gray-800 bg-transparent"
                    >
                      <User className="w-4 h-4 mr-2" />
                      Login / Register
                    </Button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </nav>

<section className="container mx-auto px-4 py-20 text-center">
          <div className="max-w-4xl mx-auto">
            <Badge className="mb-6 bg-blue-600/20 text-blue-300 border-blue-600/30">
              <MessageSquare className="w-4 h-4 mr-2" />
              Community Forums
            </Badge>
            <h1 className="text-6xl font-bold text-white mb-6 leading-tight">
              Prism
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">
                {" "}
                Forums
              </span>
            </h1>
            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
              Connect with the Prism community. Share scripts, get help, showcase your work, and discuss everything
              Roblox scripting. {!user && "No account needed to browse and post!"}
            </p>
            {!user && (
              <div className="bg-blue-900/20 border border-blue-600/30 rounded-lg p-4">
                <p className="text-blue-300 text-sm">
                  <strong>Guest Mode:</strong> You're posting as "Anonymous".
                  <button
                    onClick={() => setIsAuthModalOpen(true)}
                    className="text-blue-400 hover:text-blue-300 underline ml-1"
                  >
                    Create an account
                  </button>{" "}
                  to post with your username and access more features.
                </p>
              </div>
            )}
          </div>
        </section>

<section className="container mx-auto px-4 pb-8">
          <div className="max-w-6xl mx-auto">
            <div className="flex items-center space-x-2 mb-6">
              <Filter className="w-5 h-5 text-gray-400" />
              <h3 className="text-lg font-semibold text-white">Filter by Category</h3>
              <div className="flex items-center space-x-1 text-sm text-gray-400">
                <span>•</span>
                <span>{threads.length} total threads</span>
                <span>•</span>
                <span>Last refresh: {formatDate(new Date(lastRefresh).toISOString())}</span>
              </div>
            </div>
            <div className="flex flex-wrap gap-3">
              <Button
                variant={selectedCategory === "All" ? "default" : "outline"}
                onClick={() => setSelectedCategory("All")}
                className={
                  selectedCategory === "All"
                    ? "bg-purple-600 hover:bg-purple-700 text-white"
                    : "border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
                }
              >
                All ({threads.length})
              </Button>
              {categories.map((category) => (
                <Button
                  key={category}
                  variant={selectedCategory === category ? "default" : "outline"}
                  onClick={() => setSelectedCategory(category)}
                  className={
                    selectedCategory === category
                      ? "bg-purple-600 hover:bg-purple-700 text-white"
                      : "border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
                  }
                >
                  {category === "Updates" && <Megaphone className="w-4 h-4 mr-1" />}
                  {category} ({categoryStats[category] || 0})
                </Button>
              ))}
            </div>
          </div>
        </section>

<section className="container mx-auto px-4 pb-8">
          <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
            <div className="flex items-center space-x-4">
              <h2 className="text-2xl font-bold text-white">
                {selectedCategory === "All" ? "All Threads" : `${selectedCategory} Threads`}
              </h2>
              <Badge className="bg-gray-600/20 text-gray-300">
                {filteredThreads.length} {filteredThreads.length === 1 ? "Thread" : "Threads"}
              </Badge>
            </div>
            <div className="flex items-center space-x-4">
              <Button
                onClick={exportForumData}
                variant="outline"
                className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
              >
                <MessageSquare className="w-4 h-4 mr-2" />
                Export Forums
              </Button>

<Dialog open={isCreateThreadOpen} onOpenChange={setIsCreateThreadOpen}>
                <DialogTrigger asChild>
                  <Button className="bg-purple-600 hover:bg-purple-700">
                    <Plus className="w-4 h-4 mr-2" />
                    New Thread
                  </Button>
                </DialogTrigger>
                <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-4xl max-h-[90vh] overflow-y-auto">
                  <DialogHeader>
                    <DialogTitle className="text-purple-400">Create New Thread {!user && "(As Guest)"}</DialogTitle>
                  </DialogHeader>
                  <div className="space-y-4">
                    {!user && (
                      <div className="bg-blue-900/20 border border-blue-600/30 rounded-lg p-4">
                        <p className="text-blue-300 text-sm">
                          <strong>Guest Mode:</strong> You're posting as "Anonymous".
                          <button
                            onClick={() => setIsAuthModalOpen(true)}
                            className="text-blue-400 hover:text-blue-300 underline ml-1"
                          >
                            Create an account
                          </button>{" "}
                          to post with your username and access more features.
                        </p>
                      </div>
                    )}
                    <div>
                      <label className="text-sm font-medium text-gray-300 mb-2 block">Category</label>
                      <select
                        value={newThread.category}
                        onChange={(e) => setNewThread((prev) => ({ ...prev, category: e.target.value }))}
                        className="w-full bg-gray-800 border border-gray-600 rounded-md px-3 py-2 text-white"
                      >
                        {categories
                          .filter((cat) => cat !== "Updates" || isAdmin)
                          .map((cat) => (
                            <option key={cat} value={cat}>
                              {cat} {cat === "Updates" ? "(Admin Only)" : ""}
                            </option>
                          ))}
                      </select>
                      {newThread.category === "Updates" && (
                        <p className="text-orange-300 text-sm mt-1">
                          ⚠️ Updates category is for official announcements only
                        </p>
                      )}
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-300 mb-2 block">Thread Title</label>
                      <Input
                        value={newThread.title}
                        onChange={(e) => setNewThread((prev) => ({ ...prev, title: e.target.value }))}
                        placeholder="Enter thread title..."
                        className="bg-gray-800 border-gray-600 text-white"
                      />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-300 mb-2 block">Content</label>
                      <Textarea
                        value={newThread.content}
                        onChange={(e) => setNewThread((prev) => ({ ...prev, content: e.target.value }))}
                        placeholder="Write your thread content..."
                        className="bg-gray-800 border-gray-600 text-white min-h-32"
                      />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-300 mb-2 block">Attachments</label>
                      <FileUpload
                        onFilesChange={(files) => setNewThread((prev) => ({ ...prev, files }))}
                        maxFiles={5}
                        maxSizePerFile={10}
                      />
                    </div>
                    <Button
                      onClick={createThread}
                      disabled={!newThread.title.trim() || !newThread.content.trim() || isCreatingThread}
                      className="w-full bg-purple-600 hover:bg-purple-700"
                    >
                      {isCreatingThread ? (
                        <>
                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                          Creating...
                        </>
                      ) : (
                        `Create Thread ${!user ? "(as Anonymous)" : ""}`
                      )}
                    </Button>
                  </div>
                </DialogContent>
              </Dialog>
            </div>
          </div>
        </section>

<section className="container mx-auto px-4 pb-20">
          {isLoadingThreads ? (
            <div className="text-center py-12">
              <Loader2 className="h-12 w-12 animate-spin text-purple-400 mx-auto mb-4" />
              <p className="text-gray-400">Loading threads...</p>
            </div>
          ) : filteredThreads.length === 0 ? (
            <Card className="bg-gray-800/50 border-gray-700 backdrop-blur-sm text-center py-12">
              <CardContent>
                <MessageSquare className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                <h3 className="text-xl font-semibold text-white mb-2">
                  {selectedCategory === "All" ? "No threads yet" : `No ${selectedCategory.toLowerCase()} threads yet`}
                </h3>
                <p className="text-gray-400 mb-6">
                  {selectedCategory === "All"
                    ? "Be the first to start a discussion!"
                    : `Be the first to create a ${selectedCategory.toLowerCase()} thread!`}
                </p>
                <Button onClick={() => setIsCreateThreadOpen(true)} className="bg-purple-600 hover:bg-purple-700">
                  Create First Thread {!user && "(No Account Needed)"}
                </Button>
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-4">
              {filteredThreads.map((thread) => (
                <Card
                  key={thread.id}
                  className="bg-gray-800/50 border-gray-700 backdrop-blur-sm hover:bg-gray-800/70 transition-colors"
                >
                  <div className="p-6">
                    <div className="flex items-start space-x-4">
                      <div className="flex-1">
                        <Link href={`/forums/thread/${thread.id}`} className="cursor-pointer">
                          <div className="flex items-center space-x-3 mb-2">
                            <Badge className={categoryColors[thread.category as keyof typeof categoryColors]}>
                              {thread.category === "Updates" && <Megaphone className="w-3 h-3 mr-1" />}
                              {thread.category}
                            </Badge>
                            <div className="flex items-center space-x-4 text-sm text-gray-400">
                              <span>{thread.replies} replies</span>
                              <span>{thread.views} views</span>
                            </div>
                            {thread.author === "Anonymous" && (
                              <Badge className="bg-gray-600/20 text-gray-400">Guest Post</Badge>
                            )}
                          </div>
                          <h3 className="text-white text-lg mb-2 hover:text-purple-400 transition-colors font-semibold">
                            {thread.title}
                          </h3>
                          <p className="text-gray-300 line-clamp-2 mb-4">{thread.content}</p>
                        </Link>
                        <div className="flex items-center justify-between pt-4 border-t border-gray-700">
                          <div
                            className={`flex items-center space-x-2 ${
                              thread.author !== "Anonymous"
                                ? "cursor-pointer hover:text-purple-400 transition-colors"
                                : "cursor-default"
                            }`}
                            onClick={() => thread.author !== "Anonymous" && openUserProfile(thread.author)}
                          >
                            <User className="w-4 h-4 text-gray-400" />
                            <span className="text-sm text-gray-400">
                              by {thread.author}
                              {thread.author === "Anonymous" && " (Guest)"}
                            </span>
                          </div>
                          <div className="flex items-center space-x-4">
                            <span className="text-sm text-gray-400">{formatDate(thread.createdAt)}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          )}
        </section>

<Dialog open={showShareModal} onOpenChange={setShowShareModal}>
          <DialogContent className="bg-gray-900 border-gray-700 text-white max-w-2xl">
            <DialogHeader>
              <DialogTitle className="text-blue-400">Share Your Forums</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <p className="text-gray-300">
                Your forum data has been encoded into this shareable URL. Anyone with this link can import your threads
                and discussions.
              </p>
              <div className="bg-gray-800 border border-gray-600 rounded-lg p-4">
                <p className="text-xs text-gray-400 mb-2">Shareable URL:</p>
                <div className="flex items-center space-x-2">
                  <Input value={shareUrl} readOnly className="bg-gray-900 border-gray-600 text-white text-sm" />
                  <Button onClick={copyShareUrl} size="sm" className="bg-blue-600 hover:bg-blue-700">
                    Copy
                  </Button>
                </div>
              </div>
              <div className="bg-yellow-900/20 border border-yellow-600/30 rounded-lg p-4">
                <p className="text-yellow-300 text-sm">
                  <strong>Note:</strong> This URL contains all your forum data. Only share it with people you trust.
                </p>
              </div>
            </div>
          </DialogContent>
        </Dialog>

<EnhancedAuthModal
          isOpen={isAuthModalOpen}
          onClose={() => setIsAuthModalOpen(false)}
          onSuccess={handleAuthSuccess}
        />

<AdminPanel isOpen={isAdminPanelOpen} onClose={() => setIsAdminPanelOpen(false)} currentUser={user} />

<UserProfileModal
          isOpen={isProfileModalOpen}
          onClose={() => setIsProfileModalOpen(false)}
          username={profileModalUsername}
          currentUser={user}
          onUserUpdate={setUser}
        />

<NotificationsPanel
          isOpen={isNotificationsOpen}
          onClose={() => setIsNotificationsOpen(false)}
          currentUser={user}
        />

<EnhancedDirectMessages
          isOpen={isDirectMessagesOpen}
          onClose={() => {
            setIsDirectMessagesOpen(false)
            setStartMessageWith(undefined)
          }}
          currentUser={user}
          startConversationWith={startMessageWith}
        />

<SearchModal
          isOpen={isSearchModalOpen}
          onClose={() => setIsSearchModalOpen(false)}
          onThreadSelect={(threadId) => router.push(`/forums/thread/${threadId}`)}
          onUserSelect={(username) => openUserProfile(username)}
        />

<FriendSearchModal
          isOpen={isFriendSearchOpen}
          onClose={() => setIsFriendSearchOpen(false)}
          currentUser={user}
          onUserUpdate={setUser}
          onStartMessage={handleStartMessage}
        />

Microsoft .NET Framework 4.8

Visual C++ Redistributable 2015-2022