// screens-delivery.jsx — "Rook's on the run" live delivery tracker

function DeliveryTracker({ onBack }) {
  const d = ACTIVE_DELIVERY;
  const doneCount = d.stops.filter(s => s.state === 'done').length;
  const activeStop = d.stops.find(s => s.state === 'active');
  const ahead = d.stops.findIndex(s => s.you) - d.stops.findIndex(s => s.state === 'active');

  return (
    <div className="screen-push anim-in">
      <PushHeader title="On the run" onBack={onBack} />
      <div className="scroll" style={{ paddingBottom: 30 }}>
        {/* status hero */}
        <div style={{ margin: '4px 20px 18px', padding: 20, borderRadius: 22, background: 'var(--ink)', color: 'var(--paper)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -18, top: -18, opacity: 0.1 }}><Icon name="truck" size={140} color="var(--paper)" /></div>
          <div className="kicker" style={{ color: 'color-mix(in oklab, var(--paper) 60%, transparent)' }}>{d.day}</div>
          <div className="t-display" style={{ fontSize: 27, marginTop: 8, lineHeight: 1.02 }}>Rook is {ahead <= 0 ? 'at your stop' : ahead + ' stop' + (ahead > 1 ? 's' : '') + ' away'}</div>
          <div style={{ display: 'flex', gap: 18, marginTop: 16, position: 'relative' }}>
            <div>
              <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, opacity: 0.6 }}>YOUR ETA</div>
              <div className="t-display" style={{ fontSize: 22, marginTop: 2 }}>~{activeStop ? activeStop.eta : '—'}</div>
            </div>
            <div style={{ width: 1, background: 'color-mix(in oklab, var(--paper) 18%, transparent)' }} />
            <div>
              <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, opacity: 0.6 }}>YOUR PACKS</div>
              <div className="t-display" style={{ fontSize: 22, marginTop: 2 }}>{d.packs} sealed</div>
            </div>
          </div>
        </div>

        {/* progress */}
        <div style={{ padding: '0 20px 6px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--ff-mono)', fontSize: 11, color: 'var(--ink-3)', marginBottom: 6 }}>
            <span>{doneCount} of {d.stops.length} stops done</span><span>{d.window}</span>
          </div>
          <div className="track"><span style={{ width: ((doneCount + 0.5) / d.stops.length) * 100 + '%' }} /></div>
        </div>

        {/* route timeline */}
        <div style={{ padding: '20px 24px 0' }}>
          <div className="kicker" style={{ marginBottom: 16 }}>Today's route</div>
          <div className="timeline">
            {d.stops.map((s, i) => {
              const c = s.state === 'done' ? 'var(--good)' : s.state === 'active' ? 'var(--accent)' : 'var(--line-2)';
              return (
                <div key={i} className="tl-row">
                  <div className="tl-line" />
                  <div className="tl-dot" style={{ background: c }}>
                    {s.state === 'active' && <span className="tl-ping" />}
                    {s.state === 'done' && <Icon name="check" size={12} color="#fff" sw={3} style={{ position: 'absolute', top: 3, left: 3 }} />}
                  </div>
                  <div style={{ flex: 1, paddingTop: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ fontWeight: 700, fontSize: 15, color: s.state === 'next' ? 'var(--ink-3)' : 'var(--ink)' }}>{s.zone}</span>
                      {s.you && <span className="badge badge-accent" style={{ fontSize: 9.5 }}>You</span>}
                    </div>
                    <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10.5, color: 'var(--ink-3)', marginTop: 2 }}>
                      {s.state === 'done' ? 'Delivered' : s.state === 'active' ? `In progress · ETA ${s.eta}` : 'Up next'}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* note */}
        <div style={{ padding: '22px 20px 0' }}>
          <div className="card" style={{ padding: 16, background: 'var(--surface-2)', display: 'flex', gap: 11, alignItems: 'center' }}>
            <Icon name="info" size={20} color="var(--ink-2)" />
            <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.4 }}>We'll text you a heads-up at <b style={{ color: 'var(--ink)' }}>2 stops out</b>. Leave a porch note if you won't be home — Rook will tuck it safe.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DeliveryTracker });