import React from "react";
import {
  Box,
  CircularProgress,
  LinearProgress,
  Paper,
  Typography,
} from "@mui/material";

interface ServerLoadingIndicatorProps {
  progress?: {
    attempt: number;
    maxAttempts: number;
  } | null;
  message?: string;
}

export const ServerLoadingIndicator: React.FC<ServerLoadingIndicatorProps> = ({
  progress,
  message = "Starting server...",
}) => {
  const progressPercentage = progress
    ? Math.round((progress.attempt / progress.maxAttempts) * 100)
    : 0;

  // Fun quotes about agents taking over
  const agentQuotes = [
    "Agents are calibrating the space protocols...",
    "Teaching agents the fine art of space conquest...",
    "Agents are learning to navigate the cosmic frontier...",
    "Preparing agents for their intergalactic mission...",
    "Agents are studying the universe's source code...",
    "Installing agent confidence modules...",
    "Agents are fine-tuning their cosmic algorithms...",
    "Briefing agents on proper space etiquette...",
    "Agents are calculating optimal space trajectories...",
    "Teaching agents to think beyond planetary boundaries...",
  ];

  // Select quote based on progress attempt
  const currentQuoteIndex = progress
    ? (progress.attempt - 1) % agentQuotes.length
    : 0;

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        p: 2,
      }}
    >
      <Paper
        elevation={3}
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: 3,
          p: 4,
          borderRadius: 2,
          minWidth: 400,
          maxWidth: 500,
        }}
      >
        {/* Main spinner */}
        <CircularProgress size={48} color="secondary" />

        {/* Status message */}
        <Typography
          variant="h6"
          sx={{
            textAlign: "center",
            fontWeight: 500,
            color: "text.primary",
          }}
        >
          {message}
        </Typography>

        {/* Progress bar */}
        {progress && (
          <Box sx={{ width: "100%", gap: 2, display: "flex", flexDirection: "column" }}>
            <LinearProgress
              variant="determinate"
              value={progressPercentage}
              sx={{
                height: 8,
                borderRadius: 4,
                backgroundColor: "action.hover",
                "& .MuiLinearProgress-bar": {
                  borderRadius: 4,
                },
              }}
            />

            {/* Fun rotating quote */}
            <Typography
              variant="body2"
              sx={{
                color: "text.secondary",
                textAlign: "center",
                fontSize: "0.875rem",
                minHeight: "1.5em",
                fontStyle: "italic",
              }}
            >
              {agentQuotes[currentQuoteIndex]}
            </Typography>

          </Box>
        )}
      </Paper>
    </Box>
  );
};