panel/components/inspector/UserActions.tsx

"use client";

import Link from "next/link";
import { Button, buttonVariants } from "../ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "../ui/alert-dialog";
import { Input } from "../ui/input";
import { banUser, sendAlert, suspendUser } from "@/lib/actions";
import { useRef } from "react";
import { useToast } from "../ui/use-toast";

export function UserActions({
  id,
  counts,
}: {
  id: string;
  counts: { pending: number; all: number };
}) {
  const alertMessage = useRef("");
  const { toast } = useToast();

  return (
    <div className="flex gap-2">
      <Link
        className={`flex-1 ${buttonVariants({ variant: "secondary" })}`}
        href={`/panel/inspect/account/${id}`}
      >
        Account
      </Link>

      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button className="flex-1 bg-orange-400 hover:bg-orange-300">
            Suspend
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              Are you sure you want to suspend this user?
            </AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={() =>
                suspendUser(id)
                  .then(() => toast({ title: "Suspended user" }))
                  .catch((err) =>
                    toast({
                      title: "Failed to suspend user!",
                      description: err,
                      variant: "destructive",
                    })
                  )
              }
            >
              Suspend
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button className="flex-1" variant="destructive">
            Ban
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              Are you sure you want to ban this user?
            </AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={() =>
                banUser(id)
                  .then(() => toast({ title: "Banned user" }))
                  .catch((err) =>
                    toast({
                      title: "Failed to ban user!",
                      description: err,
                      variant: "destructive",
                    })
                  )
              }
            >
              Ban
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" className="flex-1">
            More Options
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <AlertDialog>
            <AlertDialogTrigger className="w-full">
              <DropdownMenuItem
                onClick={() => {
                  throw "Cancel immediate propagation.";
                }}
              >
                Send Alert
              </DropdownMenuItem>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Send Alert</AlertDialogTitle>
                <AlertDialogDescription className="flex flex-col gap-2">
                  <span>
                    This will send a message from the Platform Moderation
                    account.
                  </span>
                  <Input
                    placeholder="Enter a message..."
                    name="message"
                    onChange={(e) =>
                      (alertMessage.current = e.currentTarget.value)
                    }
                  />
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction
                  onClick={() => {
                    if (!alertMessage.current) return;
                    alertMessage.current = "";

                    sendAlert(id, alertMessage.current)
                      .then(() => toast({ title: "Sent Alert" }))
                      .catch((err) =>
                        toast({
                          title: "Failed to send alert!",
                          description: err,
                          variant: "destructive",
                        })
                      );
                  }}
                >
                  Send
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>

          {/* <DropdownMenuItem>
            Clear ({counts.pending}) Friend Requests
          </DropdownMenuItem>

          <DropdownMenuItem>
            Clear All ({counts.all}) Relations
          </DropdownMenuItem> */}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}