import { db } from "@/db";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { Users, ArrowLeft } from "lucide-react";
import { DeleteSubmissionButton, DeleteAllSubmissionsButton } from "@/components/delete-buttons";

export const dynamic = "force-dynamic";

export default async function ResultsListPage(
  props: {
    params: Promise<{ id: string }>;
  }
) {
  const params = await props.params;
  const submissionsList = await db.query.submissions.findMany({
    where: (s, { eq }) => eq(s.formId, params.id),
    orderBy: (s, { desc }) => [desc(s.submittedAt)],
  });

  return (
    <div className="space-y-6 w-full max-w-4xl mx-auto p-4 md:p-6">
      <div>
        <Button variant="ghost" asChild className="mb-4">
          <Link href={`/admin/form/${params.id}`}>
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Form Editor
          </Link>
        </Button>
      </div>
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Form Submissions</h1>
          <p className="text-muted-foreground mt-1">
            Review all submissions and individual user answers.
          </p>
        </div>
        {submissionsList.length > 0 && <DeleteAllSubmissionsButton formId={params.id} />}
      </div>

      {submissionsList.length === 0 ? (
        <Card className="border-dashed border-2 py-12 text-center">
          <CardHeader>
            <CardTitle>No submissions yet</CardTitle>
            <CardDescription>
              When users fill out your form, their responses will appear here.
            </CardDescription>
          </CardHeader>
        </Card>
      ) : (
        <Card>
          <CardHeader>
            <CardTitle>Submissions</CardTitle>
            <CardDescription>
              Total {submissionsList.length} responses collected. Click on a submission to inspect individual answers.
            </CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>User (Discord)</TableHead>
                  <TableHead>Submitted At</TableHead>
                  <TableHead className="text-right">Action</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {submissionsList.map((sub) => {
                  const userLabel = sub.userName
                    ? `${sub.userName} (${sub.userDiscordId || "N/A"})`
                    : sub.userDiscordId || "Anonymous";

                  return (
                    <TableRow key={sub.id} className="cursor-pointer group">
                      <TableCell className="p-0">
                        <Link href={`/admin/form/${params.id}/result/${sub.id}`} className="flex items-center gap-2 p-4 w-full h-full font-medium">
                          <Users className="w-4 h-4 text-muted-foreground" />
                          <span>{userLabel}</span>
                        </Link>
                      </TableCell>
                      <TableCell className="p-0 text-muted-foreground">
                        <Link href={`/admin/form/${params.id}/result/${sub.id}`} className="flex items-center p-4 w-full h-full">
                          {new Date(sub.submittedAt).toLocaleString("en-US", { timeZone: "Asia/Bangkok", hour12: false })}
                        </Link>
                      </TableCell>
                      <TableCell className="text-right p-4">
                        <div className="flex justify-end gap-2">
                          <DeleteSubmissionButton id={sub.id} />
                        </div>
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      )}
    </div>
  );
}