import React, { useState } from 'react';
import { Box, Typography, Button, Container, IconButton, Grid, Card, Chip, CardMedia } from '@mui/material';
import { useInView } from 'react-intersection-observer';
import InstagramIcon from '@mui/icons-material/Instagram';
import FacebookIcon from '@mui/icons-material/Facebook';
import TwitterIcon from '@mui/icons-material/Twitter';
import EmailIcon from '@mui/icons-material/Email';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import VisibilityIcon from '@mui/icons-material/Visibility';
import { keyframes } from '@emotion/react';
import { styled } from '@mui/system';
import image4 from '../../assets/bag1.jpg'
import image5 from '../../assets/bag2.jpg'
import StoryHeader from '../header/StoryHeader';
import StoryTimeline from '../timeline/StoryTimeline';
// Lighter color palette for product showcase
const colors = {
    lightBase: '#F8F7F4', // Very light cream
    lightPaper: '#FFFFFF', // White
    lightInk: '#3E3E3E', // Dark gray for text
    accent: '#C19A6B', // Muted gold
    secondary: '#8E7D6D', // Muted taupe
    highlight: '#E8D9C7', // Light sand
    border: '#D1C6B5', // Light tan border
    dark: '#5C4B3A', // Dark brown for contrast
};

// Smooth animations
const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
`;

const float = keyframes`
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
`;

const smoothPulse = keyframes`
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(193, 154, 107, 0.3); }
  70% { transform: scale(1.01); box-shadow: 0 0 0 8px rgba(193, 154, 107, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(193, 154, 107, 0); }
`;

// Styled components
const LightVintageBox = styled(Box)({
    position: 'relative',
    backgroundColor: colors.lightBase,
    '&::before': {
        content: '""',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: `url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%235C4B3A' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E")`,
        opacity: 0.1,
        zIndex: 0,
    },
});

const LightVintageButton = styled(Button)({
    position: 'relative',
    overflow: 'hidden',
    border: `1px solid ${colors.border}`,
    color: colors.lightInk,
    backgroundColor: colors.lightPaper,
    fontWeight: 400,
    letterSpacing: '0.5px',
    textTransform: 'uppercase',
    padding: '10px 22px',
    borderRadius: '2px',
    transition: 'all 0.3s ease',
    boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
    '&:hover': {
        backgroundColor: colors.highlight,
        color: colors.dark,
        borderColor: colors.accent,
        transform: 'translateY(-2px)',
        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
    },
    '&::after': {
        content: '""',
        position: 'absolute',
        bottom: 0,
        left: 0,
        width: '100%',
        height: '1px',
        backgroundColor: colors.accent,
        transform: 'scaleX(0)',
        transformOrigin: 'right',
        transition: 'transform 0.3s ease',
    },
    '&:hover::after': {
        transform: 'scaleX(1)',
        transformOrigin: 'left',
    },
});

const LightVintagePulseButton = styled(LightVintageButton)({
    animation: `${smoothPulse} 3s infinite`,
    '&:hover': {
        animation: 'none',
    },
});

const AnimatedSection = styled(Box)({
    opacity: 0,
    transform: 'translateY(20px)',
    animation: `${fadeIn} 0.8s forwards`,
});

// Product data
const products = [
    {
        id: 1,
        name: 'Handwoven Silk Saree',
        price: '₹12,999',
        description: 'Traditional Banarasi silk with zari work',
        image: `${image5}`,
        category: 'Clothing',
        tags: ['Handmade', 'Premium'],
    },
    {
        id: 2,
        name: 'Block Print Cotton Kurta',
        price: '₹3,499',
        description: 'Hand-block printed with natural dyes',
        image: `${image4}`,
        category: 'Clothing',
        tags: ['Eco-friendly', 'Handmade'],
    },
    {
        id: 3,
        name: 'Brass Pooja Thali',
        price: '₹2,899',
        description: 'Handcrafted brass prayer set with intricate designs',
        image: `${image4}`,
        category: 'Home Decor',
        tags: ['Ritual', 'Handcrafted'],
    },
    {
        id: 4,
        name: 'Embroidered Jutti',
        price: '₹1,899',
        description: 'Traditional Punjabi footwear with phulkari work',
        image: `${image5}`,
        category: 'Footwear',
        tags: ['Handmade', 'Comfort'],
    },
    {
        id: 5,
        name: 'Handloom Cushion Covers',
        price: '₹1,299',
        description: 'Set of 2 handwoven cushion covers',
        image: `${image4}`,
        category: 'Home Decor',
        tags: ['Handmade', 'Set'],
    },
    {
        id: 6,
        name: 'Silver Tribal Jewelry Set',
        price: '₹5,999',
        description: 'Traditional tribal necklace and earrings set',
        image: `${image5}`,
        category: 'Jewelry',
        tags: ['Handcrafted', 'Silver'],
    },
];

