import { useCallback, useEffect, useState } from "react";
import { get } from "./api";
import type { AgentInfo, ProviderModels } from "./types";

/** Fetch JSON and refetch on demand. */
export function useFetch<T>(path: string | null) {
  const [data, setData] = useState<T | undefined>();
  const [error, setError] = useState<string | undefined>();
  const [tick, setTick] = useState(0);
  useEffect(() => {
    if (!path) return;
    let alive = true;
    get<T>(path)
      .then((d) => alive && (setData(d), setError(undefined)))
      .catch((e) => alive && setError(String(e.message ?? e)));
    return () => {
      alive = false;
    };
  }, [path, tick]);
  const reload = useCallback(() => setTick((x) => x + 1), []);
  return { data, error, reload };
}

export function useModels() {
  return useFetch<ProviderModels[]>("/models").data ?? [];
}

export function useAgents(cwd?: string) {
  const q = cwd ? `?cwd=${encodeURIComponent(cwd)}` : "";
  return useFetch<AgentInfo[]>(`/agents${q}`).data ?? [];
}

export function modelOptions(models: ProviderModels[]): { value: string; label: string }[] {
  return models.flatMap((p) => p.models.map((m) => ({ value: `${p.provider}/${m.id}`, label: `${p.provider} · ${m.name}` })));
}