import { db } from "@/db";
import { notFound } from "next/navigation";
import { Badge } from "@/components/ui/badge";
import { FormFillerClient } from "@/app/form/client";

export const dynamic = "force-dynamic";

export default async function AdminFormPreviewPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const form = await db.query.forms.findFirst({
    where: (record, { eq }) => eq(record.id, id),
  });

  if (!form) notFound();

  const questions = await db.query.questions.findMany({
    where: (question, { eq }) => eq(question.formId, form.id),
    orderBy: (question, { asc }) => [asc(question.displayOrder)],
  });

  return (
    <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 p-4 pb-12 md:p-6">
      <div>
        <Badge variant="secondary">Admin preview</Badge>
      </div>
      <FormFillerClient
        form={{ ...form, isOpen: true, closesAt: null }}
        questions={questions}
        totalAnswers={0}
        queueNumber={null}
        preview
      />
    </div>
  );
}