import Link from "next/link";
import { ArrowRight, CircleHelp } from "lucide-react";
import { SectionHeader } from "@/components/SectionHeader";
import { serverApiBaseUrl } from "@/lib/api-url";
import { routePath } from "@/lib/route-url";

type Faq = {
  id: number;
  category: string;
  question: string;
  answer: string;
  displayOrder: number;
  isActive: boolean;
};

async function getGeneralFaqs() {
  try {
    const response = await fetch(`${serverApiBaseUrl}/api/faqs`, {
      cache: "no-store",
    });

    if (!response.ok) {
      return [];
    }

    const data = (await response.json()) as { faqs?: Faq[] };

    return (data.faqs ?? [])
      .filter((faq) => faq.category.trim().toLowerCase() === "general")
      .slice(0, 5);
  } catch {
    return [];
  }
}

export async function HomeFaqSection() {
  const faqs = await getGeneralFaqs();

  if (faqs.length === 0) {
    return null;
  }

  return (
    <section className="bg-white py-16 font-['Space_Grotesk'] 2xl:py-24">
      <div className="mx-auto grid max-w-7xl gap-8 px-4 md:px-6 lg:grid-cols-[minmax(0,0.82fr)_minmax(0,1.18fr)] lg:items-start">
        <div className="lg:sticky lg:top-24">
          <SectionHeader
            eyebrow="General FAQs"
            title="Quick answers before you book."
            lead="A few common things customers ask before scheduling doorstep vehicle service."
          />
          <Link
            href={routePath("/faq")}
            className="mt-6 inline-flex h-11 items-center justify-center gap-2 rounded-md bg-foreground px-5 text-sm font-black text-background transition hover:bg-primary"
          >
            View all FAQs
            <ArrowRight className="h-4 w-4" />
          </Link>
        </div>

        <div className="rounded-md border border-border bg-slate-50 p-2 shadow-sm">
          {faqs.map((faq, index) => (
            <details
              key={faq.id}
              open={index === 0}
              className="group rounded-md bg-white px-5 py-4 transition open:bg-white [&:not(:last-child)]:mb-2"
            >
              <summary className="flex cursor-pointer list-none items-start justify-between gap-4">
                <span className="flex min-w-0 gap-3">
                  <span className="mt-0.5 grid h-7 w-7 shrink-0 place-items-center rounded-md bg-primary/10 text-primary">
                    <CircleHelp className="h-4 w-4" />
                  </span>
                  <span className="text-base font-black leading-6 text-foreground">
                    {faq.question}
                  </span>
                </span>
                <span className="grid h-7 w-7 shrink-0 place-items-center rounded-md border border-border text-lg leading-none text-primary transition group-open:rotate-45 group-open:border-primary/30 group-open:bg-primary/10">
                  +
                </span>
              </summary>
              <p className="mt-3 whitespace-pre-line pl-10 text-sm font-medium leading-7 text-muted-foreground">
                {faq.answer}
              </p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}