/* global window, React */
// ============================================================
// Trip detail — Tab 3: Fleet & Carrier
// ============================================================

function DriverChip({ d }) {
  return (
    <span className="driver-chip">
      <span className="driver-chip__avatar">{d.initial}</span>
      <span className="driver-chip__name">{d.name}</span>
      <span className="driver-chip__meta">· {d.hos} · {d.score}</span>
      <span className="driver-chip__badges">
        {d.badges.map(b => <span key={b} className="driver-chip__badge">{b}</span>)}
      </span>
    </span>
  );
}

function FleetCard({ opt, onConfirm }) {
  const cls = [
    'fleet-card',
    opt.recommended && 'fleet-card--recommended',
    opt.unavailable && 'fleet-card--unavailable',
    opt.spot && 'fleet-card--spot',
  ].filter(Boolean).join(' ');

  const kindLabel = {
    private: 'Private fleet',
    dedicated: 'Dedicated',
    market: 'Market vehicle',
    spot: 'Spot market',
  }[opt.kind];

  const kindPill = {
    private: 'green',
    dedicated: 'amber',
    market: 'blue',
    spot: 'red',
  }[opt.kind];

  const c2s = opt.costToServe;
  const c2sBench = 7.5; // lane benchmark
  const c2sKind = c2s == null ? 'na' : c2s > c2sBench * 1.2 ? 'red' : c2s < c2sBench * 0.8 ? 'green' : 'amber';

  return (
    <div className={cls}>
      {opt.recommended && <span className="recommended-badge">RECOMMENDED</span>}
      <div>
        <div className="fleet-card__head">
          <span className={`pill pill--${kindPill}`}>{kindLabel}</span>
          <span className={`fleet-card__name ${opt.unavailable ? 'strike' : ''}`}>{opt.name}</span>
          {!opt.unavailable && c2s != null && (
            <span className={`c2s-pill c2s-pill--${c2sKind}`} title={`Cost to serve = carrier cost ÷ invoice value · lane benchmark ${c2sBench}%`}>
              <span className="c2s-pill__label">cost-to-serve</span>
              <span className="c2s-pill__value">{c2s}%</span>
              <span className="c2s-pill__delta">
                {c2s > c2sBench ? '+' : ''}{(c2s - c2sBench).toFixed(1)} vs lane
              </span>
            </span>
          )}
        </div>
        <div className="fleet-card__meta">
          {opt.meta.map(([k, v], i) => (
            <span key={i}>{k}: <span className="v">{v}</span></span>
          ))}
          {opt.costToServeDollar && (
            <span>Vs invoice <span className="v">${opt.costToServeDollar.toLocaleString()} / ${(opt.costToServeDollar / (c2s / 100)).toLocaleString(undefined,{maximumFractionDigits:0})}</span></span>
          )}
        </div>
        {opt.drivers && (
          <div className="fleet-card__drivers">
            {opt.drivers.map(d => <DriverChip key={d.name} d={d} />)}
          </div>
        )}
        {opt.note && <div className={`fleet-card__note ${opt.note.kind}`}>{opt.note.text}</div>}
      </div>
      {opt.cta && (
        <button
          className={`fleet-card__cta fleet-card__cta--${opt.ctaKind || 'default'}`}
          onClick={onConfirm}
          disabled={opt.unavailable}
        >
          {opt.cta}
        </button>
      )}
    </div>
  );
}

function FleetTab({ trip, onConfirm }) {
  const invoice = trip.loadInvoice;
  const c2sBench = 7.5;
  return (
    <div>
      <div className="fleet-summary">
        <div>{trip.fleetSummary}</div>
        {invoice && (
          <div className="fleet-summary__econ">
            <span><span className="lbl">Load invoice</span><span className="val">${invoice.toLocaleString()}</span></span>
            <span><span className="lbl">Lane benchmark CtS</span><span className="val">{c2sBench}%</span></span>
            <span><span className="lbl">Eligible options</span><span className="val">{trip.fleetOptions.filter(o => !o.unavailable).length} of {trip.fleetOptions.length}</span></span>
          </div>
        )}
      </div>
      <div className="fleet-cards">
        {trip.fleetOptions.map((opt, i) => (
          <FleetCard key={i} opt={opt} onConfirm={() => onConfirm(opt)} />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { FleetTab });