import type { Metadata } from "next";
import { getTranslations, setRequestLocale } from "next-intl/server";
import { connectDB } from "@/lib/db";
import { FaqItem } from "@/models/FaqItem";
import { FaqAccordion, type FaqEntry } from "@/components/FaqAccordion";
import { JsonLd } from "@/components/JsonLd";
import { PageHeaderBanner } from "@/components/PageHeaderBanner";
import { buildPageMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "faq" });
  return buildPageMetadata({
    locale,
    path: "/faq",
    title: t("title"),
    description: t("metaDescription"),
  });
}

export default async function FaqPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale, namespace: "faq" });

  await connectDB();
  const docs = await FaqItem.find({ visible: true }).sort({ sortOrder: 1 }).lean();

  // Nach der deutschen Kategorie gruppiert (kanonischer Schlüssel, auch auf
  // der englischen Seite) — sonst würde ein Eintrag ohne gepflegtes
  // categoryEn in eine eigene Gruppe fallen statt zur bestehenden Kategorie
  // dazuzugehören. Die Anzeige-Übersetzung wird erst danach pro Gruppe
  // aufgelöst, aus dem ersten Eintrag, der eine hat.
  const categories: { key: string; name: string; items: FaqEntry[] }[] = [];
  for (const d of docs) {
    const question = (locale === "en" && d.questionEn) || d.question;
    const answer = (locale === "en" && d.answerEn) || d.answer;
    let group = categories.find((c) => c.key === d.category);
    if (!group) {
      group = { key: d.category, name: d.category, items: [] };
      categories.push(group);
    }
    if (locale === "en" && d.categoryEn && group.name === d.category) {
      group.name = d.categoryEn;
    }
    group.items.push({ id: String(d._id), question, answer });
  }

  const allEntries = categories.flatMap((c) => c.items);

  return (
    // Opake --rk-bg-Fläche blockt den weißen Radial-Schimmer des body-Hintergrunds.
    // Header/Nav/Banner: geteilte Behandlung — siehe reference/subpage-header-spec.
    // FAQ bewusst zurückhaltend (textlastig): Standard-Bannerhöhe, feste
    // Lesespalte, kein Aufmacher-Element.
    <main className="min-h-screen bg-[var(--rk-bg)] pb-24">
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "FAQPage",
          mainEntity: allEntries.map((e) => ({
            "@type": "Question",
            name: e.question,
            acceptedAnswer: { "@type": "Answer", text: e.answer },
          })),
        }}
      />
      <PageHeaderBanner
        image="/img/faq-banner.jpg"
        eyebrow={t("eyebrow")}
        title={t("title")}
        subtitle={t("subtitle")}
        focalPoint="50% 32%"
        tall
      />

      <section className="-mt-8">
        <div className="mx-auto w-full max-w-[720px] px-5 pt-14 sm:px-8 sm:pt-20">
          {categories.length > 0 ? (
            <FaqAccordion categories={categories} />
          ) : (
            <p className="text-center text-sm text-[var(--rk-ink-muted)]">{t("empty")}</p>
          )}

          <div className="mt-16 rounded-2xl border border-white/10 bg-[var(--rk-surface)] p-8 text-center shadow-[0_24px_60px_-20px_rgba(0,0,0,0.55)]">
            <h2 className="rk-wordmark text-lg sm:text-xl">{t("closingTitle")}</h2>
            <p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-[var(--rk-ink-muted)]">
              {t("closingText")}
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}