"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import dynamic from "next/dynamic";
import Link from "next/link";
import { createPortal } from "react-dom";
import { faqIntroVideoDemoUrl } from "@/data/faqList";

const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });

const FaqInfo = () => {
  const contentRef = useRef<HTMLDivElement | null>(null);
  const [open, setOpen] = useState(false);
  const [stickyClass, setStickyClass] = useState("");
  const closeModal = () => setOpen(false);

  useEffect(() => {
    const updateStickyClass = () => {
      const contentEl = contentRef.current;
      if (!contentEl) return;

      const sectionEl = contentEl.closest(".faq-sec2") as HTMLElement | null;
      if (!sectionEl) {
        setStickyClass("");
        return;
      }

      const sectionTop = sectionEl.getBoundingClientRect().top + window.scrollY;
      const sectionHeight = sectionEl.offsetHeight;
      const contentHeight = contentEl.offsetHeight;
      const scrollY = window.scrollY;
      const start = sectionTop - 120;
      const end = sectionTop + sectionHeight - contentHeight - 120;

      if (scrollY >= start && scrollY <= end) {
        setStickyClass("is-fixed");
      } else if (scrollY > end) {
        setStickyClass("is-absolute");
      } else {
        setStickyClass("");
      }
    };

    updateStickyClass();
    window.addEventListener("scroll", updateStickyClass, { passive: true });
    window.addEventListener("resize", updateStickyClass);

    return () => {
      window.removeEventListener("scroll", updateStickyClass);
      window.removeEventListener("resize", updateStickyClass);
    };
  }, []);

  return (
    <div ref={contentRef} className={`faq-content ${stickyClass}`.trim()}>
      <div data-aos="fade-right" data-aos-duration={900} data-aos-delay={300}>
        <h1 className="title">Have Any Questions on your minds!</h1>
        <p>
          We know choosing the right software can raise a lot of questions.
          That&apos;s why we&apos;ve put together answers to the most common
          ones
        </p>

        <Link href="/contact-us" className="btn-style1 v2">
          Get A Quote
          <span>
            <Image
              src="/assets/images/icon/arrow.svg"
              alt="Arrow Icon"
              width={14}
              height={14}
            />
          </span>
        </Link>

        <div className="video-box">
          <Image
            src="/assets/images/event/video-box.png"
            alt="Video preview"
            width={640}
            height={360}
          />
          <button
            type="button"
            className="video-trigger"
            onClick={() => setOpen(true)}
            aria-label="Play video"
          >
            ▶
          </button>
        </div>

        {typeof document !== "undefined" &&
          open &&
          createPortal(
            <div
              role="dialog"
              aria-modal="true"
              className="video-modal-overlay"
              onClick={closeModal}
            >
              <div
                className="video-modal-content"
                onClick={(e) => e.stopPropagation()}
              >
                <button
                  type="button"
                  className="video-modal-close"
                  onClick={closeModal}
                  aria-label="Close video"
                >
                  ×
                </button>
                <ReactPlayer
                  src={faqIntroVideoDemoUrl}
                  playing
                  controls
                  width="100%"
                  height="100%"
                />
              </div>
            </div>,
            document.body,
          )}
      </div>
    </div>
  );
};

export default FaqInfo;