"use client";
import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import {
  ArrowDown,
  ArrowUp,
  ArrowUpDown,
  ChevronLeft,
  ChevronRight,
  Pencil,
  Plus,
  Search,
  Trash2,
  UserPlus,
} from "lucide-react";
import { usePreviewRole } from "@/components/layout/preview-context";
import {
  PageHeader,
  PreviewNotice,
  StatusBadge,
} from "@/components/shared/page";
import { Tabs, useQueryUpdate } from "@/components/shared/tabs";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { usePeople } from "./people-provider";
import { blankPerson } from "./fixtures";
import { InvestorGroupForm } from "./investor-group-form";
import { InvestorGroupMemberForm } from "./investor-group-member-form";
import { InvestorForm } from "./investor-form";
import {
  parseSavedInvestor,
  selectInvestors,
  type Investor,
  type InvestorGroup,
  type InvestorGroupInput,
  type InvestorInput,
} from "./investor-model";
import type { InvestorPageData } from "./investor-server";

const sortColumns = [
  { key: "name", label: "Name" },
  { key: "email", label: "Email" },
  { key: "phone", label: "Phone" },
  { key: "active", label: "Status" },
];

export function InvestorList({ data }: { data: InvestorPageData }) {
  const role = usePreviewRole();
  const params = useSearchParams();
  const update = useQueryUpdate();
  const router = useRouter();
  const { people, setPeople } = usePeople();
  const [saved, setSaved] = useState<Record<string, Investor>>({});
  const [editing, setEditing] = useState<Investor | "new" | null>(null);
  const [groupView, setGroupView] = useState<"list" | "new" | InvestorGroup>(
    "list",
  );
  const [addingToGroup, setAddingToGroup] = useState<InvestorGroup | null>(null);
  const [removing, setRemoving] = useState<{
    group: InvestorGroup;
    member: Investor;
  } | null>(null);
  const [groupPending, setGroupPending] = useState(false);
  const [groupError, setGroupError] = useState("");
  const [notice, setNotice] = useState("");
  useEffect(() => {
    if (!notice) return;
    const timeout = window.setTimeout(() => setNotice(""), 3000);
    return () => window.clearTimeout(timeout);
  }, [notice]);
  const preview = data.mode === "preview";
  const rows: Investor[] = preview
    ? people
        .filter((person) => person.role === "Investor")
        .map((person) => ({
          id: person.id,
          name: person.name,
          firstname: person.firstName,
          lastname: person.lastName,
          email: person.email,
          phone: person.phone,
          active: person.status === "Active",
          group: person.group === "No group" ? "" : person.group,
        }))
    : [
        ...Object.values(saved),
        ...data.investors.filter((row) => !saved[row.id]),
      ];
  const page = selectInvestors(
    params.get("state") === "empty" && preview ? [] : rows,
    Object.fromEntries(params),
  );
  const previewDataError =
    preview && params.get("state") === "error"
      ? "The investor list could not be loaded in this preview state."
      : "";
  const error = data.error || data.investorError || previewDataError;
  const groupDirectoryError = data.error || data.groupError || previewDataError;
  const groups = preview
    ? [{ id: "central", name: "Central Partners", active: true }]
    : data.groups;
  const groupMembers = preview
    ? {
        central: rows.filter((investor) => investor.group === "Central Partners"),
      }
    : data.groupMembers;
  const selectedGroup =
    typeof groupView === "object" && groupView !== null ? groupView : null;
  const activeTab = params.get("tab") === "investors" ? "investors" : "groups";
  if (role !== "admin")
    return (
      <>
        <PageHeader title="Organization Investors" />
        <PreviewNotice>
          Only administrators can manage organization investors. This identity
          has no access to the investor list.
        </PreviewNotice>
      </>
    );

  async function saveInvestor(input: InvestorInput) {
    const current = typeof editing === "object" ? editing : null;
    if (preview) {
      if (
        input.email &&
        rows.some(
          (row) =>
            row.id !== current?.id &&
            row.email.toLowerCase() === input.email?.toLowerCase(),
        )
      )
        throw new Error("This email is already used by an investor.");
      const id = current?.id ?? `investor-preview-${crypto.randomUUID()}`;
      setPeople((all) =>
        current
          ? all.map((person) =>
              person.id === id && person.role === "Investor"
                ? {
                    ...person,
                    firstName: input.firstname,
                    lastName: input.lastname,
                    name: `${input.firstname} ${input.lastname}`,
                    status: input.active ? "Active" : "Inactive",
                  }
                : person,
            )
          : [
              {
                ...blankPerson,
                id,
                firstName: input.firstname,
                lastName: input.lastname,
                name: `${input.firstname} ${input.lastname}`,
                email: input.email!,
                phone: input.phone!,
                role: "Investor",
                status: input.active ? "Active" : "Inactive",
                group: "",
              },
              ...all,
            ],
      );
      setNotice(
        `Investor ${current ? "updated" : "added"} in local preview. Changes reset on reload.`,
      );
    } else {
      let response: Response;
      let body: unknown;
      try {
        response = await fetch(
          current
            ? `/api/organization/users/${encodeURIComponent(current.id)}`
            : "/api/organization/users",
          {
            method: current ? "PATCH" : "POST",
            headers: { "content-type": "application/json" },
            body: JSON.stringify(input),
            signal: AbortSignal.timeout(50_000),
          },
        );
        body = await response.json();
      } catch {
        throw new Error(
          "The save response could not be received. Refresh the list before retrying.",
        );
      }
      if (!response.ok) {
        const message =
          typeof body === "object" &&
          body !== null &&
          "error" in body &&
          typeof body.error === "string" &&
          body.error.length <= 300
            ? body.error
            : "The investor could not be saved. Please try again.";
        throw new Error(message);
      }
      const investor = parseSavedInvestor(body);
      if (!investor || (current && investor.id !== current.id))
        throw new Error(
          "The saved investor response could not be verified. Refresh the list before retrying.",
        );
      setSaved((all) => ({
        ...all,
        [investor.id]: {
          ...investor,
          group: current?.group ?? all[investor.id]?.group ?? investor.group,
        },
      }));
      setNotice(`Investor ${current ? "updated" : "created"} successfully.`);
    }
    setEditing(null);
  }

  function groupMembersFor(group: InvestorGroup) {
    return groupMembers[group.id] ?? [];
  }

  async function readMutationError(response: Response, fallback: string) {
    try {
      const body: unknown = await response.json();
      if (
        typeof body === "object" &&
        body !== null &&
        "error" in body &&
        typeof body.error === "string" &&
        body.error.length <= 300
      )
        return body.error;
    } catch {
      // Error responses without JSON use the safe fallback below.
    }
    return fallback;
  }

  async function saveInvestorGroup(input: InvestorGroupInput) {
    if (preview)
      throw new Error("Group changes are unavailable in local fixture data.");
    const current = selectedGroup;
    setGroupPending(true);
    try {
      let response: Response;
      try {
        response = await fetch(
          current
            ? `/api/organization/investor-groups/${encodeURIComponent(current.id)}`
            : "/api/organization/investor-groups",
          {
            method: current ? "PATCH" : "POST",
            headers: { "content-type": "application/json" },
            body: JSON.stringify(input),
            signal: AbortSignal.timeout(50_000),
          },
        );
      } catch {
        throw new Error(
          "The group save response could not be received. Refresh the directory before retrying.",
        );
      }
      if (!response.ok)
        throw new Error(
          await readMutationError(
            response,
            "The investor group could not be saved. Please try again.",
          ),
        );

      setGroupView("list");
      setGroupError("");
      setNotice(`Investor group ${current ? "updated" : "created"} successfully.`);
      router.refresh();
    } finally {
      setGroupPending(false);
    }
  }

  async function removeInvestorFromGroup() {
    if (!removing || preview) return;
    const current = removing;
    setGroupError("");
    setGroupPending(true);
    try {
      const response = await fetch(
        `/api/organization/investor-groups/${encodeURIComponent(current.group.id)}/users/${encodeURIComponent(current.member.id)}`,
        { method: "DELETE", signal: AbortSignal.timeout(50_000) },
      );
      if (!response.ok)
        throw new Error(
          await readMutationError(
            response,
            "The member could not be removed from this group. Please try again.",
          ),
        );
      setRemoving(null);
      setNotice(`${current.member.name} was removed from ${current.group.name}.`);
      router.refresh();
    } catch (issue) {
      setGroupError(
        issue instanceof Error
          ? issue.message
          : "The member could not be removed from this group. Please try again.",
      );
    } finally {
      setGroupPending(false);
    }
  }

  return (
    <>
      <PageHeader title="Organization Investors" />
      <div className="space-y-5">
        {preview && (
          <PreviewNotice>
            Fictional investor preview. Changes stay in memory during navigation
            and reset on reload. Investor group data is read-only.
          </PreviewNotice>
        )}
        {notice && (
          <div
            role="status"
            aria-live="polite"
            aria-atomic="true"
            className="fixed top-4 right-4 z-[60] w-[calc(100vw-2rem)] max-w-sm rounded-lg border border-success/30 bg-card px-4 py-3 text-sm text-success shadow-lg"
          >
            {notice}
          </div>
        )}
        <Tabs
          items={[
            { value: "groups", label: "Investor Groups" },
            { value: "investors", label: "Investors" },
          ]}
          value={activeTab}
        />
        {activeTab === "investors" ? (
            <section className="panel overflow-hidden" aria-label="Investor List">
            <div className="flex flex-wrap items-center justify-between gap-4 border-b p-5">
              <div>
                <h2 className="font-semibold">Investor List</h2>
                <p className="mt-1 text-xs text-muted-foreground">
                  Manage investor accounts and access status.
                </p>
              </div>
              <div className="flex flex-wrap gap-2">
                <Button
                  onClick={() => {
                    setNotice("");
                    setEditing("new");
                  }}
                  disabled={!!error}
                >
                  <Plus className="size-4" aria-hidden="true" />
                  Add Investor
                </Button>
              </div>
            </div>
            <div className="flex flex-wrap items-end justify-between gap-4 border-b p-5">
              <label className="flex items-center gap-2 text-sm text-muted-foreground">
                Show
                <select
                  className="form-input w-20"
                  aria-label="Investors per page"
                  value={page.limit}
                  onChange={(event) =>
                    update({
                      paginate_limit: event.target.value,
                      paginate_page: null,
                    })
                  }
                >
                  {[5, 10, 25, 50].map((size) => (
                    <option key={size}>{size}</option>
                  ))}
                </select>
                entries
              </label>
              <div className="flex w-full flex-wrap items-end gap-3 sm:w-auto">
                <form
                  className="relative min-w-0 flex-1 sm:w-64"
                  onSubmit={(event) => {
                    event.preventDefault();
                    const form = new FormData(event.currentTarget);
                    update({
                      query: String(form.get("query") ?? ""),
                      paginate_page: null,
                    });
                  }}
                >
                  <Search
                    className="pointer-events-none absolute left-3 top-3.5 size-4 text-muted-foreground"
                    aria-hidden="true"
                  />
                  <input
                    key={params.get("query")}
                    name="query"
                    className="form-input pl-9 pr-12"
                    defaultValue={params.get("query") ?? ""}
                    placeholder="Search investors…"
                    aria-label="Search investors"
                  />
                  <button
                    className="absolute right-2 top-3 px-1 text-xs text-muted-foreground"
                    type="submit"
                  >
                    Find
                  </button>
                </form>
                <select
                  className="form-input w-36"
                  aria-label="Investor status"
                  value={
                    ["Active", "Inactive"].includes(params.get("status") ?? "")
                      ? params.get("status")!
                      : ""
                  }
                  onChange={(event) =>
                    update({ status: event.target.value, paginate_page: null })
                  }
                >
                  <option value="">All statuses</option>
                  <option>Active</option>
                  <option>Inactive</option>
                </select>
              </div>
            </div>
            {error ? (
              <div role="alert" className="space-y-3 p-10 text-center">
                <p className="text-sm text-destructive">{error}</p>
                <Button
                  variant="outline"
                  onClick={() =>
                    preview ? update({ state: null }) : router.refresh()
                  }
                >
                  Try Again
                </Button>
              </div>
            ) : (
              <>
                <div
                  className="overflow-x-auto"
                  tabIndex={0}
                  aria-label="Investor table, scroll horizontally on small screens"
                >
                  <table className="w-full min-w-[800px] text-left text-sm">
                    <thead className="border-b bg-muted/40 text-xs text-muted-foreground">
                      <tr>
                        {sortColumns.map((column) => {
                          const sorted = params.get("sort_by") === column.key;
                          const descending = params.get("sort_order") === "desc";
                          const Icon = sorted
                            ? descending
                              ? ArrowDown
                              : ArrowUp
                            : ArrowUpDown;
                          return (
                            <th
                              key={column.key}
                              scope="col"
                              aria-sort={
                                sorted
                                  ? descending
                                    ? "descending"
                                    : "ascending"
                                  : "none"
                              }
                              className="px-5 py-3 font-medium"
                            >
                              <button
                                className="flex min-h-8 items-center gap-2"
                                onClick={() =>
                                  update({
                                    sort_by: column.key,
                                    sort_order:
                                      sorted && !descending ? "desc" : "asc",
                                    paginate_page: null,
                                  })
                                }
                              >
                                {column.label}
                                <Icon className="size-3.5" aria-hidden="true" />
                              </button>
                            </th>
                          );
                        })}
                        <th scope="col" className="px-5 py-3 font-medium">
                          Investor Group
                        </th>
                        <th
                          scope="col"
                          className="px-5 py-3 text-right font-medium"
                        >
                          Action
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {page.items.map((row) => (
                        <tr
                          key={row.id}
                          className="border-b last:border-0 hover:bg-muted/30"
                        >
                          <td className="max-w-64 px-5 py-4 font-medium break-words">
                            {row.name}
                          </td>
                          <td className="max-w-64 px-5 py-4 break-words">
                            {row.email}
                          </td>
                          <td className="whitespace-nowrap px-5 py-4 text-muted-foreground">
                            {row.phone || "—"}
                          </td>
                          <td className="px-5 py-4">
                            <StatusBadge>
                              {row.active === null
                                ? "Unavailable"
                                : row.active
                                  ? "Active"
                                  : "Inactive"}
                            </StatusBadge>
                          </td>
                          <td className="px-5 py-4 text-muted-foreground">
                            {row.group || "—"}
                          </td>
                          <td className="px-5 py-4 text-right">
                            <Button
                              variant="ghost"
                              size="icon"
                              aria-label={`Edit ${row.name}`}
                              disabled={
                                !row.firstname.trim() ||
                                !row.lastname.trim() ||
                                row.active === null
                              }
                              title={
                                !row.firstname.trim() ||
                                !row.lastname.trim() ||
                                row.active === null
                                  ? "The group detail does not include an editable profile."
                                  : undefined
                              }
                              onClick={() => {
                                setNotice("");
                                setEditing(row);
                              }}
                            >
                              <Pencil className="size-4" aria-hidden="true" />
                            </Button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                {!page.total && (
                  <div className="space-y-2 p-10 text-center">
                    <p className="font-medium">
                      {rows.length ? "No matching investors" : "No investors yet"}
                    </p>
                    <p className="text-sm text-muted-foreground">
                      {rows.length
                        ? "Try another name, email, phone or status."
                        : "Add an investor to start managing your organization’s investor accounts."}
                    </p>
                    {(params.get("query") || params.get("status")) && (
                      <Button
                        variant="outline"
                        onClick={() =>
                          update({
                            query: null,
                            status: null,
                            paginate_page: null,
                          })
                        }
                      >
                        Clear Filters
                      </Button>
                    )}
                  </div>
                )}
                <div className="flex flex-wrap items-center justify-between gap-3 border-t px-5 py-4 text-xs text-muted-foreground">
                  <span>
                    Showing {page.start} to {page.end} of {page.total}{" "}
                    {preview ? "investors" : "loaded investors"}
                  </span>
                  <div className="flex items-center gap-2">
                    <Button
                      variant="outline"
                      size="icon"
                      aria-label="Previous investor page"
                      disabled={page.page === 1}
                      onClick={() =>
                        update({ paginate_page: String(page.page - 1) })
                      }
                    >
                      <ChevronLeft className="size-4" aria-hidden="true" />
                    </Button>
                    <span>
                      Page {page.page} of {page.pages}
                    </span>
                    <Button
                      variant="outline"
                      size="icon"
                      aria-label="Next investor page"
                      disabled={page.page === page.pages}
                      onClick={() =>
                        update({ paginate_page: String(page.page + 1) })
                      }
                    >
                      <ChevronRight className="size-4" aria-hidden="true" />
                    </Button>
                  </div>
                </div>
              </>
            )}
            </section>
        ) : (
          <section className="panel overflow-hidden" aria-label="Investor Groups">
            <div className="flex flex-wrap items-center justify-between gap-4 border-b p-5">
              <div>
                <h2 className="font-semibold">Investor Groups</h2>
                <p className="mt-1 max-w-2xl text-xs text-muted-foreground">
                  Manage group status and membership. Removing a member keeps
                  their investor account in your organization.
                </p>
              </div>
              {groupView === "list" && !addingToGroup ? (
                <Button
                  onClick={() => {
                    setGroupError("");
                    setGroupView("new");
                  }}
                  disabled={preview || Boolean(groupDirectoryError)}
                >
                  <Plus className="size-4" aria-hidden="true" />
                  Create Group
                </Button>
              ) : (
                <Button
                  variant="outline"
                  onClick={() => {
                    setGroupError("");
                    setAddingToGroup(null);
                    setGroupView("list");
                  }}
                  disabled={groupPending}
                >
                  Back to groups
                </Button>
              )}
            </div>
            <div className="space-y-4 p-5">
              {preview && (
                <PreviewNotice>
                  Investor groups are shown from local fixture data. Group
                  changes are unavailable until the service is connected.
                </PreviewNotice>
              )}
              {groupError && !removing && (
                <p role="alert" className="text-sm text-destructive">
                  {groupError}
                </p>
              )}
              {addingToGroup ? (
                <div className="max-w-2xl space-y-4">
                  <div>
                    <h3 className="font-semibold">
                      Add an investor to {addingToGroup.name}
                    </h3>
                    <p className="mt-1 text-sm text-muted-foreground">
                      Choose an active investor in your organization. Members
                      already in this group are hidden.
                    </p>
                  </div>
                  <InvestorGroupMemberForm
                    key={addingToGroup.id}
                    group={addingToGroup}
                    onCancel={() => setAddingToGroup(null)}
                    onPendingChange={setGroupPending}
                    onAdded={(candidate) => {
                      setAddingToGroup(null);
                      setNotice(
                        `Investor ${candidate.name} was added to ${addingToGroup.name}.`,
                      );
                      router.refresh();
                    }}
                  />
                </div>
              ) : groupView === "new" || selectedGroup ? (
                <div className="max-w-2xl">
                  <h3 className="mb-4 font-semibold">
                    {groupView === "new"
                      ? "Create Investor Group"
                      : "Edit Investor Group"}
                  </h3>
                  <InvestorGroupForm
                    key={groupView === "new" ? "new-group" : selectedGroup?.id}
                    initial={selectedGroup}
                    onSave={saveInvestorGroup}
                    onCancel={() => setGroupView("list")}
                  />
                </div>
              ) : groupDirectoryError ? (
                <div role="alert" className="space-y-3 py-6 text-center">
                  <p className="text-sm text-destructive">
                    {groupDirectoryError}
                  </p>
                  <Button variant="outline" onClick={() => router.refresh()}>
                    Try Again
                  </Button>
                </div>
              ) : groups.length ? (
                <ul className="grid gap-4 xl:grid-cols-2">
                  {groups.map((group) => {
                    const members = groupMembersFor(group);
                    const membersAvailable = Object.hasOwn(
                      groupMembers,
                      group.id,
                    );
                    return (
                      <li key={group.id} className="rounded-xl border bg-card p-5">
                        <div className="flex flex-wrap items-start justify-between gap-3">
                          <div className="min-w-0">
                            <div className="flex flex-wrap items-center gap-3">
                              <h3 className="break-words font-semibold">
                                {group.name}
                              </h3>
                              <StatusBadge>
                                {group.active === null
                                  ? "Status unavailable"
                                  : group.active
                                    ? "Active"
                                    : "Inactive"}
                              </StatusBadge>
                            </div>
                            <p className="mt-1 text-sm text-muted-foreground">
                              {membersAvailable
                                ? `${members.length} ${members.length === 1 ? "member" : "members"}`
                                : "Membership details unavailable"}
                            </p>
                          </div>
                          <div className="flex flex-wrap gap-2">
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => {
                                setGroupError("");
                                setAddingToGroup(group);
                              }}
                              disabled={
                                preview ||
                                Boolean(groupDirectoryError) ||
                                !membersAvailable
                              }
                              aria-label={`Add member to ${group.name}`}
                            >
                              <UserPlus className="size-4" aria-hidden="true" />
                              Add member
                            </Button>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => setGroupView(group)}
                              disabled={
                                preview ||
                                Boolean(groupDirectoryError) ||
                                group.active === null
                              }
                              title={
                                group.active === null
                                  ? "Group status was not returned, so editing is unavailable."
                                  : undefined
                              }
                              aria-label={`Edit ${group.name}`}
                            >
                              <Pencil className="size-4" aria-hidden="true" />
                              Edit
                            </Button>
                          </div>
                        </div>
                        <div className="mt-4 border-t pt-3">
                          <p className="text-xs font-medium text-muted-foreground">
                            Members
                          </p>
                          {!membersAvailable ? (
                            <p className="mt-2 text-sm text-muted-foreground">
                              Membership details are unavailable.
                            </p>
                          ) : members.length ? (
                            <ul className="mt-2 divide-y">
                              {members.map((member) => (
                                <li
                                  key={member.id}
                                  className="flex flex-wrap items-center justify-between gap-3 py-3"
                                >
                                  <div className="min-w-0">
                                    <p className="break-words text-sm font-medium">
                                      {member.name}
                                    </p>
                                    <p className="break-all text-xs text-muted-foreground">
                                      {member.email}
                                    </p>
                                  </div>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    disabled={
                                      preview || Boolean(groupDirectoryError)
                                    }
                                    aria-label={`Remove ${member.name} from ${group.name}`}
                                    onClick={() => {
                                      setGroupError("");
                                      setRemoving({ group, member });
                                    }}
                                  >
                                    <Trash2
                                      className="size-4"
                                      aria-hidden="true"
                                    />
                                    Remove
                                  </Button>
                                </li>
                              ))}
                            </ul>
                          ) : (
                            <p className="mt-2 text-sm text-muted-foreground">
                              No members in this group.
                            </p>
                          )}
                        </div>
                      </li>
                    );
                  })}
                </ul>
              ) : (
                <div className="space-y-2 py-10 text-center">
                  <p className="font-medium">No investor groups yet</p>
                  <p className="text-sm text-muted-foreground">
                    Create a group to organize investor accounts and manage
                    membership.
                  </p>
                </div>
              )}
            </div>
          </section>
        )}
      </div>
      <Dialog
        open={editing !== null}
        onOpenChange={(open) => {
          if (!open) setEditing(null);
        }}
      >
        <DialogContent className="max-h-[90dvh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>
              {editing === "new" ? "Add Investor" : "Edit Investor"}
            </DialogTitle>
            <DialogDescription>
              {preview
                ? "Save fictional investor details in this browser preview."
                : "Save investor details to your authenticated organization."}
            </DialogDescription>
          </DialogHeader>
          {editing && (
            <InvestorForm
              key={editing === "new" ? "new" : editing.id}
              initial={editing === "new" ? null : editing}
              mode={data.mode}
              onSave={saveInvestor}
              onCancel={() => setEditing(null)}
            />
          )}
        </DialogContent>
      </Dialog>
      <Dialog
        open={removing !== null}
        onOpenChange={(open) => {
          if (!open && !groupPending) setRemoving(null);
        }}
      >
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>Remove investor from group?</DialogTitle>
            <DialogDescription>
              {removing
                ? `${removing.member.name} will be removed from ${removing.group.name}. Their investor account will remain in your organization.`
                : "Confirm this membership change."}
            </DialogDescription>
          </DialogHeader>
          {groupError && (
            <p role="alert" className="text-sm text-destructive">
              {groupError}
            </p>
          )}
          <div className="flex justify-end gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={() => setRemoving(null)}
              disabled={groupPending}
            >
              Cancel
            </Button>
            <Button
              type="button"
              variant="destructive"
              onClick={() => void removeInvestorFromGroup()}
              disabled={groupPending || !removing}
            >
              {groupPending ? "Removing…" : "Remove from group"}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}