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";

/**
 * 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 BenchmarkDisplay = ({
  sampleQuestions = [],
  onStartEvaluation,
  sessionId,
  datasetUrl,
}) => {
  const [isDownloading, setIsDownloading] = useState(false);

  // Default questions if none provided
  const questions =
    sampleQuestions.length > 0
      ? sampleQuestions
      : [
          {
            id: 1,
            question: "What are the key benefits of the described technology?",
            answer: "No answer available",
            type: "single_shot",
          },
          {
            id: 2,
            question:
              "Based on the context about machine learning frameworks, how does TensorFlow compare to PyTorch in terms of deployment capabilities?",
            answer: "No answer available",
            type: "multi_hop",
          },
        ];

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

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

    setIsDownloading(true);
    try {
      // Requête pour télécharger le dataset
      const downloadUrl = `http://localhost:3001/download-dataset/${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}_dataset.zip`);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } catch (error) {
      console.error("Erreur lors du téléchargement du dataset:", 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>

        <Tooltip title="Download the complete benchmark">
          <Button
            variant="outlined"
            color="primary"
            endIcon={
              isDownloading ? <CircularProgress size={16} /> : <DownloadIcon />
            }
            onClick={handleDownloadClick}
            disabled={isDownloading || !sessionId}
          >
            {isDownloading ? "Downloading..." : "Download Benchmark"}
          </Button>
        </Tooltip>
      </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 }}>
        {questions.map((q, index) => (
          <Card
            key={q.id || index}
            variant="outlined"
            sx={{
              mb: 2,
              backgroundColor: "#fafafa",
            }}
          >
            <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>

      <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
        <Button
          variant="contained"
          color="primary"
          size="large"
          startIcon={<AssessmentIcon />}
          onClick={handleEvaluationClick}
        >
          Start Evaluation
        </Button>
      </Box>
    </>
  );
};

export default BenchmarkDisplay;