"use client";

import { cn } from "@/lib/utils";
import { IconMinus, IconPlus } from "@tabler/icons-react";
import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";

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

interface FAQSectionProps {
  faqs: FAQ[];
  title?: string;
}

/**
 * FAQ Section component for MDX blog posts
 * Includes JSON-LD FAQPage schema for rich snippets in search results
 *
 * Usage in MDX:
 * <FAQSection faqs={[
 *   { question: "...", answer: "..." },
 *   { question: "...", answer: "..." }
 * ]} />
 *
 * Or from frontmatter:
 * <FAQSection faqs={frontmatter.faqs} />
 */
export function FAQSection({
  faqs,
  title = "Questions fréquentes",
}: FAQSectionProps) {
  const [open, setOpen] = useState<string | null>(null);

  if (!faqs || faqs.length === 0) return null;

  // Generate JSON-LD FAQPage schema for rich snippets
  const faqJsonLd = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faqs.map((faq) => ({
      "@type": "Question",
      name: faq.question,
      acceptedAnswer: {
        "@type": "Answer",
        text: faq.answer,
      },
    })),
  };

  return (
    <section className="my-12 rounded-2xl bg-gray-50 p-6 md:p-8">
      {/* JSON-LD for SEO rich snippets */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }}
      />

      <h2 className="mb-6 text-2xl font-bold tracking-tight text-gray-900 md:text-3xl">
        {title}
      </h2>

      <div className="divide-y divide-gray-200">
        {faqs.map((faq, index) => (
          <FAQItem
            key={index}
            index={index}
            question={faq.question}
            answer={faq.answer}
            open={open}
            setOpen={setOpen}
          />
        ))}
      </div>
    </section>
  );
}

function FAQItem({
  question,
  answer,
  setOpen,
  open,
  index,
}: {
  question: string;
  answer: string;
  open: string | null;
  setOpen: (open: string | null) => void;
  index: number;
}) {
  const isOpen = open === question;
  const answerId = `faq-answer-${index}`;

  return (
    <div className="py-4">
      <button
        type="button"
        className="flex w-full cursor-pointer items-start text-left"
        onClick={() => setOpen(isOpen ? null : question)}
        aria-expanded={isOpen}
        aria-controls={answerId}
      >
        <span className="relative mr-4 mt-1 inline-flex h-6 w-6 shrink-0">
          <IconPlus
            aria-hidden="true"
            className={cn(
              "absolute inset-0 h-6 w-6 transform text-orange-500 transition-all duration-200",
              isOpen && "rotate-90 scale-0"
            )}
          />
          <IconMinus
            aria-hidden="true"
            className={cn(
              "absolute inset-0 h-6 w-6 rotate-90 scale-0 transform text-orange-500 transition-all duration-200",
              isOpen && "rotate-0 scale-100"
            )}
          />
        </span>
        <span className="flex-1 text-lg font-medium text-gray-800">{question}</span>
      </button>
      <AnimatePresence mode="wait">
        {isOpen && (
          <motion.div
            id={answerId}
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2, ease: "easeOut" }}
            className="ml-10 overflow-hidden"
          >
            <p className="mt-2 text-gray-600">{answer}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default FAQSection;