'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import useAuthStore from '../store/authStore'
import Header from '../components/nav/Header'
import Footer from '../components/Footer'
import { 
  UsersIcon, 
  ChatBubbleLeftRightIcon, 
  HeartIcon,
  FireIcon,
  TrophyIcon,
  UserGroupIcon,
  PlusIcon,
  ArrowRightIcon
} from '@heroicons/react/24/outline'

export default function CommunityPage() {
  const router = useRouter()
  const user = useAuthStore(state => state.user)
  
  // Redirect if not logged in
  useEffect(() => {
    if (!user) {
      router.push('/login')
    }
  }, [user, router])
  
  // Don't render if no user
  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#8D6B1D] mx-auto mb-4"></div>
          <p className="text-[#4A4A4A]">Loading...</p>
        </div>
      </div>
    )
  }

  // Mock community data
  const communityStats = [
    { label: 'Members', value: '12,487', icon: UsersIcon, color: 'text-blue-600' },
    { label: 'Active Groups', value: '156', icon: UserGroupIcon, color: 'text-green-600' },
    { label: 'Discussions', value: '3,421', icon: ChatBubbleLeftRightIcon, color: 'text-purple-600' },
    { label: 'Daily Active', value: '2,186', icon: FireIcon, color: 'text-orange-600' }
  ]

  const trendingGroups = [
    {
      name: 'Eco Warriors',
      members: '1,284',
      category: 'Sustainability',
      image: '🌱',
      description: 'Join fellow eco-enthusiasts in making the world greener'
    },
    {
      name: 'Zero Waste Living',
      members: '892',
      category: 'Lifestyle',
      image: '♻️',
      description: 'Tips and tricks for living a zero-waste lifestyle'
    },
    {
      name: 'Sustainable Fashion',
      members: '756',
      category: 'Fashion',
      image: '👕',
      description: 'Ethical fashion choices and sustainable brands'
    },
    {
      name: 'Green Tech',
      members: '634',
      category: 'Technology',
      image: '💚',
      description: 'Discuss the latest in green technology and innovation'
    }
  ]

  const recentPosts = [
    {
      user: 'Sarah M.',
      group: 'Eco Warriors',
      time: '2 hours ago',
      content: 'Just discovered a fantastic new way to upcycle old furniture! Has anyone tried painting with eco-friendly paints?',
      likes: 23,
      comments: 8
    },
    {
      user: 'David K.',
      group: 'Zero Waste Living',
      time: '4 hours ago',
      content: 'Week 3 of my zero-waste challenge! Managed to produce only 1 small jar of waste. Here are my top tips...',
      likes: 45,
      comments: 12
    },
    {
      user: 'Maria L.',
      group: 'Sustainable Fashion',
      time: '6 hours ago',
      content: 'Found an amazing local brand that makes clothes from recycled ocean plastic. Their quality is incredible!',
      likes: 38,
      comments: 15
    }
  ]

  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      <Header />
      
      <main className="flex-1 py-8 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          {/* Header Section */}
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-gray-900 mb-4">
              Welcome to Profit Planet Community 🌍
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Connect with like-minded individuals, share sustainable practices, and make a positive impact together.
            </p>
          </div>

          {/* Community Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
            {communityStats.map((stat, index) => (
              <div key={index} className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 text-center">
                <stat.icon className={`h-8 w-8 ${stat.color} mx-auto mb-3`} />
                <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
                <p className="text-sm text-gray-600">{stat.label}</p>
              </div>
            ))}
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Main Content */}
            <div className="lg:col-span-2 space-y-8">
              {/* Trending Groups */}
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div className="flex items-center justify-between mb-6">
                  <h2 className="text-xl font-semibold text-gray-900 flex items-center">
                    <TrophyIcon className="h-6 w-6 text-[#8D6B1D] mr-2" />
                    Trending Groups
                  </h2>
                  <button className="text-[#8D6B1D] hover:text-[#7A5E1A] text-sm font-medium flex items-center">
                    View All
                    <ArrowRightIcon className="h-4 w-4 ml-1" />
                  </button>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {trendingGroups.map((group, index) => (
                    <div key={index} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer">
                      <div className="flex items-start space-x-3">
                        <div className="text-2xl">{group.image}</div>
                        <div className="flex-1">
                          <h3 className="font-semibold text-gray-900">{group.name}</h3>
                          <p className="text-xs text-[#8D6B1D] font-medium mb-1">{group.category}</p>
                          <p className="text-sm text-gray-600 mb-2">{group.description}</p>
                          <p className="text-xs text-gray-500">{group.members} members</p>
                        </div>
                      </div>
                      <button className="w-full mt-3 px-3 py-2 bg-[#8D6B1D]/10 text-[#8D6B1D] rounded-lg text-sm font-medium hover:bg-[#8D6B1D]/20 transition-colors">
                        Join Group
                      </button>
                    </div>
                  ))}
                </div>
              </div>

              {/* Recent Discussions */}
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div className="flex items-center justify-between mb-6">
                  <h2 className="text-xl font-semibold text-gray-900 flex items-center">
                    <ChatBubbleLeftRightIcon className="h-6 w-6 text-[#8D6B1D] mr-2" />
                    Recent Discussions
                  </h2>
                  <button className="text-[#8D6B1D] hover:text-[#7A5E1A] text-sm font-medium">
                    Start Discussion
                  </button>
                </div>

                <div className="space-y-6">
                  {recentPosts.map((post, index) => (
                    <div key={index} className="border-b border-gray-100 pb-6 last:border-b-0">
                      <div className="flex items-start space-x-3">
                        <div className="w-10 h-10 bg-[#8D6B1D]/20 rounded-full flex items-center justify-center">
                          <span className="text-sm font-semibold text-[#8D6B1D]">
                            {post.user.charAt(0)}
                          </span>
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center space-x-2 mb-1">
                            <span className="font-medium text-gray-900">{post.user}</span>
                            <span className="text-gray-300">•</span>
                            <span className="text-sm text-[#8D6B1D]">{post.group}</span>
                            <span className="text-gray-300">•</span>
                            <span className="text-sm text-gray-500">{post.time}</span>
                          </div>
                          <p className="text-gray-800 mb-3">{post.content}</p>
                          <div className="flex items-center space-x-4">
                            <button className="flex items-center space-x-1 text-gray-500 hover:text-red-500 transition-colors">
                              <HeartIcon className="h-4 w-4" />
                              <span className="text-sm">{post.likes}</span>
                            </button>
                            <button className="flex items-center space-x-1 text-gray-500 hover:text-[#8D6B1D] transition-colors">
                              <ChatBubbleLeftRightIcon className="h-4 w-4" />
                              <span className="text-sm">{post.comments}</span>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Sidebar */}
            <div className="space-y-6">
              {/* Quick Actions */}
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 className="font-semibold text-gray-900 mb-4">Quick Actions</h3>
                <div className="space-y-3">
                  <button className="w-full flex items-center justify-center px-4 py-3 bg-[#8D6B1D] text-white rounded-lg hover:bg-[#7A5E1A] transition-colors">
                    <PlusIcon className="h-4 w-4 mr-2" />
                    Create Group
                  </button>
                  <button className="w-full flex items-center justify-center px-4 py-3 border border-[#8D6B1D] text-[#8D6B1D] rounded-lg hover:bg-[#8D6B1D]/10 transition-colors">
                    <ChatBubbleLeftRightIcon className="h-4 w-4 mr-2" />
                    Start Discussion
                  </button>
                  <button 
                    onClick={() => router.push('/dashboard')}
                    className="w-full flex items-center justify-center px-4 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    Back to Dashboard
                  </button>
                </div>
              </div>

              {/* My Groups */}
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 className="font-semibold text-gray-900 mb-4">My Groups</h3>
                <div className="space-y-3">
                  <div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div className="text-lg">🌱</div>
                    <div>
                      <p className="text-sm font-medium text-gray-900">Eco Warriors</p>
                      <p className="text-xs text-gray-500">1,284 members</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div className="text-lg">♻️</div>
                    <div>
                      <p className="text-sm font-medium text-gray-900">Zero Waste Living</p>
                      <p className="text-xs text-gray-500">892 members</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Community Guidelines */}
              <div className="bg-gradient-to-br from-[#8D6B1D]/10 to-[#C49225]/10 rounded-lg p-6 border border-[#8D6B1D]/20">
                <h3 className="font-semibold text-gray-900 mb-2">Community Guidelines</h3>
                <ul className="text-sm text-gray-700 space-y-1">
                  <li>• Be respectful and kind</li>
                  <li>• Stay on topic</li>
                  <li>• Share authentic experiences</li>
                  <li>• Help others learn and grow</li>
                </ul>
                <button className="text-xs text-[#8D6B1D] hover:underline mt-3">
                  Read full guidelines
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>
      
      <Footer />
    </div>
  )
}