import type { WorkerInfo } from "../types";

interface Props {
  workers: WorkerInfo[];
}

const STATE_COLORS: Record<string, string> = {
  idle: "var(--text-muted)",
  processing: "var(--processing)",
  retry: "#f97316",
  stopped: "var(--error)",
};

export function WorkerPanel({ workers }: Props) {
  return (
    <div className="worker-panel">
      <div className="panel-header">
        <h2>Workers</h2>
      </div>
      <div className="worker-cards">
        {workers.map((w) => (
          <div key={w.worker_id} className="worker-card">
            <div className="worker-header">
              <span className="worker-name">{w.worker_id}</span>
              <span
                className="worker-state"
                style={{ color: STATE_COLORS[w.state] || "var(--text-secondary)" }}
              >
                {w.state}
              </span>
            </div>
            {w.current_chunk !== undefined && (
              <div className="worker-chunk">chunk #{w.current_chunk}</div>
            )}
            <div className="worker-stats">
              <span>done: {w.processed}</span>
              <span>err: {w.errors}</span>
              <span>retry: {w.retries}</span>
            </div>
          </div>
        ))}
        {workers.length === 0 && (
          <div className="worker-empty">No workers started</div>
        )}
      </div>
    </div>
  );
}