ui/src/components/JobsTable.tsx

import useJobsList from '@/hooks/useJobsList';
import Link from 'next/link';
import UniversalTable, { TableColumn } from '@/components/UniversalTable';
import { JobConfig, JobRecord } from '@/types';
import JobActionBar from './JobActionBar';
import HFJobStatus from './HFJobStatus';

interface JobsTableProps {
  onlyActive?: boolean;
}

export default function JobsTable({ onlyActive = false }: JobsTableProps) {
  const { jobs, status, refreshJobs } = useJobsList(onlyActive);
  const isLoading = status === 'loading';

  const columns: TableColumn[] = [
    {
      title: 'Name',
      key: 'name',
      render: (row: JobRecord) => {
        const jobConfig: JobConfig = JSON.parse(row.job_config);
        const isHFJob = jobConfig.is_hf_job;
        
        return (
          <div className="flex items-center gap-2">
            <Link href={`/jobs/${row.id}`} className="font-medium whitespace-nowrap">
              {row.name}
            </Link>
            {isHFJob && (
              <span className="text-xs bg-blue-600 text-white px-2 py-1 rounded">
                HF Cloud
              </span>
            )}
          </div>
        );
      },
    },
    {
      title: 'Steps',
      key: 'steps',
      render: (row: JobRecord) => {
        const jobConfig: JobConfig = JSON.parse(row.job_config);
        const isHFJob = jobConfig.is_hf_job;
        
        if (isHFJob) {
          return (
            <span className="text-sm text-gray-400">
              Cloud Training
            </span>
          );
        }
        
        const totalSteps = jobConfig.config.process[0].train.steps;

        return (
          <div className="flex items-center">
            <span>
              {row.step} / {totalSteps}
            </span>
            <div className="w-16 bg-gray-700 rounded-full h-1.5 ml-2">
              <div
                className="bg-blue-500 h-1.5 rounded-full"
                style={{ width: `${(row.step / totalSteps) * 100}%` }}
              ></div>
            </div>
          </div>
        );
      },
    },
    {
      title: 'GPU',
      key: 'gpu_ids',
      render: (row: JobRecord) => {
        const jobConfig: JobConfig = JSON.parse(row.job_config);
        const isHFJob = jobConfig.is_hf_job;
        
        if (isHFJob) {
          return (
            <span className="text-sm">
              {jobConfig.hardware || row.gpu_ids}
            </span>
          );
        }
        
        return <span>{row.gpu_ids}</span>;
      },
    },
    {
      title: 'Status',
      key: 'status',
      render: (row: JobRecord) => {
        const jobConfig: JobConfig = JSON.parse(row.job_config);
        const isHFJob = jobConfig.is_hf_job;
        
        if (isHFJob) {
          if (jobConfig.hf_job_id) {
            // HF Job that has been submitted
            return (
              <HFJobStatus 
                hfJobId={jobConfig.hf_job_id} 
                hfJobUrl={jobConfig.hf_job_url} 
              />
            );
          } else {
            // HF Job that hasn't been submitted yet
            return (
              <span className="text-yellow-400">
                Pending Submission
              </span>
            );
          }
        }
        
        // Local job status
        let statusClass = 'text-gray-400';
        if (row.status === 'completed') statusClass = 'text-green-400';
        if (row.status === 'failed') statusClass = 'text-red-400';
        if (row.status === 'running') statusClass = 'text-blue-400';

        return <span className={statusClass}>{row.status}</span>;
      },
    },
    {
      title: 'Info',
      key: 'info',
      className: 'truncate max-w-xs',
    },
    {
      title: 'Actions',
      key: 'actions',
      className: 'text-right',
      render: (row: JobRecord) => {
        return <JobActionBar job={row} onRefresh={refreshJobs} />;
      },
    },
  ];

  return <UniversalTable columns={columns} rows={jobs} isLoading={isLoading} onRefresh={refreshJobs} />;
}