import { Button, Typography, Paper, Box, Divider } from "@mui/material";
import { format } from "date-fns-jalali";
import { useNavigate } from "react-router-dom";
import { motion } from "framer-motion";
import MoodBadIcon from "@mui/icons-material/MoodBad";

export const PaymentFailed = ({ params }) => {
  const navigate = useNavigate();

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        minHeight: "80vh",
        backgroundColor: "#f4f6f8",
        p: 2,
      }}
    >
      <motion.div
        initial={{ opacity: 0, y: 50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
      >
        <Paper
          elevation={6}
          sx={{
            width: 400,
            p: 4,
            borderRadius: 3,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 3,
            backgroundColor: "white",
            boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)",
          }}
        >
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ duration: 0.5, ease: "easeOut" }}
          >
            <MoodBadIcon sx={{ fontSize: 60, color: "success.main", mb: 2 }} />
          </motion.div>

          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ duration: 0.5, ease: "easeOut" }}
          >
            <Typography
              variant="h5"
              color="error.main"
              textAlign="center"
              sx={{ fontWeight: 800 }}
            >
              تراکنش انجام نشد!
            </Typography>
          </motion.div>
          <Typography
            variant="body1"
            color="text.secondary"
            textAlign="center"
            sx={{ fontWeight: 700 }}
          >
            {params?.error || "خطای ناشناخته"}
          </Typography>

          <Typography variant="body2" color="error">
            در صورت کسر مبلغ از حساب با پشتیبانی تماس بگیرید.
          </Typography>

          <Divider sx={{ width: "100%", mb: 2 }} />
          <Box
            sx={{
              width: "100%",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              mb: 2,
            }}
          >
            <Typography color="text.secondary">تاریخ و زمان:</Typography>
            <Typography>
              {format(
                new Date(params?.date || new Date()),
                "yyyy/MM/dd hh:mm:ss"
              )}
            </Typography>
          </Box>

          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
            <Button
              fullWidth
              variant="contained"
              color="primary"
              size="large"
              onClick={() => navigate("/")}
              sx={{
                borderRadius: 3,
                textTransform: "none",
                fontWeight: 600,
              }}
            >
              بازگشت
            </Button>
          </motion.div>
        </Paper>
      </motion.div>
    </Box>
  );
};
