erika/app/admin/form/[id]/result/page.tsx

import Link from "next/link";
import { redirect } from "next/navigation";
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import {
  getFilteredSubmissions,
  parseResultFilters,
  resultFiltersToSearchParams,
  RESULTS_PAGE_SIZE,
} from "@/lib/admin-form-results";
import { DeleteAllSubmissionsButton, DeleteSubmissionButton } from "@/components/delete-buttons";
import { ResultsFilters } from "@/components/results-filters";
import { RealtimeRefresh } from "@/components/realtime-refresh";

export const dynamic = "force-dynamic";

function formatDate(date: Date) {
  return date.toLocaleString("en-GB", {
    timeZone: "Asia/Bangkok",
    hour12: false,
  });
}

export default async function ResultsListPage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const [{ id }, rawFilters] = await Promise.all([params, searchParams]);
  const filters = parseResultFilters(rawFilters);
  const { rows, total } = await getFilteredSubmissions(id, filters);
  const pageCount = Math.max(1, Math.ceil(total / RESULTS_PAGE_SIZE));
  if (total > 0 && filters.page > pageCount) {
    redirect(`?${resultFiltersToSearchParams(filters, { page: pageCount })}`);
  }
  const currentPage = Math.min(filters.page, pageCount);
  const listQuery = resultFiltersToSearchParams(filters);

  return (
    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 pb-12 md:p-6">
      <RealtimeRefresh topic="submissions" formId={id} />
      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h2 className="text-2xl font-semibold">Responses</h2>
          <p className="text-muted-foreground">
            {total} matching {total === 1 ? "response" : "responses"}
          </p>
        </div>
        {total > 0 && <DeleteAllSubmissionsButton formId={id} />}
      </div>

      <ResultsFilters key={listQuery} formId={id} filters={filters} />

      {rows.length === 0 ? (
        <Card>
          <CardHeader>
            <CardTitle>No responses found</CardTitle>
            <CardDescription>
              {total === 0 && !listQuery
                ? "Responses will appear here after people submit the form."
                : "Try changing or clearing the current filters."}
            </CardDescription>
          </CardHeader>
        </Card>
      ) : (
        <>
          <Card className="hidden md:block">
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Respondent</TableHead>
                    <TableHead>Submitted</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {rows.map((submission) => {
                    const detailHref = `/admin/form/${id}/result/${submission.id}${listQuery ? `?return=${encodeURIComponent(listQuery)}` : ""}`;
                    const edited =
                      Array.isArray(submission.editHistory) &&
                      submission.editHistory.length > 0;
                    return (
                      <TableRow key={submission.id} className="relative cursor-pointer">
                        <TableCell>
                          <Link
                            href={detailHref}
                            className="font-medium after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"
                          >
                            {submission.userName ||
                              submission.userDiscordId ||
                              "Anonymous"}
                          </Link>
                          {submission.userName && submission.userDiscordId && (
                            <p className="text-xs text-muted-foreground">
                              {submission.userDiscordId}
                            </p>
                          )}
                        </TableCell>
                        <TableCell>{formatDate(submission.submittedAt)}</TableCell>
                        <TableCell>
                          <Badge variant={edited ? "secondary" : "outline"}>
                            {edited ? "Edited" : "Original"}
                          </Badge>
                        </TableCell>
                        <TableCell className="relative z-10 text-right">
                          <DeleteSubmissionButton id={submission.id} compact />
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </CardContent>
          </Card>

          <div className="flex flex-col gap-3 md:hidden">
            {rows.map((submission) => {
              const detailHref = `/admin/form/${id}/result/${submission.id}${listQuery ? `?return=${encodeURIComponent(listQuery)}` : ""}`;
              return (
                <Card
                  key={submission.id}
                  className="relative transition-colors hover:bg-muted/50"
                >
                  <CardHeader>
                    <CardTitle className="text-base">
                      <Link
                        href={detailHref}
                        className="after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"
                      >
                        {submission.userName ||
                          submission.userDiscordId ||
                          "Anonymous"}
                      </Link>
                    </CardTitle>
                    <CardDescription>
                      {formatDate(submission.submittedAt)}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="flex justify-end">
                    <div className="relative z-10">
                      <DeleteSubmissionButton id={submission.id} compact />
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </>
      )}

      {pageCount > 1 && (
        <Pagination>
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious
                href={`?${resultFiltersToSearchParams(filters, {
                  page: Math.max(1, currentPage - 1),
                })}`}
                aria-disabled={currentPage === 1}
              />
            </PaginationItem>
            <PaginationItem>
              <PaginationLink href={`?${listQuery}`} isActive size="default">
                {currentPage} / {pageCount}
              </PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationNext
                href={`?${resultFiltersToSearchParams(filters, {
                  page: Math.min(pageCount, currentPage + 1),
                })}`}
                aria-disabled={currentPage === pageCount}
              />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      )}
    </div>
  );
}