/* global React */
const { useState, useEffect, useRef } = React;

function ScrollExpandHero({
  mediaType = "video",
  mediaSrc,
  posterSrc,
  bgImageSrc,
  title,
  date,
  scrollToExpand,
  textBlend,
  children,
}) {
  const [scrollProgress, setScrollProgress] = useState(0);
  const [showContent, setShowContent] = useState(false);
  const [mediaFullyExpanded, setMediaFullyExpanded] = useState(false);
  const [touchStartY, setTouchStartY] = useState(0);
  const [isMobile, setIsMobile] = useState(false);
  const videoRef = useRef(null);

  useEffect(() => {
    setScrollProgress(0);
    setShowContent(false);
    setMediaFullyExpanded(false);
  }, [mediaType, mediaSrc]);

  useEffect(() => {
    // Sur mobile : contenu visible directement, aucun listener
    if (isMobile) {
      setShowContent(true);
      setMediaFullyExpanded(true);
      setScrollProgress(1);
      return;
    }

    const handleWheel = (e) => {
      if (mediaFullyExpanded) return;
      const scrollDelta = e.deltaY * 0.0018;
      setScrollProgress(prev => {
        const next = Math.min(Math.max(prev + scrollDelta, 0), 1);
        if (next >= 1) { setMediaFullyExpanded(true); setShowContent(true); }
        return next;
      });
    };

    const handleTouchStart = (e) => { setTouchStartY(e.touches[0].clientY); };

    const handleTouchMove = (e) => {
      if (mediaFullyExpanded || !touchStartY) return;
      const touchY = e.touches[0].clientY;
      const delta = (touchStartY - touchY) * 0.006;
      setScrollProgress(prev => {
        const next = Math.min(Math.max(prev + delta, 0), 1);
        if (next >= 1) { setMediaFullyExpanded(true); setShowContent(true); }
        return next;
      });
      setTouchStartY(touchY);
    };

    const handleTouchEnd = () => setTouchStartY(0);

    // passive: true = ne bloque pas le scroll natif du navigateur
    window.addEventListener("wheel", handleWheel, { passive: true });
    window.addEventListener("touchstart", handleTouchStart, { passive: true });
    window.addEventListener("touchmove", handleTouchMove, { passive: true });
    window.addEventListener("touchend", handleTouchEnd, { passive: true });

    return () => {
      window.removeEventListener("wheel", handleWheel);
      window.removeEventListener("touchstart", handleTouchStart);
      window.removeEventListener("touchmove", handleTouchMove);
      window.removeEventListener("touchend", handleTouchEnd);
    };
  }, [isMobile, mediaFullyExpanded, touchStartY, scrollProgress]);

  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 768);
    check();
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
  }, []);

  // Force autoplay on mobile (iOS Safari requires explicit .play() call)
  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.muted = true;
      const playPromise = videoRef.current.play();
      if (playPromise !== undefined) {
        playPromise.catch(() => {
          // Autoplay blocked — try again on first touch
          const tryPlay = () => {
            videoRef.current && videoRef.current.play().catch(() => {});
            document.removeEventListener("touchstart", tryPlay);
            document.removeEventListener("click", tryPlay);
          };
          document.addEventListener("touchstart", tryPlay, { once: true });
          document.addEventListener("click", tryPlay, { once: true });
        });
      }
    }
  }, [mediaSrc]);

  const mediaWidth = 300 + scrollProgress * (isMobile ? 650 : 1250);
  const mediaHeight = 400 + scrollProgress * (isMobile ? 200 : 400);
  const textTranslateX = scrollProgress * (isMobile ? 180 : 150);

  const firstWord = title ? title.split(" ")[0] : "";
  const restOfTitle = title ? title.split(" ").slice(1).join(" ") : "";

  const isYoutube =
    mediaType === "video" && mediaSrc && mediaSrc.includes("youtube.com");

  const ytSrc = isYoutube
    ? mediaSrc.includes("embed")
      ? mediaSrc +
        (mediaSrc.includes("?") ? "&" : "?") +
        "autoplay=1&mute=1&loop=1&controls=0&showinfo=0&rel=0&disablekb=1&modestbranding=1"
      : mediaSrc.replace("watch?v=", "embed/") +
        "?autoplay=1&mute=1&loop=1&controls=0&showinfo=0&rel=0&disablekb=1&modestbranding=1&playlist=" +
        mediaSrc.split("v=")[1]
    : null;

  return (
    <div className="se-root">
      <section className="se-section">
        <div className="se-stage-wrap">
          <div className="se-bg" style={{ opacity: 1 - scrollProgress }}>
            <img src={bgImageSrc} alt="" className="se-bg-img" />
            <div className="se-bg-overlay" />
          </div>

          <div className="se-container">
            <div className="se-stage">
              <div
                className="se-media-card"
                style={{
                  width: `${mediaWidth}px`,
                  height: `${mediaHeight}px`,
                }}
              >
                {mediaType === "video" ? (
                  isYoutube ? (
                    <div className="se-media-inner">
                      <iframe
                        width="100%"
                        height="100%"
                        src={ytSrc}
                        className="se-media-frame"
                        frameBorder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowFullScreen
                      />
                      <div className="se-media-block" />
                      <div
                        className="se-media-tint"
                        style={{ opacity: 0.15 - scrollProgress * 0.12 }}
                      />
                    </div>
                  ) : (
                    <div className="se-media-inner">
                      <video
                        ref={videoRef}
                        poster={posterSrc}
                        autoPlay
                        muted
                        loop
                        playsInline
                        preload="auto"
                        className="se-media-frame"
                        controls={false}
                        disablePictureInPicture
                        disableRemotePlayback
                        webkit-playsinline="true"
                        x5-playsinline="true"
                        style={{ willChange: "transform" }}
                      >
                        <source src={mediaSrc} type="video/mp4" />
                      </video>
                      <div className="se-media-block" />
                      <div
                        className="se-media-tint"
                        style={{ opacity: 0.15 - scrollProgress * 0.12 }}
                      />
                    </div>
                  )
                ) : (
                  <div className="se-media-inner">
                    <img
                      src={mediaSrc}
                      alt={title || "Media"}
                      className="se-media-frame"
                    />
                    <div
                      className="se-media-tint"
                      style={{ opacity: 0.15 - scrollProgress * 0.12 }}
                    />
                  </div>
                )}

                <div className="se-meta">
                  {date && (
                    <p
                      className="se-date"
                      style={{ transform: `translateX(-${textTranslateX}vw)` }}
                    >
                      {date}
                    </p>
                  )}
                  {scrollToExpand && (
                    <p
                      className="se-scrollhint"
                      style={{ transform: `translateX(${textTranslateX}vw)` }}
                    >
                      {scrollToExpand}
                    </p>
                  )}
                </div>
              </div>

              {title && (
                <div className={`se-titles ${textBlend ? "se-blend" : ""}`}>
                  <h2
                    className="se-title-word"
                    style={{ transform: `translateX(-${textTranslateX}vw)` }}
                  >
                    {firstWord}
                  </h2>
                  <h2
                    className="se-title-word"
                    style={{ transform: `translateX(${textTranslateX}vw)` }}
                  >
                    {restOfTitle}
                  </h2>
                </div>
              )}
            </div>

            <section
              className="se-children"
              style={{
                opacity: showContent ? 1 : 0,
                transition: "opacity 0.7s ease",
                pointerEvents: showContent ? "auto" : "none",
              }}
            >
              {children}
            </section>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ScrollExpandHero });