import React, { useState, useEffect } from "react";
import { Box, CircularProgress } from "@mui/material";
import { useSearchParams, Navigate } from "react-router-dom";
import Intro from "../components/Intro";
import Display from "../components/Evaluation/Display";
import { useThemeMode } from "../hooks/useThemeMode";
import getTheme from "../config/theme";
import API_CONFIG from "../config/api";
import ErrorDisplay from "../components/common/ErrorDisplay";

function EvaluationDisplayPage() {
  const [searchParams] = useSearchParams();
  const sessionId = searchParams.get("session");
  const [isValidSession, setIsValidSession] = useState(true);
  const [isLoading, setIsLoading] = useState(true);
  const [evaluationResults, setEvaluationResults] = useState(null);
  const [error, setError] = useState(null);
  const { mode } = useThemeMode();
  const theme = getTheme(mode);

  // List of base documents that should not be deleted
  const baseDocuments = ["the-bitter-lesson", "hurricane-faq", "pokemon-guide"];
  const isBaseDocument = baseDocuments.includes(sessionId);

  useEffect(() => {
    if (!sessionId) {
      console.log(
        "Session ID missing for displaying results, redirecting to home"
      );
      setIsValidSession(false);
      return;
    }

    const fetchEvaluationResults = async () => {
      try {
        // First check if the session exists
        const sessionCheckResponse = await fetch(
          `${API_CONFIG.BASE_URL}/benchmark-questions/${sessionId}`
        );

        if (!sessionCheckResponse.ok) {
          console.error(
            `Invalid session or server error: ${sessionCheckResponse.status}`
          );
          setIsValidSession(false);
          return;
        }

        // Retrieve evaluation results
        const evalResponse = await fetch(
          `${API_CONFIG.BASE_URL}/evaluation-results/${sessionId}`
        );

        if (!evalResponse.ok) {
          setError(`Failed to fetch results: ${evalResponse.status}`);
          setIsLoading(false);
          return;
        }

        const data = await evalResponse.json();

        if (!data.success) {
          setError(data.message || "Failed to fetch evaluation results");
          setIsLoading(false);
          return;
        }

        setEvaluationResults(data.results);
      } catch (error) {
        console.error("Error fetching evaluation results:", error);
        setError(error.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchEvaluationResults();
  }, [sessionId]);

  // Effect to clean up the session folder after displaying results
  useEffect(() => {
    // Do not clean up if it's a base document or if results are not yet loaded
    if (isBaseDocument || isLoading || !evaluationResults) {
      return;
    }

    // Function to clean up the session folder
    const cleanupSession = async () => {
      try {
        const response = await fetch(
          `${API_CONFIG.BASE_URL}/cleanup-session/${sessionId}`,
          {
            method: "DELETE",
          }
        );

        if (response.ok) {
          console.log(`Session ${sessionId} cleaned up successfully`);
        } else {
          console.warn(`Failed to clean up session ${sessionId}`);
        }
      } catch (error) {
        console.error("Error cleaning up session:", error);
      }
    };

    // Call the function after a delay to ensure the user had time to see the results
    const cleanupTimeout = setTimeout(() => {
      cleanupSession();
    }, 2000);

    // Clean up the timeout if component is unmounted
    return () => clearTimeout(cleanupTimeout);
  }, [sessionId, isBaseDocument, isLoading, evaluationResults]);

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

  return (
    <>
      <Intro />
      {isLoading ? (
        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            mt: 8,
            mb: 8,
          }}
        >
          <CircularProgress size={60} />
        </Box>
      ) : error ? (
        <ErrorDisplay error={error} title="Error" />
      ) : (
        <Box
          sx={{
            border: `1px solid ${theme.palette.divider}`,
            borderRadius: 2,
            p: 4,
            bgcolor: "background.paper",
          }}
        >
          <Display sessionId={sessionId} results={evaluationResults} />
        </Box>
      )}
    </>
  );
}

export default EvaluationDisplayPage;