import React, { useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import {
  Box,
  Container,
  Typography,
  Paper,
  Grid,
  Button,
  alpha,
  GlobalStyles,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
import ConstructionIcon from "@mui/icons-material/Construction";
import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
import { Beta } from "../components/ui/Beta";

interface BetaPageProps {
  children?: React.ReactNode;
  title?: string;
  subtitle?: string;
  returnPath?: string;
  returnLabel?: string;
  onReturn?: () => void;
}

const BetaPage: React.FC<BetaPageProps> = ({
  children,
  title = "Coming Soon",
  subtitle = "This page is currently in development",
  returnPath = "/",
  returnLabel = "Return to Backstory",
  onReturn,
}) => {
  const theme = useTheme();
  const [showSparkle, setShowSparkle] = useState<boolean>(false);
  const navigate = useNavigate();
  const location = useLocation();

  if (!children) {
    children = (
      <Box sx={{ width: "100%", display: "flex", justifyContent: "center" }}>
        <Typography>
          The page you requested (<b>{location.pathname.replace(/^\//, "")}</b>)
          is not yet ready.
        </Typography>
      </Box>
    );
  }

  // Enhanced sparkle effect for background elements
  const [sparkles, setSparkles] = useState<
    Array<{
      id: number;
      x: number;
      y: number;
      size: number;
      opacity: number;
      duration: number;
      delay: number;
    }>
  >([]);

  useEffect(() => {
    // Generate sparkle elements with random properties
    const newSparkles = Array.from({ length: 30 }).map((_, index) => ({
      id: index,
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: 2 + Math.random() * 5,
      opacity: 0.3 + Math.random() * 0.7,
      duration: 2 + Math.random() * 4,
      delay: Math.random() * 3,
    }));

    setSparkles(newSparkles);

    // Show main sparkle effect after a short delay
    const timer = setTimeout(() => {
      setShowSparkle(true);
    }, 500);

    return () => clearTimeout(timer);
  }, []);

  const handleReturn = () => {
    if (onReturn) {
      onReturn();
    } else if (returnPath) {
      navigate(returnPath);
    }
  };

  return (
    <Box
      sx={{
        minHeight: "100%",
        width: "100%",
        position: "relative",
        overflow: "hidden",
        bgcolor: theme.palette.background.default,
        pt: 8,
        pb: 6,
      }}
    >
      {/* Animated background elements */}
      <Box
        sx={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          zIndex: 0,
          overflow: "hidden",
        }}
      >
        {sparkles.map((sparkle) => (
          <Box
            key={sparkle.id}
            sx={{
              position: "absolute",
              left: `${sparkle.x}%`,
              top: `${sparkle.y}%`,
              width: sparkle.size,
              height: sparkle.size,
              borderRadius: "50%",
              bgcolor: alpha(theme.palette.primary.main, sparkle.opacity),
              boxShadow: `0 0 ${sparkle.size * 2}px ${alpha(
                theme.palette.primary.main,
                sparkle.opacity
              )}`,
              animation: `float ${sparkle.duration}s ease-in-out ${sparkle.delay}s infinite alternate`,
            }}
          />
        ))}
      </Box>

      <Container maxWidth="lg" sx={{ position: "relative", zIndex: 2 }}>
        <Grid container spacing={4} direction="column" alignItems="center">
          <Grid size={{ xs: 12 }} sx={{ textAlign: "center", mb: 2 }}>
            <Typography
              variant="h2"
              component="h1"
              gutterBottom
              sx={{
                fontWeight: "bold",
                color: theme.palette.primary.main,
                textShadow: `0 0 10px ${alpha(
                  theme.palette.primary.main,
                  0.3
                )}`,
                animation: showSparkle
                  ? "titleGlow 3s ease-in-out infinite alternate"
                  : "none",
              }}
            >
              {title}
            </Typography>

            <Typography
              variant="h5"
              component="h2"
              color="textSecondary"
              sx={{ mb: 6 }}
            >
              {subtitle}
            </Typography>
          </Grid>

          <Grid size={{ xs: 12, md: 10, lg: 8 }} sx={{ mb: 4 }}>
            <Paper
              elevation={8}
              sx={{
                p: { xs: 3, md: 5 },
                borderRadius: 2,
                bgcolor: alpha(theme.palette.background.paper, 0.8),
                backdropFilter: "blur(8px)",
                boxShadow: `0 8px 32px ${alpha(
                  theme.palette.primary.main,
                  0.15
                )}`,
                border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
                position: "relative",
                overflow: "hidden",
              }}
            >
              {/* Construction icon */}
              <Box
                sx={{
                  position: "absolute",
                  top: -15,
                  right: -15,
                  bgcolor: theme.palette.warning.main,
                  color: theme.palette.warning.contrastText,
                  borderRadius: "50%",
                  p: 2,
                  boxShadow: 3,
                  transform: "rotate(15deg)",
                }}
              >
                <ConstructionIcon fontSize="large" />
              </Box>

              {/* Content */}
              <Box sx={{ mt: 3, mb: 3 }}>
                {children || (
                  <Box sx={{ textAlign: "center", py: 4 }}>
                    <RocketLaunchIcon
                      fontSize="large"
                      color="primary"
                      sx={{
                        fontSize: 80,
                        mb: 2,
                        animation: "rocketWobble 3s ease-in-out infinite",
                      }}
                    />
                    <Typography>
                      We're working hard to bring you this exciting new feature!
                    </Typography>
                    <Typography color="textSecondary" sx={{ mt: 1 }}>
                      Check back soon for updates.
                    </Typography>
                  </Box>
                )}
                <Beta
                  adaptive={false}
                  sx={{
                    opacity: 0.5,
                    left: "-72px",
                    "& > div": {
                      paddingRight: "30px",
                      background: "gold",
                      color: "#808080",
                    },
                  }}
                  onClick={() => {
                    navigate("/docs/beta");
                  }}
                />
              </Box>

              {/* Return button */}
              <Box sx={{ mt: 4, textAlign: "center" }}>
                <Button
                  variant="contained"
                  color="primary"
                  size="large"
                  onClick={handleReturn}
                  sx={{
                    px: 4,
                    py: 1,
                    borderRadius: 4,
                    boxShadow: `0 4px 14px ${alpha(
                      theme.palette.primary.main,
                      0.4
                    )}`,
                    "&:hover": {
                      boxShadow: `0 6px 20px ${alpha(
                        theme.palette.primary.main,
                        0.6
                      )}`,
                    },
                  }}
                >
                  {returnLabel}
                </Button>
              </Box>
            </Paper>
          </Grid>
        </Grid>
      </Container>

      {/* Global styles added with MUI's GlobalStyles component */}
      <GlobalStyles
        styles={{
          "@keyframes float": {
            "0%": {
              transform: "translateY(0) scale(1)",
            },
            "100%": {
              transform: "translateY(-20px) scale(1.1)",
            },
          },
          "@keyframes sparkleFloat": {
            "0%": {
              transform: "translateY(0) scale(1)",
              opacity: 0.7,
            },
            "50%": {
              opacity: 1,
            },
            "100%": {
              transform: "translateY(-15px) scale(1.2)",
              opacity: 0.7,
            },
          },
          "@keyframes titleGlow": {
            "0%": {
              textShadow: `0 0 10px ${alpha(theme.palette.primary.main, 0.3)}`,
            },
            "100%": {
              textShadow: `0 0 25px ${alpha(
                theme.palette.primary.main,
                0.7
              )}, 0 0 40px ${alpha(theme.palette.primary.main, 0.4)}`,
            },
          },
          "@keyframes rocketWobble": {
            "0%": {
              transform: "translateY(0) rotate(0deg)",
            },
            "50%": {
              transform: "translateY(-10px) rotate(3deg)",
            },
            "100%": {
              transform: "translateY(0) rotate(-2deg)",
            },
          },
        }}
      />
    </Box>
  );
};

export { BetaPage };