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

"use client";

import { useCallback, useState } from "react";
import { Mail } from "lucide-react";
import { toast } from "sonner";
import { api, AdminError, type AdminUser } from "@/lib/api";
import { GoogleIcon, FacebookIcon } from "@/components/ui/provider-icons";
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 { RowMenu, type MenuItem } from "@/components/ui/menu";
import { Avatar } from "@/components/ui/avatar";
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.");
    }
  }

  function menuItems(u: AdminUser): MenuItem[] {
    const items: MenuItem[] = [
      { label: "Send notification", onClick: () => setNotify(u) },
    ];
    // No ban option for fellow admins (avoid locking each other out).
    if (u.role !== "admin") {
      items.push({
        label: u.banned_at ? "Unban account" : "Ban account",
        onClick: () => toggleBan(u),
        destructive: !u.banned_at,
      });
    }
    return items;
  }

  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>Auth</TH>
            <TH>Posts</TH>
            <TH>Joined</TH>
            <TH className="text-right">Actions</TH>
          </TR>
        </THead>
        <tbody>
          {list.items.length === 0 && !list.loading ? (
            <EmptyRow cols={6} label="No users found." />
          ) : (
            list.items.map((u) => (
              <TR key={u.id}>
                <TD>
                  <div className="flex items-center gap-3">
                    <Avatar src={u.avatar_url} name={u.name} />
                    <div className="min-w-0">
                      <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>
                    </div>
                  </div>
                </TD>
                <TD>
                  {u.email ?? <span className="text-muted-foreground">—</span>}
                </TD>
                <TD>
                  <AuthIcons user={u} />
                </TD>
                <TD>{u.post_count}</TD>
                <TD className="whitespace-nowrap">{fmtDate(u.created_at)}</TD>
                <TD className="text-right">
                  <RowMenu items={menuItems(u)} />
                </TD>
              </TR>
            ))
          )}
        </tbody>
      </Table>

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

function AuthIcons({ user }: { user: AdminUser }) {
  const hasGoogle = user.providers.includes("google");
  const hasFacebook = user.providers.includes("facebook");
  if (!user.has_password && !hasGoogle && !hasFacebook) {
    return <span className="text-muted-foreground">—</span>;
  }
  return (
    <div className="flex items-center gap-2">
      {user.has_password ? (
        // Tooltip shows the email on hover; clicking copies it to the clipboard.
        <button
          type="button"
          title={user.email ? `Click to copy ${user.email}` : "Email & password"}
          onClick={() => {
            if (!user.email) return;
            // No await before the write — keeps the click's user activation.
            navigator.clipboard.writeText(user.email).then(
              () => toast.success("Email copied"),
              () => toast.error("Could not copy"),
            );
          }}
          className="inline-flex text-muted-foreground outline-none hover:text-foreground focus-visible:text-foreground"
        >
          <Mail className="size-4" />
        </button>
      ) : null}
      {hasGoogle ? <GoogleIcon className="size-4" /> : null}
      {hasFacebook ? <FacebookIcon className="size-4" /> : null}
    </div>
  );
}

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>
  );
}