/* eslint-disable no-undef */
// TRACK — post-order status screen. Animated step bar, courier card,
// ETA, mini map placeholder. Closes the flow with a "wow" recap.

function TrackScreen() {
  const steps = [
    { l: 'ORDERED', done: true },
    { l: 'GRILLING', done: true },
    { l: 'PACKED', done: true },
    { l: 'EN ROUTE', done: false, active: true },
    { l: 'DELIVERED', done: false },
  ];
  return (
    <div style={{
      background: 'var(--seasalt)', color: 'var(--black)',
      position: 'absolute', inset: 0, overflow: 'auto', paddingBottom: 50,
    }}>
      {/* TopBar */}
      <ConceptTopBar fg="#0A0505"
        left={
          <button style={{
            all: 'unset', cursor: 'pointer',
            width: 40, height: 40, borderRadius: 99,
            background: 'rgba(10,5,5,0.92)', color: '#FAFAFA',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none">
              <path d="M2 2 L12 12 M12 2 L2 12"/>
            </svg>
          </button>
        }
        center={
          <div className="tb-mono" style={{ fontSize: 10, letterSpacing: '0.14em' }}>
            ORDER · #2841
          </div>
        }
      />

      {/* HERO STATUS card — red, big */}
      <div style={{
        margin: '12px 16px 0', padding: 18,
        background: 'var(--rojo)', color: 'var(--black)',
        borderRadius: 18, position: 'relative', overflow: 'hidden',
      }}>
        <div className="tb-mono" style={{ fontSize: 9, opacity: 0.7, marginBottom: 6 }}>
          ON THE WAY · COURIER
        </div>
        <div className="tb-display" style={{ fontSize: 48, lineHeight: 0.95 }}>
          08:32
        </div>
        <div className="tb-mono" style={{ fontSize: 10, opacity: 0.7, marginTop: 8 }}>
          ARRIVAL IN ~8 MIN · GETTING WARM
        </div>

        {/* mini map background */}
        <svg viewBox="0 0 400 200" preserveAspectRatio="none"
          style={{ position: 'absolute', right: -30, top: -20, width: 240, height: 140, opacity: 0.18 }}>
          <path d="M 10 180 C 80 60, 180 200, 280 80 S 420 120, 460 30"
            fill="none" stroke="#0A0505" strokeWidth="2" strokeLinecap="round"/>
          <path d="M 10 180 C 80 60, 180 200, 280 80" strokeDasharray="3 4"
            fill="none" stroke="#0A0505" strokeWidth="2" strokeLinecap="round"/>
          <circle cx="280" cy="80" r="6" fill="#0A0505"/>
        </svg>

        {/* moving courier dot */}
        <div style={{
          position: 'absolute', right: 30, bottom: 18,
          width: 16, height: 16, borderRadius: 99,
          background: 'var(--black)',
          animation: 'tb-pulse 1.6s ease-in-out infinite',
        }}/>
      </div>

      {/* STEP TRACKER */}
      <div style={{ margin: '14px 16px 0' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 4,
          padding: '8px 0',
        }}>
          {steps.map((s, i) => (
            <React.Fragment key={s.l}>
              <div style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                flex: '0 0 auto',
              }}>
                <div style={{
                  width: 22, height: 22, borderRadius: 99,
                  background: s.done ? 'var(--black)' : (s.active ? 'var(--rojo)' : 'rgba(10,5,5,0.10)'),
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#FAFAFA',
                  animation: s.active ? 'tb-pulse 1.8s ease-in-out infinite' : 'none',
                }}>
                  {s.done && (
                    <svg width="10" height="8" viewBox="0 0 10 8" stroke="#FAFAFA" strokeWidth="1.8" strokeLinecap="round" fill="none">
                      <path d="M1 4 L4 7 L9 1"/>
                    </svg>
                  )}
                </div>
                <div className="tb-mono" style={{
                  fontSize: 7.5, letterSpacing: '0.06em',
                  color: s.done || s.active ? 'var(--black)' : 'rgba(10,5,5,0.4)',
                }}>{s.l}</div>
              </div>
              {i < steps.length - 1 && (
                <div style={{
                  flex: 1, height: 2, marginTop: -16, marginInline: 2,
                  background: s.done ? 'var(--black)' : 'rgba(10,5,5,0.10)',
                  position: 'relative', overflow: 'hidden',
                }}>
                  {s.done && steps[i+1].active && (
                    <div style={{
                      position: 'absolute', top: 0, bottom: 0, width: '40%',
                      background: 'linear-gradient(90deg, transparent, var(--rojo), transparent)',
                      animation: 'tb-shimmer 1.6s linear infinite',
                    }}/>
                  )}
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* COURIER card */}
      <div style={{
        margin: '14px 16px 0', padding: 14,
        background: '#fff', borderRadius: 16,
        border: '1px solid rgba(10,5,5,0.08)',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div className="tb-placeholder" data-label="COURIER" style={{
          width: 48, height: 48, borderRadius: 99,
        }}/>
        <div style={{ flex: 1 }}>
          <div className="tb-mono" style={{ fontSize: 8, opacity: 0.55, marginBottom: 2 }}>COURIER</div>
          <div className="tb-display" style={{ fontSize: 14 }}>ASLAN · A 123 BC</div>
          <div className="tb-mono" style={{ fontSize: 9, opacity: 0.55, marginTop: 2 }}>
            ★ 4.9 · 1,243 RIDES
          </div>
        </div>
        <button style={{
          all: 'unset', cursor: 'pointer',
          width: 40, height: 40, borderRadius: 99,
          background: 'var(--black)', color: '#FAFAFA',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none">
            <path d="M2 3 C2 2.5 2.5 2 3 2 H5 L6 5 L4.5 6 C5.5 8 6 8.5 8 9.5 L9 8 L12 9 V11 C12 11.5 11.5 12 11 12 C6 12 2 8 2 3 Z"/>
          </svg>
        </button>
      </div>

      {/* ORDER ITEMS */}
      <div style={{ margin: '14px 16px 0' }}>
        <div className="tb-mono" style={{ fontSize: 9, opacity: 0.55, marginBottom: 8, letterSpacing: '0.14em' }}>
          YOUR ORDER · 3 ITEMS
        </div>
        {[
          { n: 'SIGNATURE × 2', p: '138 000' },
          { n: 'TRUFFLE ADD-ON', p: '8 000' },
          { n: 'COLA · 0.5', p: '12 000' },
        ].map((it, i) => (
          <div key={it.n} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '10px 0', borderBottom: i < 2 ? '1px solid rgba(10,5,5,0.06)' : 'none',
          }}>
            <div className="tb-display" style={{ fontSize: 13 }}>{it.n}</div>
            <div className="tb-mono" style={{ fontSize: 11 }}>{it.p}</div>
          </div>
        ))}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--black)',
        }}>
          <div className="tb-display" style={{ fontSize: 14 }}>TOTAL</div>
          <div className="tb-display" style={{ fontSize: 22 }}>158 000 UZS</div>
        </div>
      </div>
    </div>
  );
}

window.TrackScreen = TrackScreen;