const NODES = [
  { label: 'Salida' },
  { label: 'Tramo 1' },
  { label: 'Tramo 2' },
  { label: 'Tramo 3' },
  { label: 'Tramo 4' },
  { label: 'Tramo 5' },
  { label: 'Tramo 6' },
  { label: 'Final' },
]

export default function RouteProgress({ posicionActual = 1, totalNodos = 8, progresoPct = 0 }) {
  // El simulador usa índice desde 1, el array desde 0
  const idx = posicionActual - 1

  return (
    <div style={styles.container}>
      <div style={styles.title}>Progreso de ruta · sin ubicación exacta</div>

      <div style={styles.track}>
        {NODES.map((node, i) => (
          <div key={i} style={styles.nodeWrapper}>
            {i > 0 && (
              <div style={{
                ...styles.connector,
                background: i <= idx ? '#00d4a0' : 'rgba(255,255,255,0.1)',
              }} />
            )}
            <div style={{
              ...styles.dot,
              ...(i < idx  ? styles.dotDone    : {}),
              ...(i === idx ? styles.dotCurrent : {}),
              ...(i > idx  ? styles.dotPending : {}),
            }}>
              {i < idx ? '✓' : i === idx ? '🚛' : i + 1}
            </div>
            <div style={styles.label}>{node.label}</div>
          </div>
        ))}
      </div>

      <div style={styles.disclaimer}>
        La posición exacta del camión es privada · avance: {progresoPct}%
      </div>
    </div>
  )
}

const styles = {
  container:   { background: '#131820', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 12, padding: '14px 16px', marginBottom: 10 },
  title:       { fontSize: 11, fontWeight: 500, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#6b7f96', marginBottom: 14 },
  track:       { display: 'flex', alignItems: 'flex-start', overflowX: 'auto', paddingBottom: 4 },
  nodeWrapper: { display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 1, position: 'relative', minWidth: 44 },
  connector:   { position: 'absolute', top: 13, right: '50%', width: '100%', height: 2, transition: 'background 0.5s' },
  dot:         { width: 28, height: 28, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 600, position: 'relative', zIndex: 1, transition: 'all 0.5s', marginBottom: 6 },
  dotDone:     { background: '#00d4a0', color: '#0a1e15' },
  dotCurrent:  { background: '#3d9aff', color: '#fff', boxShadow: '0 0 0 4px rgba(61,154,255,0.25)' },
  dotPending:  { background: '#1f2d42', color: '#6b7f96', border: '1px solid rgba(255,255,255,0.14)' },
  label:       { fontSize: 9, color: '#6b7f96', textAlign: 'center', lineHeight: 1.3, whiteSpace: 'pre-line' },
  disclaimer:  { fontSize: 10, color: '#3d5570', textAlign: 'center', marginTop: 10, fontStyle: 'italic' },
}