import { db } from "@/db";
import { notFound } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import SubmissionDetailClient from "./client";
import { DeleteSubmissionButton } from "@/components/delete-buttons";

interface SubmissionDetailPageProps {
  params: Promise<{
    id: string;
  }>;
}

export default async function SubmissionDetailPage({ params }: SubmissionDetailPageProps) {
  const { id } = await params;

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

  if (!submission) {
    notFound();
  }

  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, string> = {};
  for (const ans of answersList) {
    answersMap[ans.questionId] = ans.value;
  }

  return (
    <div className="space-y-6 max-w-2xl mx-auto">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Link href="/form/admin/result">
            <Button variant="ghost" size="icon">
              <ArrowLeft className="w-4 h-4" />
            </Button>
          </Link>
          <h1 className="text-3xl font-bold tracking-tight">Response Detail</h1>
        </div>
        <DeleteSubmissionButton id={submission.id} redirectUrl="/form/admin/result" />
      </div>

      <SubmissionDetailClient
        submission={submission}
        questions={questions}
        answers={answersMap}
      />
    </div>
  );
}