const categories = [
    { name: 'All', value: 'all' },
    { name: 'Clothing', value: 'Clothing' },
    { name: 'Home Decor', value: 'Home Decor' },
    { name: 'Jewelry', value: 'Jewelry' },
    { name: 'Footwear', value: 'Footwear' },
];

export const LightProductShowcase: React.FC = () => {
    const [selectedCategory, setSelectedCategory] = useState('all');
    const [hoveredProduct, setHoveredProduct] = useState<number | null>(null);

    // Intersection Observer for scroll animations
    const [productsRef, productsInView] = useInView({ threshold: 0.1, triggerOnce: true });
    const [footerRef, footerInView] = useInView({ threshold: 0.1, triggerOnce: true });

    const filteredProducts = selectedCategory === 'all'
        ? products
        : products.filter(product => product.category === selectedCategory);

    return (
        <LightVintageBox sx={{ minHeight: '100vh', color: colors.lightInk, overflow: 'hidden', position: 'relative' }}>
            {/* Paper texture overlay */}
            <Box
                sx={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    backgroundImage:
                        'url("data:image/svg+xml,%3Csvg width=\'600\' height=\'600\' viewBox=\'0 0 600 600\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'noiseFilter\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.65\' numOctaves=\'3\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23noiseFilter)\' opacity=\'0.03\'/%3E%3C/svg%3E")',
                    opacity: 0.3,
                    zIndex: 0,
                }}
            />

            {/* Animated decorative elements */}
            <Box
                sx={{
                    position: 'fixed',
                    top: '15%',
                    right: '5%',
                    width: '80px',
                    height: '80px',
                    background: `linear-gradient(135deg, ${colors.accent}15, ${colors.secondary}20, ${colors.accent}15)`,
                    borderRadius: '50%',
                    animation: `${float} 8s ease-in-out infinite`,
                    zIndex: 0,
                    opacity: 0.4,
                }}
            />

            <Box
                sx={{
                    position: 'fixed',
                    bottom: '20%',
                    left: '5%',
                    width: '60px',
                    height: '60px',
                    background: `linear-gradient(135deg, ${colors.secondary}15, ${colors.accent}20, ${colors.secondary}15)`,
                    borderRadius: '50%',
                    animation: `${float} 7s ease-in-out infinite reverse`,
                    zIndex: 0,
                    opacity: 0.4,
                }}
            />

            <StoryHeader />
            <StoryTimeline />

            <Container maxWidth="lg" sx={{ position: 'relative', zIndex: 1, pb: 5 }}>

                {/* Category Filter */}
                <Box id="collection" sx={{ my: 6, textAlign: 'center' }}>
                    <AnimatedSection style={{ animationDelay: '0.1s' }}>
                        <Typography
                            variant="h5"
                            sx={{
                                mb: 3,
                                fontWeight: 300,
                                color: colors.lightInk,
                                fontFamily: '"Playfair Display", serif',
                            }}
                        >
                            Browse Categories
                        </Typography>
                    </AnimatedSection>

                    <Box sx={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 1.5, mb: 5 }}>
                        {categories.map((category) => (
                            <Chip
                                key={category.value}
                                label={category.name}
                                onClick={() => setSelectedCategory(category.value)}
                                variant={selectedCategory === category.value ? "filled" : "outlined"}
                                sx={{
                                    color: selectedCategory === category.value ? colors.lightPaper : colors.lightInk,
                                    backgroundColor: selectedCategory === category.value ? colors.accent : 'transparent',
                                    borderColor: colors.border,
                                    fontFamily: '"Cormorant Garamond", serif',
                                    fontSize: '1rem',
                                    padding: '8px 16px',
                                    '&:hover': {
                                        backgroundColor: selectedCategory === category.value ? colors.accent : colors.highlight,
                                    },
                                }}
                            />
                        ))}
                    </Box>
                </Box>

                {/* Products Grid */}
                <Box ref={productsRef} sx={{ my: 8 }}>
                    <Grid container spacing={3}>
                        {filteredProducts.map((product, index) => (
                            <Grid key={product.id}>
                                <AnimatedSection
                                    style={{
                                        animationDelay: productsInView ? `${index * 0.1}s` : '0s',
                                    }}
                                >
                                    <Card
                                        sx={{
                                            background: colors.lightPaper,
                                            border: `1px solid ${colors.border}`,
                                            borderRadius: '4px',
                                            overflow: 'hidden',
                                            transition: 'all 0.3s ease',
                                            height: '100%',
                                            display: 'flex',
                                            flexDirection: 'column',
                                            boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
                                            '&:hover': {
                                                transform: 'translateY(-4px)',
                                                boxShadow: `0 8px 24px rgba(0,0,0,0.1)`,
                                            },
                                        }}
                                        onMouseEnter={() => setHoveredProduct(product.id)}
                                        onMouseLeave={() => setHoveredProduct(null)}
                                    >
                                        <Box sx={{ position: 'relative', overflow: 'hidden' }}>
                                            <CardMedia
                                                component="img"
                                                height="300"
                                                image={product.image}
                                                alt={product.name}
                                                sx={{
                                                    transition: 'all 0.5s ease',
                                                    transform: hoveredProduct === product.id ? 'scale(1.05)' : 'scale(1)',
                                                    filter: 'brightness(0.98)',
                                                }}
                                            />
                                            <Box
                                                sx={{
                                                    position: 'absolute',
                                                    top: 0,
                                                    left: 0,
                                                    right: 0,
                                                    bottom: 0,
                                                    background: `linear-gradient(to bottom, transparent 0%, ${colors.lightBase} 100%)`,
                                                    opacity: hoveredProduct === product.id ? 0.8 : 0,
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    justifyContent: 'center',
                                                    gap: 2,
                                                    transition: 'all 0.3s ease',
                                                }}
                                            >
                                                <IconButton sx={{ color: colors.lightInk, background: `${colors.lightPaper}`, '&:hover': { background: colors.accent, color: colors.lightPaper } }}>
                                                    <FavoriteBorderIcon />
                                                </IconButton>
                                                <IconButton sx={{ color: colors.lightInk, background: `${colors.lightPaper}`, '&:hover': { background: colors.accent, color: colors.lightPaper } }}>
                                                    <ShoppingCartIcon />
                                                </IconButton>
                                                <IconButton sx={{ color: colors.lightInk, background: `${colors.lightPaper}`, '&:hover': { background: colors.accent, color: colors.lightPaper } }}>
                                                    <VisibilityIcon />
                                                </IconButton>
                                            </Box>
                                            <Box sx={{ position: 'absolute', top: 10, right: 10 }}>
                                                {product.tags.map((tag, i) => (
                                                    <Chip
                                                        key={i}
                                                        label={tag}
                                                        size="small"
                                                        sx={{
                                                            background: colors.accent,
                                                            color: colors.lightPaper,
                                                            fontSize: '0.7rem',
                                                            height: '22px',
                                                            mb: 0.5,
                                                            display: 'block',
                                                        }}
                                                    />
                                                ))}
                                            </Box>
                                        </Box>
                                        <Box sx={{ p: 2.5, flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
                                            <Typography
                                                variant="h6"
                                                sx={{
                                                    fontWeight: 400,
                                                    color: colors.lightInk,
                                                    fontFamily: '"Playfair Display", serif',
                                                    mb: 1,
                                                }}
                                            >
                                                {product.name}
                                            </Typography>
                                            <Typography
                                                variant="body2"
                                                sx={{
                                                    color: colors.secondary,
                                                    fontFamily: '"Cormorant Garamond", serif',
                                                    mb: 2,
                                                    flexGrow: 1,
                                                    fontSize: '0.95rem',
                                                }}
                                            >
                                                {product.description}
                                            </Typography>
                                            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                                <Typography
                                                    variant="h6"
                                                    sx={{
                                                        color: colors.accent,
                                                        fontFamily: '"Playfair Display", serif',
                                                    }}
                                                >
                                                    {product.price}
                                                </Typography>
                                                <LightVintageButton size="small">
                                                    Add to Cart
                                                </LightVintageButton>
                                            </Box>
                                        </Box>
                                    </Card>
                                </AnimatedSection>
                            </Grid>
                        ))}
                    </Grid>
                </Box>

                {/* Call to Action */}
                <Box id="story" sx={{ my: 8, py: 8, textAlign: 'center', background: colors.highlight, borderRadius: '4px' }}>
                    <Container maxWidth="md">
                        <AnimatedSection style={{ animationDelay: '0.1s' }}>
                            <Typography
                                variant="h4"
                                sx={{
                                    mb: 3,
                                    fontWeight: 300,
                                    color: colors.lightInk,
                                    fontFamily: '"Playfair Display", serif',
                                }}
                            >
                                Join Our Artisan Community
                            </Typography>
                        </AnimatedSection>
                        <AnimatedSection style={{ animationDelay: '0.2s' }}>
                            <Typography
                                variant="body1"
                                sx={{
                                    color: colors.secondary,
                                    mb: 5,
                                    fontSize: '1.05rem',
                                    fontFamily: '"Cormorant Garamond", serif',
                                    lineHeight: 1.7,
                                }}
                            >
                                By purchasing our products, you're not just buying beautiful handcrafted items—you're supporting traditional artisans and helping preserve India's rich cultural heritage for future generations.
                            </Typography>
                        </AnimatedSection>
                        <AnimatedSection style={{ animationDelay: '0.3s' }}>
                            <LightVintagePulseButton
                                variant="contained"
                                sx={{
                                    px: 5,
                                    py: 1.5,
                                    fontWeight: 300,
                                    fontFamily: '"Cormorant Garamond", serif',
                                    letterSpacing: '1.5px',
                                    color: colors.lightInk,
                                    '&:hover': { background: colors.highlight },
                                }}
                            >
                                Discover Our Story
                            </LightVintagePulseButton>
                        </AnimatedSection>
                    </Container>
                </Box>

                {/* Footer */}
                <Box ref={footerRef} sx={{ py: 5, textAlign: 'center', borderTop: `1px solid ${colors.border}` }}>
                    <AnimatedSection style={{ animationDelay: footerInView ? '0.1s' : '0s' }}>
                        <Typography
                            variant="h6"
                            sx={{
                                mb: 2,
                                fontWeight: 300,
                                color: colors.lightInk,
                                letterSpacing: '3px',
                                fontFamily: '"Playfair Display", serif',
                                textTransform: 'uppercase',
                            }}
                        >
                            Handcrafted Heritage
                        </Typography>
                        <Typography
                            variant="body2"
                            sx={{
                                color: colors.secondary,
                                mb: 3,
                                maxWidth: '600px',
                                margin: '0 auto',
                                fontSize: '0.95rem',
                                fontFamily: '"Cormorant Garamond", serif',
                                lineHeight: 1.6,
                            }}
                        >
                            Each piece tells a story of India's rich heritage and skilled artisanship.
                        </Typography>
                        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, mb: 3 }}>
                            <IconButton
                                href="https://instagram.com"
                                target="_blank"
                                sx={{ color: colors.secondary, '&:hover': { color: colors.accent, transform: 'scale(1.1)' }, transition: 'all 0.3s ease' }}
                            >
                                <InstagramIcon />
                            </IconButton>
                            <IconButton
                                href="https://facebook.com"
                                target="_blank"
                                sx={{ color: colors.secondary, '&:hover': { color: colors.accent, transform: 'scale(1.1)' }, transition: 'all 0.3s ease' }}
                            >
                                <FacebookIcon />
                            </IconButton>
                            <IconButton
                                href="https://twitter.com"
                                target="_blank"
                                sx={{ color: colors.secondary, '&:hover': { color: colors.accent, transform: 'scale(1.1)' }, transition: 'all 0.3s ease' }}
                            >
                                <TwitterIcon />
                            </IconButton>
                            <IconButton
                                href="mailto:contact@thekalawati.com"
                                sx={{ color: colors.secondary, '&:hover': { color: colors.accent, transform: 'scale(1.1)' }, transition: 'all 0.3s ease' }}
                            >
                                <EmailIcon />
                            </IconButton>
                        </Box>
                        <Typography
                            variant="caption"
                            sx={{ color: colors.secondary, opacity: 0.7, fontSize: '0.8rem', fontFamily: '"Cormorant Garamond", serif' }}
                        >
                            © {new Date().getFullYear()} Handcrafted Heritage. All rights reserved.
                        </Typography>
                    </AnimatedSection>
                </Box>
            </Container>
        </LightVintageBox>
    );
};

export default LightProductShowcase;
