import { db } from "@/db";
import { FormFillerClient } from "../client";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth-options";
import { notFound } from "next/navigation";
import LoginDialog from "@/components/login-dialog";
import { canAccessForm, getSessionDiscordId } from "@/lib/auth";
import { RealtimeRefresh } from "@/components/realtime-refresh";
import {
  decodeCheckboxAnswer,
  type FormAnswerValue,
} from "@/lib/form-answer-values";
import { getFormSubmissionStats } from "@/lib/form-submission-stats";

export const dynamic = "force-dynamic";

export default async function FormsSubmitPage(
  props: {
    params: Promise<{ id: string }>;
    searchParams: Promise<{ submission?: string | string[] }>;
  }
) {
  const [params, query] = await Promise.all([props.params, props.searchParams]);
  const session = await getServerSession(authOptions);
  const discordId = getSessionDiscordId(session);

  const form = await db.query.forms.findFirst({
    where: (f, { eq }) => eq(f.id, params.id),
  });

  if (!form) {
    return notFound();
  }

  if (!discordId) {
    return <LoginDialog />;
  }

  if (!(await canAccessForm(form, discordId))) {
    return notFound();
  }

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

  const [ownSubmissions, submissionStats] = await Promise.all([
    db.query.submissions.findMany({
      where: (s, { eq, and }) =>
        and(eq(s.formId, form.id), eq(s.userDiscordId, discordId)),
      orderBy: (s, { desc }) => [desc(s.submittedAt)],
    }),
    getFormSubmissionStats([form.id], discordId),
  ]);
  const stats = submissionStats.get(form.id) ?? {
    totalAnswers: 0,
    queueNumber: null,
  };

  const requestedSubmissionId = Array.isArray(query.submission)
    ? query.submission[0]
    : query.submission;
  const existingSubmission = form.allowMultipleSubmissions
    ? ownSubmissions.find((submission) => submission.id === requestedSubmissionId) ?? null
    : ownSubmissions[0] ?? null;

  const answersBySubmissionId: Record<
    string,
    Record<string, { value: FormAnswerValue; imageCdnId: string | null }>
  > = {};
  if (ownSubmissions.length > 0) {
    const answersList = await db.query.answers.findMany({
      where: (a, { inArray }) => inArray(a.submissionId, ownSubmissions.map((submission) => submission.id)),
    });
    const questionTypes = new Map(questionsList.map((question) => [question.id, question.type]));
    for (const answer of answersList) {
      answersBySubmissionId[answer.submissionId] ??= {};
      answersBySubmissionId[answer.submissionId][answer.questionId] = {
        value:
        questionTypes.get(answer.questionId) === "checkbox"
          ? decodeCheckboxAnswer(answer.value)
          : answer.value,
        imageCdnId: answer.imageCdnId ?? null,
      };
    }
  }
  const initialAnswers = existingSubmission
    ? answersBySubmissionId[existingSubmission.id] ?? {}
    : {};

  return (
    <>
      <RealtimeRefresh topic="forms" formId={form.id} />
      <div className="mx-auto max-w-2xl">
        <FormFillerClient 
          form={form} 
          questions={questionsList} 
          initialAnswers={initialAnswers} 
          hasSubmission={Boolean(existingSubmission)}
          selectedSubmissionId={existingSubmission?.id ?? null}
          ownSubmissions={ownSubmissions.map((submission) => ({
            id: submission.id,
            submittedAt: submission.submittedAt.toISOString(),
            answers: answersBySubmissionId[submission.id] ?? {},
          }))}
          totalAnswers={stats.totalAnswers}
          queueNumber={stats.queueNumber}
        />
      </div>
    </>
  );
}