"use client";

import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useTransition } from "react";
import { toast } from "sonner";

import { RoleBadge } from "@/components/org/role-badge";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { removeMember, updateMemberRole } from "@/lib/actions/team";

export function MemberRow({
  member,
  viewerRole,
  viewerUserId,
  orgName,
}: {
  member: {
    id: string;
    userId: string;
    name: string;
    email: string;
    role: "owner" | "admin" | "member";
  };
  viewerRole: "owner" | "admin" | "member";
  viewerUserId: string;
  orgName: string;
}) {
  const t = useTranslations("Settings.team");
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const isSelf = member.userId === viewerUserId;
  const isOwner = member.role === "owner";
  const canMutate = !isOwner && !isSelf;
  // viewerRole is reserved for future fine-grained gating; current rules only
  // require admin+ which is enforced at page level + server action.
  void viewerRole;

  function onRoleChange(newRole: "admin" | "member") {
    if (newRole === member.role) return;
    startTransition(async () => {
      try {
        await updateMemberRole({ memberId: member.id, role: newRole });
        toast.success(t("memberRoleUpdated"));
        router.refresh();
      } catch {
        toast.error(t("memberRoleFailed"));
      }
    });
  }

  function onRemove() {
    startTransition(async () => {
      try {
        await removeMember({ memberId: member.id });
        toast.success(t("memberRemoveSuccess"));
        router.refresh();
      } catch {
        toast.error(t("memberRemoveFailed"));
      }
    });
  }

  return (
    <li className="flex items-center justify-between gap-3 rounded-md border px-3 py-2">
      <div className="flex min-w-0 flex-col">
        <span className="truncate font-medium">{member.name}</span>
        <span className="truncate text-xs text-muted-foreground">{member.email}</span>
      </div>
      <div className="flex items-center gap-2">
        {canMutate ? (
          <Select
            value={member.role === "owner" ? "owner" : member.role}
            onValueChange={(v) => onRoleChange(v as "admin" | "member")}
            disabled={isPending}
          >
            <SelectTrigger className="w-[140px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="member">{t("inviteRoleMember")}</SelectItem>
              <SelectItem value="admin">{t("inviteRoleAdmin")}</SelectItem>
            </SelectContent>
          </Select>
        ) : (
          <RoleBadge role={member.role} />
        )}

        {canMutate && (
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button type="button" variant="ghost" size="sm" disabled={isPending}>
                {t("memberRemove")}
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>{t("memberRemove")}</AlertDialogTitle>
                <AlertDialogDescription>
                  {t("memberRemoveConfirm", { name: member.name, orgName })}
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
                <AlertDialogAction onClick={onRemove} disabled={isPending}>
                  {t("memberRemove")}
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        )}
      </div>
    </li>
  );
}