frontend/src/App.js

import React, { useState, useEffect } from "react";
import {
  Box,
  Container,
  CssBaseline,
  Typography,
  CircularProgress,
} from "@mui/material";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
  useNavigate,
  useSearchParams,
} from "react-router-dom";
import getTheme from "./config/theme";
import { useThemeMode } from "./hooks/useThemeMode";
import { ThemeProvider } from "@mui/material/styles";
import BenchmarkGenerator from "./components/BenchmarkGenerator";
import BenchmarkCreateForm from "./components/BenchmarkCreateForm";
import BenchmarkDisplay from "./components/BenchmarkDisplay";
import BenchmarkEvaluation from "./components/BenchmarkEvaluation";
import EvaluationDisplay from "./components/EvaluationDisplay";

// Composant d'en-tête commun
const Header = () => (
  <Box sx={{ textAlign: "center", mb: 8 }}>
    <h1>Yourbench Demo</h1>
    <p>
      Quickly create <b>zero-shot benchmarks</b> from your documents – keeping
      models accurate and adaptable
    </p>
  </Box>
);

// Page d'accueil avec le formulaire
function HomePage() {
  const navigate = useNavigate();

  const handleStartGeneration = (sid) => {
    navigate(`/benchmark-generation?session=${sid}`);
  };

  return (
    <>
      <Header />
      <BenchmarkCreateForm onStartGeneration={handleStartGeneration} />
    </>
  );
}

// Page de génération de benchmark
function BenchmarkGenerationPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const sessionId = searchParams.get("session");
  const [isValidSession, setIsValidSession] = useState(true);

  // Vérifier la validité de la session
  useEffect(() => {
    if (!sessionId) {
      setIsValidSession(false);
    }
  }, [sessionId]);

  const handleGenerationComplete = (result) => {
    console.log("Benchmark generation completed:", result);
    if (result && result.success) {
      navigate(`/benchmark-display?session=${sessionId}`);
    }
  };

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

  return (
    <>
      <Header />
      <BenchmarkGenerator
        sessionId={sessionId}
        onComplete={handleGenerationComplete}
      />
    </>
  );
}

// Page d'affichage du benchmark
function BenchmarkDisplayPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const sessionId = searchParams.get("session");
  const [benchmarkQuestions, setBenchmarkQuestions] = useState([]);
  const [datasetUrl, setDatasetUrl] = useState(null);
  const [isValidSession, setIsValidSession] = useState(true);
  const [isLoading, setIsLoading] = useState(true);

  // Récupérer les questions du benchmark depuis l'API
  useEffect(() => {
    console.log("BenchmarkDisplayPage useEffect - sessionId:", sessionId);

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

    setIsLoading(true);

    const fetchBenchmarkQuestions = async () => {
      console.log(
        "Tentative de récupération des questions pour la session:",
        sessionId
      );
      try {
        const apiUrl = `http://localhost:3001/benchmark-questions/${sessionId}`;
        console.log("Appel API:", apiUrl);

        const response = await fetch(apiUrl);
        console.log("Réponse API reçue:", response.status);

        // Check if the response status is 404 (Not Found) or other error
        if (!response.ok) {
          if (response.status === 404) {
            console.error("Session non trouvée");
            setIsValidSession(false);
            return;
          } else {
            console.error(`Erreur serveur: ${response.status}`);
            setIsLoading(false);
            return;
          }
        }

        const data = await response.json();
        console.log("Données API:", data);

        if (data.success && data.questions && data.questions.length > 0) {
          console.log("Questions chargées avec succès:", data.questions);
          setBenchmarkQuestions(data.questions);
        } else {
          console.warn(
            "Échec du chargement des questions, utilisation des valeurs par défaut"
          );
        }

        if (data.dataset_url) {
          setDatasetUrl(data.dataset_url);
        } else {
          const url = `https://huggingface.co/datasets/yourbench/yourbench_${sessionId}`;
          setDatasetUrl(url);
          console.log("URL du dataset générée:", url);
        }
      } catch (error) {
        console.error("Erreur lors de la récupération des questions:", error);
        setIsValidSession(false);
      } finally {
        setIsLoading(false);
      }
    };

    fetchBenchmarkQuestions();
  }, [sessionId]);

  const handleStartEvaluation = () => {
    console.log("Starting evaluation with session ID:", sessionId);
    navigate(`/benchmark-evaluation?session=${sessionId}`);
  };

  // Questions par défaut si l'API échoue
  const defaultSampleQuestions = [
    {
      id: 1,
      question: "What are the key features discussed in the document?",
      type: "single_shot",
    },
    {
      id: 2,
      question:
        "How does the proposed solution address the challenges mentioned in section 2 in relation to the overall market trends?",
      type: "multi_hop",
    },
  ];

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

  return (
    <>
      <Header />
      {isLoading ? (
        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            mt: 8,
            mb: 8,
          }}
        >
          <CircularProgress size={60} />
        </Box>
      ) : (
        <BenchmarkDisplay
          onStartEvaluation={handleStartEvaluation}
          sessionId={sessionId}
          datasetUrl={datasetUrl}
          sampleQuestions={
            benchmarkQuestions.length > 0
              ? benchmarkQuestions
              : defaultSampleQuestions
          }
        />
      )}
    </>
  );
}

// Page d'évaluation du benchmark
function BenchmarkEvaluationPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const sessionId = searchParams.get("session");
  const [isValidSession, setIsValidSession] = useState(true);
  const [isLoading, setIsLoading] = useState(true);

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

    // Verify session exists by calling the API
    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);
    // On reste sur la même page car les résultats sont affichés directement
    // dans le composant BenchmarkEvaluation
  };

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

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

// Page d'affichage des résultats d'évaluation
function EvaluationDisplayPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const sessionId = searchParams.get("session");
  const [isValidSession, setIsValidSession] = useState(true);
  const [isLoading, setIsLoading] = useState(true);

  // Vérifier la validité de la session
  useEffect(() => {
    if (!sessionId) {
      console.log(
        "Session ID manquante pour l'affichage des résultats, redirection vers l'accueil"
      );
      setIsValidSession(false);
      return;
    }

    // Verify session exists by calling the API
    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]);

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

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

// Raccourcis clavier
function KeyboardShortcuts() {
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === "p") {
        console.log("Debug key pressed: Clearing auth data and refreshing");
        localStorage.removeItem("hf_oauth");
        localStorage.removeItem("auth_return_to");
        alert("Auth data cleared. Page will reload.");
        window.location.reload();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  return null;
}

// Composant principal avec les routes
function App() {
  const { mode } = useThemeMode();
  const theme = getTheme(mode);

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Router>
        <Container maxWidth="md">
          <Box sx={{ pt: 12, pb: 4 }}>
            <KeyboardShortcuts />
            <Routes>
              <Route path="/" element={<HomePage />} />
              <Route
                path="/benchmark-generation"
                element={<BenchmarkGenerationPage />}
              />
              <Route
                path="/benchmark-display"
                element={<BenchmarkDisplayPage />}
              />
              <Route
                path="/benchmark-evaluation"
                element={<BenchmarkEvaluationPage />}
              />
              <Route
                path="/evaluation-display"
                element={<EvaluationDisplayPage />}
              />
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </Box>
        </Container>
      </Router>
    </ThemeProvider>
  );
}

export default App;