import { useState, useMemo, isValidElement, useEffect } from "react";
import {
  Box,
  Typography,
  Button,
  Grid,
  Card,
  CardContent,
  Modal,
  Fade,
  Backdrop,
  CircularProgress,
} from "@mui/material";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import PropTypes from "prop-types";
import { Helmet } from "react-helmet-async";
import {
  extractFirstImageSrc,
  removeImageTags,
  stripHtml,
} from "../utils/htmlHelpers";

const DEFAULT_CARD_IMAGE = "https://picsum.photos/id/43/800/400.webp";

const ServicePageTemplate = ({
  title,
  subtitle,
  interestTitle,
  description,
  desirTitle,
  features,
  image,
  heroBackground,
  ctaText,
  ctaLink,
  carouselItems,
  seo, // ✅ Ajout de l'objet SEO
}) => {
  const [openModal, setOpenModal] = useState(false);
  const [modalContent, setModalContent] = useState({});
  const [loadingImage, setLoadingImage] = useState(true);
  const [heroLoaded, setHeroLoaded] = useState(false);

  const renderRichText = (value) => {
    if (value === null || value === undefined) return null;
    if (isValidElement(value)) return value;
    if (typeof value === "string") {
      return <span dangerouslySetInnerHTML={{ __html: value }} />;
    }
    return null;
  };

  const descriptionIsElement = isValidElement(description);
  const rawDescriptionHtml =
    !descriptionIsElement && typeof description === "string" ? description : "";

  const descriptionMedia = useMemo(() => {
    if (!rawDescriptionHtml) {
      return { html: rawDescriptionHtml, media: null };
    }
    if (typeof window === "undefined" || !window.DOMParser) {
      return { html: rawDescriptionHtml, media: null };
    }
    const parser = new window.DOMParser();
    const doc = parser.parseFromString(rawDescriptionHtml, "text/html");
    const firstImage = doc.body.querySelector("img");
    if (firstImage) {
      const media = {
        src: firstImage.getAttribute("src"),
        alt: firstImage.getAttribute("alt") || "",
      };
      firstImage.remove();
      return { html: doc.body.innerHTML, media };
    }
    return { html: rawDescriptionHtml, media: null };
  }, [rawDescriptionHtml]);

  useEffect(() => {
    if (!image) {
      setHeroLoaded(true);
      return;
    }
    setHeroLoaded(false);
    const img = new Image();
    img.src = image;
    img.onload = () => setHeroLoaded(true);
    img.onerror = () => setHeroLoaded(true);
    return () => {
      img.onload = null;
      img.onerror = null;
    };
  }, [image]);

  const defaultGradient = "linear-gradient(135deg, #0a1930 0%, #020710 85%)";
  const activeGradient = heroBackground || defaultGradient;
  const heroBackgroundStyle =
    heroLoaded && image
      ? `url(${image}), ${activeGradient}`
      : activeGradient;

  const buildModalPayload = (feature) => {
    const rawHtml = feature.modalText || feature.description || "";
    const sanitizedHtml = removeImageTags(rawHtml);
    const extractedImage = extractFirstImageSrc(rawHtml);
    const dynamicImage =
      extractedImage || feature.modalImage || DEFAULT_CARD_IMAGE;

    return {
      title: feature.title,
      text: sanitizedHtml || "Texte non disponible.",
      image: dynamicImage,
    };
  };

  const getPreviewText = (feature) => {
    const rawPreview = feature.description || feature.modalText || "";
    const textOnly = stripHtml(removeImageTags(rawPreview));
    if (!textOnly) return "Contenu indisponible.";
    return textOnly.length > 140 ? `${textOnly.substring(0, 140)}…` : textOnly;
  };

  const handleCardClick = (feature) => {
    setModalContent(buildModalPayload(feature));
    setLoadingImage(true);
    setOpenModal(true);
  };

  const handleCloseModal = () => {
    setOpenModal(false);
  };

  return (
    <Box
      sx={{
        backgroundColor: "#f5f5f5",
        color: "#333",
        fontFamily: "Arial, sans-serif",
      }}
    >
      {/* ✅ SEO META TAGS */}
      <Helmet>
        <title>{seo?.metaTitle || title}</title>
        <meta name="description" content={seo?.metaDescription || ""} />
        <meta name="keywords" content={seo?.keywords || ""} />
        <meta property="og:title" content={seo?.metaTitle || title} />
        <meta property="og:description" content={seo?.metaDescription || ""} />
        <meta property="og:image" content={seo?.ogImage || image} />
        <meta property="og:type" content="website" />
        <meta name="twitter:title" content={seo?.metaTitle || title} />
        <meta name="twitter:description" content={seo?.metaDescription || ""} />
        <meta name="twitter:image" content={seo?.ogImage || image} />
        <meta name="twitter:card" content="summary_large_image" />
      </Helmet>

      {/* Section Hero */}
      <Box
        sx={{
          mt: 5,
          backgroundImage: heroBackgroundStyle,
          backgroundSize: heroLoaded && image ? "cover, cover" : "cover",
          backgroundPosition: heroLoaded && image ? "center, center" : "center",
          minHeight: "70vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          color: "black",
          padding: "20px",
          backgroundColor: heroLoaded ? undefined : "#020712",
          transition: "background-image 0.8s ease, opacity 0.4s ease",
        }}
      >
        <Box
          sx={{
            maxWidth: "800px",
            backgroundColor: "rgba(255, 255, 255, 0.39)",
            p: 5,
            borderRadius: 5,
          }}
        >
          <Typography
            variant="h1"
            sx={{
              fontWeight: "bold",
              mb: 2,
              fontSize: {
                xs: "2rem",
                md: "3rem",
                lg: "3rem",
                whiteSpace: "pre-line",
              },
            }}
          >
            {title}
          </Typography>
          <Typography variant="body1" component="div" sx={{ mb: 4 }}>
            {renderRichText(subtitle) ?? subtitle ?? ""}
          </Typography>
          <Button
            href={ctaLink}
            variant="contained"
            color="secondary"
            size="large"
            sx={{
              textTransform: "none",
              fontWeight: "bold",
              backgroundColor: "#0e467f",
              "&:hover": { backgroundColor: "#00bcd4" },
            }}
          >
            {ctaText}
          </Button>
        </Box>
      </Box>

      {/* Section numero 1 */}
      <Box sx={{ fontWeight: "5", textAlign: "center" }}>
        <Typography
          variant="h2"
          sx={{
            fontWeight: "bold",
            mb: 7,
            fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
            whiteSpace: "pre-line",
          }}
        >
          {interestTitle}
        </Typography>
        {descriptionIsElement ? (
          <Typography variant="body1" component="div">
            {renderRichText(description)}
          </Typography>
        ) : (
          <Box
            sx={{
              display: "flex",
              flexDirection: { xs: "column", md: "row" },
              gap: 4,
              alignItems: "center",
              justifyContent: "center",
              textAlign: { xs: "center", md: "left" },
            }}
          >
            {descriptionMedia.media?.src && (
              <Box
                component="img"
                src={descriptionMedia.media.src}
                alt={descriptionMedia.media.alt || "Illustration"}
                sx={{
                  width: { xs: "100%", md: "42%" },
                  borderRadius: 4,
                  objectFit: "cover",
                  boxShadow: "0 25px 45px rgba(0,0,0,0.25)",
                  mb: { xs: 2, md: 5 },
                  mx: { xs: "auto", md: 0 },
                  marginLeft: { xs: 2, md: 6 } ,
                }}
              />
            )}
            <Typography
              variant="body1"
              component="div"
              sx={{
                flex: 1,
                textAlign: { xs: "center", md: "left" },
                "& p": {
                  margin: "0 auto",
                  textAlign: "left",
                  lineHeight: 1.65,
                  maxWidth: 760,
                },
                "& p + p": {
                  marginTop: 1.2,
                },
              }}
              dangerouslySetInnerHTML={{ __html: descriptionMedia.html || "" }}
            />
          </Box>
        )}
      </Box>

      {/* Section numero 2 */}
      <Box sx={{ backgroundColor: "#ffffff", padding: "40px 20px" }}>
        <Typography
          variant="h2"
          sx={{
            fontWeight: "bold",
            textAlign: "center",
            mb: 4,
            fontSize: { xs: "2rem", md: "3rem", lg: "2rem" },
          }}
        >
          {desirTitle}
        </Typography>

        <Grid container spacing={4} justifyContent="center">
          {features.map((feature, index) => (
            <Grid item xs={12} md={4} key={index}>
              <Card
                onClick={() => handleCardClick(feature)}
                sx={{
                  cursor: "pointer",
                  textAlign: "center",
                  padding: "20px",
                  backgroundColor: "#f9f9f9",
                  transition: "0.3s",
                  "&:hover": { transform: "scale(1.05)", boxShadow: 5 },
                }}
              >
                <CardContent>
                  <Typography
                    variant="h3"
                    sx={{
                      fontWeight: "bold",
                      mb: 2,
                      fontSize: 26,
                      whiteSpace: "pre-line",
                    }}
                  >
                    {feature.title}
                  </Typography>
                    <Typography variant="body2" sx={{ color: "#555" }}>
                      {getPreviewText(feature)}
                    </Typography>
                  </CardContent>
                </Card>
              </Grid>
            ))}
        </Grid>
      </Box>

      {/* Modal */}
      <Modal
        open={openModal}
        onClose={handleCloseModal}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{ timeout: 500 }}
      >
        <Fade in={openModal}>
          <Box
            sx={{
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              width: "90%",
              maxWidth: "600px",
              p: 4,
              textAlign: "center",
              background: "white",
              borderRadius: 2,
              boxShadow: 3,
            }}
          >
            {loadingImage && <CircularProgress sx={{ mb: 2 }} />}
            <img
              src={modalContent.image}
              alt={modalContent.title}
              style={{
                width: "100%",
                borderRadius: "8px",
                display: loadingImage ? "none" : "block",
              }}
              onLoad={() => setLoadingImage(false)}
            />
            <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2 }}>
              {modalContent.title}
            </Typography>
            <Typography variant="body1" sx={{ mb: 4 }} dangerouslySetInnerHTML={{ __html: modalContent.text }} >
              
            </Typography>
            <Button
              onClick={handleCloseModal}
              variant="contained"
              color="secondary"
            >
              Retour
            </Button>
          </Box>
        </Fade>
      </Modal>
      {/* Carousel Section */}
      {carouselItems && carouselItems.length > 0 && (
        <Box
          sx={{
            padding: "40px 20px",
            textAlign: "center",
            backgroundColor: "#f9f9f9",
          }}
        >
          <Typography
            variant="h2"
            sx={{
              marginBottom: 4,
              fontSize: { xs: "2rem", md: "3rem", lg: "3rem" }, // Responsive
            }}
          >
            Découvrez nos réalisations
          </Typography>

          <Swiper
            modules={[Navigation, Pagination, Autoplay]}
            spaceBetween={20}
            slidesPerView={1}
            navigation
            pagination={{ clickable: true }}
            autoplay={{ delay: 3000 }}
            loop
          >
            {carouselItems.map((item, index) => (
              <SwiperSlide key={index}>
                <Card
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    padding: "20px",
                    boxShadow: 3,
                  }}
                >
                  <img
                    src={item.image}
                    alt={item.title}
                    style={{
                      width: "40%",
                      height: "auto",
                      objectFit: "cover",
                      borderRadius: "8px",
                      marginRight: "20px",
                    }}
                  />
                  <CardContent>
                    <Typography
                      variant="h3"
                      sx={{
                        fontWeight: "bold",
                        fontSize: { xs: "1.2rem", md: "2rem", lg: "2.5rem" }, // Responsive
                      }}
                    >
                      {item.title}
                    </Typography>
                    <Typography variant="body2">{item.description}</Typography>
                  </CardContent>
                </Card>
              </SwiperSlide>
            ))}
          </Swiper>
        </Box>
      )}
    </Box>
  );
};

// ✅ Définition des types des props avec PropTypes
ServicePageTemplate.propTypes = {
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string.isRequired,
  interestTitle: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  desirTitle: PropTypes.string.isRequired,
  features: PropTypes.arrayOf(
    PropTypes.shape({
      title: PropTypes.string.isRequired,
      description: PropTypes.string.isRequired,
      modalText: PropTypes.string,
      modalImage: PropTypes.string,
    })
  ).isRequired,
  image: PropTypes.string,
  ctaText: PropTypes.string.isRequired,
  ctaLink: PropTypes.string.isRequired,
  carouselItems: PropTypes.arrayOf(
    PropTypes.shape({
      title: PropTypes.string.isRequired,
      description: PropTypes.string.isRequired,
      image: PropTypes.string.isRequired,
    })
  ),
  heroBackground: PropTypes.string,
  seo: PropTypes.object, // ✅ Ajout du SEO en option
};

// ✅ Valeurs par défaut
ServicePageTemplate.defaultProps = {
  carouselItems: [],
  heroBackground: "linear-gradient(135deg, #0a1930 0%, #020710 85%)",
  seo: {}, // ✅ SEO par défaut vide
};

export default ServicePageTemplate;