import { PublicLayout } from '@/components/layout/public-layout'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { MessageSquare, Users, TrendingUp, Clock } from 'lucide-react'

export default function CommunityForumPage() {
  const categories = [
    {
      id: 'general',
      name: 'General Discussion',
      description: 'General questions and discussions',
      posts: 1250,
      latest: '2 hours ago',
    },
    {
      id: 'support',
      name: 'Support',
      description: 'Get help with technical issues',
      posts: 890,
      latest: '1 hour ago',
    },
    {
      id: 'announcements',
      name: 'Announcements',
      description: 'Product updates and news',
      posts: 45,
      latest: '1 day ago',
    },
    {
      id: 'showcase',
      name: 'Showcase',
      description: 'Share your projects and solutions',
      posts: 320,
      latest: '3 hours ago',
    },
  ]

  const recentPosts = [
    {
      id: '1',
      title: 'How to optimize costs on Phoenix?',
      author: 'john_doe',
      category: 'Support',
      replies: 12,
      views: 245,
      time: '2 hours ago',
    },
    {
      id: '2',
      title: 'New feature: Cost forecasting',
      author: 'sankofa_team',
      category: 'Announcements',
      replies: 8,
      views: 189,
      time: '5 hours ago',
    },
    {
      id: '3',
      title: 'Showcase: My Phoenix deployment',
      author: 'dev_user',
      category: 'Showcase',
      replies: 15,
      views: 312,
      time: '1 day ago',
    },
  ]

  return (
    <PublicLayout>
      <div className="min-h-screen bg-studio-black py-24 px-4">
        <div className="mx-auto max-w-7xl">
          <div className="mb-12">
            <h1 className="mb-4 text-5xl font-bold text-white">Community Forum</h1>
            <p className="text-xl text-gray-400">
              Connect with other users, share knowledge, and get support
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {categories.map((category) => (
              <Card key={category.id} className="hover:border-phoenix-fire transition-colors cursor-pointer">
                <CardHeader>
                  <MessageSquare className="h-8 w-8 text-phoenix-fire mb-2" />
                  <CardTitle className="text-white">{category.name}</CardTitle>
                  <CardDescription className="text-gray-400">
                    {category.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between text-sm text-gray-400">
                    <span>{category.posts} posts</span>
                    <span className="flex items-center gap-1">
                      <Clock className="h-4 w-4" />
                      {category.latest}
                    </span>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2">
              <Card className="bg-studio-dark border-studio-medium">
                <CardHeader>
                  <CardTitle className="text-white">Recent Posts</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {recentPosts.map((post) => (
                      <div
                        key={post.id}
                        className="p-4 bg-studio-black rounded-lg hover:bg-studio-medium transition-colors cursor-pointer"
                      >
                        <div className="flex items-start justify-between mb-2">
                          <h3 className="text-white font-semibold">{post.title}</h3>
                          <span className="px-2 py-1 text-xs bg-studio-dark text-gray-400 rounded">
                            {post.category}
                          </span>
                        </div>
                        <div className="flex items-center gap-4 text-sm text-gray-400">
                          <span>by {post.author}</span>
                          <span>{post.replies} replies</span>
                          <span>{post.views} views</span>
                          <span>{post.time}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>

            <div>
              <Card className="bg-studio-dark border-studio-medium mb-6">
                <CardHeader>
                  <CardTitle className="text-white flex items-center gap-2">
                    <Users className="h-5 w-5 text-phoenix-fire" />
                    Community Stats
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex justify-between">
                      <span className="text-gray-400">Members</span>
                      <span className="text-white font-semibold">12,450</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-400">Posts</span>
                      <span className="text-white font-semibold">2,505</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-400">Online</span>
                      <span className="text-white font-semibold">234</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Button variant="phoenix" className="w-full" asChild>
                <Link href="/community/new-post">Create New Post</Link>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </PublicLayout>
  )
}

