// PhaseStrip — horizontal pipeline of 6 phase pills with a flowing connector line.

function PhaseStrip({ phases, active, setActive, selectedAgent, setSelectedAgent }) {
  const { React, Icon, AgentCircle } = window;
  return (
    <div className="phase-strip" role="tablist" aria-label="pipeline phases" data-pipeline>
      {/* connector line behind the pills */}
      <div className="phase-connector">
        <div className="phase-connector-line" />
        <div
          className="phase-connector-fill"
          style={{ width: `calc(${(active / (phases.length - 1)) * 100}% )` }}
        />
      </div>

      <div className="phase-strip-row">
        {phases.map((p, i) => {
          const isActive = i === active;
          const isPast   = i < active;
          return (
            <div key={p.id} className={`phase-cell ${isActive ? 'is-active' : ''} ${isPast ? 'is-past' : ''}`}>
              <button
                role="tab"
                aria-selected={isActive}
                className="phase-pill"
                onClick={() => setActive(i)}
                tabIndex={0}
                data-pipeline
              >
                <span className="phase-num">{String(p.id).padStart(2,'0')}</span>
                <span className="phase-icon"><Icon name={p.icon} size={18} /></span>
                <span className="phase-name">{p.name}</span>
                <span className="phase-counter">{p.counter}</span>
              </button>

              {/* Fan-out agents — only render for active phase */}
              {isActive && (
                <div className="phase-fan">
                  {p.agents.map((a, idx) => (
                    <AgentCircle
                      key={a.id}
                      agent={a}
                      i={idx}
                      total={p.agents.length}
                      isSelected={selectedAgent && selectedAgent.id === a.id}
                      onSelect={setSelectedAgent}
                      isMore={a.kind === 'more'}
                    />
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}
window.PhaseStrip = PhaseStrip;