/* global window, React */
// ============================================================
// Trip detail — Tab 2: Routing feasibility
// ============================================================

function Timeline({ nodes }) {
  return (
    <div className="card timeline">
      {nodes.map((n, i) => (
        <div key={i} className="tl-node">
          <div className={`tl-dot tl-dot--${n.state}`}></div>
          <div>
            <div className="tl-time">{n.time}</div>
            <div className="tl-time-sub">{n.sub}</div>
          </div>
          <div className="tl-content">
            <div className="tl-title">{n.title}</div>
            <div className="tl-detail">{n.detail}</div>
            {n.note && typeof n.note === 'string' && <span className="tl-note">{n.note}</span>}
            {n.note && typeof n.note === 'object' && <span className={`tl-note ${n.note.kind}`}>{n.note.text}</span>}
          </div>
          <div></div>
        </div>
      ))}
    </div>
  );
}

function HOSGrid({ hos }) {
  const gapNegative = hos.gap.startsWith('−') || hos.gap.startsWith('-');
  return (
    <div className="hos-grid">
      <div className="hos-cell">
        <div className="hos-cell__label">Drive time required</div>
        <div className="hos-cell__value">{hos.drive}</div>
        <div className="hos-cell__sub">Total drive duration this trip</div>
      </div>
      <div className={`hos-cell ${gapNegative ? 'hos-cell--bad' : 'hos-cell--ok'}`}>
        <div className="hos-cell__label">Best HOS available · private</div>
        <div className="hos-cell__value">{hos.best}</div>
        <div className="hos-cell__sub">Top eligible driver on 70-hour clock</div>
      </div>
      <div className={`hos-cell ${gapNegative ? 'hos-cell--bad' : 'hos-cell--ok'}`}>
        <div className="hos-cell__label">Gap</div>
        <div className="hos-cell__value">{hos.gap}</div>
        <div className="hos-cell__sub">{gapNegative ? 'Private fleet cannot cover this trip' : 'Private fleet covers this trip'}</div>
      </div>
      <div className={`hos-cell ${gapNegative ? 'hos-cell--ok' : ''}`}>
        <div className="hos-cell__label">Carrier available</div>
        <div className="hos-cell__value">{hos.carrier}</div>
        <div className="hos-cell__sub">{gapNegative ? 'Bridges HOS gap — see Fleet tab' : 'Backup only'}</div>
      </div>
    </div>
  );
}

function ConstraintList({ items }) {
  const icon = (s) => s === 'pass' ? '✓' : s === 'warn' ? '!' : '✕';
  return (
    <div className="card cx-list">
      {items.map((c, i) => (
        <div key={i} className="cx-row">
          <span className={`cx-status ${c.status}`}>{icon(c.status)}</span>
          <span className="cx-name">{c.name}</span>
          <span className="cx-detail">{c.detail}</span>
          <span className="cx-value">{c.value}</span>
        </div>
      ))}
    </div>
  );
}

function RoutingTab({ trip }) {
  const r = trip.routing;
  return (
    <div>
      <div className="section">
        <div className="section__head">
          <div className="section__title">Route map</div>
          <div className="section__sub">{trip.route.from} → {trip.route.to} · pickup, driver swaps, delivery</div>
        </div>
        <div className="card route-map-card">
          <window.RouteMap trip={trip} height={340} />
        </div>
      </div>

      <div className="section">
        <div className="section__head">
          <div className="section__title">Route timeline</div>
          <div className="section__sub">{trip.route.from} → {trip.route.to}</div>
        </div>
        <Timeline nodes={r.nodes} />
      </div>

      <div className="section">
        <div className="section__head">
          <div className="section__title">Hours of Service · feasibility</div>
        </div>
        <HOSGrid hos={r.hos} />
      </div>

      <div className="section">
        <div className="section__head">
          <div className="section__title">Route constraints · {r.constraints.length} checks</div>
        </div>
        <ConstraintList items={r.constraints} />
      </div>
    </div>
  );
}

Object.assign(window, { RoutingTab });