import type { Metadata } from "next";
import prisma from "@/lib/prisma";
import Link from "next/link";
import { auth } from "@/lib/auth";

export const metadata: Metadata = {
  title: "FAQ",
  description: "Frequently asked questions about AdultWorld. Find answers about registration, verification, credits, messaging, and more.",
  openGraph: {
    title: "Frequently Asked Questions | AdultWorld",
    description: "Find answers about registration, verification, credits, messaging, and more.",
  },
};

// FAQs change rarely — ISR with 1h revalidate.
export const revalidate = 3600;

export default async function FAQPage() {
  const session = await auth();
  const faqs = await prisma.faq.findMany({
    orderBy: { sort_order: "asc" },
    take: 500,
  });

  // FAQPage JSON-LD enables FAQ rich snippets in Google + answer-engine
  // citations. Each entry must be a Question/Answer pair.
  const faqLd = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faqs.map((faq) => ({
      "@type": "Question",
      name: faq.question,
      acceptedAnswer: { "@type": "Answer", text: faq.answer },
    })),
  };

  return (
    <div className="max-w-3xl mx-auto">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqLd) }}
      />
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-3xl font-bold text-text">Frequently Asked Questions</h1>
        {session?.user && (
          <Link
            href="/faq/create"
            className="bg-primary hover:bg-primary-dark text-white px-5 py-2.5 rounded-lg font-semibold transition-colors text-sm"
          >
            Submit Question
          </Link>
        )}
      </div>

      {faqs.length === 0 ? (
        <div className="bg-surface rounded-lg p-12 text-center">
          <p className="text-text-muted">No FAQs available yet.</p>
        </div>
      ) : (
        <div className="space-y-3">
          {faqs.map((faq) => (
            <details key={faq.id} className="bg-surface rounded-lg group">
              <summary className="px-6 py-4 cursor-pointer text-text font-semibold hover:text-primary transition-colors list-none flex items-center justify-between">
                {faq.question}
                <span className="text-text-muted group-open:rotate-180 transition-transform">&#9660;</span>
              </summary>
              <div className="px-6 pb-4 text-text-muted leading-relaxed">
                {faq.answer}
              </div>
            </details>
          ))}
        </div>
      )}
    </div>
  );
}