import { useParams } from "react-router-dom";
import { motion } from "framer-motion";
import { PageTransition, staggerContainer, fadeUpItem } from "@/components/PageTransition";
import { GradeHeroBlock } from "@/components/page-blocks";

interface Club {
  name: string;
  purpose: string;
}

interface CommitteeClubs {
  committee: string;
  id: number;
  emoji: string;
  color: string;
  clubs: Club[];
}

const clubData: CommitteeClubs[] = [
  {
    committee: "Writing & Literature",
    id: 1,
    emoji: "✍️",
    color: "bg-deep-sea",
    clubs: [
      { name: "Writers' Guild", purpose: "Cultivate creative expression and critical thinking through writing." },
      { name: "The Book Voyagers", purpose: "Foster a love of reading and broaden cultural understanding." },
      { name: "The Quill (SPARKS Magazine)", purpose: "Provide a platform for student voices and foster journalistic skills." },
      { name: "School Newspaper Club", purpose: "Promote responsible journalism and a well-informed school community." },
      { name: "Foreign Languages Club", purpose: "Expose students to different cultures and enhance multilingual communication." },
    ],
  },
  {
    committee: "Advocacy & Change Makers",
    id: 2,
    emoji: "✊",
    color: "bg-valencia",
    clubs: [
      { name: "STEMinism Club", purpose: "Promote gender equity in STEM fields." },
      { name: "Climate Crusaders Club", purpose: "Encourage environmental stewardship and climate change action." },
      { name: "Sustainability Stewards Club", purpose: "Foster understanding of sustainable practices and their impact." },
      { name: "Social Justice League", purpose: "Empower students to champion social equity and justice." },
      { name: "Green Earth Club", purpose: "Focus on conservation, recycling, and ecological education." },
      { name: "With Gratitude", purpose: "Foster community connections and inspire positive action through gratitude." },
    ],
  },
  {
    committee: "Thrive & Lead",
    id: 3,
    emoji: "🌟",
    color: "bg-moss",
    clubs: [
      { name: "Orion Debate Club", purpose: "Develop critical thinking, public speaking, and persuasive argumentation." },
      { name: "Orion Public Speaking Guild", purpose: "Enhance confidence and competence in public speaking." },
      { name: "Communication Mastery Club", purpose: "Improve interpersonal communication skills." },
      { name: "Mindfulness & Yoga Club", purpose: "Promote mindfulness and mental health through yoga practices." },
      { name: "Fitness and Nutrition Guild", purpose: "Promote a healthy lifestyle through fitness and nutrition education." },
      { name: "Empathy & Emotional Intelligence Club", purpose: "Nurture emotional intelligence and foster empathetic understanding." },
      { name: "Orion Student Council", purpose: "Develop leadership skills and represent student interests." },
      { name: "Human Behavior & Brain Science Club", purpose: "Explore psychological principles and cognitive neuroscience." },
      { name: "Focus Mindset Mastery Club", purpose: "Cultivate essentialism and the disciplined pursuit of less." },
    ],
  },
  {
    committee: "STEM Innovation & Entrepreneurship",
    id: 4,
    emoji: "🚀",
    color: "bg-sunflower",
    clubs: [
      { name: "Math Club", purpose: "Encourage a deeper understanding and appreciation of mathematics." },
      { name: "Orion Coders Club", purpose: "Develop coding and computational thinking skills." },
      { name: "Medical Mavericks Club", purpose: "Explore medical science and inspire future healthcare professionals." },
      { name: "Drone Building Club", purpose: "Empower students soaring in STEM by crafting and piloting drones." },
      { name: "Orion Science Explorers Club", purpose: "Promote scientific curiosity and hands-on experimentation." },
      { name: "Orion Robotics League", purpose: "Foster innovation and teamwork through robotics challenges." },
      { name: "Invention Studio (Makers Space)", purpose: "Inspire creativity, innovation, and problem-solving hands-on." },
      { name: "Orion Hacks Club", purpose: "Foster creative problem solvers who use technology for meaningful contributions." },
      { name: "Orion Disciplined Entrepreneurship Club", purpose: "Instill entrepreneurial thinking and startup creation skills." },
      { name: "Orion Finance Wizards Club", purpose: "Improve financial literacy and foster responsible money management." },
      { name: "Biodiversity & Gardening Club", purpose: "Foster appreciation for biodiversity through gardening and conservation." },
      { name: "Business & Bucks Club", purpose: "Teach practical business and investment skills." },
      { name: "Out of the Box Thinkers Club", purpose: "Encourage innovative problem solving and process optimization." },
      { name: "STEM Historical Exploration Club", purpose: "Explore the history of STEM fields and their impacts on society." },
    ],
  },
  {
    committee: "Community Impact",
    id: 5,
    emoji: "🤝",
    color: "bg-salmon",
    clubs: [
      { name: "Community Impact Alliance", purpose: "Foster community involvement and service." },
      { name: "Orion Pride Coalition", purpose: "Cultivate school spirit and unity." },
      { name: "Peer Mentorship Club", purpose: "Support academic and personal growth through peer mentorship." },
      { name: "Orion Compassion/Kindness Club", purpose: "Nurture kindness and empathy within our community." },
      { name: "TedX — Ideas in Action Forum", purpose: "Provide a platform for idea sharing and intellectual stimulation." },
    ],
  },
  {
    committee: "Sports",
    id: 6,
    emoji: "⚽",
    color: "bg-mist",
    clubs: [
      { name: "Orion Basketball Club", purpose: "Promote team skills, physical fitness, and the love of basketball." },
      { name: "Orion Soccer Club", purpose: "Foster teamwork, discipline, and appreciation for soccer." },
      { name: "Orion Tennis Club", purpose: "Develop athletic skills and sportsmanship through tennis." },
      { name: "Orion Running Club", purpose: "Develop athletic skills and sportsmanship through running." },
    ],
  },
  {
    committee: "Artistic Endeavors",
    id: 7,
    emoji: "🎨",
    color: "bg-valencia",
    clubs: [
      { name: "Comics and Visual Storytelling", purpose: "Foster creativity and storytelling through visual arts." },
      { name: "Classical Music Club", purpose: "Cultivate appreciation for classical music and develop musical talents." },
      { name: "Musical Outreach Club", purpose: "Connect the community through shared musical experiences." },
      { name: "Watercolor Club", purpose: "Encourage artistic expression through watercolor painting." },
      { name: "Photography Club", purpose: "Enhance photographic skills and explore creative expression." },
      { name: "Digital Arts Club", purpose: "Harness creativity to produce captivating digital art pieces and narratives." },
    ],
  },
  {
    committee: "Leisure and Learning",
    id: 8,
    emoji: "♟️",
    color: "bg-deep-sea",
    clubs: [
      { name: "Chess Club", purpose: "Improve strategic thinking and problem-solving through chess." },
      { name: "Board Game Club", purpose: "Encourage critical thinking and social interaction through board games." },
      { name: "Marvel Club", purpose: "Engage in discussions and activities around Marvel comics and films." },
      { name: "Trivia Club", purpose: "Expand knowledge across a wide range of subjects through trivia." },
      { name: "Model United Nations Club", purpose: "Develop diplomacy and negotiation skills in a global context." },
    ],
  },
  {
    committee: "Parent Engagement",
    id: 9,
    emoji: "👨‍👩‍👧‍👦",
    color: "bg-moss",
    clubs: [
      { name: "School Beautification Club", purpose: "Foster school pride and environmental responsibility through beautification." },
      { name: "Healthy Families Club", purpose: "Promote healthy lifestyle choices for the whole family." },
      { name: "Family Events Club", purpose: "Foster a sense of community through family-centered events." },
    ],
  },
];

