1"use client";
2
3import { Button, Card, ConfirmModal, IdentityRow, pushAlert, useModal } from "@versable-git/ui";
4
5// Fixture members. shouldFail stands in for whatever a real endpoint would
6// reject on (a last-owner guard, a network error). It lets this one page
7// reach both toast outcomes on demand.
8interface Member {
9  id: string;
10  name: string;
11  email: string;
12  shouldFail?: boolean;
13}
14
15const MEMBERS: Member[] = [
16  { id: "m1", name: "Jamie Liu", email: "jamie@versable.ai" },
17  { id: "m2", name: "Alex Chen", email: "alex@versable.ai", shouldFail: true },
18];
19
20const REMOVE_MEMBER_MODAL = "confirm-and-report-remove-member";
21
22// Fixture request standing in for the real API call. Real callers await a
23// route action or an API client here; this page only needs something async.
24function removeMember(member: Member): Promise<void> {
25  return new Promise((resolve, reject) => {
26    setTimeout(() => {
27      if (member.shouldFail) reject(new Error(`${member.name} is the last owner. Remove another owner first.`));
28      else resolve();
29    }, 900);
30  });
31}
32
33export function ConfirmAndReport() {
34  const { openModal } = useModal<Member>();
35
36  return (
37    <div className="flex flex-col gap-3">
38      <Card noBorder noAnimate bodyClassName="px-0">
39        <ul className="flex flex-col gap-1">
40          {MEMBERS.map((m) => (
41            <li key={m.id} className="flex items-center justify-between gap-3 px-1 py-1.5">
42              <IdentityRow avatar={m.name.slice(0, 2).toUpperCase()} title={m.name} subtitle={m.email} size="sm" />
43              <Button
44                size="sm"
45                variant="outline"
46                color="error"
47                Icon="Trash"
48                content="Remove"
49                onClick={() => openModal(REMOVE_MEMBER_MODAL, null, m)}
50              />
51            </li>
52          ))}
53        </ul>
54      </Card>
55
56      {/* After speedway/app/routes/admin/team.tsx:507-521: the row's own
57          identity carries into the modal's message, typed through Args. */}
58      <ConfirmModal<Member>
59        elementId={REMOVE_MEMBER_MODAL}
60        title="Remove member"
61        preset="delete"
62        message={(m) => (
63          <span>
64            Remove <b>{m?.name}</b>? They lose access to this workspace immediately.
65          </span>
66        )}
67        onConfirm={(m, close) => {
68          // After walmart-mvp/frontend/src/pages/Settings.tsx:359-360: "The
69          // confirm modal is gone before the request settles; the promise
70          // toast is the only affordance covering the gap." Close first,
71          // then fire the request, never the other way round.
72          close();
73          if (!m) return;
74          void pushAlert.promise(removeMember(m), {
75            pending: `Removing ${m.name}`,
76            success: `${m.name} removed from the workspace.`,
77            error: (err) => (err instanceof Error ? err.message : "Something went wrong"),
78          });
79        }}
80      />
81    </div>
82  );
83}
84