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 = "Your Child's Year-Long Journey";
const defaultHeadingIcon = "🗓️";
const defaultPhases = [
  { weeks: "Q1", title: "Observe & Discover", emoji: "🌱", desc: "Explore the schoolyard, identify organisms, document what lives here and what they need to survive" },
  { weeks: "Q2", title: "Measure & Analyze", emoji: "📊", desc: "Track sun, shade, temperature, and weather patterns. Use data to understand environmental conditions" },
  { weeks: "Q3", title: "Design & Test", emoji: "🔧", desc: "Apply scientific understanding to design and test solutions that protect organisms from harsh conditions" },
  { weeks: "Q4", title: "Build & Sustain", emoji: "🏗️", desc: "Create a living habitat, monitor its health, and present scientific evidence of success" },
];

type PhaseItem = { weeks: string; title: string; emoji: string; desc: string };

function ensurePhase(raw: unknown): PhaseItem {
  const o = raw && typeof raw === "object" ? (raw as Record<string, unknown>) : {};
  return {
    weeks: str(o.weeks).trim() || "Q1",
    title: str(o.title).trim() || "Phase",
    emoji: str(o.emoji).trim() || "•",
    desc: str(o.desc).trim() || "",
  };
}

function ensurePhases(raw: unknown): PhaseItem[] {
  if (!Array.isArray(raw) || raw.length === 0) return defaultPhases;
  return raw.slice(0, 12).map(ensurePhase);
}

export function CourseJourneyBlock({ content }: { content?: Content }) {
  const heading = str(content?.heading).trim() || defaultHeading;
  const headingIcon = str(content?.headingIcon).trim() || defaultHeadingIcon;
  const phases = ensurePhases(content?.phases);

  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="space-y-3">
        {phases.map((phase) => (
          <div key={phase.weeks} className="flex gap-3">
            <div className="orion-gradient text-milk rounded-xl px-4 py-3 text-center font-display font-bold text-sm min-w-[70px] flex items-center justify-center">
              {phase.weeks}
            </div>
            <div className="flex-1 bg-muted/50 rounded-xl p-4 border-l-4 border-deep-sea">
              <p className="font-display text-sm font-bold text-valencia mb-1">
                {phase.emoji} {phase.title}
              </p>
              <p className="text-muted-foreground text-sm">{phase.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </motion.section>
    </BrandscapeShell>
  );
}