frontend/src/hooks/useModelList.ts

import { useState, useCallback, useEffect } from "react";

interface UseModelListResult {
  availableModels: string[];
  loading: boolean;
  error: string | null;
  fetchModels: (provider: string) => void;
}

export const useModelList = (provider: string): UseModelListResult => {
  const [availableModels, setAvailableModels] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchModels = useCallback(async (selectedProvider: string) => {
    if (!selectedProvider) {
      setAvailableModels([]);
      setError(null);
      return;
    }

    setLoading(true);
    setError(null);
    try {
      const response = await fetch(`/api/models/${selectedProvider}`);
      if (!response.ok) {
        throw new Error(`Failed to fetch models: ${response.status}`);
      }
      const data = await response.json();
      setAvailableModels(data.models || []);
    } catch (err) {
      console.error("Error fetching models:", err);
      setError(err instanceof Error ? err.message : "Unknown error");
      setAvailableModels([]);
    } finally {
      setLoading(false);
    }
  }, []);

  // Auto-fetch when provider changes
  useEffect(() => {
    fetchModels(provider);
  }, [provider, fetchModels]);

  return {
    availableModels,
    loading,
    error,
    fetchModels,
  };
};