// Wave roadmap — program-level Gantt across 6 quarters.

function WaveRoadmap() {
  const s = ProgramStore.useStore();

  const qCount = s.quarters.length;
  const pct = (v) => `${(v / qCount * 100).toFixed(2)}%`;

  // Group roadmap items by program, preserve portfolio order
  const byProgram = {};
  for (const p of s.programs) byProgram[p.id] = [];
  for (const r of s.roadmap) {
    if (byProgram[r.program]) byProgram[r.program].push(r);
  }

  return (
    <div className="cio-card wr-wrap">
      <div className="cio-card-head">
        <div>
          <span className="eyebrow">Roadmap · 6 quarters</span>
          <h3>Program timeline, dependencies, and critical path</h3>
        </div>
        <span className="right">Today: Q2 2026</span>
      </div>

      <div className="wr-header">
        <span>Program</span>
        <div className="wr-quarters">
          {s.quarters.map((q, i) => <span key={i}>{q.label}</span>)}
        </div>
      </div>

      <div className="wr-rows">
        {s.programs.map(p => {
          const items = byProgram[p.id] || [];
          return (
            <div key={p.id} className="wr-row">
              <div className="wr-label">
                {p.name}
                <span className="tag">{p.id}</span>
              </div>
              <div className="wr-track">
                {/* Today line */}
                <div className="wr-today" style={{ left: pct(s.today) }}/>
                {/* Bars */}
                {items.map(it => (
                  <div key={it.id}
                       className={`wr-bar ${it.status}`}
                       style={{ left: pct(it.start), width: pct(it.end - it.start) }}
                       title={`${it.label} · ${it.status}`}>
                    {it.label}
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}