import { LLMCopyButton, ViewOptions } from "@/components/ai/page-actions";
import { source } from "@/lib/source";
import { getMDXComponents } from "@/mdx-components";
import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import {
  DocsBody,
  DocsDescription,
  DocsPage,
  DocsTitle,
} from "fumadocs-ui/layouts/docs/page";
import { createRelativeLink } from "fumadocs-ui/mdx";
import type { Metadata } from "next";
import { notFound } from "next/navigation";

export default async function Page(props: PageProps<"/[[...slug]]">) {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();

  const MDX = page.data.body;

  return (
    <DocsPage toc={page.data.toc} full={page.data.full}>
      <DocsTitle>{page.data.title}</DocsTitle>
      <DocsDescription>{page.data.description}</DocsDescription>
      <ActionsBar url={page.url} />
      <DocsBody>
        <MDX
          components={getMDXComponents({
            // this allows you to link to other pages with relative file paths
            a: createRelativeLink(source, page),
            Steps: Steps,
            Step: Step,
            Tabs: Tabs,
            Tab: Tab,
            Accordion: Accordions,
            AccordionItem: Accordion,
          })}
        />
      </DocsBody>
    </DocsPage>
  );
}

function ActionsBar(props: { url: string }) {
  const markdownUrl = props.url + ".mdx";

  return (
    <div className="flex flex-row gap-2 items-center border-b pt-2 pb-6">
      <LLMCopyButton markdownUrl={markdownUrl} />
      <ViewOptions markdownUrl={markdownUrl} githubUrl="" />
    </div>
  );
}

export async function generateStaticParams() {
  return source.generateParams();
}

const OG_SERVICE_URL = "https://og.better-i18n.com";

export async function generateMetadata(
  props: PageProps<"/[[...slug]]">,
): Promise<Metadata> {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();

  const ogUrl = new URL(`${OG_SERVICE_URL}/og/docs`);
  ogUrl.searchParams.set("title", page.data.title);
  if (page.data.description)
    ogUrl.searchParams.set("description", page.data.description);

  return {
    title: page.data.title,
    description: page.data.description,
    openGraph: {
      images: [{ url: ogUrl.toString(), width: 1200, height: 630 }],
    },
    twitter: {
      card: "summary_large_image",
      images: [ogUrl.toString()],
    },
  };
}
