"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_TITLE_DELAY = 400;
const AOS_CONTENT_DELAY = 500;

type ActiveBySection = Record<string, string | null>;

const getDefaultItemId = (items: FaqListItem[]) =>
  items.find((item) => item.defaultOpen)?.id ?? items[0]?.id ?? null;

const initialActiveBySection = (): ActiveBySection =>
  faqListSections.reduce<ActiveBySection>((acc, section) => {
    acc[section.id] = getDefaultItemId(section.items);
    return acc;
  }, {});

const AccordionCollapsePanel = memo(function AccordionCollapsePanel({
  sectionId,
  item,
  parentSelector,
  isInitiallyOpen,
}: {
  sectionId: string;
  item: FaqListItem;
  parentSelector: string;
  isInitiallyOpen: boolean;
}) {
  const collapseId = `collapse-${sectionId}-${item.id}`;
  const headingId = `heading-${sectionId}-${item.id}`;

  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 FaqList = () => {
  const accordionRefs = useRef<Record<string, HTMLDivElement | null>>({});
  const [activeBySection, setActiveBySection] = useState<ActiveBySection>(
    initialActiveBySection,
  );

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

    for (const section of faqListSections) {
      const root = accordionRefs.current[section.id];
      if (!root) continue;

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

        const onShow = () => {
          setActiveBySection((prev) => ({ ...prev, [section.id]: item.id }));
        };

        const onHidden = () => {
          setActiveBySection((prev) =>
            prev[section.id] === item.id
              ? { ...prev, [section.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-info">
      {faqListSections.map((section, sectionIndex) => {
        const accordionId = `accordion-${section.id}`;
        const parentSelector = `#${accordionId}`;
        const defaultItemId = getDefaultItemId(section.items);
        const boxClassName =
          sectionIndex === faqListSections.length - 1
            ? "faq-box mb-0"
            : "faq-box";

        return (
          <div key={section.id} className={boxClassName}>
            {sectionIndex === 0 ? (
              <h2
                className="faq-title"
                data-aos="fade-up"
                data-aos-duration={AOS_DURATION}
                data-aos-delay={AOS_TITLE_DELAY}
              >
                {section.title}
              </h2>
            ) : (
              <h3
                className="faq-title"
                data-aos="fade-up"
                data-aos-duration={AOS_DURATION}
                data-aos-delay={AOS_TITLE_DELAY}
              >
                {section.title}
              </h3>
            )}

            <div
              ref={(el) => {
                accordionRefs.current[section.id] = el;
              }}
              className="accordion vs-accordion"
              id={accordionId}
              data-aos="fade-up"
              data-aos-duration={AOS_DURATION}
              data-aos-delay={AOS_CONTENT_DELAY}
            >
              {section.items.map((item) => {
                const headingId = `heading-${section.id}-${item.id}`;
                const collapseId = `collapse-${section.id}-${item.id}`;
                const isInitiallyOpen = item.id === defaultItemId;
                const isActive = activeBySection[section.id] === 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
                      sectionId={section.id}
                      item={item}
                      parentSelector={parentSelector}
                      isInitiallyOpen={isInitiallyOpen}
                    />
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default FaqList;