import { servTrpc } from '~/app/_trpc/ServerClient'
import SystemPromptForm from './_components/SystemPromptForm'
import ModelSelector from './_components/ModelSelector'

export default async function SystemPromptPage() {
	const prompt = await servTrpc.chat.getSystemPrompt()
	const model = await servTrpc.chat.getModel()

	return (
		<div className="w-full max-w-2xl p-6 flex flex-col gap-8">
			<div className="flex flex-col gap-4">
				<div>
					<h1 className="text-lg font-semibold">AI Model</h1>
					<p className="text-sm text-muted-foreground">
						The OpenAI model used to respond to chat requests.
					</p>
				</div>
				<ModelSelector initialValue={model} />
			</div>
			<div className="flex flex-col gap-4">
				<div>
					<h1 className="text-lg font-semibold">AI System Prompt</h1>
					<p className="text-sm text-muted-foreground">
						This prompt is sent to the model on every chat request.
					</p>
				</div>
				<SystemPromptForm initialValue={prompt} />
			</div>
		</div>
	)
}