import {
  Box,
  Button,
  Divider,
  Group,
  Stack,
  Text,
  ThemeIcon,
} from "@mantine/core";
import { CheckCircle2, FileText, Home } from "lucide-react";
import { useNavigate } from "react-router-dom";

export default function PaymentSuccessPage() {
  const navigate = useNavigate();

  return (
    <Box
      style={{
        minHeight: "100dvh",
        background: "linear-gradient(135deg, #f0fdf4 0%, #f8fafc 60%, #ecfdf5 100%)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "24px",
      }}
    >
      <Box
        style={{
          width: "100%",
          maxWidth: 460,
          background: "#fff",
          borderRadius: 24,
          border: "1.5px solid #d1fae5",
          boxShadow:
            "0 4px 24px 0 rgba(10,111,77,0.08), 0 1px 4px 0 rgba(0,0,0,0.04)",
          overflow: "hidden",
        }}
      >
        {/* Green header stripe */}
        <Box
          style={{
            background: "linear-gradient(135deg, #059669 0%, #0ea371 100%)",
            padding: "40px 32px 32px",
            textAlign: "center",
          }}
        >
          <ThemeIcon
            size={80}
            radius="xl"
            style={{
              background: "rgba(255,255,255,0.2)",
              border: "2px solid rgba(255,255,255,0.35)",
              margin: "0 auto 20px",
              display: "flex",
            }}
          >
            <CheckCircle2 size={42} color="#fff" strokeWidth={2} />
          </ThemeIcon>
          <Text fw={800} fz={24} c="#fff" lh={1.2}>
            Payment successful
          </Text>
          <Text fz={14} c="rgba(255,255,255,0.82)" mt={8} lh={1.5}>
            Your payment has been received and confirmed.
          </Text>
        </Box>

        {/* Body */}
        <Stack gap={0} p={32}>
          <Stack gap={16}>
            <Box
              style={{
                background: "#f0fdf4",
                border: "1px solid #bbf7d0",
                borderRadius: 14,
                padding: "16px 20px",
              }}
            >
              <Stack gap={10}>
                <Group gap={10} wrap="nowrap">
                  <Box
                    style={{
                      width: 8,
                      height: 8,
                      borderRadius: "50%",
                      background: "#16a34a",
                      flexShrink: 0,
                      marginTop: 2,
                    }}
                  />
                  <Text fz={13.5} c="#14532d" lh={1.5}>
                    Your booking is now confirmed for scheduling.
                  </Text>
                </Group>
                <Group gap={10} wrap="nowrap">
                  <Box
                    style={{
                      width: 8,
                      height: 8,
                      borderRadius: "50%",
                      background: "#16a34a",
                      flexShrink: 0,
                      marginTop: 2,
                    }}
                  />
                  <Text fz={13.5} c="#14532d" lh={1.5}>
                    A receipt will be sent to your registered email.
                  </Text>
                </Group>
                <Group gap={10} wrap="nowrap">
                  <Box
                    style={{
                      width: 8,
                      height: 8,
                      borderRadius: "50%",
                      background: "#16a34a",
                      flexShrink: 0,
                      marginTop: 2,
                    }}
                  />
                  <Text fz={13.5} c="#14532d" lh={1.5}>
                    EDR staff will process your booking and assign a train.
                  </Text>
                </Group>
              </Stack>
            </Box>
          </Stack>

          <Divider my={24} color="#e5e7eb" />

          <Stack gap={10}>
            <Button
              fullWidth
              size="md"
              radius={12}
              color="edr-green"
              leftSection={<FileText size={17} />}
              onClick={() => navigate("/bookings")}
              styles={{
                root: { height: 48, fontWeight: 700, fontSize: 15 },
              }}
            >
              Go to my bookings
            </Button>
            <Button
              fullWidth
              size="md"
              radius={12}
              variant="subtle"
              color="gray"
              leftSection={<Home size={17} />}
              onClick={() => navigate("/")}
              styles={{
                root: { height: 44, fontWeight: 600, fontSize: 14 },
              }}
            >
              Back to home
            </Button>
          </Stack>

          <Text fz={12} c="dimmed" ta="center" mt={20} lh={1.5}>
            Questions? Contact{" "}
            <Text span c="edr-green" fw={600}>
              support@edr.et
            </Text>
          </Text>
        </Stack>
      </Box>
    </Box>
  );
}
