"use client";

import { useEffect, useMemo, useState } from "react";
import {
  Card,
  CardBody,
  Input,
  Chip,
  Accordion,
  AccordionItem,
} from "@heroui/react";
import {
  MotionConfig,
  motion,
  AnimatePresence,
  useReducedMotion,
} from "framer-motion";
import { fetchFaqs } from "@/lib/api";
import type { FaqItem } from "./types";
import { MotionTitle } from "./MotionTitle";
import { MotionContent } from "./MotionContent";

interface FaqFiltersClientProps {
  lang: string;
  categories: { id: string; name: string }[];
}

export default function FaqFiltersClient({
  lang,
  categories,
}: FaqFiltersClientProps) {
  const [term, setTerm] = useState("");
  const [activeCategoryId, setActiveCategoryId] = useState<string | undefined>(
    categories[0]?.id,
  );
  const [items, setItems] = useState<FaqItem[]>([]);
  const [loading, setLoading] = useState(false);
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!activeCategoryId) {
      setItems([]);
      return;
    }

    let cancelled = false;

    const load = async () => {
      try {
        setLoading(true);
        const faqs = await fetchFaqs({
          faq_category_id: activeCategoryId,
          search: term || undefined,
          lang,
        });
        if (cancelled) return;
        setItems(
          faqs.map((item) => ({
            q: item.title,
            a: item.body,
          })),
        );
      } catch (error) {
        if (!cancelled) {
          console.error("Failed to fetch FAQs", error);
          setItems([]);
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    };

    load();

    return () => {
      cancelled = true;
    };
  }, [activeCategoryId, term, lang]);

  const containerProps = {
    initial: "hidden" as const,
    animate: "show" as const,
  };

  return (
    <MotionConfig reducedMotion="user">
      <section className="space-y-3" id="faq" dir="rtl">
        <Card shadow="sm" className="border rounded-2xl">
          <CardBody className="grid md:grid-cols-[1fr,auto] gap-3 items-center">
            <Input
              value={term}
              onValueChange={setTerm}
              placeholder="ابحث في الأسئلة… (مثال: النقل، الفحص البيطري)"
              radius="lg"
              classNames={{ inputWrapper: "h-12" }}
            />
            <div className="flex gap-2 flex-wrap">
              {categories.map((cat) => (
                <Chip
                  key={cat.id}
                  onClick={() => setActiveCategoryId(cat.id)}
                  variant="flat"
                  color={cat.id === activeCategoryId ? "success" : "default"}
                  className="cursor-pointer"
                >
                  {cat.name}
                </Chip>
              ))}
            </div>
          </CardBody>
        </Card>

        {loading && (
          <div className="mt-4 text-sm text-slate-500">جار تحميل الأسئلة…</div>
        )}

        {!loading && (
          <motion.div
            {...containerProps}
            variants={{
              hidden: { opacity: 0 },
              show: {
                opacity: 1,
                transition: {
                  staggerChildren: 0.1,
                  delayChildren: 0.05,
                },
              },
            }}
            className="space-y-2"
          >
            <Accordion
              selectionMode="single"
              itemClasses={{
                base: "rounded-2xl  bg-white overflow-hidden will-change-transform",
                title: "font-bold text-slate-900",
                trigger:
                  "px-4 py-3 min-h-0 data-[focus-visible=true]:outline-none transition-all hover:bg-slate-50 active:scale-[0.998]",
                content: "px-0 pb-0 pt-0",
                indicator: "ms-2",
              }}
              className="space-y-2 border-none [&_.heroui-accordion-item]:border-0"
            >
              {items.map((item, i) => {
                const delay = prefersReduced ? 0 : 0.05 + i * 0.1;

                return (
                  <AccordionItem
                    key={item.q}
                    aria-label={item.q}
                    title={
                      <MotionTitle delay={delay} mounted={mounted}>
                        <span className="text-primary text-[14px]">
                          {item.q}
                        </span>
                      </MotionTitle>
                    }
                  >
                    <AnimatePresence initial={false}>
                      <MotionContent>
                        <motion.div
                          layout
                          initial={{ background: "rgba(255,255,255,0)" }}
                          animate={{
                            background:
                              "linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(255,255,255,0) 100%)",
                          }}
                          exit={{ background: "rgba(255,255,255,0)" }}
                          className="rounded-xl"
                        >
                          <p className="leading-8 text-slate-700 px-2 pt-3">
                            {item.a}
                          </p>
                        </motion.div>
                      </MotionContent>
                    </AnimatePresence>
                  </AccordionItem>
                );
              })}
            </Accordion>
          </motion.div>
        )}
      </section>
    </MotionConfig>
  );
}