frontend/src/components/Benchmark/Display.jsx

import React, { useState } from "react";
import {
  Box,
  Typography,
  Paper,
  Button,
  Divider,
  Card,
  CardContent,
  Link,
  CircularProgress,
  Tooltip,
} from "@mui/material";
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
import AssessmentIcon from "@mui/icons-material/Assessment";
import LinkIcon from "@mui/icons-material/Link";
import DownloadIcon from "@mui/icons-material/Download";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import API_CONFIG from "../../config/api";
import { useThemeMode } from "../../hooks/useThemeMode";
import getTheme from "../../config/theme";

/**
 * Component to display benchmark information and evaluation button
 *
 * @param {Object} props - Component props
 * @param {Array} props.sampleQuestions - Array of sample questions to display
 * @param {Function} props.onStartEvaluation - Function to call when evaluation button is clicked
 * @param {string} props.sessionId - Session ID used for the benchmark generation
 * @param {string} props.datasetUrl - URL to the Hugging Face dataset
 * @returns {JSX.Element} Benchmark display component
 */
const Display = ({
  sampleQuestions = [],
  onStartEvaluation,
  sessionId,
  datasetUrl,
}) => {
  const [isDownloading, setIsDownloading] = useState(false);
  const { mode } = useThemeMode();
  const theme = getTheme(mode);

  const handleEvaluationClick = () => {
    if (onStartEvaluation) {
      onStartEvaluation();
    }
  };

  const handleDownloadClick = async () => {
    if (!sessionId) return;

    setIsDownloading(true);
    try {
      // Requête pour télécharger les questions JSON au lieu du dataset
      const downloadUrl = `${API_CONFIG.BASE_URL}/download-questions/${sessionId}`;

      // Créer un élément a temporaire pour déclencher le téléchargement
      const link = document.createElement("a");
      link.href = downloadUrl;
      link.setAttribute("download", `yourbench_${sessionId}_questions.json`);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } catch (error) {
      console.error("Erreur lors du téléchargement des questions:", error);
      alert("Erreur lors du téléchargement. Veuillez réessayer.");
    } finally {
      setIsDownloading(false);
    }
  };

  return (
    <>
      <Box
        sx={{
          mb: 4,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <Box sx={{ display: "flex", alignItems: "center" }}>
          <CheckCircleIcon color="success" sx={{ mr: 1.5, fontSize: 28 }} />
          <Typography variant="h6">Benchmark Created Successfully</Typography>
        </Box>

        <Box sx={{ display: "flex", gap: 2 }}>
          <Tooltip title="Download the benchmark questions in JSON format">
            <Button
              variant="outlined"
              color="primary"
              endIcon={
                isDownloading ? (
                  <CircularProgress size={16} />
                ) : (
                  <DownloadIcon />
                )
              }
              onClick={handleDownloadClick}
              disabled={isDownloading || !sessionId}
            >
              {isDownloading ? "Downloading..." : "Download Questions JSON"}
            </Button>
          </Tooltip>

          <Button
            size="large"
            variant="contained"
            color="primary"
            endIcon={<AssessmentIcon />}
            onClick={handleEvaluationClick}
          >
            Start Evaluation
          </Button>
        </Box>
      </Box>

      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
        Your benchmark has been generated. Here are some example questions:
      </Typography>

      <Box sx={{ mb: 3 }}>
        {sampleQuestions.map((q, index) => (
          <Card
            key={q.id || index}
            variant="outlined"
            sx={{
              mb: 2,
              backgroundColor: theme.palette.background.subtle,
              border: `1px solid ${theme.palette.divider}`,
            }}
          >
            <CardContent>
              <Typography
                variant="caption"
                color="text.secondary"
                sx={{ display: "block", mb: 1 }}
              >
                {q.type === "multi_hop"
                  ? "Multi-hop Question"
                  : "Single-shot Question"}
              </Typography>
              <Typography variant="body1" sx={{ mb: 2 }}>
                <strong>Question:</strong> {q.question}
              </Typography>
              <Divider sx={{ my: 1.5 }} />
              <Typography
                variant="body1"
                sx={{
                  borderRadius: 1,
                }}
              >
                <strong>Answer:</strong> {q.answer || "No answer available"}
              </Typography>
            </CardContent>
          </Card>
        ))}
      </Box>
    </>
  );
};

export default Display;