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 { Eye, Users } from "lucide-react";
import { DeleteSubmissionButton, DeleteAllSubmissionsButton } from "./client";

export const dynamic = "force-dynamic";

export default async function ResultsListPage() {
  const submissionsList = await db.query.submissions.findMany({
    orderBy: (s, { desc }) => [desc(s.submittedAt)],
  });

  return (
    <div className="space-y-6 max-w-4xl mx-auto">
      <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 />}
      </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 view 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}>
                      <TableCell className="font-medium">
                        <div className="flex items-center gap-2">
                          <Users className="w-4 h-4 text-muted-foreground" />
                          <span>{userLabel}</span>
                        </div>
                      </TableCell>
                      <TableCell className="text-muted-foreground">
                        {new Date(sub.submittedAt).toLocaleString()}
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Link href={`/form/admin/result/${sub.id}`}>
                            <Button size="sm" variant="outline" className="gap-1">
                              <Eye className="w-3.5 h-3.5" />
                              View Answers
                            </Button>
                          </Link>
                          <DeleteSubmissionButton id={sub.id} />
                        </div>
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      )}
    </div>
  );
}