const gradeLabels: Record<string, string> = {
  kg: "Kindergarten", "1": "Grade 1", "2": "Grade 2", "3": "Grade 3", "4": "Grade 4", "5": "Grade 5",
};

const ClubsPage = () => {
  const { grade } = useParams<{ grade: string }>();
  const gradeKey = grade || "kg";
  const gradeLabel = gradeLabels[gradeKey] || `Grade ${gradeKey}`;

  const totalClubs = clubData.reduce((sum, c) => sum + c.clubs.length, 0);

  return (
    <PageTransition>
      <div className="min-h-full bg-background">
        <GradeHeroBlock
          content={{
            layout: "detail",
            showLogo: false,
            backLabel: "Back to Kaleidoscope",
            backHref: `/grade/${gradeKey}`,
            mainIcon: "🎭",
            title: "Clubs",
            subtitle: gradeLabel,
            statistics: [{
              value: String(totalClubs),
              label: "clubs across 9 steering committees — find your passion and build your community.",
            }],
            backgroundPattern: "radial",
            accentColor: "moss",
            patternPosition: "40% 60%",
          }}
        />

        <section className="py-16 bg-background">
          <div className="container mx-auto px-6 max-w-5xl space-y-10">
            {clubData.map((committee) => (
              <motion.div
                key={committee.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4 }}
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className={`w-9 h-9 rounded-full ${committee.color} flex items-center justify-center text-lg`}>
                    {committee.emoji}
                  </span>
                  <h2 className="font-display text-lg font-bold text-foreground">{committee.committee}</h2>
                  <span className="text-xs bg-muted text-muted-foreground px-2 py-0.5 rounded-full font-display">
                    {committee.clubs.length} clubs
                  </span>
                </div>
                <motion.div
                  className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3"
                  variants={staggerContainer}
                  initial="initial"
                  whileInView="animate"
                  viewport={{ once: true }}
                >
                  {committee.clubs.map((club) => (
                    <motion.div
                      key={club.name}
                      variants={fadeUpItem}
                      className="bg-card rounded-xl p-4 border border-border hover:shadow-md transition-shadow"
                    >
                      <h3 className="font-display text-sm font-bold text-foreground mb-1">{club.name}</h3>
                      <p className="text-muted-foreground text-xs leading-relaxed">{club.purpose}</p>
                    </motion.div>
                  ))}
                </motion.div>
              </motion.div>
            ))}
          </div>
        </section>

      </div>
    </PageTransition>
  );
};

export default ClubsPage;