dyolink/frontend/src/app/(dashboard)/staff/page.tsx

'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  firstAccessibleDashboardPath,
  canEditStaff,
  canViewStaff,
} from '@/components/shared/permissions';
import {
  STAFF_FEATURE_GROUPS,
  permissionNamesFromFeatureState,
  emptyFeaturePermissionState,
  featureStateFromPermissionNames,
  resolveStaffFeatureLabel,
  formatAccessSummary,
  type FeaturePermState,
} from '../../../components/staff/staff-permission-form';
import { Pencil, Trash2, Copy, Check, X, UserX, UserCheck } from 'lucide-react';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import { useAuth } from '@/lib/hooks/useAuth';
import { staffApi, type StaffMemberDto } from '@/lib/api/staff';
import { Button } from '@/components/ui/shared/Button';
import { Badge } from '@/components/ui/shared/Badge';
import { Input } from '@/components/ui/shared/Input';
import { Checkbox } from '@/components/ui/shared/Checkbox';
import { Table } from '@/components/ui/shared/Table';
import { ToastStack } from '@/components/ui/shared/Toast';
import { formatApiErrorMessage } from '@/components/shared/formatApiError';
import { useToast } from '@/lib/hooks/useToast';

type StoredInviteLink = {
  membershipId: string;
  email: string;
  invitationUrl: string;
};

function inviteLinksStorageKey(orgId: string): string {
  return `staffInviteLinks:${orgId}`;
}

function readStoredInviteLinks(orgId: string): Record<string, StoredInviteLink> {
  if (typeof window === 'undefined') return {};
  try {
    const raw = window.localStorage.getItem(inviteLinksStorageKey(orgId));
    if (!raw) return {};
    const parsed = JSON.parse(raw) as Record<string, StoredInviteLink>;
    return parsed && typeof parsed === 'object' ? parsed : {};
  } catch {
    return {};
  }
}

function writeStoredInviteLinks(orgId: string, links: Record<string, StoredInviteLink>) {
  if (typeof window === 'undefined') return;
  window.localStorage.setItem(inviteLinksStorageKey(orgId), JSON.stringify(links));
}

function canShareStaffInviteLink(member: StaffMemberDto): boolean {
  return (
    !member.isOwner &&
    (member.invitationStatus === 'PENDING' || member.invitationStatus === 'EXPIRED')
  );
}

function canDisableStaff(member: StaffMemberDto): boolean {
  return !member.isOwner && member.isActive;
}

function canEnableStaff(member: StaffMemberDto): boolean {
  return !member.isOwner && member.invitationStatus === 'DISABLED';
}

