Blame for superlog/apps/web/src/settings/OrgMembersCard.tsx

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { useMe } from "../api.ts";
import { authClient } from "../auth-client.ts";
import { Btn, Chip, Input, Tile } from "../design/ui.tsx";

type Role = "owner" | "admin" | "member";
const ROLES: Role[] = ["owner", "admin", "member"];

type Member = {
  id: string;
  role: string;
  createdAt: Date | string;
  userId: string;
  user: { id: string; email: string; name?: string | null; image?: string | null };
};

type Invitation = {
  id: string;
  email: string;
  role: string | null;
  status: string;
  expiresAt: Date | string;
};

function memberQueryKey(orgId: string) {
  return ["org-members", orgId] as const;
}
function inviteQueryKey(orgId: string) {
  return ["org-invitations", orgId] as const;
}

export function OrgMembersCard() {
  const me = useMe();
  const orgId = me.data?.org?.id;
  const myUserId = me.data?.user.id;

  const membersQ = useQuery({
    queryKey: orgId ? memberQueryKey(orgId) : ["org-members", "none"],
    enabled: !!orgId,
    queryFn: async () => {
      const res = await authClient.organization.listMembers({ query: { organizationId: orgId } });
      if (res.error) throw new Error(res.error.message ?? "Failed to load members");
      return (res.data?.members ?? []) as Member[];
    },
  });

  const invitesQ = useQuery({
    queryKey: orgId ? inviteQueryKey(orgId) : ["org-invitations", "none"],
    enabled: !!orgId,
    queryFn: async () => {
      const res = await authClient.organization.listInvitations({
        query: { organizationId: orgId },
      });
      if (res.error) throw new Error(res.error.message ?? "Failed to load invitations");
      return (res.data ?? []) as Invitation[];
    },
  });

  if (!orgId) return null;

  const myRole = membersQ.data?.find((m) => m.userId === myUserId)?.role ?? "member";
  const canManage = myRole === "owner" || myRole === "admin";

  return (
    <div className="flex flex-col gap-4">
      <InviteForm orgId={orgId} canManage={canManage} />

      <Tile padded={false}>
        <div className="border-b border-border px-5 py-3">
          <span className="text-[12px] text-muted">Members</span>
        </div>
        {membersQ.isLoading ? (
          <div className="px-5 py-6 text-[12px] text-muted">Loading…</div>
        ) : membersQ.error ? (
          <div className="px-5 py-6 text-[12px] text-danger">{String(membersQ.error)}</div>
        ) : (
          <ul className="divide-y divide-border">
            {(membersQ.data ?? []).map((m) => (
              <MemberRow
                key={m.id}
                member={m}
                orgId={orgId}
                isSelf={m.userId === myUserId}
                canManage={canManage}
              />
            ))}
          </ul>
        )}
      </Tile>

      {(invitesQ.data?.filter((i) => i.status === "pending").length ?? 0) > 0 && (
        <Tile padded={false}>
          <div className="border-b border-border px-5 py-3">
            <span className="text-[12px] text-muted">Pending invitations</span>
          </div>
          <ul className="divide-y divide-border">
            {(invitesQ.data ?? [])
              .filter((i) => i.status === "pending")
              .map((inv) => (
                <InvitationRow key={inv.id} invitation={inv} orgId={orgId} canManage={canManage} />
              ))}
          </ul>
        </Tile>
      )}
    </div>
  );
}

function InviteForm({ orgId, canManage }: { orgId: string; canManage: boolean }) {
  const [email, setEmail] = useState("");
  const [role, setRole] = useState<Role>("member");
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const qc = useQueryClient();

  const invite = useMutation({
    mutationFn: async (input: { email: string; role: Role }) => {
      const res = await authClient.organization.inviteMember({
        email: input.email,
        role: input.role,
        organizationId: orgId,
      });
      if (res.error) throw new Error(res.error.message ?? "Failed to invite");
      return res.data;
    },
    onSuccess: (_data, vars) => {
      setEmail("");
      setSuccess(`Invitation sent to ${vars.email}`);
      setTimeout(() => setSuccess(null), 3000);
      void qc.invalidateQueries({ queryKey: inviteQueryKey(orgId) });
    },
  });

  if (!canManage) {
    return (
      <Tile>
        <p className="text-[12px] text-muted">
          Only owners and admins can invite new members. Ask one of them for access.
        </p>
      </Tile>
    );
  }

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setSuccess(null);
    const trimmed = email.trim();
    if (!trimmed) return;
    invite.mutate(
      { email: trimmed, role },
      { onError: (e) => setError(e instanceof Error ? e.message : String(e)) },
    );
  };

  return (
    <Tile>
      <form onSubmit={submit} className="flex flex-col gap-3 sm:flex-row sm:items-end">
        <div className="flex-1">
          <label className="mb-1.5 block text-[12px] text-muted">Invite by email</label>
          <Input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="teammate@example.com"
            required
          />
        </div>
        <div className="w-full sm:w-40">
          <label className="mb-1.5 block text-[12px] text-muted">Role</label>
          <RoleSelect value={role} onChange={(v) => setRole(v)} />
        </div>
        <Btn type="submit" loading={invite.isPending} disabled={!email.trim()}>
          Send invite
        </Btn>
      </form>
      {error && <p className="mt-2 text-[12px] text-danger">{error}</p>}
      {success && <p className="mt-2 text-[12px] text-success">{success}</p>}
    </Tile>
  );
}

