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";

export function EconomyValuePage(props: EconomyPageProps) {
	const forms = props.context.has(PERMS.SHOP_EDIT) ? (
		<div className="grid gap-3 lg:grid-cols-2">
			<EconomyCommandForm
				commandId="economy.value.category.change"
				buttonLabel="Create value category"
				input={{ action: "create" }}
				fields={[
					{
						name: "name",
						label: "Name",
						type: "text",
						required: true,
						maxLength: 255,
					},
					{
						name: "badge",
						label: "Badge",
						type: "text",
						required: true,
						maxLength: 255,
					},
					{ name: "priority", label: "Priority", type: "number", min: 1 },
				]}
			/>
			<EconomyCommandForm
				commandId="economy.value.rare.change"
				buttonLabel="Create rare value"
				input={{ action: "create" }}
				fields={[
					{
						name: "categoryId",
						label: "Category ID",
						type: "identifier",
						required: true,
					},
					{
						name: "name",
						label: "Name",
						type: "text",
						required: true,
						maxLength: 255,
					},
					{
						name: "currencyValue",
						label: "Currency value",
						type: "text",
						maxLength: 255,
					},
					{
						name: "currencyType",
						label: "Currency type",
						type: "text",
						required: true,
						maxLength: 255,
					},
					{
						name: "furnitureIcon",
						label: "Furniture icon",
						type: "text",
						required: true,
						maxLength: 255,
					},
				]}
			/>
		</div>
	) : null;
	return (
		<EconomyPageFrame
			title="Value tools"
			description="Rare-value categories and valuations."
			result={props.result}
			forms={forms}
		/>
	);
}

export async function renderEconomyValuePage(input: HousekeepingPageInput) {
	const routeId = input.match.routeId as EconomyPageProps["routeId"];
	const result = await economyQuery.run(input.context, {
		routeId: routeId ?? "economy.value.rare-values",
		params: input.match.params,
		list: parseEconomyListInput(input.searchParams ?? {}),
	});
	return (
		<EconomyValuePage
			context={input.context}
			result={result}
			routeId={routeId}
		/>
	);
}