import React, { useState } from 'react';
import { Plus, Minus, HelpCircle, Mail } from 'lucide-react';
import { PrimaryCTAButton } from '../components/PrimaryCTAButton';
import { useNavigate } from 'react-router-dom';

interface FAQItemProps {
  question: string;
  answer: string;
  isOpen: boolean;
  onToggle: () => void;
}

const FAQItem: React.FC<FAQItemProps> = ({ question, answer, isOpen, onToggle }) => {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-6 mb-4 transition-all duration-300 hover:shadow-md">
      <button
        onClick={onToggle}
        className="w-full text-left flex items-center justify-between"
      >
        <h3 className="text-h4 pr-4" style={{ color: 'var(--color-black)' }}>
          {question}
        </h3>
        <div className="flex-shrink-0 ml-4">
          {isOpen ? (
            <Minus 
              className="w-5 h-5 transition-transform duration-200"
              style={{ color: 'var(--color-primary)' }}
            />
          ) : (
            <Plus 
              className="w-5 h-5 transition-transform duration-200"
              style={{ color: 'var(--color-primary)' }}
            />
          )}
        </div>
      </button>
      
      <div 
        className={`overflow-hidden transition-all duration-300 ease-out ${
          isOpen ? 'max-h-96 opacity-100 mt-4' : 'max-h-0 opacity-0'
        }`}
      >
        <p className="text-body-lg leading-relaxed" style={{ color: 'var(--color-black)' }}>
          {answer}
        </p>
      </div>
    </div>
  );
};

export function FAQ() {
  const [openItems, setOpenItems] = useState<number[]>([]);
  const [activeCategory, setActiveCategory] = useState<string>('all');
  const navigate = useNavigate();

  const toggleItem = (index: number) => {
    setOpenItems(prev => 
      prev.includes(index) 
        ? prev.filter(i => i !== index)
        : [...prev, index]
    );
  };

  const categories = [
    { id: 'all', label: 'All Questions' },
    { id: 'getting-started', label: 'Getting Started' },
    { id: 'membership', label: 'Members and Pricing' },
    { id: 'requests', label: 'Book Requests and Recommendations' },
    { id: 'account', label: 'Account & Technical Issues' }
  ];

  const faqData = [
    {
      question: "How do I sign up for an account?",
      answer: "Signing up is easy! Just download the app, click on 'Sign Up' and follow the prompts. You can use your email address, Google, or Facebook to create an account.",
      category: 'getting-started'
    },
    {
      question: "What are the membership club packages?",
      answer: "We offer subscription packages to our learners which allow you to avail of the different products/services available at a discounted rate.",
      category: 'membership'
    },
    {
      question: "Can I buy the products without purchasing the membership package?",
      answer: "Yes. You can either buy individual products separately or avail of our subscription packages to get attractive discounts.",
      category: 'membership'
    },
    {
      question: "Can I change my subscription plan mid-way?",
      answer: "Yes, you can change your subscription to opt for a higher package. You would be required to pay a differential amount.",
      category: 'membership'
    },
    {
      question: "What is auto-renewal?",
      answer: "Each plan can be setup for auto-renewal. A transaction of Rs. 5 is charged for this by the payment vendor. You can discontinue the auto-renewal at any point.",
      category: 'membership'
    },
    {
      question: "How can I cancel or change my order?",
      answer: "Just drop an email to connect@leadershipcentre.in with the reference number of your purchase order. Wherever applicable (in case we have not shipped it yet), we will cancel your order. Alternatively, you will have to send the details to us and we will offer you a refund or exchange.",
      category: 'requests'
    },
    {
      question: "Does Leadership Centre provide cash on delivery?",
      answer: "We do not offer cash on delivery (COD).",
      category: 'requests'
    },
    {
      question: "Do you accept returns?",
      answer: "As our products / services are electronic in nature and access is granted soon as your payment is received/recorded, return of a product / service is not enabled. However, if you wish to cancel an order after effecting payment, you may do so prior to viewing / downloading / consuming the product / service purchased within 15 days (from the date of purchase and payment).",
      category: 'requests'
    },
    {
      question: "I have paid via netbanking/debit/credit card, how will I get refund?",
      answer: "We shall be refunding the money back into the same account via which you have paid for your purchase on Leadership Centre.",
      category: 'account'
    },
    {
      question: "How do I reset my password?",
      answer: "To reset your password, go to the login screen and click 'Forgot Password'. Enter your email address and we'll send you a secure link to reset your password.",
      category: 'account'
    }
  ];

  const filteredFAQs = activeCategory === 'all' 
    ? faqData 
    : faqData.filter(faq => faq.category === activeCategory);

  return (
    <div style={{ backgroundColor: '#FFFFFF' }} className="min-h-screen">
      {/* Header Section */}
      <section className="py-20 section-margin-x">
        <div className="max-w-4xl mx-auto">
          {/* Main Heading */}
          <h1 className="text-h1 mb-6" style={{ color: 'var(--color-black)' }}>
            FAQs
          </h1>
          
          {/* Description */}
          <p className="text-body-lg mb-8 leading-relaxed" style={{ color: 'var(--color-gray-muted)' }}>
            Everything you need to know about features, membership, and troubleshooting.
          </p>

          {/* Category Filter Tags */}
          <div className="flex flex-wrap gap-3 mb-8">
            {categories.map((category) => (
              <button
                key={category.id}
                onClick={() => setActiveCategory(category.id)}
                className={`px-4 py-2 rounded-full text-small font-medium transition-all duration-200 ${
                  activeCategory === category.id
                    ? 'text-white'
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                }`}
                style={{
                  backgroundColor: activeCategory === category.id ? 'var(--color-primary)' : undefined,
                  color: activeCategory === category.id ? 'white' : undefined
                }}
              >
                {category.label}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="pb-20 section-margin-x">
        <div className="max-w-4xl mx-auto">
          <div className="space-y-0">
            {filteredFAQs.map((faq, index) => (
              <FAQItem
                key={`${activeCategory}-${index}`}
                question={faq.question}
                answer={faq.answer}
                isOpen={openItems.includes(index)}
                onToggle={() => toggleItem(index)}
              />
            ))}
          </div>
        </div>
      </section>

      {/* Contact Support Section */}
      <section className="py-16 section-margin-x">
        <div className="max-w-4xl mx-auto">
          <div className="bg-white border border-gray-200 rounded-xl p-8 text-center">
            <div className="w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--color-primary)' }}>
              <HelpCircle className="w-8 h-8" style={{ color: 'white' }} />
            </div>
            
            <h2 className="text-h3 mb-4" style={{ color: 'var(--color-black)' }}>
              Still have questions?
            </h2>
            
            <p className="text-body-lg mb-8 max-w-2xl mx-auto" style={{ color: 'var(--color-gray-muted)' }}>
              Can't find the answer you're looking for? Our support team is here to help you with any questions 
              about our leadership development programs and services.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <PrimaryCTAButton
                text="Contact Support"
                onClick={() => navigate('/contact')}
                className="cta-text-black"
              />
              
              <a 
                href="mailto:connect@leadershipcentre.in"
                className="flex items-center gap-2 px-6 py-3 text-body-lg transition-colors duration-200 hover:bg-gray-50 rounded-lg"
                style={{ color: 'var(--color-primary)' }}
              >
                <Mail className="w-5 h-5" />
                connect@leadershipcentre.in
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}