import { useParams } from "react-router-dom";
import { PageTransition } from "@/components/PageTransition";
import { GradeHeroBlock, KaleidoscopeBlock } from "@/components/page-blocks";

const gradeLabels: Record<string, string> = {
  kg: "Kindergarten",
  "1": "Grade 1",
  "2": "Grade 2",
  "3": "Grade 3",
  "4": "Grade 4",
  "5": "Grade 5",
};

function getKaleidoscopeItems(grade: string) {
  return [
    { label: "PBL", emoji: "🔬", color: "deep-sea", route: `/grade/${grade}/curriculum`, description: "Project-Based Learning curriculum integrated across all subjects" },
    { label: "Design to Impact", emoji: "💧", color: "valencia", route: "/course/pbel-design-to-impact", description: "Problem-Based Experiential Learning — A Kaleidoscope of Inquiry, Design, and Impact" },
    { label: "Clubs", emoji: "🎭", color: "moss", route: `/grade/${grade}/clubs`, description: "Student-led interest groups that build community and passion" },
    { label: "Competitions", emoji: "🏆", color: "sunflower", route: `/grade/${grade}/competitions`, description: "Academic and creative competitions to showcase excellence" },
    { label: "Steering Committees", emoji: "🧭", color: "mist", route: `/grade/${grade}/steering-committees`, description: "Student voice in school governance and decision-making" },
    { label: "Progress Report", emoji: "📊", color: "deep-sea", route: `/grade/${grade}/progress-report`, description: "Mastery-based assessment — growth over grades, evidence over averages" },
    { label: "My Growth Plan", emoji: "🌱", color: "salmon", route: `/grade/${grade}/growth-plan`, description: "Personalized growth tracking across all Portrait dimensions" },
  ];
}

const GradeHome = () => {
  const { grade } = useParams<{ grade: string }>();
  const gradeKey = grade || "kg";
  const gradeLabel = gradeLabels[gradeKey] || `Grade ${gradeKey}`;

  return (
    <PageTransition>
      <div className="min-h-full bg-background flex flex-col">
        <GradeHeroBlock
          content={{
            backLabel: "SPARK Dashboard",
            backHref: "/",
            title: gradeLabel,
            subtitle: "Your child's learning universe — explore every dimension of the Orion experience.",
          }}
        />

        <KaleidoscopeBlock
          content={{
            heading: "The Orion Kaleidoscope",
            title: "Six Dimensions of the Student Experience",
            subtitle: "Click any slice to explore that dimension.",
            items: getKaleidoscopeItems(gradeKey),
          }}
        />

      </div>
    </PageTransition>
  );
};

export default GradeHome;