pn-new-crm/src/components/companies/company-members-tab.tsx

'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { Loader2, MoreHorizontal, Plus, Star, XCircle } from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { EmptyState } from '@/components/shared/empty-state';
import { PermissionGate } from '@/components/shared/permission-gate';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';
import { AddMembershipDialog } from './add-membership-dialog';

interface MembershipRow {
  id: string;
  companyId: string;
  clientId: string;
  role: string;
  roleDetail: string | null;
  startDate: string;
  endDate: string | null;
  isPrimary: boolean;
  notes: string | null;
}

interface CompanyMembersTabProps {
  companyId: string;
  portSlug: string;
}

const ROLE_LABELS: Record<string, string> = {
  director: 'Director',
  officer: 'Officer',
  broker: 'Broker',
  representative: 'Representative',
  legal_counsel: 'Legal counsel',
  employee: 'Employee',
  shareholder: 'Shareholder',
  other: 'Other',
};

function formatDate(value: string | null): string {
  if (!value) return '-';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return date.toLocaleDateString();
}

/**
 * Renders a client's name as a link by fetching the client record.
 * Memoization is handled via the TanStack Query cache, so repeat renders
 * for the same clientId are free.
 */
function ClientName({ clientId, portSlug }: { clientId: string; portSlug: string }) {
  const { data } = useQuery<{ fullName: string | null }>({
    queryKey: ['clients', clientId, 'name-only'],
    queryFn: () =>
      apiFetch<{ data: { fullName: string | null } }>(`/api/v1/clients/${clientId}`).then(
        (r) => r.data,
      ),
  });

  return (
    <Link
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      href={`/${portSlug}/clients/${clientId}` as any}
      className="text-primary hover:underline"
    >
      {data?.fullName ?? `Client ${clientId.slice(0, 8)}`}
    </Link>
  );
}

export function CompanyMembersTab({ companyId, portSlug }: CompanyMembersTabProps) {
  const queryClient = useQueryClient();
  const [activeOnly, setActiveOnly] = useState(true);
  const [addOpen, setAddOpen] = useState(false);

  const membersKey = ['companies', companyId, 'members', { activeOnly }];

  const { data, isLoading } = useQuery<MembershipRow[]>({
    queryKey: membersKey,
    queryFn: () =>
      apiFetch<{ data: MembershipRow[] }>(
        `/api/v1/companies/${companyId}/members?activeOnly=${activeOnly ? 'true' : 'false'}`,
      ).then((r) => r.data),
  });

  const endMutation = useMutation({
    mutationFn: (membershipId: string) =>
      apiFetch(`/api/v1/companies/${companyId}/members/${membershipId}`, {
        method: 'DELETE',
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['companies', companyId, 'members'] });
      toast.success('Membership ended');
    },
    onError: (err: Error) => {
      toastError(err);
    },
  });

  const setPrimaryMutation = useMutation({
    mutationFn: (membershipId: string) =>
      apiFetch(`/api/v1/companies/${companyId}/members/${membershipId}/set-primary`, {
        method: 'POST',
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['companies', companyId, 'members'] });
      toast.success('Primary contact updated');
    },
    onError: (err: Error) => {
      toastError(err);
    },
  });

  const members = data ?? [];

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between gap-3 flex-wrap">
        <div className="inline-flex rounded-md border p-0.5 text-xs">
          <button
            type="button"
            onClick={() => setActiveOnly(true)}
            className={`px-3 py-1 rounded-sm transition-colors ${
              activeOnly ? 'bg-primary text-primary-foreground' : 'text-muted-foreground'
            }`}
          >
            Active
          </button>
          <button
            type="button"
            onClick={() => setActiveOnly(false)}
            className={`px-3 py-1 rounded-sm transition-colors ${
              !activeOnly ? 'bg-primary text-primary-foreground' : 'text-muted-foreground'
            }`}
          >
            All
          </button>
        </div>

        <PermissionGate resource="memberships" action="manage">
          <Button size="sm" onClick={() => setAddOpen(true)}>
            <Plus className="mr-1.5 h-4 w-4" />
            Add Member
          </Button>
        </PermissionGate>
      </div>

      {isLoading ? (
        <div className="flex items-center justify-center py-12">
          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
        </div>
      ) : members.length === 0 ? (
        <EmptyState
          title={activeOnly ? 'No active members' : 'No members yet'}
          description={
            activeOnly
              ? 'This company has no active memberships. Switch to "All" to see past members.'
              : 'Add the first member to this company to get started.'
          }
        />
      ) : (
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Client</TableHead>
                <TableHead>Role</TableHead>
                <TableHead>Role Detail</TableHead>
                <TableHead>Start Date</TableHead>
                <TableHead>End Date</TableHead>
                <TableHead>Primary</TableHead>
                <TableHead className="w-[48px]"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {members.map((m) => {
                const isActive = !m.endDate;
                return (
                  <TableRow key={m.id}>
                    <TableCell>
                      <ClientName clientId={m.clientId} portSlug={portSlug} />
                    </TableCell>
                    <TableCell>{ROLE_LABELS[m.role] ?? m.role}</TableCell>
                    <TableCell className="text-sm text-muted-foreground max-w-[240px] truncate">
                      {m.roleDetail ?? '-'}
                    </TableCell>
                    <TableCell>{formatDate(m.startDate)}</TableCell>
                    <TableCell>
                      {m.endDate ? (
                        formatDate(m.endDate)
                      ) : (
                        <span className="text-muted-foreground">-</span>
                      )}
                    </TableCell>
                    <TableCell>
                      {m.isPrimary ? (
                        <Badge variant="secondary" className="text-xs">
                          Primary
                        </Badge>
                      ) : (
                        <span className="text-muted-foreground">-</span>
                      )}
                    </TableCell>
                    <TableCell>
                      <PermissionGate resource="memberships" action="manage">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon" className="h-7 w-7">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            {isActive && !m.isPrimary && (
                              <DropdownMenuItem
                                onClick={() => setPrimaryMutation.mutate(m.id)}
                                disabled={setPrimaryMutation.isPending}
                              >
                                <Star className="mr-2 h-3.5 w-3.5" />
                                Set Primary
                              </DropdownMenuItem>
                            )}
                            {isActive && (
                              <DropdownMenuItem
                                className="text-destructive"
                                onClick={() => endMutation.mutate(m.id)}
                                disabled={endMutation.isPending}
                              >
                                <XCircle className="mr-2 h-3.5 w-3.5" />
                                End Membership
                              </DropdownMenuItem>
                            )}
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </PermissionGate>
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </div>
      )}

      <AddMembershipDialog open={addOpen} onOpenChange={setAddOpen} companyId={companyId} />
    </div>
  );
}