"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import FAQ from ".";
import type { FaqItem } from "./types";
import { fetchFaqs } from "@/lib/api";

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

export default function FaqTabsClient({
  lang,
  categories,
}: FaqTabsClientProps) {
  const [activeId, setActiveId] = useState<string | undefined>(
    categories[0]?.id
  );
  const [items, setItems] = useState<FaqItem[]>([]);
  const [loading, setLoading] = useState(false);

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

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

    load();
    return () => {
      cancelled = true;
    };
  }, [activeId, lang]);

  return (
    <>
      {categories.length > 0 && (
        <div className="overflow-x-auto pb-1">
          <div className="inline-flex gap-2 border-b border-slate-200 min-w-full">
            {categories.map((cat) => {
              const active = cat.id === activeId;
              return (
                <button
                  key={cat.id}
                  type="button"
                  onClick={() => setActiveId(cat.id)}
                  className={`whitespace-nowrap px-4 py-2 text-sm border-b-2 transition-colors ${
                    active
                      ? "border-[#0F5132] text-[#0F5132] font-bold"
                      : "border-transparent text-slate-600 hover:text-[#0F5132] hover:border-slate-300"
                  }`}
                >
                  {cat.name}
                </button>
              );
            })}
          </div>
        </div>
      )}

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