'use client'

import { useState } from 'react'
import * as motion from 'framer-motion/m'
import { AnimatePresence } from 'framer-motion'
import { ChevronDown, HelpCircle } from 'lucide-react'
import { useCurrencyStore } from '@/store/currencyStore'

function buildFaqs(freeDeliveryThreshold: string, deliveryFee: string) {
  return [
  {
    question: 'How do I place an order?',
    answer: 'You can place an order by browsing our products, adding items to your cart, and proceeding to checkout. You can also call us directly for assistance.'
  },
  {
    question: 'What are the delivery charges?',
    answer: `Delivery is free on orders above ${freeDeliveryThreshold}. For orders below ${freeDeliveryThreshold}, a delivery fee of ${deliveryFee} applies.`
  },
  {
    question: 'How long does delivery take?',
    answer: 'We offer 30-minute delivery slots in the morning (8-11 AM) and evening (5-8 PM). You can choose your preferred slot at checkout.'
  },
  {
    question: 'What payment methods do you accept?',
    answer: 'We accept Cash on Delivery (COD), EasyPaisa, JazzCash, and bank transfers.'
  },
  {
    question: 'Can I return or exchange products?',
    answer: 'Yes, we offer returns within 24 hours of delivery for fresh produce. Contact our support team for assistance.'
  },
  {
    question: 'How do I track my order?',
    answer: 'You can track your order in real-time through your account dashboard or via the WhatsApp link sent after confirmation.'
  },
  ]
}

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

function FAQItem({ question, answer, isOpen, onToggle }: FAQItemProps) {
  return (
    <div className="border-b border-gray-100 last:border-0">
      <button
        onClick={onToggle}
        className="w-full flex justify-between items-center py-4 text-left hover:text-primary transition-colors"
      >
        <span className="font-medium text-dark">{question}</span>
        <ChevronDown size={18} className={`transition-transform ${isOpen ? 'rotate-180' : ''}`} />
      </button>
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="overflow-hidden"
          >
            <p className="pb-4 text-gray-custom text-sm leading-relaxed">{answer}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

export default function ContactFAQ() {
  const [openIndex, setOpenIndex] = useState<number | null>(null)
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const faqs = buildFaqs(formatAmount(1000), formatAmount(50))

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 md:p-8"
    >
      <div className="flex items-center gap-3 mb-6">
        <div className="p-2 bg-primary/10 rounded-lg">
          <HelpCircle size={24} className="text-primary" />
        </div>
        <div>
          <h2 className="text-2xl font-bold text-dark">Frequently Asked Questions</h2>
          <p className="text-gray-custom text-sm">Find quick answers to common questions</p>
        </div>
      </div>

      <div className="divide-y divide-gray-100">
        {faqs.map((faq, index) => (
          <FAQItem
            key={index}
            question={faq.question}
            answer={faq.answer}
            isOpen={openIndex === index}
            onToggle={() => setOpenIndex(openIndex === index ? null : index)}
          />
        ))}
      </div>
    </motion.div>
  )
}