import { useState } from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { Link } from 'react-router-dom';

interface FAQItemProps {
    question: string;
    answer: React.ReactNode;
    isOpen: boolean;
    toggleOpen: () => void;
}

const FAQItem = ({ question, answer, isOpen, toggleOpen }: FAQItemProps) => {
    return (
        <div className="border-b border-gray-200 py-4">
            <button
                className="flex w-full justify-between items-center text-left font-medium text-gray-900"
                onClick={toggleOpen}
            >
                <span className="text-lg">{question}</span>
                {isOpen ? (
                    <ChevronUp className="h-5 w-5 text-purple-600" />
                ) : (
                    <ChevronDown className="h-5 w-5 text-purple-600" />
                )}
            </button>
            {isOpen && (
                <div className="mt-4 text-gray-600 prose prose-sm max-w-none">
                    {answer}
                </div>
            )}
        </div>
    );
};

export default function FAQ() {
    const [openIndex, setOpenIndex] = useState<number | null>(0);

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

    const faqItems = [
        {
            question: "How to register at Matrimonial.com.bd?",
            answer: (
                <div>
                    <p>To access the site properly, viewers must be needed to be registered as a member.</p>
                    <p>The registration form has appeared with some fields such as:</p>
                    <ul className="list-disc pl-5 mt-2 mb-2">
                        <li>On Behalf</li>
                        <li>First Name</li>
                        <li>Last Name</li>
                        <li>Gender</li>
                        <li>Date Of Birth</li>
                        <li>Marital Status</li>
                        <li>Height</li>
                        <li>Religion</li>
                        <li>Caste</li>
                        <li>Mother Tongue</li>
                        <li>Country</li>
                        <li>Phone/Email</li>
                        <li>Password</li>
                        <li>Referral ID (Optional)</li>
                        <li>Photo</li>
                    </ul>
                    <p>By clicking the "Register" button viewers will accept the terms & conditions of the site.</p>
                </div>
            )
        },
        {
            question: "How to login into the website?",
            answer: (
                <div>
                    <p>Registered members can log in to the site with their provided email & password.</p>
                    <p className="mt-2">If anyone forgets the password, there is an option for "Forgot Password".</p>
                </div>
            )
        },
        {
            question: "How to purchase a package by a member?",
            answer: (
                <div>
                    <ol className="list-decimal pl-5">
                        <li>Login to the Member panel.</li>
                        <li>Then go to the left navigation bar and click on the Packages &gt; Packages or from the top click on the Premium Plans.</li>
                        <li>Choose your desired Package and click on the Purchase This Package button.</li>
                        <li>Select your payment gateway.</li>
                        <li>If you choose a manual payment method then insert Transaction ID, Payment proof, and Payment details.</li>
                        <li>Finally, Click on the Confirm Button.</li>
                    </ol>
                </div>
            )
        },
        {
            question: "How to deactivate a member account?",
            answer: (
                <div>
                    <ol className="list-decimal pl-5">
                        <li>Login as a member.</li>
                        <li>From the member panel go to the left navigation bar and click on the Deactivate Account.</li>
                        <li>If you really want to deactivate your account then click on the Yes button. Your account will not be visible to other members.</li>
                        <li>With the same process, you will be able to reactivate your account.</li>
                    </ol>
                </div>
            )
        },
        {
            question: "About Me",
            answer: (
                <div>
                    <p>This is your chance to get deeper and talk about what makes you unique. The best profiles usually have the following info:</p>
                    <ul className="list-disc pl-5 mt-2 mb-2">
                        <li>What you do</li>
                        <li>Where you're from</li>
                        <li>What your interests are</li>
                        <li>What you're looking for in a partner</li>
                    </ul>
                    <p className="font-medium text-red-600">Keep yourself safe and DO NOT include external links, social accounts or phone numbers.</p>
                </div>
            )
        },
        {
            question: "কিভাবে প্রফাইল আপডেট করবো?",
            answer: (
                <div>
                    <p>প্রথমে আপনার একাউন্টে লগইন করুন।</p>
                    <ul className="list-disc pl-5 mt-2 mb-2">
                        <li>প্রফাইলে লগইন করার পর, মোবাইল থেকে নিজের দিকে ডানপাশে Account অপশনে যাবেন।</li>
                        <li>এর পর নিচের দিকে Manage Profile অপশনে যাবেন।</li>
                        <li>সেখানে প্রতিটি সেকশনে আপনার তথ্য গুলো দিবেন এবং আপডেট বাটানে ক্লিক করবেন।</li>
                    </ul>
                    <p>আপনার প্রফাইলের সে অংশটি আপডেট হয়ে যাবে।</p>
                </div>
            )
        },
        {
            question: "ফ্রী রেজিষ্ট্রেশন লিংক",
            answer: (
                <div>
                    <a href="https://matrimonial.com.bd/home/registration" className="text-purple-600 hover:underline">
                        https://matrimonial.com.bd/home/registration
                    </a>
                </div>
            )
        }
    ];

    return (
        <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
            <div className="bg-white shadow-lg rounded-lg overflow-hidden">
                <div className="bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-8">
                    <div className="flex flex-col md:flex-row justify-between items-center">
                        <h1 className="text-3xl font-bold text-white">Frequently Asked Questions</h1>
                        <div className="text-white mt-2 md:mt-0">
                            <span className="hover:underline cursor-pointer"><Link to="/">Home</Link></span>
                            <span className="mx-2">/</span>
                            <span>FAQ</span>
                        </div>
                    </div>
                </div>

                <div className="p-6 sm:p-10">
                    <div className="mx-auto">
                        <div className="space-y-2">
                            {faqItems.map((item, index) => (
                                <FAQItem
                                    key={index}
                                    question={item.question}
                                    answer={item.answer}
                                    isOpen={openIndex === index}
                                    toggleOpen={() => toggleFAQ(index)}
                                />
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}