import React from "react";
import {
  Box,
  Typography,
  CircularProgress,
  IconButton,
  Tooltip,
} from "@mui/material";
import { alpha } from "@mui/material/styles";
import VisibilityIcon from "@mui/icons-material/Visibility";

/**
 * Composant pour afficher une carte de document par défaut
 * @param {Object} props - Propriétés du composant
 * @returns {JSX.Element} - Carte de document par défaut
 */
const DefaultDocumentCard = ({
  doc,
  theme,
  selectedDocument,
  isDefaultDocument,
  urlSelected,
  isLoadingContent,
  handleDefaultDocClick,
  handleViewDocument,
  resetSelection,
}) => {
  // Vérifier si cette carte est actuellement sélectionnée
  const isSelected = selectedDocument?.id === doc.id;

  // Vérifier si une autre méthode est active (URL ou fichier)
  const otherMethodActive =
    (selectedDocument && !isDefaultDocument) || (urlSelected && !isSelected);

  return (
    <Box
      elevation={2}
      sx={{
        p: 2,
        display: "flex",
        flexDirection: "column",
        borderRadius: 1.5,
        alignItems: "center",
        cursor: "pointer",
        transition: "all 0.2s ease",
        height: "100%",
        position: "relative",
        border: isSelected
          ? `2px solid ${theme.palette.primary.main}`
          : `2px solid ${theme.palette.divider}`,
        "&:hover": {
          transform: "translateY(-2px)",
          boxShadow: 3,
        },
      }}
      onClick={() => handleDefaultDocClick(doc)}
    >
      <Tooltip title="View content">
        <IconButton
          onClick={(e) => {
            e.stopPropagation();
            handleViewDocument(doc);
          }}
          sx={{
            position: "absolute",
            top: 4,
            right: 4,
            color: "text.secondary",
            opacity: 0.4,
            "&:hover": {
              opacity: 0.8,
              backgroundColor: alpha(theme.palette.primary.main, 0.05),
            },
            padding: 0.3,
            "& .MuiSvgIcon-root": {
              fontSize: 16,
            },
          }}
          disabled={isLoadingContent}
        >
          {isLoadingContent && selectedDocument?.id === doc.id ? (
            <CircularProgress size={14} />
          ) : (
            <VisibilityIcon />
          )}
        </IconButton>
      </Tooltip>
      <Box sx={{ color: "primary.main", mb: 1 }}>{doc.icon}</Box>
      <Typography variant="subtitle1" component="div" gutterBottom>
        {doc.name}
      </Typography>
      <Typography
        variant="body2"
        color="text.secondary"
        align="center"
        sx={{ flexGrow: 1 }}
      >
        {doc.description}
      </Typography>
    </Box>
  );
};

export default DefaultDocumentCard;