import { useEffect, useState } from "react";
import { api } from "../api/client.js";
import { useCurveStore } from "../store/curveStore.js";
import type { DashboardInfo } from "../types.js";

interface DashboardState {
  gpuIndex: number;
  data: DashboardInfo | null;
  done: boolean;
}

/**
 * Fetch static GPU info for the Dashboard tab.
 * Re-fetches when the selected GPU changes.
 */
export function useDashboard() {
  const { selectedGpuIndex } = useCurveStore();
  const [state, setState] = useState<DashboardState>({
    gpuIndex: -1,
    data: null,
    done: false,
  });

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const data = await api.dashboard(selectedGpuIndex);
        if (!cancelled)
          setState({ gpuIndex: selectedGpuIndex, data, done: true });
      } catch (err) {
        console.error("Failed to load dashboard info:", err);
        if (!cancelled)
          setState({ gpuIndex: selectedGpuIndex, data: null, done: true });
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [selectedGpuIndex]);

  const isCurrent = state.gpuIndex === selectedGpuIndex;
  return {
    dashboard: isCurrent ? state.data : null,
    loading: !isCurrent || !state.done,
  };
}