ui/src/hooks/useHFJobStatus.tsx

import { useState, useEffect } from 'react';
import { apiClient } from '@/utils/api';
import useSettings from './useSettings';
import { useAuth } from '@/contexts/AuthContext';

interface HFJobStatus {
  id: string;
  status: string;
  message: string | null;
  created_at: string;
  flavor: string;
  url: string;
}

export function useHFJobStatus(hfJobId: string | null, hfJobNamespace?: string, refreshInterval = 30000) {
  const [status, setStatus] = useState<HFJobStatus | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const { settings } = useSettings();
  const { token: authToken } = useAuth();
  const token = authToken || settings.HF_TOKEN;

  useEffect(() => {
    if (!hfJobId || !token) return;

    const fetchStatus = async () => {
      setLoading(true);
      setError(null);

      try {
        const response = await apiClient.post('/api/hf-jobs', {
          action: 'checkStatus',
          token,
          jobConfig: {
            hf_job_id: hfJobId,
            hf_job_namespace: hfJobNamespace,
          },
        });

        if (response.data.status) {
          setStatus(response.data.status);
        }
      } catch (err: any) {
        setError(err.response?.data?.error || 'Failed to fetch status');
        console.error('HF Job status fetch error:', err);
      } finally {
        setLoading(false);
      }
    };

    // Initial fetch
    fetchStatus();

    // Set up periodic refresh for running jobs
    const interval = setInterval(fetchStatus, refreshInterval);

    return () => clearInterval(interval);
  }, [hfJobId, hfJobNamespace, token, refreshInterval]);

  return { status, loading, error, refetch: () => {
    if (hfJobId && token) {
      setError(null);
      // Trigger immediate refetch by setting a new effect dependency
    }
  }};
}