// HumanJobsList - Component for displaying human-linked jobs
import React from 'react';
import Card from '../Card';
import TableExport from '../tools/TableExport';

function HumanJobsList({ humanJobs }) {
  const JOB_STATUS_COLORS = {
    pending: "bg-gray-100 text-gray-700",
    running: "bg-blue-100 text-blue-700",
    completed: "bg-emerald-100 text-emerald-700",
    failed: "bg-red-100 text-red-700",
    cancelled: "bg-amber-100 text-amber-700",
  };

  if (humanJobs.length === 0) {
    return null;
  }

  return (
    <Card title={`Recent Human Jobs (${humanJobs.length})`}>
      <div className="flex justify-between items-center mb-2">
        <span className="text-xs text-gray-500">Recent human-linked jobs ({humanJobs.length})</span>
        <TableExport
          data={humanJobs.map(job => ({
            id: job.id,
            ticket: job.ticket_id,
            ticket_title: job.ticket?.title || job.ticket?.task || '',
            ticket_status: job.ticket?.status || '',
            ticket_priority: job.ticket?.priority || '',
            ticket_type: job.ticket?.type || '',
            ticket_project_id: job.ticket?.project_id || '',
            ticket_assigned_tool: job.ticket?.assigned_tool?.tool || '',
            tool: job.tool,
            mode: job.mode || '',
            status: job.status,
            duration: job.duration_s > 0 ? `${job.duration_s}s` : '—',
            exit_code: job.result?.exit_code ?? '',
            stdout_lines: job.result?.stdout_lines ?? 0,
            stderr_lines: job.result?.stderr_lines ?? 0,
            stdout: job.result?.stdout || '',
            stderr: job.result?.stderr || '',
            files_changed: Array.isArray(job.result?.files_changed) ? job.result.files_changed.join(', ') : '',
            error: job.error || ''
          }))}
          filename="human_jobs"
          title="Human Jobs"
        />
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-left text-sm">
          <thead>
            <tr className="border-b border-gray-200 text-xs text-gray-500 uppercase">
              <th className="py-2 px-3">ID</th>
              <th className="py-2 px-3">Ticket</th>
              <th className="py-2 px-3">Tool</th>
              <th className="py-2 px-3">Status</th>
              <th className="py-2 px-3">Duration</th>
              <th className="py-2 px-3">Error</th>
            </tr>
          </thead>
          <tbody>
            {humanJobs.map(j => (
              <tr key={j.id} className="border-b border-gray-100 hover:bg-gray-50">
                <td className="py-1.5 px-3 text-xs font-mono text-gray-400">{j.id?.slice(0, 10)}</td>
                <td className="py-1.5 px-3 text-xs font-mono text-gray-500">{j.ticket_id?.slice(0, 12)}</td>
                <td className="py-1.5 px-3 text-xs font-medium">{j.tool}</td>
                <td className="py-1.5 px-3">
                  <span className={`text-[11px] px-1.5 py-0.5 rounded-full ${JOB_STATUS_COLORS[j.status] || "bg-gray-100"}`}>{j.status}</span>
                </td>
                <td className="py-1.5 px-3 text-xs text-gray-400">{j.duration_s > 0 ? `${j.duration_s}s` : "—"}</td>
                <td className="py-1.5 px-3 text-xs text-red-400 truncate max-w-[200px]">{j.error || ""}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  );
}

export default HumanJobsList;
