/* global window, React */
// ============================================================
// Confirm modal — choose fleet/carrier to confirm trip with
// ============================================================

const { useState: useConfirmState } = React;

function ConfirmModal({ trip, onCancel, onConfirm }) {
  const recommended = trip.fleetOptions.find(o => o.recommended);
  const [pick, setPick] = useConfirmState(recommended ? trip.fleetOptions.indexOf(recommended) : 0);

  const fleetPillKind = {
    private: 'green', dedicated: 'amber', market: 'blue', spot: 'red',
  };

  return (
    <div className="modal__overlay" onClick={onCancel}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal__head">
          <div className="modal__eyebrow">Confirm trip · {trip.id}</div>
          <div className="modal__title">{trip.route.from} → {trip.route.to}</div>
          <div className="modal__sub">
            Confirming will fire status <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink)' }}>CONFIRMED</span>,
            send load instructions to WMS pick queue, and trigger {' '}
            {trip.fleetOptions[pick]?.kind === 'private'
              ? <span>DAE for driver assignment.</span>
              : <span>tender to {trip.fleetOptions[pick]?.name || 'carrier'}.</span>}
          </div>
        </div>

        <div className="modal__body">
          <div className="overview__section-title" style={{ marginBottom: 8 }}>
            <span>Choose fleet · carrier</span>
            <span style={{ fontFamily: 'var(--font-sans)', textTransform: 'none', letterSpacing: 0, fontSize: 11 }}>
              Agent recommends the green-flagged option
            </span>
          </div>

          <div className="fleet-pick">
            {trip.fleetOptions.map((opt, i) => {
              const isSelected = pick === i;
              const isDisabled = opt.unavailable;
              return (
                <div
                  key={i}
                  className={`fleet-pick__opt ${isSelected && !isDisabled ? 'selected' : ''} ${isDisabled ? 'disabled' : ''}`}
                  onClick={() => !isDisabled && setPick(i)}
                >
                  <div className="fleet-pick__radio"></div>
                  <div className="fleet-pick__body">
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                      <span className={`pill pill--${fleetPillKind[opt.kind]}`}>{
                        { private: 'Private', dedicated: 'Dedicated', market: 'Market', spot: 'Spot' }[opt.kind]
                      }</span>
                      <div className="fleet-pick__name" style={{ textDecoration: isDisabled ? 'line-through' : 'none' }}>
                        {opt.name}
                      </div>
                    </div>
                    <div className="fleet-pick__meta">
                      {opt.meta.map(([k, v]) => `${k}: ${v}`).join(' · ')}
                    </div>
                    {opt.note && (
                      <div style={{
                        marginTop: 6,
                        fontSize: 11.5,
                        color: opt.note.kind === 'danger' ? 'var(--red-2)' :
                               opt.note.kind === 'warn' ? 'var(--amber-2)' : 'var(--ink-2)',
                        fontWeight: opt.note.kind === 'danger' ? 500 : 400,
                      }}>{opt.note.text}</div>
                    )}
                  </div>
                  {opt.recommended && <span className="fleet-pick__rec">RECOMMENDED</span>}
                </div>
              );
            })}
          </div>

          {/* Agent rationale */}
          <div style={{
            marginTop: 14,
            padding: '10px 12px',
            background: 'var(--purple-bg)',
            border: '1px solid var(--purple-bg-2)',
            borderRadius: 'var(--r-md)',
            display: 'flex', gap: 10,
            fontSize: 12,
            color: 'var(--ink-2)',
            lineHeight: 1.5,
          }}>
            <span style={{
              width: 22, height: 22, background: 'var(--purple)', color: 'white',
              borderRadius: 4, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 11, flexShrink: 0,
            }}>TP</span>
            <span><span style={{ color: 'var(--purple-2)', fontWeight: 600, marginRight: 4 }}>Agent:</span>{trip.fleetSummary}</span>
          </div>
        </div>

        <div className="modal__foot">
          <button className="btn" onClick={onCancel}>Cancel</button>
          <button
            className="btn btn--primary"
            disabled={trip.fleetOptions[pick]?.unavailable}
            onClick={() => onConfirm(trip.fleetOptions[pick])}
          >
            ✓ Confirm with {trip.fleetOptions[pick]?.name || 'selected'}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ConfirmModal });