import {
  Box,
  Card,
  CardContent,
  CardMedia,
  Typography,
  Container,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { motion, AnimatePresence, PanInfo } from "framer-motion";
import { useState } from "react";
import serviceImage from "../services/Image Wrapper.png";

const services = [
  {
    title: "Design",
    description:
      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
    image: `${serviceImage}`,
  },
  {
    title: "Development",
    description:
      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
    image: `${serviceImage}`,
  },
  {
    title: "Marketing",
    description:
      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
    image: `${serviceImage}`,
  },
];

const Services = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleDragEnd = (
    event: MouseEvent | TouchEvent | PointerEvent,
    info: PanInfo
  ) => {
    if (info.offset.x > 50) {
      // Swiped right
      setCurrentIndex((prev) => (prev === 0 ? services.length - 1 : prev - 1));
    } else if (info.offset.x < -50) {
      // Swiped left
      setCurrentIndex((prev) => (prev === services.length - 1 ? 0 : prev + 1));
    }
  };

  return (
    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8 }}>
      <Container maxWidth="lg">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
        >
          <Typography
            variant="h4"
            align="center"
            fontWeight="bold"
            gutterBottom
          >
            Services
          </Typography>
          <Typography variant="subtitle1" align="center" mb={6}>
            We offer design, development & marketing services
          </Typography>
        </motion.div>

        {isMobile ? (
          <Box sx={{ position: "relative", height: 400, overflow: "hidden" }}>
            <AnimatePresence initial={false}>
              <motion.div
                key={currentIndex}
                drag="x"
                onDragEnd={handleDragEnd}
                dragConstraints={{ left: 0, right: 0 }}
                initial={{ x: 300, opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                exit={{ x: -300, opacity: 0 }}
                transition={{ type: "spring", stiffness: 300, damping: 30 }}
                style={{
                  position: "absolute",
                  width: "100%",
                  padding: "0 16px",
                }}
              >
                <Card
                  sx={{
                    borderRadius: 5,
                    overflow: "hidden",
                    height: "100%",
                    bgcolor: "#fff",
                    display: "flex",
                    flexDirection: "column",
                    maxWidth: 345,
                    mx: "auto",
                  }}
                  elevation={3}
                >
                  <Box
                    sx={{
                      height: 200,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      overflow: "hidden",
                    }}
                  >
                    <CardMedia
                      component="img"
                      image={services[currentIndex].image}
                      alt={services[currentIndex].title}
                      sx={{
                        objectFit: "contain",
                        width: "100%",
                        height: "100%",
                      }}
                    />
                  </Box>
                  <CardContent sx={{ flexGrow: 1 }}>
                    <Typography
                      variant="h6"
                      fontWeight="bold"
                      gutterBottom
                      color="black"
                    >
                      {services[currentIndex].title}
                    </Typography>
                    <Typography variant="body2" color="black">
                      {services[currentIndex].description}
                    </Typography>
                  </CardContent>
                </Card>
              </motion.div>
            </AnimatePresence>

            {/* Dots indicator */}
            <Box
              sx={{
                display: "flex",
                justifyContent: "center",
                mt: 2,
                gap: 1,
              }}
            >
              {services.map((_, index) => (
                <Box
                  key={index}
                  onClick={() => setCurrentIndex(index)}
                  sx={{
                    width: 10,
                    height: 10,
                    borderRadius: "50%",
                    bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80",
                    cursor: "pointer",
                  }}
                />
              ))}
            </Box>
          </Box>
        ) : (
          <Box
            sx={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
              gap: 4,
            }}
          >
            {services.map((service, index) => (
              <motion.div
                key={index}
                whileHover={{ y: -5 }}
                transition={{ duration: 0.3 }}
              >
                <Card
                  sx={{
                    borderRadius: 5,
                    overflow: "hidden",
                    height: "100%",
                    bgcolor: "#fff",
                    display: "flex",
                    flexDirection: "column",
                  }}
                  elevation={3}
                >
                  <Box
                    sx={{
                      height: 200,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      overflow: "hidden",
                    }}
                  >
                    <motion.div whileHover={{ scale: 1.05 }}>
                      <CardMedia
                        component="img"
                        image={service.image}
                        alt={service.title}
                        sx={{
                          objectFit: "contain",
                          width: "100%",
                          height: "100%",
                        }}
                      />
                    </motion.div>
                  </Box>
                  <CardContent sx={{ flexGrow: 1 }}>
                    <Typography
                      variant="h6"
                      fontWeight="bold"
                      gutterBottom
                      color="black"
                    >
                      {service.title}
                    </Typography>
                    <Typography variant="body2" color="black">
                      {service.description}
                    </Typography>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </Box>
        )}
      </Container>
    </Box>
  );
};

export default Services;
