'use client';

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

import { apiFetch } from '@/lib/api/client';

interface UseEntityOptionsParams {
  endpoint: string;
  labelKey?: string;
  valueKey?: string;
  enabled?: boolean;
}

interface EntityOption {
  value: string;
  label: string;
  [key: string]: unknown;
}

/**
 * Fetches a list of options for comboboxes/selects from an API endpoint.
 * Supports 300ms debounced search.
 */
export function useEntityOptions({
  endpoint,
  labelKey = 'name',
  valueKey = 'id',
  enabled = true,
}: UseEntityOptionsParams) {
  const [search, setSearch] = useState('');
  const [debouncedSearch, setDebouncedSearch] = useState('');

  // 300ms debounce
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedSearch(search), 300);
    return () => clearTimeout(timer);
  }, [search]);

  const queryParams = debouncedSearch ? `?search=${encodeURIComponent(debouncedSearch)}` : '';

  const { data, isLoading } = useQuery<unknown[]>({
    queryKey: ['entityOptions', endpoint, debouncedSearch],
    queryFn: () =>
      apiFetch<{ data: unknown[] }>(`${endpoint}${queryParams}`).then((r) => r.data),
    enabled,
  });

  const options: EntityOption[] = useMemo(() => {
    if (!data) return [];
    return (data as Record<string, unknown>[]).map((item) => ({
      value: String(item[valueKey]),
      label: String(item[labelKey]),
      ...item,
    }));
  }, [data, valueKey, labelKey]);

  return { options, isLoading, search, setSearch };
}