import { CircularProgress, Box, Typography, useTheme, styled } from "@mui/material";

const StyledCircularProgress = styled(CircularProgress)(({ theme }) => ({
  "& .MuiCircularProgress-circle": {
    strokeLinecap: "round",
    transition: "stroke-dashoffset 0.3s ease",
  },
}));

export const CustomCircularTimer: React.FC<CircularTimerProps> = ({ duration, remaining }) => {
  const theme = useTheme();
  const progress = (remaining / duration) * 100;

  return (
    <Box sx={{ position: "relative", display: "inline-flex", width: 76, height: 76 }}>
      {/* Серый фон */}
      <Box
        sx={{
          border: "#9A9AAF solid 1px",
          position: "absolute",
          height: "72px",
          width: "72px",
          borderRadius: "100%",
          top: "2px",
          left: "2px",
        }}
      />

      {/* Основной прогресс */}
      <StyledCircularProgress
        variant="determinate"
        value={progress}
        size={76}
        thickness={4}
        sx={{
          color: "linear-gradient(135deg, #FC712F 0%, #7E2AEA 100%)",
          position: "absolute",

          "& .MuiCircularProgress-circle": {
            strokeLinecap: "round",
            stroke: "url(#timer-gradient)", // ← правильное использование
          },
        }}
      />

      <svg
        width={0}
        height={0}
      >
        <defs>
          <linearGradient
            id="timer-gradient"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop
              offset="9.9%"
              stopColor="#FC712F"
            />
            <stop
              offset="73.88%"
              stopColor="#7E2AEA"
            />
          </linearGradient>
        </defs>
      </svg>

      {/* Центральный контент */}
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width: 56,
          height: 56,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Typography
          variant="body1"
          fontWeight="bold"
          sx={{
            fontSize: "16px",
            fontWeight: 400,
            color: theme.palette.text.primary,
          }}
        >
          {remaining}
        </Typography>
      </Box>
    </Box>
  );
};