"use client";

import { ChevronDown } from "lucide-react";
import React, { useMemo, useState } from "react";
import { useFaqList } from "@/state/faq/faq.action";

const Faq = () => {
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const { data, isLoading } = useFaqList();

  const faqs = useMemo(() => {
    return [...(data?.items ?? [])]
      .filter((faq) => faq?.is_active !== false)
      .sort((a, b) => (a?.sort_order ?? 0) - (b?.sort_order ?? 0));
  }, [data?.items]);

  if (!isLoading && faqs.length === 0) return null;

  return (
    <section id="faq" className="scroll-mt-24 bg-[#0c090b] py-24 md:py-32">
      <div className="mx-auto grid max-w-7xl gap-12 px-4 sm:px-6 lg:grid-cols-[0.9fr_1.1fr] lg:gap-16 lg:px-8">
        <div>
          <p className="text-xs font-bold uppercase tracking-[0.24em] text-[#ED3A57]">
            FAQ
          </p>
          <h2 className="mt-3 text-[36px] md:text-[48px] font-extrabold leading-[1.1] tracking-tight text-white">
            Questions, answered without a cliffhanger
          </h2>
          <p className="mt-5 max-w-[46ch] text-gray-400">
            Still stuck? Our support team answers in under a day — and no, they
            won&apos;t spoil episode 41.
          </p>
        </div>

        <div className="w-full">
          {isLoading
            ? Array.from({ length: 6 }).map((_, index) => (
                <div
                  key={index}
                  className="border-b border-white/10 py-4"
                >
                  <div className="h-5 w-3/4 animate-pulse rounded bg-white/10" />
                </div>
              ))
            : faqs?.map((faq, index) => {
                const isOpen = openIndex === index;

                return (
                  <div key={faq.id} className="border-b border-white/10">
                    <button
                      type="button"
                      aria-expanded={isOpen}
                      onClick={() => setOpenIndex(isOpen ? null : index)}
                      className="flex w-full cursor-pointer items-center justify-between gap-4 py-4 text-left text-[16px] font-semibold text-white transition-colors hover:text-[#ED3A57]"
                    >
                      {faq.question}
                      <ChevronDown
                        className={`h-4 w-4 shrink-0 transition-transform duration-200 ${
                          isOpen ? "rotate-180" : ""
                        }`}
                        aria-hidden="true"
                      />
                    </button>
                    <div
                      className={`grid transition-all duration-300 ${
                        isOpen
                          ? "grid-rows-[1fr] opacity-100"
                          : "grid-rows-[0fr] opacity-0"
                      }`}
                    >
                      <p className="overflow-hidden pb-4 text-sm leading-relaxed text-gray-400">
                        {faq.answer}
                      </p>
                    </div>
                  </div>
                );
              })}
        </div>
      </div>
    </section>
  );
};

export default Faq;