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

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

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        minHeight: "80vh",
        backgroundColor: "#f4f6f8",
        p: 2,
        borderRadius: "20px",
      }}
    >
      <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" }}
          >
            <CheckCircleOutline
              sx={{ fontSize: 60, color: "success.main", mb: 2 }}
            />
          </motion.div>
          <Typography
            variant="h5"
            color="success.main"
            textAlign="center"
            sx={{
              fontWeight: 600,
            }}
          >
            تراکنش با موفقیت انجام شد.
          </Typography>

          <Divider sx={{ width: "100%", mb: 2 }} />
          <Box
            sx={{
              width: "100%",
              display: "flex",
              flexDirection: "column",
              gap: 2,
            }}
          >
            <DetailRow
              label="تاریخ و زمان"
              value={format(
                new Date(params?.date || new Date()),
                "yyyy/MM/dd hh:mm:ss"
              )}
            />
            <DetailRow
              label="شماره کارت"
              value={params?.cardHolderPan}
              icon={<CreditCard fontSize="small" />}
            />
            <DetailRow
              label="شماره پیگیری"
              value={params?.saleReferenceId}
              icon={<DialpadIcon fontSize="small" />}
            />
            <DetailRow
              label="مبلغ"
              value={`${parseInt(params?.finalAmount)?.toLocaleString()} ریال`}
              icon={<Paid fontSize="small" />}
            />
          </Box>
          <Divider sx={{ width: "100%", mb: 2 }} />

          <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>
  );
};

const DetailRow = ({ label, value, icon }) => (
  <Box
    sx={{
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      gap: 1,
    }}
  >
    <Typography color="text.secondary" sx={{ fontWeight: 500 }}>
      {label}:
    </Typography>
    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
      {icon}
      <Typography sx={{ fontWeight: 500 }}>{value}</Typography>
    </Box>
  </Box>
);
