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";

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

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

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

  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;
  }
  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 items-center justify-between">
        <div className="flex items-center gap-2">
          <Link href={`/admin/form/${formId}/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>
        <div className="flex items-center gap-2">
          {prevId && (
            <Link href={`/admin/form/${formId}/result/${prevId}`}>
              <Button variant="outline" size="sm">Previous</Button>
            </Link>
          )}
          {nextId && (
            <Link href={`/admin/form/${formId}/result/${nextId}`}>
              <Button variant="outline" size="sm">Next</Button>
            </Link>
          )}
          <DeleteSubmissionButton id={submission.id} redirectUrl={`/admin/form/${formId}/result`} />
        </div>
      </div>

      <SubmissionDetailClient
        submission={submission}
        questions={questions}
        answers={answersMap}
      />

      <div className="flex justify-between items-center mt-8 pt-6 border-t">
        {prevId ? (
          <Link href={`/admin/form/${formId}/result/${prevId}`}>
            <Button variant="outline">
              <ArrowLeft className="w-4 h-4 mr-2" /> Previous
            </Button>
          </Link>
        ) : (
          <div />
        )}
        {nextId && (
          <Link href={`/admin/form/${formId}/result/${nextId}`}>
            <Button variant="outline">
              Next <ArrowRight className="w-4 h-4 ml-2" />
            </Button>
          </Link>
        )}
      </div>
    </div>
  );
}