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

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

  return (
    <Box
      style={{
        minHeight: "100dvh",
        background: "linear-gradient(135deg, #fff7f7 0%, #f8fafc 60%, #fef2f2 100%)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "24px",
      }}
    >
      <Box
        style={{
          width: "100%",
          maxWidth: 460,
          background: "#fff",
          borderRadius: 24,
          border: "1.5px solid #fecaca",
          boxShadow:
            "0 4px 24px 0 rgba(220,38,38,0.07), 0 1px 4px 0 rgba(0,0,0,0.04)",
          overflow: "hidden",
        }}
      >
        {/* Red header stripe */}
        <Box
          style={{
            background: "linear-gradient(135deg, #dc2626 0%, #ef4444 100%)",
            padding: "40px 32px 32px",
            textAlign: "center",
          }}
        >
          <ThemeIcon
            size={80}
            radius="xl"
            style={{
              background: "rgba(255,255,255,0.18)",
              border: "2px solid rgba(255,255,255,0.3)",
              margin: "0 auto 20px",
              display: "flex",
            }}
          >
            <AlertTriangle size={42} color="#fff" strokeWidth={2} />
          </ThemeIcon>
          <Text fw={800} fz={24} c="#fff" lh={1.2}>
            Payment not completed
          </Text>
          <Text fz={14} c="rgba(255,255,255,0.82)" mt={8} lh={1.5}>
            Nothing was charged — your booking is still active.
          </Text>
        </Box>

        {/* Body */}
        <Stack gap={0} p={32}>
          <Stack gap={16}>
            <Box
              style={{
                background: "#fff7f7",
                border: "1px solid #fecaca",
                borderRadius: 14,
                padding: "16px 20px",
              }}
            >
              <Stack gap={10}>
                <Group gap={10} wrap="nowrap">
                  <Box
                    style={{
                      width: 8,
                      height: 8,
                      borderRadius: "50%",
                      background: "#ef4444",
                      flexShrink: 0,
                      marginTop: 2,
                    }}
                  />
                  <Text fz={13.5} c="#7f1d1d" lh={1.5}>
                    Your payment was declined or cancelled. No charge was made.
                  </Text>
                </Group>
                <Group gap={10} wrap="nowrap">
                  <Box
                    style={{
                      width: 8,
                      height: 8,
                      borderRadius: "50%",
                      background: "#ef4444",
                      flexShrink: 0,
                      marginTop: 2,
                    }}
                  />
                  <Text fz={13.5} c="#7f1d1d" lh={1.5}>
                    You can retry using the <strong>Pay now</strong> button on
                    your booking page.
                  </Text>
                </Group>
                <Group gap={10} wrap="nowrap">
                  <Box
                    style={{
                      width: 8,
                      height: 8,
                      borderRadius: "50%",
                      background: "#ef4444",
                      flexShrink: 0,
                      marginTop: 2,
                    }}
                  />
                  <Text fz={13.5} c="#7f1d1d" lh={1.5}>
                    Contact support if the problem persists.
                  </Text>
                </Group>
              </Stack>
            </Box>
          </Stack>

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

          <Stack gap={10}>
            <Button
              fullWidth
              size="md"
              radius={12}
              color="red"
              leftSection={<RotateCcw size={17} />}
              onClick={() => navigate("/bookings")}
              styles={{
                root: { height: 48, fontWeight: 700, fontSize: 15 },
              }}
            >
              Back to my bookings — retry payment
            </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}>
            Need help?{" "}
            <Text span c="red.6" fw={600}>
              support@edr.et
            </Text>
          </Text>
        </Stack>
      </Box>
    </Box>
  );
}
