import type { SubProcessStat } from '../lib/api';

interface SubProcessTableProps {
  processes: SubProcessStat[];
  onSelect?: (pid: number) => void;
  selectedPid?: number | null;
}

const statusDot: Record<string, string> = {
  running: 'bg-green-500',
  stopped: 'bg-yellow-500',
  error: 'bg-red-500',
};

const statusLabel: Record<string, string> = {
  running: '● running',
  stopped: '● halted',
  error: '● error',
};

export default function SubProcessTable({ processes, onSelect, selectedPid }: SubProcessTableProps) {
  if (processes.length === 0) {
    return (
      <div className="p-4 bg-bg-secondary border border-border-default rounded text-center">
        <p className="text-text-muted">No managed subprocesses.</p>
        <p className="text-text-muted text-sm mt-1">
          The agent has not spawned any processes for this session.
        </p>
      </div>
    );
  }

  const runningCount = processes.filter((p) => p.status === 'running').length;

  return (
    <div className="bg-bg-secondary border border-border-default rounded overflow-hidden">
      <div className="p-2 border-b border-border-subtle bg-bg-tertiary flex items-center justify-between">
        <h3 className="text-xs font-semibold text-text-secondary uppercase tracking-wider">
          SubProcess Monitor ({runningCount} running)
        </h3>
        <span className="text-xs text-text-muted">{processes.length} total</span>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-xs font-mono">
          <thead>
            <tr className="border-b border-border-subtle text-text-muted">
              <th className="text-left p-2 font-semibold">PID</th>
              <th className="text-left p-2 font-semibold">CMD</th>
              <th className="text-left p-2 font-semibold">PROJECT</th>
              <th className="text-left p-2 font-semibold">STATUS</th>
              <th className="text-right p-2 font-semibold">UPDATED</th>
            </tr>
          </thead>
          <tbody>
            {processes.map((proc) => (
              <tr
                key={proc.pid}
                onClick={() => onSelect?.(proc.pid)}
                className={`border-b border-border-subtle last:border-0 transition-colors ${
                  selectedPid === proc.pid
                    ? 'bg-bg-elevated'
                    : onSelect
                      ? 'cursor-pointer hover:bg-bg-elevated/50'
                      : ''
                }`}
              >
                <td className="p-2 text-text-primary">{proc.pid}</td>
                <td className="p-2 text-text-primary">{proc.command}</td>
                <td className="p-2 text-text-secondary">{proc.projectSlug}</td>
                <td className="p-2">
                  <span className={`${statusDot[proc.status] ?? 'bg-gray-500'} inline-block w-1.5 h-1.5 rounded-full mr-1.5 align-middle`} />
                  <span className="text-text-secondary align-middle">{statusLabel[proc.status] ?? proc.status}</span>
                </td>
                <td className="p-2 text-text-muted text-right whitespace-nowrap">
                  {new Date(proc.updatedAt).toLocaleTimeString()}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
