import React, { useState, useCallback, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { teamApi } from '../api/team';
import type { TeamMember, CompanyRole } from '../types';
import { AppLayout } from '../components/layout/AppLayout';
import { PageLoader } from '../components/ui/LoadingSpinner';
import { useAuth } from '../contexts/AuthContext';
import {
Users,
Mail,
ChevronDown,
Check,
Loader2,
X,
AlertTriangle,
UserMinus,
UserPlus,
UserCheck,
} from 'lucide-react';
const COMPANY_ROLES: { value: CompanyRole; label: string; color: string }[] = [
{ value: 'owner', label: 'Owner', color: 'bg-purple-100 text-purple-700' },
{ value: 'admin', label: 'Admin', color: 'bg-indigo-100 text-indigo-700' },
{ value: 'manager', label: 'Manager', color: 'bg-amber-100 text-amber-700' },
{ value: 'rep', label: 'Rep', color: 'bg-emerald-100 text-emerald-700' },
{ value: 'viewer', label: 'Viewer', color: 'bg-slate-100 text-slate-600' },
];
function RoleBadge({ role }: { role: CompanyRole }) {
const config = COMPANY_ROLES.find((r) => r.value === role);
return (
<span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${config?.color || 'bg-gray-100 text-gray-600'}`}>
{config?.label || role}
</span>
);
}
function RoleDropdown({
memberId,
currentRole,
disabled,
}: {
memberId: number;
currentRole: CompanyRole;
disabled?: boolean;
}) {
const [open, setOpen] = useState(false);
const [rect, setRect] = useState<DOMRect | null>(null);
const triggerRef = useRef<HTMLButtonElement>(null);
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: ({ userId, role }: { userId: number; role: CompanyRole }) =>
teamApi.updateRole(userId, role),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['team'] });
setOpen(false);
},
});
useEffect(() => {
if (open && triggerRef.current) {
setRect(triggerRef.current.getBoundingClientRect());
}
}, [open]);
const handleChange = (newRole: CompanyRole) => {
if (newRole === currentRole) return;
mutation.mutate({ userId: memberId, role: newRole });
};
const config = COMPANY_ROLES.find((r) => r.value === currentRole);
const dropdownContent = (
<div
className="w-40 rounded-lg border border-surface-200 bg-white shadow-lg py-1"
style={{ position: 'fixed', top: rect ? rect.bottom + 4 : 0, left: rect ? rect.right - 160 : 0, zIndex: 100 }}
>
{COMPANY_ROLES.map((role) => (
<button
key={role.value}
onClick={() => handleChange(role.value)}
disabled={disabled}
className="flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-surface-50 disabled:opacity-50 disabled:cursor-not-allowed"
>
{currentRole === role.value && <Check className="h-3.5 w-3.5 text-brand-600" />}
<span className={currentRole === role.value ? 'text-brand-700 font-medium' : 'text-surface-700'}>
{role.label}
</span>
</button>
))}
</div>
);
return (
<div className="relative">
<button
ref={triggerRef}
onClick={() => !disabled && setOpen(!open)}
disabled={mutation.isPending || disabled}
className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium disabled:opacity-50 min-w-[80px] justify-center ${
disabled ? 'cursor-not-allowed' : 'hover:opacity-80'
}`}
>
{mutation.isPending ? (
<Loader2 className="h-3 w-3 animate-spin" />
) : (
<>
<span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${config?.color || 'bg-gray-100 text-gray-600'}`}>
{config?.label || currentRole}
</span>
{!disabled && <ChevronDown className="h-3 w-3 text-surface-400" />}
</>
)}
</button>
{open && (
<>
<div className="fixed inset-0 z-[99]" onClick={() => setOpen(false)} />
{createPortal(dropdownContent, document.body)}
</>
)}
</div>
);
}
/* ─── Invite Member Modal ─────────────────────────────────────── */
function InviteMemberModal({
onClose,
onInvite,
isPending,
currentUserEmail,
}: {
onClose: () => void;
onInvite: (member: { email: string; name: string; role: CompanyRole }) => void;
isPending: boolean;
currentUserEmail: string;
}) {
const [email, setEmail] = useState('');
const [name, setName] = useState('');
const [role, setRole] = useState<CompanyRole>('viewer');
const [error, setError] = useState('');
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
setError('');
if (!email.trim()) {
setError('Email is required');
return;
}
if (email.toLowerCase() === currentUserEmail.toLowerCase()) {
setError('You are already a team member');
return;
}
onInvite({ email: email.trim(), name: name.trim(), role });
};
return createPortal(
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/50" onClick={onClose} />
<div className="relative w-full max-w-md rounded-xl bg-white shadow-xl">
<div className="flex items-center justify-between border-b border-surface-200 p-5">
<div className="flex items-center gap-2">
<UserPlus className="h-5 w-5 text-brand-600" />
<h2 className="text-lg font-semibold text-surface-900">Invite Team Member</h2>
</div>
<button onClick={onClose} className="rounded-md p-1 text-surface-400 hover:text-surface-600">
<X className="h-5 w-5" />
</button>
</div>
<form onSubmit={handleSubmit} className="p-5 space-y-4">
<div>
<label className="block text-sm font-medium text-surface-700 mb-1">Email *</label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-surface-400" />
<input
type="email"
required
value={email}
onChange={(e) => { setEmail(e.target.value); setError(''); }}
className="w-full rounded-lg border border-surface-300 py-2 pl-10 pr-3 text-sm outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100"
placeholder="colleague@company.com"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-surface-700 mb-1">Full Name</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100"
placeholder="Jane Smith"
/>
</div>
<div>
<label className="block text-sm font-medium text-surface-700 mb-1">Role</label>
<select
value={role}
onChange={(e) => setRole(e.target.value as CompanyRole)}
className="w-full rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100"
>
{COMPANY_ROLES.map((r) => (
<option key={r.value} value={r.value}>{r.label}</option>
))}
</select>
<p className="mt-1 text-xs text-surface-500">
{role === 'viewer' && 'Can view dashboards and reports only.'}
{role === 'rep' && 'Can view and manage their own data.'}
{role === 'manager' && 'Can manage team, view analytics, and edit integrations.'}
{role === 'admin' && 'Full access including team and settings management.'}
{role === 'owner' && 'Complete control over the organization.'}
</p>
</div>
{error && (
<p className="text-sm text-red-600">{error}</p>
)}
<div className="flex gap-3 pt-2">
<button
type="button"
onClick={onClose}
disabled={isPending}
className="flex-1 rounded-lg border border-surface-300 py-2.5 px-4 text-sm font-medium text-surface-700 hover:bg-surface-50 disabled:opacity-50 min-h-[44px]"
>
Cancel
</button>
<button
type="submit"
disabled={isPending}
className="flex-1 rounded-lg bg-brand-600 py-2.5 px-4 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 min-h-[44px]"
>
{isPending ? <Loader2 className="h-4 w-4 animate-spin mx-auto" /> : 'Invite Member'}
</button>
</div>
</form>
</div>
</div>,
document.body
);
}
/* ─── Remove Member Confirmation Modal ────────────────────────── */
function RemoveMemberModal({
member,
onConfirm,
onClose,
isPending,
isOwner,
}: {
member: TeamMember;
onConfirm: () => void;
onClose: () => void;
isPending: boolean;
isOwner: boolean;
}) {
return createPortal(
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/50" onClick={onClose} />
<div className="relative w-full max-w-sm rounded-xl bg-white shadow-xl p-6 text-center">
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<AlertTriangle className="h-6 w-6 text-red-600" />
</div>
<h3 className="text-lg font-semibold text-surface-900 mb-2">
Remove Team Member
</h3>
<p className="text-sm text-surface-500 mb-1">
Are you sure you want to remove{' '}
<strong className="text-surface-700">{member.name}</strong>?
</p>
<p className="text-xs text-surface-400 mb-6">
{member.email} will lose access to the organization.
</p>
{isOwner && (
<p className="text-xs text-amber-600 mb-4 bg-amber-50 rounded-md px-3 py-2">
This member is an <strong>Owner</strong>. They will retain their ownership status but lose access to this organization.
</p>
)}
<div className="flex gap-3">
<button
onClick={onClose}
disabled={isPending}
className="flex-1 rounded-lg border border-surface-300 py-2.5 px-4 text-sm font-medium text-surface-700 hover:bg-surface-50 disabled:opacity-50 min-h-[44px]"
>
Cancel
</button>
<button
onClick={onConfirm}
disabled={isPending}
className="flex-1 rounded-lg bg-red-600 py-2.5 px-4 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 min-h-[44px]"
>
{isPending ? <Loader2 className="h-4 w-4 animate-spin mx-auto" /> : 'Remove'}
</button>
</div>
</div>
</div>,
document.body
);
}
/* ─── Main Team Page ─────────────────────────────────────────── */
export function TeamPage() {
const { user } = useAuth();
const queryClient = useQueryClient();
const { data, isLoading, isError } = useQuery({
queryKey: ['team'],
queryFn: () => teamApi.getTeam(),
});
const members = data?.items ?? [];
const currentUserEmail = user?.email ?? '';
// Invite mutation
const inviteMutation = useMutation({
mutationFn: (member: { email: string; name: string; role: CompanyRole }) =>
teamApi.addMember(member),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['team'] });
},
});
// Remove mutation
const removeMutation = useMutation({
mutationFn: (userId: number) => teamApi.removeMember(userId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['team'] });
},
});
// State for modals
const [showInviteModal, setShowInviteModal] = useState(false);
const [removeTarget, setRemoveTarget] = useState<TeamMember | null>(null);
const canManageRole = useCallback((member: TeamMember): boolean => {
// Owner can manage everyone
if (user?.companyRole === 'owner') return true;
// Admin can manage everyone except owners
if (user?.companyRole === 'admin') return member.role !== 'owner';
// Manager can manage reps and viewers
if (user?.companyRole === 'manager') return ['rep', 'viewer'].includes(member.role);
return false;
}, [user?.companyRole]);
if (isLoading) {
return (
<AppLayout title="Team">
<PageLoader />
</AppLayout>
);
}
return (
<AppLayout title="Team">
{/* Header */}
<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 className="text-xl sm:text-2xl font-bold text-surface-900">Team</h1>
<p className="mt-1 text-sm text-surface-500">
{members.length} team member{members.length !== 1 ? 's' : ''} in your organization
</p>
</div>
<button
onClick={() => setShowInviteModal(true)}
className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700 min-h-[44px] w-full sm:w-auto"
>
<UserPlus className="h-4 w-4" />
Invite Member
</button>
</div>
{/* Error state */}
{isError ? (
<div className="flex flex-col items-center justify-center rounded-xl border border-surface-200 bg-white py-16">
<AlertTriangle className="h-12 w-12 text-red-400" />
<p className="mt-4 text-sm font-medium text-surface-700">Failed to load team members</p>
<button
onClick={() => queryClient.invalidateQueries({ queryKey: ['team'] })}
className="mt-3 text-sm text-brand-600 hover:text-brand-700"
>
Try again
</button>
</div>
) : members.length === 0 ? (
<div className="flex flex-col items-center justify-center rounded-xl border border-surface-200 bg-white py-16">
<Users className="h-12 w-12 text-surface-300" />
<p className="mt-4 text-sm font-medium text-surface-700">No team members yet</p>
<p className="mt-1 text-xs text-surface-500">Invite your first team member to get started.</p>
</div>
) : (
<div className="rounded-xl border border-surface-200 bg-white">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-surface-200">
<th className="pb-3 pl-5 text-left font-medium text-surface-500">Member</th>
<th className="pb-3 text-left font-medium text-surface-500">Role</th>
<th className="pb-3 text-left font-medium text-surface-500">Status</th>
<th className="pb-3 text-right font-medium text-surface-500 pr-2">Last Login</th>
<th className="pb-3 pr-5 w-10"></th>
</tr>
</thead>
<tbody className="divide-y divide-surface-100">
{members.map((member) => {
const isSelf = member.email === currentUserEmail;
const canManage = canManageRole(member);
return (
<tr key={member.id} className="hover:bg-surface-50">
<td className="py-3 pl-5">
<div className="flex items-center gap-3">
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-brand-100 text-xs font-semibold text-brand-700">
{member.name.charAt(0).toUpperCase()}
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-surface-900 truncate">
{member.name}
{isSelf && (
<span className="ml-1.5 text-[10px] font-normal text-surface-400">(you)</span>
)}
</p>
<p className="text-xs text-surface-500 truncate">{member.email}</p>
</div>
</div>
</td>
<td className="py-3">
<RoleDropdown
memberId={member.id}
currentRole={member.role}
disabled={!canManage || member.role === 'owner' && !isSelf}
/>
</td>
<td className="py-3">
<span
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
member.status === 'active'
? 'bg-emerald-50 text-emerald-700'
: 'bg-surface-100 text-surface-500'
}`}
>
{member.status === 'active' ? (
<>
<UserCheck className="mr-1 h-3 w-3" />
Active
</>
) : (
member.status
)}
</span>
</td>
<td className="py-3 text-right text-surface-500 pr-2">
{member.lastLogin ? new Date(member.lastLogin).toLocaleDateString() : 'Never'}
</td>
<td className="py-3 pr-5 text-right">
{!isSelf && (
<button
onClick={() => setRemoveTarget(member)}
className="inline-flex items-center justify-center rounded-md p-1.5 text-surface-400 hover:text-red-600 hover:bg-red-50 transition-colors"
title="Remove member"
>
<UserMinus className="h-4 w-4" />
</button>
)}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
)}
{/* Invite Member Modal */}
{showInviteModal && (
<InviteMemberModal
onClose={() => setShowInviteModal(false)}
onInvite={(member) => inviteMutation.mutate(member)}
isPending={inviteMutation.isPending}
currentUserEmail={currentUserEmail}
/>
)}
{/* Remove Member Modal */}
{removeTarget && (
<RemoveMemberModal
member={removeTarget}
onConfirm={() => {
removeMutation.mutate(removeTarget.id);
setRemoveTarget(null);
}}
onClose={() => setRemoveTarget(null)}
isPending={removeMutation.isPending}
isOwner={removeTarget.role === 'owner'}
/>
)}
</AppLayout>
);
}