import React from "react";
import {
  Box,
  Container,
  Typography,
  Grid,
  Card,
  Button,
  Paper,
  Divider,
} 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";

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",
      ],
    },
  ],
  // Add more collections as needed
};

const CollectionPage = () => {
  const { collectionId } = useParams<{ collectionId: string }>();
  const collection = collectionId ? collectionItems[collectionId] || [] : [];

  return (
    <Box sx={{ backgroundColor: "#f5f5f5", minHeight: "100vh" }}>
      {/* Collection Hero */}
      <Box
        sx={{
          height: "50vh",
          backgroundImage:
            "linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(/images/collection-bg.jpg)",
          backgroundSize: "cover",
          backgroundPosition: "center",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          color: "#fff",
          position: "relative",
        }}
      >
        <Box sx={{ position: "relative", zIndex: 2 }}>
          <Typography
            variant="h1"
            fontWeight="bold"
            sx={{
              fontSize: { xs: "2.5rem", md: "4rem" },
              mb: 2,
              textTransform: "capitalize",
            }}
          >
            {collectionId} Collection
          </Typography>
          <Typography variant="h5" sx={{ color: "#FFA500" }}>
            {collection.length} premium designs available
          </Typography>
        </Box>
      </Box>

      {/* Collection Description */}
      <Paper elevation={0} sx={{ backgroundColor: "#fff", py: 8 }}>
        <Container maxWidth="lg">
          <Typography variant="h3" fontWeight="bold" sx={{ mb: 4 }}>
            About This Collection
          </Typography>
          <Typography
            variant="body1"
            sx={{ mb: 3, fontSize: "1.1rem", lineHeight: 1.8 }}
          >
            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>
          <Typography
            variant="body1"
            sx={{ fontSize: "1.1rem", lineHeight: 1.8 }}
          >
            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>
          <Divider sx={{ my: 6 }} />
          <Typography variant="h4" fontWeight="bold" sx={{ mb: 3 }}>
            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: "8px",
                      height: "8px",
                      backgroundColor: "#FFA500",
                      mr: 2,
                    }}
                  />
                  <Typography>{item}</Typography>
                </Box>
              </Grid>
            ))}
          </Grid>
        </Container>
      </Paper>

      {/* Products Grid */}
      <Container maxWidth="xl" sx={{ py: 10 }}>
        <Typography
          variant="h2"
          fontWeight="bold"
          sx={{
            mb: 2,
            color: "#333",
          }}
        >
          Featured {collectionId}
        </Typography>
        <Typography
          variant="h5"
          sx={{
            mb: 6,
            color: "#666",
          }}
        >
          Browse our curated selection
        </Typography>

        <Grid container spacing={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.3s ease",
                  "&:hover": {
                    transform: "translateY(-10px)",
                    boxShadow: "0 15px 30px rgba(0,0,0,0.15)",
                  },
                }}
              >
                <Box
                  sx={{
                    height: "300px",
                    backgroundImage: `url(${product.image})`,
                    backgroundSize: "cover",
                    backgroundPosition: "center",
                  }}
                />
                <Box sx={{ p: 4, flexGrow: 1 }}>
                  <Typography variant="h4" fontWeight="bold" sx={{ mb: 2 }}>
                    {product.name}
                  </Typography>
                  <Typography variant="body1" sx={{ mb: 2, color: "#666" }}>
                    {product.description}
                  </Typography>
                  <Box sx={{ mb: 3 }}>
                    {product.details?.map((detail, i) => (
                      <Typography
                        key={i}
                        variant="body2"
                        sx={{
                          display: "flex",
                          alignItems: "center",
                          mb: 1,
                        }}
                      >
                        <span style={{ color: "#FFA500", marginRight: "8px" }}>
                          •
                        </span>
                        {detail}
                      </Typography>
                    ))}
                  </Box>
                  <Typography variant="h5" color="#FFA500" sx={{ mb: 3 }}>
                    {product.price}
                  </Typography>
                  <Button
                    component={Link}
                    to={`/products/${collectionId}/${product.id}`}
                    fullWidth
                    variant="contained"
                    sx={{
                      backgroundColor: "#FFA500",
                      color: "#fff",
                      py: 1.5,
                      "&:hover": {
                        backgroundColor: "#E59400",
                      },
                    }}
                  >
                    View Details
                  </Button>
                </Box>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Container>
    </Box>
  );
};

export default CollectionPage;