"use client";

import Image from "next/image";
import { memo, useEffect, useRef, useState } from "react";
import {
  faqListAssets,
  faqListSections,
  type FaqListItem,
} from "@/data/faqList";

const AOS_DURATION = 900;
const AOS_DELAY = 300;
const faqAccordionRootId = "accordionExample";
const accordionItems = faqListSections[0]?.items ?? [];

function initialOpenId() {
  const withDefault = accordionItems.find((i) => i.defaultOpen);
  if (withDefault) return withDefault.id;
  return accordionItems[0]?.id ?? null;
}

/**
 * Collapse panel is memoized with only static `item` props so parent re-renders
 * (when another row becomes `active`) do not reset `className` and break
 * Bootstrap’s `collapsing` / height transition.
 */
const AccordionCollapsePanel = memo(function AccordionCollapsePanel({
  item,
  parentSelector,
}: {
  item: FaqListItem;
  parentSelector: string;
}) {
  const collapseId = `collapse-${item.id}`;
  const headingId = `heading-${item.id}`;
  const isInitiallyOpen = Boolean(item.defaultOpen);

  return (
    <div
      id={collapseId}
      className={
        isInitiallyOpen
          ? "accordion-collapse collapse show"
          : "accordion-collapse collapse"
      }
      role="region"
      aria-labelledby={headingId}
      data-bs-parent={parentSelector}
    >
      <div className="accordion-body">{item.answer}</div>
    </div>
  );
});

const Accordion = () => {
  const accordionRef = useRef<HTMLDivElement>(null);
  const [activeId, setActiveId] = useState<string | null>(initialOpenId);
  const parentSelector = `#${faqAccordionRootId}`;

  useEffect(() => {
    const root = accordionRef.current;
    if (!root) return;

    const cleanups: Array<() => void> = [];

    for (const item of accordionItems) {
      const el = root.querySelector(`#collapse-${item.id}`);
      if (!el) continue;

      const id = item.id;
      const onShow = () => setActiveId(id);
      const onHidden = () => {
        setActiveId((prev) => (prev === id ? null : prev));
      };

      el.addEventListener("show.bs.collapse", onShow);
      el.addEventListener("hidden.bs.collapse", onHidden);
      cleanups.push(() => {
        el.removeEventListener("show.bs.collapse", onShow);
        el.removeEventListener("hidden.bs.collapse", onHidden);
      });
    }

    return () => cleanups.forEach((fn) => fn());
  }, []);

  return (
    <div
      className="faq-box v2"
      data-aos="fade-right"
      data-aos-duration={AOS_DURATION}
      data-aos-delay={AOS_DELAY}
    >
      <div
        ref={accordionRef}
        className="accordion vs-accordion"
        id={faqAccordionRootId}
      >
        {accordionItems.map((item) => {
          const headingId = `heading-${item.id}`;
          const collapseId = `collapse-${item.id}`;
          const isActive = activeId === item.id;

          return (
            <div
              key={item.id}
              className={isActive ? "accordion-item active" : "accordion-item"}
            >
              <h2 className="accordion-header" id={headingId}>
                <button
                  className={
                    isActive ? "accordion-button" : "accordion-button collapsed"
                  }
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target={`#${collapseId}`}
                  aria-expanded={isActive}
                  aria-controls={collapseId}
                >
                  <span>{item.question}</span>
                  <span className="arrow-btn">
                    <Image
                      src={faqListAssets.icon}
                      alt={faqListAssets.iconAlt}
                      width={24}
                      height={24}
                    />
                  </span>
                </button>
              </h2>
              <AccordionCollapsePanel
                item={item}
                parentSelector={parentSelector}
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Accordion;