import { BackgroundImage } from "@/components";
import { getStaticImage } from "@/utils";
import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import Step1IntroPage from "./Step1IntroPage";
import Step2SelectPage from "./Step2SelectPage";
import Step3ConfigPage from "./Step3ConfigPage";

export default function Experiment() {
  const { step: stepParam } = useParams<{ step?: string }>();
  const navigate = useNavigate();

  // 从路由参数获取step，默认为1
  const currentStep = stepParam ? parseInt(stepParam, 10) : 1;

  // 验证step参数的有效性
  const validStep = currentStep >= 1 && currentStep <= 3 ? currentStep : 1;

  // 如果step参数无效，重定向到默认step
  useEffect(() => {
    if (stepParam && (currentStep < 1 || currentStep > 3)) {
      navigate("/experiment/1", { replace: true });
    }
  }, [stepParam, currentStep, navigate]);

  // 处理步骤切换
  const handleNext = (nextStep: number) => {
    if (nextStep <= 3) {
      navigate(`/experiment/${nextStep}`);
    }
  };

  return (
    <div className="h-full w-full">
      <div className="h-full">
        {validStep === 1 && <Step1IntroPage onNext={() => handleNext(2)} />}
        {validStep === 2 && <Step2SelectPage onNext={() => handleNext(3)} />}
        {validStep === 3 && <Step3ConfigPage onNext={() => handleNext(4)} />}
      </div>
    </div>
  );
}