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 };