import React from "react";
import {
  Box,
  CircularProgress,
  Typography,
  LinearProgress,
} from "@mui/material";

interface LoadingSpinnerProps {
  progress?: number;
  message?: string;
  size?: number;
  color?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
  variant?: "circular" | "linear";
  showPercentage?: boolean;
  thickness?: number;
  className?: string;
}

export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
  progress,
  message = "Загрузка...",
  size = 40,
  color = "primary",
  variant = "circular",
  showPercentage = true,
  thickness = 4,
  className,
}) => {
  if (variant === "linear") {
    return (
      <Box
        className={className}
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 2,
          padding: 3,
          width: "100%",
        }}
      >
        <Box sx={{ width: "100%", maxWidth: 300 }}>
          <LinearProgress
            variant={progress !== undefined ? "determinate" : "indeterminate"}
            value={progress}
            color={color}
            sx={{
              height: 8,
              borderRadius: 4,
              backgroundColor: "rgba(0, 0, 0, 0.1)",
              "& .MuiLinearProgress-bar": {
                borderRadius: 4,
              },
            }}
          />
          {showPercentage && progress !== undefined && (
            <Typography
              variant="caption"
              color="text.secondary"
              sx={{
                display: "block",
                textAlign: "center",
                mt: 1,
                fontSize: "0.875rem",
                fontWeight: 500,
              }}
            >
              {`${Math.round(progress)}%`}
            </Typography>
          )}
        </Box>
        {message && (
          <Typography variant="body2" color="text.secondary" textAlign="center">
            {message}
          </Typography>
        )}
      </Box>
    );
  }

  return (
    <Box
      className={className}
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 2,
        padding: 3,
      }}
    >
      <Box sx={{ position: "relative", display: "inline-flex" }}>
        <CircularProgress
          size={size}
          color={color}
          variant={progress !== undefined ? "determinate" : "indeterminate"}
          value={progress}
          thickness={thickness}
          sx={{
            "& .MuiCircularProgress-circle": {
              strokeLinecap: "round",
            },
          }}
        />
        {showPercentage && progress !== undefined && (
          <Box
            sx={{
              top: 0,
              left: 0,
              bottom: 0,
              right: 0,
              position: "absolute",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Typography
              variant="caption"
              component="div"
              color="text.secondary"
              sx={{
                fontSize: size * 0.25,
                fontWeight: 600,
                lineHeight: 1,
              }}
            >
              {`${Math.round(progress)}%`}
            </Typography>
          </Box>
        )}
      </Box>
      {message && (
        <Typography variant="body2" color="text.secondary" textAlign="center">
          {message}
        </Typography>
      )}
    </Box>
  );
};
