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

"use client";

import { useCallback, useState } from "react";
import { toast } from "sonner";
import { api, AdminError, type AdminUser } 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 { Modal } from "@/components/ui/modal";
import { useConfirm } from "@/components/confirm";
import { Input, Textarea } from "@/components/ui/input";
import { fmtDate } from "@/lib/utils";

export default function UsersPage() {
  const [q, setQ] = useState("");
  const fetcher = useCallback(
    (limit: number, offset: number) => api.users(q, limit, offset),
    [q],
  );
  const list = usePagedList<AdminUser>(fetcher, [q]);
  const confirm = useConfirm();
  const [notify, setNotify] = useState<AdminUser | null>(null);

  async function toggleBan(u: AdminUser) {
    const banning = !u.banned_at;
    if (
      banning &&
      !(await confirm({
        title: `Suspend @${u.handle}?`,
        message: "They'll be signed out and unable to log in until you unban them.",
        confirmLabel: "Suspend account",
        destructive: true,
      }))
    ) {
      return;
    }
    try {
      await (banning ? api.banUser(u.id) : api.unbanUser(u.id));
      toast.success(banning ? "Account suspended." : "Account restored.");
      list.refresh();
    } catch (err) {
      toast.error(err instanceof AdminError ? err.message : "Action failed.");
    }
  }

  return (
    <ListShell
      title="Users"
      total={list.total}
      searchPlaceholder="Search name, handle, or email…"
      onQueryChange={setQ}
      list={list}
    >
      <Table>
        <THead>
          <TR>
            <TH>User</TH>
            <TH>Email</TH>
            <TH>Role</TH>
            <TH>Joined</TH>
            <TH className="text-right">Actions</TH>
          </TR>
        </THead>
        <tbody>
          {list.items.length === 0 && !list.loading ? (
            <EmptyRow cols={5} label="No users found." />
          ) : (
            list.items.map((u) => (
              <TR key={u.id}>
                <TD>
                  <div className="flex items-center gap-2">
                    <span className="font-medium">{u.name}</span>
                    {u.banned_at ? (
                      <span className="rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive">
                        Suspended
                      </span>
                    ) : null}
                  </div>
                  <div className="text-xs text-muted-foreground">@{u.handle}</div>
                </TD>
                <TD>
                  {u.email ?? <span className="text-muted-foreground">—</span>}
                </TD>
                <TD className="capitalize">{u.role}</TD>
                <TD className="whitespace-nowrap">{fmtDate(u.created_at)}</TD>
                <TD className="text-right">
                  <div className="flex flex-wrap justify-end gap-2">
                    <Button size="sm" variant="outline" onClick={() => setNotify(u)}>
                      Notify
                    </Button>
                    {u.role !== "admin" ? (
                      <Button
                        size="sm"
                        variant={u.banned_at ? "outline" : "destructive"}
                        onClick={() => toggleBan(u)}
                      >
                        {u.banned_at ? "Unban" : "Ban"}
                      </Button>
                    ) : null}
                  </div>
                </TD>
              </TR>
            ))
          )}
        </tbody>
      </Table>

      <NotifyModal user={notify} onClose={() => setNotify(null)} />
    </ListShell>
  );
}

function NotifyModal({
  user,
  onClose,
}: {
  user: AdminUser | null;
  onClose: () => void;
}) {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [busy, setBusy] = useState(false);

  async function send() {
    if (!user || body.trim() === "") return;
    setBusy(true);
    try {
      await api.notifyUser(user.id, title.trim(), body.trim());
      toast.success(`Notification sent to @${user.handle}`);
      setTitle("");
      setBody("");
      onClose();
    } catch (err) {
      toast.error(err instanceof AdminError ? err.message : "Could not send.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <Modal
      open={!!user}
      onClose={onClose}
      title={user ? `Notify @${user.handle}` : "Notify"}
    >
      <div className="space-y-4">
        <p className="text-sm text-muted-foreground">
          Sends an in-app notification, plus web push and email where available.
        </p>
        <label className="block space-y-1.5">
          <span className="text-sm font-medium">Title (optional)</span>
          <Input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            maxLength={120}
            placeholder="A note from the team"
          />
        </label>
        <label className="block space-y-1.5">
          <span className="text-sm font-medium">Message</span>
          <Textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
            rows={5}
            maxLength={4000}
            placeholder="Write your message…"
          />
        </label>
        <div className="flex justify-end gap-2">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button onClick={send} disabled={busy || body.trim() === ""}>
            {busy ? "Sending…" : "Send notification"}
          </Button>
        </div>
      </div>
    </Modal>
  );
}