import { db } from "@/db";
import { notFound } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ArrowLeft, ArrowRight } from "lucide-react";
import SubmissionDetailClient from "./client";
import { DeleteSubmissionButton } from "@/components/delete-buttons";
import { RealtimeRefresh } from "@/components/realtime-refresh";
import { getDiscordMemberProfile } from "@/lib/discord/discord";

interface SubmissionDetailPageProps {
  params: Promise<{
    id: string;
    submissionId: string;
  }>;
  searchParams: Promise<{ return?: string | string[] }>;
}

export default async function SubmissionDetailPage({
  params,
  searchParams,
}: SubmissionDetailPageProps) {
  const [{ id: formId, submissionId }, query] = await Promise.all([
    params,
    searchParams,
  ]);
  const returnValue = Array.isArray(query.return) ? query.return[0] : query.return;
  const returnQuery = returnValue?.slice(0, 1000) || "";
  const backHref = `/admin/form/${formId}/result${returnQuery ? `?${returnQuery}` : ""}`;
  const detailHref = (id: string) =>
    `/admin/form/${formId}/result/${id}${returnQuery ? `?return=${encodeURIComponent(returnQuery)}` : ""}`;

  const submission = await db.query.submissions.findFirst({
    where: (s, { eq, and }) =>
      and(eq(s.id, submissionId), eq(s.formId, formId)),
  });

  if (!submission) {
    notFound();
  }

  const respondentProfile = submission.userDiscordId
    ? await getDiscordMemberProfile(submission.userDiscordId)
    : null;

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

  const answersList = await db.query.answers.findMany({
    where: (a, { eq }) => eq(a.submissionId, submission.id),
  });

  const answersMap: Record<string, { value: string; imageCdnId: string | null }> = {};
  for (const ans of answersList) {
    answersMap[ans.questionId] = {
      value: ans.value,
      imageCdnId: ans.imageCdnId ?? null,
    };
  }
  const submissionsList = await db.query.submissions.findMany({
    where: (s, { eq }) => eq(s.formId, formId),
    orderBy: (s, { desc }) => [desc(s.submittedAt)],
  });

  const currentIndex = submissionsList.findIndex((s) => s.id === submissionId);
  const prevId = currentIndex > 0 ? submissionsList[currentIndex - 1].id : null;
  const nextId = currentIndex >= 0 && currentIndex < submissionsList.length - 1 ? submissionsList[currentIndex + 1].id : null;

  return (
    <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-10">
      <RealtimeRefresh topic="submissions" formId={formId} />
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <Button variant="ghost" asChild className="self-start">
          <Link href={backHref}>
            <ArrowLeft data-icon="inline-start" />
            Back to responses
          </Link>
        </Button>
        <DeleteSubmissionButton id={submission.id} redirectUrl={backHref} />
      </div>

      <SubmissionDetailClient
        key={submission.id}
        submission={{
          ...submission,
          userProfile: respondentProfile,
        }}
        questions={questions}
        answers={answersMap}
      />

      <div className="flex justify-between items-center mt-8 pt-6 border-t">
        {prevId ? (
            <Link href={detailHref(prevId)}>
            <Button variant="outline">
              <ArrowLeft data-icon="inline-start" /> Previous
            </Button>
          </Link>
        ) : (
          <div />
        )}
        {nextId && (
            <Link href={detailHref(nextId)}>
            <Button variant="outline">
              Next <ArrowRight data-icon="inline-end" />
            </Button>
          </Link>
        )}
      </div>
    </div>
  );
}