"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import {
  singleServiceFaqItems,
  singleServiceFaqSection,
} from "@/data/singleService";

export default function BenefitsFaqSection() {
  const [activeFaqId, setActiveFaqId] = useState<number | null>(
    singleServiceFaqItems[0]?.id ?? null
  );

  useEffect(() => {
    const cleanupFns: Array<() => void> = [];

    singleServiceFaqItems.forEach((faq) => {
      const collapseEl = document.getElementById(`collapse${faq.id}`);
      if (!collapseEl) return;

      const handleShown = () => setActiveFaqId(faq.id);
      const handleHidden = () => {
        setActiveFaqId((prevId) => (prevId === faq.id ? null : prevId));
      };

      collapseEl.addEventListener("shown.bs.collapse", handleShown);
      collapseEl.addEventListener("hidden.bs.collapse", handleHidden);

      cleanupFns.push(() => {
        collapseEl.removeEventListener("shown.bs.collapse", handleShown);
        collapseEl.removeEventListener("hidden.bs.collapse", handleHidden);
      });
    });

    return () => {
      cleanupFns.forEach((cleanup) => cleanup());
    };
  }, []);

  return (
    <section className="funfact-sec2 space">
      <div className="carousel-container">
        <div className="sec-title white">
          <span
            className="sub-title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            {singleServiceFaqSection.subtitle}
          </span>
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={400}
          >
            {singleServiceFaqSection.title}
          </h2>
        </div>
        <div className="faq-box2">
          <div
            className="accordion vs-accordion"
            id="accordionExample"
            data-aos="zoom-in"
            data-aos-duration={900}
            data-aos-delay={500}
          >
            {singleServiceFaqItems.map((faq, index) => {
              const headingId = `heading${faq.id}`;
              const collapseId = `collapse${faq.id}`;
              const isOpen = activeFaqId === faq.id;

              return (
                <div
                  key={faq.id}
                  className={`accordion-item ${isOpen ? "active" : ""} ${index === singleServiceFaqItems.length - 1 ? "mb-0" : ""}`.trim()}
                >
                  <h2 className="accordion-header" id={headingId}>
                    <button
                      className={`accordion-button ${isOpen ? "" : "collapsed"}`.trim()}
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target={`#${collapseId}`}
                      aria-expanded={isOpen}
                      aria-controls={collapseId}
                    >
                      <span>{`${String(faq.id).padStart(2, "0")}.${faq.title}`}</span>
                      <span className="arrow-btn">
                        <Image
                          src="/assets/images/icon/faq-icon2.svg"
                          alt="FAQ icon"
                          width={20}
                          height={20}
                        />
                      </span>
                    </button>
                  </h2>
                  <div
                    id={collapseId}
                    className={`accordion-collapse collapse ${isOpen ? "show" : ""}`.trim()}
                    role="region"
                    aria-labelledby={headingId}
                    data-bs-parent="#accordionExample"
                  >
                    <div className="accordion-body">{faq.content}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}