/*
 * ShipmentsList — middle rail of the ops surface.
 * Lists active embarques (shipments) with origin → destination, container, ETA, status pill.
 * Selecting a row drives the right-hand ChatArea/ShipmentDetail component.
 */
const ShipmentsList = ({ shipments = [], activeId, onSelect = () => {} }) => {
  return (
    <section className="tm-list" aria-label="Embarques activos">
      <header className="tm-list__head">
        <div>
          <div className="tx-caption" style={{ color: "var(--brand-blue-600)" }}>Embarques · 412 activos</div>
          <h2 className="tx-h3" style={{ margin: "2px 0 0" }}>En tránsito</h2>
        </div>
        <button className="btn btn-primary" style={{ height: 36, padding: "0 14px" }}>
          + Nuevo
        </button>
      </header>

      <div className="tm-list__filter">
        <input className="input" placeholder="Buscar por BL, contenedor, cliente…" />
      </div>

      <ul className="tm-list__items" role="list">
        {shipments.map((s) => {
          const isActive = s.id === activeId;
          return (
            <li key={s.id}>
              <button
                type="button"
                className={"tm-list__item " + (isActive ? "is-active" : "")}
                onClick={() => onSelect(s.id)}
              >
                <div className="tm-list__row">
                  <span className="tm-route">{s.origin} → {s.destination}</span>
                  <span className={"pill pill-" + s.statusTone}>{s.statusLabel}</span>
                </div>
                <div className="tm-list__row2">
                  <span className="tx-mono">{s.container}</span>
                  <span className="tx-body-sm" style={{ color: "var(--muted)" }}>{s.eta}</span>
                </div>
                <div className="tm-list__row3">
                  <span className="tx-body-sm">{s.customer}</span>
                  <span className="tx-body-sm" style={{ color: "var(--muted)" }}>{s.carrier}</span>
                </div>
              </button>
            </li>
          );
        })}
      </ul>
    </section>
  );
};
window.ShipmentsList = ShipmentsList;
globalThis.ShipmentsList = ShipmentsList;