"use client";

import {
  Loader2,
  MoreHorizontal,
  RefreshCw,
  Shield,
  Trash2,
  UserMinus,
} from "lucide-react";
import { useContext, useState } from "react";

import { AuthUIContext } from "../../../lib/auth-ui-provider";
import type { Member } from "../../../types/auth-client";
import { Button } from "../../ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../../ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "../../ui/dropdown-menu";
import RoleUpdate from "./role-update";

interface MemberActionMenuProps {
  member: Member;
}

export function MemberActionMenu({ member }: MemberActionMenuProps) {
  const [isOpen, setIsOpen] = useState(false);

  const [showRemoveDialog, setShowRemoveDialog] = useState(false);
  const [showRoleDialog, setShowRoleDialog] = useState(false);

  const { authClient, toast } = useContext(AuthUIContext);
  const { data } = authClient.useActiveOrganization();

  const [actionPending, setActionPending] = useState(false);

  const handleAction = async () => {
    setActionPending(true);
    await authClient.organization.removeMember(
      {
        memberIdOrEmail: member?.id,
      },
      {
        onSuccess(context) {
          toast({
            message: `Member is removed from  ${data?.name}`,
          });
        },
        onError(context) {
          toast({
            message: context.error.message,
            variant: "error",
          });
        },
      }
    );
    setActionPending(false);
  };

  return (
    <>
      <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
        <DropdownMenuTrigger>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setIsOpen(true)}
            className="h-8 w-8"
          >
            <MoreHorizontal className="h-4 w-4" />
            <span className="sr-only">Open menu</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem
            disabled={actionPending}
            onClick={() => {
              setIsOpen(false);
              setShowRoleDialog(true);
            }}
          >
            <Shield className="h-4 w-4 mr-2" />
            Update Role
          </DropdownMenuItem>
          <DropdownMenuItem
            disabled={actionPending}
            onClick={() => {
              setIsOpen(false);
              setShowRemoveDialog(true);
            }}
          >
            <Trash2 className="mr-2 h-4 w-4" />
            Remove Member
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <RoleUpdate
        showRoleDialog={showRoleDialog}
        setShowRoleDialog={() => setShowRoleDialog(false)}
        currentRole={member?.role}
        member={member}
      />

      <Dialog open={showRemoveDialog} onOpenChange={setShowRemoveDialog}>
        <DialogContent
          className="sm:max-w-[425px] "
          onOpenAutoFocus={(e) => e.preventDefault()}
        >
          <DialogHeader>
            <DialogTitle>Remove User</DialogTitle>
            <DialogDescription>
              Are you sure you want to remove this user? This action cannot be
              undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button
              disabled={actionPending}
              variant="outline"
              onClick={() => !actionPending && setShowRemoveDialog(false)}
            >
              Cancel
            </Button>
            <Button
              disabled={actionPending}
              variant="destructive"
              onClick={() => handleAction("removeMember")}
            >
              {actionPending ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Removing...
                </>
              ) : (
                "Remove"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}