'use client';

import { 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';

interface YachtOption {
  id: string;
  name: string;
  hullNumber?: string | null;
  registration?: string | null;
  currentOwnerType?: 'client' | 'company';
  currentOwnerId?: string;
}

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

interface YachtPickerProps {
  value: string | null;
  onChange: (yachtId: string | null) => void;
  /**
   * Optional filter. Single owner = strict match. Array = match ANY of the
   * supplied owners (used by the interest-form to include yachts owned by
   * the client AND by companies the client is a member of).
   */
  ownerFilter?: OwnerFilter | OwnerFilter[];
  placeholder?: string;
  disabled?: boolean;
}

export function YachtPicker({
  value,
  onChange,
  ownerFilter,
  placeholder = 'Select yacht...',
  disabled,
}: YachtPickerProps) {
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState('');
  const debounced = useDebounce(search, 300);

  const { data } = useQuery<{ data: YachtOption[] }>({
    queryKey: ['yacht-picker', debounced],
    queryFn: () => apiFetch(`/api/v1/yachts/autocomplete?q=${encodeURIComponent(debounced)}`),
    enabled: open,
  });

  const rawOptions = data?.data ?? [];
  const filterList: OwnerFilter[] | null = ownerFilter
    ? Array.isArray(ownerFilter)
      ? ownerFilter
      : [ownerFilter]
    : null;
  const options =
    filterList && filterList.length > 0
      ? rawOptions.filter((y) =>
          filterList.some((f) => y.currentOwnerType === f.type && y.currentOwnerId === f.id),
        )
      : rawOptions;

  // When `value` is set but the selected yacht isn't in the current
  // autocomplete window (e.g. parent pre-selected it from a URL param
  // or the rep typed something that filtered it out), fetch its name
  // by id so the trigger doesn't fall back to "Yacht <uuid-prefix>".
  const fallbackQuery = useQuery<{ data: { name: string } }>({
    queryKey: ['yacht-detail-label', value],
    queryFn: () => apiFetch(`/api/v1/yachts/${value}`),
    enabled: !!value && !rawOptions.some((o) => o.id === value),
    staleTime: 60_000,
  });

  const selectedLabel = (() => {
    if (!value) return placeholder;
    const match = rawOptions.find((o) => o.id === value);
    if (match) return match.name;
    if (fallbackQuery.data?.data.name) return fallbackQuery.data.data.name;
    return `Yacht ${value.slice(0, 8)}`;
  })();

  return (
    <Popover open={open} onOpenChange={setOpen} modal>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          disabled={disabled}
          className={cn('w-full justify-between', !value && 'text-muted-foreground')}
        >
          <span className="truncate">{selectedLabel}</span>
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" aria-hidden />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[320px] p-0" align="start">
        <Command shouldFilter={false}>
          <CommandInput placeholder="Search yachts…" value={search} onValueChange={setSearch} />
          <CommandList>
            <CommandEmpty>No yachts found.</CommandEmpty>
            <CommandGroup>
              {options.map((y) => (
                <CommandItem
                  key={y.id}
                  value={y.id}
                  onSelect={() => {
                    onChange(y.id);
                    setOpen(false);
                  }}
                >
                  <Check
                    className={cn('mr-2 h-4 w-4', value === y.id ? 'opacity-100' : 'opacity-0')}
                  />
                  <span>
                    {y.name}
                    {y.hullNumber ? (
                      <span className="ml-2 text-xs opacity-60">{y.hullNumber}</span>
                    ) : null}
                  </span>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}
