1"use client";
2
3import { Button, ConfirmModal, IdentityRow, Select, StatusPill, Tooltip, pushAlert, useModal } from "@versable-git/ui";
4import { useState } from "react";
5
6// The confirm-and-report composite grows into this once a role picker joins
7// it: identity, a role Select that only ever shows server-confirmed state,
8// and a destructive action behind a typed ConfirmModal. Four real states: an
9// owner nobody can demote or remove, an editable admin, an editable member,
10// and a pending invite whose role is locked until it is accepted.
11
12type Role = "admin" | "member";
13type MemberStatus = "active" | "pending";
14
15interface MemberFixture {
16  id: string;
17  name: string;
18  email: string;
19  role: Role | "owner";
20  status: MemberStatus;
21}
22
23const INITIAL_MEMBERS: MemberFixture[] = [
24  { id: "u1", name: "Sam Rivera", email: "sam@versable.ai", role: "owner", status: "active" },
25  { id: "u2", name: "Priya Shah", email: "priya@versable.ai", role: "admin", status: "active" },
26  { id: "u3", name: "Jordan Lee", email: "jordan@versable.ai", role: "member", status: "active" },
27  { id: "u4", name: "", email: "taylor@versable.ai", role: "member", status: "pending" },
28];
29
30const ROLE_OPTIONS = [
31  { value: "admin", label: "Admin" },
32  { value: "member", label: "Member" },
33] as const;
34
35const REMOVE_MODAL_ID = "member-row-inline-role-remove";
36const CANCEL_INVITE_MODAL_ID = "member-row-inline-role-cancel-invite";
37
38interface TargetArgs {
39  id: string;
40  label: string;
41}
42
43// Stands in for the request every real caller wraps in pushAlert.promise;
44// the fixture still has to keep the pending state honest.
45function fakeRequest<T>(result: T, ms = 650): Promise<T> {
46  return new Promise((resolve) => setTimeout(() => resolve(result), ms));
47}
48
49export function MemberRowInlineRole() {
50  const [members, setMembers] = useState(INITIAL_MEMBERS);
51  const { openModal: openRemove } = useModal<TargetArgs>();
52  const { openModal: openCancelInvite } = useModal<TargetArgs>();
53
54  // After walmart-mvp Settings.tsx:374-388 (changeRole): the select shows
55  // only server-confirmed state, so nothing moves until the promise toast
56  // settles and the fixture writes the new role back.
57  const changeRole = async (id: string, label: string, role: Role) => {
58    await pushAlert.promise(fakeRequest(role), {
59      pending: `Making ${label} ${role}`,
60      success: `${label} is now ${role}.`,
61      error: "Could not change the role.",
62    });
63    setMembers((prev) => prev.map((m) => (m.id === id ? { ...m, role } : m)));
64  };
65
66  const removeMember = async ({ id, label }: TargetArgs, close: () => void) => {
67    close();
68    await pushAlert.promise(fakeRequest(null), {
69      pending: `Removing ${label}`,
70      success: `${label} removed from the organization.`,
71      error: "That did not go through.",
72    });
73    setMembers((prev) => prev.filter((m) => m.id !== id));
74  };
75
76  const cancelInvite = async ({ id, label }: TargetArgs, close: () => void) => {
77    close();
78    await pushAlert.promise(fakeRequest(null), {
79      pending: `Cancelling the invite to ${label}`,
80      success: `Invite to ${label} cancelled.`,
81      error: "That did not go through.",
82    });
83    setMembers((prev) => prev.filter((m) => m.id !== id));
84  };
85
86  return (
87    <div className="divide-base-200 flex flex-col divide-y">
88      {members.map((m) => {
89        const label = m.name || m.email;
90        const isOwner = m.role === "owner";
91        const isInvite = m.status === "pending";
92        return (
93          <div key={m.id} className="flex items-center justify-between gap-3 py-2.5">
94            <IdentityRow
95              size="sm"
96              className="min-w-0 flex-1 px-0"
97              avatar={label.slice(0, 2).toUpperCase()}
98              title={isInvite ? m.email : m.name}
99              subtitle={isInvite ? "Invited, not yet accepted" : m.email}
100            />
101            <div className="flex shrink-0 items-center gap-2">
102              {isInvite && (
103                <StatusPill kind="info" size="sm">
104                  Invited
105                </StatusPill>
106              )}
107              {isOwner ? (
108                <Tooltip content="The org's last owner can't be demoted.">
109                  <span className="text-base-content/45 px-2 text-xs">Owner</span>
110                </Tooltip>
111              ) : (
112                <Tooltip content={isInvite ? "Role locks once the invite is accepted." : `Role for ${label}`}>
113                  <Select
114                    size="sm"
115                    aria-label={`Role for ${label}`}
116                    value={m.role as Role}
117                    disabled={isInvite}
118                    onChange={(v) => v && changeRole(m.id, label, v as Role)}
119                    options={ROLE_OPTIONS}
120                  />
121                </Tooltip>
122              )}
123              <Button
124                size="sm"
125                variant="ghost"
126                circle
127                Icon="Trash"
128                bricked={isOwner}
129                tooltip={
130                  isOwner ? "The org's last owner can't be removed." : isInvite ? "Cancel invite" : "Remove member"
131                }
132                onClick={() =>
133                  isInvite ? openCancelInvite(CANCEL_INVITE_MODAL_ID, undefined, { id: m.id, label }) : openRemove(REMOVE_MODAL_ID, undefined, { id: m.id, label })
134                }
135              />
136            </div>
137          </div>
138        );
139      })}
140      <ConfirmModal<TargetArgs>
141        elementId={REMOVE_MODAL_ID}
142        preset="delete"
143        title="Remove member"
144        message={(args) => (
145          <span>
146            Remove <b>{args?.label}</b>? They lose access to every workspace in this organization immediately.
147          </span>
148        )}
149        onConfirm={removeMember}
150      />
151      <ConfirmModal<TargetArgs>
152        elementId={CANCEL_INVITE_MODAL_ID}
153        preset="delete"
154        title="Cancel invite"
155        message={(args) => (
156          <span>
157            Cancel the invite to <b>{args?.label}</b>? The link in their email stops working.
158          </span>
159        )}
160        onConfirm={cancelInvite}
161      />
162    </div>
163  );
164}
165