import React from 'react';
import { Card, CardContent, CardMedia, Typography, Box, Chip, Button, Avatar } from '@mui/material';
import { BlogPost } from '../../types/blogs';
import { keyframes } from '@emotion/react';
import { styled } from '@mui/system';
import { useNavigate } from 'react-router-dom';

// Use your existing color palette
const colors = {
    paper: '#F5F5EF',
    ink: '#1A2526',
    accent: '#D4A017',
    secondary: '#7B4F3A',
    highlight: '#FFF4CC',
    border: '#B89A6E',
    dark: '#3A1F0F',
};

// Storytelling Animations
const storyReveal = keyframes`
  0% { 
    opacity: 0; 
    transform: translateY(30px) rotate(2deg);
    filter: blur(4px);
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) rotate(0);
    filter: blur(0);
  }
`;

const imageFocus = keyframes`
  0% { transform: scale(1.1); filter: brightness(0.7) sepia(0.3); }
  100% { transform: scale(1); filter: brightness(1) sepia(0); }
`;

const contentAppear = keyframes`
  0% { 
    opacity: 0;
    transform: translateY(20px);
  }
  100% { 
    opacity: 1;
    transform: translateY(0);
  }
`;

const underlineDraw = keyframes`
  0% { width: 0; }
  100% { width: 100%; }
`;

const tagFloat = keyframes`
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
`;

// Styled Components
const StoryCard = styled(Card)({
    animation: `${storyReveal} 1.2s forwards`,
    opacity: 0,
    transform: 'translateY(30px) rotate(2deg)',
    position: 'relative',
    overflow: 'hidden',
    '&::before': {
        content: '""',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: 'linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7) 100%)',
        opacity: 0,
        transition: 'opacity 0.5s ease',
        zIndex: 1,
    },
    '&:hover::before': {
        opacity: 1,
    },
});

const StoryImage = styled(CardMedia)({
    animation: `${imageFocus} 1.5s forwards`,
    transform: 'scale(1.1)',
    filter: 'brightness(0.7) sepia(0.3)',
    transition: 'all 0.7s ease',
    position: 'relative',
    '&:hover': {
        transform: 'scale(1.05)',
    },
});

const StoryContent = styled(CardContent)({
    animation: `${contentAppear} 1s forwards`,
    animationDelay: '0.5s',
    opacity: 0,
    position: 'relative',
    zIndex: 2,
});

const StoryTitle = styled(Typography)({
    position: 'relative',
    display: 'inline-block',
    '&::after': {
        content: '""',
        position: 'absolute',
        bottom: '-4px',
        left: 0,
        width: 0,
        height: '2px',
        backgroundColor: colors.accent,
        animation: `${underlineDraw} 1s forwards`,
        animationDelay: '1s',
    },
});

const StoryTag = styled(Chip)({
    animation: `${tagFloat} 3s ease-in-out infinite`,
    animationDelay: '0.3s',
});

interface BlogCardProps {
    post: BlogPost;
    index: number;
}

