/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState } from "react";
import UserDashboardLayout from "@/layouts/user_dashboard_layout";
import styles from "./dash-faqs.module.scss";
import PageIntro from "@/components/dashboard/PageIntro";
import { FiChevronDown, FiChevronUp, FiSearch } from "react-icons/fi";

interface Props {
  faqs: any[];
}

const FaqsPage = ({ faqs }: Props) => {
  const [openIndex, setOpenIndex] = useState<number | null>(0); // first FAQ auto open
  const [searchTerm, setSearchTerm] = useState("");

  const toggleFaq = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  const filteredFaqs = faqs?.filter((faq) =>
    faq.question.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className={styles["faqsPage"]}>
      <PageIntro
        title="Frequently Asked Questions"
        description="Find answers to the most common questions our users ask. If you can't find an answer, feel free to contact support."
      />

      {/* Search bar */}
      <div className={styles["faqsPage__search"]}>
        <FiSearch size={18} />
        <input
          type="text"
          placeholder="Search FAQs..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>

      <div className={styles["faqsPage__list"]}>
        {filteredFaqs?.length > 0 ? (
          filteredFaqs.map((faq: any, index: number) => (
            <div
              key={faq.id}
              className={`${styles["faqsPage__item"]} ${
                openIndex === index ? styles["open"] : ""
              }`}
            >
              <button
                className={styles["faqsPage__question"]}
                onClick={() => toggleFaq(index)}
              >
                <span>{faq.question}</span>
                {openIndex === index ? (
                  <FiChevronUp size={20} />
                ) : (
                  <FiChevronDown size={20} />
                )}
              </button>
              <div className={styles["faqsPage__answer"]}>
                <p>{faq.answer}</p>
              </div>
            </div>
          ))
        ) : (
          <p className={styles["faqsPage__noData"]}>No FAQs found.</p>
        )}
      </div>
    </div>
  );
};

FaqsPage.layout = (page: any) => (
  <UserDashboardLayout title="FAQs">{page}</UserDashboardLayout>
);

export default FaqsPage;