import { useQuery } from '@tanstack/react-query';
import { useClient } from 'hooks/useClient';
import { useAuth } from 'hooks/useAuth';
import { useSettings } from './useSettings';
import type { ModelOption } from 'apps/Chat';

export type { ModelOption };

export function modelKey(m: ModelOption): string {
  return `${m.provider}:${m.id}`;
}

export function usePiModels() {
  const client = useClient();
  const { isAuthenticated } = useAuth();

  const { data: models = [] } = useQuery<ModelOption[]>({
    queryKey: ['PI_MODELS'],
    enabled: isAuthenticated,
    queryFn: async () => {
      const data = await client.get<{ models: ModelOption[] }>('/pi/models');
      return data.models;
    },
    staleTime: 5 * 60 * 1000,
  });

  return models;
}

export function useVisiblePiModels() {
  const models = usePiModels();
  const { settings } = useSettings();
  const enabled = settings.ai?.enabledModels ?? [];

  const filtered = models.filter((m) => enabled.includes(modelKey(m)));
  // If no models match the visibility filter, show all
  // The provider list changes dynamically based on API keys so the filter may be stale
  return filtered.length > 0 ? filtered : models;
}