import Box from "@mui/material/Box";
import type { ReactNode } from "react";

const pageBackground = "linear-gradient(135deg, #2DA3DC 0%, #3DAF48 100%)";

function TopRightRings() {
  return (
    <Box
      sx={{
        position: "absolute",
        top: -130,
        left: "40%",
        width: 640,
        height: 640,
        borderRadius: "50%",
        border: "42px solid rgba(255,255,255,0.04)",
        "&::before": {
          content: '""',
          position: "absolute",
          inset: 66,
          borderRadius: "50%",
          border: "42px solid rgba(255,255,255,0.04)",
        },
        "&::after": {
          content: '""',
          position: "absolute",
          inset: 180,
          borderRadius: "50%",
          border: "42px solid rgba(255,255,255,0.04)",
        },
      }}
    />
  );
}

function BottomLeftRings() {
  return (
    <Box
      sx={{
        position: "absolute",
        left: -380,
        bottom: -520,
        width: 760,
        height: 760,
        borderRadius: "50%",
        border: "48px solid rgba(255,255,255,0.16)",
        "&::before": {
          content: '""',
          position: "absolute",
          inset: 78,
          borderRadius: "50%",
          border: "48px solid rgba(255,255,255,0.12)",
        },
        "&::after": {
          content: '""',
          position: "absolute",
          inset: 156,
          borderRadius: "50%",
          border: "48px solid rgba(255,255,255,0.1)",
        },
      }}
    />
  );
}

function DotPattern({
  height,
  left,
  top,
  width,
}: {
  height: number;
  left?: number | string;
  top?: number | string;
  width: number;
}) {
  return (
    <Box
      sx={{
        position: "absolute",
        left,
        top,
        width,
        height,
        opacity: 0.3,
        backgroundImage:
          "radial-gradient(circle, rgba(255,255,255,0.55) 2px, transparent 2.3px)",
        backgroundSize: "19px 19px",
      }}
    />
  );
}

type AuthBackgroundProps = {
  children: ReactNode;
};

export function AuthBackground({ children }: AuthBackgroundProps) {
  return (
    <Box
      component="main"
      sx={{
        position: "relative",
        height: "100dvh",
        minHeight: "100dvh",
        maxHeight: "100dvh",
        overflow: "hidden",
        background: pageBackground,
      }}
    >
      <TopRightRings />
      <BottomLeftRings />
      <DotPattern left={0} top={0} width={180} height={180} />
      <DotPattern left="47%" top="74%" width={420} height={210} />

      <Box
        sx={{
          position: "relative",
          zIndex: 1,
          height: "100%",
          minHeight: 0,
          display: "flex",
          flexDirection: "column",
        }}
      >
        {children}
      </Box>
    </Box>
  );
}
