import { motion } from "framer-motion";

type Content = Record<string, unknown>;

export type AnnualFlowQuarterItem = {
  term: string;
  cycle: string;
  weeks: string;
  title: string;
  focus: string;
  color: string;
  emoji: string;
};

const defaultTitle = "🗓️ Turning the Kaleidoscope: The Annual Flow";

const defaultQuarters: AnnualFlowQuarterItem[] = [
  {
    term: "Quarter 1",
    cycle: "Cycle 1",
    weeks: "9 Weeks",
    title: "Discover & Define",
    focus: "Empathy, Investigation & Systems Mapping",
    color: "--deep-sea",
    emoji: "🔍",
  },
  {
    term: "Quarter 2",
    cycle: "Cycle 2",
    weeks: "9 Weeks",
    title: "Ideate & Prototype",
    focus: "HMW Questions, Concept Sprints & Low-Fi Builds",
    color: "--sunflower",
    emoji: "🔧",
  },
  {
    term: "Quarter 3",
    cycle: "Cycle 3",
    weeks: "9 Weeks",
    title: "Test & Iterate",
    focus: "User Testing, Data Collection & Revision Rounds",
    color: "--moss",
    emoji: "🔄",
  },
  {
    term: "Quarter 4",
    cycle: "Cycle 4",
    weeks: "9 Weeks",
    title: "Implement & Showcase",
    focus: "Partner Pilots, Impact Metrics & Innovation Exhibition",
    color: "--valencia",
    emoji: "🎤",
  },
];

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

function parseQuarters(content: Content | undefined): AnnualFlowQuarterItem[] {
  const raw = content?.quarters;
  if (!Array.isArray(raw) || raw.length === 0) return defaultQuarters;
  return raw
    .filter((x): x is Record<string, unknown> => x != null && typeof x === "object")
    .map((o) => ({
      term: str(o.term).trim() || "Quarter",
      cycle: str(o.cycle).trim() || "",
      weeks: str(o.weeks).trim() || "",
      title: str(o.title).trim() || "",
      focus: str(o.focus).trim() || "",
      color: str(o.color).trim() || "--deep-sea",
      emoji: str(o.emoji).trim() || "•",
    }));
}

export function AnnualFlowQuartersBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const quarters = parseQuarters(content);

  return (
    <section className="pt-12 pb-0 bg-muted/30">
      <div className="container mx-auto px-6 max-w-5xl">
        <motion.h2
          className="font-display text-xl md:text-2xl font-bold text-foreground text-center mb-8"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
        >
          {title}
        </motion.h2>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {quarters.map((t, i) => {
            const headerParts = [t.term, t.cycle, t.weeks].filter(Boolean);
            return (
              <motion.div
                key={`${t.term}-${i}`}
                className="bg-card rounded-xl overflow-hidden border border-border"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
              >
                <div
                  className="p-1.5 text-center font-display text-xs font-bold text-white tracking-wider uppercase"
                  style={{ backgroundColor: `hsl(var(${t.color}))` }}
                >
                  {headerParts.join(" · ")}
                </div>
                <div className="p-5 text-center">
                  <span className="text-3xl block mb-2">{t.emoji}</span>
                  <h3 className="font-display text-sm font-bold text-foreground mb-1">{t.title}</h3>
                  <p className="text-muted-foreground text-xs">Focus: {t.focus}</p>
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}