import React, { useState } from "react";
import {
  Box,
  Container,
  Typography,
  Button,
  Grid,
  Card,
  CardMedia,
  Divider,
  IconButton,
  Paper,
  Chip,
  useTheme,
} from "@mui/material";
import { useParams, Link } from "react-router-dom";
import { Product } from "../category/types";
import AddIcon from "@mui/icons-material/Add";
import RemoveIcon from "@mui/icons-material/Remove";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
import StarIcon from "@mui/icons-material/Star";
import chairone from "../images/chairone.png";
import chairtwo from "../images/chairtwo.png";
import chairthree from "../images/chairthree.png";

const products: Record<string, Record<string, Product>> = {
  chairs: {
    "ergo-luxe": {
      id: "ergo-luxe",
      name: "Ergo-Luxe Executive Chair",
      price: "$499",
      image: `${chairone}`,
      description:
        "The Ergo-Luxe Executive Chair redefines workplace comfort with its advanced ergonomic design and premium materials. Perfect for long hours of focused work.",
      details: [
        "Dimensions: 27.5″D x 27″W x 40-44″H",
        "Material: Breathable mesh back, premium leather seat",
        "Weight capacity: 350 lbs",
        "Adjustable arms, seat height, and tilt tension",
        "5-year limited warranty",
      ],
      features: [
        "Lumbar support with 3 adjustment points",
        "Tilt lock mechanism",
        "Waterfall seat edge reduces leg pressure",
        "Certified sustainable materials",
      ],
    },
    "cloud-comfort": {
      id: "cloud-comfort",
      name: "Cloud Comfort Chair",
      price: "$349",
      image: `${chairtwo}`,
      description:
        "Experience cloud-like comfort with our best-selling office chair designed for all-day support and relaxation.",
      details: [
        "Dimensions: 25″D x 25″W x 38-42″H",
        "Material: High-resilience foam, polyester fabric",
        "Weight capacity: 300 lbs",
        "360-degree swivel with smooth-rolling casters",
        "3-year warranty",
      ],
      features: [
        "Ergonomic contoured seat",
        "Breathable fabric keeps you cool",
        "Easy to assemble in under 15 minutes",
        "Available in 6 colors",
      ],
    },
  },
  "luxury-chairs": {
    "velvet-throne": {
      id: "velvet-throne",
      name: "Velvet Throne Armchair",
      price: "$899",
      image: `${chairthree}`,
      description:
        "A statement piece that combines luxury and comfort with its sumptuous velvet upholstery and handcrafted details.",
      details: [
        "Dimensions: 32″D x 36″W x 34″H",
        "Material: Italian velvet, solid walnut legs",
        "Weight capacity: 400 lbs",
        "Hand-tufted diamond pattern",
        "Made to order (4-6 week delivery)",
      ],
      features: [
        "Premium down-filled cushions",
        "Antique brass nailhead trim",
        "Expertly handcrafted by artisans",
        "Available in 8 velvet colors",
      ],
    },
  },
};

