"use client";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Accordion, Container } from "react-bootstrap";
import styles from "@/styles/Component/Faq/Faq.module.scss";
import { useRequest } from "@/components/App/request";
import { SuspenseLoader } from "@/components/App/Loader";

interface FaqItem {
  id: number;
  faq_category: number | null;
  question: string | null;
  answer: string | null;
  status: string | null;
  created_at?: string | null;
  updated_at?: string | null;
  deleted_at?: string | null;
}

type FaqCategory = {
  [category: string]: FaqItem[];
};
function Faq() {
  const [activeKey, setActiveKey] = useState("0");
  const { loading, request } = useRequest();
  const [data, setData] = useState<FaqCategory[]>([]);

  const fetchDetail = useCallback(async () => {
    try {
      const res = await request("FAQS");
      setData(res.data as FaqCategory[]);
    } catch (err) {
      console.error("Error fetching detail", err);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    fetchDetail();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (data.length > 0) {
      const firstCategory = data[0];
      const firstCategoryKey = Object.keys(firstCategory)[0];
      const firstFaqs = firstCategory[firstCategoryKey];
      if (Array.isArray(firstFaqs) && firstFaqs.length > 0) {
        setActiveKey("cat0_item0");
      }
    }
  }, [data]);

  const isLoading = useMemo(() => loading.FAQS_LOADING, [loading]);

  if (isLoading) return <SuspenseLoader />;
  return (
    <div className={styles.FaqBlock}>
      <Container className="bigContainer">
        <div className="cardBlock">
          <h1>Frequently Asked Questions</h1>
          <div className={`${styles.FaqBlockCard} ${styles.BlueBorder}`}>
            {data.map((categoryObj, catIndex) => {
              const categoryTitle = Object.keys(categoryObj)[0];
              const faqs = categoryObj[categoryTitle];

              return (
                <div key={catIndex}>
                  <h4 style={{ textAlign: "center", margin: "40px" ,fontWeight: "800" }}>
                    {categoryTitle}
                  </h4>
                  <Accordion
                    activeKey={activeKey}
                    onSelect={key => {
                      if (typeof key === "string") setActiveKey(key);
                    }}
                    className="AccordionCustom FaqBlueBorder"
                  >
                    {Array.isArray(faqs) && faqs.length > 0
                      ? faqs.map((faq, faqIndex) => {
                          const eventKey = `cat${catIndex}_item${faqIndex}`;
                          return (
                            <Accordion.Item
                              eventKey={eventKey}
                              key={faq.id || eventKey}
                              className={activeKey === eventKey ? "active" : ""}
                            >
                              <Accordion.Header>
                                {faq.question || "No question available"}
                              </Accordion.Header>
                              <Accordion.Body>
                                {faq.answer || "No answer available"}
                              </Accordion.Body>
                            </Accordion.Item>
                          );
                        })
                      : "No FAQ available"}
                  </Accordion>
                </div>
              );
            })}
          </div>
        </div>
      </Container>
    </div>
  );
}

export default Faq;