interface FaqCategory {
  id: number;
  name: string;
  status: string;
  created_at: string;
  updated_at: string;
}

interface FaqProps {
  id: number;
  name: string; // question
  answer: string; // HTML string
  faq_category: FaqCategory;
}

const API_BASE_URL = process.env.API_BASE_URL;

async function getFaqList(): Promise<FaqProps[]> {
  try {
    const response = await fetch(`${API_BASE_URL}/faq`, {
      method: "GET",
      headers: { "Content-Type": "application/json" },
      next: { revalidate: 300 }, // Cache for 5 minutes
    });

    if (!response.ok) {
      throw new Error(`Error: ${response.status} - ${response.statusText}`);
    }

    const data = await response.json();

    if (Array.isArray(data?.data?.faq)) {
      return data.data.faq;
    } else {
      console.warn("FAQ data is not an array:", data?.data?.faq);
      return [];
    }
  } catch (error) {
    console.error("Error fetching FAQ list:", error);
    return [];
  }
}

export default async function GeneralFaqs() {
  const faqs = await getFaqList();

  // Group FAQs by category
  const groupedFaqs: Record<string, FaqProps[]> = {};
  faqs.forEach((faq) => {
    const categoryName = faq.faq_category?.name || "Other";
    if (!groupedFaqs[categoryName]) groupedFaqs[categoryName] = [];
    groupedFaqs[categoryName].push(faq);
  });

  return (
    <div className="mob-noise flex flex-col py-20">
      <div className="wrapper">
        <div className="mx-auto flex w-full flex-col md:w-2/3">
          {Object.entries(groupedFaqs).map(([categoryName, faqs]) => (
            <>
              <div className="hairline h-1.5 w-full bg-gray-950"></div>
              <div
                key={categoryName}
                className="grid grid-cols-1 gap-4 md:gap-10 md:grid-cols-5 py-4 mb-12"
              >
                <div className="col-span-2">
                  <h3 className="my-4 uppercase">{categoryName}</h3>
                </div>
                <div className="col-span-3">
                  <ul className="">
                    {faqs.map((faq) => (
                      <li key={faq.id} className="mb-6 py-4">
                        <p className="font-bogart text-lg">{faq.name}</p>
                        <div
                          className="text-xs"
                          dangerouslySetInnerHTML={{ __html: faq.answer }}
                        />
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </>
          ))}

          {/* Fallback if no FAQs */}
          {faqs.length === 0 && (
            <p className="text-gray-500">No FAQs available at the moment.</p>
          )}
        </div>
      </div>
    </div>
  );
}