import { motion } from "framer-motion";
import { staggerContainer, fadeUpItem } from "@/components/PageTransition";

type Content = Record<string, unknown>;

export type ClubCard = {
  name: string;
  purpose: string;
};

/** Icon-circle background tokens (kept as literal classes so Tailwind JIT keeps them). */
const iconColorClass: Record<string, string> = {
  "deep-sea": "bg-deep-sea",
  valencia: "bg-valencia",
  salmon: "bg-salmon",
  sunflower: "bg-sunflower",
  moss: "bg-moss",
  mist: "bg-mist",
};

const defaultEmoji = "✍️";
const defaultIconColor = "deep-sea";
const defaultTitle = "Writing & Literature";
const defaultCountSuffix = "clubs";

const defaultCards: ClubCard[] = [
  { 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." },
];

function str(c: unknown): string {
  return typeof c === "string" ? c : "";
}

function parseCards(content: Content | undefined): ClubCard[] {
  const raw = content?.cards;
  if (!Array.isArray(raw) || raw.length === 0) return defaultCards;
  return raw
    .filter((x): x is Record<string, unknown> => x != null && typeof x === "object")
    .map((o) => ({
      name: str(o.name).trim() || "Club",
      purpose: str(o.purpose).trim() || "",
    }));
}

export function ClubCategoryGridBlock({ content }: { content?: Content }) {
  const emoji = str(content?.emoji).trim() || defaultEmoji;
  const iconColor = str(content?.iconColor).trim() || defaultIconColor;
  const title = str(content?.title).trim() || defaultTitle;
  const countSuffix = str(content?.countSuffix).trim() || defaultCountSuffix;
  const showCount = content?.showCount !== false;
  const cards = parseCards(content);

  const circleClass = iconColorClass[iconColor] ?? iconColorClass[defaultIconColor];

  return (
    <section className="py-8 bg-background">
      <div className="container mx-auto px-6 max-w-5xl">
        <motion.div
          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 ${circleClass} flex items-center justify-center text-lg`}>
              {emoji}
            </span>
            <h2 className="font-display text-lg font-bold text-foreground">{title}</h2>
            {showCount ? (
              <span className="text-xs bg-muted text-muted-foreground px-2 py-0.5 rounded-full font-display">
                {cards.length} {countSuffix}
              </span>
            ) : null}
          </div>
          <motion.div
            className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3"
            variants={staggerContainer}
            initial="initial"
            whileInView="animate"
            viewport={{ once: true }}
          >
            {cards.map((card, i) => (
              <motion.div
                key={i}
                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">{card.name}</h3>
                <p className="text-muted-foreground text-xs leading-relaxed">{card.purpose}</p>
              </motion.div>
            ))}
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}