spsays-admin/app/(dashboard)/reports/page.tsx

"use client";

import { useCallback, useState } from "react";
import { toast } from "sonner";
import { api, AdminError, type AdminReport, type ReportType } from "@/lib/api";
import { usePagedList } from "@/lib/use-paged-list";
import { ListShell, EmptyRow } from "@/components/list-shell";
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { useConfirm } from "@/components/confirm";
import { cn, fmtDate } from "@/lib/utils";

const TYPES: { key: ReportType; label: string }[] = [
  { key: "post", label: "Posts" },
  { key: "comment", label: "Comments" },
  { key: "user", label: "Accounts" },
];

export default function ReportsPage() {
  const [type, setType] = useState<ReportType>("post");
  const [q, setQ] = useState("");
  const fetcher = useCallback(
    (limit: number, offset: number) => api.reports(type, q, limit, offset),
    [type, q],
  );
  const list = usePagedList<AdminReport>(fetcher, [type, q]);
  const confirm = useConfirm();

  async function run(action: Promise<unknown>, successMsg: string) {
    try {
      await action;
      toast.success(successMsg);
      list.refresh();
    } catch (err) {
      toast.error(err instanceof AdminError ? err.message : "Action failed.");
    }
  }

  // Per-report moderation buttons. Destructive actions confirm first.
  function actionsFor(r: AdminReport) {
    if (r.type === "post") {
      return (
        <>
          <Button size="sm" variant="outline" onClick={() => run(api.hidePost(r.target_id), "Post hidden.")}>
            Hide
          </Button>
          <Button
            size="sm"
            variant="destructive"
            onClick={async () => {
              if (
                await confirm({
                  title: "Delete this post?",
                  message:
                    "It will be removed from the app. You can restore it later from the Posts tab.",
                  confirmLabel: "Delete post",
                  destructive: true,
                })
              ) {
                run(api.deletePost(r.target_id), "Post deleted.");
              }
            }}
          >
            Delete
          </Button>
        </>
      );
    }
    if (r.type === "comment") {
      return (
        <Button
          size="sm"
          variant="destructive"
          onClick={async () => {
            if (
              await confirm({
                title: "Delete this comment?",
                message: "It will be removed from the thread (restorable).",
                confirmLabel: "Delete comment",
                destructive: true,
              })
            ) {
              run(api.deleteComment(r.target_id), "Comment deleted.");
            }
          }}
        >
          Delete
        </Button>
      );
    }
    return (
      <Button
        size="sm"
        variant="destructive"
        onClick={async () => {
          if (
            await confirm({
              title: "Suspend this account?",
              message: "They'll be signed out and unable to log in until you unban them.",
              confirmLabel: "Suspend account",
              destructive: true,
            })
          ) {
            run(api.banUser(r.target_id), "Account suspended.");
          }
        }}
      >
        Ban
      </Button>
    );
  }

  const targetLabel =
    type === "user" ? "Reported account" : type === "comment" ? "Comment" : "Post";

  return (
    <ListShell
      title="Reports"
      total={list.total}
      searchPlaceholder="Search content or reporter…"
      onQueryChange={setQ}
      list={list}
      toolbar={
        <div className="flex gap-1 rounded-lg border border-border bg-card p-1">
          {TYPES.map((t) => (
            <button
              key={t.key}
              onClick={() => setType(t.key)}
              className={cn(
                "rounded-md px-3 py-1.5 text-sm transition-colors",
                type === t.key
                  ? "bg-accent text-accent-foreground font-medium"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              {t.label}
            </button>
          ))}
        </div>
      }
    >
      <Table>
        <THead>
          <TR>
            <TH>{targetLabel}</TH>
            <TH>Reason</TH>
            <TH>Reporter</TH>
            <TH>Reported</TH>
            <TH className="text-right">Actions</TH>
          </TR>
        </THead>
        <tbody>
          {list.items.length === 0 && !list.loading ? (
            <EmptyRow cols={5} label="No reports." />
          ) : (
            list.items.map((r) => (
              <TR key={r.id} className={r.resolved_at ? "opacity-60" : ""}>
                <TD className="max-w-xs">
                  {type === "user" ? (
                    <span className="font-medium">
                      {r.target_text ? `@${r.target_text}` : "—"}
                    </span>
                  ) : (
                    <>
                      <div className="line-clamp-2">{r.target_text || "—"}</div>
                      {r.target_author_handle ? (
                        <div className="mt-0.5 text-xs text-muted-foreground">
                          by @{r.target_author_handle}
                        </div>
                      ) : null}
                    </>
                  )}
                </TD>
                <TD className="max-w-xs">
                  <div className="text-xs uppercase tracking-wide text-muted-foreground">
                    {r.category}
                  </div>
                  {r.reason ? (
                    <div className="mt-0.5 line-clamp-2">{r.reason}</div>
                  ) : null}
                </TD>
                <TD className="whitespace-nowrap text-xs text-muted-foreground">
                  {r.reporter_handle ? `@${r.reporter_handle}` : "—"}
                </TD>
                <TD className="whitespace-nowrap">{fmtDate(r.created_at)}</TD>
                <TD className="text-right">
                  <div className="flex flex-wrap justify-end gap-2">
                    {actionsFor(r)}
                    {r.resolved_at ? (
                      <span className="self-center text-xs text-muted-foreground">
                        Resolved
                      </span>
                    ) : (
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() =>
                          run(api.resolveReport(r.type, r.id), "Report resolved.")
                        }
                      >
                        Resolve
                      </Button>
                    )}
                  </div>
                </TD>
              </TR>
            ))
          )}
        </tbody>
      </Table>
    </ListShell>
  );
}