import { useConsole } from "../context";
import { Card, Bar, DataListRaw } from "../components/ui";
import { workerAgeText, shortId } from "../api/client";
import { chvAvailability, chvAvailabilityText } from "../api/chv";

export default function WorkersSection() {
  const ctx = useConsole();
  const chvAvail = chvAvailability(ctx.workers, ctx.workersSummary, ctx.workersError);
  return (
    <Card id="nav-workers" title="Workers">
      <Bar><button onClick={ctx.refreshWorkers}>刷新</button></Bar>
      <div className="muted" aria-live="polite">
        {chvAvailabilityText(chvAvail)}
      </div>
      {ctx.workersError ? <div className="muted">{ctx.workersError}</div>
        : ctx.workers === null ? <div className="muted">{ctx.workersSummary || "未加载"}</div>
        : ctx.workers.length === 0 ? <div className="muted">无 worker 注册</div>
        : (
          <DataListRaw>
            {ctx.workers.map((w, i) => {
              const run = w.running === undefined || w.running === null ? "?" : w.running;
              const cap = w.capacity === undefined || w.capacity === null ? "?" : w.capacity;
              const info = workerAgeText(w);
              const alive = w.alive !== undefined && w.alive !== null ? !!w.alive : (info.age !== null && info.age <= 120);
              const live = alive ? " / 在线" : " / 离线（占用为上次上报值）";
              return (
                <li key={i} className={alive ? "is-online" : "is-offline"}>
                  <span className="row-main">
                    {w.worker_id || w.id || "?"} / {w.executor || ""} / 占用 {run}/{cap}{live} / 最后心跳 {info.text}
                  </span>
                </li>
              );
            })}
          </DataListRaw>
        )}
    </Card>
  );
}