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

import Link from "next/link";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Kbd } from "@/components/ui/kbd";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { DeleteAllSubmissionsButton, DeleteSubmissionButton } from "@/components/delete-buttons";
import { RealtimeRefresh } from "@/components/realtime-refresh";
import { ResultsFilters } from "./client";
import { getDiscordMemberProfile, type DiscordMemberProfile } from "@/lib/discord/discord";
import {
  getFilteredSubmissions,
  parseResultFilters,
  resultFiltersToSearchParams,
  type ResultFilters,
} from "@/lib/form/admin-form-results";

export const dynamic = "force-dynamic";

type ResultRow = Awaited<ReturnType<typeof getFilteredSubmissions>>["rows"][number];

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

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

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

function pageHref(formId: string, filters: ResultFilters, page: number) {
  const query = resultFiltersToSearchParams(filters, { page });
  return `/admin/form/${formId}/result${query ? `?${query}` : ""}`;
}

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, page, pageCount } = await getFilteredSubmissions(id, filters);
  const discordIds = [
    ...new Set(
      rows
        .map((row) => row.userDiscordId)
        .filter((value): value is string => Boolean(value)),
    ),
  ];
  const profiles = Object.fromEntries(
    await Promise.all(
      discordIds.map(async (discordId) => [
        discordId,
        await getDiscordMemberProfile(discordId),
      ]),
    ),
  );
  const returnQuery = resultFiltersToSearchParams(filters, { page });
  const detailHref = (submissionId: string) =>
    `/admin/form/${id}/result/${submissionId}${returnQuery ? `?return=${encodeURIComponent(returnQuery)}` : ""}`;

  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 formId={id} filters={filters} />

      {rows.length === 0 ? (
        <Card>
          <CardHeader>
            <CardTitle>No responses found</CardTitle>
            <CardDescription>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>Note</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {rows.map((row) => (
                    <TableRow key={row.id} className="relative cursor-pointer">
                      <TableCell>
                        <Link
                          href={detailHref(row.id)}
                          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 row={row} profile={row.userDiscordId ? profiles[row.userDiscordId] ?? null : null} />
                        </Link>
                        {row.userName && row.userDiscordId && (
                          <p className="text-xs text-muted-foreground">{row.userDiscordId}</p>
                        )}
                      </TableCell>
                      <TableCell>{formatDate(row.submittedAt)}</TableCell>
                      <TableCell className="max-w-80">
                        {row.adminNote ? (
                          <p className="line-clamp-2 whitespace-pre-wrap text-sm">{row.adminNote}</p>
                        ) : (
                          <span className="text-sm italic text-muted-foreground">No note</span>
                        )}
                      </TableCell>
                      <TableCell className="relative z-10 text-right">
                        <DeleteSubmissionButton id={row.id} compact />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>

          <div className="flex flex-col gap-3 md:hidden">
            {rows.map((row) => (
              <Card key={row.id} className="relative transition-colors hover:bg-muted/50">
                <CardHeader>
                  <CardTitle className="text-base">
                    <Link
                      href={detailHref(row.id)}
                      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 row={row} profile={row.userDiscordId ? profiles[row.userDiscordId] ?? null : null} />
                    </Link>
                  </CardTitle>
                  <CardDescription>{formatDate(row.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">Note</p>
                    {row.adminNote ? (
                      <p className="line-clamp-3 whitespace-pre-wrap text-sm">{row.adminNote}</p>
                    ) : (
                      <p className="text-sm italic text-muted-foreground">No note</p>
                    )}
                  </div>
                  <div className="relative z-10">
                    <DeleteSubmissionButton id={row.id} compact />
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </>
      )}

      {pageCount > 1 && (
        <Pagination>
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious
                href={pageHref(id, filters, Math.max(1, page - 1))}
                aria-disabled={page === 1}
                className={page === 1 ? "pointer-events-none opacity-50" : undefined}
              />
            </PaginationItem>
            <PaginationItem>
              <PaginationLink href={pageHref(id, filters, page)} isActive>
                {page} / {pageCount}
              </PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationNext
                href={pageHref(id, filters, Math.min(pageCount, page + 1))}
                aria-disabled={page === pageCount}
                className={page === pageCount ? "pointer-events-none opacity-50" : undefined}
              />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      )}
    </div>
  );
}