frontend/src/components/Evaluation/Display.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";
import ErrorDisplay from "../common/ErrorDisplay";

// 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 Display = ({ sessionId, results }) => {
  // 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 (
    !results ||
    !results.models_comparison ||
    results.models_comparison.length === 0
  ) {
    return (
      <ErrorDisplay
        error="The demo is currently under heavy load, please try again later."
        title="Service Unavailable"
      />
    );
  }

  // Vérifier s'il n'y a aucun modèle réussi
  const successfulModels = results.models_comparison.filter(
    (model) => model.success
  );
  if (successfulModels.length === 0) {
    return (
      <ErrorDisplay
        error="The demo is currently under heavy load, please try again later."
        title="Service Unavailable"
      />
    );
  }

  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 best 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>
            {successfulModels.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 Display;