import React from "react";
import { Box, Typography, Paper, SxProps } from "@mui/material";
import { styled } from "@mui/material/styles";

interface QuoteContainerProps {
  size?: "normal" | "small";
}

const QuoteContainer = styled(Paper, {
  shouldForwardProp: (prop) => prop !== "size",
})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
  position: "relative",
  padding: size === "small" ? theme.spacing(1) : theme.spacing(4),
  margin: size === "small" ? theme.spacing(0.5) : theme.spacing(2),
  background: "linear-gradient(135deg, #FFFFFF 0%, #D3CDBF 100%)",
  borderRadius: size === "small" ? theme.spacing(1) : theme.spacing(2),
  boxShadow: "0 8px 32px rgba(26, 37, 54, 0.15)",
  overflow: "hidden",
  border: "1px solid rgba(74, 122, 125, 0.2)",
  "&::before": {
    content: '""',
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    height: size === "small" ? "2px" : "4px",
    background: "linear-gradient(90deg, #4A7A7D 0%, #D4A017 100%)",
  },
}));

const QuoteText = styled(Typography, {
  shouldForwardProp: (prop) => prop !== "size",
})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
  fontSize: size === "small" ? "0.9rem" : "1.2rem",
  lineHeight: size === "small" ? 1.4 : 1.6,
  fontStyle: "italic",
  color: "#2E2E2E", // Charcoal Black
  position: "relative",
  zIndex: 2,
  textAlign: "center",
  fontFamily: '"Georgia", "Times New Roman", serif',
  fontWeight: 400,
}));

const QuoteMark = styled(Typography, {
  shouldForwardProp: (prop) => prop !== "size",
})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
  fontSize: size === "small" ? "2.5rem" : "4rem",
  fontFamily: '"Georgia", "Times New Roman", serif',
  fontWeight: "bold",
  opacity: 0.15,
  position: "absolute",
  zIndex: 1,
  color: "#4A7A7D", // Dusty Teal
  userSelect: "none",
}));

const OpeningQuote = styled(QuoteMark)(
  ({ size = "normal" }: QuoteContainerProps) => ({
    top: size === "small" ? "5px" : "10px",
    left: size === "small" ? "8px" : "15px",
  })
);

const ClosingQuote = styled(QuoteMark)(
  ({ size = "normal" }: QuoteContainerProps) => ({
    bottom: size === "small" ? "5px" : "10px",
    right: size === "small" ? "8px" : "15px",
    transform: "rotate(180deg)",
  })
);

const AuthorText = styled(Typography, {
  shouldForwardProp: (prop) => prop !== "size",
})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
  marginTop: size === "small" ? theme.spacing(1) : theme.spacing(2),
  textAlign: "right",
  fontStyle: "normal",
  fontWeight: 500,
  color: "#1A2536", // Midnight Blue
  fontSize: size === "small" ? "0.8rem" : "0.95rem",
  "&::before": {
    content: '"— "',
    color: "#D4A017", // Golden Ochre dash
  },
}));

const AccentLine = styled(Box, {
  shouldForwardProp: (prop) => prop !== "size",
})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
  width: size === "small" ? "40px" : "60px",
  height: size === "small" ? "1px" : "2px",
  background: "linear-gradient(90deg, #D4A017 0%, #4A7A7D 100%)", // Golden Ochre to Dusty Teal
  margin: size === "small" ? "0.5rem auto" : "1rem auto",
  borderRadius: "1px",
}));

interface QuoteProps {
  quote?: string;
  author?: string;
  size?: "small" | "normal";
  sx?: SxProps;
}

const Quote = (props: QuoteProps) => {
  const { quote, author, size = "normal", sx } = props;
  return (
    <QuoteContainer size={size} elevation={0} sx={sx}>
      <OpeningQuote size={size}>"</OpeningQuote>
      <ClosingQuote size={size}>"</ClosingQuote>

      <Box sx={{ position: "relative", zIndex: 2 }}>
        <QuoteText size={size} variant="body1">
          {quote}
        </QuoteText>

        <AccentLine size={size} />

        {author && (
          <AuthorText size={size} variant="body2">
            {author}
          </AuthorText>
        )}
      </Box>
    </QuoteContainer>
  );
};

export { Quote };