import React, { useState } from "react";
import {
  Box,
  Container,
  Typography,
  Grid,
  Card,
  CardMedia,
  CardContent,
  IconButton,
  Button,
  CardActionArea,
  Rating,
  useTheme,
  Grow,
  Slide,
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import chairone from "../images/chairone.png";
import chairtwo from "../images/chairtwo.png";
import chairthree from "../images/chairthree.png";

const products = [
  {
    category: "Chair",
    title: "Sakarias Armchair",
    price: "$392",
    rating: 5,
    image: `${chairone}`,
  },
  {
    category: "Chair",
    title: "Baltsar Chair",
    price: "$299",
    rating: 4,
    image: `${chairtwo}`,
  },
  {
    category: "Chair",
    title: "Anjay Chair",
    price: "$519",
    rating: 4,
    image: `${chairthree}`,
  },
  {
    category: "Chair",
    title: "Nyantuy Chair",
    price: "$921",
    rating: 5,
    image: `${chairone}`,
  },
  {
    category: "Beds",
    title: "King Bed",
    price: "$1899",
    rating: 5,
    image: `${chairtwo}`,
  },
  {
    category: "Beds",
    title: "Queen Bed",
    price: "$1499",
    rating: 4,
    image: `${chairthree}`,
  },
  {
    category: "Beds",
    title: "Single Bed",
    price: "$899",
    rating: 4,
    image: `${chairone}`,
  },
  {
    category: "Beds",
    title: "Bunk Bed",
    price: "$1299",
    rating: 5,
    image: `${chairtwo}`,
  },
  {
    category: "Sofa",
    title: "Luxury Sofa",
    price: "$1299",
    rating: 5,
    image: `${chairthree}`,
  },
  {
    category: "Sofa",
    title: "Sectional Sofa",
    price: "$1999",
    rating: 4,
    image: `${chairone}`,
  },
  {
    category: "Sofa",
    title: "Leather Sofa",
    price: "$1599",
    rating: 5,
    image: `${chairtwo}`,
  },
  {
    category: "Sofa",
    title: "Modern Sofa",
    price: "$1099",
    rating: 4,
    image: `${chairthree}`,
  },
  {
    category: "Lamp",
    title: "Modern Lamp",
    price: "$199",
    rating: 5,
    image: `${chairone}`,
  },
  {
    category: "Lamp",
    title: "Desk Lamp",
    price: "$129",
    rating: 4,
    image: `${chairtwo}`,
  },
  {
    category: "Lamp",
    title: "Floor Lamp",
    price: "$249",
    rating: 5,
    image: `${chairthree}`,
  },
  {
    category: "Lamp",
    title: "Vintage Lamp",
    price: "$179",
    rating: 4,
    image: `${chairone}`,
  },
];

const categories = ["Chair", "Beds", "Sofa", "Lamp"];

const BestSellingProductSection: React.FC = () => {
  const [selectedCategory, setSelectedCategory] = useState<string>("Chair");
  const theme = useTheme();

  const filteredProducts = products.filter(
    (p) => p.category === selectedCategory
  );

  return (
    <Box
      sx={{
        py: 10,
        backgroundColor: "rgba(82, 78, 78, 0.2)",
      }}
    >
      <Container maxWidth="xl">
        <Slide in={true} direction="down" timeout={500}>
          <Typography
            variant="h4"
            fontWeight="bold"
            align="center"
            sx={{ mb: 6 }}
          >
            Best Selling Products
          </Typography>
        </Slide>

        {/* Tab Container */}
        <Box
          sx={{
            display: "inline-flex",
            justifyContent: "center",
            gap: 1,
            mb: 8,
            px: 3,
            py: 1.5,
            backgroundColor: "white",
            borderRadius: "50px",
            width: "fit-content",
            margin: "0 auto",
            boxShadow: theme.shadows[1],
            height: "auto",
            minHeight: "56px",
            alignItems: "center",
          }}
        >
          {categories.map((cat) => (
            <Button
              key={cat}
              variant={selectedCategory === cat ? "contained" : "text"}
              onClick={() => setSelectedCategory(cat)}
              sx={{
                borderRadius: "50px",
                textTransform: "none",
                fontWeight: 600,
                letterSpacing: "0.5px",
                px: 3,
                py: 1,
                minWidth: 0,
                backgroundColor:
                  selectedCategory === cat ? "#000" : "transparent",
                color: selectedCategory === cat ? "#fff" : "#333",
                "&:hover": {
                  backgroundColor:
                    selectedCategory === cat ? "#333" : "rgba(0,0,0,0.05)",
                },
                transition: "all 0.3s ease",
              }}
            >
              {cat}
            </Button>
          ))}
        </Box>

        <Box sx={{ mt: 6 }}>
          <Grid container spacing={4} justifyContent="center">
            {filteredProducts.slice(0, 4).map((product, idx) => (
              <Grid item key={idx} xs={12} sm={6} md={3} lg={3}>
                <Grow
                  in={true}
                  timeout={500}
                  style={{ transitionDelay: `${idx * 100}ms` }}
                >
                  <Card
                    sx={{
                      borderRadius: "16px",
                      transition: "all 0.3s ease",
                      "&:hover": {
                        transform: "translateY(-8px)",
                        boxShadow: theme.shadows[8],
                      },
                    }}
                  >
                    <CardActionArea>
                      <Box
                        sx={{
                          p: 3,
                          display: "flex",
                          justifyContent: "center",
                          backgroundColor: "rgba(0,0,0,0.02)",
                        }}
                      >
                        <CardMedia
                          component="img"
                          height="220"
                          image={product.image}
                          alt={product.title}
                          sx={{
                            objectFit: "contain",
                            transition: "transform 0.3s ease",
                            "&:hover": {
                              transform: "scale(1.05)",
                            },
                          }}
                        />
                      </Box>
                      <CardContent sx={{ px: 3, pb: 3 }}>
                        <Typography
                          variant="overline"
                          color="text.secondary"
                          sx={{
                            display: "block",
                            mb: 1,
                            fontWeight: 600,
                          }}
                        >
                          {product.category}
                        </Typography>
                        <Typography
                          variant="h6"
                          fontWeight="bold"
                          sx={{ mb: 1 }}
                        >
                          {product.title}
                        </Typography>
                        <Box
                          sx={{
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "space-between",
                            mt: 2,
                          }}
                        >
                          <Typography variant="h6" color="text.primary">
                            {product.price}
                          </Typography>
                          <Box>
                            <Rating
                              value={product.rating}
                              readOnly
                              size="small"
                            />
                            <IconButton
                              sx={{
                                ml: 1,
                                color: "#000",
                                backgroundColor: "rgba(0, 0, 0, 0.1)",
                                "&:hover": {
                                  backgroundColor: "rgba(0, 0, 0, 0.2)",
                                },
                              }}
                            >
                              <AddIcon />
                            </IconButton>
                          </Box>
                        </Box>
                      </CardContent>
                    </CardActionArea>
                  </Card>
                </Grow>
              </Grid>
            ))}
          </Grid>
        </Box>
      </Container>
    </Box>
  );
};

export default BestSellingProductSection;
