import { motion } from "framer-motion";
import { BrandscapeShell } from "@/components/BrandscapeShell";

type Content = Record<string, unknown>;

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

const defaultHeading = "Deep Inquiry Questions to Ask Your Child";
const defaultHeadingIcon = "💭";
const defaultIntroTitle = "Ask About Learning, Not Just Activities";
const defaultIntroIcon = "🧠";
const defaultIntroText =
  'Instead of "What did you do today?", ask deeper questions that help your child reflect on their learning:';
const defaultCategories = [
  { title: "About Their Observations", emoji: "🔍", questions: ["What surprised you most about what you observed today?", "How do you know that's a living thing?"] },
  { title: "About Evidence & Reasoning", emoji: "🧠", questions: ["How do you know? What's your evidence?", "What's the difference between what you observed and what you think?"] },
];

type CategoryItem = { title: string; emoji: string; questions: string[] };

function ensureCategory(raw: unknown): CategoryItem {
  const o = raw && typeof raw === "object" ? (raw as Record<string, unknown>) : {};
  const rawQ = o.questions;
  const questions = Array.isArray(rawQ)
    ? rawQ.filter((x): x is string => typeof x === "string").map((s) => s.trim()).filter(Boolean)
    : [];
  return {
    title: str(o.title).trim() || "Category",
    emoji: str(o.emoji).trim() || "💭",
    questions: questions.length ? questions : ["Question?"],
  };
}

function ensureCategories(raw: unknown): CategoryItem[] {
  if (!Array.isArray(raw) || raw.length === 0) return defaultCategories;
  return raw.slice(0, 12).map(ensureCategory);
}

export function CourseInquiryQuestionsBlock({ content }: { content?: Content }) {
  const heading = str(content?.heading).trim() || defaultHeading;
  const headingIcon = str(content?.headingIcon).trim() || defaultHeadingIcon;
  const introTitle = str(content?.introTitle).trim() || defaultIntroTitle;
  const introIcon = str(content?.introIcon).trim() || defaultIntroIcon;
  const introText = str(content?.introText).trim() || defaultIntroText;
  const categories = ensureCategories(content?.categories);

  return (
    <BrandscapeShell variant="content" paddingY>
    <motion.section
      className="w-full min-w-0"
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
    >
      <h2 className="font-display text-xl font-bold text-deep-sea mb-4 flex items-center gap-2 border-b-2 border-deep-sea pb-2">
        <span className="text-2xl">{headingIcon}</span> {heading}
      </h2>
      <div className="bg-sunflower/10 border-2 border-sunflower rounded-xl p-6">
        <div className="flex items-center gap-2 font-display font-bold text-foreground mb-4">
          <span className="text-2xl">{introIcon}</span> {introTitle}
        </div>
        <p className="text-muted-foreground text-sm italic mb-4">{introText}</p>
        <div className="space-y-4">
          {categories.map((cat) => (
            <div key={cat.title} className="bg-card rounded-lg p-4 border-l-4 border-sunflower">
              <h3 className="font-display text-sm font-bold text-foreground mb-2 flex items-center gap-2">
                <span>{cat.emoji}</span> {cat.title}
              </h3>
              <ul className="space-y-1.5">
                {cat.questions.map((q, i) => (
                  <li key={i} className="text-muted-foreground text-sm flex items-start gap-2">
                    <span>💭</span> {q}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </motion.section>
    </BrandscapeShell>
  );
}