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,
  Tooltip,
} from "@mui/material";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";

// Styles pour les médailles
const MEDAL_STYLES = {
  1: {
    color: "#B58A1B",
    background: "linear-gradient(135deg, #FFF7E0 0%, #FFD700 100%)",
    borderColor: "rgba(212, 160, 23, 0.35)",
    shadowColor: "rgba(212, 160, 23, 0.8)",
  },
  2: {
    color: "#667380",
    background: "linear-gradient(135deg, #FFFFFF 0%, #D8E3ED 100%)",
    borderColor: "rgba(124, 139, 153, 0.35)",
    shadowColor: "rgba(124, 139, 153, 0.8)",
  },
  3: {
    color: "#B85C2F",
    background: "linear-gradient(135deg, #FDF0E9 0%, #FFBC8C 100%)",
    borderColor: "rgba(204, 108, 61, 0.35)",
    shadowColor: "rgba(204, 108, 61, 0.8)",
  },
  default: {
    color: "text.primary",
    background: "transparent",
    borderColor: "transparent",
    shadowColor: "transparent",
  },
};

// Fonction pour obtenir le style de médaille en fonction du rang
const getMedalStyle = (rank) => {
  if (rank <= 3) {
    const medalStyle = MEDAL_STYLES[rank];
    return {
      color: medalStyle.color,
      fontWeight: 900,
      fontFamily: '"Inter", -apple-system, sans-serif',
      width: "24px",
      height: "24px",
      background: medalStyle.background,
      border: "1px solid",
      borderColor: medalStyle.borderColor,
      borderRadius: "50%",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: "0.95rem",
      lineHeight: 1,
      padding: 0,
      boxShadow: `1px 1px 0 ${medalStyle.shadowColor}`,
      marginRight: "8px",
    };
  }
  // Pour les rangs > 3, même dimensions mais transparent
  return {
    color: "text.primary",
    fontWeight: rank <= 10 ? 600 : 400,
    width: "24px",
    height: "24px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "0.95rem",
    marginRight: "8px",
  };
};

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)}\u2009%`;
  };

  // Fonction pour obtenir une couleur en fonction du score (rouge au vert)
  const getColorForScore = (score) => {
    // Convertir en pourcentage (0-100)
    const percent = score * 100;

    // Calcul de la couleur: rouge (0%) à vert (100%)
    // Rouge diminue, vert augmente
    const red = Math.max(
      0,
      Math.min(255, Math.round(255 * (1 - percent / 100)))
    );
    const green = Math.max(0, Math.min(255, Math.round(255 * (percent / 100))));

    return `rgb(${red}, ${green}, 0)`;
  };

  // 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,
            "& .MuiTableCell-root": {
              borderRight: "1px solid rgba(224, 224, 224, 1)",
              borderBottom: "1px solid rgba(224, 224, 224, 1)",
              "&:last-child": {
                borderRight: "none",
              },
            },
            "& .MuiTableRow-root:last-child .MuiTableCell-root": {
              borderBottom: "1px solid rgba(224, 224, 224, 1)",
            },
          }}
        >
          <TableHead>
            <TableRow
              sx={{
                "& .MuiTableCell-root": {
                  fontWeight: "bold",
                  backgroundColor: "rgba(0, 0, 0, 0.02)",
                },
              }}
            >
              <TableCell width="80px">Rank</TableCell>
              <TableCell>Model</TableCell>
              <TableCell align="left">Accuracy</TableCell>
              <TableCell align="left">Eval Time</TableCell>
              <TableCell align="right">Status</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {results.models_comparison
              .filter((model) => model.success)
              .map((model, index) => (
                <TableRow
                  key={`${model.model_name}-${model.provider}`}
                  sx={{
                    "&:nth-of-type(even)": {
                      backgroundColor: "rgba(0, 0, 0, 0.02)",
                    },
                  }}
                >
                  <TableCell>
                    <Box sx={{ display: "flex", alignItems: "center" }}>
                      <Box sx={getMedalStyle(index + 1)}>{index + 1}</Box>
                    </Box>
                  </TableCell>
                  <TableCell component="th" scope="row">
                    <Tooltip title={model.model_name} placement="top">
                      <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.length > 40
                          ? `${model.model_name.substring(0, 40)}...`
                          : model.model_name}
                        <OpenInNewIcon sx={{ ml: 0.5, fontSize: 16 }} />
                      </Link>
                    </Tooltip>
                  </TableCell>
                  <TableCell
                    align="left"
                    sx={{
                      padding: 0,
                      position: "relative",
                      overflow: "hidden",
                    }}
                  >
                    <Box
                      sx={{
                        position: "absolute",
                        width: "100%",
                        height: "100%",
                        left: 0,
                        top: 0,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "flex-start",
                        pl: 2,
                      }}
                    >
                      <Box
                        sx={{
                          position: "absolute",
                          left: 0,
                          top: 0,
                          height: "100%",
                          width: `${model.accuracy * 100}%`,
                          backgroundColor: getColorForScore(model.accuracy),
                          opacity: 0.2,
                          zIndex: 0,
                        }}
                      />
                      <Typography
                        sx={{
                          position: "relative",
                          zIndex: 1,
                          fontWeight: model.accuracy > 0.7 ? "bold" : "normal",
                          py: 1.5,
                          textAlign: "left",
                        }}
                      >
                        {formatAccuracy(model.accuracy)}
                      </Typography>
                    </Box>
                  </TableCell>
                  <TableCell align="left">
                    {formatTime(model.evaluation_time)}
                  </TableCell>
                  <TableCell align="right">
                    <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;