"use client";

import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronDown } from "lucide-react";
import { useLanguage } from "@/context/language-context";
import { getAllFaq } from "@/lib/api";

interface FaqItem {
  questionKey: string;
  answerKey: string;
}

export interface FaqBackendItem {
  id: number;
  question_ru: string;
  question_uz: string;
  answer_ru: string;
  answer_uz: string;
}

const defaultItems: FaqItem[] = [
  {
    questionKey: "faq.items.0.question",
    answerKey: "faq.items.0.answer",
  },
  {
    questionKey: "faq.items.1.question",
    answerKey: "faq.items.1.answer",
  },
  {
    questionKey: "faq.items.2.question",
    answerKey: "faq.items.2.answer",
  },
];

export function FAQ() {
  const { t, language } = useLanguage();
  const [openIndex, setOpenIndex] = useState<number | null>(0);
  const [faqItems, setFaqItems] = useState<FaqItem[]>([]);

  useEffect(() => {
    async function fetchFaq() {
      const allFaq = await getAllFaq();
      const faqItems: FaqItem[] = allFaq.map((item) => ({
        questionKey: language === "uz" ? item.question_uz : item.question_ru,
        answerKey: language === "uz" ? item.answer_uz : item.answer_ru,
      }));
      faqItems.length === 0 ? setFaqItems(defaultItems) : setFaqItems(faqItems);
    }
    fetchFaq();
  }, [language]);

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1 },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 10 },
    visible: { opacity: 1, y: 0 },
  };

  return (
    <section id="faq" className="py-20 bg-white">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl font-bold text-gray-900 mb-4">
            {t.faq.title}
          </h2>
          <div className="w-20 h-1 bg-primary mx-auto rounded-full" />
        </motion.div>

        {/* FAQ Items */}
        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="space-y-4"
        >
          {faqItems.map((item, idx) => (
            <motion.div key={idx} variants={itemVariants}>
              <motion.button
                onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
                className="w-full bg-gray-50 hover:bg-gray-100 transition-colors rounded-lg p-6 text-left"
              >
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold text-gray-900 flex-1">
                    {item.questionKey}
                  </h3>
                  <motion.div
                    animate={{ rotate: openIndex === idx ? 180 : 0 }}
                    transition={{ duration: 0.3 }}
                    className="ml-4 shrink-0"
                  >
                    <ChevronDown className="text-primary" size={24} />
                  </motion.div>
                </div>
              </motion.button>

              <AnimatePresence>
                {openIndex === idx && (
                  <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: "auto" }}
                    exit={{ opacity: 0, height: 0 }}
                    transition={{ duration: 0.3 }}
                    className="overflow-hidden"
                  >
                    <div className="bg-primary/20 p-6 rounded-b-lg border-t border-gray-200">
                      <p className="text-gray-700 leading-relaxed">
                        {item.answerKey}
                      </p>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}