frontend/src/components/Benchmark/DocumentViewerDialog.jsx

import React from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  Box,
  Typography,
  CircularProgress,
  IconButton,
  Tooltip,
} from "@mui/material";
import DownloadIcon from "@mui/icons-material/Download";
import CloseIcon from "@mui/icons-material/Close";

/**
 * Composant pour afficher un document dans une boîte de dialogue
 * @param {Object} props - Propriétés du composant
 * @returns {JSX.Element} - Dialogue pour visualiser un document
 */
const DocumentViewerDialog = ({
  open,
  onClose,
  document,
  content,
  isLoading,
  isDownloading,
  handleDownload,
}) => {
  // Déterminer le type de document
  const getDocumentType = () => {
    if (!document) return "";

    if (document.id === "the-bitter-lesson") return "HTML";
    if (document.id === "hurricane-faq") return "Markdown";
    return "Text";
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="md"
      fullWidth
      aria-labelledby="document-content-dialog-title"
    >
      <DialogTitle id="document-content-dialog-title">
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-start",
          }}
        >
          <Box>
            {document && (
              <Typography variant="h6" sx={{ fontWeight: 600 }}>
                {document.name}
              </Typography>
            )}
            <Typography variant="body2" color="text.secondary">
              {document && getDocumentType()}
            </Typography>
          </Box>
          <Box sx={{ display: "flex", gap: 1 }}>
            {document && (
              <Tooltip title="Download document">
                <IconButton
                  edge="end"
                  color="inherit"
                  onClick={() => handleDownload(document)}
                  disabled={isDownloading}
                  aria-label="download"
                  sx={{
                    color: "text.secondary",
                    opacity: 0.4,
                    "&:hover": {
                      opacity: 0.8,
                    },
                  }}
                >
                  {isDownloading ? (
                    <CircularProgress size={20} />
                  ) : (
                    <DownloadIcon />
                  )}
                </IconButton>
              </Tooltip>
            )}
            <IconButton
              edge="end"
              color="inherit"
              onClick={onClose}
              aria-label="close"
            >
              <CloseIcon />
            </IconButton>
          </Box>
        </Box>
      </DialogTitle>
      <DialogContent
        dividers
        sx={{
          padding: 0,
        }}
      >
        {isLoading ? (
          <Box sx={{ display: "flex", justifyContent: "center", my: 4 }}>
            <CircularProgress />
          </Box>
        ) : (
          <Box
            sx={{
              maxHeight: "60vh",
              overflow: "auto",
              whiteSpace: "pre-wrap",
              fontFamily: "monospace",
              fontSize: "0.875rem",
              p: 2.5,
            }}
          >
            {content}
          </Box>
        )}
      </DialogContent>
    </Dialog>
  );
};

export default DocumentViewerDialog;