pn-new-crm/src/components/interests/assigned-to-chip.tsx

'use client';

import { useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { UserCircle2 } from 'lucide-react';

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';
import { cn } from '@/lib/utils';

interface UserOption {
  id: string;
  displayName: string | null;
}

/**
 * Click-to-edit ownership chip for the interest detail header. Stores the
 * assignee's user-id on `interests.assigned_to`. The "Unassigned" path writes
 * null so the chip falls back to a muted ghost state.
 */
export function AssignedToChip({
  interestId,
  currentAssignedTo,
  currentAssignedToName,
}: {
  interestId: string;
  currentAssignedTo: string | null;
  currentAssignedToName: string | null;
}) {
  const queryClient = useQueryClient();
  const [open, setOpen] = useState(false);

  const { data } = useQuery<{ data: UserOption[] }>({
    queryKey: ['user-options'],
    queryFn: () => apiFetch('/api/v1/admin/users/options'),
    staleTime: 5 * 60_000,
    enabled: open,
  });

  const users = data?.data ?? [];

  const mutation = useMutation({
    mutationFn: (next: string | null) =>
      apiFetch(`/api/v1/interests/${interestId}`, {
        method: 'PATCH',
        body: { assignedTo: next },
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['interests', interestId] });
      queryClient.invalidateQueries({ queryKey: ['interests'] });
      setOpen(false);
    },
    onError: (err) => {
      toastError(err);
    },
  });

  const label = currentAssignedToName
    ? currentAssignedToName
    : currentAssignedTo
      ? `User ${currentAssignedTo.slice(0, 8)}`
      : 'Unassigned';

  return (
    <Popover open={open} onOpenChange={setOpen} modal>
      <PopoverTrigger asChild>
        <button
          type="button"
          aria-label={`Change deal owner (currently ${label})`}
          className={cn(
            'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium transition-colors',
            currentAssignedTo
              ? 'border-sky-200 bg-sky-50 text-sky-800 hover:bg-sky-100'
              : 'border-border bg-muted/50 text-muted-foreground hover:bg-muted',
          )}
        >
          <UserCircle2 className="size-3" aria-hidden />
          {label}
        </button>
      </PopoverTrigger>
      <PopoverContent className="w-[260px] p-0" align="start">
        <Command>
          <CommandInput placeholder="Search users…" />
          <CommandList>
            <CommandEmpty>No users found.</CommandEmpty>
            <CommandGroup heading="Assign to">
              {users.map((u) => (
                <CommandItem
                  key={u.id}
                  value={u.displayName ?? u.id}
                  onSelect={() => mutation.mutate(u.id)}
                  disabled={mutation.isPending}
                >
                  {u.displayName ?? u.id.slice(0, 8)}
                </CommandItem>
              ))}
            </CommandGroup>
            {currentAssignedTo ? (
              <CommandGroup heading="Or">
                <CommandItem
                  value="__unassign__"
                  onSelect={() => mutation.mutate(null)}
                  className="text-muted-foreground"
                  disabled={mutation.isPending}
                >
                  Unassign
                </CommandItem>
              </CommandGroup>
            ) : null}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}