import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/pages/faq/accordion";
import { assertIsPathLocale, defaultLocale, type Locale } from "@/lib/locale";
import { renderFeatures } from "@/lib/remark/remark-features";
import type { Metadata } from "next";
import fs from "node:fs";
import { cache } from "react";

const cachedRenderFeatures = cache(async (lang: Locale | undefined) => {
  const markdown = await fs.promises.readFile(
    `src/components/pages/faq/${lang ?? defaultLocale}.md`,
    "utf8"
  );
  return renderFeatures(markdown);
});

export default async function FaqPage(props: {
  params: Promise<{ lang?: string }>;
}) {
  const { lang } = await props.params;
  assertIsPathLocale(lang);
  const { result } = await cachedRenderFeatures(lang);

  return (
    <main className="prose prose-zinc max-w-(--breakpoint-lg) mx-auto px-4 py-16 [&>h1]:font-bold [&>h1]:text-3xl">
      {result.heading}
      <section className="my-4 space-y-4 text-muted-foreground">
        {result.body}
      </section>
      <Accordion
        className="w-full space-y-2 my-4 not-prose"
        type="single"
        collapsible
      >
        {result.features.map((feature, index) => (
          <AccordionItem
            key={index}
            className="rounded-lg border bg-background px-4 py-1"
            value={String(index)}
          >
            <AccordionTrigger className="justify-start gap-3 py-2 text-[15px] leading-6 hover:no-underline [&>svg]:-order-1">
              {feature.title}
            </AccordionTrigger>
            <AccordionContent className="pb-2 ps-7 text-muted-foreground prose prose-zinc max-w-[unset]">
              {feature.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
      {result.footer && (
        <section className="my-4 space-y-4 text-muted-foreground">
          {result.footer}
        </section>
      )}
    </main>
  );
}

export async function generateMetadata(props: {
  params: Promise<{ lang?: string }>;
}): Promise<Metadata> {
  const { lang } = await props.params;
  assertIsPathLocale(lang);
  const { title } = await cachedRenderFeatures(lang);

  return {
    title: `${title} | ${process.env.NEXT_PUBLIC_HOSTNAME}`,
  };
}