/* Active jobs card — list with progress bars + per-job P&L hint */

function JobsPanel({ onOpenJob }) {
  const statusLabel = { 'on-track': 'On track', 'at-risk': 'At risk', 'over': 'Over budget' };

  return (
    <section className="cb-panel">
      <PanelHeader
        eyebrow="Active jobs"
        title={`${CB.jobs.length} in progress`}
        sub={`${CB.jobs.filter((j) => j.status !== 'on-track').length} need attention`}
        right={
          <button type="button" className="cb-btn cb-btn-ghost">
            All jobs <IconChevRight size={14} />
          </button>
        }
      />
      <ul className="cb-jobs">
        {CB.jobs.map((j) => {
          const burn = Math.round((j.spent / j.budget) * 100);
          const over = j.spent > j.budget;
          return (
            <li key={j.id} className="cb-job" onClick={() => onOpenJob && onOpenJob(j)}>
              <div className="cb-job-top">
                <div className="cb-job-id">
                  <span className="cb-job-num">{j.id}</span>
                  <span className={`cb-status cb-status-${j.status}`}>
                    <i /> {statusLabel[j.status]}
                  </span>
                </div>
                <div className="cb-job-amt">
                  <b>{CB.fmtMoney(j.spent)}</b>
                  <span>of {CB.fmtMoney(j.budget)}</span>
                </div>
              </div>
              <div className="cb-job-name">{j.name}</div>
              <div className="cb-job-meta">
                <span>{j.client}</span>
                <span className="cb-dot" />
                <span>{j.phase}</span>
                <span className="cb-dot" />
                <span>Due {CB.fmtDate(j.due)}</span>
              </div>
              <div className="cb-progress" data-status={j.status}>
                <div className="cb-progress-bar"
                     style={{ width: Math.min(100, burn) + '%' }} />
                {over && <div className="cb-progress-over"
                              style={{ width: Math.min(100, burn - 100) + '%' }} />}
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

Object.assign(window, { JobsPanel });