/* global window, React */
// ============================================================
// Right column — Demand context sidebar
// ============================================================

function DemandSidebar({ trip }) {
  const wave = window.WAVE_INFO;
  return (
    <aside className="demand" data-screen-label="Demand context">
      <div className="demand__block">
        <div className="demand__block-title">Wave 7 · summary</div>
        <div className="wave-stats">
          <div className="wave-stat">
            <div className="wave-stat__value">31</div>
            <div className="wave-stat__label">Trips this wave</div>
          </div>
          <div className="wave-stat">
            <div className="wave-stat__value">18</div>
            <div className="wave-stat__label">Orders in pool</div>
          </div>
          <div className="wave-stat">
            <div className="wave-stat__value red">4</div>
            <div className="wave-stat__label">OTIF-sensitive</div>
          </div>
          <div className="wave-stat">
            <div className="wave-stat__value">7</div>
            <div className="wave-stat__label">Need review</div>
          </div>
        </div>
      </div>

      <div className="demand__block">
        <div className="demand__block-title">5-day capacity</div>
        <div className="day-grid">
          {wave.daysGrid.map(d => (
            <div key={d.day} className={`day-cell ${d.state}`}>
              <div className="day-label">{d.day}</div>
              <div className="day-val">{d.loads}/{d.capacity}</div>
              {d.gap > 0 && <div className="gap">gap {d.gap}</div>}
            </div>
          ))}
        </div>
      </div>

      <div className="demand__block">
        <div className="demand__block-title">
          Same-lane pool · {trip.route.to.split(' ')[0]}
        </div>
        <div className="pool-list">
          {trip.poolOrders.length === 0 && (
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', fontStyle: 'italic' }}>
              No pool orders on this lane.
            </div>
          )}
          {trip.poolOrders.map(p => (
            <div key={p.id} className="pool-item">
              <div>
                <div className="pool-item__cust">{p.customer}</div>
                <div className="pool-item__id">{p.id}</div>
                <div className="pool-item__meta">{p.meta}</div>
              </div>
              <button className="pool-item__add">+ Add</button>
            </div>
          ))}
        </div>
      </div>

      <div className="demand__block">
        <div className="demand__block-title">Adjacent trips · same lane</div>
        <div className="adj-list">
          {trip.adjacent.length === 0 && (
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', fontStyle: 'italic' }}>
              No adjacent trips.
            </div>
          )}
          {trip.adjacent.map(a => (
            <div key={a.id} className="adj-item">
              <div className="adj-item__row">
                <span className="adj-item__id">{a.id}</span>
                <span className="adj-item__util">{a.util}% util</span>
              </div>
              <div className="adj-item__bar"><div style={{ width: `${a.util}%` }}></div></div>
              <button className="adj-item__merge">⇄ Merge</button>
            </div>
          ))}
        </div>
      </div>
    </aside>
  );
}

Object.assign(window, { DemandSidebar });