import { useParams } from "react-router-dom";
import { getCourseBySlug } from "@/data/courseOverviews";
import { BrandscapeShell } from "@/components/BrandscapeShell";
import { PageTransition } from "@/components/PageTransition";
import { CourseHeroBlock, WhyThisCourseMattersBlock, HowConnectsBlock, SmarterAssessmentBlock, WhatYourChildWillGainBlock, CoursePortraitBlock, CourseCoreSkillsBlock, CourseJourneyBlock, CourseWhatTheyCreateBlock, CourseInquiryQuestionsBlock, CourseSupportAtHomeBlock, CourseQuarterCelebrationBlock } from "@/components/page-blocks";

const CourseOverview = () => {
  const { slug } = useParams();
  const course = getCourseBySlug(slug || "");

  if (!course) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <p className="text-foreground">Course not found.</p>
      </div>
    );
  }

  const courseTypeLabel =
    course.type === "core" ? "Core Course" : course.type === "pbel" ? "PBEL" : `DNA - ${course.strand || "Specialty"}`;

  return (
    <PageTransition>
      <div className="min-h-full bg-background">
        <CourseHeroBlock
          content={{
            backLabel: "SPARK Dashboard",
            backHref: "/",
            emoji: course.emoji,
            name: course.name,
            tagline: course.tagline,
            courseType: courseTypeLabel,
            duration: course.duration,
            weeklyTimeK5: course.weeklyTimeK5,
            weeklyTime612: course.weeklyTime612,
          }}
        />

        <BrandscapeShell variant="content" paddingY className="space-y-12">
          <WhyThisCourseMattersBlock
            content={{
              heading: "Why This Course Matters",
              headingIcon: "💡",
              body: course.whyMatters,
            }}
          />

          <HowConnectsBlock
            content={{
              subject: course.name,
              headingIcon: "🎭",
              body: course.howConnects ?? "",
              otherSubjectsTitle: "What Other Subjects Teach",
              otherSubjectsIcon: "📚",
              otherSubjectsText: course.connectionExample?.otherSubjects ?? "",
              thisAddsTitle: "What {subject} Adds",
              thisAddsIcon: course.emoji ?? "🔬",
              thisAddsText: course.connectionExample?.thisAdds ?? "",
            }}
          />

          <SmarterAssessmentBlock />

          <WhatYourChildWillGainBlock
            content={{
              heading: "What Your Child Will Gain",
              headingIcon: "🌟",
              items: course.whatChildGains ?? [],
            }}
          />

          <CoursePortraitBlock
            content={{
              heading: "Developing the Whole Child",
              headingIcon: "🎨",
              subtitle: "This course intentionally develops all six Portrait of the Learner dimensions:",
              dimensions: course.portraitDimensions ?? [],
            }}
          />

          <CourseCoreSkillsBlock
            content={{
              heading: "Core Skills Your Child Will Master",
              headingIcon: "🎯",
              skills: course.coreSkills ?? [],
            }}
          />

          <CourseJourneyBlock
            content={{
              heading: "Your Child's Year-Long Journey",
              headingIcon: "🗓️",
              phases: course.journey ?? [],
            }}
          />

          <CourseWhatTheyCreateBlock
            content={{
              heading: "What Your Child Will Create",
              headingIcon: "🎨",
              items: course.whatTheyCreate ?? [],
            }}
          />

          <CourseInquiryQuestionsBlock
            content={{
              heading: "Deep Inquiry Questions to Ask Your Child",
              headingIcon: "💭",
              introTitle: "Ask About Learning, Not Just Activities",
              introIcon: "🧠",
              introText: 'Instead of "What did you do today?", ask deeper questions that help your child reflect on their learning:',
              categories: course.inquiryCategories ?? [],
            }}
          />

          <CourseSupportAtHomeBlock
            content={{
              heading: "Simple Ways to Support at Home",
              headingIcon: "🏠",
              tips: course.supportAtHome ?? [],
            }}
          />

          <CourseQuarterCelebrationBlock
            content={{
              heading: "Quarter-End Celebration",
              headingIcon: "🎊",
              body: course.quarterCelebration ?? "",
            }}
          />
        </BrandscapeShell>
      </div>
    </PageTransition>
  );
};

export default CourseOverview;