"use client";

import { ChevronDownIcon } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
import type { TOrganizationRole } from "@formbricks/types/memberships";
import { getAccessFlags } from "@/lib/membership/utils";
import { getFormattedErrorMessage } from "@/lib/utils/helper";
import { Badge } from "@/modules/ui/components/badge";
import { Button } from "@/modules/ui/components/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/modules/ui/components/dropdown-menu";
import { updateInviteAction, updateMembershipAction } from "../actions";

interface Role {
  currentUserRole: TOrganizationRole;
  memberRole: TOrganizationRole;
  organizationId: string;
  memberId?: string;
  userId: string;
  memberAccepted?: boolean;
  inviteId?: string;
  doesOrgHaveMoreThanOneOwner?: boolean;
  isFormbricksCloud: boolean;
  isUserManagementDisabledFromUi: boolean;
}

export function EditMembershipRole({
  memberRole,
  organizationId,
  currentUserRole,
  memberId,
  userId,
  memberAccepted,
  inviteId,
  doesOrgHaveMoreThanOneOwner,
  isFormbricksCloud,
  isUserManagementDisabledFromUi,
}: Role) {
  const { t } = useTranslation();
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  const { isOwner, isManager } = getAccessFlags(currentUserRole);
  const isOwnerOrManager = isOwner || isManager;

  const disableRole =
    isUserManagementDisabledFromUi ||
    memberId === userId ||
    (memberRole === "owner" && !doesOrgHaveMoreThanOneOwner) ||
    (currentUserRole === "manager" && memberRole === "owner");

  const handleMemberRoleUpdate = async (role: TOrganizationRole) => {
    setLoading(true);

    try {
      if (memberAccepted && memberId) {
        const result = await updateMembershipAction({ userId: memberId, organizationId, data: { role } });
        if (result?.serverError) {
          toast.error(getFormattedErrorMessage(result));
          setLoading(false);
          return;
        }
      }

      if (inviteId) {
        const result = await updateInviteAction({ inviteId: inviteId, data: { role } });
        if (result?.serverError) {
          toast.error(getFormattedErrorMessage(result));
          setLoading(false);
          return;
        }
      }
    } catch (error) {
      toast.error(t("common.something_went_wrong_please_try_again"));
    }

    setLoading(false);
    router.refresh();
  };

  const handleRoleChange = (role: TOrganizationRole) => {
    handleMemberRoleUpdate(role);
  };

  const getMembershipRoles = () => {
    let roles: string[] = ["member"];

    if (isOwner) {
      roles.push("manager", "owner");

      if (isFormbricksCloud) {
        roles.push("billing");
      }
    }
    return roles;
  };

  if (isOwnerOrManager) {
    return (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            className="flex items-center gap-1 p-2 text-xs"
            disabled={disableRole}
            loading={loading}
            size="sm"
            variant="secondary"
            role="button-role">
            <span className="ml-1 capitalize">{memberRole}</span>
            <ChevronDownIcon className="h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        {!disableRole && (
          <DropdownMenuContent>
            <DropdownMenuRadioGroup
              onValueChange={(value) => {
                handleRoleChange(value.toLowerCase() as TOrganizationRole);
              }}
              value={memberRole}
              className="flex flex-col-reverse">
              {getMembershipRoles().map((role) => (
                <DropdownMenuRadioItem className="capitalize" key={role} value={role}>
                  {role.toLowerCase()}
                </DropdownMenuRadioItem>
              ))}
            </DropdownMenuRadioGroup>
          </DropdownMenuContent>
        )}
      </DropdownMenu>
    );
  }

  return <Badge size="tiny" type="gray" role="badge-role" text={memberRole} className="capitalize" />;
}
