import type { TrainingJobSummary } from '../../gen/ml_training_pb';
import { TrainingStatus } from '../../gen/ml_training_pb';

interface Props {
  jobs?: TrainingJobSummary[];
  loading?: boolean;
}

function statusStr(status: TrainingStatus): string {
  switch (status) {
    case TrainingStatus.PENDING: return 'queued';
    case TrainingStatus.RUNNING: return 'running';
    case TrainingStatus.COMPLETED: return 'completed';
    case TrainingStatus.FAILED: return 'failed';
    case TrainingStatus.STOPPED: return 'stopped';
    default: return 'unknown';
  }
}

export function TrainingProgress({ jobs = [], loading }: Props) {
  const runningCount = jobs.filter(
    (j) => j.status === TrainingStatus.RUNNING,
  ).length;

  return (
    <div>
      <div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--color-border)]">
        <span className="text-sm font-medium">Training Jobs</span>
        <span className="text-xs text-[var(--color-text-secondary)]">
          {runningCount} running
        </span>
      </div>

      <div className="divide-y divide-[var(--color-border)]">
        {loading && (
          <div className="p-4 text-sm text-[var(--color-text-secondary)] text-center">
            Loading...
          </div>
        )}
        {!loading && jobs.length === 0 && (
          <div className="p-4 text-sm text-[var(--color-text-secondary)] text-center">
            No training jobs
          </div>
        )}
        {jobs.map((job) => (
          <div key={job.jobId} className="px-3 py-2 space-y-1">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <span className="text-xs font-medium">{job.modelType}</span>
                <span className="text-xs font-mono text-[var(--color-text-secondary)]">
                  {job.jobId.slice(0, 8)}
                </span>
              </div>
              <StatusBadge status={job.status} />
            </div>

            {/* Progress bar — use description or a placeholder since proto doesn't have progress field */}
            <div className="w-full bg-[var(--color-bg-primary)] rounded-full h-1.5">
              <div
                className={`h-1.5 rounded-full transition-all ${
                  job.status === TrainingStatus.FAILED
                    ? 'bg-[var(--color-red)]'
                    : job.status === TrainingStatus.COMPLETED
                      ? 'bg-[var(--color-green)]'
                      : 'bg-[var(--color-accent)]'
                }`}
                style={{
                  width: job.status === TrainingStatus.COMPLETED
                    ? '100%'
                    : job.status === TrainingStatus.RUNNING
                      ? '50%'
                      : '0%',
                }}
              />
            </div>

            <div className="flex justify-between text-xs text-[var(--color-text-secondary)]">
              <span>{job.modelType}</span>
              <span>{job.description || statusStr(job.status)}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function StatusBadge({ status }: { status: TrainingStatus }) {
  const label = statusStr(status);
  const styles: Record<string, string> = {
    queued: 'text-[var(--color-text-secondary)] bg-slate-500/10',
    running: 'text-[var(--color-accent)] bg-blue-500/10',
    completed: 'text-[var(--color-green)] bg-green-500/10',
    failed: 'text-[var(--color-red)] bg-red-500/10',
    stopped: 'text-[var(--color-yellow)] bg-yellow-500/10',
  };

  return (
    <span className={`text-xs px-2 py-0.5 rounded ${styles[label] ?? ''}`}>
      {label}
    </span>
  );
}
