'use client';

import { useState } from 'react';
import { Calendar, Sparkles, ShieldCheck, ChevronDown } from 'lucide-react';
import styles from './FAQ.module.css';

interface FAQItem {
    question: string;
    answer: string;
}

interface FAQCategory {
    id: string;
    title: string;
    description: string;
    icon: React.ReactNode;
    colorClass: string;
    faqs: FAQItem[];
}

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

    const categories: FAQCategory[] = [
        {
            id: 'scheduling',
            title: 'Convenient Scheduling',
            description: 'Easily plan and schedule your content across all platforms.',
            icon: <Calendar size={24} strokeWidth={2.5} />,
            colorClass: 'orange',
            faqs: [
                {
                    question: 'How does the multi-platform scheduling work?',
                    answer: 'Our intuitive calendar allows you to drag and drop content to schedule it across Facebook, Instagram, LinkedIn, and more simultaneously. You can customize the caption and media for each platform individually if needed.'
                },
                {
                    question: 'Can I bulk upload posts from a CSV file?',
                    answer: 'Yes! You can upload hundreds of posts at once using our CSV bulk uploader. We also support bulk image uploading to match your spreadsheet content.'
                },
                {
                    question: 'Does SocialBuddy suggest the best times to post?',
                    answer: 'Absolutely. Our AI analyzes your audience engagement history to recommend the optimal posting times for each specific platform to maximize reach.'
                },
                {
                    question: 'Is there a limit to how many posts I can schedule?',
                    answer: 'Our Pro and Premium plans offer unlimited scheduling. The Starter plan includes up to 50 scheduled posts per month, which is sufficient for most individual creators.'
                },
                {
                    question: 'Can I preview how my posts will look?',
                    answer: 'Yes, we provide a realistic preview for each platform so you can see exactly how your image, caption, and hashtags will appear before they go live.'
                }
            ]
        },
        {
            id: 'ai',
            title: 'Best AI Content Team',
            description: 'Leverage advanced AI to generate captions and ideas instantly.',
            icon: <Sparkles size={24} strokeWidth={2.5} />,
            colorClass: 'red',
            faqs: [
                {
                    question: 'How does the AI caption generator work?',
                    answer: 'We utilize advanced natural language processing models. You simply provide a topic or an image, and our AI generates engaging, on-brand captions with relevant emojis and hashtags.'
                },
                {
                    question: 'Can I teach the AI my brand voice?',
                    answer: 'Yes! You can set up "Brand Personas" where you define your tone (e.g., professional, witty, casual). The AI will then tailor all generated content to match your specific style.'
                },
                {
                    question: 'Does the AI generate images as well?',
                    answer: 'Currently, our AI focuses on text generation (captions, scripts, blog ideas). However, we integrate with stock photo libraries and design tools to help you find the perfect visuals.'
                },
                {
                    question: 'Is the AI content unique?',
                    answer: 'Yes, every piece of content is generated from scratch based on your inputs. It is not pre-written templates, ensuring your content remains fresh and original.'
                },
                {
                    question: 'Can AI help with hashtag research?',
                    answer: 'Definitely. Our AI analyzes your post content and niche to suggest high-traffic, low-competition hashtags that boost discoverability.'
                }
            ]
        },
        {
            id: 'growth',
            title: 'Guaranteed Satisfaction',
            description: 'Experience significant growth in engagement and reach.',
            icon: <ShieldCheck size={24} strokeWidth={2.5} />,
            colorClass: 'blue',
            faqs: [
                {
                    question: 'What happens if I am not satisfied with the results?',
                    answer: 'We offer a 30-day money-back guarantee. If you don\'t see the value in SocialBuddy within the first month, just let us know and we will refund your subscription.'
                },
                {
                    question: 'Is my social media account data secure?',
                    answer: 'Security is paramount. We use bank-level 256-bit encryption and never store your account passwords. We connect via official APIs which are safe and compliant.'
                },
                {
                    question: 'Can I cancel my subscription at any time?',
                    answer: 'Yes, there are no long-term contracts. You can cancel your monthly subscription at any time from your dashboard settings without any cancellation fees.'
                },
                {
                    question: 'Do you offer team collaboration features?',
                    answer: 'Yes, our higher-tier plans allow you to invite team members, assign roles (Editor, Admin), and set up approval workflows to ensure quality control.'
                },
                {
                    question: 'How can I contact support if I have issues?',
                    answer: 'We offer 24/7 priority support via live chat and email for all our customers. Our average response time is under 15 minutes.'
                }
            ]
        }
    ];

    const currentCategory = categories[activeCategoryIndex];

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

    const handleCategoryClick = (index: number) => {
        setActiveCategoryIndex(index);
        setOpenIndex(0); // Reset to first item open or closed when switching? Let's open first item.
    };

    return (
        <section className={styles.section} id="faq">
            <div className={styles.container}>
                <div className={styles.grid}>
                    {/* Left Column: Interactive Categories */}
                    <div className={styles.leftColumn}>
                        <span className={styles.label}>FAQ</span>
                        <h2 className={styles.heading}>
                            Everything You <span className="gradient-text">Need to Know</span>
                        </h2>

                        <div className={styles.featureList}>
                            {categories.map((category, index) => (
                                <div
                                    key={category.id}
                                    className={`${styles.featureItem} ${activeCategoryIndex === index ? styles.active : ''}`}
                                    onClick={() => handleCategoryClick(index)}
                                    role="button"
                                    tabIndex={0}
                                >
                                    <div className={`${styles.iconWrapper} ${styles[category.colorClass]} ${activeCategoryIndex === index ? styles.activeIcon : ''}`}>
                                        {category.icon}
                                    </div>
                                    <div className={styles.featureContent}>
                                        <h4>{category.title}</h4>
                                        <p>{category.description}</p>
                                    </div>
                                </div>
                            ))}
                        </div>

                        <div className={styles.supportSection}>
                            <p className={styles.supportText}>Still have questions?</p>
                            <a href="/contact" className={styles.contactBtn}>
                                Contact Support
                            </a>
                        </div>
                    </div>

                    {/* Right Column: Dynamic FAQs */}
                    <div className={styles.faqList}>
                        <h3 className={styles.mobileCategoryTitle}>{currentCategory.title} FAQs</h3>
                        {currentCategory.faqs.map((faq, index) => (
                            <div
                                key={index}
                                className={styles.faqItem}
                                data-state={openIndex === index ? 'open' : 'closed'}
                            >
                                <button
                                    className={styles.faqButton}
                                    onClick={() => toggleFAQ(index)}
                                    aria-expanded={openIndex === index}
                                >
                                    <span className={styles.question}>{faq.question}</span>
                                    <ChevronDown
                                        className={styles.chevron}
                                        size={20}
                                        strokeWidth={2.5}
                                    />
                                </button>
                                <div className={styles.answer}>
                                    <div className={styles.answerContent}>
                                        <div className={styles.answerInner}>
                                            {faq.answer}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}