const ProductPage = () => {
  const { collectionId, productId } = useParams<{
    collectionId: string;
    productId: string;
  }>();
  const [quantity, setQuantity] = useState(1);
  const [activeImage, setActiveImage] = useState(0);
  const theme = useTheme();

  const product =
    collectionId && productId ? products[collectionId]?.[productId] : null;

  if (!product) return <Typography variant="h4">Product not found</Typography>;

  const productImages = [
    product.image,
    "/images/chair-alt1.jpg",
    "/images/chair-alt2.jpg",
    "/images/chair-detail.jpg",
  ];

  return (
    <Box sx={{ backgroundColor: "#f9f9f9", minHeight: "100vh", py: 8 }}>
      <Container maxWidth="lg">
        <Grid container spacing={6}>
          {/* Product Images */}
          <Grid item xs={12} md={6}>
            <Card
              sx={{
                mb: 3,
                borderRadius: "12px",
                overflow: "hidden",
                boxShadow: theme.shadows[4],
                transition: "transform 0.3s ease",
                "&:hover": {
                  transform: "translateY(-2px)",
                },
              }}
            >
              <CardMedia
                component="img"
                height="500"
                image={productImages[activeImage]}
                alt={product.name}
                sx={{ objectFit: "cover" }}
              />
            </Card>

            {/* Thumbnail Gallery */}
            <Grid container spacing={2} sx={{ mb: 4 }}>
              {productImages.map((img, index) => (
                <Grid item xs={3} key={index}>
                  <Card
                    sx={{
                      cursor: "pointer",
                      border:
                        activeImage === index
                          ? "2px solid #FF6D00"
                          : "1px solid #e0e0e0",
                      borderRadius: "8px",
                      overflow: "hidden",
                      transition: "all 0.3s ease",
                      "&:hover": {
                        borderColor: "#FF6D00",
                        transform: "scale(1.03)",
                      },
                    }}
                    onClick={() => setActiveImage(index)}
                  >
                    <CardMedia
                      component="img"
                      height="100"
                      image={img}
                      alt={`${product.name} view ${index + 1}`}
                      sx={{
                        objectFit: "cover",
                        opacity: activeImage === index ? 1 : 0.8,
                      }}
                    />
                  </Card>
                </Grid>
              ))}
            </Grid>

            {/* Enhanced Description Section */}
            <Paper
              elevation={0}
              sx={{
                p: 3,
                backgroundColor: "transparent",
                border: "1px solid #e0e0e0",
                borderRadius: "12px",
                mb: 4,
              }}
            >
              <Typography
                variant="h5"
                sx={{
                  mb: 2,
                  fontWeight: 600,
                  color: theme.palette.text.primary,
                  display: "flex",
                  alignItems: "center",
                }}
              >
                <Box
                  component="span"
                  sx={{
                    width: "8px",
                    height: "8px",
                    backgroundColor: "#FF6D00",
                    borderRadius: "50%",
                    display: "inline-block",
                    mr: 1.5,
                  }}
                />
                About This Product
              </Typography>
              <Typography
                variant="body1"
                sx={{
                  lineHeight: 1.8,
                  color: theme.palette.text.secondary,
                  fontSize: "1.05rem",
                }}
              >
                {product.description}
              </Typography>
            </Paper>
          </Grid>

          {/* Product Info */}
          <Grid item xs={12} md={6}>
            <Paper
              elevation={0}
              sx={{
                backgroundColor: "#fff",
                p: { xs: 3, md: 5 },
                borderRadius: "12px",
                boxShadow: theme.shadows[2],
                border: "1px solid rgba(0,0,0,0.05)",
              }}
            >
              <Typography
                variant="h3"
                fontWeight="bold"
                sx={{
                  mb: 2,
                  fontSize: { xs: "2rem", md: "2.5rem" },
                  lineHeight: 1.2,
                }}
              >
                {product.name}
              </Typography>

              <Box sx={{ display: "flex", alignItems: "center", mb: 3 }}>
                <Box sx={{ display: "flex", mr: 2 }}>
                  {[1, 2, 3, 4, 5].map((i) => (
                    <StarIcon
                      key={i}
                      sx={{
                        color: i <= 4 ? "#FFA500" : "#e0e0e0",
                        fontSize: "1.3rem",
                      }}
                    />
                  ))}
                </Box>
                <Typography variant="body2" color="text.secondary">
                  (47 customer reviews)
                </Typography>
              </Box>

              <Typography
                variant="h3"
                color="#FF6D00"
                sx={{
                  mb: 4,
                  fontSize: "2rem",
                  fontWeight: 700,
                }}
              >
                {product.price}
                <Typography
                  component="span"
                  sx={{
                    fontSize: "1rem",
                    color: theme.palette.text.secondary,
                    ml: 1,
                  }}
                >
                  + FREE Shipping
                </Typography>
              </Typography>

              {/* Key Features */}
              <Box sx={{ mb: 4 }}>
                <Typography
                  variant="h5"
                  fontWeight="bold"
                  sx={{
                    mb: 2,
                    position: "relative",
                    "&:after": {
                      content: '""',
                      position: "absolute",
                      bottom: -8,
                      left: 0,
                      width: "50px",
                      height: "3px",
                      backgroundColor: "#FF6D00",
                    },
                  }}
                >
                  Key Features
                </Typography>
                <Grid container spacing={2}>
                  {product.features?.map((feature, i) => (
                    <Grid item xs={12} sm={6} key={i}>
                      <Box sx={{ display: "flex", alignItems: "center" }}>
                        <Box
                          sx={{
                            width: "8px",
                            height: "8px",
                            backgroundColor: "#FF6D00",
                            mr: 2,
                            borderRadius: "50%",
                          }}
                        />
                        <Typography sx={{ fontSize: "1.05rem" }}>
                          {feature}
                        </Typography>
                      </Box>
                    </Grid>
                  ))}
                </Grid>
              </Box>

              {/* Quantity Selector */}
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  mb: 4,
                  p: 2,
                  backgroundColor: "#f5f5f5",
                  borderRadius: "8px",
                  maxWidth: "200px",
                }}
              >
                <Typography variant="h6" sx={{ mr: 3, fontWeight: 500 }}>
                  Quantity:
                </Typography>
                <IconButton
                  onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                  sx={{
                    border: "1px solid #ddd",
                    "&:hover": {
                      backgroundColor: "#FF6D00",
                      color: "#fff",
                    },
                  }}
                >
                  <RemoveIcon />
                </IconButton>
                <Typography
                  sx={{
                    mx: 2,
                    minWidth: "30px",
                    textAlign: "center",
                    fontWeight: 500,
                  }}
                >
                  {quantity}
                </Typography>
                <IconButton
                  onClick={() => setQuantity((q) => q + 1)}
                  sx={{
                    border: "1px solid #ddd",
                    "&:hover": {
                      backgroundColor: "#FF6D00",
                      color: "#fff",
                    },
                  }}
                >
                  <AddIcon />
                </IconButton>
              </Box>

              {/* Action Buttons */}
              <Button
                fullWidth
                variant="contained"
                size="large"
                startIcon={<ShoppingCartIcon />}
                sx={{
                  backgroundColor: "#FF6D00",
                  color: "#fff",
                  py: 1.5,
                  mb: 2,
                  fontSize: "1.1rem",
                  fontWeight: 600,
                  borderRadius: "8px",
                  "&:hover": {
                    backgroundColor: "#FF5722",
                    boxShadow: "0 4px 12px rgba(255,109,0,0.3)",
                  },
                }}
              >
                Add to Cart
              </Button>
              <Button
                fullWidth
                variant="outlined"
                size="large"
                sx={{
                  borderColor: "#FF6D00",
                  color: "#FF6D00",
                  py: 1.5,
                  mb: 4,
                  fontSize: "1.1rem",
                  fontWeight: 600,
                  borderRadius: "8px",
                  "&:hover": {
                    backgroundColor: "rgba(255,109,0,0.08)",
                    borderColor: "#FF5722",
                  },
                }}
              >
                Buy Now
              </Button>

              <Divider sx={{ my: 4, borderColor: "#e0e0e0" }} />

              {/* Product Details */}
              <Box>
                <Typography
                  variant="h5"
                  fontWeight="bold"
                  sx={{
                    mb: 3,
                    position: "relative",
                    "&:after": {
                      content: '""',
                      position: "absolute",
                      bottom: -8,
                      left: 0,
                      width: "50px",
                      height: "3px",
                      backgroundColor: "#FF6D00",
                    },
                  }}
                >
                  Product Details
                </Typography>
                <Box component="ul" sx={{ pl: 0 }}>
                  {product.details?.map((detail, i) => (
                    <Box
                      component="li"
                      key={i}
                      sx={{
                        listStyle: "none",
                        mb: 2,
                        display: "flex",
                        alignItems: "flex-start",
                        backgroundColor:
                          i % 2 === 0 ? "#f9f9f9" : "transparent",
                        p: 1.5,
                        borderRadius: "4px",
                      }}
                    >
                      <Chip
                        label={i + 1}
                        size="small"
                        sx={{
                          backgroundColor: "#FF6D00",
                          color: "#fff",
                          mr: 2,
                          mt: "2px",
                          fontWeight: 600,
                        }}
                      />
                      <Typography sx={{ fontSize: "1.05rem" }}>
                        {detail}
                      </Typography>
                    </Box>
                  ))}
                </Box>
              </Box>
            </Paper>
          </Grid>
        </Grid>

        {/* Related Products */}
        <Box sx={{ mt: 10 }}>
          <Typography
            variant="h3"
            fontWeight="bold"
            sx={{
              mb: 6,
              position: "relative",
              "&:after": {
                content: '""',
                position: "absolute",
                bottom: -12,
                left: 0,
                width: "80px",
                height: "4px",
                backgroundColor: "#FF6D00",
              },
            }}
          >
            You May Also Like
          </Typography>
          <Grid container spacing={4}>
            {[
              {
                id: "chair2",
                name: "Luxury Lounge Chair",
                price: "$399",
                image: "/images/chair2.jpg",
              },
              {
                id: "chair3",
                name: "Modern Minimal Chair",
                price: "$279",
                image: "/images/chair3.jpg",
              },
              {
                id: "chair4",
                name: "Executive Leather Chair",
                price: "$599",
                image: "/images/chair4.jpg",
              },
            ].map((item) => (
              <Grid item xs={12} sm={6} md={4} key={item.id}>
                <Card
                  sx={{
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    transition: "all 0.3s ease",
                    borderRadius: "12px",
                    overflow: "hidden",
                    boxShadow: theme.shadows[2],
                    "&:hover": {
                      transform: "translateY(-8px)",
                      boxShadow: theme.shadows[6],
                    },
                  }}
                >
                  <Box
                    sx={{
                      height: "250px",
                      backgroundImage: `url(${item.image})`,
                      backgroundSize: "cover",
                      backgroundPosition: "center",
                      transition: "transform 0.5s ease",
                      "&:hover": {
                        transform: "scale(1.05)",
                      },
                    }}
                  />
                  <Box sx={{ p: 3, flexGrow: 1 }}>
                    <Typography
                      variant="h5"
                      fontWeight="bold"
                      sx={{
                        mb: 1,
                        fontSize: "1.4rem",
                      }}
                    >
                      {item.name}
                    </Typography>
                    <Typography
                      variant="h6"
                      color="#FF6D00"
                      sx={{
                        mb: 2,
                        fontWeight: 700,
                      }}
                    >
                      {item.price}
                    </Typography>
                    <Button
                      component={Link}
                      to={`/products/chairs/${item.id}`}
                      fullWidth
                      variant="outlined"
                      sx={{
                        borderColor: "#FF6D00",
                        color: "#FF6D00",
                        fontWeight: 600,
                        "&:hover": {
                          backgroundColor: "rgba(255,109,0,0.1)",
                          borderColor: "#FF5722",
                        },
                      }}
                    >
                      View Product
                    </Button>
                  </Box>
                </Card>
              </Grid>
            ))}
          </Grid>
        </Box>
      </Container>
    </Box>
  );
};

export default ProductPage;
