"use client";

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

import { fetchHealth, type Health } from "./client-api";
import { settingsStore } from "./settings";

/**
 * Health status for the current browser (re-checks whenever the API key
 * changes). Used by the settings dialog and the "add your key" banner.
 */
export function useHealth() {
  const apiKey = useSyncExternalStore(
    settingsStore.subscribe,
    () => settingsStore.getSnapshot().apiKey,
    () => "",
  );
  const [health, setHealth] = useState<Health | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const refresh = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      setHealth(await fetchHealth());
    } catch (loadError) {
      setError(loadError instanceof Error ? loadError.message : "Could not reach the Freezmo server.");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void refresh();
  }, [refresh, apiKey]);

  return { health, loading, error, refresh, apiKey };
}