import { useParams } from "react-router-dom";
import { useState } from "react";
import { PageTransition } from "@/components/PageTransition";
import {
  GradeHeroBlock,
  ProgressHowItWorksBlock,
  ProgressSampleReportBlock,
} 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",
};

/**
 * Reference / fallback Progress Report page.
 * CMS pages should use Grade Hero Competition Navigation targeting:
 * - progress-how-it-works
 * - progress-sample-report
 */
const ProgressReportPage = () => {
  const { grade } = useParams<{ grade: string }>();
  const gradeKey = grade || "kg";
  const gradeLabel = gradeLabels[gradeKey] || `Grade ${gradeKey}`;
  const [activeTab, setActiveTab] = useState<"overview" | "sample">("overview");

  return (
    <PageTransition>
      <div className="min-h-full bg-background">
        <GradeHeroBlock
          activeButtonId={activeTab}
          onButtonClick={(button) => setActiveTab(button.id === "sample" ? "sample" : "overview")}
          content={{
            layout: "detail",
            showLogo: false,
            backLabel: "Back to Kaleidoscope",
            backHref: `/grade/${gradeKey}`,
            mainIcon: "📊",
            title: "Progress Report",
            subtitle: `${gradeLabel} · Mastery-Based Assessment`,
            description: "At Orion, we don't give grades — we develop mastery. Our progress reports show where your child is on their learning journey and how they're growing.",
            buttons: [
              { id: "overview", icon: "📖", label: "How It Works", href: "" },
              { id: "sample", icon: "📄", label: "Sample Report", href: "" },
            ],
            backgroundPattern: "radial",
            accentColor: "moss",
            patternPosition: "30% 60%",
          }}
        />

        {activeTab === "overview" ? (
          <ProgressHowItWorksBlock />
        ) : (
          <ProgressSampleReportBlock />
        )}
      </div>
    </PageTransition>
  );
};

export default ProgressReportPage;