function MemberRow({
  member,
  orgId,
  isSelf,
  canManage,
}: {
  member: Member;
  orgId: string;
  isSelf: boolean;
  canManage: boolean;
}) {
  const qc = useQueryClient();
  const [error, setError] = useState<string | null>(null);

  const updateRole = useMutation({
    mutationFn: async (newRole: Role) => {
      const res = await authClient.organization.updateMemberRole({
        memberId: member.id,
        role: newRole,
        organizationId: orgId,
      });
      if (res.error) throw new Error(res.error.message ?? "Failed to update role");
      return res.data;
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: memberQueryKey(orgId) }),
    onError: (e) => setError(e instanceof Error ? e.message : String(e)),
  });

  const remove = useMutation({
    mutationFn: async () => {
      const res = await authClient.organization.removeMember({
        memberIdOrEmail: member.id,
        organizationId: orgId,
      });
      if (res.error) throw new Error(res.error.message ?? "Failed to remove member");
      return res.data;
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: memberQueryKey(orgId) }),
    onError: (e) => setError(e instanceof Error ? e.message : String(e)),
  });

  const role = member.role as Role;
  const canEditRole = canManage && !isSelf;

  return (
    <li className="flex items-center justify-between gap-3 px-5 py-3">
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <span className="truncate text-[13px] text-fg">
            {member.user.name?.trim() || member.user.email}
          </span>
          {isSelf && <Chip tone="muted">you</Chip>}
        </div>
        {member.user.name?.trim() && (
          <div className="truncate text-[11px] text-subtle">{member.user.email}</div>
        )}
        {error && <div className="mt-1 text-[11px] text-danger">{error}</div>}
      </div>
      <div className="flex items-center gap-2">
        {canEditRole ? (
          <RoleSelect
            value={role}
            disabled={updateRole.isPending}
            onChange={(v) => {
              if (v === role) return;
              setError(null);
              updateRole.mutate(v);
            }}
          />
        ) : (
          <Chip tone={role === "owner" ? "accent" : "neutral"}>{role}</Chip>
        )}
        {canManage && !isSelf && (
          <Btn
            variant="danger"
            size="sm"
            loading={remove.isPending}
            onClick={() => {
              if (!window.confirm(`Remove ${member.user.email} from this org?`)) return;
              setError(null);
              remove.mutate();
            }}
          >
            Remove
          </Btn>
        )}
      </div>
    </li>
  );
}

function InvitationRow({
  invitation,
  orgId,
  canManage,
}: {
  invitation: Invitation;
  orgId: string;
  canManage: boolean;
}) {
  const qc = useQueryClient();
  const [cancelError, setCancelError] = useState<string | null>(null);
  const cancel = useMutation({
    mutationFn: async () => {
      const res = await authClient.organization.cancelInvitation({
        invitationId: invitation.id,
      });
      if (res.error) throw new Error(res.error.message ?? "Failed to cancel");
      return res.data;
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: inviteQueryKey(orgId) }),
    onError: (e) => setCancelError(e instanceof Error ? e.message : String(e)),
  });

  return (
    <li className="flex items-center justify-between gap-3 px-5 py-3">
      <div className="min-w-0 flex-1">
        <div className="truncate text-[13px] text-fg">{invitation.email}</div>
        <div className="text-[11px] text-subtle">
          Invited as {invitation.role ?? "member"} · expires{" "}
          {new Date(invitation.expiresAt).toLocaleDateString()}
        </div>
        {cancelError && <div className="mt-1 text-[11px] text-danger">{cancelError}</div>}
      </div>
      {canManage && (
        <Btn
          variant="ghost"
          size="sm"
          loading={cancel.isPending}
          onClick={() => {
            setCancelError(null);
            cancel.mutate();
          }}
        >
          Cancel
        </Btn>
      )}
    </li>
  );
}

function RoleSelect({
  value,
  onChange,
  disabled,
}: {
  value: Role;
  onChange: (next: Role) => void;
  disabled?: boolean;
}) {
  return (
    <div className="relative">
      <select
        value={value}
        disabled={disabled}
        onChange={(e) => onChange(e.target.value as Role)}
        className="h-8 appearance-none rounded-sm border border-border bg-surface-2 pl-3 pr-7 text-[12.5px] text-fg focus:border-border-strong focus:outline-none disabled:opacity-50"
      >
        {ROLES.map((r) => (
          <option key={r} value={r}>
            {r}
          </option>
        ))}
      </select>
      <svg
        aria-hidden
        className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-subtle"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
      >
        <path d="m6 9 6 6 6-6" />
      </svg>
    </div>
  );
}