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

export function useCurve() {
  const { curve, setCurve, selectedGpuIndex } = useCurveStore();
  const [wsStatus, setWsStatus] = useState<
    "connecting" | "connected" | "disconnected"
  >("connecting");
  const wsRef = useRef<ReturnType<typeof createWsConnection> | null>(null);

  useEffect(() => {
    // Initial fetch
    api.curve(selectedGpuIndex).then(setCurve).catch(console.error);

    // Subscribe to /ws/curve for push updates after writes
    wsRef.current = createWsConnection<CurveState>(
      "/ws/curve",
      (data) => setCurve(data),
      setWsStatus,
      selectedGpuIndex,
    );

    return () => wsRef.current?.close();
  }, [setCurve, selectedGpuIndex]);

  return { curve, wsStatus };
}