'use client'

import { useState, useEffect, useCallback } from 'react'
import type { ModelEntry } from '@/lib/models'

/**
 * Hook to fetch all available models (built-in + custom, filtered by provider status).
 * All UI components that show model pickers should use this hook
 * instead of hardcoded arrays.
 */
export function useModels() {
  const [models, setModels] = useState<ModelEntry[]>([])
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)

  const load = useCallback(async (refresh = false) => {
    if (refresh) setRefreshing(true)
    else setLoading(true)
    try {
      const res = await fetch(`/api/models${refresh ? '?refresh=1' : ''}`)
      if (res.ok) {
        const data = (await res.json()) as ModelEntry[]
        setModels(data)
      }
    } catch (err) {
      console.error('Failed to load models:', err)
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }, [])

  useEffect(() => {
    let cancelled = false
    if (!cancelled) load()
    return () => { cancelled = true }
  }, [load])

  const refresh = useCallback(() => load(true), [load])

  return { models, loading, refreshing, refresh }
}