"use client";

import React, { useState } from "react";
import { FaChevronDown } from "react-icons/fa";
import { useTranslations } from "next-intl";
import BreadCrumb from "@/components/Breadcrumb";

export default function Faq() {
  const t = useTranslations();
  const [openFeeIndex, setOpenFeeIndex] = useState<number | null>(null);
  const [openRefundIndex, setOpenRefundIndex] = useState<number | null>(null);
  const [openSubscriptionIndex, setOpenSubscriptionIndex] = useState<
    number | null
  >(null);
  const [openMembersIndex, setOpenMembersIndex] = useState<number | null>(null);

  const toggleIndex = (
    section: "fee" | "refund" | "subscription" | "members",
    index: number
  ) => {
    if (section === "fee") {
      setOpenFeeIndex((prev) => (prev === index ? null : index));
    } else if (section === "refund") {
      setOpenRefundIndex((prev) => (prev === index ? null : index));
    } else if (section === "subscription") {
      setOpenSubscriptionIndex((prev) => (prev === index ? null : index));
    } else if (section === "members") {
      setOpenMembersIndex((prev) => (prev === index ? null : index));
    }
  };

  // Replace hardcoded arrays with translation-based arrays
  const fees = t.raw("faq_page.fees");
  const refund = t.raw("faq_page.refund");
  const members = t.raw("faq_page.members");
  const subscriptions = t.raw("faq_page.subscriptions");

  return (
    <section className="p-6">
      <div className="max-w-w1660 mx-auto relative">
        <BreadCrumb items={[
          { title: t("faq_page.help_center"), href: "/contact" },
          { title: t("faq_page.title"), },
        ]} />
        <div className="pb-10">
          <h1 className="text-xl font-bold mt-5 mb-2 text-neutrals800 max-sm:text-base dark:text-white">
            {t("faq_page.title")}
          </h1>

          {/* Fees */}
          <div className="p-5 border border-neutrals100 rounded-md max-sm:p-4 dark:bg-card dark:border-darkborder">
            <h2 className="text-sm font-semibold text-neutrals800 mb-2.5 dark:text-neutrals300">
              {t("faq_page.fees_title")}
            </h2>
            <div className="border border-neutrals100 rounded dark:border-darkborder">
              {fees.map(
                (faq: { question: string; answer: string }, index: number) => (
                  <div
                    key={index}
                    className="border-b border-neutrals100 last:border-b-0 dark:border-darkborder"
                  >
                    <button
                      className={`w-full text-left p-3 px-2 pr-3 text-sm font-medium flex justify-between items-center transition-colors duration-200 ${openFeeIndex === index
                        ? "text-primary500 dark:text-primary400"
                        : "text-neutrals800 dark:text-neutrals400"
                        }`}
                      onClick={() => toggleIndex("fee", index)}
                    >
                      {faq.question}
                      <FaChevronDown
                        className={`transform transition-transform w-[18px] text-neutrals500 duration-200 dark:text-neutrals400 ${openFeeIndex === index
                          ? "rotate-180 text-primary500"
                          : ""
                          }`}
                      />
                    </button>
                    {openFeeIndex === index && (
                      <div className="pb-4 text-sm px-2 text-neutrals500 whitespace-pre-line dark:text-neutrals400">
                        {faq.answer}
                      </div>
                    )}
                  </div>
                )
              )}
            </div>
          </div>

          {/* Refund */}
          <div className="mt-5 p-5 border border-neutrals100 rounded-md max-sm:p-4 dark:bg-card dark:border-darkborder">
            <h2 className="text-sm font-semibold text-neutrals800 mb-2.5 dark:text-neutrals300">
              {t("faq_page.request_refund")}
            </h2>
            <div className="border border-neutrals100 rounded dark:border-darkborder">
              {refund.map(
                (faq: { question: string; answer: string }, index: number) => (
                  <div
                    key={index}
                    className="border-b border-neutrals100 last:border-b-0 dark:border-darkborder"
                  >
                    <button
                      className={`w-full text-left p-3 px-2 pr-3 text-sm font-medium flex justify-between items-center transition-colors duration-200 ${openRefundIndex === index
                        ? "text-primary500 dark:text-primary400"
                        : "text-neutrals800 dark:text-neutrals400"
                        }`}
                      onClick={() => toggleIndex("refund", index)}
                    >
                      {faq.question}
                      <FaChevronDown
                        className={`transform transition-transform w-[18px] text-neutrals500 duration-200 dark:text-neutrals400 ${openRefundIndex === index
                          ? "rotate-180 text-primary500"
                          : ""
                          }`}
                      />
                    </button>
                    {openRefundIndex === index && (
                      <div className="pb-4 text-sm px-2 text-neutrals500 whitespace-pre-line dark:text-neutrals400">
                        {faq.answer}
                      </div>
                    )}
                  </div>
                )
              )}
            </div>
          </div>

          {/* Subscriptions */}
          <div className="mt-5 p-5 border border-neutrals100 rounded-md max-sm:p-4 dark:bg-card dark:border-darkborder">
            <h2 className="text-sm font-semibold text-neutrals800 mb-2.5 dark:text-neutrals300">
              {t("faq_page.annual_subs")}
            </h2>
            <div className="border border-neutrals100 rounded dark:border-darkborder">
              {subscriptions.map(
                (faq: { question: string; answer: string }, index: number) => (
                  <div
                    key={index}
                    className="border-b border-neutrals100 last:border-b-0 dark:border-darkborder"
                  >
                    <button
                      className={`w-full text-left p-3 px-2 pr-3 text-sm font-medium flex justify-between items-center transition-colors duration-200 ${openSubscriptionIndex === index
                        ? "text-primary500 dark:text-primary400"
                        : "text-neutrals800 dark:text-neutrals400"
                        }`}
                      onClick={() => toggleIndex("subscription", index)}
                    >
                      {faq.question}
                      <FaChevronDown
                        className={`transform transition-transform w-[18px] text-neutrals500 duration-200 dark:text-neutrals400 ${openSubscriptionIndex === index
                          ? "rotate-180 text-primary500"
                          : ""
                          }`}
                      />
                    </button>
                    {openSubscriptionIndex === index && (
                      <div className="pb-4 text-sm px-2 text-neutrals500 whitespace-pre-line dark:text-neutrals400">
                        {faq.answer}
                      </div>
                    )}
                  </div>
                )
              )}
            </div>
          </div>

          {/* Members*/}
          <div className="mt-5 p-5 border border-neutrals100 rounded-md max-sm:p-4 dark:bg-card dark:border-darkborder">
            <h2 className="text-sm font-semibold text-neutrals800 mb-2.5 dark:text-neutrals300">
              {t("faq_page.annual_subs")}
            </h2>
            <div className="border border-neutrals100 rounded dark:border-darkborder">
              {members.map(
                (faq: { question: string; answer: string }, index: number) => (
                  <div
                    key={index}
                    className="border-b border-neutrals100 last:border-b-0 dark:border-darkborder"
                  >
                    <button
                      className={`w-full text-left p-3 px-2 pr-3 text-sm font-medium flex justify-between items-center transition-colors duration-200 ${openMembersIndex === index
                        ? "text-primary500 dark:text-primary400"
                        : "text-neutrals800 dark:text-neutrals400"
                        }`}
                      onClick={() => toggleIndex("members", index)}
                    >
                      {faq.question}
                      <FaChevronDown
                        className={`transform transition-transform w-[18px] text-neutrals500 duration-200 dark:text-neutrals400 ${openMembersIndex === index
                          ? "rotate-180 text-primary500"
                          : ""
                          }`}
                      />
                    </button>
                    {openMembersIndex === index && (
                      <div className="pb-4 text-sm px-2 text-neutrals500 whitespace-pre-line dark:text-neutrals400">
                        {faq.answer}
                      </div>
                    )}
                  </div>
                )
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}