import { PERMS } from "@/lib/permission-slugs";
import { resolveHousekeepingRouteTitle } from "../../../foundation/page/route-copy";
import type { HousekeepingPageInput } from "../../../route-handlers";
import { contentQuery } from "../queries/content-queries";
import { ContentCommandForm } from "./content-command-form";
import {
	ContentPageFrame,
	type ContentPageProps,
	parseContentListInput,
} from "./content-page-frame";

export function ContentHelpPage({
	title,
	context,
	result,
	routeId,
}: ContentPageProps) {
	const forms = context.has(PERMS.PAGES_EDIT) ? (
		<div className="grid gap-3 lg:grid-cols-2">
			{routeId?.includes("question") ? (
				<ContentCommandForm
					commandId="content.help.question.change"
					buttonLabel="Save help question"
					input={{ action: routeId.endsWith("create") ? "create" : "update" }}
					fields={[
						{ name: "id", label: "Question ID", type: "identifier" },
						{
							name: "name",
							label: "Question",
							type: "text",
							required: true,
							maxLength: 255,
						},
						{
							name: "answer",
							label: "Answer",
							type: "textarea",
							required: true,
							maxLength: 20_000,
						},
					]}
				/>
			) : null}
			{routeId === "content.help.email-templates" ? (
				<ContentCommandForm
					commandId="content.help.email-template.change"
					buttonLabel="Save email template"
					input={{ action: "update" }}
					fields={[
						{
							name: "id",
							label: "Template ID",
							type: "identifier",
							required: true,
						},
						{
							name: "subject",
							label: "Subject",
							type: "text",
							required: true,
							maxLength: 255,
						},
						{
							name: "body",
							label: "Body",
							type: "textarea",
							required: true,
							maxLength: 100_000,
						},
					]}
				/>
			) : null}
		</div>
	) : null;
	return (
		<ContentPageFrame
			title={title ?? "Help content"}
			description="Manage help questions and email templates."
			result={result}
			forms={forms}
		/>
	);
}

export async function renderContentHelpPage(input: HousekeepingPageInput) {
	const routeId = input.match.routeId as ContentPageProps["routeId"];
	const title = resolveHousekeepingRouteTitle(input, "Help content");
	const result = await contentQuery.run(input.context, {
		routeId: routeId ?? "content.help.questions",
		params: input.match.params,
		list: parseContentListInput(input.searchParams ?? {}),
	});
	return (
		<ContentHelpPage
			title={title}
			context={input.context}
			result={result}
			routeId={routeId}
		/>
	);
}