import React from "react";
import {
  Box,
  Container,
  Typography,
  Grid,
  Card,
  Button,
  Paper,
  Divider,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import { useParams, Link } from "react-router-dom";
import { Product } from "./types";
import chairone from "../images/chairone.png";
import chairtwo from "../images/chairtwo.png";
import chairthree from "../images/chairthree.png";
import carimg from "../images/caraone.png";
import Header from "../header";
import ContactForm from "../contactus/contactus";
import Footer from "../foorter";

const collectionItems: Record<string, Product[]> = {
  chairs: [
    {
      id: "ergo-luxe",
      name: "Ergo-Luxe Executive Chair",
      price: "$499",
      image: `${chairone}`,
      description: "Premium ergonomic support with breathable mesh back",
      details: [
        "Adjustable lumbar support",
        "Tilt tension control",
        "Waterfall seat edge",
        "Dimensions: 27.5″D x 27″W x 40-44″H",
        "Weight capacity: 350 lbs",
      ],
      features: [
        "Lumbar support with 3 adjustment points",
        "Tilt lock mechanism",
        "Certified sustainable materials",
      ],
    },
    {
      id: "cloud-comfort",
      name: "Cloud Comfort Chair",
      price: "$349",
      image: `${chairtwo}`,
      description: "Plush seating with exceptional support",
      details: [
        "High-density foam cushioning",
        "360-degree swivel",
        "Nylon base with dual-wheel casters",
      ],
      features: [
        "Breathable fabric upholstery",
        "Easy assembly",
        "Modern minimalist design",
      ],
    },
  ],
  "luxury-chairs": [
    {
      id: "velvet-throne",
      name: "Velvet Throne Armchair",
      price: "$899",
      image: `${chairthree}`,
      description: "Opulent seating with premium velvet upholstery",
      details: [
        "Solid walnut legs",
        "Hand-tufted detailing",
        "Dimensions: 32″D x 36″W x 34″H",
      ],
      features: [
        "Premium Italian velvet",
        "Handcrafted construction",
        "Limited edition",
      ],
    },
  ],
  "premium-beds": [
    {
      id: "serenity-sleep",
      name: "Serenity Sleep King Bed",
      price: "$2,499",
      image: `${chairone}`,
      description: "Ultimate sleep system with premium materials",
      details: [
        "Solid hardwood frame",
        "Integrated slat system",
        "Dimensions: 80″W x 76″L x 42″H",
      ],
      features: [
        "No-squeak construction",
        "Eco-friendly finishes",
        "10-year warranty",
      ],
    },
  ],
};

const CollectionPage = () => {
  const { collectionId } = useParams<{ collectionId: string }>();
  const collection = collectionId ? collectionItems[collectionId] || [] : [];
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <Box sx={{ backgroundColor: "#f9f9f9", minHeight: "100vh" }}>
      <Header />
      {/* Collection Hero */}
      <Box
        sx={{
          height: { xs: "60vh", md: "90vh" },
          backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(${carimg})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundAttachment: isMobile ? "scroll" : "fixed",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          color: "#fff",
          position: "relative",
          overflow: "hidden",
          animation: "fadeIn 1s ease-in-out",
          "@keyframes fadeIn": {
            "0%": { opacity: 0 },
            "100%": { opacity: 1 },
          },
        }}
      >
        <Box
          sx={{
            position: "relative",
            zIndex: 2,
            px: 3,
            transform: "translateY(0)",
            transition: "transform 0.5s ease",
            "&:hover": {
              transform: "translateY(-10px)",
            },
          }}
        >
          <Typography
            variant="h1"
            fontWeight="bold"
            sx={{
              fontSize: { xs: "2.8rem", md: "4rem" },
              mb: 2,
              textTransform: "capitalize",
              textShadow: "2px 2px 8px rgba(0,0,0,0.7)",
              lineHeight: 1.2,
              letterSpacing: "0.03em",
            }}
          >
            {collectionId} Collection
          </Typography>
          <Typography
            variant="h5"
            sx={{
              color: "orange",
              fontWeight: 500,
              fontStyle: "italic",
              letterSpacing: "0.05em",
              textShadow: "1px 1px 3px rgba(0,0,0,0.5)",
            }}
          >
            {collection.length} premium designs available
          </Typography>
          <Button
            variant="contained"
            size="large"
            sx={{
              background: "orange",
              mt: 4,
              px: 4,
              py: 1.5,
              borderRadius: "50px",
              fontSize: "1.1rem",
              fontWeight: 600,
              boxShadow: "0 4px 15px rgba(255, 165, 0, 0.3)",
              transition: "all 0.3s ease",
              "&:hover": {
                transform: "translateY(-3px)",
                boxShadow: "0 6px 20px rgba(255, 165, 0, 0.4)",
              },
            }}
          >
            Shop Now
          </Button>
        </Box>
      </Box>

      {/* Collection Description */}
      <Paper
        elevation={0}
        sx={{
          backgroundColor: "#fff",
          py: { xs: 6, md: 10 },
          borderBottom: "1px solid rgba(0,0,0,0.05)",
          position: "relative",
          overflow: "hidden",
          "&::before": {
            content: '""',
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            height: "4px",
            background: "linear-gradient(90deg, #FFA500, #FF8C00, #FFA500)",
          },
        }}
      >
        <Container maxWidth="lg">
          <Typography
            variant="h2"
            fontWeight="bold"
            sx={{
              mb: 6,
              position: "relative",
              "&::after": {
                content: '""',
                display: "block",
                width: "80px",
                height: "4px",
                background: "orange",
                margin: "20px 0 0",
                borderRadius: "2px",
              },
            }}
          >
            About This Collection
          </Typography>
          <Grid container spacing={6}>
            <Grid item xs={12} md={6}>
              <Typography
                variant="body1"
                sx={{
                  mb: 3,
                  fontSize: "1.15rem",
                  lineHeight: 1.8,
                  color: "#555",
                }}
              >
                Our {collectionId} collection represents the pinnacle of design
                and craftsmanship. Each piece is created with meticulous
                attention to detail, using only the finest materials sourced
                from sustainable suppliers.
              </Typography>
            </Grid>
            <Grid item xs={12} md={6}>
              <Typography
                variant="body1"
                sx={{
                  fontSize: "1.15rem",
                  lineHeight: 1.8,
                  color: "#555",
                }}
              >
                From the initial sketches to the final quality inspection, every
                step in our process is carefully monitored to ensure exceptional
                quality and durability that will last for generations.
              </Typography>
            </Grid>
          </Grid>
          <Divider sx={{ my: 6, borderColor: "rgba(0,0,0,0.1)" }} />
          <Typography
            variant="h3"
            fontWeight="bold"
            sx={{
              mb: 4,
              position: "relative",
              "&::after": {
                content: '""',
                display: "block",
                width: "60px",
                height: "4px",
                background: "orange",
                margin: "15px 0 0",
                borderRadius: "2px",
              },
            }}
          >
            Collection Highlights
          </Typography>
          <Grid container spacing={4} sx={{ mb: 6 }}>
            {[
              "Handcrafted by skilled artisans",
              "Sustainable materials",
              "5-year craftsmanship warranty",
              "Free design consultation available",
            ].map((item, i) => (
              <Grid item xs={12} sm={6} key={i}>
                <Box sx={{ display: "flex", alignItems: "center" }}>
                  <Box
                    sx={{
                      width: "10px",
                      height: "10px",
                      backgroundColor: "orange",
                      mr: 2,
                      borderRadius: "50%",
                    }}
                  />
                  <Typography
                    variant="body1"
                    sx={{
                      fontSize: "1.1rem",
                      color: "#555",
                    }}
                  >
                    {item}
                  </Typography>
                </Box>
              </Grid>
            ))}
          </Grid>
        </Container>
      </Paper>

      {/* Products Grid */}
      <Container maxWidth="xl" sx={{ py: { xs: 6, md: 10 } }}>
        <Box sx={{ textAlign: "left", mb: { xs: 4, md: 8 } }}>
          <Typography
            variant="h2"
            fontWeight="bold"
            sx={{
              mb: 2,
              color: "#333",
              position: "relative",
              display: "inline-block",
              "&::after": {
                content: '""',
                position: "absolute",
                bottom: "-10px",
                left: 0,
                width: "100px",
                height: "4px",
                background: "orange",
                borderRadius: "2px",
              },
            }}
          >
            Featured {collectionId}
          </Typography>
          <Typography
            variant="h5"
            sx={{
              mt: 3,
              color: "#666",
              fontStyle: "italic",
              fontWeight: 400,
            }}
          >
            Browse our curated selection
          </Typography>
        </Box>

        <Grid container spacing={{ xs: 4, md: 6 }}>
          {collection.map((product) => (
            <Grid item xs={12} sm={6} md={4} key={product.id}>
              <Card
                sx={{
                  height: "100%",
                  display: "flex",
                  flexDirection: "column",
                  transition:
                    "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
                  borderRadius: "12px",
                  overflow: "hidden",
                  boxShadow: "0 5px 15px rgba(0,0,0,0.08)",
                  backgroundColor: "#fff",
                  "&:hover": {
                    transform: "translateY(-10px)",
                    boxShadow: "0 15px 30px rgba(0,0,0,0.15)",
                  },
                }}
              >
                <Box
                  sx={{
                    height: "300px",
                    backgroundImage: `url(${product.image})`,
                    backgroundSize: "contain", // fits the whole image, may leave empty space
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "center",
                    position: "relative",
                    "&::before": {
                      content: '""',
                      position: "absolute",
                      top: 0,
                      left: 0,
                      right: 0,
                      bottom: 0,
                      background:
                        "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 100%)",
                    },
                  }}
                />
                <Box sx={{ p: 4, flexGrow: 1 }}>
                  <Typography
                    variant="h4"
                    fontWeight="bold"
                    sx={{
                      mb: 2,
                      color: "#333",
                    }}
                  >
                    {product.name}
                  </Typography>
                  <Typography
                    variant="body1"
                    sx={{
                      mb: 3,
                      color: "#666",
                      minHeight: "60px",
                    }}
                  >
                    {product.description}
                  </Typography>
                  <Box sx={{ mb: 3 }}>
                    {product.details?.map((detail, i) => (
                      <Typography
                        key={i}
                        variant="body2"
                        sx={{
                          display: "flex",
                          alignItems: "center",
                          mb: 1.5,
                          color: "#555",
                        }}
                      >
                        <Box
                          sx={{
                            color: "orange",
                            mr: 1.5,
                            fontSize: "1.5rem",
                            lineHeight: 0,
                          }}
                        >
                          •
                        </Box>
                        {detail}
                      </Typography>
                    ))}
                  </Box>
                  <Typography
                    variant="h5"
                    color="secondary"
                    sx={{
                      mb: 3,
                      fontWeight: 600,
                    }}
                  >
                    {product.price}
                  </Typography>
                  <Button
                    component={Link}
                    to={`/products/${collectionId}/${product.id}`}
                    fullWidth
                    variant="contained"
                    sx={{
                      background: "orange",
                      py: 1.5,
                      borderRadius: "8px",
                      fontWeight: 600,
                      fontSize: "1rem",
                      letterSpacing: "0.03em",
                      boxShadow: "none",
                      transition: "all 0.3s ease",
                      "&:hover": {
                        transform: "translateY(-2px)",
                        boxShadow: `0 4px 12px ${theme.palette.secondary.main}40`,
                      },
                    }}
                  >
                    View Details
                  </Button>
                </Box>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Container>
      <ContactForm />
      <Footer />
    </Box>
  );
};

export default CollectionPage;
