frontend/src/components/EvaluationDisplay.jsx

import React, { useState, useEffect } from "react";
import {
  Box,
  Paper,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Alert,
  CircularProgress,
  Card,
  CardContent,
  Link,
} from "@mui/material";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
const EvaluationDisplay = ({ sessionId }) => {
  const [results, setResults] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchEvaluationResults = async () => {
      if (!sessionId) {
        setError("No session ID provided");
        setLoading(false);
        return;
      }

      try {
        // Fetch evaluation results from the API
        const response = await fetch(
          `http://localhost:3001/evaluation-results/${sessionId}`
        );

        if (!response.ok) {
          throw new Error(`Failed to fetch results: ${response.status}`);
        }

        const data = await response.json();

        if (!data.success) {
          throw new Error(data.message || "Failed to fetch evaluation results");
        }

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

    fetchEvaluationResults();
  }, [sessionId]);

  // Format accuracy as percentage
  const formatAccuracy = (value) => {
    return `${(value * 100).toFixed(2)}%`;
  };

  // Format evaluation time
  const formatTime = (seconds) => {
    return `${seconds.toFixed(2)}s`;
  };

  if (loading) {
    return (
      <Box
        sx={{
          width: "100%",
          mt: 4,
          mb: 4,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <Typography variant="h5" gutterBottom>
          Loading Evaluation Results...
        </Typography>
        <CircularProgress />
      </Box>
    );
  }

  if (error) {
    return (
      <Alert severity="error" sx={{ mt: 4, mb: 4 }}>
        {error}
      </Alert>
    );
  }

  if (
    !results ||
    !results.models_comparison ||
    results.models_comparison.length === 0
  ) {
    return (
      <Alert severity="info" sx={{ mt: 4, mb: 4 }}>
        No evaluation results found for this benchmark.
      </Alert>
    );
  }

  return (
    <>
      <Box sx={{ display: "flex", alignItems: "center", mb: 4 }}>
        <CheckCircleIcon color="success" sx={{ mr: 1.5, fontSize: 28 }} />
        <Typography variant="h6">Evaluation finished successfully</Typography>
      </Box>
      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
        The bests models for this benchmark are
      </Typography>

      <TableContainer
        component={Paper}
        sx={{
          border: "1px solid rgba(224, 224, 224, 1)",
          boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
        }}
      >
        <Table sx={{ minWidth: 650 }}>
          <TableHead>
            <TableRow>
              <TableCell>Rank</TableCell>
              <TableCell>Model</TableCell>
              <TableCell align="center">Accuracy</TableCell>
              <TableCell align="center">Eval Time</TableCell>
              <TableCell align="center">Status</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {results.models_comparison
              .filter((model) => model.success)
              .map((model, index) => (
                <TableRow
                  key={`${model.model_name}-${model.provider}`}
                  sx={{
                    "&:last-child td, &:last-child th": { border: 0 },
                  }}
                >
                  <TableCell>{index + 1}</TableCell>
                  <TableCell component="th" scope="row">
                    <Link
                      href={`https://huggingface.co/${model.model_name}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      sx={{
                        textDecoration: "none",
                        "&:hover": {
                          textDecoration: "underline",
                        },
                        display: "flex",
                        alignItems: "center",
                      }}
                    >
                      {model.model_name}
                      <OpenInNewIcon sx={{ ml: 0.5, fontSize: 16 }} />
                    </Link>
                  </TableCell>
                  <TableCell align="center">
                    {formatAccuracy(model.accuracy)}
                  </TableCell>
                  <TableCell align="center">
                    {formatTime(model.evaluation_time)}
                  </TableCell>
                  <TableCell align="center">
                    <span style={{ color: "green" }}>✓ Success</span>
                  </TableCell>
                </TableRow>
              ))}
          </TableBody>
        </Table>
      </TableContainer>

      <Box sx={{ mt: 4, textAlign: "center" }}>
        <Typography variant="body2" color="textSecondary">
          Need larger evaluation?{" "}
          <Link
            href="https://github.com/huggingface/lighteval"
            target="_blank"
            rel="noopener noreferrer"
          >
            Go to this page
          </Link>
        </Typography>
      </Box>
    </>
  );
};

export default EvaluationDisplay;