import { prisma } from "@/lib/prisma";
import { FaqAccordion } from "./faq-accordion";
import { AnimatedSection } from "@/components/animated-section";
import { BackToHomeButton } from "@/components/back-to-home-button";
import { SiteHeader } from "@/components/site-header";
import { SiteFooter } from "@/components/site-footer";
import { Card, CardContent } from "@/components/ui/card";
import { JsonLd } from "@/components/json-ld";
import { createPageMetadata } from "@/lib/seo/metadata";

const DEFAULT_FAQ: { question: string; answer: string }[] = [
  {
    question: "فال تاروت چگونه کار می‌کند؟",
    answer:
      "نوع فال (۷ کارته تک نیت، ۱۸ کارته احساسی یا ۴۸ کارته کلی) را انتخاب کنید، سپس کارت‌های خود را از میان کارت‌های تاروت برگزینید. پس از پرداخت، تفسیر و راهنمایی بر اساس کارت‌های شما نمایش داده می‌شود.",
  },
  {
    question: "آیا می‌توانم بیش از یک بار فال بگیرم؟",
    answer:
      "بله. هر بار می‌توانید یک فال جدید بگیرید و نتیجه آن در پنل کاربری در بخش «فال‌های من» ذخیره می‌شود.",
  },
  {
    question: "نتیجه فال چه زمانی نمایش داده می‌شود؟",
    answer:
      "بلافاصله پس از تأیید پرداخت، صفحه نتیجه با تفسیر کارت‌ها، پند و خلاصه در دسترس است.",
  },
  {
    question: "چگونه می‌توانم نظر خود را درباره فال ثبت کنم؟",
    answer:
      "پس از مشاهده نتیجه فال، در همان صفحه می‌توانید نظر خود را بنویسید. نظر شما پس از تأیید مدیر در سایت نمایش داده می‌شود.",
  },
];

function parseFaqContent(content: string | null): { question: string; answer: string }[] {
  if (!content?.trim()) return DEFAULT_FAQ;
  try {
    const parsed = JSON.parse(content) as unknown;
    if (Array.isArray(parsed)) {
      const items = parsed.filter(
        (x): x is { question: string; answer: string } =>
          x && typeof x === "object" && "question" in x && "answer" in x
      );
      if (items.length > 0) return items;
    }
  } catch {
    // not JSON, use default
  }
  return DEFAULT_FAQ;
}

export async function generateMetadata() {
  const page = await prisma.sitePage.findUnique({ where: { key: "faq" } });
  return createPageMetadata({
    title: page?.titleFa ?? "سوالات متداول",
    description: "پاسخ پرسش‌های رایج درباره فال تاروت آنلاین، نحوه کار، پرداخت و نمایش نتیجه.",
    path: "/faq",
  });
}

export default async function FAQPage() {
  const page = await prisma.sitePage.findUnique({ where: { key: "faq" } });
  const items = parseFaqContent(page?.content ?? null);

  return (
    <div className="min-h-screen flex flex-col">
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "FAQPage",
          mainEntity: items.map((item) => ({
            "@type": "Question",
            name: item.question,
            acceptedAnswer: {
              "@type": "Answer",
              text: item.answer,
            },
          })),
        }}
      />
      <SiteHeader />
      {/* Hero — same structure as about page */}
      <section className="border-b bg-surface">
        <div className="container mx-auto px-4 py-16 max-w-3xl text-center">
          <AnimatedSection>
            <h1 className="text-4xl font-bold tracking-tight text-foreground">
              {page?.titleFa ?? "سوالات متداول"}
            </h1>
            <p className="mt-3 text-muted-foreground text-lg">
              پاسخ پرسش‌های رایج درباره فال تاروت
            </p>
          </AnimatedSection>
        </div>
      </section>

      {/* Content card — same card style as about page */}
      <section className="flex-1 container mx-auto px-4 py-12 max-w-3xl">
        <AnimatedSection delay={0.15}>
          <Card className="overflow-hidden bg-card">
            <CardContent className="p-0">
              <FaqAccordion items={items} />
            </CardContent>
          </Card>
        </AnimatedSection>

        <AnimatedSection delay={0.25}>
          <BackToHomeButton />
        </AnimatedSection>
      </section>
      <SiteFooter />
    </div>
  );
}