import React, { useState, useEffect } from "react";
import { Box, CircularProgress } from "@mui/material";
import { useNavigate, useSearchParams, Navigate } from "react-router-dom";
import Intro from "../components/Intro";
import BenchmarkEvaluation from "../components/BenchmarkEvaluation";

function BenchmarkEvaluationPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const sessionId = searchParams.get("session");
  const [isValidSession, setIsValidSession] = useState(true);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (!sessionId) {
      console.log(
        "Session ID manquante pour l'évaluation, redirection vers l'accueil"
      );
      setIsValidSession(false);
      return;
    }

    const checkSession = async () => {
      try {
        const response = await fetch(
          `http://localhost:3001/benchmark-questions/${sessionId}`
        );

        if (!response.ok) {
          console.error(
            `Session invalide ou erreur serveur: ${response.status}`
          );
          setIsValidSession(false);
        }
      } catch (error) {
        console.error("Erreur lors de la vérification de la session:", error);
        setIsValidSession(false);
      } finally {
        setIsLoading(false);
      }
    };

    checkSession();
  }, [sessionId]);

  const handleEvaluationComplete = (result) => {
    console.log("Évaluation terminée:", result);
  };

  if (!isValidSession) {
    return <Navigate to="/" />;
  }

  return (
    <>
      <Intro />
      {isLoading ? (
        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            mt: 8,
            mb: 8,
          }}
        >
          <CircularProgress size={60} />
        </Box>
      ) : (
        <BenchmarkEvaluation
          sessionId={sessionId}
          onComplete={handleEvaluationComplete}
        />
      )}
    </>
  );
}

export default BenchmarkEvaluationPage;