function PermissionGrid({
  state,
  onChange,
  disabled,
  organizationType,
}: {
  state: FeaturePermState;
  onChange: (next: FeaturePermState) => void;
  disabled?: boolean;
  organizationType?: 'CLINIC' | 'LAB';
}) {
  const setRead = (editKey: string, read: boolean) => {
    const cur = state[editKey] ?? { read: false, edit: false };
    onChange({
      ...state,
      [editKey]: { read, edit: read ? cur.edit : false },
    });
  };

  const setEdit = (editKey: string, edit: boolean) => {
    const cur = state[editKey] ?? { read: false, edit: false };
    onChange({
      ...state,
      [editKey]: { read: edit || cur.read, edit },
    });
  };

  return (
    <div className="grid gap-3 sm:grid-cols-2">
      {STAFF_FEATURE_GROUPS.map((g) => {
        const cell = state[g.edit] ?? { read: false, edit: false };
        return (
          <div
            key={g.edit}
            className="flex flex-col gap-3 rounded-[var(--radius-md)] border border-border/60 bg-background-card/50 px-3 py-3"
          >
            <span className="text-sm font-medium text-text-primary">
              {resolveStaffFeatureLabel(g, organizationType)}
            </span>
            <div className="flex flex-col gap-2.5 pl-0.5">
              <Checkbox
                checked={cell.read}
                disabled={disabled}
                label="View"
                onChange={(v) => setRead(g.edit, v)}
              />
              <Checkbox
                checked={cell.edit}
                disabled={disabled}
                label="Edit"
                onChange={(v) => setEdit(g.edit, v)}
              />
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default function StaffPage() {
  const router = useRouter();
  const { currentOrganization, user } = useAuth();
  const [members, setMembers] = useState<StaffMemberDto[]>([]);
  const [seats, setSeats] = useState<{
    used: number;
    limit: number | null;
    unlimited: boolean;
  } | null>(null);
  const [loading, setLoading] = useState(true);
  const toast = useToast();

  const [inviteOpen, setInviteOpen] = useState(false);
  const [inviteEmail, setInviteEmail] = useState('');
  const [inviteName, setInviteName] = useState('');
  const [invitePerms, setInvitePerms] = useState(() => emptyFeaturePermissionState());
  const [inviteLoading, setInviteLoading] = useState(false);
  const [copiedInviteMembershipId, setCopiedInviteMembershipId] = useState<string | null>(null);
  const [copyingInviteMembershipId, setCopyingInviteMembershipId] = useState<string | null>(null);
  const [lastInviteInfo, setLastInviteInfo] = useState<{
    membershipId: string;
    name: string;
    email: string;
    invitationUrl: string | null;
    invitationStatus: 'PENDING' | 'ACCEPTED';
  } | null>(null);
  const [pendingInviteLinks, setPendingInviteLinks] = useState<Record<string, StoredInviteLink>>({});

  const [editing, setEditing] = useState<StaffMemberDto | null>(null);
  const [editName, setEditName] = useState('');
  const [editPerms, setEditPerms] = useState(() => emptyFeaturePermissionState());
  const [editLoading, setEditLoading] = useState(false);
  const [disableTarget, setDisableTarget] = useState<StaffMemberDto | null>(null);
  const [disablingMembershipId, setDisablingMembershipId] = useState<string | null>(null);
  const [enableTarget, setEnableTarget] = useState<StaffMemberDto | null>(null);
  const [enablingMembershipId, setEnablingMembershipId] = useState<string | null>(null);

  const canEdit = useMemo(() => canEditStaff(currentOrganization), [currentOrganization]);
  const hasActivePlan = Boolean(currentOrganization?.plan);
  const atSeatLimit = useMemo(() => {
    if (!seats || seats.unlimited) return false;
    if (seats.limit == null) return false;
    return seats.used >= seats.limit;
  }, [seats]);

  const hasAvailableSeat = useMemo(() => {
    if (!seats || seats.unlimited) return true;
    if (seats.limit == null) return true;
    return seats.used < seats.limit;
  }, [seats]);

  const load = useCallback(async () => {
    toast.setError('');
    setLoading(true);
    try {
      const res = await staffApi.list();
      setMembers(res.data.members);
      setSeats(res.data.seats);
    } catch (e) {
      toast.showError(formatApiErrorMessage(e, 'Failed to load staff.'));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!currentOrganization?.id) return;
    setPendingInviteLinks(readStoredInviteLinks(currentOrganization.id));
  }, [currentOrganization?.id]);

  useEffect(() => {
    if (!currentOrganization?.id || loading) return;

    const activeMemberIds = new Set(
      members
        .filter((m) => m.isOwner || m.invitationStatus === 'ACTIVE')
        .map((m) => m.id),
    );

    let changed = false;
    const nextLinks: Record<string, StoredInviteLink> = { ...pendingInviteLinks };
    for (const memberId of Object.keys(nextLinks)) {
      if (activeMemberIds.has(memberId)) {
        delete nextLinks[memberId];
        changed = true;
      }
    }
    if (!changed) return;

    setPendingInviteLinks(nextLinks);
    writeStoredInviteLinks(currentOrganization.id, nextLinks);
  }, [currentOrganization?.id, loading, members, pendingInviteLinks]);

  useEffect(() => {
    void load();
  }, [load]);

  useEffect(() => {
    if (!currentOrganization) return;
    if (!canViewStaff(currentOrganization)) {
      router.replace(firstAccessibleDashboardPath(currentOrganization));
    }
  }, [currentOrganization, router]);

  async function copyStaffInviteLink(member: StaffMemberDto) {
    if (!canShareStaffInviteLink(member)) return;

    setCopyingInviteMembershipId(member.id);
    toast.setError('');
    try {
      let invitationUrl = pendingInviteLinks[member.id]?.invitationUrl;
      if (!invitationUrl || member.invitationStatus === 'EXPIRED') {
        const res = await staffApi.getInvitationLink(member.id);
        invitationUrl = res.data.invitationUrl;
        if (currentOrganization?.id) {
          const nextLinks = {
            ...pendingInviteLinks,
            [member.id]: {
              membershipId: member.id,
              email: member.email,
              invitationUrl,
            },
          };
          setPendingInviteLinks(nextLinks);
          writeStoredInviteLinks(currentOrganization.id, nextLinks);
        }
      }
      await navigator.clipboard.writeText(invitationUrl);
      setCopiedInviteMembershipId(member.id);
      setTimeout(() => setCopiedInviteMembershipId(null), 1500);
      if (member.invitationStatus === 'EXPIRED') {
        await load();
      }
    } catch (e) {
      toast.showError(formatApiErrorMessage(e, 'Could not copy invitation link.'));
    } finally {
      setCopyingInviteMembershipId(null);
    }
  }

  async function submitInvite() {
    setInviteLoading(true);
    toast.setError('');
    setLastInviteInfo(null);
    const displayName = inviteName.trim();
    const displayEmail = inviteEmail.trim();
    try {
      const permissionNames = permissionNamesFromFeatureState(invitePerms);
      const res = await staffApi.invite({
        email: displayEmail,
        name: displayName,
        permissionNames,
      });
      setLastInviteInfo({
        membershipId: res.data.membershipId,
        name: displayName,
        email: res.data.email,
        invitationUrl: res.data.invitationUrl,
        invitationStatus: res.data.invitationStatus,
      });
      if (currentOrganization?.id && res.data.invitationUrl) {
        const nextLinks = {
          ...pendingInviteLinks,
          [res.data.membershipId]: {
            membershipId: res.data.membershipId,
            email: res.data.email,
            invitationUrl: res.data.invitationUrl,
          },
        };
        setPendingInviteLinks(nextLinks);
        writeStoredInviteLinks(currentOrganization.id, nextLinks);
      }
      setInviteOpen(false);
      setInviteEmail('');
      setInviteName('');
      setInvitePerms(emptyFeaturePermissionState());
      await load();
    } catch (e) {
      toast.showError(formatApiErrorMessage(e, 'Failed to send invitation.'));
    } finally {
      setInviteLoading(false);
    }
  }

  function openEdit(m: StaffMemberDto) {
    if (m.isOwner) return;
    setEditing(m);
    setEditName(m.name);
    setEditPerms(
      featureStateFromPermissionNames(m.permissions ?? []),
    );
  }

  async function submitEdit() {
    if (!editing) return;
    setEditLoading(true);
    toast.setError('');
    try {
      await staffApi.updateMember(editing.id, {
        name: editName.trim(),
        permissionNames: permissionNamesFromFeatureState(editPerms),
      });
      toast.showSuccess('Member updated.');
      setEditing(null);
      await load();
    } catch (e) {
      toast.showError(formatApiErrorMessage(e, 'Failed to update member.'));
    } finally {
      setEditLoading(false);
    }
  }

  function handleDeleteMember() {
    toast.showError('Delete is not implemented yet.');
  }

  async function confirmDisableMember() {
    if (!disableTarget || !canDisableStaff(disableTarget)) return;

    setDisablingMembershipId(disableTarget.id);
    toast.setError('');
    try {
      await staffApi.disableMember(disableTarget.id);
      toast.showSuccess(`${disableTarget.name} was disabled. A seat is now available.`);
      setDisableTarget(null);
      await load();
    } catch (e) {
      toast.showError(formatApiErrorMessage(e, 'Failed to disable member.'));
    } finally {
      setDisablingMembershipId(null);
    }
  }

  async function confirmEnableMember() {
    if (!enableTarget || !canEnableStaff(enableTarget) || !hasAvailableSeat) return;

    setEnablingMembershipId(enableTarget.id);
    toast.setError('');
    try {
      await staffApi.enableMember(enableTarget.id);
      toast.showSuccess(`${enableTarget.name} was enabled and can sign in again.`);
      setEnableTarget(null);
      await load();
    } catch (e) {
      toast.showError(formatApiErrorMessage(e, 'Failed to enable member.'));
    } finally {
      setEnablingMembershipId(null);
    }
  }

  if (!currentOrganization || !canViewStaff(currentOrganization)) {
    return (
      <p className="text-sm text-text-secondary">Redirecting…</p>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-text-primary">Staff Management</h1>
          <p className="text-sm text-text-secondary mt-1">
            Invite teammates, set tab access, and stay within your plan seat limit.
          </p>
        </div>
        <Button
          size="sm"
          onClick={() => {
            if (!canEdit || atSeatLimit) return;
            setInviteOpen(true);
            setLastInviteInfo(null);
          }}
          disabled={!canEdit || atSeatLimit}
          className="shrink-0"
          title={!canEdit ? 'Read-only access for this organization.' : undefined}
        >
          Invite member
        </Button>
      </div>

      <ToastStack {...toast.messages} />

      {seats && (
        <p className="text-sm text-text-secondary">
          Seats:{' '}
          <span className="text-text-primary font-medium">
            {seats.used}
            {seats.unlimited ? ' (unlimited plan)' : ` / ${seats.limit}`}
          </span>
          {!seats.unlimited && atSeatLimit && (
            <span className="text-amber-600 dark:text-amber-400 ml-2">
              {hasActivePlan
                ? 'Plan seat limit reached for this organization.'
                : 'No active plan selected for this organization. Choose a subscription plan to invite members.'}
            </span>
          )}
        </p>
      )}

      {lastInviteInfo && (
        <div className="relative rounded-[var(--radius-md)] border border-border-strong bg-background-secondary/90 px-4 py-3 pr-12 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] space-y-3">
          <button
            type="button"
            className="absolute right-2 top-2 p-1.5 rounded-[var(--radius-sm)] text-text-muted hover:text-text-primary hover:bg-background-card/80"
            aria-label="Dismiss"
            onClick={() => {
              setLastInviteInfo(null);
            }}
          >
            <X className="w-4 h-4" />
          </button>
          <p className="text-sm text-text-primary pr-6">
            <span className="font-medium">{lastInviteInfo.name}</span> ({lastInviteInfo.email}) was invited.
            {lastInviteInfo.invitationStatus === 'PENDING'
              ? ' Invitation is pending until they open the link, set a password, and log in.'
              : ' Invitation was accepted immediately.'}
          </p>
          {lastInviteInfo.invitationStatus === 'PENDING' && (
            <div className="space-y-2 pt-1 border-t border-border/60">
              <p className="text-xs font-medium text-text-secondary uppercase tracking-wide">
                Invite link
              </p>
              {lastInviteInfo.invitationUrl && (
                <code className="block text-sm px-2 py-1.5 rounded-[var(--radius-sm)] bg-background-card border border-border font-mono break-all">
                  {lastInviteInfo.invitationUrl}
                </code>
              )}
              <Button
                type="button"
                variant="outline"
                size="sm"
                isLoading={copyingInviteMembershipId === lastInviteInfo.membershipId}
                onClick={() => {
                  const member = members.find((item) => item.id === lastInviteInfo.membershipId);
                  if (member) {
                    void copyStaffInviteLink(member);
                    return;
                  }
                  void (async () => {
                    setCopyingInviteMembershipId(lastInviteInfo.membershipId);
                    toast.setError('');
                    try {
                      const res = await staffApi.getInvitationLink(lastInviteInfo.membershipId);
                      if (currentOrganization?.id) {
                        const nextLinks = {
                          ...pendingInviteLinks,
                          [lastInviteInfo.membershipId]: {
                            membershipId: lastInviteInfo.membershipId,
                            email: lastInviteInfo.email,
                            invitationUrl: res.data.invitationUrl,
                          },
                        };
                        setPendingInviteLinks(nextLinks);
                        writeStoredInviteLinks(currentOrganization.id, nextLinks);
                      }
                      setLastInviteInfo({ ...lastInviteInfo, invitationUrl: res.data.invitationUrl });
                      await navigator.clipboard.writeText(res.data.invitationUrl);
                      setCopiedInviteMembershipId(lastInviteInfo.membershipId);
                      setTimeout(() => setCopiedInviteMembershipId(null), 1500);
                    } catch (e) {
                      toast.showError(formatApiErrorMessage(e, 'Could not copy invitation link.'));
                    } finally {
                      setCopyingInviteMembershipId(null);
                    }
                  })();
                }}
              >
                {copiedInviteMembershipId === lastInviteInfo.membershipId ? 'Copied' : 'Copy link'}
              </Button>
              <p className="text-xs text-text-muted">
                Share this link manually via SMS or email. A new link is generated if the previous one expired or was lost.
              </p>
            </div>
          )}
        </div>
      )}

      {loading ? (
        <p className="text-sm text-text-secondary">Loading team…</p>
      ) : (
        <Table
          headers={
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Name</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Email</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Role</th>
              <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">Status</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Access</th>
              <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider w-36">
                Action
              </th>
            </tr>
          }
          body={
            <>
              {members.map((m) => (
                <tr key={m.id} className="hover:bg-background-secondary/45">
                  <td className="px-6 py-1.5 text-sm text-text-primary">{m.name}</td>
                  <td className="px-6 py-1.5 text-sm text-text-secondary">{m.email}</td>
                  <td className="px-6 py-1.5 text-sm">
                    {m.isOwner ? (
                      <span className="text-primary font-medium">Owner</span>
                    ) : (
                      <span className="text-text-secondary">Staff</span>
                    )}
                  </td>
                  <td className="px-6 py-1.5 align-middle text-center">
                    {m.isOwner || m.invitationStatus === 'ACTIVE' ? (
                      <Badge variant="success">Active</Badge>
                    ) : m.invitationStatus === 'PENDING' ? (
                      <Badge variant="warning">Pending</Badge>
                    ) : m.invitationStatus === 'DISABLED' ? (
                      <Badge variant="default">Disabled</Badge>
                    ) : (
                      <Badge variant="danger">Expired</Badge>
                    )}
                  </td>
                  <td className="px-6 py-1.5 text-sm text-text-secondary max-w-md">
                    {m.isOwner ? (
                      <span className="text-text-muted">All features</span>
                    ) : (
                      <span className="line-clamp-3 text-sm leading-relaxed">
                        {formatAccessSummary(m.permissions, currentOrganization?.type)}
                      </span>
                    )}
                  </td>
                  <td className="px-6 py-1.5 align-middle text-center">
                    {!m.isOwner && (
                      <div className="flex min-h-[36px] items-center justify-center gap-1 mx-auto w-fit">
                        {canShareStaffInviteLink(m) && (
                          <button
                            type="button"
                            className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
                            disabled={copyingInviteMembershipId === m.id}
                            onClick={() => void copyStaffInviteLink(m)}
                            aria-label="Copy invitation link"
                            title="Copy invitation link (generates a new link if needed)"
                          >
                            {copiedInviteMembershipId === m.id ? (
                              <Check className="w-4 h-4" />
                            ) : (
                              <Copy className="w-4 h-4" />
                            )}
                          </button>
                        )}
                        {canEnableStaff(m) && (
                          <button
                            type="button"
                            className={`p-2 rounded-md ${
                              canEdit
                                ? 'text-text-secondary hover:bg-background-card/80 hover:text-primary'
                                : 'text-text-muted opacity-50 cursor-not-allowed'
                            }`}
                            aria-label="Enable member"
                            disabled={!canEdit || enablingMembershipId === m.id}
                            title="Enable member (uses a seat)"
                            onClick={() => {
                              if (!canEdit) return;
                              setEnableTarget(m);
                            }}
                          >
                            <UserCheck className="w-4 h-4" />
                          </button>
                        )}
                        {canDisableStaff(m) && (
                          <button
                            type="button"
                            className={`p-2 rounded-md ${
                              canEdit
                                ? 'text-text-secondary hover:bg-background-card/80 hover:text-amber-600'
                                : 'text-text-muted opacity-50 cursor-not-allowed'
                            }`}
                            aria-label="Disable member"
                            disabled={!canEdit || disablingMembershipId === m.id}
                            title="Disable member (frees a seat)"
                            onClick={() => {
                              if (!canEdit) return;
                              setDisableTarget(m);
                            }}
                          >
                            <UserX className="w-4 h-4" />
                          </button>
                        )}
                        <button
                          type="button"
                          className={`p-2 rounded-md ${
                            canEdit
                              ? 'text-text-secondary hover:bg-background-card/80 hover:text-text-primary'
                              : 'text-text-muted opacity-50 cursor-not-allowed'
                          }`}
                          aria-label="Edit member"
                          disabled={!canEdit}
                          onClick={() => {
                            if (!canEdit) return;
                            openEdit(m);
                          }}
                        >
                          <Pencil className="w-4 h-4" />
                        </button>
                        <button
                          type="button"
                          className={`p-2 rounded-md ${
                            canEdit
                              ? 'text-text-secondary hover:bg-red-500/15 hover:text-red-600'
                              : 'text-text-muted opacity-50 cursor-not-allowed'
                          }`}
                          aria-label="Delete member"
                          disabled={!canEdit}
                          title="Delete member (not implemented)"
                          onClick={() => {
                            if (!canEdit) return;
                            handleDeleteMember();
                          }}
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </>
          }
        />
      )}

      {inviteOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
          <div
            className="w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
            role="dialog"
            aria-modal="true"
            aria-labelledby="invite-staff-title"
          >
            <div className="flex items-start justify-between gap-3">
              <h2 id="invite-staff-title" className="text-lg font-semibold text-text-primary pr-2">
                Invite team member
              </h2>
              <DialogCloseButton onClick={() => setInviteOpen(false)} />
            </div>
            <Input
              label="Email"
              type="email"
              value={inviteEmail}
              onChange={(e) => setInviteEmail(e.target.value)}
              autoComplete="off"
            />
            <Input
              label="Display name"
              value={inviteName}
              onChange={(e) => setInviteName(e.target.value)}
            />
            <div>
              <p className="text-sm font-medium text-text-secondary mb-2">Tab access</p>
              <PermissionGrid
                state={invitePerms}
                onChange={setInvitePerms}
                organizationType={currentOrganization?.type}
              />
            </div>
            <div className="flex justify-end gap-2 pt-2">
              <Button variant="outline" type="button" onClick={() => setInviteOpen(false)}>
                Cancel
              </Button>
              <Button
                type="button"
                isLoading={inviteLoading}
                disabled={!inviteEmail.trim() || !inviteName.trim()}
                onClick={() => void submitInvite()}
              >
                Send invite
              </Button>
            </div>
          </div>
        </div>
      )}

      {enableTarget && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
          <div
            className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
            role="dialog"
            aria-modal="true"
            aria-labelledby="enable-staff-title"
          >
            <div className="flex items-start justify-between gap-2">
              <h2 id="enable-staff-title" className="text-lg font-semibold text-text-primary pr-2">
                Enable team member
              </h2>
              <DialogCloseButton
                onClick={() => {
                  if (enablingMembershipId) return;
                  setEnableTarget(null);
                }}
              />
            </div>
            <p className="text-sm text-text-secondary">
              Enable <span className="font-medium text-text-primary">{enableTarget.name}</span> (
              {enableTarget.email})?
            </p>
            <ul className="text-sm text-text-secondary space-y-2 list-disc pl-5">
              <li>They can sign in to this organization again with their existing account.</li>
              <li>No new invitation is sent and no data was removed while they were disabled.</li>
              <li>
                Enabling uses <span className="text-text-primary font-medium">one seat</span> on your
                plan.
              </li>
            </ul>
            {!hasAvailableSeat && (
              <p className="text-sm text-amber-600 dark:text-amber-400">
                No seats are available. Disable another member or upgrade your plan before enabling
                this person.
              </p>
            )}
            <div className="flex justify-end gap-2 pt-1">
              <Button
                type="button"
                variant="outline"
                disabled={Boolean(enablingMembershipId)}
                onClick={() => setEnableTarget(null)}
              >
                Cancel
              </Button>
              <Button
                type="button"
                variant="primary"
                isLoading={enablingMembershipId === enableTarget.id}
                disabled={Boolean(enablingMembershipId) || !hasAvailableSeat}
                onClick={() => void confirmEnableMember()}
              >
                Enable member
              </Button>
            </div>
          </div>
        </div>
      )}

      {disableTarget && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
          <div
            className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
            role="dialog"
            aria-modal="true"
            aria-labelledby="disable-staff-title"
          >
            <div className="flex items-start justify-between gap-2">
              <h2 id="disable-staff-title" className="text-lg font-semibold text-text-primary pr-2">
                Disable team member
              </h2>
              <DialogCloseButton
                onClick={() => {
                  if (disablingMembershipId) return;
                  setDisableTarget(null);
                }}
              />
            </div>
            <p className="text-sm text-text-secondary">
              Disable <span className="font-medium text-text-primary">{disableTarget.name}</span> (
              {disableTarget.email})?
            </p>
            <ul className="text-sm text-text-secondary space-y-2 list-disc pl-5">
              <li>They will not be able to sign in to this organization.</li>
              <li>No data will be removed.</li>
              <li>
                Disabling frees <span className="text-text-primary font-medium">one seat</span> on your
                plan so you can invite someone else.
              </li>
            </ul>
            <div className="flex justify-end gap-2 pt-1">
              <Button
                type="button"
                variant="outline"
                disabled={Boolean(disablingMembershipId)}
                onClick={() => setDisableTarget(null)}
              >
                Cancel
              </Button>
              <Button
                type="button"
                variant="danger"
                isLoading={disablingMembershipId === disableTarget.id}
                disabled={Boolean(disablingMembershipId)}
                onClick={() => void confirmDisableMember()}
              >
                Disable member
              </Button>
            </div>
          </div>
        </div>
      )}

      {editing && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
          <div
            className="w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
            role="dialog"
            aria-modal="true"
          >
            <div className="flex items-start justify-between gap-3">
              <h2 className="text-lg font-semibold text-text-primary pr-2">Edit member</h2>
              <DialogCloseButton onClick={() => setEditing(null)} />
            </div>
            <p className="text-xs text-text-muted">{editing.email}</p>
            <Input label="Display name" value={editName} onChange={(e) => setEditName(e.target.value)} />
            <div>
              <p className="text-sm font-medium text-text-secondary mb-2">Tab access</p>
              <PermissionGrid
                state={editPerms}
                onChange={setEditPerms}
                organizationType={currentOrganization?.type}
              />
            </div>
            <div className="flex justify-end gap-2 pt-2">
              <Button variant="outline" type="button" onClick={() => setEditing(null)}>
                Cancel
              </Button>
              <Button type="button" isLoading={editLoading} onClick={() => void submitEdit()}>
                Save
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}