"use client";

import { useEffect, useState } from "react";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { api } from "@/lib/api";
import { Navbar } from "@/components/public/Navbar";
import { Footer } from "@/components/public/Footer";
import { FaqPageJsonLd } from "@/components/public/JsonLd";

interface FaqItem {
  id: string;
  question: string;
  answer: string;
  order: number;
  showOnHomepage: boolean;
}

export default function FaqPage() {
  const [items, setItems] = useState<FaqItem[]>([]);
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.getFaqsAll()
      .then((data) => {
        if (Array.isArray(data)) setItems(data);
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  return (
    <>
      {items.length > 0 && (
        <FaqPageJsonLd items={items.map((i) => ({ question: i.question, answer: i.answer }))} />
      )}
      <Navbar />
      <div className="min-h-screen">
        <div className="max-w-3xl mx-auto px-8 pt-16 pb-24">
          <h1 className="text-4xl font-black mb-4">Frequently Asked Questions</h1>
          <p className="text-on-surface-variant text-lg mb-12">
            Everything you need to know about the Belgian Bitcoin Embassy.
          </p>

          {loading && (
            <div className="space-y-4">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="bg-surface-container-low rounded-xl h-[72px] animate-pulse" />
              ))}
            </div>
          )}

          {!loading && items.length === 0 && (
            <p className="text-on-surface-variant">No FAQs available yet.</p>
          )}

          {!loading && items.length > 0 && (
            <div className="space-y-4">
              {items.map((item, i) => {
                const isOpen = openIndex === i;
                return (
                  <div
                    key={item.id}
                    className="bg-surface-container-low rounded-xl overflow-hidden"
                  >
                    <button
                      onClick={() => setOpenIndex(isOpen ? null : i)}
                      className="w-full flex items-center justify-between p-6 text-left"
                    >
                      <span className="text-lg font-bold pr-4">{item.question}</span>
                      <ChevronDown
                        size={20}
                        className={cn(
                          "shrink-0 text-primary transition-transform duration-200",
                          isOpen && "rotate-180"
                        )}
                      />
                    </button>

                    <div
                      className={cn(
                        "grid transition-all duration-200",
                        isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
                      )}
                    >
                      <div className="overflow-hidden">
                        <p className="px-6 pb-6 text-on-surface-variant leading-relaxed">
                          {item.answer}
                        </p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
      <Footer />
    </>
  );
}