"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { MessageCircle, Users, Globe } from 'lucide-react';

export default function CommunityPage() {
  const communityChannels = [
    {
      icon: MessageCircle,
      title: "Discussion Forum",      description: "Ask questions, share insights, and connect with other learners about financial topics.",      link: "#",      members: "5,234"
    },
    {
      icon: Users,
      title: "Study Groups",      description: "Join topic-specific study groups to learn together with peers on your level.",      link: "#",      members: "1,892"
    },
    {
      icon: Globe,
      title: "Global Events",      description: "Participate in live webinars, challenges, and networking events with the FinHub community.",      link: "#",      members: "8,456"
    },
  ];

  const leaderboardData = [
    { rank: 1, name: "Alex Chen", points: 2840, streak: "45 days" },
    { rank: 2, name: "Sarah Williams", points: 2720, streak: "38 days" },
    { rank: 3, name: "Marcus Johnson", points: 2590, streak: "32 days" },
    { rank: 4, name: "Emma Rodriguez", points: 2410, streak: "28 days" },
    { rank: 5, name: "James Park", points: 2280, streak: "24 days" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="noise"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Learn", id: "/" },
            { name: "Courses", id: "/courses" },
            { name: "Community", id: "/community" },
            { name: "FAQ", id: "/" },
            { name: "Login", id: "/login" },
          ]}
          button={{
            text: "Join Community",            href: "/signup"
          }}
          brandName="FinHub"
        />
      </div>

      <div className="min-h-screen bg-background pt-20 pb-20 px-4">
        <div className="max-w-7xl mx-auto">
          {/* Header */}
          <div className="mb-12 text-center">
            <h1 className="text-4xl font-bold text-foreground mb-4">FinHub Community</h1>
            <p className="text-lg text-foreground opacity-75 max-w-2xl mx-auto">
              Connect with thousands of learners, share experiences, and grow together in our supportive financial education community.
            </p>
          </div>

          {/* Community Channels */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            {communityChannels.map((channel, index) => {
              const Icon = channel.icon;
              return (
                <div key={index} className="bg-card rounded-lg shadow-md p-8 hover:shadow-lg transition-shadow">
                  <Icon className="text-primary-cta mb-4" size={40} />
                  <h3 className="text-xl font-bold text-foreground mb-3">{channel.title}</h3>
                  <p className="text-foreground opacity-75 mb-4">{channel.description}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-foreground opacity-60">{channel.members} members</span>
                    <a
                      href={channel.link}
                      className="text-primary-cta hover:underline font-semibold"
                    >
                      Join →
                    </a>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Leaderboard */}
          <div className="bg-card rounded-lg shadow-md p-8">
            <h2 className="text-2xl font-bold text-foreground mb-6">Top Learners Leaderboard</h2>
            <div className="space-y-4">
              {leaderboardData.map((user) => (
                <div key={user.rank} className="flex items-center justify-between p-4 bg-background rounded-lg">
                  <div className="flex items-center gap-4">
                    <div className="w-10 h-10 bg-primary-cta text-white rounded-full flex items-center justify-center font-bold">
                      {user.rank}
                    </div>
                    <div>
                      <p className="font-semibold text-foreground">{user.name}</p>
                      <p className="text-sm text-foreground opacity-60">Streak: {user.streak}</p>
                    </div>
                  </div>
                  <p className="text-lg font-bold text-primary-cta">{user.points} pts</p>
                </div>
              ))}
            </div>
          </div>

          {/* Stats */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
            <div className="bg-card rounded-lg p-8 text-center shadow-md">
              <p className="text-4xl font-bold text-primary-cta mb-2">15K+</p>
              <p className="text-foreground opacity-75">Active Members</p>
            </div>
            <div className="bg-card rounded-lg p-8 text-center shadow-md">
              <p className="text-4xl font-bold text-primary-cta mb-2">500+</p>
              <p className="text-foreground opacity-75">Daily Discussions</p>
            </div>
            <div className="bg-card rounded-lg p-8 text-center shadow-md">
              <p className="text-4xl font-bold text-primary-cta mb-2">50+</p>
              <p className="text-foreground opacity-75">Weekly Events</p>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png"
          imageAlt="FinHub gradient background"
          logoText="FinHub"
          copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
          columns={[
            {
              title: "Learning",              items: [
                { label: "Courses", href: "/courses" },
                { label: "Lessons", href: "/" },
                { label: "Challenges", href: "#" },
                { label: "Resources", href: "#" },
              ],
            },
            {
              title: "Community",              items: [
                { label: "Forum", href: "#" },
                { label: "Discord", href: "#" },
                { label: "Leaderboard", href: "#" },
                { label: "Events", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Contact", href: "#" },
                { label: "Privacy Policy", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
