import { createFileRoute, notFound } from "@tanstack/react-router";
import { DocsLayout } from "fumadocs-ui/layouts/docs";
import { createServerFn } from "@tanstack/react-start";
import { source } from "@/lib/source";
import browserCollections from "fumadocs-mdx:collections/browser";
import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/layouts/docs/page";
import defaultMdxComponents from "fumadocs-ui/mdx";
import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
import { Step, Steps } from "fumadocs-ui/components/steps";
import { baseOptions } from "@/lib/layout.shared";
import { useFumadocsLoader } from "fumadocs-core/source/client";
import { Suspense } from "react";
import { Card, Cards } from "@/components/DocsCard";
import { DocsMdxLink } from "@/components/DocsMdxLink";
import { buildSeoHead, formatDocsTitle, siteDescription } from "@/lib/metadata";

type DocsLoaderData = {
	path: string;
	title: string;
	description: string;
	url: string;
	pageTree: Awaited<ReturnType<typeof source.serializePageTree>>;
};

export const Route = createFileRoute("/docs/$")({
	head: ({ loaderData }) => {
		const data = loaderData as DocsLoaderData | undefined;
		const title = formatDocsTitle(data?.title ?? "Zerobyte Documentation");
		const description = data?.description ?? siteDescription;
		const path = data?.url ?? "/docs";

		return buildSeoHead({ title, description, path });
	},
	component: Page,
	loader: async ({ params }) => {
		const slugs = params._splat?.split("/") ?? [];
		const data = await serverLoader({ data: slugs });
		if (!data) throw notFound();
		await clientLoader.preload(data.path);
		return data;
	},
});

const serverLoader = createServerFn({
	method: "GET",
})
	.inputValidator((slugs: string[]) => slugs)
	.handler(async ({ data: slugs }) => {
		const page = source.getPage(slugs);
		if (!page) throw notFound();
		return {
			path: page.path,
			title: page.data.title ?? "Zerobyte Documentation",
			description: page.data.description ?? siteDescription,
			url: page.url,
			pageTree: await source.serializePageTree(source.getPageTree()),
		};
	});
const clientLoader = browserCollections.docs.createClientLoader({
	component(
		{ toc, frontmatter, default: MDX },
		// you can define props for the component
		_props: undefined,
	) {
		return (
			<DocsPage
				toc={toc}
				tableOfContent={{
					style: "clerk",
				}}
			>
				<div className="">
					<header className="docs-hero">
						<DocsTitle className="font-extrabold">{frontmatter.title}</DocsTitle>
						<div className="docs-description">
							<DocsDescription>{frontmatter.description}</DocsDescription>
						</div>
					</header>
					<div className="docs-prose-wrap">
						<DocsBody>
							<MDX
								components={{
									...defaultMdxComponents,
									a: DocsMdxLink,
									Accordion,
									Accordions,
									Card,
									Cards,
									Step,
									Steps,
								}}
							/>
						</DocsBody>
					</div>
				</div>
			</DocsPage>
		);
	},
});
function Page() {
	const data = useFumadocsLoader(Route.useLoaderData() as DocsLoaderData);

	return (
		<div data-docs-page className="relative">
			<div aria-hidden className="landing-hero-docs-grid pointer-events-none absolute inset-0" />
			<div className="relative">
				<DocsLayout {...baseOptions()} tree={data.pageTree}>
					<Suspense>{clientLoader.useContent(data.path)}</Suspense>
				</DocsLayout>
			</div>
		</div>
	);
}
