// JobRow — single row in the job queue table.

const JOB_STATUS_COLORS = {
  queued: "bg-gray-100 text-gray-600",
  running: "bg-amber-100 text-amber-700",
  done: "bg-emerald-100 text-emerald-700",
  failed: "bg-red-100 text-red-600",
  cancelled: "bg-gray-200 text-gray-500",
};

function JobRow({ job, onClick, isSelected, onRetry, onRepair }) {
  const statusClass = JOB_STATUS_COLORS[job.status] || JOB_STATUS_COLORS.queued;
  const hasLogs = (job.result?.stdout_lines || 0) > 0 || (job.result?.stderr_lines || 0) > 0 || !!job.error;
  const isFailed = job.status === "failed";
  return (
    <tr className={`border-b border-gray-100 hover:bg-gray-50 ${isSelected ? "bg-blue-50" : ""}`}>
      <td className="py-2 px-3 text-xs font-mono text-gray-500">
        <button
          type="button"
          onClick={() => onClick?.(job)}
          className="text-left hover:text-blue-600"
          title="Kliknij, aby zobaczyć logi joba"
        >
          {job.id}
        </button>
      </td>
      <td className="py-2 px-3 text-sm">{job.ticket_id}</td>
      <td className="py-2 px-3 text-sm font-medium">
        <div className="flex flex-col gap-1">
          <span>{job.tool}</span>
          {job.environment && (
            <span className="text-[11px] text-emerald-600 truncate" title={job.environment.target || job.environment.name}>
              {job.environment.name}{job.environment.kind ? ` · ${job.environment.kind.replace("_", " ")}` : ""}
            </span>
          )}
          {(job.environment?.tool_instance_name || job.environment?.tool_instance?.name) && (
            <span className="text-[11px] text-blue-600 truncate" title={job.environment.tool_instance?.description || ""}>
              instance: {job.environment.tool_instance_name || job.environment.tool_instance?.name}
            </span>
          )}
        </div>
      </td>
      <td className="py-2 px-3 text-xs">{job.mode}</td>
      <td className="py-2 px-3">
        <span className={`text-xs px-2 py-0.5 rounded-full ${statusClass}`}>{job.status}</span>
      </td>
      <td className="py-2 px-3 text-xs text-gray-500">
        {job.duration_s > 0 ? `${job.duration_s}s` : "—"}
      </td>
      <td className="py-2 px-3 text-xs text-red-500 truncate max-w-[200px]">{job.error || ""}</td>
      <td className="py-2 px-3">
        <button
          type="button"
          onClick={() => onClick?.(job)}
          className={`text-xs px-2 py-0.5 rounded ${
            hasLogs ? "bg-blue-50 text-blue-600 hover:bg-blue-100" : "bg-gray-50 text-gray-400"
          }`}
          title={hasLogs ? "View stdout/stderr logs" : "No logs available"}
        >
          {hasLogs ? "View Logs" : "No Logs"}
        </button>
      </td>
      <td className="py-2 px-3">
        <div className="flex items-center gap-1">
          {isFailed && (
            <button
              type="button"
              onClick={(e) => { e.stopPropagation(); onRetry?.(job); }}
              className="text-xs px-2 py-0.5 rounded bg-amber-50 text-amber-600 hover:bg-amber-100"
              title="Retry this job"
            >
              Retry
            </button>
          )}
          {isFailed && (
            <button
              type="button"
              onClick={(e) => { e.stopPropagation(); onRepair?.(job); }}
              className="text-xs px-2 py-0.5 rounded bg-purple-50 text-purple-600 hover:bg-purple-100"
              title="Diagnose and suggest fix"
            >
              Repair
            </button>
          )}
          {job.status === "queued" && (
            <span className="text-xs text-gray-400">Waiting...</span>
          )}
          {job.status === "running" && (
            <span className="text-xs text-blue-500 animate-pulse">Running</span>
          )}
          {job.status === "done" && (
            <span className="text-xs text-emerald-500">OK</span>
          )}
        </div>
      </td>
    </tr>
  );
}
