"use client"
import { motion } from "framer-motion"
import { ChevronDown } from "lucide-react"
import { useState } from "react"
import { useGetFAQ } from "@/lib/react-query/hooks/faq"
import { useTranslations } from 'next-intl'

const faqs = [
  {
    question: "How does AIVLY's AI voice assistant work?",
    answer:
      "Our AI assistant uses natural language processing to handle customer inquiries, book appointments, and answer common questions 24/7. It learns from your salon's specific services and preferences to provide accurate responses."
  },
  {
    question: "Can I integrate AIVLY with my existing tools?",
    answer:
      "Yes! AIVLY integrates with popular payment processors, email marketing platforms, and calendar apps. We also offer an API for custom integrations."
  },
  {
    question: "Is my customer data secure?",
    answer:
      "Absolutely. We use bank-level encryption and are fully GDPR compliant. Your data is stored securely and never shared with third parties."
  },
  {
    question: "How long does it take to set up?",
    answer:
      "Most salons are up and running within 15-30 minutes. Our onboarding team provides guided setup and training to ensure a smooth transition."
  },
  {
    question: "What kind of support do you offer?",
    answer:
      "We provide 24/7 email support, live chat during business hours, and comprehensive documentation. Premium plans include dedicated account managers."
  },
  {
    question: "Can I cancel my subscription anytime?",
    answer: "Yes, you can cancel anytime with no long-term contracts. Your data remains accessible for 90 days after cancellation."
  }
]

export default function FAQ() {
  const t = useTranslations()
  const [openIndex, setOpenIndex] = useState<number | null>(null)
  const { data: faqData, isLoading } = useGetFAQ()

  // Fallback hardcoded FAQs
  const fallbackFaqs = [
    {
      question: "How does AIVLY's AI voice assistant work?",
      answer:
        "Our AI assistant uses natural language processing to handle customer inquiries, book appointments, and answer common questions 24/7. It learns from your salon's specific services and preferences to provide accurate responses."
    },
    {
      question: "Can I integrate AIVLY with my existing tools?",
      answer:
        "Yes! AIVLY integrates with popular payment processors, email marketing platforms, and calendar apps. We also offer an API for custom integrations."
    },
    {
      question: "Is my customer data secure?",
      answer:
        "Absolutely. We use bank-level encryption and are fully GDPR compliant. Your data is stored securely and never shared with third parties."
    },
    {
      question: "How long does it take to set up?",
      answer:
        "Most salons are up and running within 15-30 minutes. Our onboarding team provides guided setup and training to ensure a smooth transition."
    },
    {
      question: "What kind of support do you offer?",
      answer:
        "We provide 24/7 email support, live chat during business hours, and comprehensive documentation. Premium plans include dedicated account managers."
    },
    {
      question: "Can I cancel my subscription anytime?",
      answer: "Yes, you can cancel anytime with no long-term contracts. Your data remains accessible for 90 days after cancellation."
    }
  ]

  // Use API data if available, otherwise fallback to hardcoded data
  const displayFaqs = faqData
    ? faqData
        .filter(faq => faq.isActive)
        .sort((a, b) => a.order - b.order)
        .map(faq => ({
          question: faq.question,
          answer: faq.answer
        }))
    : fallbackFaqs

  if (isLoading) {
    return (
      <section id="faq" className="py-16 lg:py-24 px-4 lg:px-20 bg-white">
        <div className="max-w-[880px] mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="text-center mb-12"
          >
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
              <span className="text-black">{t('home.faq.title1')} </span>
              <span className="gradient-text">{t('home.faq.title2')}</span>
            </h2>
            <p className="text-gray-600 text-base lg:text-lg">
              {t('home.faq.description')}
            </p>
          </motion.div>

          <div className="space-y-4">
            {[...Array(6)].map((_, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4, delay: index * 0.05 }}
                className="bg-white rounded-lg shadow-sm overflow-hidden"
              >
                <div className="px-6 py-5 flex items-center justify-between">
                  <div className="h-5 bg-gray-200 rounded animate-pulse w-3/4"></div>
                  <ChevronDown className="w-6 h-6 text-gray-400" />
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>
    )
  }

  return (
    <section id="faq" className="py-16 lg:py-24 px-4 lg:px-20 bg-white">
      <div className="max-w-[880px] mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-12"
        >
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
            <span className="text-black">{t('home.faq.title1')} </span>
            <span className="gradient-text">{t('home.faq.title2')}</span>
          </h2>
          <p className="text-gray-600 text-base lg:text-lg">
            {t('home.faq.description')}
          </p>
        </motion.div>

        <div className="space-y-4">
          {displayFaqs.map((faq, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: index * 0.05 }}
              className="bg-white rounded-lg shadow-sm overflow-hidden"
            >
              <button
                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                className="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-gray-50 transition-colors"
              >
                <span className="font-medium text-black pr-8">{faq.question}</span>
                <ChevronDown
                  className={`w-6 h-6 text-black transition-transform shrink-0 ${openIndex === index ? "rotate-180" : ""}`}
                />
              </button>
              <motion.div
                initial={false}
                animate={{
                  height: openIndex === index ? "auto" : 0
                }}
                transition={{ duration: 0.3 }}
                className="overflow-hidden"
              >
                <p className="px-6 pb-5 text-gray-600 leading-relaxed">{faq.answer}</p>
              </motion.div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}