const BlogCard: React.FC<BlogCardProps> = ({ post, index }) => {
    const navigate = useNavigate();

    const handleReadMore = () => {
        navigate(`/blog/${post.id}`);
    };

    // Calculate animation delays for staggered effect
    const animationDelay = `${index * 0.15}s`;

    return (
        <StoryCard
            sx={{
                background: colors.paper,
                border: `1px solid ${colors.border}`,
                borderRadius: '4px',
                overflow: 'hidden',
                transition: 'all 0.4s ease',
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
                animationDelay: animationDelay,
                '&:hover': {
                    transform: 'translateY(-8px) rotate(0)',
                    boxShadow: '0 12px 30px rgba(0,0,0,0.15)',
                },
            }}
        >
            <Box sx={{ position: 'relative', overflow: 'hidden' }}>
                <StoryImage
                    // component="img"
                    // height="260"
                    image={post.image}
                // alt={post.title}
                // sx={{
                //     animationDelay: animationDelay,
                // }}
                />
                <Box
                    sx={{
                        position: 'absolute',
                        top: 16,
                        right: 16,
                        zIndex: 3,
                    }}
                >
                    <StoryTag
                        label={post.category}
                        size="small"
                        sx={{
                            background: colors.accent,
                            color: colors.ink,
                            fontSize: '0.7rem',
                            fontWeight: 600,
                            animationDelay: `${index * 0.15 + 0.2}s`,
                        }}
                    />
                </Box>
            </Box>

            <StoryContent
                sx={{
                    p: 3,
                    flexGrow: 1,
                    display: 'flex',
                    flexDirection: 'column',
                    animationDelay: `${index * 0.15 + 0.3}s`,
                }}
            >
                <Box sx={{ mb: 2, display: 'flex', alignItems: 'center' }}>
                    <Avatar
                        src={post.author.avatar}
                        alt={post.author.name}
                        sx={{
                            width: 32,
                            height: 32,
                            mr: 1.5,
                            border: `2px solid ${colors.border}`,
                        }}
                    />
                    <Box>
                        <Typography
                            variant="caption"
                            sx={{
                                color: colors.dark,
                                fontFamily: '"Cormorant Garamond", serif',
                                fontWeight: 600,
                                display: 'block',
                                lineHeight: 1.2,
                            }}
                        >
                            {post.author.name}
                        </Typography>
                        <Typography
                            variant="caption"
                            sx={{
                                color: colors.secondary,
                                fontFamily: '"Cormorant Garamond", serif',
                                fontSize: '0.7rem',
                                fontStyle: 'italic',
                            }}
                        >
                            {post.author.role}
                        </Typography>
                    </Box>
                </Box>

                <StoryTitle
                    variant="h6"
                    sx={{
                        fontWeight: 600,
                        color: colors.ink,
                        fontFamily: '"Playfair Display", serif',
                        mb: 2,
                        lineHeight: 1.3,
                        fontSize: '1.25rem',
                        animationDelay: `${index * 0.15 + 0.4}s`,
                    }}
                >
                    {post.title}
                </StoryTitle>

                <Typography
                    variant="body2"
                    sx={{
                        color: colors.secondary,
                        fontFamily: '"Cormorant Garamond", serif',
                        mb: 2,
                        flexGrow: 1,
                        fontSize: '1rem',
                        lineHeight: 1.6,
                        animationDelay: `${index * 0.15 + 0.5}s`,
                    }}
                >
                    {post.excerpt}
                </Typography>

                <Box sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    mt: 'auto',
                    animationDelay: `${index * 0.15 + 0.6}s`,
                }}>
                    <Typography
                        variant="caption"
                        sx={{
                            color: colors.secondary,
                            fontFamily: '"Cormorant Garamond", serif',
                            display: 'flex',
                            alignItems: 'center',
                        }}
                    >
                        <Box
                            component="span"
                            sx={{
                                display: 'inline-block',
                                width: '4px',
                                height: '4px',
                                borderRadius: '50%',
                                bgcolor: colors.accent,
                                mx: 1,
                            }}
                        />
                        {post.date} • {post.readTime}
                    </Typography>

                    <Button
                        onClick={handleReadMore}
                        sx={{
                            color: colors.accent,
                            fontFamily: '"Cormorant Garamond", serif',
                            fontWeight: 600,
                            fontSize: '0.9rem',
                            position: 'relative',
                            padding: '4px 8px',
                            '&::after': {
                                content: '""',
                                position: 'absolute',
                                bottom: 0,
                                left: 0,
                                width: '0',
                                height: '1px',
                                backgroundColor: colors.accent,
                                transition: 'width 0.3s ease',
                            },
                            '&:hover': {
                                color: colors.dark,
                                background: 'transparent',
                                '&::after': {
                                    width: '100%',
                                },
                            }
                        }}
                    >
                        Read Story
                    </Button>
                </Box>

                <Box
                    sx={{
                        mt: 2,
                        display: 'flex',
                        flexWrap: 'wrap',
                        gap: 0.5,
                        animationDelay: `${index * 0.15 + 0.7}s`,
                    }}
                >
                    {post.tags.map((tag, i) => (
                        <Chip
                            key={i}
                            label={tag}
                            size="small"
                            variant="outlined"
                            sx={{
                                color: colors.secondary,
                                borderColor: colors.border,
                                fontSize: '0.6rem',
                                height: '20px',
                                animation: `${tagFloat} 3s ease-in-out infinite`,
                                animationDelay: `${i * 0.2}s`,
                            }}
                        />
                    ))}
                </Box>
            </StoryContent>
        </StoryCard>
    );
};

export default BlogCard;