pn-new-crm/src/components/shared/owner-picker.tsx

'use client';

import { useEffect, useState } from 'react';
import { Check, ChevronsUpDown } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';

import { Button } from '@/components/ui/button';
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { useDebounce } from '@/hooks/use-debounce';
import { apiFetch } from '@/lib/api/client';
import { cn } from '@/lib/utils';

export type OwnerRef = { type: 'client' | 'company'; id: string };

interface OwnerOption {
  id: string;
  name?: string | null;
  fullName?: string | null;
}

interface OwnerPickerProps {
  value: OwnerRef | null;
  onChange: (value: OwnerRef | null) => void;
  /** Optional placeholder when empty */
  placeholder?: string;
  /** Disable the component */
  disabled?: boolean;
}

export function OwnerPicker({
  value,
  onChange,
  placeholder = 'Select owner...',
  disabled,
}: OwnerPickerProps) {
  const [open, setOpen] = useState(false);
  const [type, setType] = useState<'client' | 'company'>(value?.type ?? 'client');
  const [search, setSearch] = useState('');
  const debounced = useDebounce(search, 300);

  // Keep local `type` in sync if value.type changes externally.
  useEffect(() => {
    if (value?.type) setType(value.type);
  }, [value?.type]);

  const endpoint =
    type === 'client'
      ? `/api/v1/clients/options?search=${encodeURIComponent(debounced)}`
      : `/api/v1/companies/autocomplete?q=${encodeURIComponent(debounced)}`;

  const { data } = useQuery<{ data: OwnerOption[] }>({
    queryKey: ['owner-picker', type, debounced],
    queryFn: () => apiFetch(endpoint),
    enabled: open,
  });

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

  // Selected display label — show entity's name from current options if
  // available, otherwise a truncated id fallback.
  const selectedLabel = (() => {
    if (!value) return placeholder;
    const match = options.find((o) => o.id === value.id);
    if (match) {
      return type === 'client'
        ? (match.fullName ?? '(unnamed client)')
        : (match.name ?? '(unnamed company)');
    }
    return value.type === 'client'
      ? `Client ${value.id.slice(0, 8)}`
      : `Company ${value.id.slice(0, 8)}`;
  })();

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          disabled={disabled}
          className={cn('w-full justify-between', !value && 'text-muted-foreground')}
        >
          <span className="truncate">
            {value && (
              <span className="mr-2 text-xs opacity-60">
                {value.type === 'client' ? 'Client:' : 'Company:'}
              </span>
            )}
            {selectedLabel}
          </span>
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[320px] p-0" align="start">
        {/* Type toggle */}
        <div className="flex border-b">
          <button
            type="button"
            onClick={() => {
              setType('client');
              setSearch('');
            }}
            className={cn(
              'flex-1 px-3 py-2 text-xs',
              type === 'client' ? 'bg-accent font-medium' : 'hover:bg-accent/50',
            )}
          >
            Client
          </button>
          <button
            type="button"
            onClick={() => {
              setType('company');
              setSearch('');
            }}
            className={cn(
              'flex-1 px-3 py-2 text-xs',
              type === 'company' ? 'bg-accent font-medium' : 'hover:bg-accent/50',
            )}
          >
            Company
          </button>
        </div>

        <Command shouldFilter={false}>
          <CommandInput placeholder={`Search ${type}s…`} value={search} onValueChange={setSearch} />
          <CommandList>
            <CommandEmpty>No results.</CommandEmpty>
            <CommandGroup>
              {options.map((opt) => {
                const label =
                  type === 'client' ? (opt.fullName ?? '(unnamed)') : (opt.name ?? '(unnamed)');
                const isSelected = value?.id === opt.id && value?.type === type;
                return (
                  <CommandItem
                    key={opt.id}
                    value={opt.id}
                    onSelect={() => {
                      onChange({ type, id: opt.id });
                      setOpen(false);
                    }}
                  >
                    <Check
                      className={cn('mr-2 h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')}
                    />
                    {label}
                  </CommandItem>
                );
              })}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}