"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 { sendAlert } from "@/lib/actions";
import { useRef } from "react";

export function UserActions({ id }: { id: string }) {
  const alertMessage = useRef("");

  return (
    <div className="flex gap-2">
      <Link
        className={`flex-1 ${buttonVariants({ variant: "secondary" })}`}
        href={`/panel/inspect/account/${id}`}
      >
        Account
      </Link>
      <Button className="flex-1 bg-orange-400 hover:bg-orange-300">
        Suspend
      </Button>
      <Button className="flex-1" variant="destructive">
        Ban
      </Button>
      <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;
                    sendAlert(id, alertMessage.current);
                    alertMessage.current = "";
                  }}
                >
                  Send
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>

          <DropdownMenuItem>Inspect Messages</DropdownMenuItem>
          <DropdownMenuItem>Wipe Messages</DropdownMenuItem>
          <DropdownMenuItem>Clear Friends</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}