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 { Kbd } from "@/components/ui/kbd";
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";
import {
  getDiscordMemberProfile,
  type DiscordMemberProfile,
} from "@/lib/discord";

export const dynamic = "force-dynamic";

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

function RespondentName({
  submission,
  profile,
}: {
  submission: {
    userName: string | null;
    userDiscordId: string | null;
  };
  profile: DiscordMemberProfile | null;
}) {
  const displayName =
    profile?.globalName ||
    profile?.username ||
    submission.userName ||
    submission.userDiscordId ||
    "Anonymous";
  const username = profile?.username || submission.userName;

  return (
    <span className="inline-flex flex-wrap items-center gap-1.5">
      <span>{displayName}</span>
      {username && username !== displayName && <Kbd>({username})</Kbd>}
    </span>
  );
}

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);
  const discordIds = [
    ...new Set(
      rows
        .map((submission) => submission.userDiscordId)
        .filter((discordId): discordId is string => Boolean(discordId))
    ),
  ];
  const respondentProfiles = new Map(
    await Promise.all(
      discordIds.map(
        async (discordId) =>
          [discordId, await getDiscordMemberProfile(discordId)] as const
      )
    )
  );

  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>Admin note</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"
                          >
                            <RespondentName
                              submission={submission}
                              profile={
                                submission.userDiscordId
                                  ? respondentProfiles.get(
                                      submission.userDiscordId
                                    ) ?? null
                                  : null
                              }
                            />
                          </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="max-w-80">
                          {submission.adminNote ? (
                            <p className="line-clamp-2 whitespace-pre-wrap text-sm">
                              {submission.adminNote}
                            </p>
                          ) : (
                            <span className="text-sm italic text-muted-foreground">
                              No note
                            </span>
                          )}
                        </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"
                      >
                        <RespondentName
                          submission={submission}
                          profile={
                            submission.userDiscordId
                              ? respondentProfiles.get(
                                  submission.userDiscordId
                                ) ?? null
                              : null
                          }
                        />
                      </Link>
                    </CardTitle>
                    <CardDescription>
                      {formatDate(submission.submittedAt)}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="flex items-start justify-between gap-4">
                    <div className="min-w-0">
                      <p className="text-xs font-medium text-muted-foreground">
                        Admin note
                      </p>
                      {submission.adminNote ? (
                        <p className="line-clamp-3 whitespace-pre-wrap text-sm">
                          {submission.adminNote}
                        </p>
                      ) : (
                        <p className="text-sm italic text-muted-foreground">
                          No note
                        </p>
                      )}
                    </div>
                    <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>
  );
}