"use client";

import { useState } from "react";
import { motion } from "motion/react";
import { cx } from '../../utils/cx';
import type { FaqQuestion } from '../../types/api/faq';


interface FAQHomeProps {
    faqs: FaqQuestion[];
    title?: string;
    subtitle?: string;
    maxItems?: number;
}

export const FAQHome = ({
    faqs: faqsData,
    title = "",
    subtitle = "",
    maxItems,
}: FAQHomeProps) => {
    const items = Array.isArray(faqsData) ? faqsData : [];
    const [openQuestions, setOpenQuestions] = useState<Set<number>>(new Set([0]));

    const handleToggle = (index: number) => {
        const newSet = new Set(openQuestions);
        if (newSet.has(index)) {
            newSet.delete(index);
        } else {
            newSet.add(index);
        }
        setOpenQuestions(newSet);
    };

    const displayItems = maxItems ? items.slice(0, maxItems) : items;

    return (
        <section className="bg-primary py-16 md:py-24">
            <div className="mx-auto max-w-container px-4 md:px-8">
                <div className="mx-auto flex w-full max-w-3xl flex-col items-center text-center">
                    <h2 className="text-display-sm font-semibold text-primary md:text-display-md">
                        {title}
                    </h2>
                    <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
                        {subtitle}
                    </p>
                </div>

                {displayItems && displayItems.length > 0 ? (
                    <div className="mx-auto mt-12 max-w-3xl md:mt-16">
                        <div className="flex flex-col gap-4">
                            {displayItems.map((faq, index) => (
                                <div
                                    key={faq.id || index}
                                    className={cx(
                                        "rounded-2xl bg-transparent p-5 transition duration-300 ease-in-out md:p-6",
                                        openQuestions.has(index) && "bg-secondary",
                                    )}
                                >
                                    <h3>
                                        <button
                                            onClick={() => handleToggle(index)}
                                            className="flex w-full cursor-pointer gap-2 rounded-md text-left outline-focus-ring select-none focus-visible:outline-2 focus-visible:outline-offset-2 md:flex-row-reverse md:gap-4"
                                        >
                                            <span className="flex-1 text-md font-semibold text-primary">{faq.question}</span>
                                            <span aria-hidden="true" className="flex size-6 items-center text-fg-quaternary">
                                                <svg
                                                    width="24"
                                                    height="24"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    strokeWidth="2"
                                                    strokeLinecap="round"
                                                    strokeLinejoin="round"
                                                >
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <line
                                                        className={cx(
                                                            "origin-center rotate-0 transition duration-150 ease-out",
                                                            openQuestions.has(index) && "-rotate-90",
                                                        )}
                                                        x1="12"
                                                        y1="8"
                                                        x2="12"
                                                        y2="16"
                                                    ></line>
                                                    <line x1="8" y1="12" x2="16" y2="12"></line>
                                                </svg>
                                            </span>
                                        </button>
                                    </h3>

                                    <motion.div
                                        className="overflow-hidden"
                                        initial={false}
                                        animate={{
                                            height: openQuestions.has(index) ? "auto" : 0,
                                            opacity: openQuestions.has(index) ? 1 : 0,
                                        }}
                                        transition={{
                                            type: "spring",
                                            damping: 24,
                                            stiffness: 240,
                                            bounce: 0.4,
                                        }}
                                    >
                                        <div className="pt-1 pr-8 md:pr-0 md:pl-10">
                                            <div className="text-md text-tertiary whitespace-pre-line">
                                                {faq.answer_markdown || ''}
                                            </div>
                                        </div>
                                    </motion.div>
                                </div>
                            ))}
                        </div>
                    </div>
                ) : (
                    <div className="text-center mt-12">
                        <p className="text-gray-500">No FAQ items available</p>
                    </div>
                )}
            </div>
        </section>
    );
};
