import type { ReactNode } from "react";
import { PERMS } from "@/lib/permission-slugs";
import type { HousekeepingPageInput } from "../../../route-handlers";
import { economyQuery } from "../queries/catalog";
import { EconomyCommandForm } from "./economy-command-form";
import {
	EconomyPageFrame,
	type EconomyPageProps,
	parseEconomyListInput,
} from "./economy-page-frame";

function forms({ context, routeId }: EconomyPageProps) {
	if (!context.has(PERMS.CATALOG_EDIT)) return null;
	if (routeId === "economy.catalog.maintenance") {
		return (
			<div className="grid gap-3 lg:grid-cols-2">
				{[
					["fix-offers", "Fix catalog offers"],
					["fix-everything", "Run complete catalog repair"],
					["fix-sprite-ids", "Fix sprite identifiers"],
					["reconcile-ids", "Reconcile identifiers"],
					["align-ids", "Align identifiers"],
					["remove-duplicates", "Remove duplicate base items"],
				].map(([operation, label]) => (
					<EconomyCommandForm
						key={operation}
						commandId={`economy.catalog.maintenance.${operation}`}
						buttonLabel={label}
						input={{}}
						requiresReason
					/>
				))}
			</div>
		);
	}
	const builderClub = routeId === "economy.catalog.builder-club-detail";
	return (
		<EconomyCommandForm
			commandId={
				builderClub
					? "economy.catalog.bc-page.change"
					: "economy.catalog.page.change"
			}
			buttonLabel="Save catalog page"
			input={{
				action: routeId === "economy.catalog.overview" ? "create" : "update",
			}}
			fields={[
				{ name: "id", label: "ID", type: "identifier" },
				{
					name: "caption",
					label: "Caption",
					type: "text",
					required: true,
					maxLength: 128,
				},
				{
					name: "parentId",
					label: "Parent ID",
					type: "number",
					required: true,
				},
				{
					name: "pageLayout",
					label: "Page layout",
					type: "text",
					required: true,
					maxLength: 26,
				},
			]}
		/>
	);
}

export function EconomyCatalogPage(
	props: EconomyPageProps & { readonly editor?: ReactNode },
) {
	return (
		<EconomyPageFrame
			title="Catalog"
			description="Catalog pages, Builder Club and maintenance workflows."
			result={props.result}
			forms={props.editor ?? forms(props)}
		/>
	);
}

export async function renderEconomyCatalogPage(input: HousekeepingPageInput) {
	const routeId = input.match.routeId as EconomyPageProps["routeId"];
	const result = await economyQuery.run(input.context, {
		routeId: routeId ?? "economy.catalog.overview",
		params: input.match.params,
		list: parseEconomyListInput(input.searchParams ?? {}),
	});
	const editor =
		result.ok &&
		(routeId === "economy.catalog.detail" ||
			routeId === "economy.catalog.builder-club-detail")
			? await (
					await import("./specialized-catalog-editor")
				).renderSpecializedCatalogEditor(
					routeId,
					input.match.params,
					input.context,
				)
			: null;
	return (
		<EconomyCatalogPage
			context={input.context}
			result={result}
			routeId={routeId}
			editor={editor}
		/>
	);
}